feat: add Windows shortcuts and OS toggle to WelcomeView

- 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>
This commit is contained in:
MikiVL 2026-05-02 19:35:24 +08:00
parent 999d5e1b82
commit 7c1f8f8726

View File

@ -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 */}
<div className="flex items-center justify-between mb-4">
<h2
className="text-xs font-semibold uppercase tracking-widest mb-4"
className="text-xs font-semibold uppercase tracking-widest"
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"
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={{
gridTemplateColumns: '1fr auto auto',
gap: '2rem',
background: 'var(--bg-muted)',
color: 'var(--text-faint)',
borderBottom: '1px solid var(--border)',
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',
}}
>
<span></span>
<span>macOS</span>
<span>Windows</span>
{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"