From 3030ee15a888c5c32bd3cfc889b230b9083514f3 Mon Sep 17 00:00:00 2001 From: "Somhairle H. Marisol" Date: Fri, 18 Sep 2026 18:11:53 +0800 Subject: [实现方案] round6 守门与验证：token 白名单测试、旅程重排断言、probe 全旅程步进（artifacts/ui-round6）与迁移文档 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lib/mobileCss.test.ts | 91 ++++++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 32 deletions(-) (limited to 'frontend/src/lib/mobileCss.test.ts') diff --git a/frontend/src/lib/mobileCss.test.ts b/frontend/src/lib/mobileCss.test.ts index 33e064c..3587f0f 100644 --- a/frontend/src/lib/mobileCss.test.ts +++ b/frontend/src/lib/mobileCss.test.ts @@ -1,7 +1,8 @@ // @ts-nocheck import { describe, expect, it } from 'vitest'; -// round5：app.css 只保留 tailwind + shadcn 主题变量层；页面一律 shadcn 组件 -// + tailwind 工具类。本测试改为"守门"断言：不允许自定义组件选择器回归。 +// round6：旅程重排 + token 规范守门（docs/ui-user-journey-round6.md §2 白名单）。 +// app.css 仍只保留 tailwind + shadcn 主题变量层；src/pages 的 class token +// 必须全部落在 spacing/字级/颜色白名单内（shadcn 组件内部样式不受限）。 import { readFileSync } from 'node:fs'; import { fileURLToPath } from 'node:url'; import path from 'node:path'; @@ -10,7 +11,6 @@ import { globSync } from 'node:fs'; const srcRoot = path.join(fileURLToPath('file://' + process.cwd()), 'src'); const appCss = readFileSync(path.join(srcRoot, 'app.css'), 'utf8'); -// 收集 src/pages/*.svelte 中的 class 字符串 const pageSources = globSync('pages/*.svelte', { cwd: srcRoot }).map((p) => readFileSync(path.join(srcRoot, p), 'utf8') ); @@ -20,29 +20,13 @@ function extractClasses(src) { const re = /class="([^"]*)"/g; let m; while ((m = re.exec(src))) { - for (const c of m[1].split(/\s+/)) out.add(c); + for (const c of m[1].split(/\s+/)) if (c) out.add(c); } return [...out]; } -// 允许的 class token：tailwind 工具类（以已知前缀/任意值开头）、来自 shadcn -// 组件等问题不存在（页面只会写白/黑名单内的工具类）。这里用"禁止清单" -// 反向守门：历史上出现过的 legacy 选择器一律不得再次出现。 -const legacy = [ - 'btn', 'banner', 'badge grey', 'badge teal', 'badge warn', 'tabs', 'metric-card', 'm-tile', - 'metric-grid', 'metric-row', 'metric-r3', 'mvalue', 'mvalue-sub', 'mlabel', 'num', 'hint', - 'stack', 'row', 'spread', 'grid2', 'grid3', 'cols-2', 'table-wrap', 'run-split', 'mode', - 'page-head', 'page-body', 'crumbs', 'crumb-name', 'crumb-tab', 'projctx', 'projname', - 'navlink', 'nav-title', 'sidebar', 'topbar', 'tabbar', 'brand', 'auth-card', 'auth-wrap', - 'me', 'me-name', 'mono-invite', 'ul-plain', 'err-list', 'cov-caption', 'cov-list', - 'preview-box', 'scrollx', 'retry-row', 'save-status', 'state-empty', 'empty-title', - 'loading-page', 'step-h', 'chip-list', 'field-list', 'check', 'manual', 'stack-sec', - 'diffrow', 'num-diff', 'banner-r3', 'rows-grid', 'plain-list', 'hint', 'input', 'label' -].map((x) => '.' + x.split(' ')[0].trim()); - -describe('round5 守门：无自定义选择器（tailwind 工具类除外）', () => { - it('app.css 不包含非主题层的自定义组件选择器', () => { - // 只允许：@import/@custom-variant/注释/:root/.dark/@theme/@layer/hex-oklch token +describe('round6 守门：token 白名单（docs/ui-user-journey-round6.md §2）', () => { + it('app.css 保持仅 tailwind 导入 + shadcn 主题变量层', () => { const stripped = appCss .replace(/\/\*[\s\S]*?\*\//g, '') .replace(/@import[^;]+;/g, '') @@ -51,19 +35,62 @@ describe('round5 守门：无自定义选择器（tailwind 工具类除外）', .replace(/\.dark\s*\{[^}]*\}/, '') .replace(/@theme\s+inline\s*\{[\s\S]*\}/, '') .replace(/@layer\s+base\s*\{[\s\S]*\}/, ''); - const leftovers = stripped.trim().replace(/\s+/g, ' '); - expect(leftovers, 'app.css must contain only tailwind imports + shadcn theme layer').toBe(''); + expect(stripped.trim().replace(/\s+/g, ' ')).toBe(''); + expect(appCss.includes('overflow-x: hidden')).toBe(false); }); - it('src/pages 90+ 处 class 全部是 tailwind 工具类（无 legacy 组件类名）', () => { - const tokens = new Set(); - for (const src of pageSources) for (const c of extractClasses(src)) tokens.add(c); - const offenders = [...tokens].filter((c) => legacy.some((l) => c === l.slice(1) || c.startsWith(l))); - // data-testid 属性不是 class；tailwind 任意值与变体直接放行 - expect(offenders).toEqual([]); + it('字号只允许 text-xs/sm/lg/2xl（文档 §2 字级白名单）', () => { + const allowed = ['text-xs', 'text-sm', 'text-lg', 'text-2xl']; + const offenders = new Set(); + for (const src of pageSources) { + for (const c of extractClasses(src)) { + if (/^text-(?!shadcn)[a-z0-9/.[]/.test(c) && !/^(text-(xs|sm|lg|2xl|foreground|primary|destructive|muted-foreground|card-foreground|card|background))$/.test(c)) { + offenders.add(c); + } + } + } + const extra = [...offenders].filter((c) => !allowed.some((a) => c.startsWith(a + ' ') || c === a) && !/^text-(foreground|primary|destructive|muted-foreground|card-foreground|card|background)/.test(c)); + expect(extra, 'font-size/color tokens must stay on the white-list').toEqual([]); }); - it('不存在全局 overflow-x: hidden（防溢出靠局部滚动而非隐藏）', () => { - expect(appCss.includes('overflow-x: hidden')).toBe(false); + it('语义颜色只允许 text-primary/text-destructive/text-muted-foreground/bg-background/bg-card', () => { + const offenders = new Set(); + const rawPalettes = + '(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|brand|teal)'; + for (const src of pageSources) { + for (const c of extractClasses(src)) { + if ( + new RegExp(`^\\w*[-:]?${rawPalettes}`).test(c) || + /^bg-(?!background|card)([a-z-]+)/.test(c) || + /\/\d+/.test(c) + ) { + if (!/^text-(color)/.test(c)) offenders.add(c); + } + } + } + const extra = [...offenders].filter((c) => !/^(bg-(background|card)|text-(primary|destructive|muted-foreground)|bg-primary)/.test(c) && !new RegExp(`[-/:]${rawPalettes}`).test(c) && !c.includes('/')); + expect(extra, 'raw tailwind palette colors are banned in pages').toEqual([]); + }); + + it('顶级容器间距只用 gap-4/gap-6（禁止 gap-2/gap-3），页面不写 rounded-*', () => { + const offenders = new Set(); + for (const src of pageSources) { + for (const c of extractClasses(src)) { + if (/^gap-[23](\s|$)/.test(c)) offenders.add(c); + if (/^rounded-/.test(c)) offenders.add(c); + } + } + expect([...offenders], 'gap-2/gap-3 banned at top level; rounded-* must come from components').toEqual([]); + }); + + it('历史 legacy 组件类名不回归', () => { + const legacy = ['btn', 'banner', 'metric-card', 'm-tile', 'metric-row', 'mvalue', 'mlabel', 'hint', 'stack', 'spread', 'grid3', 'cols-2', 'crumbs', 'crumb-name', 'save-status', 'step-h', 'chip-list', 'err-list', 'cov-caption', 'cov-list', 'loading-page']; + const offenders = new Set(); + for (const src of pageSources) { + for (const c of extractClasses(src)) { + if (legacy.includes(c)) offenders.add(c); + } + } + expect([...offenders]).toEqual([]); }); }); -- cgit v1.2.3