@qilitt-mickey/vue3-temp-skill 1.0.12 → 1.1.2

package/SKILL.md

@@ -8,11 +8,11 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 # Vue 3 项目开发规范技能包
 
 > 用户通过 `/vue3-temp-skill` + 自然语言描述需求，AI 应当：
-> 1. 分析需求，自动匹配下方模块路由表中的对应模块
-> 2. 加载匹配到的模块详细规范（`references/` 目录）
-> 3. 严格按照规范生成代码
-> 4. 生成完毕后，**必须自动执行代码质量审查**（见底部审查清单）
-> 5. 如发现问题，直接修正后输出最终代码
+> 1. 分析需求，按下方**模块路由表**命中模块（可多模块）
+> 2. **始终加载** `core-kernel` + `code-quality`（含资产索引）
+> 3. 加载命中的功能模块详细规范（`references/`）
+> 4. **以本 Skill 内示例为准编写代码**（复用已有封装；选型表指定的库勿擅自替换）
+> 5. 生成完毕后执行质量审查；有问题就地修正
 
 ---
 
@@ -23,599 +23,237 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 ```
 
 示例：
-- `/vue3-temp-skill 帮我开发一个客户管理模块，需要按客户名称、状态查询，字段包括客户编号、名称、联系方式、创建时间`
-- `/vue3-temp-skill 封装一个部门选择器组件，支持远程搜索和分页`
-- `/vue3-temp-skill 给这个页面加上按钮权限，只有 admin 角色能看到删除按钮`
-- `/vue3-temp-skill 帮我写一个移动端的数据大屏，用 scale 缩放方案`
-- `/vue3-temp-skill 给编辑页加上数据变更对比，支持字段高亮和变更汇总`
-
-AI 接收到上述请求后，应当自行判断需要哪些模块的规范，无需用户手动指定。
+- `/vue3-temp-skill 帮我开发一个客户管理模块，需要按客户名称、状态查询`
+- `/vue3-temp-skill 封装远程搜索下拉，支持分页与回写`
+- `/vue3-temp-skill 给编辑页加数据变更对比和汇总弹窗`
+- `/vue3-temp-skill 做一个关系图谱页，用力导向布局`
+- `/vue3-temp-skill 移动端客户列表，用 Vant`
 
 ---
 
-## ⛔ 项目优先原则（最高优先级，所有生成必须遵守）
-
-> **核心规则：AI 生成代码前，必须先查阅项目已有的实现，禁止脱离项目自行选型。**
-
-### 为什么需要这条规则
-
-项目已经选定了一套完整的技术方案（图谱用 `relation-graph-vue3`、流程图用 `@antv/g6`、富文本用 `wangEditor` 等）。如果 AI 不查阅项目就直接生成代码，可能会引入完全不同的库（比如用 D3 做图谱、用 Mermaid 做流程图），导致：
-- 项目依赖膨胀，出现功能重复的库
-- 代码风格不统一，维护成本增加
-- 与现有组件/Hook/工具无法集成
-
-### 强制执行规则
+## ⛔ 项目优先原则（最高优先级）
+
+1. **先查后写**：始终先读 `references/core-kernel.md`（内含资产索引约定；完整清单见 `project-inventory.md`）。
+2. **有则必用**：
+   - 已有 `Re*` / Hook / utils / 业务封装 → **直接复用，勿另起一套同能力实现**
+   - 选型表已指定三方库（如图谱、流程图、富文本）→ **用指定库，勿擅自换成同类其他库**；确需新库须「待确认」
+3. **按示例编写**：按本包 `references/` 中的**完整示例**与约定写法编写（命名、结构、调用方式以示例为准）。
+4. **无则上报**：清单与 Skill 均无对应能力时，标注「待确认」新依赖，未经用户同意不得引入。
+5. **真相源优先级**：`仓库现有实现` > `本 Skill references 示例` > 通用 Vue 习惯。  
+   命名以代码为准：列表方法 **`onSearch` / `reset`**；响应类型全局 **`Result<T>`**（`types/global.d.ts`）；HTTP 为 **`import { http } from '@/utils/http'`**。
+6. **依赖 / 插件安装（addon 必做）**：命中专项能力时，先读业务项目 `package.json`。  
+   - 已装齐 → 直接写代码  
+   - 缺失 → 按 `project-inventory.md` **第九节安装表**的**精确版本**给出 `pnpm add` / `pnpm add -D`，征得确认后再装；带 Vite 插件的能力（FileViewer、vConsole、Vant resolver、Mock）还要核对 `build/plugins/*`  
+   - **禁止**用不带版本或 `@latest` 安装选型表内的库；**禁止**擅自升降级
 
-**1. 先查后写**
-生成任何功能代码之前，**必须先加载 `project-inventory` 模块**（`references/project-inventory.md`），查阅项目已有的三方库、组件、Hook、工具函数。
-
-**2. 有则必用**
-如果项目已有对应功能的库或组件，**必须直接使用**，不得引入替代方案。例如：
-- 需要图表 → 必须用 `echarts` + `ReEchart`，不得用 Chart.js / D3
-- 需要图谱 → 必须用 `relation-graph-vue3`，不得用 D3 / vis.js
-- 需要流程图 → 必须用 `@antv/g6`，不得用 Mermaid / LogicFlow
-- 需要富文本 → 必须用 `@wangeditor/editor` + `ReRichText`，不得用 Quill / TinyMCE
-- 需要 HTTP 请求 → 必须用项目封装的 `src/utils/http.ts`，不得直接用 axios / fetch
-
-完整的功能选型对照表见 `references/project-inventory.md` 第八节。
-
-**3. 参考示例**
-`src/views/` 下有大量功能示例页面（图谱、工作流、WebSocket、附件管理等）。遇到类似需求时，**必须先参考对应示例的代码模式**，而不是从零设计。
+---
 
-**4. 无则上报**
-如果确实需要引入清单中没有的新库，**必须在输出中明确标注**：
-```
-⚠ 待确认：当前需求需要引入新依赖 [库名]，项目中暂无对应实现。
-  原因：[为什么现有库无法满足]
-  建议版本：[x.x.x]
-  请确认是否允许引入。
-```
-未经用户确认，不得自行引入。
+## 模块路由表（AI 内部匹配用）
 
-**5. 复用优先**
-- 已有组件 → 直接使用，不重新封装
-- 已有 Hook → 直接调用，不重新编写
-- 已有工具函数 → 直接 import，不重新实现
-- 已有 Store → 直接读取，不新建同功能 Store
+### 始终加载（无需关键词）
 
----
+| 模块 | 文件 | 职责 |
+|------|------|------|
+| **core-kernel** | `references/core-kernel.md` | 硬约束、应用壳、CRUD 积木、工程摘要、资产分层 |
+| **code-quality** | `references/code-quality.md` | 生成后审查清单 |
+| **project-inventory** | `references/project-inventory.md` | 库/组件/Hook/工具/选型对照（随 core 一并查阅） |
 
-## 模块路由表（AI 内部匹配用）
+### 标准业务面（按需）
 
-当用户的需求涉及以下场景时，**必须加载对应模块的详细规范**来指导代码生成。一个需求可能匹配多个模块。
+| 模块 | 匹配场景 | 关键词 |
+|------|---------|--------|
+| **http-api** | 写接口、加解密、基础上下载 | 接口、http、加密、API、上传、下载 |
+| **crud-pages** | 列表 / 表单 CRUD | 列表、表格、查询、管理、CRUD、新增编辑 |
+| **detail-page** | 详情跳转与多标签 | 详情、useDetail、toDetail |
+| **data-writeback** | 回显、多表单校验 | 回显、回填、useFormCheck |
+| **permission-auth** | 页面/按钮权限 | 权限、v-auth、roles、ReAuth |
+| **layout-theme** | 布局主题、CSS 变量、暗黑 | 布局、主题、暗黑、`--vts-*`、UnoCSS |
+| **icons** | 图标体系（本地 SVG / Iconify / 菜单 / Picker） | 图标、svg-icon、Iconify、ReSvgIcon、ReIconPicker、菜单图标、extraIcon、i-ep、i-ri、本地图标、离线图标 |
+| **feedback-loading** | Message / Loading | message、loading、确认框 |
+| **base-code-dict** | 字典码表 | 字典、baseCode、码表 |
+| **api-check** | 联调 / Mock 契约（用户说联调效果即可） | 联调、mock、契约、对接后端、接口对不上 |
+| **ui-components** | 新封装 Re* 公共组件 | Re组件、公共组件、type.ts、封装组件 |
+
+### 专项能力包（按需）
 
 | 模块 | 匹配场景 | 关键词 |
 |------|---------|--------|
-| **vue-core** | 项目初始化、新建组件、配置路由/状态管理/i18n | 组件、目录、路由、pinia、store、i18n、技术栈、命名 |
-| **http-api** | 编写 API 接口调用、文件上传下载、加密请求 | 接口、请求、http、axios、上传、下载、加密、API |
-| **ui-components** | 开发 Re* 前缀公共组件、组件库维护 | Re组件、公共组件、组件库、封装、type.ts |
-| **crud-pages** | 开发查询列表页、表单页、详情/编辑页 | 列表、表格、表单、新增、编辑、详情、CRUD、查询、管理模块 |
-| **advanced-ui** | 使用选择器、高级表格、图表、工作流等 | 选择器、树形、级联、vxe-table、echarts、图表、bpmn |
-| **layout-theme** | 修改布局、主题、暗黑模式、CSS 变量、Design Tokens、UnoCSS 桥接、响应式适配、PC/移动端双端、ui-ux-pro-max 设计输出衔接 | 布局、主题、暗色、暗黑、dark-mode、CSS变量、design-tokens、配色、色阶、chroma-js、响应式、双端、ui-ux-pro-max、样式 |
-| **permission-auth** | 配置页面权限、按钮权限、自定义指令、编写 Hooks | 权限、角色、v-auth、指令、directive、hook |
-| **mobile-h5** | 开发移动端页面、Vant 组件、微信 JS-SDK | 移动端、H5、vant、微信、weixin、wechat、tabbar |
-| **build-optim** | Vite 构建配置、代码分割、ESLint/Stylelint 工具链 | 构建、打包、vite、分包、eslint、stylelint |
-| **code-quality** | 始终加载 — 所有生成代码必须经过此模块审查 | （始终生效，无需关键词触发） |
-| **project-inventory** | 始终加载 — 生成代码前必须查阅项目已有资产（库/组件/Hook/工具），禁止自行选型 | （始终生效，无需关键词触发） |
-| **api-check** | 涉及前后端接口联调、契约验证、Mock 数据 | 联调、对接、接口检查、mock、参数、响应 |
-| **feedback-loading** | Loading 遮罩、Message 提示、MessageBox 弹窗确认 | loading、message、提示、弹窗、确认、警告、feedback |
-| **base-code-dict** | 码表/字典数据获取、缓存、映射显示 | 字典、码表、baseCode、枚举、enum、下拉数据、filterValue |
-| **download-export** | 文件下载、模板下载、文件流导出、附件预览 | 导出、下载、excel、blob、模板、附件、attachment |
-| **seamless-scroll** | 无缝滚动、公告栏、排行榜滚动 | 滚动、无缝、公告、跑马灯、seamless、marquee |
-| **qrcode-barcode** | 二维码生成/展示、条形码生成 | 二维码、qrcode、条形码、barcode、扫码 |
-| **rich-text** | 富文本编辑器录入、图文混排 | 富文本、editor、wangeditor、图文、编辑器 |
-| **verify-captcha** | 滑块验证、拖拽验证、图片验证码、短信倒计时 | 验证码、captcha、滑块、拖拽验证、短信、sms |
-| **data-screen** | 数据大屏/可视化大屏开发 | 大屏、可视化、dataScreen、scale、数据展示、全屏 |
-| **form-advanced** | 图标选择器、分段控制器、卡片选择、锚点、折叠面板、地址解析 | 图标选择、分段、卡片选择、锚点、折叠、地址解析、iconPicker |
-| **feedback-ui** | 通知栏、水印、时间轴、闪烁点、打字机动画 | 通知栏、水印、watermark、时间轴、闪烁、打字机、typeit |
-| **graph-relation** | 知识图谱、关系图谱、力导向布局 | 图谱、关系图、knowledge graph、relation-graph、力导向、节点高亮 |
-| **workflow-bpmn** | BPMN 工作流查看、流程审批可视化 | bpmn、工作流、流程审批、WorkflowViewer、XML |
-| **flowchart-g6** | G6 流程图、树形流程、Vue 节点渲染 | 流程图、g6、flowchart、树形图、compact-box、Vue 节点 |
-| **data-mapping** | JsPlumb 字段映射、拖拽连线 | 映射、jsplumb、字段映射、连线、拖拽、数据对照 |
-| **websocket-realtime** | WebSocket 实时通信、多实例管理 | websocket、ws、实时、长连接、推送、多实例 |
-| **file-management** | 附件上传管理、文件预览 | 附件、attachment、上传、文件预览、ReAttachment、ReFileViewer |
-| **directives-advanced** | 高级自定义指令（复制、自适应字体） | v-copy、v-auto-font、指令、directive、复制、字体自适应 |
-| **data-compare** | 编辑页数据变更对比、高亮、汇总弹窗、表格行增删改对比 | 变更对比、数据对比、v-compare、变更汇总、ChangeSummary、对比高亮、原值、compareStore、.table |
-| **detail-page** | 详情页/编辑页跳转与数据回显 | 详情页、useDetail、toDetail、编辑页、参数传递、tab 标题 |
-| **data-writeback** | 表单数据回显、编辑回填、多表单校验 | 回显、回填、writeback、Object.assign、编辑、useFormCheck、多表单 |
-| **tree-table** | 树形表格、树结构转换、树形连线 | 树表、tree-table、handleTree、树形结构、ReTreeLine、层级 |
+| **tree-table** | 树表 / 树线 | 树表、tree-table、ReTreeLine、handleTree |
+| **table-vxe** | VXE 高性能表 | vxe、高性能表格、大数据表格 |
+| **form-advanced** | 弹窗、锚点/卡片选择/地址解析等（图标选择见 `icons`） | 弹窗、对话框、ReDialog、ReDialogResize、可缩放弹窗、锚点、卡片选择、地址解析、ReSelectQuery、级联 |
+| **data-compare** | 变更对比 | v-compare、变更汇总、compareStore |
+| **file-management** | 附件 + 预览 | 附件、ReAttachment、ReFileViewer、预览 |
+| **download-export** | 导出 blob | 导出、excel、blob、下载 |
+| **rich-text** | 富文本 | 富文本、wangeditor、ReRichText |
+| **chart-echarts** | 图表 | echarts、图表、ReEchart、词云 |
+| **data-screen** | 数据大屏 | 大屏、dataScreen、scale |
+| **graph-relation** | 关系图谱 | 图谱、relation-graph |
+| **workflow-bpmn** | BPMN | bpmn、流程审批 |
+| **flowchart-g6** | G6 流程图 | g6、流程图 |
+| **data-mapping** | JsPlumb 映射 | jsplumb、字段映射 |
+| **websocket-realtime** | WebSocket | websocket、ws、实时 |
+| **mobile-h5** | 移动端 Vant | 移动端、H5、vant、vconsole |
+| **wechat-js** | 微信 JS-SDK | 微信、weixin、wechat |
+| **verify-captcha** | 验证码族 | 验证码、滑块、短信、sms |
+| **qrcode-barcode** | 二维码/条形码 | 二维码、条形码、qrcode、barcode |
+| **feedback-ui** | 通知栏/水印/时间轴等 | 通知栏、水印、时间轴、打字机 |
+| **seamless-scroll** | 无缝滚动 | 无缝滚动、跑马灯 |
+| **particles** | 粒子特效（登录/氛围背景） | 粒子、粒子特效、tsparticles、登录背景粒子、粒子动画、连线粒子 |
+| **directives-advanced** | 文本一键复制、长标题字号随宽度变小等体验（用户说效果即可，无需知指令名） | 一键复制、点一下复制、不好抄、标题太长、显示不全、字号跟着变小、文字别截断、挤得下；内部映射 v-copy / v-auto-font |
 
 ### 匹配规则
 
-1. **单模块**：需求明确属于某一类 → 直接按该模块规范执行。
-2. **多模块组合**：复杂需求涉及多个方面 → 同时参照多个模块。
-   - 例："开发一个带权限控制的客户管理模块" → `crud-pages` + `permission-auth` + `http-api`
-3. **默认兜底**：无法明确匹配时，默认参照 `vue-core` 基础规范。
-4. **code-quality 和 project-inventory 始终生效**：无论匹配到什么模块，生成代码前必须先查阅项目资产清单（project-inventory），生成代码后都必须执行质量审查（code-quality）。
+1. 单模块清晰 → 该模块 + 始终加载三件套。  
+2. 多模块组合 → 同时加载（例：带权限客户列表 = `crud-pages` + `permission-auth` + `http-api`）。  
+3. 兜底 → 仅始终加载，并询问是否专项能力。  
+4. 业务开发默认**不**改 `vite.config.ts` / `build/**`；仅当用户明确要求改构建时，参考 `core-kernel` 工程摘要后再动。  
+5. **按用户说的效果匹配**（不要求用户懂代码/指令名）：  
+   - 「弹窗 / 对话框 / 表单弹窗 / 可缩放弹窗」→ `form-advanced`（落码 `ReDialog` / `ReDialogResize`）  
+   - 「点一下复制 / 编号不好抄」→ `directives-advanced`（落码 `v-copy`）  
+   - 「标题太长显示不全 / 字跟着宽度变小」→ `directives-advanced`（落码 `v-auto-font`）  
+   - 「只有某角色能看见」→ `permission-auth`  
+   - 「编辑标出改了哪些 / 变更汇总」→ `data-compare`  
+   - 「导出 Excel / 下载文件」→ `download-export`  
+   - 「菜单加图标 / 换图标 / 图标选择器 / 本地 SVG 图标」→ `icons`  
+   - 「粒子背景 / 登录粒子 / 粒子特效」→ `particles`  
+   - 只说「自定义指令」未说明效果 → 先追问，禁止默认塞模块  
+6. **HTTP**：方法跟后端文档，**允许 GET/POST**；POST→`data`，GET→`params`；真实 URL 用 `VITE_API_BASE_URL`；`/mock` 仅本地 Fake Server；无单请求 `crypto: true`。
 
 ---
 
-## 项目技术栈概览
+## 技术栈与目录（速查）
 
 ```typescript
 const techStack = {
-  vue: "3.5.x",          // Composition API + <script setup>
-  typescript: "6.x",     // 严格类型
-  vite: "8.x",           // Rolldown 构建引擎
-  elementPlus: "2.14.x", // PC 端 UI
-  vant: "4.10.x",        // 移动端 UI
-  pinia: "3.x",          // 状态管理 + 持久化
-  vueRouter: "5.x",      // Hash 模式 + 动态路由
-  unocss: "66.x",        // 原子化 CSS（presetWind3）
-  axios: "1.18.x",       // HTTP 请求（自定义封装）
-  vueI18n: "11.x",       // 国际化
+  vue: "3.5.39",
+  typescript: "6.0.3",
+  vite: "8.1.2",
+  elementPlus: "2.14.2",
+  vant: "4.10.0",
+  pinia: "3.0.4",
+  vueRouter: "5.1.0", // Hash
+  unocss: "66.7.4",
+  axios: "1.18.1", // 仅经 @/utils/http
+  vueI18n: "11.4.6",
 };
 ```
 
-## 目录结构
+> addon 库精确版本与 `pnpm` 安装命令见 `references/project-inventory.md` 第九节。
 
 ```
 src/
-├── api/          # API 接口（按业务模块分文件）
-├── components/   # 可复用组件（Re* 前缀）
-├── hooks/        # 组合式函数
-├── store/        # Pinia 状态管理
-├── router/       # 路由配置（PC + 移动端）
-├── utils/        # 工具函数
-├── styles/       # 全局样式
-├── views/        # 页面组件
-├── directives/   # 自定义指令
-├── layout/       # 布局系统
-└── locales/      # 国际化文件
+├── api/  components/  hooks/  store/  router/
+├── utils/  styles/  views/  directives/  layout/  locales/
 ```
 
-## 核心约定速查
-
-以下是所有模块共享的基础约定，详细规则见 `references/` 下各模块文档。
-
-### 组件规范
-
-```vue
-<script setup lang="ts">
-import type { ComponentNameProps, ComponentNameEmits } from "./type";
-
-defineOptions({ name: "ReComponentName" });
-
-const props = withDefaults(defineProps<ComponentNameProps>(), {});
-const emit = defineEmits<ComponentNameEmits>();
-</script>
-
-<template>
-  <div class="re-component-name"><!-- 内容 --></div>
-</template>
-
-<style lang="scss" scoped>
-.re-component-name { /* 样式 */ }
-</style>
-```
+---
 
-- 始终使用 `<script setup lang="ts">`，禁止 Options API
-- Props/Emits 类型抽取到同目录 `type.ts`
-- 自定义组件 `Re*` 前缀，class 名 `re-*` 前缀
-- Element Plus / Vant 自动引入，Re 组件需显式 import
+## 核心约定速查（生成时默记）
 
-### API 调用
+### HTTP
 
 ```typescript
