@agile-team/wl-skills-kit 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## [1.0.0] - 2026-04-08
+
+### 初始发布
+
+- 5 个 AI Skills（prototype-scan / api-contract / page-codegen / menu-sync / convention-extract）
+- page-codegen 含 9 个独立模板（TPL-LIST / TPL-FORM-ROUTE / TPL-MASTER-DETAIL / TPL-TREE-LIST / TPL-DETAIL-TABS / TPL-CHANGE-HISTORY / TPL-RECORD-FORM / TPL-OPERATION-STATION / TPL-DRIVEN）
+- 12 个平台组件 API 文档（jh-select / jh-date / jh-drag-row 等）
+- 通用组件（global 6 个 + local 4 个 + remote 5 个 README）
+- 类型桶文件 src/types/page.ts
+- 领域样例 demo/（produce 8 页 + sale 5 页）
+- CLI 工具 bin/wl-skills.js（--dry-run 预览）

package/README.md

@@ -0,0 +1,328 @@
+# @agile-team/wl-skills-kit
+
+**AI Skill 模板包** — 一条命令，将 AI 编码指令、组件文档、通用组件、领域样例导入到你的 Vue 3 前端项目。
+
+让 AI（Copilot / Cursor / Windsurf 等）**直接理解你的项目规范和组件体系**，从 Axure 原型 / 详细设计文档 → 生成可运行的完整页面代码。
+
+---
+
+## 快速开始
+
+```bash
+# 在你的项目根目录执行（无需安装，直接运行）
+npx @agile-team/wl-skills-kit
+
+# 预览将写入哪些文件（不实际写入）
+npx @agile-team/wl-skills-kit --dry-run
+
+# 更新到最新版
+npx @agile-team/wl-skills-kit@latest
+```
+
+就这样。108 个文件按原始路径导入到你的项目，**无其他副作用**。
+
+---
+
+## 导入了什么？
+
+执行后你的项目会新增以下内容：
+
+```
+你的项目/
+├── .github/
+│   ├── copilot-instructions.md          ← AI 自动加载的编码规范（项目总纲）
+│   ├── skills/                          ← 5 个 AI Skill
+│   │   ├── prototype-scan/SKILL.md      ←   ① 原型扫描（Axure HTML / 详设文档 → page-spec JSON）
+│   │   ├── api-contract/SKILL.md        ←   ② 接口约定（page-spec → api.md）
+│   │   ├── page-codegen/               ←   ③ 页面代码生成
+│   │   │   ├── SKILL.md                ←     主规则文件（约束 + 规范）
+│   │   │   ├── TPL-LIST.md             ←     标准列表页模板
+│   │   │   ├── TPL-FORM-ROUTE.md       ←     复杂表单独立路由模板
+│   │   │   ├── TPL-MASTER-DETAIL.md    ←     主从表模板
+│   │   │   ├── TPL-TREE-LIST.md        ←     左树右列表模板
+│   │   │   ├── TPL-DETAIL-TABS.md      ←     详情 Tab + 子表模板
+│   │   │   ├── TPL-CHANGE-HISTORY.md   ←     变更历史比对模板
+│   │   │   ├── TPL-RECORD-FORM.md      ←     录入型实绩页模板
+│   │   │   ├── TPL-OPERATION-STATION.md←     工序操作站模板
+│   │   │   └── TPL-DRIVEN.md           ←     配置驱动模板识别参考
+│   │   ├── menu-sync/SKILL.md           ←   ④ 菜单同步（pages.ts → 后端菜单表）
+│   │   └── convention-extract/SKILL.md  ←   ⑤ 规范提炼（扫描源码 → 编码规范文档）
+│   └── docs/                            ← 设计文档
+│       ├── use-skill.md                 ←   Skill 使用 + 移植一站式指南
+│       ├── menu-sync-design.md          ←   菜单同步方案设计
+│       ├── SYS_MENU_INFO.md             ←   菜单注册记录模板
+│       └── wl-skills-kit.md             ←   本包详细设计文档
+│
+├── docs/                                ← 12 个平台组件 API 文档
+│   ├── request.md                       ←   getAction / postAction 等 HTTP 工具
+│   ├── page-query-hook-best-practices.md ←  AbstractPageQueryHook 最佳实践
+│   ├── jh-select.md                     ←   下拉选择组件
+│   ├── jh-date.md / jh-date-range.md    ←   日期 / 日期范围选择
+│   ├── jh-drag-row.md                   ←   上下分栏拖拽组件
+│   ├── jh-pagination.md                 ←   分页组件
+│   ├── jh-file-upload.md                ←   文件上传
+│   ├── jh-text.md                       ←   文本翻译
+│   ├── jh-picker.md                     ←   通用选择器
+│   ├── jh-user-picker.md                ←   用户选择器
+│   └── jh-dept-picker.md                ←   部门选择器
+│
+├── src/
+│   ├── components/
+│   │   ├── global/                      ← 6 个全局自动注册组件
+│   │   │   ├── C_Splitter/              ←   左右分割面板
+│   │   │   ├── C_Tree/                  ←   带搜索的树形面板
+│   │   │   ├── C_TagStatus/             ←   状态标签（彩色 Tag）
+│   │   │   ├── C_ParentView/            ←   父级视图容器
+│   │   │   ├── C_SvgIcon/               ←   SVG 图标
+│   │   │   └── C_RightToolbar/          ←   右侧工具栏
+│   │   ├── local/                       ← 4 个按需导入组件
+│   │   │   ├── c_formModal/             ←   通用表单弹窗（add/edit/view 三模式）
+│   │   │   ├── c_formSections/          ←   表单分区组件
+│   │   │   ├── c_listModal/             ←   列表选择弹窗
+│   │   │   └── c_spliterTitle/          ←   分栏标题
+│   │   └── remote/                      ← 5 个远程组件 README（API 文档）
+│   │       ├── BaseQuery/               ←   声明式查询区
+│   │       ├── BaseTable/               ←   声明式表格
+│   │       ├── BaseToolbar/             ←   声明式工具栏
+│   │       ├── BaseForm/                ←   声明式表单
+│   │       └── AGGrid/                  ←   高性能数据网格
+│   └── types/
+│       └── page.ts                      ← 类型桶文件（统一 re-export）
+│
+└── demo/                                ← 13 个领域样例页面（AI 学习 + 开发参考）
+    ├── README.md                        ←   样例索引 + 模板类型标注
+    ├── produce/aiflow/                  ←   生产域 8 个页面
+    │   ├── mmwr-customer-archive/       ←     LIST + Tabs + c_formModal
+    │   ├── mmwr-temp-customer-archive/  ←     LIST
+    │   ├── mmwr-customer-apply-add/     ←     LIST
+    │   ├── mmwr-customer-apply-add-form/←     FORM_ROUTE
+    │   ├── mmwr-customer-apply-change/  ←     LIST
+    │   ├── mmwr-customer-apply-change-form/ ← FORM_ROUTE
+    │   ├── mmwr-customer-apply-change-history/ ← CHANGE_HISTORY
+    │   └── mmwr-customer-detail/        ←     DETAIL_TABS
+    └── sale/demo/                       ←   销售域 5 个页面
+        ├── domestic-trade-order/        ←     LIST 标准列表
+        ├── metallurgical-spec/          ←     MASTER_DETAIL 上下分栏
+        ├── add-demo/                    ←     FORM_ROUTE 表单页
+        ├── billet-flame-cut-plan/       ←     LIST 变体
+        └── heat-batch-return/           ←     LIST + 自定义弹窗
+```
+
+---
+
+## 核心价值：5 个 AI Skill
+
+安装后，AI 编辑器自动识别这些 Skill，形成完整的**原型 → 代码**流水线：
+
+```
+  Axure 原型 / 详设文档
+         │
+         ▼
+  ① prototype-scan ─── 扫描 → page-spec JSON（结构化页面描述）
+         │
+         ▼
+  ② api-contract ───── 生成 → api.md（前后端接口约定）
+         │
+         ▼
+  ③ page-codegen ───── 生成 → index.vue + data.ts + index.scss + api.md + mock
+         │                     （4 文件/页 + pages.ts 注册 + mock 数据）
+         ▼
+  ④ menu-sync ──────── 同步 → 后端菜单表（AI 自动调 API 创建菜单）
+                       
+  ⑤ convention-extract  一次性：扫描项目源码 → 生成编码规范文档
+```
+
+### 支持 9 种页面模板
+
+| 模板 | 模式 | 说明 |
+|------|------|------|
+| TPL-LIST | LIST | 查询 + 工具栏 + 表格 + 分页 |
+| TPL-FORM-ROUTE | FORM_ROUTE | 复杂表单（多 Tab、多子表）独立路由 |
+| TPL-MASTER-DETAIL | MASTER_DETAIL | jh-drag-row 上下分栏主从表 |
+| TPL-TREE-LIST | TREE_LIST | C_Splitter 左树 + 右列表 |
+| TPL-DETAIL-TABS | DETAIL_TABS | 上方表单 + 下方 Tab 子表 |
+| TPL-CHANGE-HISTORY | CHANGE_HISTORY | 左变更时间线 + 右字段比对 |
+| TPL-RECORD-FORM | RECORD_FORM | 查询 + 表单录入（无分页） |
+| TPL-OPERATION-STATION | OPERATION_STATION | 待处理 + 已处理联动操作 |
+| TPL-DRIVEN | TEMPLATE_DRIVEN | 配置驱动模板页识别参考 |
+
+---
+
+## 使用方式
+
+### 方式一：完整流程（Axure 原型 → 代码）
+
+> 最推荐。一个模块 5-8 个页面，约 5-10 分钟出完整代码。
+
+**对 AI 说**：
+
+```
+帮我扫描 C:\Users\xxx\原型包\ 下的所有HTML
+```
+
+AI 自动执行 5 步：扫描 → 生成接口约定 → 生成页面代码 → 注册路由 → 创建菜单。
+
+### 方式二：详设文档 → 代码（更高精度）
+
+**对 AI 说**：
+
+```
+按照这份详设文档帮我生成页面
+
+## 前置声明
+- 业务域/模块：生产 > 生产棒线材 > AI流程
+- 服务前缀：/mmwr/
+- 页面清单：客户档案、临时客户档案
+```
+
+详设文档中明确写出字段英文名和字典 code，精度可达 95-100%。
+
+### 方式三：碎片化使用（按需调用单个 Skill）
+
+| 你想做什么 | 对 AI 说 | 触发的 Skill |
+|-----------|---------|-------------|
+| 扫描原型，输出页面清单 | "扫描这些原型" | prototype-scan |
+| 给页面生成接口文档 | "生成 api.md" | api-contract |
+| 只生成单个页面代码 | "帮我生成客户档案页面" | page-codegen |
+| 把 pages.ts 同步到菜单表 | "帮我创建菜单" | menu-sync |
+| 扫描项目提炼编码规范 | "提炼项目规范" | convention-extract |
+| 查看组件怎么用 | "jh-select 怎么用" | AI 读取 docs/jh-select.md |
+| 参考样例写代码 | "参考 demo 里的客户档案" | AI 读取 demo/ 下的代码 |
+
+### 方式四：新项目初始化
+
+```bash
+# 1. 创建项目后，导入 Skill 体系
+npx @agile-team/wl-skills-kit
+
+# 2. 对 AI 说 "提炼项目规范"
+#    → 自动扫描你的代码生成 copilot-instructions.md
+
+# 3. 改写 page-codegen 模板（替换基类、组件、API 调用方式）
+#    → 详见 .github/docs/use-skill.md 第四章
+
+# 4. 开始使用：发 Axure 原型给 AI
+```
+
+---
+
+## 安装行为说明
+
+| ✅ 会做                             | ❌ 不会做                    |
+| ----------------------------------- | ---------------------------- |
+| 写入 `.github/` `docs/` `src/` `demo/` | 不修改 `package.json`      |
+| 已存在的同名文件会被覆盖           | 不修改 `node_modules/`       |
+| 自动创建不存在的目录               | 不执行 postinstall           |
+|                                     | 不删除任何文件               |
+
+### 安全路径（不会被覆盖）
+
+以下路径不在分发范围，本地修改永远安全：
+
+```
+.github/skills/my-domain-skill/   ← 自定义 Skill
+.github/docs/my-domain-doc.md     ← 自定义文档
+src/components/local/my_custom/    ← 自定义组件
+src/views/                         ← 业务页面代码
+mock/                              ← Mock 数据
+```
+
+---
+
+## 注意事项
+
+### 1. Skill 生成代码的前置依赖
+
+AI 生成的代码依赖以下包，**首次使用前请确认已安装**：
+
+```bash
+# 核心依赖（项目大概率已有）
+vue / vue-router / element-plus / @jhlc/common-core
+
+# 易遗漏的依赖
+pnpm add -D mockjs vite-plugin-mock    # Mock 数据支持
+pnpm add lodash-es                      # RECORD_FORM 模板用到 debounce
+pnpm add xlsx                           # 仅导出/导入功能需要
+```
+
+> ⚠️ `lodash` ≠ `lodash-es`，模板代码 import 的是 ESM 版 `lodash-es`，必须单独安装。
+
+### 2. Vite 配置检查
+
+确保 `vite.config.ts` 已注册 mock 插件：
+
+```typescript
+import { viteMockServe } from "vite-plugin-mock";
+// plugins 中添加：
+viteMockServe({ mockPath: "./mock", enable: command === "serve" })
+```
+
+### 3. 类型桶文件
+
+`src/types/page.ts` 统一 re-export 以下类型，避免在 data.ts 中写长路径 import：
+
+```typescript
+import { AbstractPageQueryHook, BaseQueryItemDesc, ActionButtonDesc, TableColumnDesc, BusLogicDataType } from "@/types/page";
+```
+
+### 4. menu-sync 的 env.local.json
+
+菜单同步需要网关地址和 Token，首次使用时按 `.github/skills/menu-sync/env/guide.md` 填写：
+
+```
+.github/skills/menu-sync/env/env.local.json  ← 本地维护，已 gitignore
+```
+
+### 5. 更新策略
+
+```bash
+# 拉取最新模板（会覆盖内置文件，不动安全路径）
+npx @agile-team/wl-skills-kit@latest
+```
+
+- **通用改进** → 提 PR 到 wl-skills-kit 仓库，合并后所有项目受益
+- **领域专有** → 放在安全路径下，永远不会被覆盖
+
+---
+
+## 技术栈适配
+
+当前模板基于以下技术栈：
+
+| 层面 | 技术 |
+|------|------|
+| 框架 | Vue 3.2 + Vite + TypeScript |
+| UI | Element Plus + @jhlc/jh-ui + @jhlc/common-core |
+| 状态 | Pinia |
+| 样式 | Windi CSS + SCSS |
+| 架构 | Module Federation 子应用 |
+| 页面模式 | AbstractPageQueryHook 配置化驱动 |
+
+> 移植到其他技术栈项目需改写 page-codegen 模板，详见 `.github/docs/use-skill.md` 第四章。
+
+---
+
+## 贡献
+
+```bash
+git clone git@github.com:ChenyCHENYU/wl-skills-kit.git
+cd wl-skills-kit
+# 修改 files/ 下的内容
+npx . --dry-run    # 本地预览
+# 提 PR → Review → 合并 → npm publish
+```
+
+### 可贡献内容
+
+| 类型 | 路径 | 说明 |
+|------|------|------|
+| Skill 修复 | `files/.github/skills/` | 修正生成规则或模板 bug |
+| 组件文档 | `files/docs/` | 新增或更新 jh-* 文档 |
+| 领域样例 | `files/demo/{domain}/` | 各业务域贡献真实页面样例 |
+| 通用组件 | `files/src/components/` | 新增可复用组件 |
+
+---
+
+## License
+
+MIT

