src/components/CodemirrorEditor/CssEditor.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 
 const store = useStore()
-const displayStore = useDisplayStore()
 
 function editTabName() {
   ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
@@ -68,7 +67,7 @@ function handleTabsEdit(targetName: string, action: string) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="displayStore.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
+    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
       <el-tabs
         v-model="store.cssContentConfig.active"
         type="border-card"

src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue

@@ -1,28 +1,25 @@
 <script setup lang="ts">
-import { TableIcon, UploadCloudIcon } from 'lucide-vue-next'
+import { useStore } from '@/stores'
-import {
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
-import { useDisplayStore } from '@/stores'
 
-const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = useDisplayStore()
+const store = useStore()
+
+const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = store
 </script>
 
 <template>
   <MenubarMenu>
-    <MenubarTrigger>
+    <MenubarTrigger> 编辑 </MenubarTrigger>
-      编辑
-    </MenubarTrigger>
     <MenubarContent align="start">
       <MenubarItem @click="toggleShowUploadImgDialog()">
-        <UploadCloudIcon class="mr-2 h-4 w-4" />
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconUpload />
+        </el-icon>
         上传图片
       </MenubarItem>
       <MenubarItem @click="toggleShowInsertFormDialog()">
-        <TableIcon class="mr-2 h-4 w-4" />
+        <el-icon class="mr-2 h-4 w-4">
+          <ElIconGrid />
+        </el-icon>
         插入表格
       </MenubarItem>
     </MenubarContent>

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import StyleOptionMenu from './StyleOptionMenu.vue'
@@ -16,10 +16,9 @@ import {
   legendOptions,
   themeOptions,
 } from '@/config'
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 
 const store = useStore()
-const { toggleShowCssEditor } = useDisplayStore()
 
 const {
   theme,
@@ -41,6 +40,7 @@ const {
   codeBlockThemeChanged,
   legendChanged,
   macCodeBlockChanged,
+  toggleShowCssEditor,
 } = store
 
 const colorPicker = ref<HTMLElement & { show: () => void } | null>(null)
@@ -52,6 +52,11 @@ function showPicker() {
 // 自定义CSS样式
 function customStyle() {
   toggleShowCssEditor()
+  nextTick(() => {
+    if (!cssEditor.value) {
+      cssEditor.value!.refresh()
+    }
+  })
   setTimeout(() => {
     cssEditor.value!.refresh()
   }, 50)

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -43,7 +43,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import { Button } from '@/components/ui/button'
 
 import { mergeCss, solveWeChatImage } from '@/utils'
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 
 const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
 
@@ -81,7 +81,6 @@ const formatItems = [
 ] as const
 
 const store = useStore()
-const displayStore = useDisplayStore()
 
 const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
 
@@ -154,13 +153,6 @@ function copy() {
     })
   }, 350)
 }
-
-function customStyle() {
-  displayStore.toggleShowCssEditor()
-  setTimeout(() => {
-    store.cssEditor!.refresh()
-  }, 50)
-}
 </script>
 
 <template>
@@ -379,31 +371,6 @@ function customStyle() {
               </Button>
             </div>
           </div>
-          <div class="space-y-2">
-            <h2>自定义 CSS 面板</h2>
-            <div class="grid grid-cols-5 justify-items-center gap-2">
-              <Button
-                class="w-full"
-                variant="outline"
-                :class="{
-                  'border-black dark:border-white': displayStore.isShowCssEditor,
-                }"
-                @click="!displayStore.isShowCssEditor && customStyle()"
-              >
-                开启
-              </Button>
-              <Button
-                class="w-full"
-                variant="outline"
-                :class="{
-                  'border-black dark:border-white': !displayStore.isShowCssEditor,
-                }"
-                @click="displayStore.isShowCssEditor && customStyle()"
-              >
-                关闭
-              </Button>
-            </div>
-          </div>
           <div class="space-y-2">
             <h2>编辑区位置</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
