From e64b49f03d23f493f57af4802663d6c06f079f0e Mon Sep 17 00:00:00 2001
From: hanshiyang <yg_yl@163.com>
Date: Wed, 19 Nov 2025 20:13:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(UI):=20=E5=A2=9E=E5=8A=A0=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E7=8A=B6=E6=80=81=E6=8F=90=E7=A4=BA=E5=92=8C=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加保存状态指示器组件，可通过父窗口调用显示
- 实现 Ctrl+S/⌘+S 全局快捷键触发保存功能
- 调整菜单项字体大小至16px
---
 src/main.ts   | 41 +++++++++++++++++++++++++++++++++++++++++
 src/style.css |  3 ++-
 vocd.html     | 16 ++++++++++++++++
 3 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 6314d1e..133ee14 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -192,6 +192,47 @@ window.onload = function () {
     }
   }
 
+  // 全局快捷键：Ctrl+S / ⌘+S 触发保存
+  window.addEventListener('keydown', function (e) {
+    const isSaveKey = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S')
+    if (!isSaveKey) return
+    e.preventDefault()
+
+    const params = new URLSearchParams(window.location.search)
+    const isEditMode = params.get('mode') === 'edit' || params.get('model') === 'edit'
+    if (!isEditMode) {
+      console.warn('当前为只读模式，Ctrl+S 不可用')
+      alert('当前为只读模式，不能保存')
+      return
+    }
+
+    // 触发保存按钮的同一逻辑
+    saveCallbackDom.click()
+  })
+
+  // 向父窗口暴露：显示保存状态（文本、颜色、延时可选）
+  ;(window as any).showSaveStatus = (text: string, color?: string, delay?: number) => {
+    try {
+      const indicator = document.getElementById('save-status-indicator') as HTMLDivElement | null
+      if (!indicator) return
+      const duration = typeof delay === 'number' ? delay : 2000
+      indicator.textContent = text || '已保存'
+      indicator.style.background = color || '#4caf50'
+      indicator.style.display = 'block'
+      // 清理之前的隐藏计时器
+      const key = '__save_status_timer__'
+      const prev = (window as any)[key]
+      if (prev) {
+        window.clearTimeout(prev)
+      }
+      ;(window as any)[key] = window.setTimeout(() => {
+        indicator.style.display = 'none'
+      }, duration)
+    } catch (err) {
+      console.warn('显示保存状态失败:', err)
+    }
+  }
+
   const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
   undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
   undoDom.onclick = function () {
diff --git a/src/style.css b/src/style.css
index 7d5a87d..c7e5aad 100644
--- a/src/style.css
+++ b/src/style.css
@@ -218,7 +218,8 @@ ul {
   user-select: none;
   border-radius: 3px;
   color: #0969da; /* link blue */
-  font-size: 12px;
+  font-size: 16px;
+  /* font-weight: bold; */
   line-height: 24px;
 }
 
diff --git a/vocd.html b/vocd.html
index 05c82bf..71781b4 100644
--- a/vocd.html
+++ b/vocd.html
@@ -346,6 +346,7 @@
         </div>
         <div class="menu-item__save" title="保存">
           <span>保存</span>
+          
         </div>
       </div>
     </div>
@@ -427,6 +428,21 @@
       </div>
     </div>
   </div>
+  <!-- 保存状态指示器：默认隐藏，父窗口可调用子窗口函数显示 -->
+  <div id="save-status-indicator" style="
+    position: fixed;
+    left: 50%;
+    top: 24px;
+    transform: translateX(-50%);
+    display: none;
+    background: #4caf50;
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    font-size: 14px;
+    z-index: 9999;
+  ">已保存</div>
   <script type="module" src="/src/main.ts"></script>
 </body>