🔖 v0.7.2

.gitignore

@@ -2,7 +2,6 @@
 .DS_Store
 
 # depend
-.husky
 node_modules
 
 # log

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.npmrc

@@ -1,2 +1,4 @@
+auto-install-peers=true
+
 registry=https://registry.npmmirror.com
 electron_mirror=https://registry.npmmirror.com/-/binary/electron/

.vscode/extensions.json

@@ -1,13 +1,18 @@
 {
  "recommendations": [
  "vue.volar",
+ "jaluik.dot-log",
  "syler.sass-indented",
  "gruntfuggly.todo-tree",
  "chunsen.bracket-select",
  "obkoro1.korofileheader",
+ "pranaygp.vscode-css-peek",
  "bradlc.vscode-tailwindcss",
+ "sdras.vue-vscode-snippets",
+ "aaron-bond.better-comments",
  "formulahendry.auto-close-tag",
  "formulahendry.auto-rename-tag",
- "vue.vscode-typescript-vue-plugin"
+ "vue.vscode-typescript-vue-plugin",
+ "meganrogge.template-string-converter"
  ]
 }

app/components/image.vue

@@ -10,7 +10,7 @@
  <!-- 图像 -->
  <img class="h-2/3" :src="image" alt="图像" />
  <!-- 备注 -->
- <p class="w-full bg-theme text-center text-lg">{{ remark }}</p>
+ <p class="bg-theme w-full text-center text-lg">{{ remark }}</p>
  </section>
 </template>
 

app/components/loading.vue

@@ -2,13 +2,13 @@
  * @Author: fzf404
  * @Date: 2022-09-28 17:05:18
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-10-23 21:44:10
+ * @LastEditTime: 2022-11-09 19:51:14
  * @Description: loading 组件
 -->
 <template>
  <section v-show="show" class="flex-col-center modal z-30 space-y-2">
  <!-- 加载动画 -->
- <LoadSVG class="w-16 load-rotating" />
+ <LoadSVG class="text-light load-rotating w-16" />
  <!-- 备注 -->
  <p class="text-intro" v-for="item in remark">{{ item }}</p>
  </section>

app/components/setting.vue

@@ -2,93 +2,102 @@
  * @Author: fzf404
  * @Date: 2022-07-23 21:02:45
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-10-23 21:44:56
+ * @LastEditTime: 2022-11-09 19:05:31
  * @Description: setting 组件
 -->
 <template>
