🔖 v0.7.1

.vscode/extensions.json

@@ -1,11 +1,13 @@
 {
  "recommendations": [
- "formulahendry.auto-rename-tag",
- "chunsen.bracket-select",
  "obkoro1.korofileheader",
- "bradlc.vscode-tailwindcss",
- "gruntfuggly.todo-tree",
  "vue.volar",
- "Vue.vscode-typescript-vue-plugin"
+ "vue.vscode-typescript-vue-plugin",
+ "syler.sass-indented",
+ "gruntfuggly.todo-tree",
+ "chunsen.bracket-select",
+ "bradlc.vscode-tailwindcss",
+ "formulahendry.auto-close-tag",
+ "formulahendry.auto-rename-tag"
  ]
 }

app/components/image.vue

@@ -2,12 +2,14 @@
  * @Author: fzf404
  * @Date: 2022-09-23 20:37:31
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-28 22:58:52
+ * @LastEditTime: 2022-10-03 19:07:20
  * @Description: iamge 组件
 -->
 <template>
- <section v-show="show" class="modal z-30 flex-col-center space-y-2">
+ <section v-show="show" class="flex-col-center modal z-30 space-y-2">
+ <!-- 图像 -->
  <img class="h-2/3" :src="image" alt="图像" />
+ <!-- 备注 -->
  <p class="w-full bg-theme text-center text-lg">{{ remark }}</p>
  </section>
 </template>

app/components/loading.vue

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

app/components/setting.vue

@@ -2,26 +2,22 @@
  * @Author: fzf404
  * @Date: 2022-07-23 21:02:45
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-29 18:00:29
+ * @LastEditTime: 2022-10-03 19:35:20
  * @Description: setting 组件
 -->
 <template>
  <!-- 设置模态框 -->
- <aside class="modal setting z-50 flex justify-center items-center rounded-lg" v-show="store.setting.show">
+ <aside class="flex-col-center modal setting z-50" v-show="store.setting.show">
  <!-- 设置框 -->
  <ul class="w-3/5 px-4 py-3 pb-2 space-y-2 ring-4 rounded-lg" :class="{ 'w-3/4 px-3': size === 'wide' }">
- <!-- 设置列表 -->
- <li class="h-8 px-2 flex justify-between items-center rounded" v-for="item in setting">
- <!-- 设置标签 -->
+ <!-- 项目列表 -->
+ <li class="flex-row-between h-8 px-2 rounded" 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="relative w-3 self-center btn-svg text-gray"
- @click="openURL(item.help as string)"
- />
+ <HelpSVG v-show="item.help" class="w-3 self-center btn-svg text-gray" @click="openURL(item.help as string)" />
  </label>
 
  <!-- 选择框 -->
@@ -36,16 +32,27 @@
  </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="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="
@@ -62,21 +69,13 @@
  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"
  />
-
- <!-- 文本输入框 -->
- <input
- v-else-if="item.type === 'checkbox'"
- :id="item.id"
- type="checkbox"
- v-model.lazy="(config[item.id] as boolean)"
- @keyup.enter="onSave"
- />
  </li>
  <!-- 保存 -->
- <ol class="flex justify-end items-center">
+ <ol class="flex-row-center-right">
  <button @click="onSave" class="btn btn-sm">保存</button>
  </ol>
  </ul>
