From 2382dad18886c98dbb267c7a7b801c053b8fe43c Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Mon, 27 Apr 2026 21:35:07 +0800
Subject: [PATCH] feat(quick-note): enhance quick note editor with content
 change events and mobile responsiveness

- Added a new event for content changes in the Quick Note Editor to improve synchronization with the modal state.
- Implemented mobile viewport detection to adjust the editor's behavior and layout accordingly.
- Updated the Quick Note Modal to handle editor content changes and improve resizing logic based on viewport size.
- Introduced cache control headers for the Vditor route to optimize performance.

These changes enhance the user experience by ensuring better content management and responsiveness in the Quick Note feature.
---
 app/components/AppShell.vue                        |  10 +++
 app/components/QuickNoteEditor.vue                 |  20 +++++-
 app/components/QuickNoteModal.vue                  |  77 ++++++++++++---------
 ...post-body-markdown-editor-vditor-config.test.ts |   1 +
 .../post-body-markdown-editor-vditor-config.ts     |   1 +
 nuxt.config.ts                                     |   5 ++
 packages/drizzle-pkg/db.sqlite                     | Bin 188416 -> 196608 bytes
 7 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/app/components/AppShell.vue b/app/components/AppShell.vue
index d4e8acc..ece463d 100644
--- a/app/components/AppShell.vue
+++ b/app/components/AppShell.vue
@@ -191,6 +191,16 @@ async function logout() {
                 variant="soft"
                 icon="i-lucide-notebook-pen"
                 size="sm"
+                class="md:hidden"
+                aria-label="打开速记"
+                @click="quickNoteModalOpen = true"
+              />
+              <UButton
+                v-if="showQuickCreate"
+                color="neutral"
+                variant="soft"
+                icon="i-lucide-notebook-pen"
+                size="sm"
                 class="hidden md:inline-flex"
                 @click="quickNoteModalOpen = true"
               >
diff --git a/app/components/QuickNoteEditor.vue b/app/components/QuickNoteEditor.vue
index 6cc0e2c..4238681 100644
--- a/app/components/QuickNoteEditor.vue
+++ b/app/components/QuickNoteEditor.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   'update:modelValue': [string]
+  'content-change': [string]
 }>()
 
 const toast = useToast()
