refactor: split monolithic store (#1109)

Author: yanglbme

apps/web/src/App.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { Toaster } from '@/components/ui/sonner'
+import { useUIStore } from '@/stores/ui'
 import CodemirrorEditor from '@/views/CodemirrorEditor.vue'
 
-const store = useStore()
+const uiStore = useUIStore()
+const { isDark } = storeToRefs(uiStore)
+
 const isUtools = ref(false)
 
 onMounted(() => {
@@ -21,7 +24,7 @@ onMounted(() => {
   <Toaster
     rich-colors
     position="top-center"
-    :theme="store.isDark ? 'dark' : 'light'"
+    :theme="isDark ? 'dark' : 'light'"
   />
 </template>
 

apps/web/src/components/ai/SidebarAIToolbar.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Bot, Image as ImageIcon, Settings2, Wand2 } from 'lucide-vue-next'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore } from '@/stores/display'
+import { useEditorStore } from '@/stores/editor'
+import { useUIStore } from '@/stores/ui'
 import AIAssistantPanel from './chat-box/AIAssistantPanel.vue'
 import AIImageGeneratorPanel from './image-generator/AIImageGeneratorPanel.vue'
 import { AIPolishPopover } from './tool-box'
@@ -14,8 +16,11 @@ const displayStore = useDisplayStore()
 const { aiDialogVisible, aiImageDialogVisible } = storeToRefs(displayStore)
 const { toggleAIDialog, toggleAIImageDialog } = displayStore
 
-const store = useStore()
-const { editor, hasShownAIToolboxHint } = storeToRefs(store)
+const editorStore = useEditorStore()
+const { editor } = storeToRefs(editorStore)
+
+const uiStore = useUIStore()
+const { hasShownAIToolboxHint } = storeToRefs(uiStore)
 
 // 工具栏状态：false=默认(只显示贴边栏), true=展开(显示AI图标)
 const isExpanded = ref(false) // 默认收起状态

apps/web/src/components/ai/chat-box/AIAssistantPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { QuickCommandRuntime } from '@/stores/useQuickCommands'
+import type { QuickCommandRuntime } from '@/stores/quickCommands'
 import {
   Check,
   Copy,
@@ -22,16 +22,18 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Textarea } from '@/components/ui/textarea'
-import useAIConfigStore from '@/stores/AIConfig'
-import { useQuickCommands } from '@/stores/useQuickCommands'
+import useAIConfigStore from '@/stores/aiConfig'
+import { useDisplayStore } from '@/stores/display'
+import { useEditorStore } from '@/stores/editor'
+import { useQuickCommands } from '@/stores/quickCommands'
 import { copyPlain } from '@/utils/clipboard'
 
 /* ---------- 组件属性 ---------- */
 const props = defineProps<{ open: boolean }>()
 const emit = defineEmits([`update:open`])
 
-const store = useStore()
-const { editor } = storeToRefs(store)
+const editorStore = useEditorStore()
+const { editor } = storeToRefs(editorStore)
 const displayStore = useDisplayStore()
 const { toggleAIImageDialog } = displayStore
 

apps/web/src/components/ai/chat-box/AIConfig.vue

@@ -3,7 +3,7 @@ import { serviceOptions } from '@md/shared/configs'
 import { DEFAULT_SERVICE_TYPE } from '@md/shared/constants'
 import { Info } from 'lucide-vue-next'
 import { PasswordInput } from '@/components/ui/password-input'
-import useAIConfigStore from '@/stores/AIConfig'
+import useAIConfigStore from '@/stores/aiConfig'
 
 /* -------------------------- 基础数据 -------------------------- */
 

apps/web/src/components/ai/chat-box/AIFixedBtn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Bot } from 'lucide-vue-next'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore } from '@/stores/display'
 
 defineProps<{
   isMobile: boolean

apps/web/src/components/ai/chat-box/QuickCommandManager.vue

@@ -4,7 +4,7 @@ import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
-import { useQuickCommands } from '@/stores/useQuickCommands'
+import { useQuickCommands } from '@/stores/quickCommands'
 
 /* ---------- 弹窗开关 ---------- */
 const props = defineProps<{ open: boolean }>()

apps/web/src/components/ai/image-generator/AIImageConfig.vue

@@ -12,7 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import useAIImageConfigStore from '@/stores/AIImageConfig'
+import useAIImageConfigStore from '@/stores/aiImageConfig'
 
 /* -------------------------- 基础数据 -------------------------- */
 

apps/web/src/components/ai/image-generator/AIImageGeneratorBtn.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Image as ImageIcon } from 'lucide-vue-next'
-import { useDisplayStore } from '@/stores'
+import { useDisplayStore } from '@/stores/display'
 import AIImageGeneratorPanel from './AIImageGeneratorPanel.vue'
 
 defineProps<{

apps/web/src/components/ai/image-generator/AIImageGeneratorPanel.vue

@@ -9,7 +9,6 @@ import {
   Settings,
   Trash2,
 } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Button } from '@/components/ui/button'
 import {
@@ -20,8 +19,9 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Textarea } from '@/components/ui/textarea'
-import { useDisplayStore, useStore } from '@/stores'
-import useAIImageConfigStore from '@/stores/AIImageConfig'
+import useAIImageConfigStore from '@/stores/aiImageConfig'
+import { useDisplayStore } from '@/stores/display'
+import { useEditorStore } from '@/stores/editor'
 import { copyPlain } from '@/utils/clipboard'
 import AIImageConfig from './AIImageConfig.vue'
 
@@ -30,8 +30,8 @@ const props = defineProps<{ open: boolean }>()
 const emit = defineEmits([`update:open`])
 
 /* ---------- 编辑器引用 ---------- */
-const store = useStore()
-const { editor } = storeToRefs(store)
+const editorStore = useEditorStore()
+const { editor } = storeToRefs(editorStore)
 const displayStore = useDisplayStore()
 const { toggleAIDialog } = displayStore
 

apps/web/src/components/ai/tool-box/ToolBoxPopover.vue

@@ -15,7 +15,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import useAIConfigStore from '@/stores/AIConfig'
+import useAIConfigStore from '@/stores/aiConfig'
+import { useEditorStore } from '@/stores/editor'
 
 /* -------------------- props / emits -------------------- */
 const props = defineProps<{
@@ -40,7 +41,7 @@ const currentText = ref(``)
 const error = ref(``)
 
 /* -------------------- store & refs -------------------- */
-const store = useStore()
+const editorStore = useEditorStore()
 const resultContainer = ref<HTMLElement | null>(null)
 
 /* -------------------- dialog state sync -------------------- */
@@ -251,7 +252,7 @@ function stopAI() {
 
 /* -------------------- actions -------------------- */
 function replaceText() {
-  const editorView = toRaw(store.editor!)!
+  const editorView = toRaw(editorStore.editor!)!
   const selection = editorView.state.selection.main
   editorView.dispatch(editorView.state.replaceSelection(message.value))