refactor: split store (#413)

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

@@ -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)

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/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>()