截图模块优化调整

src/modules/clipboard/ClipboardModule.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import {
   ClipboardList, Copy, Pin, PinOff, Trash2, Search, Image as ImageIcon,
-  FileText, Files, Settings as SettingsIcon, Loader2, Eraser, Check, Keyboard,
+  FileText, Files, Settings as SettingsIcon, Loader2, Eraser, Keyboard,
 } from '@lucide/vue'
 import { toast } from 'vue-sonner'
 import { useClipboardStore, type ClipboardItem, type ClipboardKind, type ClipboardItemDetail } from '@/stores/clipboardStore'
 import { useModuleTabs } from '@/lib/useModuleTabs'
+import { useModuleTabsStore } from '@/stores/moduleTabsStore'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Card, CardContent } from '@/components/ui/card'
@@ -29,6 +30,7 @@ import {
 const store = useClipboardStore()
 
 const activeTab = ref('history')
+const tabsStore = useModuleTabsStore()
 const tabsListRef = useModuleTabs(activeTab, [
   { value: 'history', label: '历史' },
   { value: 'pinned', label: '固定' },
@@ -114,6 +116,9 @@ const handleSaveSettings = async () => {
   }
 }
 
+// 注册保存处理函数到标签栏 store（TitleBar 保存按钮调用）
+tabsStore.registerSave(handleSaveSettings)
+
 const handleShortcutChange = async () => {
   // 快捷键变化立即保存并注册（不等点击"保存设置"）
   try {
@@ -124,6 +129,86 @@ const handleShortcutChange = async () => {
   }
 }
 
+// ===== 快捷键录入器 =====
+const recording = ref(false)
+const recorderRef = ref<HTMLDivElement | null>(null)
+
+/** 把存储的快捷键字符串格式化为展示形式：alt+v → Alt + V */
+function displayShortcut(s: string): string {
+  if (!s) return ''
+  return s
+    .split('+')
+    .map(p => {
+      const t = p.trim()
+      if (!t) return ''
+      if (t.length === 1) return t.toUpperCase()
+      return t.charAt(0).toUpperCase() + t.slice(1)
+    })
+    .join(' + ')
+}
+
+/** 把键盘事件转为 Tauri 快捷键字符串（小写，+ 分隔） */
+function eventToShortcut(e: KeyboardEvent): string | null {
+  const mods: string[] = []
+  if (e.ctrlKey) mods.push('ctrl')
+  if (e.altKey) mods.push('alt')
+  if (e.shiftKey) mods.push('shift')
+  if (e.metaKey) mods.push('super')
+  let main = ''
+  const code = e.code || ''
+  if (/^Key[A-Z]$/.test(code)) main = code.slice(3).toLowerCase()
+  else if (/^Digit[0-9]$/.test(code)) main = code.slice(5)
+  else if (/^F([1-9]|1[0-2])$/.test(code)) main = code.toLowerCase()
+  else if (code === 'Space') main = 'space'
+  else if (code === 'PrintScreen') main = 'printscreen'
+  else if (code.startsWith('Numpad')) main = code.slice(6).toLowerCase()
+  else return null
+  // 必须至少一个修饰键（功能键 F1-F12 / PrintScreen 例外）
+  const isFunctionKey = /^f([1-9]|1[0-2])$/.test(main) || main === 'printscreen'
+  if (mods.length === 0 && !isFunctionKey) return null
+  return [...mods, main].join('+')
+}
+
+function onRecordKey(e: KeyboardEvent) {
+  if (!recording.value) return
+  e.preventDefault()
+  e.stopPropagation()
+  if (e.key === 'Escape') {
+    recording.value = false
+    return
+  }
+  // 仅修饰键按下时不结束（等待主键）
+  if (['Control', 'Alt', 'Shift', 'Meta'].includes(e.key)) return
+  const combo = eventToShortcut(e)
+  if (!combo) {
+    toast.warning('不支持的按键组合，请使用字母/数字/功能键 + 修饰键')
+    return
+  }
+  recording.value = false
+  void commitShortcut(combo)
+}
+
+async function commitShortcut(combo: string) {
+  form.value.shortcut = combo
+  await handleShortcutChange()
+}
+
+async function startRecord() {
+  recording.value = true
+  await nextTick()
+  recorderRef.value?.focus()
+}
+
+watch(recording, (on) => {
+  if (on) window.addEventListener('keydown', onRecordKey, true)
+  else window.removeEventListener('keydown', onRecordKey, true)
+})
+
+async function clearShortcut() {
+  form.value.shortcut = ''
+  await handleShortcutChange()
+}
+
 const handleTestPopup = async () => {
   try {
     await store.showPopup()
@@ -204,6 +289,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   store.dispose()
+  window.removeEventListener('keydown', onRecordKey, true)
 })
 </script>
 
@@ -245,33 +331,39 @@ onUnmounted(() => {
           </Button>
         </div>
 
-        <!-- 分页（置于列表上方，靠左显示） -->
-        <div v-if="totalPages > 1" class="flex items-center justify-start pb-2 shrink-0">
-          <Pagination
-            v-slot="{ page }"
-            :page="currentPage"
-            :total="store.historyTotal"
-            :items-per-page="PAGE_SIZE"
-            :sibling-count="1"
-            show-edges
-            @update:page="gotoPage"
-            class="justify-start"
-          >
-            <PaginationContent v-slot="{ items }" class="gap-1">
-              <template v-for="(item, index) in items" :key="index">
-                <PaginationItem
-                  v-if="item.type === 'page'"
-                  :value="item.value"
-                  :is-active="item.value === page"
-                  size="icon"
-                  class="size-7 text-xs"
-                >
-                  {{ item.value }}
-                </PaginationItem>
-                <PaginationEllipsis v-else class="size-7" />
-              </template>
-            </PaginationContent>
-          </Pagination>
+        <!-- 分页 + 快捷键提示（置于列表上方，分页靠左，快捷弹窗提示靠右） -->
+        <div class="flex items-center justify-between pb-2 shrink-0">
+          <template v-if="totalPages > 1">
+            <Pagination
+              v-slot="{ page }"
+              :page="currentPage"
+              :total="store.historyTotal"
+              :items-per-page="PAGE_SIZE"
+              :sibling-count="1"
+              show-edges
+              @update:page="gotoPage"
+              class="justify-start"
+            >
+              <PaginationContent v-slot="{ items }" class="gap-1">
+                <template v-for="(item, index) in items" :key="index">
+                  <PaginationItem
+                    v-if="item.type === 'page'"
+                    :value="item.value"
+                    :is-active="item.value === page"
+                    size="icon"
+                    class="size-7 text-xs"
+                  >
+                    {{ item.value }}
+                  </PaginationItem>
+                  <PaginationEllipsis v-else class="size-7" />
+                </template>
+              </PaginationContent>
+            </Pagination>
+          </template>
+          <div v-else />
+          <span class="text-xs text-muted-foreground shrink-0">
+            快捷弹窗：<span v-if="form.shortcut" class="font-medium text-foreground">{{ displayShortcut(form.shortcut) }}</span><span v-else>未设置</span>
+          </span>
         </div>
         
         <ScrollArea class="flex-1 min-h-0">
@@ -356,11 +448,10 @@ onUnmounted(() => {
       <!-- 设置 -->
       <TabsContent value="settings" class="flex-1 min-h-0 overflow-y-auto mt-4 tab-animate">
         <div class="max-w-xl space-y-4">
-          <div class="flex items-center justify-between">
+          <div class="flex items-center">
             <h3 class="text-base font-medium flex items-center gap-2">
               <SettingsIcon class="h-4 w-4" />基本设置
             </h3>
-            <Button @click="handleSaveSettings"><Check class="h-4 w-4 mr-1" />保存设置</Button>
           </div>
 
           <Card>
@@ -434,12 +525,29 @@ onUnmounted(() => {
                 </div>
                 <Button variant="outline" size="sm" @click="handleTestPopup">测试弹窗</Button>
               </div>
-              <Input
-                v-model="form.shortcut"
-                placeholder="如 Alt+V / Ctrl+Shift+V"
-                @change="handleShortcutChange"
-              />
-              <p class="text-xs text-muted-foreground">格式：修饰键+主键，如 Ctrl+C、Alt+V、Shift+F1。修改后自动生效。</p>
+              <div class="flex items-center gap-2 flex-wrap">
+                <div
+                  ref="recorderRef"
+                  class="hotkey-recorder"
+                  :class="{ recording }"
+                  tabindex="0"
+                  @click="startRecord"
+                >
+                  <template v-if="recording">按下快捷键…（Esc 取消）</template>
+                  <template v-else-if="form.shortcut">
+                    {{ displayShortcut(form.shortcut) }}
+                  </template>
+                  <template v-else>未设置（点击录入）</template>
+                </div>
+                <Button
+                  v-if="form.shortcut"
+                  variant="ghost"
+                  size="sm"
+                  class="h-8 text-muted-foreground"
+                  @click="clearShortcut"
+                >清除</Button>
+              </div>
+              <p class="text-xs text-muted-foreground">点击方框录入快捷键，需至少一个修饰键 + 字母/数字/功能键。默认 Alt+V</p>
             </CardContent>
           </Card>
         </div>