优化桌面端标签导航与后台交互

frontend/src/views/DesktopPreferences.vue

@@ -122,6 +122,36 @@
           </div>
         </section>
 
+        <section v-else-if="activeSectionId === 'shortcuts'" key="shortcuts" class="preference-panel">
+          <div class="shortcut-settings">
+            <div class="shortcut-settings-head">
+              <div>
+                <div class="row-title">标签页导航</div>
+                <div class="row-desc">快捷键仅作用于当前激活标签，点击快捷键后按下新的组合键</div>
+              </div>
+              <el-button size="small" @click="resetDesktopShortcuts">恢复默认</el-button>
+            </div>
+
+            <div class="shortcut-list">
+              <div v-for="item in shortcutDefinitions" :key="item.action" class="shortcut-row">
+                <div>
+                  <div class="row-title">{{ item.label }}</div>
+                  <div class="row-desc">{{ item.description }}</div>
+                </div>
+                <button
+                  class="shortcut-recorder"
+                  :class="{ capturing: capturingShortcutAction === item.action }"
+                  type="button"
+                  @click="startDesktopShortcutCapture($event, item.action)"
+                >
+                  <kbd>{{ formatDesktopShortcut(desktopShortcuts[item.action]) }}</kbd>
+                  <span>{{ capturingShortcutAction === item.action ? "请按组合键" : "点击修改" }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section v-else-if="activeSectionId === 'notifications'" key="notifications" class="preference-panel">
           <div class="preference-row">
             <div>
@@ -189,24 +219,31 @@
 import { computed, onBeforeUnmount, onMounted, ref, type Component } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Bell, Close, Download, InfoFilled, Link, Monitor, Moon, Sunny } from "@element-plus/icons-vue";
