← Schema-As-Code / Validation Toolkit

验证闭环 Validation Toolkit

三层验证工具：语义分级器 · JSON 输入 · 快照模板。证明"加了规则后有效"。

🎨 语义分级器 📋 JSON 输入 📄 快照模板

⚡

懒人模式

自动提取

粘贴一段错误文案或描述，系统自动提取关键字段并匹配模式。

请求过于频繁，请稍后再试

自动提取

提取结果

{
  "component_type": "Alert",
  "visual": {
    "color": "yellow",
    "background": "solid",
    "icon": "warning"
  },
  "copy": {
    "title": "Too Many Requests",
    "description": "请求过于频繁，请稍后再试",
    "tone": "urgent"
  },
  "interaction": {
    "dismissible": true,
    "actions": ["wait", "upgrade"]
  },
  "context": "system_error"
}

✓ 自动匹配到模式：ERR-001 (retryable)

粘贴组件语义快照 JSON，系统自动匹配已知模式。

{
  "component_type": "Alert",
  "visual": { "color": "yellow", "background": "solid", "icon": "warning" },
  "copy": { "title": "Too Many Requests", "description": "请求过于频繁，请稍后再试", "tone": "urgent" },
  "interaction": { "dismissible": true, "actions": ["wait", "upgrade"] },
  "context": "system_error"
}

加载示例解析匹配

匹配成功

匹配到模式：ERR-001

错误状态后果差异未分级

查看详情 →

Lint 期：代码静态检查

编译管线 v1 · 实现层的越界能被拦住吗？

契约声明

# ERR-001 v1.1.0
error_severity:
  retryable:
    description: "请求频率已达上限"
    visual_mapping:
      color_token: "status.warning"
      motion_token: "none"
      icon_token: "clock"
    user_action:
      - label: "等待倒计时"
        action: "wait_countdown"
      - label: "升级套餐"
        action: "upgrade"

immutable_boundaries:
  - boundary_type: "safety"
    rule: "禁止所有错误状态共用同一种红色视觉表达"
    violation_action: "block"

违规代码（JSX）

<Alert
  color="#cf1322"           ← 硬编码致命红
  severity="error"          ← 语义级别：error
  icon="warning"
>
  请求过于频繁，请稍后再试
</Alert>

✗ retryable 级别使用 #cf1322（致命红），契约要求 status.warning（黄色）

ESLint 自定义规则执行结果

error severity-color-match

组件 color 与契约声明语义级别不一致

契约声明：retryable → status.warning（#f5a623）

代码实现：color="#cf1322"（status.critical）

字段路径：visual.color

修正建议：color_token="status.warning"

error overlay-reference-only

JSX 中语义属性硬编码、未引用字典绑定

检测到：color="#cf1322"（硬编码颜色值）

契约要求：引用字典绑定，禁止硬编码

修正建议：使用 color_token 替代 color

error no-missing-destructive-confirm

action.destructive 绑定缺二次确认交互

检测结果：当前组件类型为 Alert，未触发 destructive 规则

✓ 未触发（非 destructive 操作）

warning deprecated-reference

引用 deprecated 字典条目

检测结果：未引用任何 deprecated 条目

✓ 未触发

修正后的合规代码

<Alert
  color_token="status.warning"
  severity="retryable"
  icon="clock"
>
  请求频率已达上限
  <Action icon="timer">42分钟后重试</Action>
  <Action icon="upgrade">升级 Plus</Action>
</Alert>

CI 规则定义（编译管线 v1 产出）

# .eslintrc.js — 语义绑定校验规则
module.exports = {
  plugins: ['semantic-pipeline'],
  rules: {
    'semantic-pipeline/severity-color-match': 'error',
    'semantic-pipeline/overlay-reference-only': 'error',
    'semantic-pipeline/no-missing-destructive-confirm': 'error',
    'semantic-pipeline/deprecated-reference': 'warn'
  }
};

# Stylelint 规则（配套）
rules:
  error-severity-color:
    selector: "[data-severity]"
    mapping:
      retryable: { color: "#f5a623", bg: "rgba(245,158,11,0.15)" }
    forbidden: { color: "#cf1322" }
    message: "retryable 不得使用红色"
  overlay-reference-only:
    selector: "[data-semantic]"
    forbidden: { attr: "color", hardcoded: true }
    required: { attr: "color_token" }
    message: "语义属性必须引用字典绑定"

验证口径

契约层合法 ≠ 代码层守法。前端 JSX 硬编码红色、组件 color 与契约语义级别不一致，机器能否在提交时拦住？
✗ 2 个 error 未通过，阻断合入。修正后重新提交。