feat(editor): add loading state for markdown editor initialization

- Introduced a loading overlay that displays while the markdown editor is being initialized, enhancing user experience during the loading phase.
- Added a reactive property to manage the editor's readiness state, ensuring the UI reflects the editor's status accurately.
- Updated the component structure to accommodate the new loading state, improving visual feedback for users.

These changes improve the usability of the markdown editor by providing clear indications of its loading status.

app/components/PostBodyMarkdownEditor.vue

@@ -16,6 +16,7 @@ const emit = defineEmits<{
 const toast = useToast()
 const mountEl = ref<HTMLElement | null>(null)
 const isMobileViewport = ref(false)
+const isEditorReady = ref(false)
 const editorContainerStyle = computed(() => {
   if (isMobileViewport.value) {
     return {
@@ -89,6 +90,7 @@ onMounted(async () => {
       vditorCtor.value = ctor
       if (mountEl.value) {
         bridge.mount(mountEl.value)
+        isEditorReady.value = true
       }
     },
     onError: (error) => {
@@ -103,6 +105,7 @@ watch(() => props.modelValue, () => {
 
 onBeforeUnmount(() => {
   unmounted = true
+  isEditorReady.value = false
   if (viewportMql && onViewportChange) {
     viewportMql.removeEventListener('change', onViewportChange)
   }
@@ -114,11 +117,22 @@ onBeforeUnmount(() => {
 
 <template>
   <ClientOnly>
-    <div
+    <div class="relative">
-      ref="mountEl"
+      <div
-      :style="editorContainerStyle"
+        ref="mountEl"
-      class="w-full min-w-0 rounded-lg overflow-hidden ring ring-default"
+        :style="editorContainerStyle"
-    />
+        class="w-full min-w-0 rounded-lg overflow-hidden ring ring-default"
+      />
+      <div
+        v-if="!isEditorReady"
+        class="absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-default/80 backdrop-blur-[1px] text-muted ring ring-default"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <UIcon name="i-lucide-loader-2" class="size-5 animate-spin text-primary" />
+        <span class="text-sm">编辑器加载中…</span>
+      </div>
+    </div>
     <template #fallback>
       <div class="text-muted text-sm py-12 text-center border border-default rounded-lg">
         编辑器加载中…