package/bin/wl-skills.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+/**
+ * wl-skills-kit CLI
+ *
+ * 功能：将 files/ 目录下的所有文件按原始路径拷贝到当前工作目录。
+ * 用法：npx @agile-team/wl-skills-kit [--dry-run]
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const FILES_DIR = path.resolve(__dirname, "..", "files");
+const TARGET_DIR = process.cwd();
+const args = process.argv.slice(2);
+const dryRun = args.includes("--dry-run");
+const showHelp = args.includes("--help") || args.includes("-h");
+
+if (showHelp) {
+  console.log(`
+  wl-skills-kit — AI Skill 模板包
+
+  用法:
+    npx @agile-team/wl-skills-kit           安装/更新模板文件到当前项目
+    npx @agile-team/wl-skills-kit --dry-run  预览将要写入的文件（不实际写入）
+
+  安装后写入:
+    .github/    AI 指令 + Skills + 文档
+    docs/       组件 API 文档
+    src/        通用组件 + 类型定义
+    demo/       领域样例（AI 学习参考）
+  `);
+  process.exit(0);
+}
+
+/**
+ * 递归遍历目录，返回所有文件的相对路径
+ */
+function walkDir(dir, baseDir, fileList) {
+  fileList = fileList || [];
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walkDir(fullPath, baseDir, fileList);
+    } else {
+      fileList.push(path.relative(baseDir, fullPath));
+    }
+  }
+  return fileList;
+}
+
+// 主逻辑
+console.log("");
+console.log("  wl-skills-kit v" + require("../package.json").version);
+console.log("  目标目录: " + TARGET_DIR);
+console.log("");
+
+if (!fs.existsSync(FILES_DIR)) {
+  console.error("  ✖ files/ 目录不存在，包可能已损坏");
+  process.exit(1);
+}
+
+const files = walkDir(FILES_DIR, FILES_DIR);
+
+if (dryRun) {
+  console.log("  --dry-run 模式，以下文件将被写入:\n");
+  for (const file of files) {
+    const targetPath = path.join(TARGET_DIR, file);
+    const exists = fs.existsSync(targetPath);
+    console.log("  " + (exists ? "覆盖" : "新增") + "  " + file);
+  }
+  console.log("\n  共 " + files.length + " 个文件（未实际写入）");
+  process.exit(0);
+}
+
+let created = 0;
+let updated = 0;
+
+for (const file of files) {
+  const src = path.join(FILES_DIR, file);
+  const dest = path.join(TARGET_DIR, file);
+  const destDir = path.dirname(dest);
+
+  // 确保目标目录存在
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true });
+  }
+
+  const exists = fs.existsSync(dest);
+  fs.copyFileSync(src, dest);
+
+  if (exists) {
+    updated++;
+  } else {
+    created++;
+  }
+}
+
+console.log("  ✔ 完成!");
+console.log("    新增: " + created + " 个文件");
+console.log("    覆盖: " + updated + " 个文件");
+console.log("    总计: " + files.length + " 个文件");
+console.log("");

