feat: 使用 @vavt/v3-extension 扩展组件实现主题切换

package-lock.json

@@ -12,6 +12,7 @@
         "@tauri-apps/plugin-dialog": "^2.2.1",
         "@tauri-apps/plugin-fs": "^2.2.1",
         "@tauri-apps/plugin-opener": "^2",
+        "@vavt/v3-extension": "^3.0.0",
         "md-editor-v3": "^5.5.0",
         "scriptjs": "^2.5.9",
         "view-ui-plus": "^1.3.19",
@@ -1641,6 +1642,15 @@
       "integrity": "sha512-YIfAvArSFVXmWvoF+DEGD0FhkhVNcCtVWWkfYtj76eSrwHh/wuEEFhiEubg1XLNM3tChO8FH8xJCT/hnizjgFQ==",
       "license": "MIT"
     },
+    "node_modules/@vavt/v3-extension": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@vavt/v3-extension/-/v3-extension-3.0.0.tgz",
+      "integrity": "sha512-R3XFrihlk+FmoTEivToszgcv7D168hHkfMyS6pkHWyrvQy0MNP8m8b6qIWuINfvpbhr0OiMa9ktzyUH2DLFWfA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "md-editor-v3": ">=5.2.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/plugin-dialog": "^2.2.1",
     "@tauri-apps/plugin-fs": "^2.2.1",
     "@tauri-apps/plugin-opener": "^2",
+    "@vavt/v3-extension": "^3.0.0",
     "md-editor-v3": "^5.5.0",
     "scriptjs": "^2.5.9",
     "view-ui-plus": "^1.3.19",

src/components/MainEditor.vue

@@ -23,28 +23,8 @@
                             <Icon class="md-editor-icon" type="md-cloud-upload" size="22" />
                         </template>
                     </NormalToolbar>
-                    <NormalToolbar title="切换编辑器主题" @onClick="toggleEditorTheme">
+                    <ThemeSwitch v-model="editorState.theme" />
-                        <template #trigger>
+                    <PreviewThemeSwitch v-model="editorState.previewTheme" />
-                            <Icon v-if="editorState.theme == 'dark'" type="ios-sunny-outline" size="22" />
-                            <Icon v-else type="md-moon" size="22" />
-                        </template>
-                    </NormalToolbar>
-                    <DropdownToolbar title="切换预览主题" :visible="editorState.previewThemeListVisible"
-                        :onChange="showPreviewThemeList">
-                        <template #overlay>
-                            <div>
-                                <List border size="small">
-                                    <ListItem v-for="theme in editorState.previewThemeList" :key="theme"
-                                        :class="theme == editorState.previewTheme ? 'md-editor-toolbar-active' : ''"
-                                        @click="togglePreviewTheme(theme)">{{ theme }}
-                                    </ListItem>
-                                </List>
-                            </div>
-                        </template>
-                        <template #trigger>
-                            <Icon class="md-editor-icon" type="ios-color-filter-outline" :size="22" />
-                        </template>
-                    </DropdownToolbar>
                 </template>
             </MdEditor>
         </template>
@@ -61,7 +41,9 @@
 
 <script setup>
 import 'md-editor-v3/lib/style.css';
+import '@vavt/v3-extension/lib/asset/PreviewThemeSwitch.css';
 import { MdEditor, MdCatalog, NormalToolbar, DropdownToolbar } from 'md-editor-v3';
+import { ThemeSwitch, PreviewThemeSwitch } from '@vavt/v3-extension';
 import { ref, reactive, watch } from "vue";
 import { Message } from 'view-ui-plus'
 
@@ -111,10 +93,8 @@ watch(split, (newSplit) => {
 const editorRef = ref(null);
 const editorState = reactive({
     id: 'markdown-editor',
-    theme: '',
+    theme: 'light',
     previewTheme: 'default',
-    previewThemeList: ['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis'],
-    previewThemeListVisible: false,
     height: '100vh',
     text: props.markdownCode,
     toolbars: [
@@ -186,19 +166,6 @@ const toggleCatalog = () => {
     }
 }
 
-const toggleEditorTheme = () => {
-    editorState.theme = editorState.theme == '' ? 'dark' : '';
-}
-
-const showPreviewThemeList = (visible) => {
-    editorState.previewThemeListVisible = visible;
-}
-
-const togglePreviewTheme = (theme) => {
-    editorState.previewTheme = theme;
-    editorState.previewThemeListVisible = false;
-}
-
 const onSave = (v, h) => {
     // 调用 save 方法保存代码（参数 v 为 markdown code）
     props.save(v);