fix: type check (#416)

src/components/CodemirrorEditor/CssEditor.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
 function editTabName() {
   ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
@@ -67,7 +68,7 @@ function handleTabsEdit(targetName: string, action: string) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
+    <el-col v-show="displayStore.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,25 +1,28 @@
 <script setup lang="ts">
-import { useStore } from '@/stores'
+import { TableIcon, UploadCloudIcon } from 'lucide-vue-next'
+import {
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarTrigger,
+} from '@/components/ui/menubar'
+import { useDisplayStore } from '@/stores'
 
-const store = useStore()
+const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = useDisplayStore()
-
-const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = store
 </script>
 
 <template>
   <MenubarMenu>
-    <MenubarTrigger> 编辑 </MenubarTrigger>
+    <MenubarTrigger>
+      编辑
+    </MenubarTrigger>
     <MenubarContent align="start">
       <MenubarItem @click="toggleShowUploadImgDialog()">
-        <el-icon class="mr-2 h-4 w-4">
+        <UploadCloudIcon class="mr-2 h-4 w-4" />
-          <ElIconUpload />
-        </el-icon>
         上传图片
       </MenubarItem>
       <MenubarItem @click="toggleShowInsertFormDialog()">
-        <el-icon class="mr-2 h-4 w-4">
+        <TableIcon 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 { nextTick, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
 import StyleOptionMenu from './StyleOptionMenu.vue'
@@ -16,9 +16,10 @@ import {
   legendOptions,
   themeOptions,
 } from '@/config'
-import { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 
 const store = useStore()
+const { toggleShowCssEditor } = useDisplayStore()
 
 const {
   theme,
@@ -40,7 +41,6 @@ const {
   codeBlockThemeChanged,
   legendChanged,
   macCodeBlockChanged,
-  toggleShowCssEditor,
 } = store
 
 const colorPicker = ref<HTMLElement & { show: () => void } | null>(null)
@@ -52,11 +52,6 @@ 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 { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 
 const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
 
@@ -81,6 +81,7 @@ const formatItems = [
 ] as const
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
 const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
 
@@ -153,6 +154,13 @@ function copy() {
     })
   }, 350)
 }
+
+function customStyle() {
+  displayStore.toggleShowCssEditor()
+  setTimeout(() => {
+    store.cssEditor!.refresh()
+  }, 50)
+}
 </script>
 
 <template>
@@ -371,6 +379,31 @@ function copy() {
               </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">
@@ -421,6 +454,17 @@ function copy() {
               </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,12 +8,13 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 import { createTable } from '@/utils'
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
-const { toggleShowInsertFormDialog } = store
+const { toggleShowInsertFormDialog } = displayStore
 
 const rowNum = ref(3)
 const colNum = ref(3)
@@ -45,7 +46,7 @@ function onUpdate(val: boolean) {
 </script>
 
 <template>
-  <Dialog :open="store.isShowInsertFormDialog" @update:open="onUpdate">
+  <Dialog :open="displayStore.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 { useStore } from '@/stores'
+import { useDisplayStore } from '@/stores'
 
 const emit = defineEmits([`uploadImage`])
 
-const store = useStore()
+const displayStore = useDisplayStore()
 
 const formGitHub = ref({
   repo: ``,
@@ -282,7 +282,7 @@ function uploadImage(params: { file: any }) {
 </script>
 
 <template>
-  <Dialog v-model:open="store.isShowUploadImgDialog">
+  <Dialog v-model:open="displayStore.isShowUploadImgDialog">
     <DialogContent class="max-w-max">
       <DialogHeader>
         <DialogTitle>本地上传</DialogTitle>

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import Store from './stores'
+import { createPinia } from 'pinia'
 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(Store)
+app.use(createPinia())
 app.use(ElementPlus)
 
 app.mount(`#app`)

src/stores/index.ts

@@ -1,5 +1,5 @@
 import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
-import { createPinia, defineStore } from 'pinia'
+import { defineStore } from 'pinia'
 import { marked } from 'marked'
 import CodeMirror from 'codemirror'
 import { useDark, useStorage, useToggle } from '@vueuse/core'
@@ -379,23 +379,7 @@ 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,
 
@@ -444,4 +428,25 @@ export const useStore = defineStore(`store`, () => {
   }
 })
 
-export default createPinia()
+export const useDisplayStore = defineStore(`display`, () => {
+  // 是否展示 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,8 +111,6 @@ 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 { useStore } from '@/stores'
+import { useDisplayStore, useStore } from '@/stores'
 
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
@@ -32,7 +32,9 @@ import {
 } from '@/utils'
 
 const store = useStore()
-const { isDark, output, editor, editorContent, isShowCssEditor } = storeToRefs(store)
+const displayStore = useDisplayStore()
+const { isDark, output, editor, editorContent } = storeToRefs(store)
+const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
   editorRefresh,
@@ -41,9 +43,12 @@ const {
   formatContent,
   importMarkdownContent,
   resetStyleConfirm,
+} = store
+
+const {
   toggleShowInsertFormDialog,
   toggleShowUploadImgDialog,
-} = store
+} = displayStore
 
 const isImgLoading = ref(false)
 const timeout = ref<NodeJS.Timeout>()