From d93f91b89ebdef2e065524b7ccd9c461d86a85c6 Mon Sep 17 00:00:00 2001
From: g122622 <3300925806@qq.com>
Date: Thu, 18 Jul 2024 23:47:14 +0800
Subject: [PATCH] v3.7.0

---
 .editorconfig                        |   2 +-
 .prettierignore                      |   9 +
 .prettierrc.cjs                      |  56 ++++++
 package.json                         |   2 +-
 src/api/File.ts                      |   2 +-
 src/api/FileWatcher.ts               |   2 +-
 src/assets/whatsNew.ts               |   9 +-
 src/components/FileMgr/FileItem.vue  |  35 +++-
 src/components/FileMgr/FileMgr.vue   |  36 +++-
 src/components/FileMgr/SearchMgr.vue |  26 ++-
 src/views/Settings/SettingsView.vue  | 267 +++++++++++++--------------
 11 files changed, 285 insertions(+), 161 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.cjs

diff --git a/.editorconfig b/.editorconfig
index 7053c49..a1879fc 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,5 +1,5 @@
 [*.{js,jsx,ts,tsx,vue}]
 indent_style = space
-indent_size = 2
+indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..477ae12
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+/dist/*
+.local
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
+stats.html
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 0000000..b8ca22d
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,56 @@
+/**
+ * File: \.prettierrc.cjs
+ * Project: rc-frontend
+ * Created Date: 2024-04-12 00:50:29
+ * Author: Guoyi
+ * -----
+ * Last Modified: 2024-04-12 00:51:16
+ * Modified By: Guoyi
+ * -----
+ * Copyright (c) 2024 Guoyi Inc.
+ * 
+ * ------------------------------------
+ */
+
+
+// @see: https://www.prettier.cn
+
+module.exports = {
+  // 指定最大换行长度
+  printWidth: 130,
+  // 缩进制表符宽度 | 空格数
+  tabWidth: 4,
+  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
+  useTabs: false,
+  // 结尾不用分号 (true：有，false：没有)
+  semi: true,
+  // 使用单引号 (true：单引号，false：双引号)
+  singleQuote: false,
+  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
+  quoteProps: "as-needed",
+  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
+  trailingComma: "none",
+  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
+  bracketSpacing: true,
+  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
+  bracketSameLine: false,
+  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
+  arrowParens: "avoid",
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
+  insertPragma: false,
+  // 用于控制文本是否应该被换行以及如何进行换行
+  proseWrap: "preserve",
+  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+  htmlWhitespaceSensitivity: "css",
+  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
+  endOfLine: "auto",
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
+  rangeStart: 0,
+  rangeEnd: Infinity
+};
diff --git a/package.json b/package.json
index 6d4bf77..a3da697 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "Gcrypt",
-    "version": "3.6.0",
+    "version": "3.7.0",
     "private": false,
     "author": "g122622",
     "repository": "https://github.com/g122622/gcrypt",
