@qilitt-mickey/vue3-temp-skill 1.2.6 → 1.2.8

package/scripts/generate-css.mjs

@@ -1,405 +1,25 @@
 #!/usr/bin/env node
 
-/**
- * generate-css.mjs —— 契约 → 三份 CSS 的确定性生成器
- *
- * 用法:
- *   node generate-css.mjs --project <项目根> [--adapter vue-element-plus] [--out src/styles]
- *
- * 职责（design-apply 第 3/4/5 步的机器执行版，消灭手抄）:
- *   1. ui-tokens.css  : tokens 族.名 → --族-名 实值 + adapter.roleSupplementVars + adapter.variableBridges
- *   2. ui-roles.css   : roles 逐条翻译 host/inner/states/variants + adapter.extraRules 原样追加
- *   3. ui-layout.css  : layout.regions 按 adapter.layoutBridge 的挂载类与 skipGeometry 翻译
- *
- * 原则: 契约是唯一事实源；本脚本不做任何视觉判断；同一输入必得同一输出（可复现）。
- */
+/** 退役兼容入口：不读取项目、不写文件、不启动浏览器或网络。 */
+import { pathToFileURL } from "node:url";
 
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+const NOTICE = `generate-css.mjs 已退役，拒绝执行旧三 CSS 生成引擎。
+visualStatus=unverified；本入口不提供业务/视觉验收结论。
+请迁移到 references/design-apply.md 和 references/visual-verification.md：
+以原稿为事实源，手写项目视图，逐区域、逐实例、逐状态进行浏览器验收。
+旧 visual-contract 可作为输入复用，但不自动选取契约、不用 adapter 覆盖原稿值、不生成或覆盖样式。`;
 