@@ -454,17 +421,6 @@ function customStyle() {
               </Button>
             </div>
           </div>
-          <div class="space-y-2">
-            <h2>样式配置</h2>
-            <div>
-              <Button
-                class="w-full"
-                @click="store.resetStyleConfirm()"
-              >
-                重置
-              </Button>
-            </div>
-          </div>
         </div>
       </PopoverContent>
     </Popover>

src/components/CodemirrorEditor/InsertFormDialog.vue

@@ -8,13 +8,12 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 import { createTable } from '@/utils'
 
 const store = useStore()
-const displayStore = useDisplayStore()
 
-const { toggleShowInsertFormDialog } = displayStore
+const { toggleShowInsertFormDialog } = store
 
 const rowNum = ref(3)
 const colNum = ref(3)
@@ -46,7 +45,7 @@ function onUpdate(val: boolean) {
 </script>
 
 <template>
-  <Dialog :open="displayStore.isShowInsertFormDialog" @update:open="onUpdate">
+  <Dialog :open="store.isShowInsertFormDialog" @update:open="onUpdate">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>插入表格</DialogTitle>

src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -7,11 +7,11 @@ import CodeMirror from 'codemirror'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 
 import { checkImage, removeLeft } from '@/utils'
-import { useDisplayStore } from '@/stores'
+import { useStore } from '@/stores'
 
 const emit = defineEmits([`uploadImage`])
 
-const displayStore = useDisplayStore()
+const store = useStore()
 
 const formGitHub = ref({
   repo: ``,
@@ -282,7 +282,7 @@ function uploadImage(params: { file: any }) {
 </script>
 
 <template>
-  <Dialog v-model:open="displayStore.isShowUploadImgDialog">
+  <Dialog v-model:open="store.isShowUploadImgDialog">
     <DialogContent class="max-w-max">
       <DialogHeader>
         <DialogTitle>本地上传</DialogTitle>

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+import Store from './stores'
 import ElementPlus from './element'
 import App from './App.vue'
 
@@ -22,7 +22,7 @@ import 'codemirror/addon/hint/css-hint'
 
 const app = createApp(App)
 
-app.use(createPinia())
+app.use(Store)
 app.use(ElementPlus)
 
 app.mount(`#app`)

src/stores/index.ts

@@ -1,5 +1,5 @@
 import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
-import { defineStore } from 'pinia'
+import { createPinia, defineStore } from 'pinia'
 import { marked } from 'marked'
 import CodeMirror from 'codemirror'
 import { useDark, useStorage, useToggle } from '@vueuse/core'
@@ -379,7 +379,23 @@ export const useStore = defineStore(`store`, () => {
       })
   }
 
+  const isShowCssEditor = ref(false)
+  const toggleShowCssEditor = useToggle(isShowCssEditor)
+
+  const isShowInsertFormDialog = ref(false)
+  const toggleShowInsertFormDialog = useToggle(isShowInsertFormDialog)
+
+  const isShowUploadImgDialog = ref(false)
+  const toggleShowUploadImgDialog = useToggle(isShowUploadImgDialog)
+
   return {
+    isShowCssEditor,
+    toggleShowCssEditor,
+    isShowInsertFormDialog,
+    toggleShowInsertFormDialog,
+    isShowUploadImgDialog,
+    toggleShowUploadImgDialog,
+
     isDark,
     toggleDark,
 
@@ -428,25 +444,4 @@ export const useStore = defineStore(`store`, () => {
   }
 })
 
-export const useDisplayStore = defineStore(`display`, () => {
+export default createPinia()
-  // 是否展示 CSS 编辑器
-  const isShowCssEditor = ref(false)
-  const toggleShowCssEditor = useToggle(isShowCssEditor)
-
-  // 是否展示插入表格对话框
-  const isShowInsertFormDialog = ref(false)
-  const toggleShowInsertFormDialog = useToggle(isShowInsertFormDialog)
-
-  // 是否展示上传图片对话框
-  const isShowUploadImgDialog = ref(false)
-  const toggleShowUploadImgDialog = useToggle(isShowUploadImgDialog)
-
-  return {
-    isShowCssEditor,
-    toggleShowCssEditor,
-    isShowInsertFormDialog,
-    toggleShowInsertFormDialog,
-    isShowUploadImgDialog,
-    toggleShowUploadImgDialog,
-  }
-})

src/utils/index.ts

@@ -111,6 +111,8 @@ export function css2json(css: string): Partial<Record<Block | Inline, Properties
     css = css.slice(rbracket + 1).trim()
   }
 
+  console.log(`json`, json)
+
   return json
 }
 

src/views/CodemirrorEditor.vue

@@ -6,7 +6,7 @@ import { ElCol, ElMessage } from 'element-plus'
 import CodeMirror from 'codemirror'
 
 import fileApi from '@/utils/file'
-import { useDisplayStore, useStore } from '@/stores'
+import { useStore } from '@/stores'
 
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
@@ -32,9 +32,7 @@ import {
 } from '@/utils'
 
 const store = useStore()
-const displayStore = useDisplayStore()
+const { isDark, output, editor, editorContent, isShowCssEditor } = storeToRefs(store)
-const { isDark, output, editor, editorContent } = storeToRefs(store)
-const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
   editorRefresh,
@@ -43,12 +41,9 @@ const {
   formatContent,
   importMarkdownContent,
   resetStyleConfirm,
-} = store
-
-const {
   toggleShowInsertFormDialog,
   toggleShowUploadImgDialog,
-} = displayStore
+} = store
 
 const isImgLoading = ref(false)
 const timeout = ref<NodeJS.Timeout>()