-// src/api/xxx.ts
-import http from "@/utils/http";
-import type { Result } from "@/utils/http/types";
+import { http } from "@/utils/http";
 
 export function getXxxListApi(data: XxxQuery) {
-  return http.request<Result<XxxListResult>>("post", "/api/xxx/list", { data });
+  return http.request<Result<XxxPage>>(
+    "post",
+    `${import.meta.env.VITE_API_BASE_URL}/console/xxx/list`,
+    { data },
+  );
 }
 ```
 
-- 所有接口统一 POST，参数通过 `data` 传递
-- 接口函数封装在 `src/api/` 目录，不在组件中直接调用 http
-- 返回值必须声明 `Result<T>` 泛型
+- 方法以后端为准，**允许 GET / POST**；POST → `data`，GET → `params`。
+- 真实地址用 `VITE_API_BASE_URL` 拼接；`/mock/...` 仅本地 Fake Server，**不是**前后端标准前缀；勿虚构统一 `/api`。
+- `Result<T>` 为全局类型（`status` / `statusText` / `data`）；分页 `content` / `totalCount`。
+- 字段驼峰；Java Long/BigDecimal → 前端 **`string`**。
+- 加解密由 `VITE_ENCODE_SWITCH` 全局控制（无 `crypto: true`）。
 
-### 状态管理
+### 列表页
 
 ```typescript