-const SKILL_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
-
-// ────────────────────────────── 参数
-
-function parseArgs(argv) {
-  const out = { project: process.cwd(), adapter: null, out: null };
-  for (let i = 0; i < argv.length; i++) {
-    const a = argv[i];
-    if (a === "--project" || a === "-p") out.project = path.resolve(argv[++i]);
-    else if (a === "--adapter") out.adapter = argv[++i];
-    else if (a === "--out") out.out = argv[++i];
-  }
-  return out;
-}
-
-// ────────────────────────────── 名称转换（与 check-landing.mjs 的 expectedClassName 完全一致）
-
-function expectedClassName(roleName) {
-  return (
-    "role-" +
-    roleName
-      .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-      .replace(/\./g, "-")
-      .replace(/_/g, "-")
-      .toLowerCase()
-  );
-}
-
-function variantClassName(variantName) {
-  return variantName
-    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-    .replace(/_/g, "-")
-    .toLowerCase();
-}
-
-function tokenVar(tokenRef) {
-  // "color.brand" → "--color-brand"；"space.6" → "--space-6"
-  return "--" + tokenRef.replace(/\./g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-/** 展开值中的 {族.名} 令牌引用 → var(--族-名)；字面量原样（色值统一小写，过 prettier 且保证确定性输出） */
-function expandValue(value, tokenIndex) {
-  return String(value)
-    .replace(/\{([a-zA-Z0-9.]+)\}/g, (m, ref) => {
-      const v = tokenVar(ref);
-      if (!tokenIndex.has(ref)) {
-        // 引用未定义令牌：仍生成 var() 引用（浏览器解析为空时可见），但记入警告
-        warnings.push(`令牌引用未在 tokens 定义: {${ref}} → ${v}（请检查契约或补 roleSupplementVars）`);
-      }
-      return `var(${v})`;
-    })
-    .replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase());
-}
-
-/** camelCase 键 → kebab CSS 属性 */
-function cssProp(key) {
-  if (key.includes("-")) return key;
-  return key.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-const warnings = [];
-
-// ────────────────────────────── 读取
-
-function loadInputs(args) {
-  const designDir = path.join(args.project, ".design");
-  const names = fs.readdirSync(designDir).filter((n) => /^visual-contract.*\.json$/.test(n));
-  if (!names.length) throw new Error(".design/ 下没有 visual-contract-*.json");
-  const contractPath = path.join(designDir, names[0]);
-  const contract = JSON.parse(fs.readFileSync(contractPath, "utf-8"));
-
-  let adapterName = args.adapter;
-  if (!adapterName) {
-    // 从 mapping/<scene>.json 读取
-    const mapPath = path.join(SKILL_DIR, "mapping", `${contract.meta.scene}.json`);
-    if (fs.existsSync(mapPath)) {
-      adapterName = JSON.parse(fs.readFileSync(mapPath, "utf-8")).adapter;
-    }
-  }
-  if (!adapterName) throw new Error("无法确定 adapter（契约场景无 mapping 且未传 --adapter）");
-
-  const adapterPath = path.join(SKILL_DIR, "adapters", `${adapterName}.json`);
-  if (!fs.existsSync(adapterPath)) throw new Error(`adapter JSON 不存在: ${adapterPath}`);
-  const adapter = JSON.parse(fs.readFileSync(adapterPath, "utf-8"));
-
-  return { contract, adapter, contractPath, adapterName };
-}
-
-// ────────────────────────────── ui-tokens.css
-
-function genTokens(contract, adapter) {
-  const L = [];
-  L.push("/**");
-  L.push(" * ui-tokens.css —— 视觉契约令牌层（由 generate-css.mjs 生成，禁止手改）");
-  L.push(` * 事实源: .design/visual-contract 令牌 + adapter(${adapter.adapter}) 桥接段`);
-  L.push(" */");
-  L.push("");
-  L.push(":root {");
-
-  const tokenIndex = new Set();
-  for (const [family, names] of Object.entries(contract.tokens || {})) {
-    L.push(`  /* ===== ${family} 族 ===== */`);
-    for (const [name, def] of Object.entries(names)) {
-      const v = tokenVar(`${family}.${name}`);
-      tokenIndex.add(`${family}.${name}`);
-      L.push(`  ${v}: ${String(def.value).replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase())};`);
-    }
-    L.push("");
-  }
-
-  // 辅助变量（契约 role 声明用到但 tokens 未定义的）
-  if (adapter.roleSupplementVars) {
-    L.push("  /* ===== 辅助变量（adapter.roleSupplementVars） ===== */");
-    for (const [k, v] of Object.entries(adapter.roleSupplementVars)) {
-      if (k.startsWith("$")) continue;
-      tokenIndex.add(k.replace(/^--/, "").replace(/-/g, ".")); // 宽松
-      L.push(`  ${k}: ${String(v).replace(/#[0-9a-fA-F]{3,8}\b/g, (c) => c.toLowerCase())};`);
-    }
-    L.push("");
-  }
-
-  // 桥接段
-  L.push("  /* ==========================================================");
-  L.push("   * 桥接段（adapter.variableBridges）：契约值 → 项目既有变量消费链");
-  L.push("   * ========================================================== */");
-  const regions = (contract.layout && contract.layout.regions) || {};
-  const bridge = adapter.variableBridges || {};
-  for (const group of Object.keys(bridge)) {
-    if (group.startsWith("$")) continue;
-    L.push("");
-    L.push(`  /* -- ${group} -- */`);
-    for (const b of bridge[group]) {
-      let value;
-      if (b.from && b.from.startsWith("layout:")) {
-        // "layout:header.height" → regions.header.height（展开令牌引用）
-        const [region, key] = b.from.slice(7).split(".");
-        const raw = regions[region] && regions[region][key];
-        if (raw == null) {
-          warnings.push(`桥接 layout:${region}.${key} 在契约 layout.regions 中不存在，跳过`);
-          continue;
-        }
-        value = expandValue(raw, tokenIndex);
-      } else if (b.from && b.from.startsWith("--")) {
-        value = `var(${b.from})`;
-      } else {
-        value = expandValue(b.value, tokenIndex);
-      }
-      L.push(`  ${b.var}: ${value}${b.important ? " !important" : ""};`);
-    }
-  }
-
-  L.push("}");
-  L.push("");
-  return { css: L.join("\n"), tokenIndex };
-}
-
-// ────────────────────────────── ui-roles.css
-
-function declBlock(decls, indent, tokenIndex) {
-  const out = [];
-  for (const d of decls) {
-    out.push(`${indent}${cssProp(d.prop)}: ${expandValue(d.value, tokenIndex)};`);
-  }
-  return out;
-}
-
-function genRoles(contract, adapter, tokenIndex) {
-  const L = [];
-  L.push("/**");
-  L.push(" * ui-roles.css —— 视觉契约角色层（由 generate-css.mjs 生成，禁止手改）");
-  L.push(` * 事实源: .design/visual-contract roles + adapter(${adapter.adapter}) 结构等价转换`);
-  L.push(" * 全局文件：禁止 :deep()；inner 穿透用普通后代选择器（adapter.innerTargets）");
-  L.push(" */");
-  L.push("");
-
-  const roles = contract.roles || {};
-  const innerTargets = adapter.innerTargets || {};
-  const stateChannels = adapter.stateChannels || {};
-  const extraRules = adapter.extraRules || {};
-
-  // adapter 映射表的键 = 类名去掉 role- 前缀
-  const bare = (roleName) => expectedClassName(roleName).replace(/^role-/, "");
-  const innerTargetOf = (roleName) => innerTargets[bare(roleName)] || "default";
-
-  for (const [roleName, role] of Object.entries(roles)) {
-    if (roleName.startsWith("$")) continue;
-    const cls = "." + expectedClassName(roleName);
-    L.push(`/* ===== 角色 ${roleName}${role.label ? " · " + role.label : ""} ===== */`);
-
-    // host
-    if (Array.isArray(role.host) && role.host.length) {
-      L.push(`${cls} {`);
-      L.push(...declBlock(role.host, "  ", tokenIndex));
-      L.push("}");
-    }
-
-    // inner
-    if (Array.isArray(role.inner) && role.inner.length) {
-      const target = innerTargetOf(roleName);
-      const sel = target === "default" ? cls : `${cls} ${target}`;
-      L.push(`${sel} {`);
-      L.push(...declBlock(role.inner, "  ", tokenIndex));
-      L.push("}");
-    }
-
-    // 结构键 box/flow/align/span/sticky
-    const structDecls = [];
-    if (role.box) for (const [k, v] of Object.entries(role.box)) structDecls.push({ prop: k, value: v });
-    if (role.flow) for (const [k, v] of Object.entries(role.flow)) structDecls.push({ prop: k, value: v });
-    if (role.align) for (const [k, v] of Object.entries(role.align)) structDecls.push({ prop: k, value: v });
-    if (role.span) for (const [k, v] of Object.entries(role.span)) structDecls.push({ prop: k, value: v });
-    if (role.sticky && role.sticky.position) {
-      structDecls.push({ prop: "position", value: role.sticky.position });
-      if (role.sticky.side) structDecls.push({ prop: role.sticky.side, value: "0" });
-    }
-    if (structDecls.length) {
-      L.push(`${cls} {`);
-      L.push(...declBlock(structDecls, "  ", tokenIndex));
-      L.push("}");
-    }
-
-    // states
-    if (role.states) {
-      for (const [state, decl] of Object.entries(role.states)) {
-        const channel = stateChannels[state] || `:${state}`;
-        // 多通道（逗号分隔）：作为选择器附加段整体展开（如 ".is-disabled, :disabled"）
-        for (const ch of channel.split(",").map((c) => c.trim())) {
-          const hostSel = ch.startsWith(":") ? `${cls}${ch}` : `${cls}${ch}`;
-          if (Array.isArray(decl.host) && decl.host.length) {
-            L.push(`${hostSel} {`);
-            L.push(...declBlock(decl.host, "  ", tokenIndex));
-            L.push("}");
-          }
-          if (Array.isArray(decl.inner) && decl.inner.length) {
-            const target = innerTargetOf(roleName);
-            const innerSel = target === "default" ? hostSel : `${hostSel} ${target}`;
-            L.push(`${innerSel} {`);
-            L.push(...declBlock(decl.inner, "  ", tokenIndex));
-            L.push("}");
-          }
-        }
-      }
-    }
-
-    // variants（整份替换：variant host 覆盖基础 host，inner 同理）
-    if (Array.isArray(role.variants)) {
-      for (const v of role.variants) {
-        const vcls = `${cls}--${variantClassName(v.name)}`;
-        const vhost = [];
-        if (Array.isArray(role.host)) for (const d of role.host) vhost.push(d);
-        if (Array.isArray(v.host)) {
-          for (const d of v.host) {
-            const i = vhost.findIndex((x) => cssProp(x.prop) === cssProp(d.prop));
-            if (i >= 0) vhost[i] = d;
-            else vhost.push(d);
-          }
-        }
-        if (vhost.length) {
-          L.push(`${vcls} {`);
-          L.push(...declBlock(vhost, "  ", tokenIndex));
-          L.push("}");
-        }
-        if (Array.isArray(v.inner) && v.inner.length) {
-          const target = innerTargetOf(roleName);
-          const sel = target === "default" ? vcls : `${vcls} ${target}`;
-          L.push(`${sel} {`);
-          L.push(...declBlock(v.inner, "  ", tokenIndex));
-          L.push("}");
-        }
-      }
-    }
-
-    // extraRules（adapter 的结构等价转换 / 提权段，原样追加——后置覆盖基础翻译）
-    const extras = extraRules[bare(roleName)] || extraRules[expectedClassName(roleName)];
-    if (extras) {
-      L.push(`/* -- adapter 结构等价转换（${adapter.adapter}） -- */`);
-      for (const r of extras) {
-        const emits = Array.isArray(r.emit) ? r.emit : [r.emit];
-        for (const e of emits) L.push(e.trim());
-      }
-    }
-    L.push("");
-  }
-
-  return L.join("\n");
-}
-
-// ────────────────────────────── ui-layout.css
-
-function genLayout(contract, adapter, tokenIndex) {
-  const L = [];
-  L.push("/**");
-  L.push(" * ui-layout.css —— 视觉契约布局层（由 generate-css.mjs 生成，禁止手改）");
-  L.push(` * 事实源: .design/visual-contract layout.regions + adapter(${adapter.adapter}) layoutBridge`);
-  L.push(" */");
-  L.push("");
-
-  const bridge = adapter.layoutBridge || {};
-  const regions = (contract.layout && contract.layout.regions) || {};
-  const areas = new Set((contract.layout?.areas || []).map((a) => a.name));
-  const skipGeometry = bridge.skipGeometry || {};
-  const regionClasses = bridge.regionClasses || {};
-
-  // 壳层
-  const shell = contract.roles?.["shell.shell"];
-  if (shell && bridge.shellClass) {
-    L.push(`/* ===== 内容壳（shell.shell） ===== */`);
-    L.push(`${bridge.shellClass.join(",\n")} {`);
-    L.push(...declBlock(shell.host || [], "  ", tokenIndex));
-    L.push("}");
-    L.push("");
-  }
-
-  for (const [regionName, def] of Object.entries(regions)) {
-    if (!areas.has(regionName)) continue; // 未写入 areas 的区域不生成
-    const sels = regionClasses[regionName] || [`ui-region-${regionName}`].map((c) => `.${c}`);
-    // skipGeometry 用 CSS 属性名；契约键是 camelCase（collapsedWidth）——统一按 cssProp 归一后匹配
-    const skip = new Set((skipGeometry[regionName] || []).map((k) => cssProp(k)));
-    L.push(`/* ===== 区域 ${regionName}（skip: ${[...skip].join(", ") || "无"}） ===== */`);
-    const decls = [];
-    const push = (prop, value) => {
-      if (skip.has(cssProp(prop))) return;
-      decls.push({ prop: cssProp(prop), value: expandValue(value, tokenIndex) });
-    };
-    if (def.width) push("width", def.width);
-    if (def.height) push("height", def.height);
-    if (def.minHeight) push("min-height", def.minHeight);
-    if (def.padding) push("padding", def.padding);
-    if (def.gap) push("gap", def.gap);
-    if (def.bg) push("background-color", def.bg);
-    if (def.display) push("display", def.display);
-    if (def.direction) push("flex-direction", def.direction);
-    if (def.alignItems) push("align-items", def.alignItems);
-    if (def.justifyContent) push("justify-content", def.justifyContent);
-    if (def.position) push("position", def.position);
-    if (def.zIndex) push("z-index", def.zIndex);
-    // 区域角色同名视觉（如 shell.header 的 border-bottom）从契约 roles 合并（同受 skip 过滤）
-    const roleForRegion = contract.roles?.[`shell.${regionName}`];
-    if (roleForRegion && Array.isArray(roleForRegion.host)) {
-      for (const d of roleForRegion.host) {
-        if (skip.has(cssProp(d.prop))) continue;
-        if (!decls.some((x) => x.prop === cssProp(d.prop))) {
-          decls.push({ prop: cssProp(d.prop), value: expandValue(d.value, tokenIndex) });
-        }
-      }
-    }
-    L.push(`${sels.join(",\n")} {`);
-    for (const d of decls) L.push(`  ${d.prop}: ${d.value};`);
-    L.push("}");
-    L.push("");
+export function main(argv = process.argv.slice(2)) {
+  if (argv.length === 1 && (argv[0] === "--help" || argv[0] === "-h")) {
+    console.log(`用法: node generate-css.mjs --help
+${NOTICE}
+仅帮助退出 0；其他调用（包括旧参数或未知参数）均退出 2。`);
+    return 0;
   }
-
-  return L.join("\n");
+  console.error(NOTICE);
+  return 2;
 }
 
-// ────────────────────────────── 主流程
-
-function main() {
-  const args = parseArgs(process.argv.slice(2));
-  const { contract, adapter, contractPath } = loadInputs(args);
-
-  const outDir = path.join(args.project, args.out || adapter.output?.dir || "src/styles");
-  fs.mkdirSync(outDir, { recursive: true });
-
-  const { css: tokensCss, tokenIndex } = genTokens(contract, adapter);
-  const rolesCss = genRoles(contract, adapter, tokenIndex);
-  const layoutCss = genLayout(contract, adapter, tokenIndex);
-
-  fs.writeFileSync(path.join(outDir, "ui-tokens.css"), tokensCss);
-  fs.writeFileSync(path.join(outDir, "ui-roles.css"), rolesCss);
-  fs.writeFileSync(path.join(outDir, "ui-layout.css"), layoutCss);
-
-  console.log(`契约: ${path.relative(args.project, contractPath)}`);
-  console.log(`adapter: ${adapter.adapter}`);
-  console.log(`生成: ${path.relative(args.project, outDir)}/ui-tokens.css  ui-roles.css  ui-layout.css`);
-  const roleCount = Object.keys(contract.roles || {}).filter((k) => !k.startsWith("$")).length;
-  console.log(`角色 ${roleCount} 个全部翻译；令牌族 ${Object.keys(contract.tokens || {}).join("/")}`);
-  if (warnings.length) {
-    console.log("");
-    console.log("警告（不阻塞，但需回查）:");
-    for (const w of [...new Set(warnings)]) console.log(`  - ${w}`);
-  }
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  process.exitCode = main();
 }
-
-main();

package/scripts/match.py

@@ -96,22 +96,41 @@ def print_result(result):
 
 
 def batch():
-    """Regression scenarios — ASCII labels only (Windows console safe)."""
+    """Assert routing and resource availability; fail on a regression."""
     scenarios = [
-        ("customer-crud-detail", "客户管理列表，按名称和状态查询，跳转详情"),
-        ("dashboard-echarts", "仪表盘展示 ECharts 趋势图"),
-        ("workflow-bpmn", "审批流程 BPMN 页面"),
-        ("mobile-h5-list", "移动端客户 H5 列表"),
-        ("file-upload-export", "附件上传、预览和导出"),
-        ("edit-data-compare", "编辑页增加数据变更对比"),
+        ("customer-crud-detail", "客户管理列表，按名称和状态查询，跳转详情", {"page-crud", "page-detail"}, {"design-apply"}),
+        ("dashboard-echarts", "仪表盘展示 ECharts 趋势图", {"visualization"}, set()),
+        ("workflow-bpmn", "审批流程 BPMN 页面", {"workflow"}, set()),
+        ("mobile-h5-list", "移动端客户 H5 列表", {"realtime-and-mobile", "page-crud"}, set()),
+        ("file-upload-export", "附件上传、预览和导出", {"files-and-editors"}, set()),
+        ("edit-data-compare", "编辑页增加数据变更对比", {"data-compare", "page-detail"}, set()),
+        ("two-skills", "/project-ui-design 按照设计效果进行还原落地到项目中\n/vue3-temp-skill 代码规范按照此要求", {"design-apply"}, set()),
+        ("pixel-restore", "按图逐像素还原此页", {"design-apply"}, set()),
+        ("raw-mockup", "按这个效果图做，保持原有业务", {"design-apply"}, set()),
+        ("new-handoff", "落地 ui.design-handoff/1.0", {"design-apply"}, set()),
+        ("old-contract", "复用 visual-contract 设计文件", {"design-apply"}, set()),
+        ("api-contract", "更新 API 契约和响应类型", {"data-service"}, {"design-apply"}),
+        ("git-restore", "git 还原这个文件", set(), {"design-apply"}),
     ]
     manifest = load_manifest()
+    root = SCRIPT_DIR.parent
+    for group in manifest["modules"].values():
+        for module_id in group["load"]:
+            if not (root / "references" / f"{module_id}.md").is_file():
+                raise AssertionError(f"Missing reference: {module_id}")
     print(f"match batch: {len(scenarios)} scenarios")
-    for label, text in scenarios:
+    for label, text, required, forbidden in scenarios:
         result = run(text, manifest)
-        groups = ", ".join(x["id"] for x in result["matched"]) or "core-kernel"
-        print(f"  [{label}] -> {groups}")
-    print(f"OK {len(scenarios)}/{len(scenarios)} scenarios")
+        groups = {item["id"] for item in result["matched"]}
+        if not required.issubset(groups) or forbidden.intersection(groups):
+            raise AssertionError(f"{label}: expected {required}, excluded {forbidden}, got {groups}")
+        files = result["load_files"]
+        if files[0] != "references/core-kernel.md" or "references/code-quality.md" not in files or len(files) != len(set(files)):
+            raise AssertionError(f"{label}: invalid reference order or duplicates")
+        if "design-apply" in groups and "references/visual-verification.md" not in files:
+            raise AssertionError(f"{label}: missing visual verification")
+        print(f"  [{label}] -> {', '.join(sorted(groups)) or 'core-kernel'}")
+    print(f"OK {len(scenarios)}/{len(scenarios)} scenarios; all references exist")
 
 
 def main():

package/scripts/modules.json

@@ -100,9 +100,9 @@
       "packages": []
     },
     "design-apply": {
-      "description": "视觉契约落地：读契约 → 选 adapter → 生成令牌/角色/布局三份 CSS → 挂载目视对照",
-      "load": ["design-apply", "code-quality"],
-      "keywords": ["视觉契约", "契约", "visual-contract", "设计落地", "设计稿", "效果图还原", "UI还原", "换肤", "改主题", "全系统风格", "设计文件", "adapter", "角色样式"],
+      "description": "设计还原：固定原稿 → 保留项目业务 → 调整视图与样式 → 逐区域视觉及功能验证",
+      "load": ["design-apply", "visual-verification", "code-quality"],
+      "keywords": ["project-ui-design", "design-handoff", "视觉契约", "visual-contract", "设计还原", "视觉还原", "设计落地", "设计稿", "设计效果", "效果图", "按图", "逐像素", "UI还原", "UI改版", "外观改版", "换肤", "改主题", "全系统风格", "设计文件"],
       "packages": []
     }
   }