feat(design+desktop): 设置屏改版——卡片分组布局（12A 实测反馈，原型先行）

原布局「灰字组标题 + 通栏细线」平铺无体块感、行距不均、控件对齐参差。
改版（原型 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>

design/ui_kits/desktop/DesktopShared.jsx

@@ -80,13 +80,18 @@ function MacWindow({ title, width = 460, children, style }) {
       overflow: 'hidden', fontFamily: 'var(--font-sans)', ...style,
     }}>
       <div style={{
-        display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px',
+        position: 'relative', display: 'flex', alignItems: 'center', gap: 7, padding: '10px 14px',
         background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)',
       }}>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#FEBC2E' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
         <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' /* ds-ignore: mac 红绿灯窗饰，系统固定色 */ }}></span>
-        <span style={{ marginLeft: 10, fontSize: 'var(--text-xs)', color: 'var(--text-2)', whiteSpace: 'nowrap' }}>{title}</span>
+        {/* 标题绝对居中（mac 原生窗口习惯），永不与红绿灯重叠 */}
+        <span style={{
+          position: 'absolute', left: '50%', transform: 'translateX(-50%)',
+          fontSize: 'var(--text-xs)', color: 'var(--text-2)', whiteSpace: 'nowrap',
+          fontWeight: 'var(--weight-medium)',
+        }}>{title}</span>
       </div>
       {children}
     </div>

design/ui_kits/desktop/SettingsTray.jsx

@@ -47,16 +47,33 @@ function TrayMenu() {
   );
 }
 
