refactor(front): 优化状态管理和组件逻辑，简化GlobalDrawer和Tiptap组件的实现

front/components/GlobalDrawer.vue

@@ -3,24 +3,25 @@ import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { createVNode } from 'vue'
 import useStore from '@/composables/useStore'
 
-const store = useStore('drawer')
-const drawer = computed(() => store?._get('drawer'))
-const currentDrawer = computed(() => drawer?.value?.[drawer?.value?.length - 1])
+const store = useStore()
+const currentDrawer = computed(() => store.drawer?.[store.drawer?.length - 1])
 
-const render = computed<() => Component>(() => currentDrawer?.value?.render)
-const hide = computed<() => void>(() => currentDrawer?.value?.onClose)
+const render = computed(() => currentDrawer?.value?.render)
+const hide = computed(() => currentDrawer?.value?.onClose)
 const Children = () =>
-    createVNode(render.value, {
-        hide: hide?.value,
-    })
+    render.value
+        ? createVNode(render.value, {
+              hide: hide?.value,
+          })
+        : null
 </script>
 
 <template>
     <Drawer
-        :open="!!drawer?.[drawer?.length - 1]"
+        :open="!!store.drawer?.[store.drawer?.length - 1]"
         @update:open="
             (open) => {
-                if (!open && drawer?.length > 0) {
+                if (!open && store?.drawer?.length && hide) {
                     hide()
                 }
             }

front/components/Tiptap.vue

@@ -1,40 +1,48 @@
 <script setup lang="ts">
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import { Markdown } from 'tiptap-markdown';
+import { Markdown } from 'tiptap-markdown'
 import Placeholder from '@tiptap/extension-placeholder'
 const props = defineProps<{
-  modelValue: string
-  placeholder?: string
+    modelValue?: string
+    placeholder?: string
 }>()
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+    (e: 'update:modelValue', value: string): void
 }>()
 
 const editor = ref<Editor | undefined>(undefined)
 onMounted(() => {
-  editor.value = new Editor({
-    content: props.modelValue,
-    extensions: [StarterKit, Markdown.configure({
-      transformPastedText: true,
-      transformCopiedText: true
-    }), Placeholder.configure({
-      placeholder: props.placeholder ?? ''
-    })],
-    onUpdate: () => {
-      // HTML
-      emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
+    editor.value = new Editor({
+        content: props.modelValue,
+        extensions: [
+            StarterKit,
+            Markdown.configure({
+                transformPastedText: true,
+                transformCopiedText: true,
+            }),
+            Placeholder.configure({
+                placeholder: props.placeholder ?? '',
+            }),
+            // CommandsPlugin,
+        ],
+        onUpdate: () => {
+            emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
+        },
+    })
+})
+watch(
+    () => props.modelValue,
+    (value) => {
+        if (value !== editor.value?.storage?.markdown?.getMarkdown()) {
+            editor.value?.commands.setContent(value ?? '')
+        }
     }
-  })
-})
-watch(() => props.modelValue, (value) => {
-  editor.value?.commands.setContent(value)
-})
+)
 onUnmounted(() => {
-  editor.value?.destroy()
+    editor.value?.destroy()
 })
-
 </script>
 <template>
-  <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1" />
-</template>
+    <editor-content :editor="editor" class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1" />
+</template>