Axis笔记

外观

3.2 样式调整

约 645 字

前端改版

本页对应「三、操作步骤」的 3.2，把硬编码的色值与间距收敛为统一变量，并按页面检查不同状态下的显示效果，避免改一处崩一片。返回上级：前端交互改版。

前置条件

  • 3.1 的组件替换已通过验证，页面结构稳定。
  • 已确认主题变量的定义位置，例如 /srv/axis/src/styles/variables.css。
  • 已列出需要覆盖的状态：默认、悬停、焦点、禁用、深色模式。

操作步骤

  1. 先盘点硬编码值，统计出现频次最高的色值与间距：
grep -rhoE '#[0-9a-fA-F]{3,6}' /srv/axis/src/styles /srv/axis/src/components \
  | sort | uniq -c | sort -nr | head -n 10
  1. 定义变量并替换硬编码值，保持命名语义化而不是按颜色命名：
cat > /srv/axis/src/styles/variables.css <<'EOF'
:root {
  --color-text: #1f2328;
  --color-text-muted: #59636e;
  --color-border: #d1d9e0;
  --color-accent: #0b6bcb;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
}
EOF
grep -rhoE 'var\(--[a-z0-9-]+\)' /srv/axis/src | sort -u | wc -l
  1. 用变量替换组件内的色值，并核对没有遗漏：
grep -rn --include=*.vue -E '#[0-9a-fA-F]{6}' /srv/axis/src/components | head -n 20
  1. 构建后检查产物中变量是否被正确编译，避免变量未定义导致样式回退：
node build.js --out=/srv/axis/dist-preview
grep -o -- '--color-accent:[^;]*' /srv/axis/dist-preview/assets/*.css | head -n 3

结果确认

  • 组件目录中的硬编码色值数量明显下降，剩余项均为变量定义或必要的例外。
  • 构建产物的 CSS 中包含变量定义，页面实际使用变量的地方没有出现空值。
  • 五个状态逐一检查：悬停与焦点有可见反馈，禁用态不可点击且颜色变淡。
  • 深色模式下文字与背景对比度足够，无不可读区域。

注意事项

  • 不要用 !important 解决样式冲突，冲突往往来自选择器层级或加载顺序，应从结构上修。
  • 变量命名按用途而非色值，换配色时不需要改调用方。
  • 样式改动后至少检查一个长页面与一个表格页面，这两类页面最容易暴露间距问题。
  • 变量收敛完成后锁定定义文件，新增色值先在变量文件里登记，避免硬编码重新扩散。
  • 对比度检查不能只靠肉眼，用工具计算前景色与背景色的对比度，正文低于 4.5:1 视为不合格。
  • 打印样式与读者模式同样会被样式改动影响，改完顺手看一次打印预览。