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:
parent
999d5e1b82
commit
7c1f8f8726
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user