将前端配色从散落的硬编码/双命名体系(--claude-* / --theme-*)重构为 两层 token 结构(原始层 + 中性语义层),并按"经典抄 Claude、浅色抄 ChatGPT、深色自研"的定位完成三主题填色,同时建立 stylelint 防回退栏杆。 代码大量由 AI 生成的历史遗留配色问题(同语义多值、跨主题塌缩、强调色 撞文字色、fallback 第二真相源等)在此一并收口。 == 一、Token 结构重构(_tokens.scss)== - 重写为两层:原始层 + 语义层;组件只引用中性语义名 (--surface-* / --text-* / --border-* / --accent* / --state-* 等)。 - --claude-* / --theme-* 降级为兼容别名(41 个转发),迁移完成后删除。 - 三主题(classic / light / dark)+ 首屏回退(:root:not([data-theme]), 与经典同值)全部补齐,结构对齐、不再缺项。 == 二、三主题填色 == - 经典 = Claude 官网亮色盘:暖奶油表面阶梯 canvas #faf9f5 < soft #f5f0e8 < card #efe9de < cream-strong #e8e0d2 < 纯白浮起;文字 #141413;hairline #e6dfd8;暖橙 primary #cc785c。 - 浅色 = ChatGPT 亮色盘:冷白 #ffffff / 侧栏 #f9f9f9 / 嵌套 #f3f3f3, 中性灰文字,近黑 primary #181818。 - 深色 = 自研中性灰阶,本轮完全不动(原样保留)。 - 修复塌缩 bug:强调色在 light/dark 原被误填成灰(CTA 失去品牌色), 现统一回品牌 primary;light 表面原全塌成 #ffffff(过于平面), 现按灰阶拉开层次。 - 强调色克制(CTA-only voltage):primary 仅用于发送按钮/logo 等极少 数处;hover / 选中 / 运行态一律走中性灰(运行态指示器从 amber 改灰)。 - 对话区背景从纯白改为暖奶油 canvas;个人空间下拉菜单、git 状态条、 二级菜单等收口到统一语义色。 == 三、全面去半透明 == - 所有实体面板/二级菜单背景改为不透明(surface token 由半透明白改实色, --mobile-menu 三亮色主题改实色)。 - 移除已不透明面板上失效的 backdrop-filter 磨砂(移动端菜单、右键菜单、 模型模式下拉等)。 - 遮罩 scrim(--overlay-scrim)与刻意玻璃质感装饰保留半透明。 == 四、块展开底色统一 == - 思考/工具块展开区底色统一为对话背景色:.collapsible-block 及其 header 背景由 --surface-soft 改 transparent,与堆叠块(stacked-block)一致, 消除"单块奶油底 vs 多块透明"的不一致。 == 五、布局修复 == - 工作区隐藏后残留空白:.workspace-panel--collapsed 补 flex-basis:0 + width/min-width:0,修正 flex-basis:auto 被子元素内容宽度撑开导致内联 width:0 失效、collapsed 后仍占 ~300px 的问题。 == 六、防回退栏杆(新增)== - 新增 .stylelintrc.cjs:三条规则拦截裸 hex / rgb()|hsl() 字面色 / var(--x, fallback) 兜底 / prefers-color-scheme;存量未清理文件用 BASELINE_EXEMPT 临时豁免(现仅剩 5 个 admin 页面,本轮按用户要求不处理), 清理一个移除一个、不再回退。 - package.json:build 脚本接入 stylelint(tsc → stylelint → vite), 新增 lint:css 脚本及 stylelint/postcss-scss/postcss-html 依赖。 - 修复 25 处 \!important 笔误(zsh 历史扩展污染导致的无效 CSS)。 == 七、辅助脚本(新增 scripts/)== - lint_check.py:Node 环境不可用时的 stylelint 替身(复刻三规则 + 括号 校验,支持多行声明检测)。 - color_map.py:硬编码色 → token 反查,判定可映射/野色。 - strip_fallback.py:安全剥离已定义 token 的冗余 fallback。 == 八、文档 == - CLAUDE.md / AGENTS.md 前端设计规范更新:颜色规则扩写为三主题定位 + 两层 token + 表面层次 + 强调色克制 + color-mix 派生 + stylelint 栏杆; 新增"实体面板禁止半透明"规则;"禁止边缘光晕"补充"仅在用户明确允许 或要求时才可使用"。 注:前端构建验证(npm run build / lint:css)由用户本机完成;AI 工具 上下文 Node v24 段错误无法运行 node/npm/vite/stylelint。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
144 lines
5.4 KiB
Python
144 lines
5.4 KiB
Python
#!/usr/bin/env python3
|
||
"""
|
||
lint_check.py —— Node 段错误环境下的 stylelint 替身验证器。
|
||
|
||
复刻 .stylelintrc.cjs 的三条颜色规则 + 基础语法完整性,用于在迁移每个文件后
|
||
确认它已彻底清理干净(可安全从 BASELINE_EXEMPT 移除)。
|
||
|
||
用法:
|
||
python3 scripts/lint_check.py <file1> [file2] ...
|
||
python3 scripts/lint_check.py --all # 扫所有 .scss/.vue(排除永久豁免)
|
||
|
||
规则(与 stylelintrc 对齐):
|
||
R1 color-no-hex : 禁止裸 #hex
|
||
R2 literal-rgb-in-color : 颜色属性值禁止 rgb()/hsl() 字面色
|
||
R3 var-fallback-in-color : 颜色属性值禁止 var(--x, <fallback>)
|
||
R4 prefers-color-scheme : 禁止 @media prefers-color-scheme
|
||
|
||
注意: 只检查 <style> / scss 内容。.vue 文件只扫 <style> 块,跳过 <template>/<script>。
|
||
"""
|
||
import sys, re, os, glob
|
||
|
||
PERMANENT_IGNORE = {
|
||
'static/src/styles/base/_tokens.scss',
|
||
'static/src/styles/components/chat/_virtual-monitor.scss',
|
||
}
|
||
|
||
COLOR_PROP = re.compile(
|
||
r'^\s*(-?\w[\w-]*)?\s*('
|
||
r'color|fill|stroke|background|background-color|border|border-color|'
|
||
r'border-top-color|border-right-color|border-bottom-color|border-left-color|'
|
||
r'box-shadow|outline|outline-color|text-decoration-color|caret-color|'
|
||
r'column-rule-color|stop-color|text-shadow'
|
||
r')\s*:', re.I)
|
||
|
||
HEX = re.compile(r'#[0-9a-fA-F]{3,8}\b')
|
||
RGB = re.compile(r'\b(rgba?|hsla?)\s*\(')
|
||
VARFALLBACK = re.compile(r'var\(\s*--[^,()]+,')
|
||
|
||
def extract_style_blocks(text, is_vue):
|
||
"""返回 [(start_line, block_text)]。vue 只取 <style>,scss 取全文。"""
|
||
if not is_vue:
|
||
return [(1, text)]
|
||
blocks = []
|
||
for m in re.finditer(r'<style[^>]*>(.*?)</style>', text, re.S | re.I):
|
||
start_line = text[:m.start(1)].count('\n') + 1
|
||
blocks.append((start_line, m.group(1)))
|
||
return blocks
|
||
|
||
def strip_comments(s):
|
||
s = re.sub(r'/\*.*?\*/', lambda m: '\n' * m.group(0).count('\n'), s, flags=re.S)
|
||
s = re.sub(r'//[^\n]*', '', s)
|
||
return s
|
||
|
||
def check_text(block_text, base_line):
|
||
errs = []
|
||
clean = strip_comments(block_text)
|
||
clean_lines = clean.splitlines()
|
||
# R1 hex / R4 prefers-color-scheme —— 行级
|
||
for i, line in enumerate(clean_lines):
|
||
ln = base_line + i
|
||
if 'prefers-color-scheme' in line:
|
||
errs.append((ln, 'R4 prefers-color-scheme', line.strip()))
|
||
if HEX.search(line):
|
||
errs.append((ln, 'R1 no-hex', line.strip()))
|
||
# R2/R3 —— 声明级(跨行)。按 ; { } 切成声明段,每段判断是否颜色属性,
|
||
# 段内若含 rgb/hsl 字面色或 var(--x, fallback),把违规行号定位到该 token
|
||
# 实际出现的那一行(声明可能跨多行,stylelint 报的是声明起始行;这里
|
||
# 我们用 token 出现行,足够定位)。
|
||
def line_of(char_idx):
|
||
return base_line + clean.count('\n', 0, char_idx)
|
||
pos = 0
|
||
for m in re.finditer(r'[;{}]', clean):
|
||
seg = clean[pos:m.start()]
|
||
seg_start = pos
|
||
pos = m.end()
|
||
if not COLOR_PROP.search(seg):
|
||
continue
|
||
for vm in VARFALLBACK.finditer(seg):
|
||
errs.append((line_of(seg_start + vm.start()), 'R3 var-fallback', seg.strip()[:80]))
|
||
for rm in RGB.finditer(seg):
|
||
errs.append((line_of(seg_start + rm.start()), 'R2 literal-rgb', seg.strip()[:80]))
|
||
# 处理最后一段(无尾分隔符的残留,通常为空)
|
||
seg = clean[pos:]
|
||
if COLOR_PROP.search(seg):
|
||
for vm in VARFALLBACK.finditer(seg):
|
||
errs.append((line_of(pos + vm.start()), 'R3 var-fallback', seg.strip()[:80]))
|
||
for rm in RGB.finditer(seg):
|
||
errs.append((line_of(pos + rm.start()), 'R2 literal-rgb', seg.strip()[:80]))
|
||
errs.sort(key=lambda e: e[0])
|
||
return errs
|
||
|
||
def syntax_check(text, is_vue):
|
||
"""大括号配对(针对 style 内容)。"""
|
||
blocks = extract_style_blocks(text, is_vue)
|
||
problems = []
|
||
for base, bt in blocks:
|
||
bt2 = strip_comments(bt)
|
||
if bt2.count('{') != bt2.count('}'):
|
||
problems.append(f" 大括号不配对 (block@L{base}): {{={bt2.count('{')} }}={bt2.count('}')}")
|
||
return problems
|
||
|
||
def lint_file(path):
|
||
text = open(path, encoding='utf-8').read()
|
||
is_vue = path.endswith('.vue')
|
||
all_errs = []
|
||
for base, bt in extract_style_blocks(text, is_vue):
|
||
all_errs.extend(check_text(bt, base))
|
||
syn = syntax_check(text, is_vue)
|
||
return all_errs, syn
|
||
|
||
def main():
|
||
args = sys.argv[1:]
|
||
if not args:
|
||
print("用法: python3 scripts/lint_check.py <file...> | --all")
|
||
sys.exit(2)
|
||
if args == ['--all']:
|
||
files = []
|
||
for pat in ('static/src/**/*.scss', 'static/src/**/*.vue'):
|
||
files += glob.glob(pat, recursive=True)
|
||
files = [f for f in files if f.replace('\\', '/') not in PERMANENT_IGNORE]
|
||
else:
|
||
files = args
|
||
total = 0
|
||
for f in sorted(files):
|
||
nf = f.replace('\\', '/')
|
||
if nf in PERMANENT_IGNORE:
|
||
print(f"SKIP (permanent ignore): {f}")
|
||
continue
|
||
errs, syn = lint_file(f)
|
||
if errs or syn:
|
||
print(f"\n✖ {f}")
|
||
for ln, rule, txt in errs:
|
||
print(f" L{ln:<5} {rule:22} | {txt[:80]}")
|
||
for s in syn:
|
||
print(s)
|
||
total += len(errs) + len(syn)
|
||
else:
|
||
print(f"✔ {f}")
|
||
print(f"\n总问题数: {total}")
|
||
sys.exit(1 if total else 0)
|
||
|
||
if __name__ == '__main__':
|
||
main()
|