From 6da3345852f4ad112de92f9b3d120af1f025f9ed Mon Sep 17 00:00:00 2001
From: KiriAky 107 <KiriAky107@qq.com>
Date: Mon, 7 Sep 2026 19:55:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20=E6=98=BE=E7=A4=BA=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=B9=B6=E5=90=AF=E7=94=A8?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src-tauri/src/main.rs                |   2 +-
 frontend/src/App.vue                          |   2 +
 frontend/src/components/common/AppShell.vue   |   4 +
 frontend/src/components/common/TitleBar.vue   |   2 -
 .../components/common/TitleBarMenu.spec.ts    |  29 ++++-
 .../src/components/common/TitleBarMenu.vue    | 119 +++++++++++-------
 frontend/src/services/platform/lifecycle.ts   |  16 ++-
 7 files changed, 123 insertions(+), 51 deletions(-)

diff --git a/frontend/src-tauri/src/main.rs b/frontend/src-tauri/src/main.rs
index 1b72065..d6bd922 100644
--- a/frontend/src-tauri/src/main.rs
+++ b/frontend/src-tauri/src/main.rs
@@ -170,7 +170,7 @@ fn main() {
                 "editor.import-note-properties",
                 "导入为笔记属性…",
                 false,
-                None::<&str>,
+                Some("CmdOrCtrl+Alt+P"),
             )?;
             let paragraph = Submenu::with_items(app, "段落", true, &[&import])?;
             app.manage(import);
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 06f082e..2eefecf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import AppShell from '@/components/common/AppShell.vue'
 import TitleBar from '@/components/common/TitleBar.vue'
+import TitleBarMenu from '@/components/common/TitleBarMenu.vue'
 import { isDesktop } from '@/services/platform/desktop'
 
 const route = useRoute()
@@ -13,6 +14,7 @@ const desktop = isDesktop()
 <template>
   <div v-if="isVaultEntry" class="entry-shell">
     <TitleBar v-if="desktop" />
+    <TitleBarMenu v-if="desktop" />
     <router-view />
   </div>
   <AppShell v-else>
diff --git a/frontend/src/components/common/AppShell.vue b/frontend/src/components/common/AppShell.vue
index ef49197..e713995 100644
--- a/frontend/src/components/common/AppShell.vue
+++ b/frontend/src/components/common/AppShell.vue
@@ -9,8 +9,10 @@ import PrimarySidebar from './PrimarySidebar.vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import StatusBar from './StatusBar.vue'
 import TitleBar from './TitleBar.vue'
+import TitleBarMenu from './TitleBarMenu.vue'
 import CommandPalette from './CommandPalette.vue'
 import { getIndexStatus } from '@/services/indexService'
+import { isDesktop } from '@/services/platform/desktop'
 import { navigateToCitation } from '@/composables/useCitationNavigation'
 import { useWorkspaceRefresh } from '@/composables/useWorkspaceRefresh'
 useWorkspaceRefresh()
@@ -25,6 +27,7 @@ const editorStore = useEditorStore()
 const settingsStore = useSettingsStore()
 const route = useRoute()
 const router = useRouter()
+const desktop = isDesktop()
 
 let statusTimer: ReturnType<typeof setTimeout> | undefined
 let disposed = false
@@ -75,6 +78,7 @@ defineExpose({ openCitation })
 <template>
   <div class="app-shell" :class="{ 'theme-dark': themeStore.isDark }">
     <TitleBar />
+    <TitleBarMenu v-if="desktop" />
     <div class="app-body">
       <PrimarySidebar />
       <SecondarySidebar v-if="secondaryComponent" :component="secondaryComponent" />
diff --git a/frontend/src/components/common/TitleBar.vue b/frontend/src/components/common/TitleBar.vue
index cc087c8..da5819a 100644
--- a/frontend/src/components/common/TitleBar.vue
+++ b/frontend/src/components/common/TitleBar.vue
@@ -6,7 +6,6 @@ import { useEditorStore } from '@/stores/editor'
 import { useThemeStore } from '@/stores/theme'
 import { Moon, Sunny } from '@element-plus/icons-vue'
 import AppIcon from './AppIcon.vue'
-import TitleBarMenu from './TitleBarMenu.vue'
 import { t } from '@/i18n'
 import { isDesktop } from '@/services/platform/desktop'
 import { minimizeWindow, requestWindowClose, toggleMaximizeWindow } from '@/services/platform/windowControls'