+import { Bell, Close, Download, InfoFilled, Key, Link, Monitor, Moon, Sunny } from "@element-plus/icons-vue";
 import {
   getDesktopNotificationSubscription,
   setDesktopNotificationSubscription,
 } from "../api/desktopNotifications";
 import {
   clientRuntime,
+  desktopShortcutFromKeyboardEvent,
+  formatDesktopShortcut,
   getAppMetadata,
   getDesktopServerUrl,
   getNotificationPermission,
   isDesktopUpdaterAvailable,
   normalizeDesktopServerUrl,
+  readDesktopShortcutPreferences,
   readDesktopThemePreference,
   requestNotificationPermission,
+  resetDesktopShortcutPreferences,
+  setDesktopShortcutPreference,
   setDesktopServerUrl,
   setDesktopThemePreference,
   showSystemNotificationProbe,
   type DesktopThemePreference,
+  type DesktopShortcutAction,
+  type DesktopShortcutPreferences,
   type NotificationPermissionState,
 } from "../runtime";
 import {
@@ -227,7 +264,7 @@ const emit = defineEmits<{
 const router = useRouter();
 const auth = useAuthStore();
 const studyStore = useStudyStore();
-type PreferenceSectionId = "connection" | "appearance" | "notifications" | "updates" | "diagnostics";
+type PreferenceSectionId = "connection" | "appearance" | "shortcuts" | "notifications" | "updates" | "diagnostics";
 
 const preferenceSections: Array<{
   id: PreferenceSectionId;
@@ -237,6 +274,7 @@ const preferenceSections: Array<{
 }> = [
   { id: "connection", label: "连接", description: "服务器入口与在线状态", icon: Link },
   { id: "appearance", label: "外观", description: "主题与界面偏好", icon: Monitor },
+  { id: "shortcuts", label: "快捷键", description: "当前标签的导航与刷新操作", icon: Key },
   { id: "notifications", label: "通知", description: "系统通知权限与投递状态", icon: Bell },
   { id: "updates", label: "更新", description: "桌面端签名更新与安装状态", icon: Download },
   { id: "diagnostics", label: "诊断信息", description: "客户端版本、平台与能力", icon: InfoFilled },
@@ -267,6 +305,9 @@ const desktopNotificationLoading = ref(false);
 const desktopNotificationTestLoading = ref(false);
 const desktopUpdateChecking = ref(false);
 const desktopTheme = ref<DesktopThemePreference>(readDesktopThemePreference());
+const desktopShortcuts = ref<DesktopShortcutPreferences>(readDesktopShortcutPreferences());
+const capturingShortcutAction = ref<DesktopShortcutAction | null>(null);
+const shortcutCaptureElement = ref<HTMLElement | null>(null);
 const notificationPermission = ref<NotificationPermissionState>("unsupported");
 const desktopUpdateStatus = ref<DesktopUpdateStatusSnapshot>(getDesktopUpdateStatus());
 let updateStatusUnlisten: (() => void) | undefined;
@@ -275,6 +316,15 @@ const themeOptions = [
   { value: "light" as const, label: "明亮", icon: Sunny },
   { value: "dark" as const, label: "暗黑", icon: Moon },
 ];
+const shortcutDefinitions: Array<{
+  action: DesktopShortcutAction;
+  label: string;
+  description: string;
+}> = [
+  { action: "back", label: "后退", description: "返回当前标签的上一页面" },
+  { action: "forward", label: "前进", description: "前往当前标签的下一页面" },
+  { action: "refresh", label: "刷新", description: "重新加载当前标签的数据" },
+];
 const HEALTH_TIMEOUT_MS = 10_000;
 
 const clientMetadataRows = computed(() => [
@@ -645,6 +695,59 @@ const setTheme = (theme: DesktopThemePreference) => {
   desktopTheme.value = setDesktopThemePreference(theme);
 };
 
+const clearDesktopShortcutCapture = () => {
+  capturingShortcutAction.value = null;
+  shortcutCaptureElement.value = null;
+};
+
+const startDesktopShortcutCapture = (event: MouseEvent, action: DesktopShortcutAction) => {
+  event.preventDefault();
+  event.stopPropagation();
+  capturingShortcutAction.value = action;
+  shortcutCaptureElement.value = event.currentTarget as HTMLElement | null;
+  shortcutCaptureElement.value?.focus();
+};
+
+const captureDesktopShortcut = (event: KeyboardEvent) => {
+  const action = capturingShortcutAction.value;
+  if (!action) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.stopImmediatePropagation();
+  if (event.key === "Escape") {
+    clearDesktopShortcutCapture();
+    return;
+  }
+  const shortcut = desktopShortcutFromKeyboardEvent(event);
+  if (!shortcut) {
+    if (!["Meta", "Control", "Shift", "Alt"].includes(event.key)) {
+      ElMessage.warning("请按下包含 Command（或 Ctrl）的组合键");
+    }
+    return;
+  }
+  const result = setDesktopShortcutPreference(action, shortcut);
+  if (!result.ok) {
+    ElMessage.warning(result.reason);
+    return;
+  }
+  desktopShortcuts.value = result.shortcuts;
+  ElMessage.success("快捷键已更新");
+  clearDesktopShortcutCapture();
+};
+
+const cancelDesktopShortcutCaptureOnPointerDown = (event: PointerEvent) => {
+  if (!capturingShortcutAction.value) return;
+  const target = event.target;
+  if (target instanceof Node && shortcutCaptureElement.value?.contains(target)) return;
+  clearDesktopShortcutCapture();
+};
+
+const resetDesktopShortcuts = () => {
+  desktopShortcuts.value = resetDesktopShortcutPreferences();
+  clearDesktopShortcutCapture();
+  ElMessage.success("快捷键已恢复默认");
+};
+
 const copyClientMetadata = async () => {
   const text = clientMetadataRows.value.map((row) => `${row.label}: ${row.value}`).join("\n");
   if (!navigator.clipboard?.writeText) {
@@ -656,6 +759,8 @@ const copyClientMetadata = async () => {
 };
 
 onMounted(() => {
+  window.addEventListener("keydown", captureDesktopShortcut, { capture: true });
+  window.addEventListener("pointerdown", cancelDesktopShortcutCaptureOnPointerDown, { capture: true });
   updateStatusUnlisten = listenDesktopUpdateStatus((status) => {
     desktopUpdateStatus.value = status;
   });
@@ -663,6 +768,8 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
+  window.removeEventListener("keydown", captureDesktopShortcut, { capture: true });
+  window.removeEventListener("pointerdown", cancelDesktopShortcutCaptureOnPointerDown, { capture: true });
   clearConnectionPendingTimer();
   updateStatusUnlisten?.();
 });
@@ -983,6 +1090,7 @@ h3 {
 .preferences-panel-enter-active .connection-alert,
 .preferences-panel-enter-active .connection-diagnostic,
 .preferences-panel-enter-active .preference-row,
+.preferences-panel-enter-active .shortcut-settings,
 .preferences-panel-enter-active .metadata-panel {
   animation: preference-card-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
 }
@@ -1004,6 +1112,7 @@ h3 {
  * ===================================================== */
 .server-overview,
 .preference-row,
+.shortcut-settings,
 .metadata-panel {
   border: 1px solid var(--pref-border-card);
   border-radius: 10px;
@@ -1178,6 +1287,73 @@ h3 {
   flex-shrink: 0;
 }
 
+/* =====================================================
+ * 快捷键
+ * ===================================================== */
+.shortcut-settings {
+  overflow: hidden;
+}
+
+.shortcut-settings-head,
+.shortcut-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 18px;
+  padding: 14px 16px;
+}
+
+.shortcut-settings-head {
+  border-bottom: 1px solid var(--pref-border);
+  background: #f8fafc;
+}
+
+.shortcut-list {
+  display: grid;
+}
+
+.shortcut-row + .shortcut-row {
+  border-top: 1px solid var(--pref-border);
+}
+
+.shortcut-recorder {
+  appearance: none;
+  display: grid;
+  justify-items: end;
+  min-width: 126px;
+  gap: 3px;
+  padding: 7px 9px;
+  border: 1px solid var(--pref-border-card);
+  border-radius: 8px;
+  background: #f8fafc;
+  color: var(--pref-text-secondary);
+  cursor: pointer;
+  font: inherit;
+  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
+}
+
+.shortcut-recorder:hover,
+.shortcut-recorder:focus-visible,
+.shortcut-recorder.capturing {
+  border-color: var(--pref-accent);
+  background: var(--pref-accent-light);
+  box-shadow: 0 0 0 3px rgba(30, 77, 130, 0.1);
+  outline: none;
+}
+
+.shortcut-recorder kbd {
+  color: var(--pref-text-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.shortcut-recorder span {
+  color: var(--pref-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+}
+
 /* =====================================================
  * 主题切换器
  * ===================================================== */
@@ -1349,6 +1525,7 @@ code {
 :global([data-ctms-theme="dark"] .desktop-preferences .server-config-form),
 :global([data-ctms-theme="dark"] .desktop-preferences .connection-diagnostic),
 :global([data-ctms-theme="dark"] .desktop-preferences .preference-row),
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-settings),
 :global([data-ctms-theme="dark"] .desktop-preferences .metadata-panel) {
   border-color: var(--pref-border-card);
   background: var(--pref-bg-card);
@@ -1388,6 +1565,17 @@ code {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-settings-head),
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder) {
+  background: #101827;
+}
+
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder:hover),
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder:focus-visible),
+:global([data-ctms-theme="dark"] .desktop-preferences .shortcut-recorder.capturing) {
+  background: var(--pref-accent-light);
+}
+
 :global([data-ctms-theme="dark"] .desktop-preferences .server-status-dot.connected) {
   box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
 }