- <aside class="flex-col-center modal setting z-40" v-show="store.setting.show">
- <!-- 设置框 -->
- <ul class="w-3/5 ring-4 rounded-lg px-4 py-3 pb-2 space-y-2" :class="{ 'w-3/4 px-3': size === 'wide' }">
- <!-- 项目列表 -->
- <li class="flex-row-between h-8 rounded px-2" v-for="item in setting">
- <!-- 标签 -->
- <label :for="item.id" class="flex space-x-0.5 text-xs">
- <span>
- {{ item.label }}
- </span>
- <HelpSVG v-show="item.help" class="w-3 self-center btn-svg text-gray" @click="openURL(item.help as string)" />
- </label>
- <!-- 选择框 -->
- <select
- v-if="item.type === 'select'"
- :id="item.id"
- class="w-3/5 px-2 py-1 rounded outline-none border-none text-xs"
- v-model.lazy="config[item.id]"
- >
- <option v-for="option in item.options" :value="option.value">
- {{ option.label }}
- </option>
- </select>
- <!-- 按钮 -->
- <button v-else-if="item.type === 'button'" class="w-1/3 btn btn-xs" :id="item.id" @click="item.options.click">
- {{ item.options.text }}
- </button>
- <!-- 复选框 -->
- <input
- v-else-if="item.type === 'checkbox'"
- :id="item.id"
- type="checkbox"
- class="w-4 h-4 outline-none"
- v-model.lazy="(config[item.id] as boolean)"
- @keyup.enter="onSave"
- />
- <!-- 数字输入框 -->
- <input
- v-else-if="item.type === 'number'"
- :id="item.id"
- type="number"
- class="w-3/5 px-2 py-1 rounded outline-none border-none text-right text-xs"
- v-model.lazy="config[item.id]"
- @keyup.enter="onSave"
- @input="
+ <transition name="fade" mode="out-in">
+ <aside class="flex-col-center modal setting z-40" v-show="pinia.showSetting">
+ <!-- 设置框 -->
+ <ul class="w-3/5 space-y-2 rounded-lg px-4 py-3 pb-2 ring-4" :class="{ 'w-3/4 px-3': size === 'wide' }">
+ <!-- 项目列表 -->
+ <li class="flex-row-between h-8 rounded px-2" v-for="item in setting">
+ <!-- 标签 -->
+ <label :for="item.id" class="flex space-x-0.5 text-xs">
+ <span>
+ {{ item.label }}
+ </span>
+ <HelpSVG
+ v-show="item.help"
+ class="btn-svg text-gray w-3 self-center"
+ @click="openURL(item.help as string)"
+ />
+ </label>
+ <!-- 选择框 -->
+ <select
+ v-if="item.type === 'select'"
+ :id="item.id"
+ class="w-3/5 rounded border-none px-2 py-1 text-xs outline-none"
+ v-model.lazy="store[item.id]"
+ >
+ <option v-for="option in item.options" :value="option.value">
+ {{ option.label }}
+ </option>
+ </select>
+ <!-- 按钮 -->
+ <button v-else-if="item.type === 'button'" class="btn btn-xs w-1/3" :id="item.id" @click="item.options.click">
+ {{ item.options.text }}
+ </button>
+ <!-- 复选框 -->
+ <input
+ v-else-if="item.type === 'checkbox'"
+ :id="item.id"
+ type="checkbox"
+ class="h-4 w-4 outline-none"
+ v-model.lazy="(store[item.id] as boolean)"
+ @keyup.enter="onSave"
+ />
+ <!-- 数字输入框 -->
+ <input
+ v-else-if="item.type === 'number'"
+ :id="item.id"
+ type="number"
+ class="w-3/5 rounded border-none px-2 py-1 text-right text-xs outline-none"
+ v-model.lazy="store[item.id]"
+ @keyup.enter="onSave"
+ @input="
  (event) => {
  // number 最大长度
  if ((event.target as HTMLInputElement).value.length > item.options.len)
  (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.slice(0, item.options.len)
  }
  "
- />
- <!-- 文本输入框 -->
- <input
- v-else-if="item.type === 'text'"
- :id="item.id"
- type="text"
- class="w-3/5 px-2 py-1 rounded outline-none border-none text-right text-xs"
- v-model.lazy="config[item.id]"
- @keyup.enter="onSave"
- />
- </li>
- <!-- 保存 -->
- <ol class="flex-row-center-right">
- <button @click="onSave" class="btn btn-sm">保存</button>
- </ol>
- </ul>
- </aside>
+ />
+ <!-- 文本输入框 -->
+ <input
+ v-else-if="item.type === 'text'"
+ :id="item.id"
+ type="text"
+ class="w-3/5 rounded border-none px-2 py-1 text-right text-xs outline-none"
+ v-model.lazy="store[item.id]"
+ @keyup.enter="onSave"
+ />
+ </li>
+ <!-- 保存 -->
+ <ol class="flex-row-center-right">
+ <button @click="onSave" class="btn btn-sm">保存</button>
+ </ol>
+ </ul>
+ </aside>
+ </transition>
 </template>
 
 <script setup lang="ts">
 import { openURL } from '#/ipc'
-import { useStore } from '@/store'
+import { main } from '@/pinia'
 
 import HelpSVG from '@/assets/setting/help.svg'
 
+// 初始化 pinia
+const pinia = main()
+
 // props 接口
 interface Props {
  // 尺寸
  size?: 'wide'
- // 配置
- config: Record<string, Object>
- // 信息
+ // 设置值
+ store: Record<string, Object>
+ // 设置项
  setting: (
  | {
  id: string
@@ -120,20 +129,17 @@ interface Props {
  )[]
 }
 
+// 初始化信息
 defineProps<Props>()
-
 const emit = defineEmits(['save'])
 
-// 初始化 store
-const store = useStore()
-
 // 初始化设置
-store.setting.has = true
+pinia.initSetting()
 
 // 保存
 const onSave = () => {
  // 隐藏设置框
- store.setting.show = false
+ pinia.closeSetting()
  // 发送保存事件
  emit('save')
 }

app/layouts/layout.vue

@@ -2,12 +2,14 @@
  * @Author: fzf404
  * @Date: 2022-08-12 10:39:12
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-10-23 21:46:18
+ * @LastEditTime: 2022-11-09 19:18:19
  * @Description: 布局切换
 -->
 <template>
  <!-- 布局 -->
- <component :is="layout[store.layout]" :state="store"></component>
+ <transition name="fade" mode="out-in">
+ <component :is="layout[store.layout].component" :layout="layout" :theme="theme" :store="store"></component>
+ </transition>
  <router-view></router-view>
 </template>
 
@@ -20,29 +22,46 @@ import { storage } from '~/storage'
 import maco from './maco.vue'
 import wine from './wine.vue'
 
-// 布局
 const layout = {
- maco,
- wine,
+ maco: {
+ name: 'maco',
+ component: maco,
+ },
+ wine: {
+ name: 'wine',
+ component: wine,
+ },
+}
+
+const theme = {
+ dark: {
+ class: 'dark',
+ },
+ light: {
+ class: 'light',
+ },
+ punk: {
+ class: 'punk',
+ },
 }
 
 const store = storage(
  {
  top: false, // 置顶
- layout: 'maco', // 布局
- theme: 'dark', //主题
+ layout: layout.maco.name, // 布局
+ theme: theme.dark.class, // 主题
  },
  {
  top: (val) => {
  sendEvent('win-top', val)
  },
  theme: (val) => {
- document.body.classList = [val]
+ document.body.setAttribute('class', val)
  },
  }
 )
 
 onMounted(() => {
- document.body.classList = [store.theme]
+ document.body.setAttribute('class', store.theme)
 })
 </script>