diff --git a/src/api/File.ts b/src/api/File.ts
index c684a9a..260629d 100644
--- a/src/api/File.ts
+++ b/src/api/File.ts
@@ -148,7 +148,7 @@ class File {
 
     public async destroy() {
         // 先销毁文件watcher，再删除临时文件，
-        // 若顺序颠倒则会在删除的时候触动fileWatcher
+        // 若顺序颠倒则会在删除的时候触动fileWatcher，造成死循环
         if (this.fileWatcher) {
             this.fileWatcher.destroy()
         }
diff --git a/src/api/FileWatcher.ts b/src/api/FileWatcher.ts
index 0d27f53..7dd99f1 100644
--- a/src/api/FileWatcher.ts
+++ b/src/api/FileWatcher.ts
@@ -16,7 +16,7 @@ class FileWatcher {
     shouldChange = false
     onRename
     onChange
-    onDestroyed
+    onDestroyed // 销毁回调，必须是同步函数
     private abortController: AbortController // watcher的中断控制器
     private interval
 
diff --git a/src/assets/whatsNew.ts b/src/assets/whatsNew.ts
index 8f4d117..5ad656c 100644
--- a/src/assets/whatsNew.ts
+++ b/src/assets/whatsNew.ts
@@ -4,7 +4,7 @@
  * Created Date: 2023-11-26 17:14:30
  * Author: Guoyi
  * -----
- * Last Modified: 2024-02-23 16:14:16
+ * Last Modified: 2024-07-18 18:06:51
  * Modified By: Guoyi
  * -----
  * Copyright (c) 2024 Guoyi Inc.
@@ -29,8 +29,7 @@ export default {
     "2.6.0": ['优化标签页文字显示', '支持快捷键锁定app', "界面优化", "去除SQLite二进制库的引用，缩减包体积", "app终于有自己的图标了"],
     "3.0.0": ['当前任务数可以在顶栏看到了', "更新关于页面", "将electron升级到27，vue和vuetify相应升级",
         "重写窗口锁定控制逻辑，修复一系列bug，提高安全性", "更换了一些图标", "侧边栏增加文件管理器", "修复文件管理器底部tip无法hover的bug"],
-    "3.1.0": ['列表虚拟化，显著提升列表渲染速度', "优化启动速度", "将js文件编译为字节码",
-    ],
+    "3.1.0": ['列表虚拟化，显著提升列表渲染速度', "优化启动速度", "将js文件编译为字节码"],
     "3.2.0": ['界面优化', "优化启动速度", "支持文件复制与剪切"],
     "3.3.0": ['修改文件读取逻辑，支持读取mtp设备的文件', "支持文件批量复制与剪切",
         '构建过程使用缓存，加快构建速度', "核心优化：去除冗余代码，修复移动文件bug", "修复移动和复制文件后缩略图没有的问题",
@@ -38,6 +37,6 @@ export default {
     "3.4.0": ['新的均衡型存储引擎：KVPEngineHybrid', "优化adapter初始化逻辑"],
     "3.5.0": ['修复null值导致程序崩溃的bug', "优化任务执行逻辑", "增加filemgr的相关设置项",
         '新增JSON查看器，查看属性更方便', '关闭应用时自动解除文件占用', 'store列表圆角优化'],
-    "3.6.0": ['新增json编辑器', '重写打开方式选择界面', '支持点击地址栏来导航', '支持直接编辑settings.json']
-
+    "3.6.0": ['新增json编辑器', '重写打开方式选择界面', '支持点击地址栏来导航', '支持直接编辑settings.json'],
+    "3.7.0": ['文件管理器支持搜索文件（仅搜索当前目录/深搜）', '视频会显示角标', "file-item在看图模式下，默认显示的信息由文件日期改为文件大小"]
 }
diff --git a/src/components/FileMgr/FileItem.vue b/src/components/FileMgr/FileItem.vue
index 5be97a1..5ffb852 100644
--- a/src/components/FileMgr/FileItem.vue
+++ b/src/components/FileMgr/FileItem.vue
@@ -20,8 +20,12 @@
                 <template v-if="singleFileItem.type === `file`">
                     <img v-if="currentThumbnail" :src="toDataURL(currentThumbnail)" class="file-thumbnail-img"
                         loading="lazy" />
-                    <img v-else :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`" class="file-types-image"
-                        loading="lazy" />
+                    <img v-else :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`"
+                        class="file-types-image" loading="lazy" />
+                </template>
+                <template v-if="singleFileItem.type === `file` && !!currentThumbnail">
+                    <img :src="`./assets/fileTypes/${getFileType(singleFileItem.name)}.png`"
+                        class="file-types-image-corner" loading="lazy" />
                 </template>
                 <div class="file-name">
                     {{ singleFileItem.name }}
@@ -42,8 +46,11 @@
                 <template v-else-if="viewOptions.itemDisplayMode === 1 && props.singleFileItem.type === 'file'">
                     {{ prettyBytes(props.singleFileItem.meta.size, 2) }}
                 </template>
-                <template v-else-if="viewOptions.itemDisplayMode === 2">
-                    {{ new Date(singleFileItem.meta.createdTime).toLocaleString() }}
+                <template v-else-if="viewOptions.itemDisplayMode === 1 && props.singleFileItem.type === 'folder'">
+                    {{ new Date(singleFileItem.meta.modifiedTime).toLocaleDateString() }}
+                </template>
+                <template v-else-if="viewOptions.itemDisplayMode === 2 && props.singleFileItem.type === 'file'">
+                    {{ prettyBytes(props.singleFileItem.meta.size, 2) }}
                 </template>
             </div>
         </template>
@@ -228,11 +235,15 @@ onUnmounted(() => {
         margin-left: 5px;
         margin-right: 5px;
     }
+
+    .file-types-image-corner {
+        display: none;
+    }
 }
 
 .file-item-item {
     float: left;
-    height: 130px;
+    height: 120px;
     width: 115px;
     flex-direction: column;
     padding: 10px;
@@ -243,6 +254,13 @@ onUnmounted(() => {
         height: 60px;
     }
 
+    .file-types-image-corner {
+        height: 25px;
+        position: absolute;
+        bottom: 45px;
+        right: 7px;
+    }
+
     .file-thumbnail-img {
         height: 60px;
     }
@@ -266,6 +284,13 @@ onUnmounted(() => {
         height: 100px;
     }
 
+    .file-types-image-corner {
+        height: 30px;
+        position: absolute;
+        bottom: 25px;
+        right: 10px;
+    }
+
     .file-thumbnail-img {
         height: 190px;
     }
diff --git a/src/components/FileMgr/FileMgr.vue b/src/components/FileMgr/FileMgr.vue
index 7c2e4af..0147a5e 100644
--- a/src/components/FileMgr/FileMgr.vue
+++ b/src/components/FileMgr/FileMgr.vue
@@ -17,8 +17,8 @@
                         <IconBtn icon="mdi-content-copy" tooltip="复制到剪贴板" size="small"
                             @click="copyToClipboard(itemCache[key])" />
                     </template>
-                </v-list-item>
-            </v-list -->
+</v-list-item>
+</v-list -->
         </template>
     </DialogGenerator>
 
@@ -45,7 +45,8 @@
                                     <v-btn-toggle shaped mandatory divided v-model="viewOptions[item.modelName]">
                                         <v-btn v-for="listItem in item.list" :key="listItem.title">
                                             <v-icon>{{ listItem.icon }}</v-icon>
-                                            <v-tooltip activator="parent" location="bottom">{{ listItem.title }}</v-tooltip>
+                                            <v-tooltip activator="parent" location="bottom">{{ listItem.title
+                                                }}</v-tooltip>
                                         </v-btn>
 
                                     </v-btn-toggle>
@@ -82,7 +83,8 @@
                     :disabled="!selectedItems.size"></IconBtn>
                 <!-- 地址栏 -->
                 <div style="margin-left: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
-                    <v-icon @click="gotoDir(currentDir.goToRoot(), true)" style="cursor: pointer;">mdi-map-marker</v-icon>
+                    <v-icon @click="gotoDir(currentDir.goToRoot(), true)"
+                        style="cursor: pointer;">mdi-map-marker</v-icon>
                     <v-tooltip activator="parent" location="bottom">{{ `当前目录: ` + currentDir.toPathStr() }}</v-tooltip>
                     <v-breadcrumbs density="compact" style="display: inline;">
                         <template v-for="(item, i) in currentDir.tokens" :key="item">
@@ -97,6 +99,8 @@
                     </v-breadcrumbs>
                 </div>
                 <v-spacer></v-spacer>
+                <!-- 搜索 -->
+                <SearchMgr v-model:searchWord="searchWord"></SearchMgr>
                 <!-- 刷新按钮 -->
                 <IconBtn icon="mdi-refresh" tooltip="刷新内容" @click="refresh()"></IconBtn>
             </v-app-bar>
@@ -113,7 +117,8 @@
                             @selected="handleItemSelection(item)" @unselected="handleItemUnselection(item)"
                             :isSelected="selectedItems.has(item)" v-for="(item, index) in currentFileTableForRender"
                             :key="item.key">
-                            <ContextMenu :width="200" :menuList="getItemMenuList(item)" v-if="options.useCtxMenu">
+                            <ContextMenu :width="200" :menuList="getItemMenuList(item) as contextMenuItem[]"
+                                v-if="options.useCtxMenu">
                             </ContextMenu>
                         </FileItem>
                         <!-- </TransitionGroup> -->
@@ -124,7 +129,8 @@
                         当前目录下没有文件
                     </div>
                     <div v-else style="display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
-                        <v-progress-circular indeterminate color="primary" bg-color="rgba(0,0,0,0)"></v-progress-circular>
+                        <v-progress-circular indeterminate color="primary"
+                            bg-color="rgba(0,0,0,0)"></v-progress-circular>
                     </div>
                     <BottomTip></BottomTip>
                     <ContextMenu :width="200" v-if="options.useCtxMenu" :menuList="[
@@ -175,15 +181,18 @@ import { FileMgrOptions } from "./types/FileMgrOptions"
 import getWindowsShortcutProperties from 'get-windows-shortcut-properties'
 import path from 'path'
 import fs from 'fs-extra'
+import { ViewOptions } from "./types/ViewOptions";
+import { log, warn } from "@/utils/gyConsole";
+import sleep from "@/utils/sleep";
+import contextMenuItem from "@/types/contextMenuItem";
 
+// 组件
 import ContextMenu from "../shared/ContextMenu.vue";
 import FileItem from "./FileItem.vue";
 import DialogMgr from "./DialogMgr.vue";
 import BottomBar from "./BottomBar.vue";
 import ClipBoard from "./ClipBoard.vue";
-import { ViewOptions } from "./types/ViewOptions";
-import { log, warn } from "@/utils/gyConsole";
-import sleep from "@/utils/sleep";
+import SearchMgr from "./SearchMgr.vue";
 
 interface Props {
     adapter: AdapterBase,
@@ -695,6 +704,11 @@ const currentFileTableForRender = computed<FileTable['items']>(() => {
     if (!viewOptions.value.showHiddenItem) {
         res = res.filter(item => item.name[0] !== ".")
     }
+
+    // 搜索过滤
+    if (searchWord.value) {
+        res = res.filter(item => item.name.toLowerCase().includes(searchWord.value.toLowerCase()))
+    }
     return res
 })
 
@@ -758,6 +772,10 @@ const handleFileExport = async () => {
         })
     } catch (e) { }
 }
+
+// <搜索>
+const searchWord = ref('')
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/FileMgr/SearchMgr.vue b/src/components/FileMgr/SearchMgr.vue
index 92c1354..feac202 100644
--- a/src/components/FileMgr/SearchMgr.vue
+++ b/src/components/FileMgr/SearchMgr.vue
@@ -1,15 +1,33 @@
 <template>
-    <div id="container">
-    </div>
+    <v-menu :close-on-content-click="false">
+        <template v-slot:activator="{ props }">
+            <v-btn icon v-bind="props" variant="flat">
+                <v-icon>mdi-magnify</v-icon>
+                <v-tooltip activator="parent" location="bottom">搜索</v-tooltip>
+            </v-btn>
+        </template>
+        <v-card width="300px">
+            <AdvancedTextField label="搜索..." prepend-inner-icon="mdi-magnify" v-model:currentInput="searchWord"
+                density="compact">
+            </AdvancedTextField>
+        </v-card>
+    </v-menu>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { computed, defineEmits } from "vue"
+import AdvancedTextField from "@/components/shared/AdvancedTextField.vue"
 
 interface Props {
-
+    searchWord: string,
 }
 const props = defineProps<Props>()
+const emit = defineEmits(['update:searchWord'])
+const searchWord = computed({
+    get: () => props.searchWord,
+    set: (value: string) => emit('update:searchWord', value)
+})
+
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/views/Settings/SettingsView.vue b/src/views/Settings/SettingsView.vue
index 4bfcfc6..2e32bd9 100644
--- a/src/views/Settings/SettingsView.vue
+++ b/src/views/Settings/SettingsView.vue
@@ -1,84 +1,83 @@
 <template>
-    <!-- 顶部工具栏 -->
-    <Teleport to="#ActionToolBar">
-        <ActionToolBarBase ToolbarTitle="设置">
-            <IconBtn icon="mdi-open-in-new" @click="handleEditSettings()" tooltip="直接编辑settings.json" />
-            <IconBtn icon="mdi-content-save" @click="settingsStore.saveSettings()" tooltip="手动保存设置（app会自动保存设置，一般情况不用点）" />
-            <IconBtn icon="mdi-update" @click="updateSettings" tooltip="升级所有设置（保留数据）" />
-            <IconBtn icon="mdi-cog-refresh" @click="resetSettings" tooltip="重置所有设置" />
-        </ActionToolBarBase>
-    </Teleport>
-
-    <!-- 搜索框 -->
-    <AdvancedTextField v-model:current-input="searchWord" label="搜索..." prepend-inner-icon="mdi-magnify" density="compact"
-        style="border-radius: 15px;overflow: hidden;margin: 15px;margin-bottom: 0px;">
-    </AdvancedTextField>
-
-    <v-col id="settings-container">
-        <div v-for="category in cats" :key="category">
-            <v-card style="border-radius: 15px !important;">
-                <v-list lines="two">
-                    <v-list-subheader v-if="category">{{ category }}</v-list-subheader>
-                    <v-list-subheader v-else>未分组</v-list-subheader>
-                    <v-list-item v-for="item in extractByCat(category)" :key="item.name" :title="item.title"
-                        :subtitle="item.des || '暂无描述'">
-                        <template v-slot:append>
-                            <!-- 开关 -->
-                            <div v-if="item.type === SettingTypes.switcher">
-                                <v-switch v-model="item.value" color="primary" density="compact" />
-                            </div>
-                            <!-- 按钮 -->
-                            <div v-else-if="item.type === SettingTypes.button" :onclick="item.value">
-                                <v-btn type="primary" size="small" color="primary">触发</v-btn>
-                            </div>
-                            <!-- 图片 -->
-                            <div v-else-if="item.type === SettingTypes.img" style="width:155px;">
-                                <v-file-input show-size accept="image/png, image/jpeg, image/bmp" label="选择图片"
-                                    @update:modelValue="(files) => {
-                                        handleFile(files[0], item.name)
-                                    }" density="compact"></v-file-input>
-                            </div>
-                            <!-- 滑动条 -->
-                            <div v-else-if="item.type === SettingTypes.slider" style="width:155px;">
-                                <!-- TS类型限制，只能把v-model展开 -->
-                                <v-slider thumb-label="always" color="primary" :modelValue="item.value.toString()"
-                                    @update:modelValue="newValue => { item.value = newValue.toString() }"
-                                    :max="item.extra.maxLimitation" :min="item.extra.minLimitation" :step="item.extra.step">
-                                </v-slider>
-                            </div>
-                            <!-- 文本 -->
-                            <div v-else-if="item.type === SettingTypes.text">
-                                <IconBtn icon="mdi-open-in-new" tooltip="打开并编辑" variant="plain" @click="handleText(item)">
-                                </IconBtn>
-                            </div>
-                            <!-- 颜色 -->
-                            <div v-else-if="item.type === SettingTypes.color" style="display: flex; align-items: center;">
-                                <div style="display: inline-block;width:1rem;height: 1rem;border-radius: 50%;margin-right: 10px;"
-                                    :style="{ backgroundColor: item.value }" div></div>
-                                {{ item.value }}
-                                <v-menu :close-on-content-click="false" location="end">
-                                    <template v-slot:activator="{ props }">
-                                        <v-btn icon v-bind="props" size="small" style="margin-left: 7px;">
-                                            <v-icon>
-                                                mdi-eyedropper
-                                            </v-icon>
-                                        </v-btn>
-                                    </template>
-                                    <v-card width="300" height='500'>
-                                        <!-- 主内容 -->
-                                        <v-color-picker show-swatches :modelValue="item.value.toString()"
-                                            @update:modelValue="newValue => { item.value = newValue.toString() }"></v-color-picker>
-                                    </v-card>
-                                </v-menu>
-                            </div>
-                        </template>
-
-                    </v-list-item>
-                </v-list>
-            </v-card>
-        </div>
-        <BottomTip></BottomTip>
-    </v-col>
+  <!-- 顶部工具栏 -->
+  <Teleport to="#ActionToolBar">
+    <ActionToolBarBase ToolbarTitle="设置">
+      <IconBtn icon="mdi-open-in-new" @click="handleEditSettings()" tooltip="直接编辑settings.json" />
+      <IconBtn icon="mdi-content-save" @click="settingsStore.saveSettings()" tooltip="手动保存设置（app会自动保存设置，一般情况不用点）" />
+      <IconBtn icon="mdi-update" @click="updateSettings" tooltip="升级所有设置（保留数据）" />
+      <IconBtn icon="mdi-cog-refresh" @click="resetSettings" tooltip="重置所有设置" />
+    </ActionToolBarBase>
+  </Teleport>
+
+  <!-- 搜索框 -->
+  <AdvancedTextField v-model:current-input="searchWord" label="搜索..." prepend-inner-icon="mdi-magnify" density="compact"
+    style="border-radius: 15px;overflow: hidden;margin: 15px;margin-bottom: 0px;">
+  </AdvancedTextField>
+
+  <v-col id="settings-container">
+    <div v-for="category in cats" :key="category">
+      <v-card style="border-radius: 15px !important;">
+        <v-list lines="two">
+          <v-list-subheader v-if="category">{{ category }}</v-list-subheader>
+          <v-list-subheader v-else>未分组</v-list-subheader>
+          <v-list-item v-for="item in extractByCat(category)" :key="item.name" :title="item.title"
+            :subtitle="item.des || '暂无描述'">
+            <template v-slot:append>
+              <!-- 开关 -->
+              <div v-if="item.type === SettingTypes.switcher">
+                <v-switch v-model="item.value" color="primary" density="compact" />
+              </div>
+              <!-- 按钮 -->
+              <div v-else-if="item.type === SettingTypes.button" :onclick="item.value">
+                <v-btn type="primary" size="small" color="primary">触发</v-btn>
+              </div>
+              <!-- 图片 -->
+              <div v-else-if="item.type === SettingTypes.img" style="width:155px;">
+                <v-file-input show-size accept="image/png, image/jpeg, image/bmp" label="选择图片" @update:modelValue="(files) => {
+                  handleFile(files[0], item.name)
+                }" density="compact"></v-file-input>
+              </div>
+              <!-- 滑动条 -->
+              <div v-else-if="item.type === SettingTypes.slider" style="width:155px;">
+                <!-- TS类型限制，只能把v-model展开 -->
+                <v-slider thumb-label="always" color="primary" :modelValue="item.value.toString()"
+                  @update:modelValue="newValue => { item.value = newValue.toString() }" :max="item.extra.maxLimitation"
+                  :min="item.extra.minLimitation" :step="item.extra.step">
+                </v-slider>
+              </div>
+              <!-- 文本 -->
+              <div v-else-if="item.type === SettingTypes.text">
+                <IconBtn icon="mdi-open-in-new" tooltip="打开并编辑" variant="plain" @click="handleText(item)">
+                </IconBtn>
+              </div>
+              <!-- 颜色 -->
+              <div v-else-if="item.type === SettingTypes.color" style="display: flex; align-items: center;">
+                <div style="display: inline-block;width:1rem;height: 1rem;border-radius: 50%;margin-right: 10px;"
+                  :style="{ backgroundColor: item.value }" div></div>
+                {{ item.value }}
+                <v-menu :close-on-content-click="false" location="end">
+                  <template v-slot:activator="{ props }">
+                    <v-btn icon v-bind="props" size="small" style="margin-left: 7px;">
+                      <v-icon>
+                        mdi-eyedropper
+                      </v-icon>
+                    </v-btn>
+                  </template>
+                  <v-card width="300" height='500'>
+                    <!-- 主内容 -->
+                    <v-color-picker show-swatches :modelValue="item.value.toString()"
+                      @update:modelValue="newValue => { item.value = newValue.toString() }"></v-color-picker>
+                  </v-card>
+                </v-menu>
+              </div>
+            </template>
+
+          </v-list-item>
+        </v-list>
+      </v-card>
+    </div>
+    <BottomTip></BottomTip>
+  </v-col>
 </template>
 
 <script setup lang="ts">
@@ -94,70 +93,70 @@ const settingsStore = useSettingsStore()
 
 const searchWord = ref("")
 const filteredSettings = computed(() => {
-    return searchWord.value ? settingsStore.settings.filter(item => item.title.includes(searchWord.value) || item.des.includes(searchWord.value)) : settingsStore.settings
+  return searchWord.value ? settingsStore.settings.filter(item => item.title.includes(searchWord.value) || item.des.includes(searchWord.value)) : settingsStore.settings
 })
 
 const resetSettings = () => {
-    emitter.emit("resetSettings")
+  emitter.emit("resetSettings")
 }
 
 const updateSettings = () => {
-    settingsStore.updateSettings()
+  settingsStore.updateSettings()
 }
 
 const extractByCat = (category) => {
-    return filteredSettings.value.filter((item) => { return item.category === category })
+  return filteredSettings.value.filter((item) => { return item.category === category })
 }
 
 const handleFile = (file, targetSettingName) => {
-    if (file) {
-        const reader = new FileReader()
-        reader.onload = function () {
-            const resBase64 = this.result.toString(); // 获取数据
-            if (resBase64) {
-                // 修改对应设置&apply
-                settingsStore.setSetting(targetSettingName, resBase64)
-            } else {
-                console.error("读取base64失败");
-                emitter.emit('showMsg', { level: "error", msg: "读取base64失败" });
-            }
-        };
-        reader.readAsDataURL(file)
-    }
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = function () {
+      const resBase64 = this.result.toString(); // 获取数据
+      if (resBase64) {
+        // 修改对应设置&apply
+        settingsStore.setSetting(targetSettingName, resBase64)
+      } else {
+        console.error("读取base64失败");
+        emitter.emit('showMsg', { level: "error", msg: "读取base64失败" });
+      }
+    };
+    reader.readAsDataURL(file)
+  }
 }
 
 const handleText = (item: settingItem) => {
-    const file = new File()
-    file.fromRef(toRefs(item).value)
-    emitter.emit('openFile', {
-        fileArg: file,
-        fileTypeArg: 'json'
-    })
+  const file = new File()
+  file.fromRef(toRefs(item).value)
+  emitter.emit('openFile', {
+    fileArg: file,
+    fileTypeArg: 'json'
+  })
 }
 
 const handleEditSettings = () => {
-    const file = new File()
-    const settingJSONStringRef = ref(JSON.stringify(settingsStore.settings))
-    watch(settingJSONStringRef, (newVal) => {
-        const newArr = settingsStore.settings = JSON.parse(newVal)
-        settingsStore.settings.forEach((item, index) => {
-            settingsStore.settings[index] = newArr[index]
-        })
-    }, { deep: true })
-    file.fromRef(settingJSONStringRef)
-    emitter.emit('openFile', {
-        fileArg: file,
-        fileTypeArg: 'json'
+  const file = new File()
+  const settingJSONStringRef = ref(JSON.stringify(settingsStore.settings))
+  watch(settingJSONStringRef, (newVal) => {
+    const newArr = settingsStore.settings = JSON.parse(newVal)
+    settingsStore.settings.forEach((item, index) => {
+      settingsStore.settings[index] = newArr[index]
     })
+  }, { deep: true })
+  file.fromRef(settingJSONStringRef)
+  emitter.emit('openFile', {
+    fileArg: file,
+    fileTypeArg: 'json'
+  })
 }
 
 const cats = computed(() => {
-    const res = filteredSettings.value.map(item => {
-        return item.category
-    }).filter(function (item, index, arr) {
-        return arr.indexOf(item) === index; // 数组去重
-    })
-    return res
+  const res = filteredSettings.value.map(item => {
+    return item.category
+  }).filter(function (item, index, arr) {
+    return arr.indexOf(item) === index; // 数组去重
+  })
+  return res
 })
 
 </script>
@@ -165,17 +164,17 @@ const cats = computed(() => {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="less">
 #settings-container {
-    display: flex;
-    flex-wrap: wrap;
-
-    >div {
-        min-width: 300px;
-        margin: 5px;
-        flex-grow: 1;
-    }
-
-    .v-input__details {
-        display: none !important;
-    }
+  display: flex;
+  flex-wrap: wrap;
+
+  >div {
+    min-width: 300px;
+    margin: 5px;
+    flex-grow: 1;
+  }
+
+  .v-input__details {
+    display: none !important;
+  }
 }
 </style>