wangjia/dudu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dudu MVP：五端语音输入法初始提交
ci / server (push) Failing after 14s
Details
ci / design-tokens (push) Failing after 11s
Details

Browse Source 
- server：Go 网关（WS 流式识别中继/计费配额/微信登录支付 mock/反馈/埋点），gummy provider 已真实联调
- desktop：Tauri 2（全局快捷键 push-to-talk/浮层/托盘/设置/登录购买/反馈/首启引导）
- android：Compose 主 App + IME（键盘内录音直传）
- ios：App + 键盘扩展（1A spike 实证键盘内不可录音，走 deep link 听写）
- design/design-pipeline：设计系统 + token 导出 iOS/Android 主题
- doc：前后端设计文档（HTML）；web：官网宣传页；todo：任务看板

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-12 00:38:37 +08:00
commit 40760aa884
252 changed files with 40789 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/guidelines/brand-logo.card.html
+23
View File
@@ -0,0 +1,23 @@
<!-- @dsCard group="Brand" viewport="700x190" name="Logo" subtitle="圆形嘴巴 + 声波线条 · 线性风格" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.cell { height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.cell img { display: block; }
.light { background: var(--gray-0); }
.tint { background: var(--gray-50); }
.dark { background: #11131A; }
.blue { background: #4F6EF7; }
</style>
</head>
<body>
<div class="cell light"><img src="../assets/logo-mark-ink.svg" width="72" height="72" alt="dudu logo"></div>
<div class="cell tint"><img src="../assets/logo-mark-blue.svg" width="72" height="72" alt="dudu logo blue"></div>
<div class="cell dark"><img src="../assets/logo-mark-white.svg" width="72" height="72" alt="dudu logo white"></div>
<div class="cell blue"><img src="../assets/app-icon.svg" width="76" height="76" alt="dudu app icon" style="border-radius: 17px; box-shadow: 0 4px 14px rgba(0,0,0,.25);"></div>
</body>
</html>
design/guidelines/brand-wordmark.card.html
+24
View File
@@ -0,0 +1,24 @@
<!-- @dsCard group="Brand" viewport="700x170" name="Wordmark" subtitle="dudu — 几何线条字标，与 logo 同一笔画语言" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.cell { height: 170px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.light { background: var(--gray-0); color: #1B1E26; }
.dark { background: #11131A; color: #ECEEF4; }
</style>
</head>
<body>
<div class="cell light">
<svg viewBox="0 0 48 48" width="50" height="50" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"><circle cx="24" cy="24" r="18"></circle><path d="M17 20.5v7"></path><path d="M24 16.5v15"></path><path d="M31 20.5v7"></path></svg>
<svg viewBox="0 0 152 52" width="140" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"><circle cx="18" cy="32" r="14"></circle><path d="M32 6v40"></path><path d="M42 18v14a14 14 0 0 0 28 0V18"></path><circle cx="94" cy="32" r="14"></circle><path d="M108 6v40"></path><path d="M118 18v14a14 14 0 0 0 28 0V18"></path></svg>
</div>
<div class="cell dark">
<svg viewBox="0 0 48 48" width="50" height="50" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"><circle cx="24" cy="24" r="18"></circle><path d="M17 20.5v7"></path><path d="M24 16.5v15"></path><path d="M31 20.5v7"></path></svg>
<svg viewBox="0 0 152 52" width="140" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"><circle cx="18" cy="32" r="14"></circle><path d="M32 6v40"></path><path d="M42 18v14a14 14 0 0 0 28 0V18"></path><circle cx="94" cy="32" r="14"></circle><path d="M108 6v40"></path><path d="M118 18v14a14 14 0 0 0 28 0V18"></path></svg>
</div>
</body>
</html>
design/guidelines/colors-brand.card.html
+31
View File
@@ -0,0 +1,31 @@
<!-- @dsCard group="Colors" viewport="700x120" name="品牌蓝阶梯" subtitle="--blue-50 → 900 · 主色 500（light）/ 400 系（dark）" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--gray-0); }
.row { display: grid; grid-template-columns: repeat(10, 1fr); height: 120px; }
.sw { display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; box-sizing: border-box; }
.sw span { font-size: 10px; font-family: var(--font-mono); opacity: 0.85; }
.sw.dk span { color: #fff; }
.sw.lt span { color: var(--gray-700); }
.sw.main { outline: 2px solid var(--gray-900); outline-offset: -2px; }
</style>
</head>
<body>
<div class="row">
<div class="sw lt" style="background:var(--blue-50)"><span>50</span></div>
<div class="sw lt" style="background:var(--blue-100)"><span>100</span></div>
<div class="sw lt" style="background:var(--blue-200)"><span>200</span></div>
<div class="sw lt" style="background:var(--blue-300)"><span>300</span></div>
<div class="sw dk" style="background:var(--blue-400)"><span>400</span></div>
<div class="sw dk main" style="background:var(--blue-500)"><span>500 ★</span></div>
<div class="sw dk" style="background:var(--blue-600)"><span>600</span></div>
<div class="sw dk" style="background:var(--blue-700)"><span>700</span></div>
<div class="sw dk" style="background:var(--blue-800)"><span>800</span></div>
<div class="sw dk" style="background:var(--blue-900)"><span>900</span></div>
</div>
</body>
</html>
design/guidelines/colors-neutrals.card.html
+33
View File
@@ -0,0 +1,33 @@
<!-- @dsCard group="Colors" viewport="700x120" name="中性阶梯" subtitle="--gray-0 → 950 · 冷灰 · 界面的主体" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--gray-0); }
.row { display: grid; grid-template-columns: repeat(13, 1fr); height: 120px; }
.sw { display: flex; flex-direction: column; justify-content: flex-end; padding: 7px 6px; box-sizing: border-box; }
.sw span { font-size: 9.5px; font-family: var(--font-mono); }
.lt span { color: var(--gray-600); }
.dk span { color: rgba(255,255,255,0.75); }
</style>
</head>
<body>
<div class="row">
<div class="sw lt" style="background:var(--gray-0); box-shadow: inset -1px 0 0 var(--gray-100)"><span>0</span></div>
<div class="sw lt" style="background:var(--gray-25)"><span>25</span></div>
<div class="sw lt" style="background:var(--gray-50)"><span>50</span></div>
<div class="sw lt" style="background:var(--gray-100)"><span>100</span></div>
<div class="sw lt" style="background:var(--gray-200)"><span>200</span></div>
<div class="sw lt" style="background:var(--gray-300)"><span>300</span></div>
<div class="sw dk" style="background:var(--gray-400)"><span>400</span></div>
<div class="sw dk" style="background:var(--gray-500)"><span>500</span></div>
<div class="sw dk" style="background:var(--gray-600)"><span>600</span></div>
<div class="sw dk" style="background:var(--gray-700)"><span>700</span></div>
<div class="sw dk" style="background:var(--gray-800)"><span>800</span></div>
<div class="sw dk" style="background:var(--gray-900)"><span>900</span></div>
<div class="sw dk" style="background:var(--gray-950)"><span>950</span></div>
</div>
</body>
</html>
design/guidelines/colors-overlay.card.html
+30
View File
@@ -0,0 +1,30 @@
<!-- @dsCard group="Colors" viewport="700x130" name="识别浮层色" subtitle="两种模式均为深色玻璃 · final 亮 / partial 灰 / hint 暗" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.pane { background: var(--bg-app); display: flex; align-items: center; justify-content: center; height: 130px; }
.ov { width: 280px; background: var(--overlay-bg); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: var(--shadow-overlay); }
.ov .txt { color: var(--overlay-text); font-size: var(--text-md); line-height: 1.6; }
.ov .txt .partial { color: var(--overlay-text-2); }
.ov .hint { color: var(--overlay-text-3); font-size: 11px; text-align: right; margin-top: 6px; }
</style>
</head>
<body>
<div class="pane">
<div class="ov">
<div class="txt">帮我把这份周报整理一下，<span class="partial">重点突出本周的</span></div>
<div class="hint">松开 ⌘⇧Space 完成输入</div>
</div>
</div>
<div class="pane" data-theme="dark">
<div class="ov">
<div class="txt">帮我把这份周报整理一下，<span class="partial">重点突出本周的</span></div>
<div class="hint">松开 ⌘⇧Space 完成输入</div>
</div>
</div>
</body>
</html>
design/guidelines/colors-semantic.card.html
+28
View File
@@ -0,0 +1,28 @@
<!-- @dsCard group="Colors" viewport="700x150" name="功能色" subtitle="绿=录音/成功 · 琥珀=超额/警告 · 红=错误 · soft 底 + 实色字" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.pane { padding: 18px 20px; background: var(--bg-app); display: flex; flex-direction: column; gap: 10px; height: 150px; box-sizing: border-box; }
.chip-row { display: flex; gap: 8px; align-items: center; }
.chip { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-full); font-weight: var(--weight-medium); }
.dot { width: 14px; height: 14px; border-radius: 50%; }
.lbl { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
</style>
</head>
<body>
<div class="pane">
<div class="chip-row"><span class="dot" style="background:var(--positive)"></span><span class="chip" style="background:var(--positive-soft);color:var(--positive)">录音中 · 余额充足</span><span class="lbl">--positive</span></div>
<div class="chip-row"><span class="dot" style="background:var(--warning)"></span><span class="chip" style="background:var(--warning-soft);color:var(--warning)">时长将用完</span><span class="lbl">--warning</span></div>
<div class="chip-row"><span class="dot" style="background:var(--danger)"></span><span class="chip" style="background:var(--danger-soft);color:var(--danger)">连接失败</span><span class="lbl">--danger</span></div>
</div>
<div class="pane" data-theme="dark">
<div class="chip-row"><span class="dot" style="background:var(--positive)"></span><span class="chip" style="background:var(--positive-soft);color:var(--positive)">录音中 · 余额充足</span><span class="lbl">--positive</span></div>
<div class="chip-row"><span class="dot" style="background:var(--warning)"></span><span class="chip" style="background:var(--warning-soft);color:var(--warning)">时长将用完</span><span class="lbl">--warning</span></div>
<div class="chip-row"><span class="dot" style="background:var(--danger)"></span><span class="chip" style="background:var(--danger-soft);color:var(--danger)">连接失败</span><span class="lbl">--danger</span></div>
</div>
</body>
</html>
design/guidelines/colors-surfaces.card.html
+44
View File
@@ -0,0 +1,44 @@
<!-- @dsCard group="Colors" viewport="700x170" name="表面与文字 · Light / Dark" subtitle="bg-app → surface-card → surface-2/3 · text-1/2/3" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.pane { background: var(--bg-app); padding: 16px 18px; height: 170px; box-sizing: border-box; }
.card { background: var(--surface-card); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-card); }
.t1 { color: var(--text-1); font-size: var(--text-base); font-weight: var(--weight-medium); }
.t2 { color: var(--text-2); font-size: var(--text-sm); margin-top: 2px; }
.t3 { color: var(--text-3); font-size: var(--text-xs); margin-top: 2px; }
.chips { display: flex; gap: 6px; margin-top: 10px; }
.chip { flex: 1; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; font-size: 10px; font-family: var(--font-mono); color: var(--text-3); }
</style>
</head>
<body>
<div class="pane">
<div class="card">
<div class="t1">text-1 · 主要文字</div>
<div class="t2">text-2 · 次要说明</div>
<div class="t3">text-3 · 弱提示</div>
<div class="chips">
<div class="chip" style="background:var(--bg-app)">bg-app</div>
<div class="chip" style="background:var(--surface-2)">surface-2</div>
<div class="chip" style="background:var(--surface-3)">surface-3</div>
</div>
</div>
</div>
<div class="pane" data-theme="dark">
<div class="card">
<div class="t1">text-1 · 主要文字</div>
<div class="t2">text-2 · 次要说明</div>
<div class="t3">text-3 · 弱提示</div>
<div class="chips">
<div class="chip" style="background:var(--bg-app)">bg-app</div>
<div class="chip" style="background:var(--surface-2)">surface-2</div>
<div class="chip" style="background:var(--surface-3)">surface-3</div>
</div>
</div>
</div>
</body>
</html>
design/guidelines/motion.card.html
+24
View File
@@ -0,0 +1,24 @@
<!-- @dsCard group="Spacing" viewport="700x130" name="动效" subtitle="快入慢出 · 120/200/320ms · 无弹跳（悬停小球查看）" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--surface-card); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; height: 130px; box-sizing: border-box; justify-content: center; }
.row { display: flex; align-items: center; gap: 14px; }
.tok { width: 150px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); flex: none; }
.track { flex: 1; height: 22px; background: var(--surface-2); border-radius: var(--radius-full); position: relative; }
.ball { position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.track:hover .f { transition: left var(--dur-fast) var(--ease-out); left: calc(100% - 20px); }
.track:hover .b { transition: left var(--dur-base) var(--ease-out); left: calc(100% - 20px); }
.track:hover .s { transition: left var(--dur-slow) var(--ease-out); left: calc(100% - 20px); }
.f, .b, .s { transition: left var(--dur-base) var(--ease-out); }
</style>
</head>
<body>
<div class="row"><span class="tok">--dur-fast · 120ms</span><div class="track"><div class="ball f"></div></div><span class="tok" style="width:90px">hover · 按压</span></div>
<div class="row"><span class="tok">--dur-base · 200ms</span><div class="track"><div class="ball b"></div></div><span class="tok" style="width:90px">浮层 · 开关</span></div>
<div class="row"><span class="tok">--dur-slow · 320ms</span><div class="track"><div class="ball s"></div></div><span class="tok" style="width:90px">屏幕切换</span></div>
</body>
</html>
design/guidelines/spacing-controls.card.html
+20
View File
@@ -0,0 +1,20 @@
<!-- @dsCard group="Spacing" viewport="700x130" name="控件高度" subtitle="桌面 28/36 · 移动触控 44/56" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--surface-card); padding: 18px 22px; display: flex; gap: 14px; align-items: flex-end; height: 130px; box-sizing: border-box; }
.ctl { display: flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-1); color: var(--text-2); font-size: var(--text-sm); }
.item { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.item span { font-size: 10px; font-family: var(--font-mono); color: var(--text-3); }
</style>
</head>
<body>
<div class="item"><div class="ctl" style="height:var(--control-sm)">紧凑 28</div><span>--control-sm</span></div>
<div class="item"><div class="ctl" style="height:var(--control-md)">桌面默认 36</div><span>--control-md</span></div>
<div class="item"><div class="ctl" style="height:var(--control-lg)">移动最小触控 44</div><span>--control-lg</span></div>
<div class="item"><div class="ctl" style="height:var(--control-xl);border-radius:var(--radius-full);background:var(--accent);border:none;color:var(--text-on-accent);font-weight:var(--weight-semibold)">主操作 / 麦克风条 56</div><span>--control-xl</span></div>
</body>
</html>
design/guidelines/spacing-elevation.card.html
+30
View File
@@ -0,0 +1,30 @@
<!-- @dsCard group="Spacing" viewport="700x160" name="层级与阴影" subtitle="card → menu → window → overlay · dark 模式靠边框提层级" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.pane { background: var(--bg-app); display: flex; gap: 14px; align-items: center; justify-content: center; height: 160px; }
.lv { width: 110px; height: 84px; background: var(--surface-card); border: 1px solid var(--border-1); border-radius: var(--radius-lg); display: flex; align-items: flex-end; padding: 8px 10px; box-sizing: border-box; }
.lv span { font-size: 10px; font-family: var(--font-mono); color: var(--text-3); }
.ov { background: var(--overlay-bg); border: none; }
.ov span { color: var(--overlay-text-3); }
</style>
</head>
<body>
<div class="pane">
<div class="lv" style="box-shadow:var(--shadow-card)"><span>card</span></div>
<div class="lv" style="box-shadow:var(--shadow-menu)"><span>menu</span></div>
<div class="lv" style="box-shadow:var(--shadow-window)"><span>window</span></div>
<div class="lv ov" style="box-shadow:var(--shadow-overlay)"><span>overlay</span></div>
</div>
<div class="pane" data-theme="dark">
<div class="lv" style="box-shadow:var(--shadow-card)"><span>card</span></div>
<div class="lv" style="box-shadow:var(--shadow-menu)"><span>menu</span></div>
<div class="lv" style="box-shadow:var(--shadow-window)"><span>window</span></div>
<div class="lv ov" style="box-shadow:var(--shadow-overlay)"><span>overlay</span></div>
</div>
</body>
</html>
design/guidelines/spacing-grid.card.html
+26
View File
@@ -0,0 +1,26 @@
<!-- @dsCard group="Spacing" viewport="700x130" name="间距网格" subtitle="4px 基准 · --space-1 → 16" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--surface-card); padding: 18px 22px; display: flex; align-items: flex-end; gap: 18px; height: 130px; box-sizing: border-box; }
.item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar { width: 22px; background: var(--accent-soft-2); border: 1px solid var(--accent); border-radius: 3px; box-sizing: border-box; }
.item span { font-size: 10px; font-family: var(--font-mono); color: var(--text-3); }
</style>
</head>
<body>
<div class="item"><div class="bar" style="height:4px"></div><span>1·4</span></div>
<div class="item"><div class="bar" style="height:8px"></div><span>2·8</span></div>
<div class="item"><div class="bar" style="height:12px"></div><span>3·12</span></div>
<div class="item"><div class="bar" style="height:16px"></div><span>4·16</span></div>
<div class="item"><div class="bar" style="height:20px"></div><span>5·20</span></div>
<div class="item"><div class="bar" style="height:24px"></div><span>6·24</span></div>
<div class="item"><div class="bar" style="height:32px"></div><span>8·32</span></div>
<div class="item"><div class="bar" style="height:40px"></div><span>10·40</span></div>
<div class="item"><div class="bar" style="height:48px"></div><span>12·48</span></div>
<div class="item"><div class="bar" style="height:64px"></div><span>16·64</span></div>
</body>
</html>
design/guidelines/spacing-radius.card.html
+23
View File
@@ -0,0 +1,23 @@
<!-- @dsCard group="Spacing" viewport="700x140" name="圆角阶梯" subtitle="xs 4 → xl 20 → full · 卡片/浮层 14 · 胶囊 999" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--bg-app); padding: 20px 22px; display: flex; gap: 16px; align-items: center; height: 140px; box-sizing: border-box; }
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.box { width: 76px; height: 60px; background: var(--surface-card); border: 1.5px solid var(--border-2); }
.pill { width: 110px; height: 36px; background: var(--accent); }
.item span { font-size: 10.5px; font-family: var(--font-mono); color: var(--text-3); }
</style>
</head>
<body>
<div class="item"><div class="box" style="border-radius:var(--radius-xs)"></div><span>xs · 4 · kbd</span></div>
<div class="item"><div class="box" style="border-radius:var(--radius-sm)"></div><span>sm · 6 · 按钮</span></div>
<div class="item"><div class="box" style="border-radius:var(--radius-md)"></div><span>md · 10 · 菜单</span></div>
<div class="item"><div class="box" style="border-radius:var(--radius-lg)"></div><span>lg · 14 · 卡片/浮层</span></div>
<div class="item"><div class="box" style="border-radius:var(--radius-xl)"></div><span>xl · 20 · 大容器</span></div>
<div class="item"><div class="pill" style="border-radius:var(--radius-full)"></div><span>full · 麦克风条</span></div>
</body>
</html>
design/guidelines/type-families.card.html
+31
View File
@@ -0,0 +1,31 @@
<!-- @dsCard group="Type" viewport="700x170" name="字体家族" subtitle="Outfit（品牌拉丁/数字）· 系统中文栈 · 等宽" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--surface-card); color: var(--text-1); padding: 16px 22px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: baseline; gap: 16px; }
.tok { width: 110px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); flex: none; }
.note { font-size: 11px; color: var(--text-3); margin-left: auto; }
</style>
</head>
<body>
<div class="row">
<span class="tok">--font-sans</span>
<span style="font-size:26px;font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide)">dudu 0123456789</span>
<span class="note">Outfit · 字标与数字</span>
</div>
<div class="row">
<span class="tok">--font-sans</span>
<span style="font-size:17px">嘟嘟语音输入，说话即上屏</span>
<span class="note">中文走系统栈 PingFang SC / MiSans</span>
</div>
<div class="row">
<span class="tok">--font-mono</span>
<span style="font-family:var(--font-mono);font-size:14px">/v1/asr/stream · 00:04</span>
<span class="note">代码 · 计时</span>
</div>
</body>
</html>
design/guidelines/type-recognition.card.html
+32
View File
@@ -0,0 +1,32 @@
<!-- @dsCard group="Type" viewport="700x120" name="识别文本规范" subtitle="final 实色 · partial 弱色实时刷新 · 永不闪跳" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); display: grid; grid-template-columns: 1fr 1fr; }
.pane { padding: 18px 22px; height: 120px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lt { background: var(--surface-card); }
.dkv { background: var(--overlay-bg); }
.txt { font-size: var(--text-md); line-height: 1.6; }
.lt .txt { color: var(--text-1); }
.lt .txt .partial { color: var(--text-3); }
.dkv .txt { color: var(--overlay-text); }
.dkv .txt .partial { color: var(--overlay-text-2); }
.lbl { font-size: 11px; }
.lt .lbl { color: var(--text-3); }
.dkv .lbl { color: var(--overlay-text-3); }
</style>
</head>
<body>
<div class="pane lt">
<div class="txt">好的，我马上把文件发给你，<span class="partial">大概十分钟之</span></div>
<div class="lbl">键盘 partial 文本条：final 用 text-1，partial 用 text-3</div>
</div>
<div class="pane dkv">
<div class="txt">好的，我马上把文件发给你，<span class="partial">大概十分钟之</span></div>
<div class="lbl">浮层：final 用 overlay-text，partial 用 overlay-text-2</div>
</div>
</body>
</html>
design/guidelines/type-scale.card.html
+24
View File
@@ -0,0 +1,24 @@
<!-- @dsCard group="Type" viewport="700x230" name="字号阶梯" subtitle="12 → 44 · 桌面正文 14 / 移动与浮层 15" -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../styles.css">
<style>
body { margin: 0; font-family: var(--font-sans); background: var(--surface-card); color: var(--text-1); padding: 16px 22px; }
.row { display: flex; align-items: baseline; gap: 14px; padding: 3px 0; }
.tok { width: 110px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); flex: none; }
.sp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
</head>
<body>
<div class="row"><span class="tok">--text-xs 12</span><span class="sp" style="font-size:var(--text-xs)">角标 · 键帽 · 浮层提示</span></div>
<div class="row"><span class="tok">--text-sm 13</span><span class="sp" style="font-size:var(--text-sm)">次要信息 · 托盘菜单</span></div>
<div class="row"><span class="tok">--text-base 14</span><span class="sp" style="font-size:var(--text-base)">桌面正文 · 设置项</span></div>
<div class="row"><span class="tok">--text-md 15</span><span class="sp" style="font-size:var(--text-md)">浮层识别文本 · 移动正文</span></div>
<div class="row"><span class="tok">--text-lg 17</span><span class="sp" style="font-size:var(--text-lg);font-weight:var(--weight-medium)">区块标题 · 移动列表</span></div>
<div class="row"><span class="tok">--text-xl 20</span><span class="sp" style="font-size:var(--text-xl);font-weight:var(--weight-semibold)">窗口标题</span></div>
<div class="row"><span class="tok">--text-2xl 24</span><span class="sp" style="font-size:var(--text-2xl);font-weight:var(--weight-semibold)">页面大标题</span></div>
<div class="row"><span class="tok">--text-3xl 32</span><span class="sp" style="font-size:var(--text-3xl);font-weight:var(--weight-bold)">¥ 128 / 年</span></div>
</body>
</html>