@@ -34,7 +35,10 @@ const bridge = createPostBodyMarkdownEditorBridge({
     }
     return new Vditor(element, buildQuickNoteEditorVditorOptions({
       value,
-      onInput,
+      onInput: (nextValue) => {
+        emit('content-change', nextValue)
+        onInput(nextValue)
+      },
       onUploadError: () => {
         toast.add({ title: '图片上传失败', color: 'warning' })
       },
@@ -47,12 +51,22 @@ function flushValue() {
   if (typeof current !== 'string') {
     return
   }
+  emit('content-change', current)
   if (current === props.modelValue) {
     return
   }
   emit('update:modelValue', current)
 }
 
+function triggerImmediateSync() {
+  if (!import.meta.client) {
+    return
+  }
+  requestAnimationFrame(() => {
+    flushValue()
+  })
+}
+
 defineExpose<{
   flushValue: () => void
 }>({
@@ -111,6 +125,10 @@ onBeforeUnmount(() => {
     </div>
     <div
       v-else
+      @keyup.capture="triggerImmediateSync"
+      @compositionend.capture="triggerImmediateSync"
+      @paste.capture="triggerImmediateSync"
+      @cut.capture="triggerImmediateSync"
       ref="mountEl"
       class="h-full w-full min-w-0 rounded-lg overflow-hidden ring ring-default"
     />
diff --git a/app/components/QuickNoteModal.vue b/app/components/QuickNoteModal.vue
index c0eca6b..0587ab5 100644
--- a/app/components/QuickNoteModal.vue
+++ b/app/components/QuickNoteModal.vue
@@ -30,10 +30,12 @@ const loading = ref(false)
 const saving = ref(false)
 const loadError = ref('')
 const fullScreen = ref(false)
+const isMobileViewport = ref(false)
 const lastSavedAt = ref<string | null>(null)
 const allowSilentClose = ref(false)
 let removeRouteGuard: (() => void) | null = null
-let syncDraftTimer: ReturnType<typeof setInterval> | null = null
+let viewportMql: MediaQueryList | null = null
+let onViewportChange: ((event: MediaQueryListEvent) => void) | null = null
 
 const modalRect = reactive({ left: 0, top: 0, width: 0, height: 0 })
 const dragging = ref(false)
@@ -63,13 +65,21 @@ const draftContent = computed({
 })
 
 const isDirty = computed(() => modalState.value.isDirty)
-const editorResizeSignal = computed(() => `${modalRect.width}x${modalRect.height}-${fullScreen.value ? 'full' : 'windowed'}`)
+const effectiveFullscreen = computed(() => fullScreen.value || isMobileViewport.value)
+const editorResizeSignal = computed(() => `${modalRect.width}x${modalRect.height}-${effectiveFullscreen.value ? 'full' : 'windowed'}`)
 const editorReloadToken = ref(0)
 
 function syncDraftFromEditor() {
   quickNoteEditorRef.value?.flushValue()
 }
 
+function handleEditorContentChange(nextValue: string) {
+  if (nextValue === modalState.value.draftContent) {
+    return
+  }
+  modalState.value = updateDraftContent(modalState.value, nextValue)
+}
+
 function reloadEditor() {
   syncDraftFromEditor()
   editorReloadToken.value += 1
@@ -79,28 +89,8 @@ function reloadEditor() {
   })
 }
 
-function startDraftSyncTimer() {
-  if (!import.meta.client || syncDraftTimer) {
-    return
-  }
-  syncDraftTimer = setInterval(() => {
-    if (!open.value || loading.value || saving.value) {
-      return
-    }
-    syncDraftFromEditor()
-  }, 120)
-}
-
-function stopDraftSyncTimer() {
-  if (!syncDraftTimer) {
-    return
-  }
-  clearInterval(syncDraftTimer)
-  syncDraftTimer = null
-}
-
 const cardStyle = computed(() => {
-  if (fullScreen.value) {
+  if (effectiveFullscreen.value) {
     return {}
   }
   return {
@@ -112,7 +102,7 @@ const cardStyle = computed(() => {
 })
 
 const cardClass = computed(() => {
-  if (fullScreen.value) {
+  if (effectiveFullscreen.value) {
     return 'h-full w-full rounded-none'
   }
   return 'absolute max-w-none rounded-xl'
@@ -137,6 +127,13 @@ function updateModalSizeFromViewport() {
   if (!import.meta.client) {
     return
   }
+  if (isMobileViewport.value) {
+    modalRect.left = 0
+    modalRect.top = 0
+    modalRect.width = window.innerWidth
+    modalRect.height = window.innerHeight
+    return
+  }
   const next = createDefaultModalRect({
     viewportWidth: window.innerWidth,
     viewportHeight: window.innerHeight,
@@ -162,7 +159,7 @@ function updateModalSizeFromViewport() {
 }
 
 function handlePointerMove(event: PointerEvent) {
-  if (resizing.value && !fullScreen.value) {
+  if (resizing.value && !effectiveFullscreen.value) {
     if (!import.meta.client) {
       return
     }
@@ -205,7 +202,7 @@ function handlePointerMove(event: PointerEvent) {
     modalRect.height = clampedRect.height
     return
   }
-  if (!dragging.value || fullScreen.value) {
+  if (!dragging.value || effectiveFullscreen.value) {
     return
   }
   const clamped = clampModalRect({
@@ -224,7 +221,7 @@ function handlePointerMove(event: PointerEvent) {
 }
 
 function startDragging(event: PointerEvent) {
-  if (fullScreen.value || event.button !== 0) {
+  if (effectiveFullscreen.value || event.button !== 0) {
     return
   }
   dragging.value = true
@@ -250,7 +247,7 @@ function stopResizing() {
 }
 
 function startResizing(event: PointerEvent, direction: ResizeDirection) {
-  if (fullScreen.value || event.button !== 0 || !import.meta.client) {
+  if (effectiveFullscreen.value || event.button !== 0 || !import.meta.client) {
     return
   }
   resizing.value = true
@@ -266,6 +263,9 @@ function startResizing(event: PointerEvent, direction: ResizeDirection) {
 }
 
 function toggleFullScreen() {
+  if (isMobileViewport.value) {
+    return
+  }
   fullScreen.value = !fullScreen.value
   if (fullScreen.value) {
     stopDragging()
@@ -365,13 +365,11 @@ watch(
     }
     allowSilentClose.value = false
     if (!isOpen) {
-      stopDraftSyncTimer()
       fullScreen.value = false
       stopDragging()
       stopResizing()
       return
     }
-    startDraftSyncTimer()
     updateModalSizeFromViewport()
     void loadQuickNote()
   },
@@ -381,6 +379,13 @@ onMounted(() => {
   if (!import.meta.client) {
     return
   }
+  viewportMql = window.matchMedia('(max-width: 767px)')
+  isMobileViewport.value = viewportMql.matches
+  onViewportChange = (event: MediaQueryListEvent) => {
+    isMobileViewport.value = event.matches
+    updateModalSizeFromViewport()
+  }
+  viewportMql.addEventListener('change', onViewportChange)
   removeRouteGuard = router.beforeEach((to) => {
     syncDraftFromEditor()
     if (!open.value || !isDirty.value) {
@@ -393,8 +398,12 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  stopDraftSyncTimer()
   if (import.meta.client) {
+    if (viewportMql && onViewportChange) {
+      viewportMql.removeEventListener('change', onViewportChange)
+    }
+    onViewportChange = null
+    viewportMql = null
     removeRouteGuard?.()
     removeRouteGuard = null
     window.removeEventListener('beforeunload', handleBeforeUnload)
@@ -426,7 +435,7 @@ onBeforeUnmount(() => {
         <template #header>
           <div
             class="flex items-center justify-between gap-3 select-none"
-            :class="fullScreen ? 'cursor-default' : 'cursor-move'"
+            :class="effectiveFullscreen ? 'cursor-default' : 'cursor-move'"
             @pointerdown="startDragging"
           >
             <div class="min-w-0">
@@ -447,6 +456,7 @@ onBeforeUnmount(() => {
                 @click="reloadEditor"
               />
               <UButton
+                v-if="!isMobileViewport"
                 color="neutral"
                 variant="ghost"
                 size="sm"
@@ -490,6 +500,7 @@ onBeforeUnmount(() => {
               ref="quickNoteEditorRef"
               v-model="draftContent"
               :resize-signal="editorResizeSignal"
+              @content-change="handleEditorContentChange"
             />
           </div>
         </div>
@@ -522,7 +533,7 @@ onBeforeUnmount(() => {
           </div>
         </template>
         </UCard>
-      <template v-if="!fullScreen">
+      <template v-if="!effectiveFullscreen">
         <button
           type="button"
           class="absolute left-0 top-0 z-10 h-full w-1 cursor-w-resize"
diff --git a/app/components/post-body-markdown-editor-vditor-config.test.ts b/app/components/post-body-markdown-editor-vditor-config.test.ts
index 6959266..48a8e36 100644
--- a/app/components/post-body-markdown-editor-vditor-config.test.ts
+++ b/app/components/post-body-markdown-editor-vditor-config.test.ts
@@ -16,6 +16,7 @@ describe('PostBodyMarkdownEditor Vditor config', () => {
     expect(options.mode).toBe('ir')
     expect(options.lang).toBe('zh_CN')
     expect(options.cdn).toBe('/vditor')
+    expect(options.icon).toBe('material')
     expect(options.preview).toEqual({
       mode: 'editor',
       actions: [],
diff --git a/app/components/post-body-markdown-editor-vditor-config.ts b/app/components/post-body-markdown-editor-vditor-config.ts
index a7eecff..4710cfb 100644
--- a/app/components/post-body-markdown-editor-vditor-config.ts
+++ b/app/components/post-body-markdown-editor-vditor-config.ts
@@ -55,6 +55,7 @@ export function buildPostBodyMarkdownEditorVditorOptions(input: BuildVditorOptio
     value: input.value,
     lang: 'zh_CN',
     cdn: '/vditor',
+    icon: 'material',
     cache: { enable: false },
     mode: 'ir',
     preview: {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 888da21..2b22c24 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -48,6 +48,11 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   /** 探针路径与 `server/middleware/00.cloud-probe.ts` 一致：禁止 CDN/LB 长期缓存探测响应 */
   routeRules: {
+    '/vditor/**': {
+      headers: {
+        'cache-control': 'public, max-age=31536000, immutable',
+      },
+    },
     ...Object.fromEntries(
       CLOUD_PROBE_PATHS.map((path) => [
         path,
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 180e03b7142dcd5c2412b2f8097ad99e556dcf06..c5055d3e00b05c4ca400a7c8a6dd3e4f08fe563a 100644
GIT binary patch
delta 1012
zcmcgqOK1~O6rDGjX)?*o+|&<RS}?VhR%~oKGs#R;)M`@#Ee&Y9F_a|p2?QlolZYQM
zjinnwZ7ni_WTzm4)H2xET}55^fhfA^#)?(xrcks{Xp8z(#3Bf~@xgodz`LAx&Uv?g
z($(M34pmo%34-w9{d4UcZW2*=EPfqoSXL*%f+SS&&-gqqaPPURTnGD^9b<K?*4@T-
zcCa*2;AlnD1DY7rWl8mmnjjjAph~LZm*s>k$oN!)x~L|Mq$CFvMGUm~{feZkf)Eg7
zDH)Ja@!>Vax>M6_t6||00V}WwA7Kt=VFq5q6ug2mJb_16t>*^Nl#M{_$dl$B>l}QT
zfX8qdqEOF|^K)2Z829*i+0W2D3{CsgKua>I`n{@T_`Fg=6TFHhY2G9j;}e5HMHc<2
z_-W0VL#SA$7Y|wa-Gj*C;3o*^<tHrX-rM}vMq3a18y?1b+qD_3bHLOu{WI7B)^AlF
zy$|MmnWPY7y^d|XLzQg<mr6^3>~A=npv_f5u-&c-S9GM-U0)LB(JQCpAjK0*)wX7n
zTS1LmoQaH{aK5{D@kB1#i;54<hZ>IN)FUbF2gdTNUgpi{GP*_KkBpR<6|`(a?khC8
ziE=GL9uqg*jgW?mB*Lb-1GR+)D6f4(T^$;XWE1KU<5(`G9gd~@vPNbVY~Ft$)Y={L
zbhqy740+<KZsMLsr^hq=qR#XnvevHkrL#slYxW{?u~gv50ff$)^d59t%5S%CXsttq
zhE!TNPOf5z<ub<cSW1uO(y3#))dGCxbQ4-H{<$~qiFEz0CjO1Cv<xIaL@(f(`G8Y@
z3g*-($#V>a5KWQaQ@T)E7$se9#EegpUjUcqxVRV&$A+MtfOb4VyC7eXk)2@9_0aT*
wcq-GDI-Wfh|BoQ_Z;v^#HOI~5H-od)&hJ)M@EDdVC&_6T@wwMhHXFly1)O+C1poj5

delta 355
zcmYL@O-lk%7=`b9ozd*h+*jSHL0JZYQDU@6q1s0uP`e>&Q_wE@0~*oZ8e-hEs#O#w
zmz=H8rZlpJAZ{d-K0pKsAxO!FAUbe3tMl+A5=tV+l74rL5Hex)FEdBuQxMB+o}-T`
z8G-`0(aRrroJZ6bHKi^n-%3UVhIB<_23Bo8hIxWr{KOAz;yc!{iWMwj5%VIja*29=
zGU{>gIKg{7Mh$~J%bPrI0d}~E&mMx^!D|H9g))D|^{^`>YD>f5abWeITDQ1W;oiMN
zqgA9%@wS22(&Jfq&-_AgJgb(vjcG(#Q)H&;0awtBw4l_l=gMJ&HDJ`xI&jgqC~@NS
zhDHqDfiZKs3q>376PXTLkI>CB-C`7qrV)h#nENU{0O%R=9CWfS>P*V7*v5+GP(Y)S
erd+j40J22k^fu*hnC&!WF0f~Fw1?I_{mu^o$8z2P