package/files/.github/copilot-instructions.md

@@ -0,0 +1,211 @@
+# 产品化前端编码指令
+
+> 本文件由 AI 编辑器自动加载（VS Code Copilot / Cursor / Windsurf 等），确保生成代码符合项目规范。
+> **前置要求**：AI 首次进入项目时，建议先阅读 `README.md` 了解产品化架构全景。后续对话中依赖本文件的规范约定即可，无需重复扫描。
+
+## 架构
+
+- Vue 3.2 + Vite + TypeScript（strict: false）
+- Module Federation **子应用**，路由/权限/布局/Store 从主应用 `main` 远程加载
+- UI：Element Plus + @jhlc/jh-ui + @jhlc/common-core
+- 样式：Windi CSS + SCSS
+- 状态：Pinia
+- 页面注册：`vite/plugins/shared/pages.ts` 通过 `gProd()` / `gSale()` 声明
+- 菜单路由配置：后端菜单表是唯一数据源。pages.ts 注册组件后，需在系统管理后台 → 菜单管理 → 新增菜单。批量新增页面时可用后端 batchImport 接口，详见 `.github/docs/menu-sync-design.md`
+
+## 页面标准结构（4 文件）
+
+```
+src/views/[域]/[模块]/[子模块]/[kebab-case目录]/
+├── index.vue    ← 纯模板+解构，不写业务逻辑
+├── data.ts      ← AbstractPageQueryHook 类 + API_CONFIG
+├── index.scss   ← 页面样式（可为空）
+└── api.md       ← 接口约定（前端预留 + 后端出接口依据）
+```
+
+弹窗组件处理策略：
+
+- **通用弹窗**（新增/编辑表单，2+ 页面可复用）→ 提取到 `src/components/local/c_xxxModal/`
+- **极个性弹窗**（仅单页面使用，c_modal 无法满足）→ 放在页面 `components/xxxModal.vue`
+
+## data.ts 核心模式
+
+> 配置化驱动，通过 `API_CONFIG` + `class extends AbstractPageQueryHook` 实现零 API 层开发。
+> 基类内置 `getAction`/`postAction`/`putAction`/`deleteAction`/`actionBatch` 等 HTTP 方法（详见 `docs/request.md`），标准 CRUD 无需独立 API 文件。
+
+```typescript
+import { AbstractPageQueryHook } from "@jhlc/common-core/src/page-hooks/page-query-hook.ts";
+import { BaseQueryItemDesc } from "@jhlc/common-core/src/components/form/base-query/type.ts";
+import { ActionButtonDesc } from "@jhlc/common-core/src/components/toolbar/type.ts";
+import { TableColumnDesc } from "@jhlc/common-core/src/components/table/base-table/type.ts";
+import { BusLogicDataType } from "@jhlc/types/src/logical-data";
+import { getAction, postAction } from "@jhlc/common-core/src/api/action";
+
+export const API_CONFIG = {
+  list: "/[服务缩写]/[资源名]/list",
+  remove: "/[服务缩写]/[资源名]/remove",
+  getById: "/[服务缩写]/[资源名]/getById",
+  save: "/[服务缩写]/[资源名]/save",
+  update: "/[服务缩写]/[资源名]/update",
+  export: "/[服务缩写]/[资源名]/export"
+} as const;
+
+export function createPage(addModalRef?: any) {
+  let Page = new (class extends AbstractPageQueryHook {
+    constructor() {
+      super({ url: { list: API_CONFIG.list, remove: API_CONFIG.remove } });
+    }
+    queryDef(): BaseQueryItemDesc<any>[] {
+      return [
+        { name: "fieldName", label: "字段名", placeholder: "请输入" },
+        {
+          name: "status",
+          label: "状态",
+          logicType: BusLogicDataType.dict,
+          logicValue: "dictCode"
+        }
+      ];
+    }
+    toolbarDef(): ActionButtonDesc[] {
+      return [
+        {
+          name: "primary",
+          label: "新增",
+          plain: true,
+          onClick: () => addModalRef?.value?.open()
+        }
+      ];
+    }
+    columnsDef(): TableColumnDesc<any>[] {
+      return [
+        { type: "selection" },
+        { type: "index" },
+        {
+          label: "字段名",
+          name: "fieldName",
+          minWidth: 120,
+          sortable: true,
+          filterable: true
+        },
+        {
+          label: "状态",
+          name: "status",
+          minWidth: 100,
+          logicType: BusLogicDataType.dict,
+          logicValue: "dictCode",
+          sortable: true,
+          filterable: true
+        }
+      ];
+    }
+  })();
+  return Page.create() as any;
+}
+```
+
+## index.vue 标准模板
+
+```vue
+<template>
+  <div class="app-container app-page-container">
+    <BaseQuery
+      :form="queryParam"
+      :items="queryItems"
+      @select="select"
+      @reset="select"
+    />
+    <BaseToolbar :items="toolbars" />
+    <BaseTable ref="tableRef" :data="list" :columns="columns" showToolbar />
+    <jh-pagination
+      v-show="page.total && page.total > 0"
+      :total="page.total || 0"
+      v-model:currentPage="page.current"
+      v-model:pageSize="page.size"
+      @current-change="select"
+      @size-change="select"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createPage } from "./data";
+
+const Page = createPage();
+const {
+  tableRef,
+  page,
+  queryParam,
+  list,
+  queryItems,
+  columns,
+  toolbars,
+  select
+} = Page;
+
+onMounted(() => select());
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
+```
+
+## 命名规范
+
+| 位置         | 规范                    | 示例                             |
+| ------------ | ----------------------- | -------------------------------- |
+| 目录/路由    | kebab-case              | `ompt-mill-plan/`                |
+| pages.ts     | `["kebab名", "中文名"]` | `["ompt-mill-plan", "轧钢计划"]` |
+| 字段名       | camelCase               | `orderNo`, `planStatus`          |
+| logicValue   | camelCase               | `planStatus`, `plineCode`        |
+| 全局组件     | `C_PascalCase/`         | `C_Tree/`                        |
+| 局部公共组件 | `c_camelCase/`          | `c_modal/`、`c_detailPanel/`     |
+| 页面私有组件 | camelCase               | `addModal.vue`（仅极个性弹窗）   |
+
+## 平台组件速查
+
+| 用途     | 组件           | 来源                             |
+| -------- | -------------- | -------------------------------- |
+| 查询区   | BaseQuery      | @jhlc/common-core                |
+| 工具栏   | BaseToolbar    | @jhlc/common-core                |
+| 表格     | BaseTable      | @jhlc/common-core                |
+| 分页     | jh-pagination  | @jhlc/jh-ui                      |
+| 上下分栏 | jh-drag-row    | @jhlc/jh-ui                      |
+| 下拉选择 | jh-select      | @jhlc/jh-ui（dict 属性自动加载） |
+| 单日期   | jh-date        | @jhlc/jh-ui                      |
+| 日期范围 | jh-date-range  | @jhlc/jh-ui                      |
+| 用户选择 | jh-user-picker | @jhlc/jh-ui                      |
+| 部门选择 | jh-dept-picker | @jhlc/jh-ui                      |
+| 文件上传 | jh-file-upload | @jhlc/jh-ui                      |
+| 文本翻译 | jh-text        | @jhlc/jh-ui                      |
+| 左右分割 | C_Splitter     | src/components/global            |
+| 树形面板 | C_Tree         | src/components/global            |
+
+## 组件提取策略
+
+| 场景                      | 位置                                  | 命名                    |
+| ------------------------- | ------------------------------------- | ----------------------- |
+| 3+ 页面复用               | `src/components/global/C_PascalCase/` | 全局自动注册            |
+| 2+ 页面复用（如通用弹窗） | `src/components/local/c_camelCase/`   | 按需导入，如 `c_modal/` |
+| 仅单页面使用              | 页面 `components/xxxModal.vue`        | 仅当 c_modal 无法满足时 |
+
+## 禁止事项
+
+- ❌ index.vue 中写业务逻辑（逻辑全在 data.ts）
+- ❌ 使用 Vuex（用 Pinia）
+- ❌ `::v-deep` / `/deep/`（用 `:deep()`）
+- ❌ 直接用 axios（用 getAction/postAction）
+- ❌ 手写查询表单/工具栏/分页（用 BaseQuery/BaseToolbar/jh-pagination）
+- ❌ 每个页面重复写弹窗组件（优先用 `c_modal` 等局部公共组件）
+
+## Axure → Vue 生成流程
+
+详见 `.github/skills/` 下的 5 个 Skill：
+
+1. **prototype-scan** — 解析 Axure HTML → 页面清单
+2. **convention-extract** — 项目规范提炼（已固化，新项目时使用）
+3. **api-contract** — 页面清单 → api.md 接口约定
+4. **page-codegen** — 生成 index.vue + data.ts + index.scss + api.md
+5. **menu-sync** — 将 pages.ts 页面同步到后端菜单表（Phase 1：AI 调 `/system/menu/save`；Phase 2：`pnpm run menu:push`）
+
+> 完整使用步骤及精度技巧见 `.github/docs/use-skill.md`