chore: scaffold monorepo and migrate uhd_web design system (W0-A)
- pnpm workspace: apps/{web,server}, packages/{contracts,db,domain,adapters,tasks,agent,testkit}
- server: Hono + zod-openapi, API Key auth with scopes, redacting pino logger, SSE event bus with replay, worker heartbeat
- db: Kysely + pg, file migrator, 0001_init (settings/api_key/audit_event/outbox_event)
- web: React Router 7 SPA console shell with 12 workspace placeholders, uhd_web tokens/ui/guard scripts
- docs: ADR-001 (Node over Deno), dev runbook, design system rules
Co-Authored-By: Claude Fable 5.1 <[email protected]>
This commit is contained in:
commit
b22c440139
138 files changed
+14455
No files matched your search
Executable
+47
@@ -0,0 +1,47 @@
|
||||
#!/bin/sh
|
||||
# 设计 token 守卫:组件里不许直接写原色、白黑透明度、十六进制或 Tailwind 调色板颜色,一律走语义 token。
|
||||
# 规范见仓库根 docs/design/(design-tokens.md、interface-materials.md、ui-controls.md)。
|
||||
# 在 apps/web 目录下运行;/dev/* 陈列页不在范围内。
|
||||
# 确实需要例外(第三方库的颜色参数等)时,在该行或上一行写 `token-allow: 原因`。
|
||||
set -eu
|
||||
fail=0
|
||||
EXCLUDE='app/routes/dev/'
|
||||
report() {
|
||||
# $1 范围,$2 说明,$3 正则(PCRE);跳过注释行、token-allow 标记的行和它的下一行
|
||||
hits=$(grep -rnP "$3" $1 --include='*.tsx' --include='*.ts' | grep -v "$EXCLUDE" | grep -vP ':\d+:\s*(\*|//|/\*|\{/\*)' || true)
|
||||
hits=$(printf '%s\n' "$hits" | while IFS= read -r hit; do
|
||||
[ -z "$hit" ] && continue
|
||||
file=${hit%%:*}; rest=${hit#*:}; line=${rest%%:*}
|
||||
prev=$((line > 1 ? line - 1 : 1))
|
||||
sed -n "${prev},${line}p" "$file" | grep -q 'token-allow' || printf '%s\n' "$hit"
|
||||
done)
|
||||
if [ -n "$hits" ]; then
|
||||
echo "✗ $2"; echo "$hits" | head -20; fail=1
|
||||
fi
|
||||
}
|
||||
|
||||
# 颜色:全站
|
||||
report app "原色类(bone / ink / gold)只能在 app.css 的 token 定义里出现" '(?<=-)(bone|ink|gold)-\d+\b'
|
||||
report app "white / black 透明度请改写成 wash / on-media-wash / scrim / canvas(透明度留在调用处)" '(?<=-)(?<!font-)(white|black)(/[0-9.]+|/\[[0-9.]+\])?(?![-\w])'
|
||||
report app "Tailwind 调色板颜色请改用状态 token(success / warning / destructive)或无彩 token" '(?<=-)(red|emerald|amber|sky|blue|slate|zinc|gray|green|yellow|orange|rose|violet|indigo|purple|teal|cyan|pink|neutral|stone|lime|fuchsia)-\d{2,3}\b'
|
||||
report app "类名里的十六进制颜色请改用语义 token" '\[#[0-9a-fA-F]{3,8}\]'
|
||||
# 控制台页面连 JS 里的十六进制也不允许
|
||||
report app/routes/console "十六进制颜色请改用语义 token" '(?<![\w&])#[0-9a-fA-F]{6}\b(?![\w-])'
|
||||
|
||||
# 材质:按钮 / 选中态 / 浮层各只有一套,见 docs/design/ui-controls.md
|
||||
report app "按钮不做实心:hover 不填实心 primary / foreground,主操作用 <Button> 默认样式(pill-primary)" 'hover:bg-(primary|foreground|brand-strong)(?![\w/-])'
|
||||
report app "浮层(下拉、菜单、弹窗面板)请用 pg-float,不要手写 shadow-2xl 之类的投影" '(?<![\w-])shadow-2xl(?![\w-])'
|
||||
|
||||
# brand-soft 在两种主题里都是接近底色的淡色,只能当底,不能当字色
|
||||
report app "brand-soft 是底色,不能当文字色;文字用 content-* 或 brand-light" '(?<![\w-])text-brand-soft(?![\w-])'
|
||||
|
||||
# 字号 / 动效 / 圆角
|
||||
report app "字号请用阶梯 token(text-micro … text-display-xl,流式标题按用途命名),不写 text-[Npx]" 'text-\[(clamp\(|[0-9.]+(px|rem)\])'
|
||||
report app "过渡时长请用 duration-micro / base / layout / slow / hero / cinematic" '(?<![\w-])duration-\d+(?![\w-])'
|
||||
report app "缓动请用 ease-standard / spring / spring-soft / sheet / pop" 'ease-\[cubic'
|
||||
report app "圆角:小件用 rounded-tight,不写裸 rounded 或 rounded-[..]" '(?<![\w-])rounded(?![\w-])|rounded-(t-)?\['
|
||||
|
||||
if [ "$fail" -ne 0 ]; then
|
||||
echo "设计 token 检查未通过,见 docs/design/design-tokens.md"; exit 1
|
||||
fi
|
||||
echo "设计 token 检查通过"
|
||||
@@ -0,0 +1,39 @@
|
||||
#!/usr/bin/env node
|
||||
// 从 apps/web/app/app.css 抽出自定义工具类的 token 名,生成 app/lib/design-tokens.generated.ts,
|
||||
// 供 cn() 的 tailwind-merge 登记。不登记的话合并器会把 `text-control` 当成文字颜色、
|
||||
// 和 `text-muted-foreground` 冲突后丢掉字号(2026-09-12 页面级复验抓到的)。
|
||||
// 手动维护登记表会漂移,所以改成生成:改了 app.css 跑 `pnpm gen:tokens`,CI 校验生成物是最新的。
|
||||
import { readFileSync, writeFileSync } from "node:fs";
|
||||
|
||||
const css = readFileSync(new URL("../app/app.css", import.meta.url), "utf8");
|
||||
const pick = (ns) => [
|
||||
...new Set([...css.matchAll(new RegExp(`^\\s*--${ns}-([a-z0-9-]+)\\s*:`, "gm"))].map((m) => m[1])),
|
||||
];
|
||||
const tokens = {
|
||||
fontSizes: pick("text").filter((n) => !/^(xs|sm|base|lg|xl|\dxl)$/.test(n)),
|
||||
eases: pick("ease"),
|
||||
radii: pick("radius"),
|
||||
durations: [...new Set([...css.matchAll(/^@utility duration-([a-z0-9-]+)/gm)].map((m) => m[1]))],
|
||||
};
|
||||
const out = `// 由 scripts/gen-design-tokens.mjs 从 app/app.css 生成,不要手改;改了 app.css 跑 pnpm gen:tokens
|
||||
export const DESIGN_TOKENS = ${JSON.stringify(tokens, null, 2)} as const;
|
||||
`;
|
||||
const target = new URL("../app/lib/design-tokens.generated.ts", import.meta.url);
|
||||
if (process.argv.includes("--check")) {
|
||||
let current = "";
|
||||
try {
|
||||
current = readFileSync(target, "utf8");
|
||||
} catch {}
|
||||
if (current !== out) {
|
||||
console.error("app/lib/design-tokens.generated.ts 已过期,运行 pnpm gen:tokens");
|
||||
process.exit(1);
|
||||
}
|
||||
console.log(
|
||||
`design token 登记表是最新的(字号 ${tokens.fontSizes.length} / 缓动 ${tokens.eases.length} / 圆角 ${tokens.radii.length} / 时长 ${tokens.durations.length})`,
|
||||
);
|
||||
} else {
|
||||
writeFileSync(target, out);
|
||||
console.log(
|
||||
`已生成 app/lib/design-tokens.generated.ts(字号 ${tokens.fontSizes.length} / 缓动 ${tokens.eases.length} / 圆角 ${tokens.radii.length} / 时长 ${tokens.durations.length})`,
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user