feat(design): design/ 真相源 + 防漂移静态闸(#25)

真相源整固:
- 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>
This commit is contained in:
wangjia
2026-07-11 00:05:22 +08:00
parent 4aec0ef6e9
commit 208d0cda12
36 changed files with 1014 additions and 494 deletions
@@ -23,7 +23,6 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
@@ -42,8 +41,6 @@ import app.dudu.wechat.wechatAuth
import kotlinx.coroutines.launch
/** 微信绿——全局唯一例外色(仅登录按钮,见设计核查清单)。 */
private val WechatGreen = Color(0xFF07C160)
private val WechatGreenPress = Color(0xFF06AD56)
/**
* 登录页(13B):居中字标 + 底部微信绿胶囊按钮。
@@ -121,11 +118,11 @@ fun LoginScreen(onLoggedIn: () -> Unit, onBack: () -> Unit) {
.height(56.dp)
.alpha(if (loading) 0.6f else 1f)
.clip(RoundedCornerShape(999.dp))
.background(if (pressed) WechatGreenPress else WechatGreen)
.background(if (pressed) p.brandWechatPress else p.brandWechat)
.clickable(interactionSource = src, indication = null, enabled = !loading) { doLogin() },
contentAlignment = Alignment.Center,
) {
DText(if (loading) "登录中" else "微信一键登录", 16.sp, Color.White, weight = FontWeight.Medium)
DText(if (loading) "登录中" else "微信一键登录", 16.sp, p.textOnAccent, weight = FontWeight.Medium)
}
}
Spacer(Modifier.height(12.dp))
@@ -38,6 +38,8 @@ data class DuduPalette(
val overlayText: Color,
val overlayText2: Color,
val overlayText3: Color,
val brandWechat: Color,
val brandWechatPress: Color,
)
val DuduLightPalette = DuduPalette(
@@ -66,6 +68,8 @@ val DuduLightPalette = DuduPalette(
overlayText = DuduTheme.Light.overlayText,
overlayText2 = DuduTheme.Light.overlayText2,
overlayText3 = DuduTheme.Light.overlayText3,
brandWechat = DuduTheme.Light.brandWechat,
brandWechatPress = DuduTheme.Light.brandWechatPress,
)
val DuduDarkPalette = DuduPalette(
@@ -94,6 +98,8 @@ val DuduDarkPalette = DuduPalette(
overlayText = DuduTheme.Dark.overlayText,
overlayText2 = DuduTheme.Dark.overlayText2,
overlayText3 = DuduTheme.Dark.overlayText3,
brandWechat = DuduTheme.Dark.brandWechat,
brandWechatPress = DuduTheme.Dark.brandWechatPress,
)
val LocalDuduPalette = staticCompositionLocalOf { DuduLightPalette }
@@ -29,6 +29,8 @@ object DuduTheme {
val blue900 = Color(0xFF1E2B6B)
val border1 = Color(0xFFE4E6EB)
val border2 = Color(0xFFD2D5DD)
val brandWechat = Color(0xFF07C160)
val brandWechatPress = Color(0xFF06AD56)
val danger = Color(0xFFDC2626)
val dangerSoft = Color(0xFFFEE2E2)
val gray0 = Color(0xFFFFFFFF)
@@ -50,6 +52,7 @@ object DuduTheme {
val overlayText = Color(0xFFF2F4FA)
val overlayText2 = Color(0xFF9AA3BD)
val overlayText3 = Color(0xFF646E8C)
val overlayWave = Color(0xFF7C9BFF)
val positive = Color(0xFF16A34A)
val positiveSoft = Color(0xFFDCFCE7)
val red100 = Color(0xFFFEE2E2)
@@ -87,6 +90,8 @@ object DuduTheme {
val blue900 = Color(0xFF1E2B6B)
val border1 = Color(0xFF272C38)
val border2 = Color(0xFF343A49)
val brandWechat = Color(0xFF07C160)
val brandWechatPress = Color(0xFF06AD56)
val danger = Color(0xFFF05B5B)
val dangerSoft = Color(0x29F05B5B)
val gray0 = Color(0xFFFFFFFF)
@@ -108,6 +113,7 @@ object DuduTheme {
val overlayText = Color(0xFFF2F4FA)
val overlayText2 = Color(0xFF9AA3BD)
val overlayText3 = Color(0xFF646E8C)
val overlayWave = Color(0xFF7C9BFF)
val positive = Color(0xFF34C46A)
val positiveSoft = Color(0x2934C46A)
val red100 = Color(0xFFFEE2E2)