+// 设置屏（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 } = window.DuduDesignSystem_2e0172;
+  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 Section = ({ title, children }) => (
+  const Group = ({ title, order = 0, children }) => (
-    <div style={{ padding: '4px 18px 8px' }}>
+    <div className="dd-set-group" style={{ animationDelay: `${order * 40}ms` }}>
-      <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-3)', fontWeight: 'var(--weight-medium)', margin: '10px 0 2px', letterSpacing: 'var(--tracking-wide)' }}>{title}</div>
+      <div style={{
-      {children}
+        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>
   );
 
@@ -64,68 +81,70 @@ function SettingsWindow({ theme, onThemeChange }) {
 
   return (
     <MacWindow title="dudu 设置" width={440}>
-      <Section title="输入">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '10px 16px 16px', background: 'var(--bg-app)' }}>
-        <SettingRow label="说话快捷键" description="按住说话，松开上屏">
+        <Group title="输入" order={0}>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+          <SettingRow label="说话快捷键" description="按住说话，松开上屏">
             <HotkeyCombo keys={['⌘', '⇧', 'Space']} />
             <Button variant="ghost" size="sm">修改</Button>
-          </span>
+          </SettingRow>
-        </SettingRow>
+          <SettingRow label="麦克风">
-        <SettingRow label="麦克风">
+            <Select
-          <Select
+              value={mic}
-            value={mic}
+              onChange={setMic}
-            onChange={setMic}
+              options={['MacBook Pro 麦克风', 'AirPods Pro', '外接 USB 麦克风']}
-            options={['MacBook Pro 麦克风', 'AirPods Pro', '外接 USB 麦克风']}
+            />
-          />
+          </SettingRow>
-        </SettingRow>
+          <SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
-        <SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
+            <Switch checked={sound} onChange={setSound} />
-          <Switch checked={sound} onChange={setSound} />
+          </SettingRow>
-        </SettingRow>
+        </Group>
-      </Section>
 
-      <div style={{ height: 1, background: 'var(--border-1)' }}></div>
+        <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>
 
-      <Section title="通用">
+        <Group title="账号与时长" order={2}>
-        <SettingRow label="开机自启">
+          <SettingRow label="登录状态" description="微信已登录">
-          <Switch checked={autostart} onChange={setAutostart} />
+            <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>wang***</span>
-        </SettingRow>
+            <Badge tone="green">余额充足</Badge>
-        <SettingRow label="外观">
+          </SettingRow>
-          <span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
+          <SettingRow label="时长余额" description="时长不过期 · 每天另有 3 分钟免费试用">
-            {themeOptions.map(([val, lab]) => (
+            <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4 }}>
-              <button key={val} type="button" onClick={() => onThemeChange(val)} style={{
+              <span style={{ fontSize: 'var(--text-xl)', fontWeight: 'var(--weight-bold)', color: 'var(--text-1)' }}>472</span>
-                height: 24, padding: '0 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
+              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-2)' }}>分钟</span>
-                fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
+            </span>
-                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>
-      </Section>
-
-      <div style={{ height: 1, background: 'var(--border-1)' }}></div>
-
-      <Section title="账号与时长">
-        <SettingRow label="登录状态" description="微信已登录">
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>
-            wang*** <Badge tone="green">余额充足</Badge>
-          </span>
-        </SettingRow>
-        <SettingRow label="时长余额" description="时长不过期 · 每天另有 3 分钟免费试用">
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-            <span style={{ fontSize: 'var(--text-base)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)', fontFamily: 'var(--font-sans)' }}>472 分钟</span>
             <Button variant="secondary" size="sm">购买时长</Button>
-          </span>
+          </SettingRow>
-        </SettingRow>
+          <div style={{ padding: '12px 0 14px' }}>
-        <div style={{ padding: '10px 0 12px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'var(--text-2)', marginBottom: 7 }}>
-          <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>
-            <span>今日免费试用</span><span style={{ fontFamily: 'var(--font-mono)' }}>1 / 3 分钟</span>
+            </div>
+            <ProgressBar value={1} max={3} />
           </div>
-          <ProgressBar value={1} max={3} />
+        </Group>
-        </div>
+
-      </Section>
+        <Group title="帮助" order={3}>
+          <SettingRow label="反馈问题" description="遇到问题或建议，告诉我们">
+            <Button variant="ghost" size="sm">去反馈</Button>
+          </SettingRow>
+        </Group>
+      </div>
     </MacWindow>
   );
 }

desktop/src/settings/SettingsApp.jsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react';
 import { Button } from '@dudu/design/components/core/Button';
 import { Badge } from '@dudu/design/components/core/Badge';
+import { Card } from '@dudu/design/components/core/Card';
 import { HotkeyCombo } from '@dudu/design/components/core/Kbd';
 import { ProgressBar } from '@dudu/design/components/core/ProgressBar';
 import { Switch } from '@dudu/design/components/forms/Switch';
@@ -12,20 +13,25 @@ import { setThemePref } from '../shared/theme';
 
 const THEME_OPTIONS = [['system', '跟随系统'], ['light', '浅色'], ['dark', '深色']];
 
-function Section({ title, children }) {
+// 分组卡片（对齐原型 SettingsTray 2026-07-11 改版）：组标题在卡外、
+// radius-lg 卡片体块、载入分组轻微上浮淡入（40ms 级差）。
+const groupCss = `
+@keyframes dd-set-in { from { opacity: 0; transform: translateY(4px); } }
+.dd-set-group { animation: dd-set-in var(--dur-base) var(--ease-out) both; }
+`;
+
+function Group({ title, order = 0, children }) {
   return (
-    <div style={{ padding: '4px 18px 8px' }}>
+    <div className="dd-set-group" style={{ animationDelay: `${order * 40}ms` }}>
       <div style={{
         fontSize: 'var(--text-xs)', color: 'var(--text-3)', fontWeight: 'var(--weight-medium)',
-        margin: '10px 0 2px', letterSpacing: 'var(--tracking-wide)',
+        letterSpacing: 'var(--tracking-wide)', margin: '0 0 6px 4px',
       }}>{title}</div>
-      {children}
+      <Card padding="0 16px" style={{ borderRadius: 'var(--radius-lg)' }}>{children}</Card>
     </div>
   );
 }
 
-const Sep = () => <div style={{ height: 1, background: 'var(--border-1)' }}></div>;
-
 export function SettingsApp() {
   const [settings, setSettings] = useState({
     hotkey: 'CmdOrCtrl+Shift+Space', mic: '', sound: false, autostart: true, theme: 'system',
@@ -70,92 +76,93 @@ export function SettingsApp() {
       border: '1px solid var(--border-1)',
       overflow: 'hidden', display: 'flex', flexDirection: 'column',
     }}>
-      {/* 自绘顶条：系统红绿灯悬浮于左上（trafficLightPosition 已对齐），留 76px；整条可拖拽 */}
+      <style>{groupCss}</style>
+      {/* 自绘顶条：系统红绿灯悬浮于左上，标题绝对居中（mac 原生习惯，永不重叠）；整条可拖拽 */}
       <div
         data-tauri-drag-region
         style={{
-          height: 36, flex: 'none', display: 'flex', alignItems: 'center', padding: '0 14px 0 76px',
+          position: 'relative', height: 36, flex: 'none', display: 'flex', alignItems: 'center',
           background: 'var(--surface-2)', borderBottom: '1px solid var(--border-1)',
-          fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)',
           userSelect: 'none', WebkitUserSelect: 'none', cursor: 'default',
         }}
       >
-        dudu 设置
+        <span style={{
+          position: 'absolute', left: '50%', transform: 'translateX(-50%)', pointerEvents: 'none',
+          fontSize: 'var(--text-xs)', fontWeight: 'var(--weight-medium)', color: 'var(--text-2)',
+        }}>dudu 设置</span>
       </div>
-      <div style={{ overflowY: 'auto', flex: 1 }}>
+      <div style={{ overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: 16, padding: '10px 16px 16px' }}>
-      <Section title="输入">
+        <Group title="输入" order={0}>
-        <SettingRow label="说话快捷键" description="按住说话，松开上屏">
+          <SettingRow label="说话快捷键" description="按住说话，松开上屏">
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
             <HotkeyCombo keys={['⌘', '⇧', 'Space']} />
             <Button variant="ghost" size="sm">修改</Button>
-          </span>
+          </SettingRow>
-        </SettingRow>
+          <SettingRow label="麦克风">
-        <SettingRow label="麦克风">
+            <Select
-          <Select
+              value={settings.mic}
-            value={settings.mic}
+              onChange={(mic) => update({ mic })}
-            onChange={(mic) => update({ mic })}
+              options={[{ value: '', label: '系统默认' }, ...mics.map((m) => ({ value: m, label: m }))]}
-            options={[{ value: '', label: '系统默认' }, ...mics.map((m) => ({ value: m, label: m }))]}
+            />
-          />
+          </SettingRow>
-        </SettingRow>
+          <SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
-        <SettingRow label="提示音" description="开始 / 完成时播放轻提示音">
+            <Switch checked={settings.sound} onChange={(v) => update({ sound: v })} />
-          <Switch checked={settings.sound} onChange={(v) => update({ sound: v })} />
+          </SettingRow>
-        </SettingRow>
+        </Group>
-      </Section>
+
-      <Sep />
+        <Group title="通用" order={1}>
-      <Section title="通用">
+          <SettingRow label="开机自启">
-        <SettingRow label="开机自启">
+            <Switch checked={settings.autostart} onChange={(v) => update({ autostart: v })} />
-          <Switch checked={settings.autostart} onChange={(v) => update({ autostart: v })} />
+          </SettingRow>
-        </SettingRow>
+          <SettingRow label="外观">
-        <SettingRow label="外观">
+            <span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
-          <span style={{ display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--radius-sm)', padding: 2, gap: 2 }}>
+              {THEME_OPTIONS.map(([val, lab]) => (
-            {THEME_OPTIONS.map(([val, lab]) => (
+                <button key={val} type="button" onClick={() => update({ theme: val })} style={{
-              <button key={val} type="button" onClick={() => update({ theme: val })} style={{
+                  height: 24, padding: '0 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
-                height: 24, padding: '0 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
+                  fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
-                fontSize: 'var(--text-xs)', fontFamily: 'var(--font-sans)',
+                  background: settings.theme === val ? 'var(--surface-card)' : 'transparent',
-                background: settings.theme === val ? 'var(--surface-card)' : 'transparent',
+                  color: settings.theme === val ? 'var(--text-1)' : 'var(--text-2)',
-                color: settings.theme === val ? 'var(--text-1)' : 'var(--text-2)',
+                  boxShadow: settings.theme === val ? 'var(--shadow-card)' : 'none',
-                boxShadow: settings.theme === val ? 'var(--shadow-card)' : 'none',
+                  transition: 'background var(--dur-fast) var(--ease-out)',
-              }}>{lab}</button>
+                }}>{lab}</button>
-            ))}
+              ))}
-          </span>
-        </SettingRow>
-      </Section>
-      <Sep />
-      <Section title="账号与时长">
-        <SettingRow label="登录状态" description={me ? '微信已登录' : '登录后开始使用'}>
-          {me ? (
-            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>
-              {me.nickname_masked}
-              <Badge tone={me.account_state === 'quota' ? 'orange' : 'green'}>
-                {me.account_state === 'ok' ? '余额充足' : me.account_state === 'trial' ? '试用中' : '余额不足'}
-              </Badge>
             </span>
-          ) : (
+          </SettingRow>
-            <Button variant="primary" size="sm" onClick={() => invoke('open_login')}>微信登录</Button>
+        </Group>
-          )}
+
-        </SettingRow>
+        <Group title="账号与时长" order={2}>
-        <SettingRow label="时长余额" description="时长不过期 · 每天另有 3 分钟免费试用">
+          <SettingRow label="登录状态" description={me ? '微信已登录' : '登录后开始使用'}>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+            {me ? (
-            <span style={{ fontSize: 'var(--text-base)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-1)' }}>
+              <>
-              {minutes} 分钟
+                <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-1)' }}>{me.nickname_masked}</span>
+                <Badge tone={me.account_state === 'quota' ? 'orange' : 'green'}>
+                  {me.account_state === 'ok' ? '余额充足' : me.account_state === 'trial' ? '试用中' : '余额不足'}
+                </Badge>
+              </>
+            ) : (
+              <Button variant="primary" size="sm" onClick={() => invoke('open_login')}>微信登录</Button>
+            )}
+          </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)' }}>{minutes}</span>
+              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-2)' }}>分钟</span>
             </span>
             <Button variant="secondary" size="sm" onClick={() => invoke('open_login')}>购买时长</Button>
-          </span>
+          </SettingRow>
-        </SettingRow>
+          <div style={{ padding: '12px 0 14px' }}>
-        <div style={{ padding: '10px 0 12px' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'var(--text-2)', marginBottom: 7 }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'var(--text-2)', marginBottom: 7 }}>
+              <span>今日免费试用</span>
-            <span>今日免费试用</span>
+              <span style={{ fontFamily: 'var(--font-mono)' }}>{trialUsedMin} / 3 分钟</span>
-            <span style={{ fontFamily: 'var(--font-mono)' }}>{trialUsedMin} / 3 分钟</span>
+            </div>
+            <ProgressBar value={trialUsedMin} max={3} />
           </div>
-          <ProgressBar value={trialUsedMin} max={3} />
+        </Group>
-        </div>
+
-      </Section>
+        <Group title="帮助" order={3}>
-      <Sep />
+          <SettingRow label="反馈问题" description="遇到问题或建议，告诉我们">
-      <Section title="帮助">
+            <Button variant="ghost" size="sm" onClick={() => invoke('open_feedback')}>去反馈</Button>
-        <SettingRow label="反馈问题" description="遇到问题或建议，告诉我们">
+          </SettingRow>
-          <Button variant="ghost" size="sm" onClick={() => invoke('open_feedback')}>去反馈</Button>
+        </Group>
-        </SettingRow>
-      </Section>
       </div>
     </div>
   );