From 7c1f8f87263c760894c1655808e7f7b8bec62550 Mon Sep 17 00:00:00 2001
From: MikiVL <mikivl@MikiVLdeMacBook-Air.local>
Date: Sat, 2 May 2026 19:35:24 +0800
Subject: [PATCH] feat: add Windows shortcuts and OS toggle to WelcomeView
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Define mac/win key variants for all 8 shortcuts (⌘→Ctrl, ⌘⇧Z→Ctrl+Y)
- Auto-detect OS on mount via navigator.platform
- Add macOS/Windows pill toggle above shortcuts table

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/editor/WelcomeView.tsx | 98 +++++++++++++--------------
 1 file changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/components/editor/WelcomeView.tsx b/src/components/editor/WelcomeView.tsx
index 4a1b34f..667ea58 100644
--- a/src/components/editor/WelcomeView.tsx
+++ b/src/components/editor/WelcomeView.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import {
   FileText, Folder, Slash, MousePointer, Save,
   Search, Moon, Plus, Hash, Star, Image, Code2,
@@ -73,19 +74,24 @@ const FEATURES = [
   },
 ]
 
-const SHORTCUTS = [
-  { desc: '粗体',         mac: ['⌘', 'B'],       win: ['Ctrl', 'B'] },
-  { desc: '斜体',         mac: ['⌘', 'I'],       win: ['Ctrl', 'I'] },
-  { desc: '下划线',       mac: ['⌘', 'U'],       win: ['Ctrl', 'U'] },
-  { desc: '行内代码',     mac: ['⌘', 'E'],       win: ['Ctrl', 'E'] },
-  { desc: '撤销',         mac: ['⌘', 'Z'],       win: ['Ctrl', 'Z'] },
-  { desc: '重做',         mac: ['⌘', '⇧', 'Z'],  win: ['Ctrl', 'Y'] },
-  { desc: '命令菜单',     mac: ['/'],             win: ['/'] },
-  { desc: '退出专注模式', mac: ['Esc'],           win: ['Esc'] },
+const SHORTCUTS: { mac: string[]; win: string[]; desc: string }[] = [
+  { mac: ['⌘', 'B'],       win: ['Ctrl', 'B'],       desc: '粗体' },
+  { mac: ['⌘', 'I'],       win: ['Ctrl', 'I'],       desc: '斜体' },
+  { mac: ['⌘', 'U'],       win: ['Ctrl', 'U'],       desc: '下划线' },
+  { mac: ['⌘', 'E'],       win: ['Ctrl', 'E'],       desc: '行内代码' },
+  { mac: ['⌘', 'Z'],       win: ['Ctrl', 'Z'],       desc: '撤销' },
+  { mac: ['⌘', '⇧', 'Z'], win: ['Ctrl', 'Y'],       desc: '重做' },
+  { mac: ['/'],             win: ['/'],               desc: '命令菜单' },
+  { mac: ['Esc'],           win: ['Esc'],             desc: '退出专注模式' },
 ]
 
+function detectOS(): 'mac' | 'win' {
+  return /mac/i.test(navigator.platform) ? 'mac' : 'win'
+}
+
 export function WelcomeView() {
   const { createNote } = useAppStore()
+  const [os, setOs] = useState<'mac' | 'win'>(detectOS)
 
   return (
     <div
@@ -158,59 +164,49 @@ export function WelcomeView() {
         </div>
 
         {/* Shortcuts */}
-        <h2
-          className="text-xs font-semibold uppercase tracking-widest mb-4"
-          style={{ color: 'var(--text-faint)' }}
-        >
-          常用快捷键
-        </h2>
-        <div className="rounded-xl overflow-hidden" style={{ border: '1px solid var(--border)' }}>
-          {/* Header */}
-          <div
-            className="grid px-5 py-2 text-xs font-semibold uppercase tracking-wider"
-            style={{
-              gridTemplateColumns: '1fr auto auto',
-              gap: '2rem',
-              background: 'var(--bg-muted)',
-              color: 'var(--text-faint)',
-              borderBottom: '1px solid var(--border)',
-            }}
+        <div className="flex items-center justify-between mb-4">
+          <h2
+            className="text-xs font-semibold uppercase tracking-widest"
+            style={{ color: 'var(--text-faint)' }}
           >
-            <span>操作</span>
-            <span>macOS</span>
-            <span>Windows</span>
+            常用快捷键
+          </h2>
+          <div
+            className="flex items-center rounded-lg p-0.5 text-xs"
+            style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)' }}
+          >
+            {(['mac', 'win'] as const).map(opt => (
+              <button
+                key={opt}
+                onClick={() => setOs(opt)}
+                className="px-2.5 py-1 rounded-md font-medium transition-colors"
+                style={{
+                  background: os === opt ? 'var(--bg)' : 'transparent',
+                  color: os === opt ? 'var(--text)' : 'var(--text-faint)',
+                  boxShadow: os === opt ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
+                }}
+              >
+                {opt === 'mac' ? 'macOS' : 'Windows'}
+              </button>
+            ))}
           </div>
+        </div>
+        <div
+          className="rounded-xl overflow-hidden"
+          style={{ border: '1px solid var(--border)' }}
+        >
           {SHORTCUTS.map((s, i) => (
             <div
               key={s.desc}
-              className="grid items-center px-5 py-3"
+              className="flex items-center justify-between px-5 py-3"
               style={{
-                gridTemplateColumns: '1fr auto auto',
-                gap: '2rem',
                 borderTop: i > 0 ? '1px solid var(--border)' : 'none',
                 background: 'var(--bg-subtle)',
               }}
             >
               <span className="text-sm" style={{ color: 'var(--text-muted)' }}>{s.desc}</span>
-              <div className="flex items-center gap-1 justify-end">
-                {s.mac.map(k => (
-                  <kbd
-                    key={k}
-                    className="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-mono"
-                    style={{
-                      background: 'var(--bg)',
-                      border: '1px solid var(--border)',
-                      color: 'var(--text)',
-                      minWidth: 28,
-                      boxShadow: '0 1px 0 var(--border)',
-                    }}
-                  >
-                    {k}
-                  </kbd>
-                ))}
-              </div>
-              <div className="flex items-center gap-1 justify-end">
-                {s.win.map(k => (
+              <div className="flex items-center gap-1">
+                {s[os].map(k => (
                   <kbd
                     key={k}
                     className="inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-mono"