-import { defineStore } from "pinia";
+const { content, pagination, loading, onSearch, reset, formRef, tableData, ... } =
+  useTableSearch(formQuery, getXxxListApi, `${import.meta.env.VITE_API_BASE_URL}/console/xxx/list`);
 
-export const useXxxStore = defineStore("xxx", {
-  state: () => ({ /* ... */ }),
-  actions: { /* ... */ },
-  persist: { key: "xxx-store", paths: ["field"] },
-});
-
-export const useXxxStoreHook = () => useXxxStore();
+onSearch(); // 查询
+reset();    // 重置（配合 formRef.resetFields）
 ```
 
-### 权限控制
+- 方法名必须是 **`onSearch` / `reset`**，不是 handleSearch/handleReset。
+- 配合 `ReGrid` / `ReGridItem` / `ReTableBar` / `RePagination` / `ReTableOperate`。
 
-```vue
-<!-- 按钮级权限 -->
-<el-button v-auth="['admin']">删除</el-button>
+### 路由
 
-<!-- 区域级权限 -->
-<ReAuth :value="['admin']"><!-- 内容 --></ReAuth>
-```
+- 业务模块 **禁止** 再挂 `component: Layout`。
+- 页面权限 `meta.roles`；按钮 `v-auth` / `ReAuth`。
 
-### 列表页标准模式
+### 组件 / i18n / 环境
 
-```typescript
-import { useTableSearch } from "@/hooks/useTableSearch";
-
-const { content, pagination, loading, handleSearch, handleReset } =
-  useTableSearch(formQuery, getXxxListApi);
-```
-
-### 国际化
-
-- 所有用户可见文案使用 `$t()` 或 `t()`
-- 开发阶段可先用中文占位，后续替换
+- `<script setup lang="ts">` + `defineOptions({ name })`
+- Re*：`type.ts` + 显式 import
+- `$t('中文key')`；`import.meta.env.VITE_*`；禁止不可信 `v-html`
 
 ---
 
-## 各模块速查索引
-
-### vue-core — 项目基础
-
-- 组件命名：`Re[Name]`（自定义）、大驼峰（页面）
-- 路由：`satisfies RouteConfigsTable`，`meta.rank` 排序，`meta.roles` 权限
-- Store：`useXxxStoreHook()` 供组件外部调用
-- 类型定义放 `type.ts`，不内联
-
-### http-api — 接口调用
-
-- 统一 POST + `data`，不用 GET + `params`
-- 加密请求：`{ data, crypto: true }`
-- 文件下载：`responseType: "blob"` + `blobDown()`
-- Java `Long` → TS `string`（精度），`BigDecimal` → `string`
-
-### ui-components — Re 组件开发
-
-- 目录结构：`ReXxx/src/xxx.vue` + `index.ts` + `type.ts`
-- 导出：`export const ReXxx = xxx`
-- Props 每个字段必须有 JSDoc 注释
-
-### crud-pages — CRUD 页面
-
-- 列表页：`useTableSearch` + `ReGrid` + `ReTableBar` + `ReTableOperate`
-- 表单页：`reactive<T>()` + `FormRules<T>` + `formRef.validate()`
-- 详情页：`route.query.id` 传参，`Object.assign(formData, data)` 回填
-- 提交按钮必须有 `loading` 防重复
-
-### advanced-ui — 高级组件
-
-- 简单下拉 → `el-select`，搜索+分页 → `RESelectQuery`
-- 树形选择 → `el-tree-select`，级联 → `ReCascader`
-- 大数据表格 → `vxe-table`（>1000 行）
-- 图表：`onUnmounted` 中 `dispose()`，用 `ResizeObserver` 自适应
-
-### layout-theme — 设计系统与布局主题
-
-- **CSS 变量三层体系**：`--vts-*`（全局基础）→ `--vts-theme-*`（侧边栏 8 套配色）→ `--el-*`（EP 动态色阶）
-- **8 套侧边栏预设**：light / default / saucePurple / pink / dusk / volcano / mingQing / auroraGreen
-- **主色色阶**：`chroma-js` 自动生成 `--el-color-primary-light-1~9`（brighten）和 `-dark-1~2`（darken）
-- **暗黑模式**：`html.dark` 类名 + View Transitions API 圆形扩散动画，覆盖变量在 `dark.scss`
-- **Design Tokens**：间距 4px 基数（UnoCSS `p-*`/`m-*`），字号 12px~128px，字体 Alibaba PuHuiTi 3.0
-- **布局 3 模式**：垂直 210px / 水平 0 / 混合 210px，侧边栏 mixin × 3 调用
-- **UnoCSS 桥接**：`presetRemToPx(baseFontSize:4)` → 1 单位 = 1px，`theme.colors` 映射 EP 变量
-- **ui-ux-pro-max 衔接**：设计输出颜色必须映射为 CSS 变量，禁止硬编码；暗黑模式必须同步适配
-- **硬编码颜色清单**：`element-plus.scss` 中有 9 处硬编码未做暗黑适配，新增样式时注意
-- PC/移动端：`isMobile` 条件渲染，移动端用 Vant 组件
-- 数据大屏：1920x1080 + `scale` 缩放
-
-### permission-auth — 权限指令
-
-- 页面级：路由 `meta.roles`
-- 按钮级：`v-auth` 指令 / `ReAuth` 组件
-- JS 中：`useAuth().hasAuth(['admin'])`
-- 指令放在 `src/directives/`，统一注册
-
-### mobile-h5 — 移动端
-
-- 页面放 `src/views/mobile/`，路由前缀 `/m`
-- 列表：`van-list` 触底加载，不用分页
-- 选择器：`van-popup` + `van-picker`
-- 微信：`useWechat` Hook，先判断 `isWechatBrowser`
-
-### build-optim — 构建工程化
-
-- 分包：`vue-vendor` / `ui-vendor` / `chart-vendor` 分离
-- 压缩：`oxc`（不用 terser）
-- 工具链：oxlint + eslint(@antfu) + stylelint + commitlint + husky
-- 提交规范：`type(scope): description`
-
-### code-quality — 代码审查
-
-- 8 大检查项：类型 / 组件 / API / 安全 / 性能 / 样式 / 业务 / 风格
-- 禁止 `any`、禁止 `console.log` 残留、禁止 `v-html` 渲染用户输入
-- 生成代码后必须逐项自查（详见下方完整审查清单）
-
-### project-inventory — 项目资产清单（始终加载）
-
-- 三方库选型表：58 个生产依赖按功能分类，明确每个场景的指定方案
-- Re* 组件清单：37 个自定义组件，开发前必须先查是否已有
-- Hook / 工具 / 指令 / Store 清单：所有可复用的基础设施
-- 示例页面索引：20 个 views 目录对应功能参考
-- **功能选型对照表**：20+ 场景的"禁止替代"规则（图谱必须用 relation-graph，流程图必须用 G6 等）
-- 核心原则：先查后写、有则必用、无则上报、复用优先
-
-### api-check — 接口对接
-
-- 6 步检查：URL / 参数 / 响应 / 特殊场景 / 联调排查 / Mock
-- 参数放 `data` 不是 `params`
-- 金额用 `string`，日期确认格式
-- 联调问题先查 Network 面板
-
-### feedback-loading — 反馈与 Loading
-
-- 局部 Loading：`v-loading.lock`，全屏：`v-loading.lock.fullscreen`
-- 统一 SVG：`useApp().svgLoading`
-- Message：`import { message } from "@/utils/message"`，默认 grouping + plain
-- MessageBox 文案用 `$t()`
-
-### base-code-dict — 基础代码（字典）
-
-- 获取：`useApp().baseCodeGet(codeType)`，首次自动请求+缓存
-- 映射：`filterValue(code, list, "code", "value")`
-- 刷新缓存：`{ refresh: true }`
-- 相同码表用相同 `codeType`，避免重复请求
-
-### download-export — 下载与导出
-
-- 文件流：`blobDown(res.data, "文件名.xlsx", res)`
-- 模板下载：`download("模板名")`
-- 在线资源：`downloadByUrl()` / `downloadByOnlineUrl()` / `downloadByBase64()`
-- 文件名优先从响应头解析
-
-### seamless-scroll — 无缝滚动
-
-- 组件：`ReSeamlessScroll`，配置 `direction` / `step` / `hoverStop`
-- `limitMoveNum` 控制最小启动数据量
-- 垂直滚动容器需固定高度，水平滚动内容需足够宽
-
-### qrcode-barcode — 二维码与条形码
-
-- 二维码：`ReQrcode`（支持 logo、颜色配置、过期遮罩）
-- 条形码：`ReBarcode`（支持 CODE128/EAN13 等多种编码）
-- 内容为空不渲染，需 `v-if` 处理
-
-### rich-text — 富文本编辑器
-
-- 组件：`ReRichText`（封装 wangEditor）
-- `v-model` 同步 HTML，`v-model:attachment-ids` 同步附件 ID
-- 自定义上传走 `getUploadUrl` 接口
-- 实例在 `onBeforeUnmount` 中销毁
-
-### verify-captcha — 验证码与校验
-
-- 滑块拼图：`ReVerify`，拖拽验证：`ReDragVerify`
-- 图片验证码：`ReImageVerify`，支持 `getImgCode()` 刷新
-- 短信倒计时：`ReSmsCode`，内置手机号校验
-- 前端仅做防刷，关键业务需后端二次校验
-
-### data-screen — 数据大屏
-
-- 设计稿 1920x1080，`transform: scale()` 等比缩放
-- 内部元素按设计稿像素开发，不写响应式单位
-- 图表 `resize` 时调用 `chart.resize()`
-- 大屏使用独立布局，不显示菜单/页头
-
-### form-advanced — 高级表单组件
-
-- 图标选择器：`ReIconPicker`，返回值用于 `svg-icon` 的 `name`
-- 分段控制器：`ReSegmented`，支持 icon/tip/disabled
-- 卡片选择：`ReCheckCard`，支持多选
-- 锚点导航：`ReAnchor`，弹窗场景指定 `scrollContent`
-- 地址解析：`address-parse` 库
-
-### feedback-ui — 展示类反馈组件
+## 代码生成工作流
 
-- 通知栏：`ReNoticeBar`，长文本自动滚动
-- 水印：`useWatermark()`，传容器 DOM 可局部水印
-- 时间轴：`ReTimeLine`，数据项含 title + date
-- 闪烁点：`useRenderFlicker()` 返回组件
-- 打字机：`TypeIt` 组件
+### 1. 需求分析
 
-### graph-relation — 知识图谱
+提取字段、查询、交互；按路由表列出模块 ID。
 
-- 组件库：`relation-graph-vue3`，力导向/圆形/树形多种布局
-- 数据格式：`GraphNode`（id, text, color, width, height）+ `GraphLine`（from, to, text, color）
-- 初始化：`graphRef.value.setJsonData({ rootId, nodes, lines }, callback)`
-- 力导向布局需 `layoutMask` 遮罩，渲染完成后隐藏
-- 节点点击高亮：遍历关联线设置 `color`，非关联线置灰
-- 搜索定位：`graphRef.value.getInstance().moveNodeToCenter(nodeId)`
+### 2. 加载规范
 
-### workflow-bpmn — BPMN 工作流查看
+- 必读：`core-kernel.md`、`project-inventory.md`、`code-quality.md`
+- 加读：命中的功能模块 md
 
-- 使用 `bpmn-js/lib/Viewer`（只读模式，不用 Modeler）
-- 核心组件：`WorkflowViewer`，props 接收 `xml` + `processInfo`
-- 高亮流程：`canvas.addMarker(elementId, 'active' | 'finished')`，CSS 类控制颜色
-- 生命周期：`onBeforeUnmount` 中 `viewer.destroy()` 防止内存泄漏
-- 类型定义：`BpmnElementType`、`ProcessInfo`、`BpmnWorkflowData` 在 `types/bpmn.ts`
+### 3. 依赖与插件探查（命中 addon 时必做）
 
-### flowchart-g6 — G6 流程图
+1. 打开业务项目 `package.json`，对照 `project-inventory` 第九节安装表。
+2. 若缺失：列出精确版本安装命令（含 `-D` 的 Vite 插件）→ **等待用户确认** → 再执行 `pnpm add`。
+3. 若涉及 FileViewer / vConsole / Vant / Mock：核对 `build/plugins/` 对应文件是否存在；模板已接线则勿改 Vite。
+4. 完整模板已装齐时跳过本步，勿重复安装。
 
-- 依赖：`@antv/g6` v5 + `g6-extension-vue`（支持 Vue 组件作为节点）
-- Vue 节点：`defineComponent` + TSX 渲染，通过 `register(ExtensionCategory.NODE, 'vue-node', VueNode)` 注册
-- 布局：`compact-box`（紧凑树），`getLayoutData` 配置横向/纵向
-- 动态导入：`const G6 = await import('@antv/g6')` 避免首屏加载
-- 响应式：`useResizeObserver` 监听容器变化，调用 `graph.resize()` + `graph.fitView()`
-- 销毁：`onBeforeUnmount` 中 `graph.destroy()`
+### 4. 项目探查
 
-### data-mapping — JsPlumb 字段映射
+- 仓库若有对应 `Re*` / Hook / utils → 对齐仓库实现并复用。
+- 按本 Skill 模块内完整示例编写；选型表已指定的库勿擅自替换。
 
-- 使用 `jsPlumb.getInstance({ Container: 'mapping-container' })` 创建实例
-- 源/目标注册：`makeSource(el, config)` + `makeTarget(el, config)`
-- 连线配置：`Connector: 'Bezier'`，`PaintStyle` 控制线宽/颜色
-- 端点样式：`Endpoint: 'Dot'`，`EndpointStyle` 控制大小/颜色
-- 获取映射结果：遍历 `getConnections()` 提取 sourceId/targetId
-- 清理：`jsPlumbInstance.reset()` + 移除事件监听
+### 5. 生成代码
 
-### websocket-realtime — WebSocket 实时通信
+完整可运行：类型、API、页面、路由片段（如需要）、样式约定。
 
-- 全局管理：`initWebSocket(url, name?)` 创建命名实例，支持多连接并存
-- Hook 使用：`useWebSocket(instanceName?)` 返回 `{ isConnected, subscribe, unsubscribe, send, sendRaw }`
-- 标准消息：`{ type: string, data: any }` 格式，自动派发到对应 type 事件
-- 原生消息：非标准格式自动派发到 `'message'` 事件
-- 自动清理：`onUnmounted` 时移除当前组件所有监听器
-- 关闭连接：`closeWebSocket(name)` 销毁指定实例
+### 6. 自动质量审查（必须）
 
-### file-management — 文件管理
+见下方清单；不通过则修正后再输出。
 
-- 附件组件：`ReAttachment`，`v-model` 格式 `{ attachmentType, attachmentList }`
-- Props：`required`、`accepts`（文件类型）、`limit`（数量）、`size`（大小限制）、`pageStatus`（create/edit/view）
-- 远程数据适配：`mapRemote()` 将后端字段映射为 `UploadUserFile` 格式
-- 删除逻辑：本地文件直接 splice，远程文件调 `deleteAttachmentById` 接口
-- 文件预览：`ReFileViewer` 组件，支持图片/PDF/Office 等多种格式
-- 工具函数：`formatFileSize`（字节→可读）、`checkFileType`（后缀→类型）、`downloadAttachment`
+### 7. 输出
 
-### directives-advanced — 高级自定义指令
+说明命中了哪些模块；列出待确认项（接口路径、字段类型、是否允许新依赖 / 是否已安装 addon）。
 
-- `v-copy`：双击复制文本，`:click` 修饰符改为单击复制，`.stop` 阻止冒泡
-- `v-auto-font`：根据容器宽度自动缩放字体，参数 `scale`/`min`/`max` 控制缩放比例和范围
-- 指令目录：`src/directives/{copy,autoFont,compare}/`，统一在 `index.ts` 注册
-- 数据变更对比（`v-compare` 全套）见 **data-compare** 模块，勿在本模块展开
+---
 
-### data-compare — 数据变更对比
+## 审查清单（摘要）
 
-- 指令：`v-compare` + `.map` / `.mapArr` / `.table`；开关用 `enabled`（无 `newValue` 字段）
-- 编排：父页 `provide(oldDataInfo, compareDisabled)`，子表单 inject；对比的是映射后显示文案
-- 控件：input 直接挂；日期包 `div`；下拉 `.map`/`composeOptions`；树/级联用 `value` 覆盖名称
-- 封装组件：`ReSelectQuery`/`ReCascader` 用 `compare-config` + `compare-key` + `compare-modifiers`
-- 表格：`.table` + `tableRowStatus` I/U/D/B + `getRowClassByFlag`；汇总矩阵
-- 汇总：`useCompareStore` + `ChangeSummaryService` + `ChangeSummaryDialog`；定位靠 `data-compare-*`
-- 示例：`src/views/form/moreForm/`（`/form/moreFormAnchor`）
+**0. 选型合规**
+- [ ] 已读 core-kernel / project-inventory
+- [ ] 复用已有 Re* / Hook / utils；未另起同能力实现
+- [ ] 选型表指定库未擅自替换；新依赖已标注待确认
+- [ ] addon 缺失时已按精确版本安装（或已征得确认）；未使用 `@latest` / 无版本号安装
+- [ ] 使用 Skill 内示例约定的写法，而非自创方案
 
-### detail-page — 详情页开发
+**1. 类型** — 避免无必要 `any`；Props/Emits/`Result<T>` 齐全  
+**2. 组件** — script setup、defineOptions、type.ts、`re-*` class  
+**3. API** — `@/utils/http`；方法跟后端（允许 GET/POST）；封装在 `src/api/`；`VITE_API_BASE_URL`；无虚构 `/api` / 无 `crypto: true`
+**4. 安全** — 无危险 v-html；无硬编码密钥  
+**5. 业务** — `onSearch`/`reset`；提交 loading；权限；未二次 Layout  
+**6. 风格** — 无多余 console；`$t('中文')`；`--vts-*` / UnoCSS；图标走 `svg-icon` / `icons` 约定  
 
-- Hook：`useDetail()` 返回 `{ toDetail, initToDetail, getParameter }`
-- 跳转：`toDetail({ id, mark, text })`，`text` 自动生成为 tab 标题
-- 参数获取：`getParameter()` 从 `route.query` 解析 `id`/`mark`/`text`
-- 数据回显：`Object.assign(formData, detailData)` 保留响应式
-- 注意：组件 `name` 必须与路由 `name` 一致，否则 tab 标题异常
-
-### data-writeback — 数据回显
-
-- 表单回显：`Object.assign(formData, apiResponse)` 保持响应式引用
-- 下拉组件回填：`ReSelectQuery` 需设 `edit-data`，`el-tree-select` 需设 `cache-data`，`ReCascader` 需传完整路径数组
-- 表格行编辑：备份原始数据 `_backup`，取消时恢复
-- 多表单校验：`Promise.all(forms.map(f => f.validate()))` 并行校验
-- 表单检查 Hook：`useFormCheck()` 聚合多个表单的校验状态
-
-### tree-table — 树形表格
-
-- 扁平转树：`handleTree(data, id, parentId, children)` 将列表数据转为树结构
-- 树加层级：`buildHierarchyTree(data)` 添加 `level`/`isLeaf`/`path` 等层级信息
-- el-table 树形：配置 `row-key` + `tree-props: { children, checkStrictly }`
-- 树+表格布局：`el-row` + `el-col` 左右分栏，左侧 `el-tree`/`el-tree-v2`，右侧表格
-- `ReTreeLine`：树形连线组件，兼容 `el-tree` 和 `el-tree-v2`，虚拟树必须传 `:tree-data`
+完整项见 `references/code-quality.md`。
 
 ---
 
-## 代码生成工作流
+## 各模块文件索引
 
-AI 在接收到 `/vue3-temp-skill` 命令后，必须严格按以下流程执行：
-
-### 第一步：需求分析
-
-- 理解用户描述的业务需求
-- 提取关键字段、查询条件、交互行为等信息
-- 根据模块路由表，判断需要加载哪些模块的规范
-
-### 第二步：加载规范
-
-- 读取匹配模块在 `references/` 目录下的详细文档
-- 结合上方"核心约定速查"中的基础约定
-- **同时加载 `project-inventory` 模块**（项目资产清单），无论需求匹配了什么模块，此模块必须加载
-
-### 第三步：项目探查（必须执行，禁止跳过）
-
-在生成任何代码之前，AI **必须**完成以下探查：
-
-1. **查阅项目资产清单**：读取 `references/project-inventory.md`，确认需求涉及的三方库、组件、Hook、工具函数是否已在项目中存在
-2. **对照功能选型表**：检查清单第八节"功能选型对照表"，确认项目已选定的技术方案
-3. **查找示例页面**：检查清单第七节"示例页面索引"，看是否有对应功能的参考实现
-4. **确定技术方案**：
-   - 如果项目已有对应实现 → 直接使用，不引入替代方案
-   - 如果项目没有对应实现 → 标记为"待确认"，在输出中说明需要引入的新依赖及原因
-   - 如果不确定 → 在项目中搜索相关代码确认
-
-**禁止行为**：
-- ❌ 不查阅清单就直接开始写代码
-- ❌ 项目已有 `relation-graph-vue3`，却引入 D3 做图谱
-- ❌ 项目已有 `useWebSocket` Hook，却重新写一个 WebSocket 管理类
-- ❌ 项目已有 `ReAttachment` 组件，却用 el-upload 从零搭建
-- ❌ 不参考 `src/views/` 下的示例页面，自行设计代码结构
-
-### 第四步：生成代码
-
-- 严格按照加载的规范生成完整代码
-- 代码必须可直接使用，不用省略号或占位符
-- 包含完整的类型定义、注释、样式
-
-### 第五步：自动质量审查（必须执行）
-
-代码生成完毕后，AI **必须自动执行以下审查**，不得跳过。如发现问题，直接修正后输出最终版本。
-
-#### 审查清单
-
-**0. 项目选型合规（最高优先级）**
-- [ ] 是否查阅了 `project-inventory` 模块？→ 必须查阅
-- [ ] 使用的三方库是否与项目选型一致？→ 对照功能选型表
-- [ ] 是否复用了项目已有的 Re* 组件？→ 不重新造轮子
-- [ ] 是否复用了项目已有的 Hook / 工具函数？→ 不重复编写
-- [ ] 是否参考了 `src/views/` 下的示例页面？→ 遵循已有代码模式
-- [ ] 如需引入新依赖，是否已标注"待确认"？→ 不得自行引入
-
-**1. 类型安全**
-- [ ] 是否存在 `any` 类型？→ 替换为具体类型或 `unknown`
-- [ ] Props 是否声明了完整类型？→ 检查 `type.ts` 是否齐全
-- [ ] API 返回值是否声明了 `Result<T>` 泛型？
-- [ ] 事件 emit 是否声明了类型？
-
-**2. 组件规范**
-- [ ] 是否使用了 `<script setup lang="ts">`？
-- [ ] 自定义组件是否有 `defineOptions({ name: "ReXxx" })`？
-- [ ] Props/Emits 是否抽到了 `type.ts`？
-- [ ] class 命名是否遵循 `re-*` 前缀？
-
-**3. API 对接**
-- [ ] 是否统一使用 POST + `data`？（不是 GET + `params`）
-- [ ] API 函数是否封装在 `src/api/` 目录？
-- [ ] 组件内是否避免了直接调用 `http`？
-- [ ] Java Long/BigDecimal 类型是否映射为 `string`？
-
-**4. 安全检查**
-- [ ] 是否存在 `v-html` 渲染用户输入？→ 禁止
-- [ ] 是否有硬编码的密钥/token？→ 移除
-- [ ] 用户输入是否做了校验？
-
-**5. 性能检查**
-- [ ] 大数据列表是否考虑了虚拟滚动？
-- [ ] 图表实例是否在 `onUnmounted` 中销毁？
-- [ ] 是否有不必要的 `watch` 或重复计算？→ 用 `computed` 替代
-- [ ] 大组件是否考虑了异步加载？
-
-**6. 样式检查**
-- [ ] 是否使用了 `<style scoped>`？
-- [ ] 颜色是否使用 CSS 变量而非硬编码？
-- [ ] 是否遵循 UnoCSS 原子类优先原则？
-- [ ] 新增全局样式是否同步添加了暗黑模式覆盖？
-- [ ] 是否通过 `setEpThemeColor()` 设置主色而非直接改 `--el-color-primary`？
-- [ ] 侧边栏样式是否通过 `html[data-theme]` 选择器设置？
-
-**7. 业务逻辑**
-- [ ] 列表页是否使用了 `useTableSearch`？
-- [ ] 表单提交按钮是否有 `loading` 防重复？
-- [ ] 详情页是否正确处理了 `route.query.id`？
-- [ ] 需要权限的地方是否加了 `v-auth` / `ReAuth`？
-
-**8. 代码风格**
-- [ ] 是否有 `console.log` 残留？→ 删除
-- [ ] 是否有未使用的 import？→ 删除
-- [ ] 是否有冗余的逻辑或死代码？→ 清理
-- [ ] 命名是否语义化、一致？
-- [ ] 国际化文案是否使用了 `$t()`？
-
-### 第六步：输出结果
-
-- 输出最终代码（已包含审查修正）
-- 简要说明匹配了哪些模块、做了哪些关键决策
-- 如有需要用户确认的点（如字段类型、接口地址），列出待确认项
+详细规范均在 `references/<模块名>.md`，与上方路由表模块 ID 一一对应。
+依赖安装命令统一以 `project-inventory.md` 第九节为准；各功能模块文首「依赖」节为摘要。