@@ -147,17 +146,8 @@ const onSave = () => {
 </script>
 
 <style scoped>
-input[type='checkbox'] {
- @apply w-4 h-4 outline-none;
-}
-
-/* 去除箭头 */
+/* 去除数字输入框箭头 */
 input[type='number']::-webkit-inner-spin-button {
  appearance: none;
 }
-
-input[type='number'],
-input[type='text'] {
- @apply w-3/5 px-2 py-1 outline-none border-none rounded text-right text-xs;
-}
 </style>

app/layouts/layout.vue

@@ -2,26 +2,23 @@
  * @Author: fzf404
  * @Date: 2022-08-12 10:39:12
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-24 23:31:13
+ * @LastEditTime: 2022-10-03 18:47:22
  * @Description: 布局切换
 -->
 <template>
  <component :is="layout[store.layout]" :state="store"></component>
- <router-view> </router-view>
+ <router-view></router-view>
 </template>
 
 <script setup>
 import { onMounted } from 'vue'
 
 import { sendEvent } from '#/ipc'
+import { storage } from '~/storage'
 
 import maco from './maco.vue'
 import wine from './wine.vue'
 
-// 引入主题样式
-import '@/themes/basic.scss'
-import { storage } from '~/storage'
-
 // 布局
 const layout = {
  maco,
@@ -36,7 +33,7 @@ const store = storage(
  },
  {
  top: (val) => {
- sendEvent('window-top', val)
+ sendEvent('win-top', val)
  },
  theme: (val) => {
  document.body.classList = [val]

app/layouts/maco.vue

@@ -2,21 +2,21 @@
  * @Author: fzf404
  * @Date: 2022-05-23 17:03:20
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-19 20:47:46
+ * @LastEditTime: 2022-10-03 14:30:45
  * @Description: maco 布局
 -->
 <template>
  <nav>
- <ul class="absolute left-2 z-40 space-x-1">
+ <ul class="absolute z-40 left-2 space-x-1">
  <!-- 关闭 -->
  <CloseSVG
  class="w-3.5 p-0.5 btn-svg rounded-full bg-red-400 hover:bg-red-500 text-dark"
- @click="sendEvent('window-close')"
+ @click="sendEvent('win-close')"
  />
  <!-- 最小化 -->
  <MiniSVG
  class="w-3.5 p-0.5 btn-svg rounded-full bg-yellow-400 hover:bg-yellow-500 text-dark"
- @click="sendEvent('window-mini')"
+ @click="sendEvent('win-mini')"
  />
  <!-- 置顶 -->
  <UpSVG

app/layouts/wine.vue

@@ -41,9 +41,9 @@
  @click="state.top = !state.top"
  />
  <!-- 最小化 -->
- <MiniSVG class="w-5 btn-svg hover-dynamic text-yellow-400" @click="sendEvent('window-mini')" />
+ <MiniSVG class="w-5 btn-svg hover-dynamic text-yellow-400" @click="sendEvent('win-mini')" />
  <!-- 关闭 -->
- <CloseSVG class="w-5 btn-svg hover-dynamic text-red-400" @click="sendEvent('window-close')" />
+ <CloseSVG class="w-5 btn-svg hover-dynamic text-red-400" @click="sendEvent('win-close')" />
  </ul>
  </nav>
 </template>

app/main.js

@@ -2,7 +2,7 @@
  * @Author: fzf404
  * @Date: 2022-05-18 23:06:12
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-08-11 15:58:35
+ * @LastEditTime: 2022-10-03 18:49:56
  * @Description: render 进程
  */
 import { createPinia } from 'pinia'
@@ -11,6 +11,10 @@ import { createApp } from 'vue'
 import App from './app'
 import router from './router'
 
+// 引入 tailwind 样式
 import './assets/tailwind.css'
 
+// 引入主题样式
+import '@/themes/basic.scss'
+
 createApp(App).use(router).use(createPinia()).mount('#app')

app/plugins/camera.vue

@@ -2,7 +2,7 @@
  * @Author: fzf404
  * @Date: 2022-07-15 22:55:49
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-28 17:56:24
+ * @LastEditTime: 2022-10-02 21:32:25
  * @Description: camera 相机监控
 -->
 <template>
@@ -16,9 +16,9 @@
  <section class="relative w-full h-full overflow-hidden rounded-lg">
  <!-- 绘制 -->
  <canvas ref="canvas" class="absolute w-full h-full z-10" :class="{ mirror: store.mirror }" />
- <!-- 预览 -->
+ <!-- 视频 -->
  <video ref="video" class="absolute w-full h-full" :class="{ mirror: store.mirror }" autoplay />
- <!-- 记录器 -->
+ <!-- 记录 -->
  <a ref="record" class="hidden" />
  </section>
  <!-- 相机控制器 -->
@@ -73,7 +73,7 @@ import CameraSVG from '@/assets/camera/camera.svg'
 import OffSVG from '@/assets/camera/off.svg'
 import VideoSVG from '@/assets/camera/video.svg'
 
-// HTMLElement Refs
+// 标签引用
 const video = ref(null)
 const canvas = ref(null)
 const record = ref(null)

app/plugins/clock.vue

@@ -2,7 +2,7 @@
  * @Author: fzf404
  * @Date: 2022-06-10 09:12:28
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-09-24 22:48:08
+ * @LastEditTime: 2022-10-02 21:35:17
  * @Description: clock 翻牌时钟
 -->
 <template>
@@ -185,7 +185,7 @@ onMounted(startClock)
 <style scoped>
 /* 底板 */
 .flip {
- @apply inline-block relative w-12 h-20 rounded-lg border-2 bg-gray-300 border-gray-400 text-gray-500 font-mono text-6xl text-center;
+ @apply relative inline-block w-12 h-20 rounded-lg border-2 bg-gray-300 border-gray-400 text-gray-500 font-mono text-6xl text-center;
  line-height: 5rem;
 }
 /* 上下页 */