From ff401a524ba8b241c36e1273dc9deaa19619dad5 Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Mon, 27 Apr 2026 09:42:43 +0800
Subject: [PATCH] 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 |  24 +++++++++++++++++++-----
 packages/drizzle-pkg/db.sqlite            | Bin 188416 -> 188416 bytes
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/components/PostBodyMarkdownEditor.vue b/app/components/PostBodyMarkdownEditor.vue
index 0d2049f..500b0c5 100644
--- a/app/components/PostBodyMarkdownEditor.vue
+++ b/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
-      ref="mountEl"
-      :style="editorContainerStyle"
-      class="w-full min-w-0 rounded-lg overflow-hidden ring ring-default"
-    />
+    <div class="relative">
+      <div
+        ref="mountEl"
+        :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">
         编辑器加载中…
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 1eab2c7a56e17c4f07de9b4d7e759326bd5b4979..3f8aa141fa0c326f3a08e791e809ea598f90601f 100644
GIT binary patch
delta 1332
zcmbW0O>7%Q6vt=Qo;vH@o#%$eRg?m@8k9uo;{6(bfM|*$C{m@?2XX)>ayQ;hY#_FY
zT}qltPLvB5)Rr6;4k<_=_0W>GvecD8DwTQxRM8^k&_f%b9EcAU5h6v<NU(NNJ}M4v
zFHi4DZ{|PmKfgC~Ntn4L9Ph%rPV5-OyUri{B-S3FH3VP5dys){dV$`iwR$vCpu1Tc
z8R7{^>MW_oZBtGqRVEv@uF6T4&}79L)h#8bCe%?CFRV^~IDi+fl)47kme#R(IM7}H
zVfRi<1N0Vx5x5Ql81z;>wC5V_>-7!c2f4UyUO4c3djOUZtix~c3*3euVFi}!TgzX9
zvwD@|>px{5p9%V55y7u;85ZmG`;VYwo1gE;<x-_8o1<^)N0h_)(rcuC`RBoqzl@;l
z4LAnEtb~JzH}?*arySG9J<cNFmqJ&H=SpLCHJ6W!nT0oO%l!jz@OU^NHV{1tr=?TU
zI_#JBi4BQKtR4+jMCaWzc(`_uN{F9|atLiFh#)nQNN7w=XojL|a$GY!6PY5X3vZ_j
zMOjm{xU3kmmXMW{taxtfPan2N%Y_MZ+>SM~=U<$(O>4^Y^w4l$Gxn!nmHt*h|0w7z
z&NL<u=y8o1s*(CXiKNV!%+&iN+L!N1l#U&7PkoAW81Hq2vv_bMBYINPtzrHnr5P+C
z8!R4Ik|}09l2q-abNVcPB^;o02)?Fs@G%^PJwT|J(>d>F_ERT+5x;;V&f-P9qxOt%
z3O|~e^j}9eU3yTHq-TB88>%`}b@p&$i_Xz6@H^oEEH$ZJ+T?b{BX<dw>e2LPEpq(=
zj}QvBdEtqG^Z7B{8S?pfKIqjPtRc7yYp!?=H((3#VN5yq?su3E1${yWi7$&p$jnDW
z-LAHZ`-IwT4*|q?^v@1;qOGJ05n@&>^FIEgnGN`|P52Z;OJtRlqIuwzi{m4`u}amf
z7ILu(+bWo`hcmqY9=?4+%dAvPD>KsKHe8-8yk%DHR<V5}x?~;y`B)nV4Fqe@aK#XJ
z6LtnUe+O<YETKI1ckr!T*f3+I*}3A15$*;^BJmnGJ2`hP#)Ttz*cH=U8scS+BL2xv
zV)uAkNC>GM%H?d^vaJcT^15w#514%JdMsa>uw&jk^RZmXDip_^6IrfzThWgfzJ33L
RJFTXxt$4@%Cd+9ve*uWSbKd{}

delta 958
zcmZ9KU1$_n6vywGo!R8>?9N%yO$f%YYeGfrn%&9V%uXu`4Wg*TEf_^K#x+^1!IDiZ
zN+n<<L3}BVjc|Q1A{y9-#4NJvls;%61k?vVLZAU7Dq(9y#2^Nn4`}afx+RnYXU@$0
z&i@<^|E>|WYeel`4Z(}$br8IDc%a(v*6tE~h`-<gtkUjk@3W!cb*+fGl?JLPeYm?S
z`+9RF_}!=yY{W@a(ZKVV5!h#~Pu)Ey{!9~G#LxH<-{Um?nO%{3f_&zQBxm0=t?BZ(
zaFpOD9L343_Ual2Ak}vAhj4p~ajey9O{AFHBh%9C=!ZJL+)1!g2zQ`*4!}cbVq1ek
zcp?ew_;rNs^4N22(w;}~^p?oJG|{f&pfBxP^sz!@L;jOq{?iZ~tRSRRQ4|t2O*3M!
zm|km|df3uqk%$?InfzG>0wJxwBbjLV5&B1}AABkDmOFc#`ozm!)JN#IA&KuBh8nZ1
zynwM&zY2gIDc5$8DhF_;kiwMOsHwB471mAWjJ4A@p&4L+s~M>CPZL6JEo<TF`>>Wz
zWxx}v_^Y5FzjRsX$1jWtxS6(xTub_VFa!HbWUZUvBdr^6V5iny2yw4^jUT%QTVb3J
z--B{Bx$$)JNUB&!%<(Hju=Z?`D98Ujgk>__stL0QW6>H>hL3-r_-?7gEwI7Dy_jXh
zYQv^(=#hvOWy>%{U_Axwe`j5W$pUN4V{U`hS~Ujmybl*jWSnr^GLiSogm~s78;bw7
z<QapCzA|U|3TN#yXQ@@rNR(w41=UF&my1%5_y)K@Z~^CS?^Ae-ZWjP8QtXA7K>fv%
zS0Ua#UZpSO|H9U1V7<yC@8Fxhncu$-pOG~}%QjS&k`>CDW<|*j+|K=cG4D$&8fAvg
z&a|A)^`=kdhA;nND~s^=%3{D-g0uL>_WGq4SShcjkm_hVdi+F^Qji1UP1ssp+A2@x
zY;RDSLLY_yz#`S2t(HoHP;YzVQXKigL()oV>L_nNBz?t)nj|ft?A;0d4>rYmpno(l
O)s)XY_Twf=@A?N{M-KJ?