Merge feat/redesign-three-pages into main

Author: yexia553

.gitignore

@@ -32,3 +32,10 @@ temp-docs/
 # Website (官网子项目)
 website/node_modules/
 website/dist/
+
+# Agent / 设计工具产物（本地工具，不入产品仓库）
+.agents/
+.claude/
+designs/
+skills-lock.json
+systemprompt.txt

electron/shared/locales/en.json

@@ -1,8 +1,13 @@
 {
   "app": {
     "name": "Voice Key",
+    "tagline": "Speak to type",
     "version": "Version {{version}}"
   },
+  "theme": {
+    "light": "Light",
+    "dark": "Dark"
+  },
   "nav": {
     "home": "Home",
     "settings": "Settings",
@@ -18,15 +23,30 @@
   },
   "home": {
     "title": "Speak naturally, write perfectly",
-    "subtitle": "Hold down <kbd>{{hotkey}}</kbd>, speak, and let go to insert spoken text.",
+    "eyebrow": "Overview",
+    "subtitle": "Hold the hotkey and speak — let go to inject the text at your cursor.",
+    "charUnit": "chars",
+    "recent7": "Last 7 days",
+    "greeting": {
+      "morning": "Good morning",
+      "afternoon": "Good afternoon",
+      "evening": "Good evening",
+      "night": "Working late"
+    },
+    "hero": {
+      "standby": "Ready to listen",
+      "holdToTalk": "Hold to talk",
+      "holdHint": "Hold the key in any app — speak, and get text"
+    },
     "stats": {
       "totalCharacters": "Total characters recognized",
       "totalAudio": "Total audio duration",
       "recentChange": "+{{value}} in {{range}}",
       "todaySessions": "Today's sessions",
       "todayDuration": "Today's duration",
-      "todayCharacters": "Today's input",
+      "todayCharacters": "Today's characters",
       "activeDays": "Active days",
+      "activeDaysHint": "Days you dictated",
       "peakDay": "Peak day",
       "peakDayValue": "{{date}} · {{value}} chars"
     },
@@ -43,6 +63,7 @@
       "description": "Characters recognized in the selected range",
       "ariaLabel": "Recognition volume trend",
       "seriesLabel": "Characters",
+      "days": "{{count}}d",
       "rangeSelectAriaLabel": "Select time range",
       "rangePlaceholder": "Last 3 months"
     },
@@ -61,6 +82,24 @@
   },
   "settings": {
     "title": "Settings",
+    "eyebrow": "Preferences",
+    "subtitle": "Configure speech recognition, refine & translation, and hotkeys — changes save automatically.",
+    "descGeneral": "Language and startup",
+    "descAsr": "GLM ASR · turn speech into text",
+    "descRefine": "Shares one LLM connection",
+    "descLogs": "For troubleshooting",
+    "connectionTitle": "Connection",
+    "aboutHint": "Stay up to date for the best experience",
+    "health": {
+      "asr": "Speech recognition",
+      "asrOn": "Key configured",
+      "asrOff": "Not configured",
+      "refine": "Refinement",
+      "refineOn": "Ready",
+      "refineOff": "Incomplete",
+      "translation": "Translation",
+      "translationOff": "Off"
+    },
     "about": "About Voice Key",
     "version": "Current Version: v{{version}}",
     "checkUpdate": "Check for Updates",
@@ -223,6 +262,16 @@
   },
   "history": {
     "title": "History",
+    "eyebrow": "Dictation history",
+    "clearTitle": "Clear all",
+    "groupCount_one": "{{formattedCount}} item",
+    "groupCount_other": "{{formattedCount}} items",
+    "detailPlaceholder": "Select a record on the left to read it in full",
+    "detail": {
+      "chars": "Characters",
+      "duration": "Duration",
+      "speed": "CPM"
+    },
     "loading": "Loading...",
     "loadFailed": "Failed to load history",
     "searchPlaceholder": "Search history...",

electron/shared/locales/zh.json

@@ -1,8 +1,13 @@
 {
   "app": {
     "name": "Voice Key",
+    "tagline": "说出文字",
     "version": "版本 {{version}}"
   },
+  "theme": {
+    "light": "浅色",
+    "dark": "深色"
+  },
   "nav": {
     "home": "首页",
     "settings": "设置",
@@ -18,15 +23,30 @@
   },
   "home": {
     "title": "自然说话，完美成文",
-    "subtitle": "按住 <kbd>{{hotkey}}</kbd> 说话，松开即可插入文本。",
+    "eyebrow": "概览",
+    "subtitle": "按住快捷键说出文字，松开即把内容注入到光标处。",
+    "charUnit": "字",
+    "recent7": "近 7 天",
+    "greeting": {
+      "morning": "早上好",
+      "afternoon": "下午好",
+      "evening": "晚上好",
+      "night": "夜深了"
+    },
+    "hero": {
+      "standby": "随时待命",
+      "holdToTalk": "按住说话",
+      "holdHint": "在任何应用里按住快捷键，说完即得文字"
+    },
     "stats": {
       "totalCharacters": "识别字符总数",
       "totalAudio": "录音总时长",
       "recentChange": "{{range}} +{{value}}",
       "todaySessions": "今日录音",
       "todayDuration": "今日时长",
-      "todayCharacters": "今日输入",
+      "todayCharacters": "今日字数",
       "activeDays": "活跃天数",
+      "activeDaysHint": "坚持用语音记录",
       "peakDay": "峰值日",
       "peakDayValue": "{{date}} · {{value}} 字"
     },
@@ -43,6 +63,7 @@
       "description": "所选时间范围内的识别字符数",
       "ariaLabel": "识别量趋势",
       "seriesLabel": "字符数",
+      "days": "{{count}} 天",
       "rangeSelectAriaLabel": "选择时间范围",
       "rangePlaceholder": "最近 3 个月"
     },
@@ -61,6 +82,24 @@
   },
   "settings": {
     "title": "设置",
+    "eyebrow": "偏好设置",
+    "subtitle": "配置语音识别、润色翻译与快捷键，所有修改都会自动保存。",
+    "descGeneral": "界面语言与启动方式",
+    "descAsr": "GLM ASR · 把语音转成文字",
+    "descRefine": "共用一套大模型连接",
+    "descLogs": "排查问题时使用",
+    "connectionTitle": "连接状态",
+    "aboutHint": "保持更新以获得最佳体验",
+    "health": {
+      "asr": "语音识别",
+      "asrOn": "已配置密钥",
+      "asrOff": "未配置",
+      "refine": "润色服务",
+      "refineOn": "连接就绪",
+      "refineOff": "未完成配置",
+      "translation": "翻译",
+      "translationOff": "未启用"
+    },
     "about": "关于 Voice Key",
     "version": "当前版本：v{{version}}",
     "checkUpdate": "检查更新",
@@ -223,6 +262,16 @@
   },
   "history": {
     "title": "历史记录",
+    "eyebrow": "听写历史",
+    "clearTitle": "清空全部",
+    "groupCount_one": "{{formattedCount}} 条",
+    "groupCount_other": "{{formattedCount}} 条",
+    "detailPlaceholder": "选择左侧的一条记录，在这里查看完整文字",
+    "detail": {
+      "chars": "字数",
+      "duration": "时长",
+      "speed": "字/分"
+    },
     "loading": "加载中...",
     "loadFailed": "加载历史记录失败",
     "searchPlaceholder": "搜索历史记录...",

index.html

@@ -5,6 +5,24 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Voice Key</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <script>
+      // 在首帧前应用主题，避免闪烁
+      try {
+        var t = localStorage.getItem('vk-theme')
+        if (
+          t === 'dark' ||
+          (t === null && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        ) {
+          document.documentElement.classList.add('dark')
+        }
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>

src/components/HotkeyKeys.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+
+const MAC_SYMBOLS: Record<string, string> = {
+  Command: '⌘',
+  Control: '⌃',
+  Alt: '⌥',
+  Shift: '⇧',
+  Space: '空格',
+  Enter: '↵',
+  Escape: 'Esc',
+}
+
+const WIN_SYMBOLS: Record<string, string> = {
+  Command: 'Win',
+  Control: 'Ctrl',
+  Alt: 'Alt',
+  Shift: 'Shift',
+  Space: 'Space',
+  Enter: 'Enter',
+  Escape: 'Esc',
+}
+
+interface HotkeyKeysProps {
+  value: string
+  className?: string
+}
+
+/** 把 Electron Accelerator 字符串渲染成一组实体键帽。 */
+export function HotkeyKeys({ value, className }: HotkeyKeysProps) {
+  const isMac = window.electronAPI?.platform === 'darwin'
+  const symbols = isMac ? MAC_SYMBOLS : WIN_SYMBOLS
+  const parts = (value || '').split('+').filter(Boolean)
+
+  if (parts.length === 0) {
+    return <span className="text-muted-foreground text-xs">未设置</span>
+  }
+
+  return (
+    <span className={cn('inline-flex items-center gap-1', className)}>
+      {parts.map((p, i) => (
+        <kbd key={i} className={cn('vk-keycap', p === 'Space' && 'is-wide')}>
+          {symbols[p] || p}
+        </kbd>
+      ))}
+    </span>
+  )
+}

src/components/HotkeyRecorder.tsx

@@ -156,7 +156,7 @@ export function HotkeyRecorder({
         <div
           onClick={startRecording}
           className={cn(
-            'flex-1 px-4 py-2.5 rounded-lg border cursor-pointer transition-all',
+            'flex-1 px-4 py-2.5 rounded-lg border cursor-pointer transition-[background-color,border-color,box-shadow,color]',
             'bg-background text-foreground font-mono text-sm',
             'select-none',
             isRecording

src/components/HotkeySettings.tsx

@@ -126,13 +126,17 @@ export function HotkeySettings({
   const filteredPresets = PTT_PRESETS.filter((p) => p.platform === 'all' || p.platform === platform)
 
   return (
-    <Card>
+    <Card className="rounded-2xl">
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Keyboard className="w-5 h-5" />
-          {t('hotkey.title')}
-        </CardTitle>
-        <CardDescription>{t('hotkey.description')}</CardDescription>
+        <div className="flex items-center gap-3">
+          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-[10px] bg-accent text-accent-foreground">
+            <Keyboard className="h-[18px] w-[18px]" />
+          </span>
+          <div>
+            <CardTitle className="text-[15px]">{t('hotkey.title')}</CardTitle>
+            <CardDescription className="mt-0.5 text-xs">{t('hotkey.description')}</CardDescription>
+          </div>
+        </div>
       </CardHeader>
 
       <CardContent className="space-y-6">