wangjia
0ca1caa460
原布局「灰字组标题 + 通栏细线」平铺无体块感、行距不均、控件对齐参差。 改版（原型 SettingsTray 与实现 SettingsApp 同步）： - 分组卡片化：组标题在卡外（12px text-3 加字距），每组一张 radius-lg 卡片（复用 Card 组件），卡内行以内嵌分隔线相隔，页面 bg-app 底上 卡片体块清晰 - 行规格统一：SettingRow 复用，右侧控件统一右缘对齐 - 时长余额改大数字排版（text-xl bold + 单位小字基线对齐） - 载入动效：四组 40ms 级差上浮淡入（对齐浮层动效语言，快入慢出） - 顶条标题绝对居中（mac 原生习惯），与红绿灯永不重叠；原型 MacWindow 同步改居中 - 原型补齐「帮助」组与实现对位 双主题截图验收通过；三道闸全绿；vite 构建通过。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
153 lines
7.4 KiB
React
153 lines
7.4 KiB
React
// dudu 桌面端 · 系统托盘菜单 + 设置窗口
|
|
|
|
function TrayMenu() {
|
|
const { Badge } = window.DuduDesignSystem_2e0172;
|
|
const Item = ({ children, right, accent, onClick }) => {
|
|
const [hover, setHover] = React.useState(false);
|
|
return (
|
|
<div
|
|
onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={onClick}
|
|
style={{
|
|
display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 18,
|
|
padding: '7px 14px', cursor: 'default', fontSize: 'var(--text-sm)',
|
|
background: hover ? 'var(--accent)' : 'transparent',
|
|
color: hover ? 'var(--text-on-accent)' : (accent ? 'var(--text-1)' : 'var(--text-1)'),
|
|
transition: 'background var(--dur-fast) var(--ease-out)',
|
|
}}>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>{children}</span>
|
|
{right && <span style={{ fontSize: 'var(--text-xs)', color: hover ? 'var(--text-on-accent)' : 'var(--text-3)', opacity: hover ? 0.8 : 1, whiteSpace: 'nowrap' }}>{right}</span>}
|
|
</div>
|
|
);
|
|
};
|
|
const Sep = () => <div style={{ height: 1, background: 'var(--border-1)', margin: '4px 0' }}></div>;
|
|
return (
|
|
<div style={{
|
|
width: 248, padding: '5px 0', fontFamily: 'var(--font-sans)',
|
|
background: 'color-mix(in srgb, var(--surface-card) 96%, transparent)',
|
|
backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
|
|
border: '1px solid var(--border-1)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-menu)',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 14px 6px' }}>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-medium)', color: 'var(--text-1)', whiteSpace: 'nowrap' }}>
|
|
<DuduLogo size={17} /> dudu 语音输入
|
|
</span>
|
|
<Badge tone="green">已就绪</Badge>
|
|
</div>
|
|
<Sep />
|
|
<Item right={<DuIcons.Check size={13} />}>启用快捷键</Item>
|
|
<Item right="⌘⇧Space">按住说话</Item>
|
|
<Item>设置…</Item>
|
|
<Item right="472 分钟">时长余额</Item>
|
|
<Sep />
|
|
<Item right="已登录">账号 wang***</Item>
|
|
<Item>检查更新</Item>
|
|
<Sep />
|
|
<Item>退出 dudu</Item>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 设置屏（2026-07-11 改版）：分组从「灰字 + 通栏细线」改为卡片体块——
|
|
// 组标题在卡外、每组一张 radius-lg 卡片、卡内行以内嵌分隔线相隔；
|
|
// 载入时分组 4 段轻微上浮淡入（对齐浮层动效语言，120/40ms 级差）。
|
|
const ddSettingsCss = `
|
|
@keyframes dd-set-in { from { opacity: 0; transform: translateY(4px); } }
|
|
.dd-set-group { animation: dd-set-in var(--dur-base) var(--ease-out) both; }
|
|
`;
|
|
if (typeof document !== 'undefined' && !document.getElementById('dd-settings-css')) {
|
|
const s = document.createElement('style');
|
|
s.id = 'dd-settings-css';
|
|
s.textContent = ddSettingsCss;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
function SettingsWindow({ theme, onThemeChange }) {
|
|
const { Switch, SettingRow, HotkeyCombo, Button, Badge, ProgressBar, Select, Card } = window.DuduDesignSystem_2e0172;
|
|
const [autostart, setAutostart] = React.useState(true);
|
|
const [sound, setSound] = React.useState(false);
|
|
const [mic, setMic] = React.useState('MacBook Pro 麦克风');
|
|
|
|
const Group = ({ title, order = 0, children }) => (
|
|
<div className="dd-set-group" style={{ animationDelay: `${order * 40}ms` }}>
|
|
<div style={{
|
|
fontSize: 'var(--text-xs)', color: 'var(--text-3)', fontWeight: 'var(--weight-medium)',
|
|
letterSpacing: 'var(--tracking-wide)', margin: '0 0 6px 4px',
|
|
}}>{title}</div>
|
|
<Card padding="0 16px" style={{ borderRadius: 'var(--radius-lg)' }}>{children}</Card>
|
|
</div>
|
|
);
|
|
|
|
const themeOptions = [['system', '跟随系统'], ['light', '浅色'], ['dark', '深色']];
|
|
|
|
return (
|
|
<MacWindow title="dudu 设置" width={440}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '10px 16px 16px', background: 'var(--bg-app)' }}>
|
|
<Group title="输入" order={0}>
|
|
<SettingRow label="说话快捷键" description="按住说话，松开上屏">
|
|
<HotkeyCombo keys={['⌘', '⇧', 'Space']} />
|
|
<Button variant="ghost" size="sm">修改</Button>
|
|
</SettingRow>
|
|
<SettingRow label="麦克风">
|
|
<Select
|
|
value={mic}
|
|
onChange={setMic}
|
|
options={['MacBook Pro 麦克风', 'AirPods Pro', '外接 USB 麦克风']}
|
|
/>
|
|
</SettingRow>
|
|
<SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
|
|
<Switch checked={sound} onChange={setSound} />
|
|
</SettingRow>
|
|
</Group>
|
|
|
|
<Group title="通用" order={1}>
|
|
<SettingRow label="开机自启">
|
|
<Switch checked={autostart} onChange={setAutostart} />
|
|
</SettingRow>
|
|
<SettingRow label="外观">
|
|
<span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
|
|
{themeOptions.map(([val, lab]) => (
|
|
<button key={val} type="button" onClick={() => onThemeChange(val)} style={{
|
|
height: 24, padding: '0 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
|
|
fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
|
|
background: theme === val ? 'var(--surface-card)' : 'transparent',
|
|
color: theme === val ? 'var(--text-1)' : 'var(--text-2)',
|
|
boxShadow: theme === val ? 'var(--shadow-card)' : 'none',
|
|
transition: 'background var(--dur-fast) var(--ease-out)',
|
|
}}>{lab}</button>
|
|
))}
|
|
</span>
|
|
</SettingRow>
|
|
</Group>
|
|
|
|
<Group title="账号与时长" order={2}>
|
|
<SettingRow label="登录状态" description="微信已登录">
|
|
<span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>wang***</span>
|
|
<Badge tone="green">余额充足</Badge>
|
|
</SettingRow>
|
|
<SettingRow label="时长余额" description="时长不过期 · 每天另有 3 分钟免费试用">
|
|
<span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
|
|
<span style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--weight-bold)', color: 'var(--text-1)' }}>472</span>
|
|
<span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-2)' }}>分钟</span>
|
|
</span>
|
|
<Button variant="secondary" size="sm">购买时长</Button>
|
|
</SettingRow>
|
|
<div style={{ padding: '12px 0 14px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'var(--text-2)', marginBottom: 7 }}>
|
|
<span>今日免费试用</span><span style={{ fontFamily: 'var(--font-mono)' }}>1 / 3 分钟</span>
|
|
</div>
|
|
<ProgressBar value={1} max={3} />
|
|
</div>
|
|
</Group>
|
|
|
|
<Group title="帮助" order={3}>
|
|
<SettingRow label="反馈问题" description="遇到问题或建议，告诉我们">
|
|
<Button variant="ghost" size="sm">去反馈</Button>
|
|
</SettingRow>
|
|
</Group>
|
|
</div>
|
|
</MacWindow>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { TrayMenu, SettingsWindow });
|