wangjia
208d0cda12
真相源整固： - design/index.html 登记簿：token 色板（var() 实时渲染）/ 组件登记卡 / 图标与跨端映射 / guidelines / ui_kits 单一入口，check-ds 强制登记 - design/icons.js 图标单源（Lucide 线条）+ icon-map.json 跨端映射表 （web/iOS/Android 三列，iOS 12 个 SF Symbol 全部收编登记） - components/core/Icon.jsx 单源图标渲染器；MicBar/RecognitionOverlay 接入 - tokens 新增 --brand-wechat(-press)（微信官方绿）与 --overlay-wave - fonts.css 弃 Google Fonts CDN，Outfit 可变字体自托管 （assets/outfit-latin.woff2，40KB；中国网络下 CDN 不可用会卡字体） - design/serve.mjs 零依赖预览服务器（登记簿与原型评审入口） codegen 强化（export-tokens.mjs）： - 产物直写消费位置：ios/dudu/Shared/DuduTheme.swift、 android/.../design/DuduTheme.kt——删除 design-pipeline/generated/ 中间拷贝层（此前 app 内是手工拷贝，--check 守不到真实消费文件已漂移） - 新增 web/tokens.css 产物（custom props 透传 + Outfit data URI 内嵌） - tokens 文件遍历排序，产物确定性 存量收编： - desktop：三个窗口内联 SVG → Icon 组件；tray 裸 rgba → token+opacity - Android：LoginScreen 微信绿常量 → DuduPalette.brandWechat(Press)， Color.White → textOnAccent - 官网 web/index.html：接入 tokens.css，34 处硬编码 hex 全部 var() 化； 深色板块（metrics/cta/footer）改挂 data-theme="dark" 复用 dark 令牌； 移除 Google Fonts CDN - design 包内 8 处裸色：微信绿 token 化、装饰色 ds-ignore 白名单、 同值色改 var() 引用 防漂移闸（零依赖 Node）： - design-pipeline/check-ds.mjs：真相源自检 7 道（dark⊆light / var 链 / 裸色∈tokens 值集 / 组件登记 / icons 唯一 / icon-map 双向同集 / 禁 emoji） - design-pipeline/check-code.mjs：代码侧单源（desktop 禁字面色+内联 path / iOS 禁字面色+SF Symbol 同集 / Android 禁 Color(0x / web 禁字面色）， ds-ignore 行级豁免制 - .githooks/pre-commit（启用：git config core.hooksPath .githooks） - CI design job 扩展为三道闸全绿 - 反向验证通过：注入裸色/孤儿 token/未登记组件/未登记 symbol 均被拦截 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
49 lines
1.8 KiB
React
49 lines
1.8 KiB
React
import { Waveform } from './Waveform';
|
|
import { Icon } from '../core/Icon';
|
|
|
|
const ddMicBarCss = `
|
|
.dd-micbar {
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
width: 100%; height: var(--control-xl); border: none; cursor: pointer;
|
|
border-radius: var(--radius-full);
|
|
font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold);
|
|
user-select: none; -webkit-user-select: none; touch-action: none;
|
|
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
|
|
}
|
|
.dd-micbar--idle { background: var(--accent); color: var(--text-on-accent); }
|
|
.dd-micbar--idle:active { background: var(--accent-press); }
|
|
.dd-micbar--recording { background: var(--positive); color: #fff; }
|
|
.dd-micbar--disabled { background: var(--surface-3); color: var(--text-3); cursor: default; }
|
|
.dd-micbar--quota { background: var(--warning); color: #fff; }
|
|
`;
|
|
|
|
if (typeof document !== 'undefined' && !document.getElementById('dd-micbar-css')) {
|
|
const s = document.createElement('style');
|
|
s.id = 'dd-micbar-css';
|
|
s.textContent = ddMicBarCss;
|
|
document.head.appendChild(s);
|
|
}
|
|
|
|
function DdMicIcon({ size = 20 }) {
|
|
return <Icon name="mic" size={size} />;
|
|
}
|
|
|
|
const DD_MICBAR_LABELS = {
|
|
idle: '按住说话',
|
|
recording: '松开完成 · 上滑取消',
|
|
disabled: '打开 dudu App 登录',
|
|
quota: '今日试用已用完，去购买时长',
|
|
};
|
|
|
|
export function MicBar({ state = 'idle', label, ...rest }) {
|
|
const text = label || DD_MICBAR_LABELS[state] || DD_MICBAR_LABELS.idle;
|
|
return (
|
|
<button type="button" className={`dd-micbar dd-micbar--${state}`} {...rest}>
|
|
{state === 'recording'
|
|
? <Waveform active bars={9} height={18} color="rgba(255,255,255,0.95)" /> /* ds-ignore: accent 底上白波形 95% 派生 */
|
|
: <DdMicIcon />}
|
|
<span>{text}</span>
|
|
</button>
|
|
);
|
|
}
|