@@ -62,7 +61,6 @@ function toggleFromTitlebar(event: MouseEvent) {
         {{ currentFileName }}
         <span v-if="isDirty" class="dirty-dot" />
       </span>
-      <TitleBarMenu />
     </div>
     <div class="titlebar-center" data-tauri-drag-region>
       <span class="app-name" data-tauri-drag-region>NotesAgent</span>
diff --git a/frontend/src/components/common/TitleBarMenu.spec.ts b/frontend/src/components/common/TitleBarMenu.spec.ts
index c13c061..1a98bba 100644
--- a/frontend/src/components/common/TitleBarMenu.spec.ts
+++ b/frontend/src/components/common/TitleBarMenu.spec.ts
@@ -6,11 +6,17 @@ import { useEditorStore } from '@/stores/editor'
 import TitleBarMenu from './TitleBarMenu.vue'
 
 const execute = vi.hoisted(() => vi.fn())
-vi.mock('@/services/editorCommandService', () => ({ executeEditorCommand: execute }))
+const capabilities = vi.hoisted(() => vi.fn())
+vi.mock('@/services/editorCommandService', () => ({ executeEditorCommand: execute, getEditorCommandCapabilities: capabilities }))
 
 beforeEach(() => {
   setActivePinia(createPinia())
   execute.mockReset().mockResolvedValue({ ok: true })
+  capabilities.mockReturnValue([
+    { id: 'editor.paragraph', supported: true, enabled: true },
+    { id: 'editor.heading', supported: true, enabled: true },
+    { id: 'editor.import-note-properties', supported: true, enabled: true },
+  ])
 })
 
 describe('桌面顶部段落菜单', () => {
@@ -20,8 +26,9 @@ describe('桌面顶部段落菜单', () => {
     editor.currentFilePath = '/示例.md'
     editor.saveStatus = 'saved'
     const wrapper = mount(TitleBarMenu)
-    await wrapper.get('.menu-trigger').trigger('click')
-    const item = wrapper.get('[role="menuitem"]')
+    expect(wrapper.text()).toContain('文件编辑段落视图')
+    await wrapper.get('[data-menu="paragraph"] .menu-trigger').trigger('click')
+    const item = wrapper.get('.import-properties')
     expect((item.element as HTMLButtonElement).disabled).toBe(false)
     await item.trigger('click')
     expect(execute).toHaveBeenCalledWith('editor.import-note-properties')
@@ -34,9 +41,21 @@ describe('桌面顶部段落菜单', () => {
     editor.mode = 'wysiwyg'
     editor.currentFilePath = '/示例.md'
     const wrapper = mount(TitleBarMenu)
-    await wrapper.get('.menu-trigger').trigger('click')
-    expect((wrapper.get('[role="menuitem"]').element as HTMLButtonElement).disabled).toBe(true)
+    capabilities.mockReturnValue([])
+    await wrapper.get('[data-menu="paragraph"] .menu-trigger').trigger('click')
+    expect((wrapper.get('.import-properties').element as HTMLButtonElement).disabled).toBe(true)
     expect(wrapper.text()).toContain('请在无冲突的 Markdown 源码笔记中使用')
     wrapper.unmount()
   })
+
+  it('标题命令传入对应级别并显示快捷键', async () => {
+    const wrapper = mount(TitleBarMenu)
+    await wrapper.get('[data-menu="paragraph"] .menu-trigger').trigger('click')
+    const headings = wrapper.findAll('[data-menu="paragraph"] [role="menuitem"]').filter(item => item.text().startsWith('标题'))
+    await headings[1].trigger('click')
+    expect(execute).toHaveBeenCalledWith('editor.heading', 2)
+    await wrapper.get('[data-menu="paragraph"] .menu-trigger').trigger('click')
+    expect(wrapper.get('.import-properties').text()).toContain('Ctrl+Alt+P')
+    wrapper.unmount()
+  })
 })
diff --git a/frontend/src/components/common/TitleBarMenu.vue b/frontend/src/components/common/TitleBarMenu.vue
index 9918929..55289f5 100644
--- a/frontend/src/components/common/TitleBarMenu.vue
+++ b/frontend/src/components/common/TitleBarMenu.vue
@@ -1,67 +1,102 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useEditorStore } from '@/stores/editor'
-import { executeEditorCommand } from '@/services/editorCommandService'
+import { useThemeStore } from '@/stores/theme'
+import { executeEditorCommand, getEditorCommandCapabilities, type EditorCommandId } from '@/services/editorCommandService'
 import { t } from '@/i18n'
 
+type MenuName = 'file' | 'edit' | 'paragraph' | 'view'
 const editor = useEditorStore()
-const open = ref(false)
-const menu = ref<HTMLElement | null>(null)
-const trigger = ref<HTMLButtonElement | null>(null)
-const importItem = ref<HTMLButtonElement | null>(null)
+const theme = useThemeStore()
+const open = ref<MenuName | null>(null)
+const bar = ref<HTMLElement | null>(null)
 const error = ref('')
-const importEnabled = computed(() => editor.mode === 'source' && !!editor.currentFilePath
-  && !['conflict', 'external_changed'].includes(editor.saveStatus))
+const shortcut = computed(() => /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘⌥P' : 'Ctrl+Alt+P')
 
-function dismiss(event: PointerEvent) {
-  if (!menu.value?.contains(event.target as Node)) open.value = false
+function enabled(id: EditorCommandId) {
+  return getEditorCommandCapabilities().find(item => item.id === id)?.enabled ?? false
 }
-
-async function showAndFocus() {
-  open.value = true
+function toggle(name: MenuName) { open.value = open.value === name ? null : name; error.value = '' }
+function dismiss(event: PointerEvent) { if (!bar.value?.contains(event.target as Node)) open.value = null }
+async function focusFirst(name: MenuName) {
+  open.value = name
   await nextTick()
-  importItem.value?.focus()
+  bar.value?.querySelector<HTMLElement>(`[data-menu="${name}"] [role="menuitem"]:not(:disabled)`)?.focus()
 }
-
-function closeAndFocus() {
-  open.value = false
-  trigger.value?.focus()
-}
-
-async function importProperties() {
-  if (!importEnabled.value) return
-  const result = await executeEditorCommand('editor.import-note-properties')
-  if (!result.ok) error.value = t('当前编辑器无法执行属性导入。', 'Property import is unavailable in the current editor.')
-  else { error.value = ''; open.value = false }
+function close() { open.value = null }
+async function command(id: EditorCommandId, params?: unknown) {
+  const result = params === undefined ? await executeEditorCommand(id) : await executeEditorCommand(id, params)
+  if (result.ok) close()
+  else error.value = t('当前编辑器无法执行此命令。', 'The active editor cannot run this command.')
 }
+async function save() { await editor.save(); close() }
+function setMode(mode: 'source' | 'wysiwyg') { editor.setMode(mode); close() }
+function toggleTheme() { theme.toggleTheme(); close() }
 
 onMounted(() => window.addEventListener('pointerdown', dismiss))
 onBeforeUnmount(() => window.removeEventListener('pointerdown', dismiss))
 </script>
 
 <template>
-  <div ref="menu" class="titlebar-menu">
-    <button ref="trigger" type="button" class="menu-trigger" aria-haspopup="menu" :aria-expanded="open" @click="open ? closeAndFocus() : showAndFocus()" @keydown.down.prevent="showAndFocus">
-      {{ t('段落', 'Paragraph') }}
-    </button>
-    <div v-if="open" class="menu-popover" role="menu" @keydown.esc.stop.prevent="closeAndFocus">
-      <button ref="importItem" type="button" role="menuitem" :disabled="!importEnabled" @click="importProperties">
-        {{ t('导入为笔记属性…', 'Import as note properties…') }}
-      </button>
-      <small v-if="!importEnabled">{{ t('请在无冲突的 Markdown 源码笔记中使用', 'Available in a conflict-free Markdown source note') }}</small>
-      <small v-if="error" role="alert">{{ error }}</small>
+  <nav ref="bar" class="desktop-menu-bar" :aria-label="t('应用菜单', 'Application menu')" @keydown.esc.stop.prevent="close">
+    <div class="menu-group" data-menu="file">
+      <button class="menu-trigger" :aria-expanded="open === 'file'" aria-haspopup="menu" @click="toggle('file')" @keydown.down.prevent="focusFirst('file')">{{ t('文件', 'File') }}</button>
+      <div v-if="open === 'file'" class="menu-popover" role="menu">
+        <button role="menuitem" :disabled="!editor.currentFilePath || ['saving','conflict','external_changed'].includes(editor.saveStatus)" @click="save">
+          <span>{{ t('保存', 'Save') }}</span><kbd>Ctrl+S</kbd>
+        </button>
+      </div>
     </div>
-  </div>
+    <div class="menu-group" data-menu="edit">
+      <button class="menu-trigger" :aria-expanded="open === 'edit'" aria-haspopup="menu" @click="toggle('edit')" @keydown.down.prevent="focusFirst('edit')">{{ t('编辑', 'Edit') }}</button>
+      <div v-if="open === 'edit'" class="menu-popover" role="menu">
+        <button role="menuitem" :disabled="!enabled('editor.undo')" @click="command('editor.undo')"><span>{{ t('撤销', 'Undo') }}</span><kbd>Ctrl+Z</kbd></button>
+        <button role="menuitem" :disabled="!enabled('editor.redo')" @click="command('editor.redo')"><span>{{ t('重做', 'Redo') }}</span><kbd>Ctrl+Shift+Z</kbd></button>
+      </div>
+    </div>
+    <div class="menu-group" data-menu="paragraph">
+      <button class="menu-trigger" :aria-expanded="open === 'paragraph'" aria-haspopup="menu" @click="toggle('paragraph')" @keydown.down.prevent="focusFirst('paragraph')">{{ t('段落', 'Paragraph') }}</button>
+      <div v-if="open === 'paragraph'" class="menu-popover paragraph-menu" role="menu">
+        <button role="menuitem" :disabled="!enabled('editor.paragraph')" @click="command('editor.paragraph')"><span>{{ t('正文', 'Body text') }}</span></button>
+        <button v-for="level in 3" :key="level" role="menuitem" :disabled="!enabled('editor.heading')" @click="command('editor.heading', level)"><span>{{ t(`标题 ${level}`, `Heading ${level}`) }}</span></button>
+        <span class="menu-separator" role="separator" />
+        <button role="menuitem" :disabled="!enabled('editor.bullet-list')" @click="command('editor.bullet-list')"><span>{{ t('无序列表', 'Bullet list') }}</span></button>
+        <button role="menuitem" :disabled="!enabled('editor.ordered-list')" @click="command('editor.ordered-list')"><span>{{ t('有序列表', 'Ordered list') }}</span></button>
+        <button role="menuitem" :disabled="!enabled('editor.task-list')" @click="command('editor.task-list')"><span>{{ t('任务列表', 'Task list') }}</span></button>
+        <button role="menuitem" :disabled="!enabled('editor.blockquote')" @click="command('editor.blockquote')"><span>{{ t('引用', 'Blockquote') }}</span></button>
+        <button role="menuitem" :disabled="!enabled('editor.code-block')" @click="command('editor.code-block')"><span>{{ t('代码块', 'Code block') }}</span></button>
+        <span class="menu-separator" role="separator" />
+        <button class="import-properties" role="menuitem" :disabled="!enabled('editor.import-note-properties')" @click="command('editor.import-note-properties')">
+          <span>{{ t('导入为笔记属性…', 'Import as note properties…') }}</span><kbd>{{ shortcut }}</kbd>
+        </button>
+        <small v-if="!enabled('editor.import-note-properties')">{{ t('请在无冲突的 Markdown 源码笔记中使用', 'Available in a conflict-free Markdown source note') }}</small>
+      </div>
+    </div>
+    <div class="menu-group" data-menu="view">
+      <button class="menu-trigger" :aria-expanded="open === 'view'" aria-haspopup="menu" @click="toggle('view')" @keydown.down.prevent="focusFirst('view')">{{ t('视图', 'View') }}</button>
+      <div v-if="open === 'view'" class="menu-popover" role="menu">
+        <button role="menuitemradio" :aria-checked="editor.mode === 'wysiwyg'" @click="setMode('wysiwyg')"><span>✓ {{ t('写作模式', 'Writing mode') }}</span></button>
+        <button role="menuitemradio" :aria-checked="editor.mode === 'source'" @click="setMode('source')"><span>✓ {{ t('源码模式', 'Source mode') }}</span></button>
+        <span class="menu-separator" role="separator" />
+        <button role="menuitem" @click="toggleTheme"><span>{{ theme.isDark ? t('浅色主题', 'Light theme') : t('深色主题', 'Dark theme') }}</span></button>
+      </div>
+    </div>
+    <span v-if="error" class="menu-error" role="alert">{{ error }}</span>
+  </nav>
 </template>
 
 <style scoped>
-.titlebar-menu { position: relative; flex: 0 0 auto; -webkit-app-region: no-drag; }
-.menu-trigger { min-height: 28px; padding: 3px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
-.menu-trigger:hover, .menu-trigger[aria-expanded='true'] { border-color: var(--color-border-default); background: var(--color-background-hover); color: var(--color-text-primary); }
-.menu-popover { position: absolute; top: calc(100% + 5px); left: 0; z-index: calc(var(--z-titlebar) + 2); display: grid; min-width: 220px; padding: var(--space-xs); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-elevated); box-shadow: var(--shadow-lg); }
-.menu-popover button { width: 100%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); text-align: left; white-space: nowrap; }
+.desktop-menu-bar { position: relative; z-index: calc(var(--z-titlebar) - 1); display: flex; align-items: center; min-height: 32px; padding: 0 var(--space-md); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface-primary); flex-shrink: 0; user-select: none; -webkit-app-region: no-drag; }
+.menu-group { position: relative; height: 100%; display: flex; align-items: center; }
+.menu-trigger { min-width: 52px; height: 28px; padding: 2px 12px; border-radius: var(--radius-sm); color: var(--color-text-secondary); }
+.menu-trigger:hover, .menu-trigger[aria-expanded='true'] { background: var(--color-background-hover); color: var(--color-text-primary); }
+.menu-popover { position: absolute; top: calc(100% + 2px); left: 0; z-index: calc(var(--z-titlebar) + 2); display: grid; min-width: 230px; padding: var(--space-xs); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-elevated); box-shadow: var(--shadow-lg); }
+.paragraph-menu { min-width: 270px; }
+.menu-popover button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); width: 100%; padding: 7px var(--space-md); border-radius: var(--radius-sm); text-align: left; white-space: nowrap; }
 .menu-popover button:hover:not(:disabled), .menu-popover button:focus-visible { background: var(--color-accent-soft); color: var(--color-accent-primary); }
-.menu-popover button:disabled { opacity: .5; cursor: not-allowed; }
+.menu-popover button:disabled { opacity: .45; cursor: not-allowed; }
+.menu-popover kbd { color: var(--color-text-tertiary); font: inherit; font-size: var(--font-size-xs); }
+.menu-separator { height: 1px; margin: var(--space-xs); background: var(--color-border-subtle); }
 .menu-popover small { padding: var(--space-xs) var(--space-md); color: var(--color-text-tertiary); white-space: normal; }
-.menu-popover small[role='alert'] { color: var(--color-error); }
+.menu-error { margin-left: var(--space-md); color: var(--color-error); font-size: var(--font-size-xs); }
 </style>
diff --git a/frontend/src/services/platform/lifecycle.ts b/frontend/src/services/platform/lifecycle.ts
index 98c096e..64b151d 100644
--- a/frontend/src/services/platform/lifecycle.ts
+++ b/frontend/src/services/platform/lifecycle.ts
@@ -9,8 +9,22 @@ import { isDesktop } from './desktop'
 export async function installDesktopLifecycle() {
   if (!isDesktop()) return
   const activeEditor = useEditorStore()
+  // 保存属于窗口级命令；编辑区原生处理撤销/重做，避免重复派发。
+  window.addEventListener('keydown', event => {
+    if (event.defaultPrevented || event.isComposing || event.repeat || event.altKey || event.shiftKey) return
+    if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 's') return
+    const target = event.target as HTMLElement | null
+    if (target?.closest('input, textarea, select, dialog[open], [role="dialog"]')) return
+    if (!activeEditor.currentFilePath || ['saving', 'conflict', 'external_changed'].includes(activeEditor.saveStatus)) return
+    event.preventDefault()
+    void activeEditor.save()
+  })
   watch(() => [activeEditor.currentFilePath, activeEditor.saveStatus, activeEditor.mode], updateNativeEditorMenu, { flush: 'post' })
-  await listen<string>('editor-command', event => { void executeEditorCommand(event.payload) })
+  await listen<string>('editor-command', event => {
+    const focused = document.activeElement as HTMLElement | null
+    if (focused?.closest('input, textarea, select, dialog[open], [role="dialog"]')) return
+    void executeEditorCommand(event.payload)
+  })
   let closing = false
   await listen('host-close-requested', async () => {
     if (closing) return