Frankie/tauri-markdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

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

Browse Source
This commit is contained in:
Frankie Huang 2025-04-30 16:50:29 +08:00
parent 3d326fcfc0
commit 823847f6b4
3 changed files with 16 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

43
src/components/MainEditor.vue
View File

@ -23,28 +23,8 @@
<Icon class="md-editor-icon" type="md-cloud-upload" size="22" />
</template>
</NormalToolbar>
<NormalToolbar title="切换编辑器主题" @onClick="toggleEditorTheme">
<template #trigger>
<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>
<ThemeSwitch v-model="editorState.theme" />
<PreviewThemeSwitch v-model="editorState.previewTheme" />
</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);