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

package/README.md

@@ -1,10 +1,18 @@
 # vue3-temp-skill
 
-Vue 3 企业级中后台项目开发规范技能包 -- 让 AI 编程助手按照团队规范生成代码，并自动审查代码质量。
+Vue 3 企业级中后台项目开发规范技能包 — 让 AI 按团队规范生成代码，并自动审查质量。
 
 ## 这是什么
 
-一个 AI Skill 文件包，包含 32 个功能模块，覆盖 Vue 3 中后台项目从开发到交付的完整流程。安装后，只需一个命令 `/vue3-temp-skill` 加上自然语言描述需求，AI 就会自动匹配对应模块规范生成代码，并在生成后自动执行代码质量审查。
+外置 AI Skill：`/vue3-temp-skill <需求>` → 自动命中模块 → 按项目约定生成 → 自查。
+
+**设计要点（v1.1）**：
+
+- **始终加载** `core-kernel` + `project-inventory` + `code-quality`
+- **Vite / 脚本 / 入口不单独成 Skill**（工程摘要在 core-kernel）
+- **组件 / Hook 分核心与附加**，专项能力按需命中
+- 按 `references/` 内完整示例编写；复用已有封装；选型表指定库勿擅自替换（新依赖须待确认）
+- **addon 依赖**：`project-inventory` 第九节提供与模板 `package.json` 对齐的**精确版本** + `pnpm` 安装命令（含 Vite 插件 `-D`）；缺包须征得确认后再装
 
 ## 使用方式
 
@@ -14,231 +22,75 @@ Vue 3 企业级中后台项目开发规范技能包 -- 让 AI 编程助手按照
 
 示例：
 
-- `/vue3-temp-skill 帮我开发一个客户管理模块，需要按客户名称、状态查询，字段包括客户编号、名称、联系方式、创建时间`
-- `/vue3-temp-skill 封装一个部门选择器组件，支持远程搜索和分页`
-- `/vue3-temp-skill 给这个页面加上按钮权限，只有 admin 角色能看到删除按钮`
-- `/vue3-temp-skill 帮我做一个知识图谱页面，用力导向布局`
-- `/vue3-temp-skill 开发一个 BPMN 工作流查看页面`
-
-AI 接收到请求后会自动完成：
-
-1. 分析需求，自动匹配对应的规范模块（无需手动指定）
-2. 按照项目模板规范生成完整代码
-3. 自动执行代码质量审查（类型安全、组件规范、API 对接、安全检查、性能、样式、业务逻辑、代码风格）
-4. 如发现问题直接修正，输出最终可用代码
-
-## 包含的模块
-
-技能包内置 32 个规范模块，AI 根据需求自动匹配，无需手动选择：
-
-| 模块 | 覆盖场景 |
-|------|---------|
-| vue-core | 项目基础、组件开发、路由/状态管理/i18n |
-| http-api | API 接口调用、文件上传下载、加密请求 |
-| ui-components | Re* 公共组件开发、组件库维护 |
-| crud-pages | 查询列表页、表单页、详情/编辑页 |
-| advanced-ui | 选择器、高级表格、图表、工作流 |
-| layout-theme | 布局、主题、响应式、PC/移动端双端 |
-| permission-auth | 页面/按钮权限、自定义指令、Hooks |
-| mobile-h5 | 移动端页面、Vant 组件、微信集成 |
-| build-optim | Vite 构建、代码分割、ESLint 工具链 |
-| code-quality | 代码审查、AI 代码自检、Code Review（始终生效） |
-| api-check | 前后端接口联调、契约验证、Mock |
-| feedback-loading | Loading 遮罩、Message 提示、MessageBox 弹窗 |
-| base-code-dict | 码表/字典数据获取、缓存、映射显示 |
-| download-export | 文件下载、模板下载、文件流导出 |
-| seamless-scroll | 无缝滚动、公告栏、排行榜滚动 |
-| qrcode-barcode | 二维码/条形码生成与展示 |
-| rich-text | 富文本编辑器录入、图文混排 |
-| verify-captcha | 滑块验证、拖拽验证、图片验证码、短信倒计时 |
-| data-screen | 数据大屏/可视化大屏开发 |
-| form-advanced | 图标选择器、分段控制器、卡片选择、锚点、地址解析 |
-| feedback-ui | 通知栏、水印、时间轴、闪烁点、打字机动画 |
-| graph-relation | 知识图谱、关系图谱、力导向布局 |
-| workflow-bpmn | BPMN 工作流查看、流程审批可视化 |
-| flowchart-g6 | G6 流程图、树形流程、Vue 节点渲染 |
-| data-mapping | JsPlumb 字段映射、拖拽连线 |
-| websocket-realtime | WebSocket 实时通信、多实例管理 |
-| file-management | 附件上传管理、文件预览 |
-| directives-advanced | 高级自定义指令（复制、自适应字体） |
-| data-compare | 编辑页数据变更对比、高亮、汇总弹窗、表格行增删改 |
-| detail-page | 详情页/编辑页跳转与数据回显 |
-| data-writeback | 表单数据回显、编辑回填、多表单校验 |
-| tree-table | 树形表格、树结构转换、树形连线 |
+- `/vue3-temp-skill 帮我开发一个客户管理模块，按名称、状态查询`
+- `/vue3-temp-skill 远程搜索下拉，支持分页与回写`
+- `/vue3-temp-skill 编辑页加数据变更对比`
+- `/vue3-temp-skill 关系图谱，力导向布局`
+- `/vue3-temp-skill 移动端客户列表用 Vant`
+
+## 模块一览
+
+### 始终加载
+
+| 模块 | 覆盖 |
+|------|------|
+| core-kernel | 硬约束、壳、CRUD 积木、工程摘要 |
+| project-inventory | 库精确版本 / 组件 / Hook / 选型对照 / **第九节安装表** |
+| code-quality | 生成后审查 |
+
+### 标准业务面
+
+| 模块 | 覆盖 |
+|------|------|
+| http-api | 接口、加密、基础下载 |
+| crud-pages | 列表/表单 CRUD（`onSearch`/`reset`） |
+| detail-page / data-writeback | 详情跳转、回显 |
+| permission-auth | 页面/按钮权限 |
+| layout-theme | 布局主题、CSS 变量 |
+| feedback-loading / base-code-dict / api-check | 反馈、字典、联调 |
+| ui-components | 新封装 Re* |
+
+### 专项能力
+
+| 模块 | 覆盖 |
+|------|------|
+| form-advanced / table-vxe / tree-table / chart-echarts | 弹窗(ReDialog)、表单增强、VXE、树表、图表 |
+| file-management / download-export / rich-text | 附件预览、导出、富文本 |
+| graph-relation / workflow-bpmn / flowchart-g6 / data-mapping | 图谱与工作流 |
+| websocket-realtime / mobile-h5 / wechat-js | 实时、移动、微信 |
+| verify-captcha / qrcode-barcode / feedback-ui / seamless-scroll | 验证码、码、反馈 UI |
+| particles | 粒子特效（tsParticles 登录/氛围背景） |
+| data-compare / data-screen / directives-advanced | 对比、大屏、指令 |
 
 ## 安装
 
 ### 前置条件
 
 - Node.js >= 22.12.0
-- npm / pnpm / yarn 均可
-
-### 安装到指定 AI 工具
-
-```bash
-# 通过 npx（推荐，自动使用最新版本）
-npx @qilitt-mickey/vue3-temp-skill@latest install cursor       # Cursor
-npx @qilitt-mickey/vue3-temp-skill@latest install qoder        # Qoder
-npx @qilitt-mickey/vue3-temp-skill@latest install copilot      # GitHub Copilot（项目级）
-npx @qilitt-mickey/vue3-temp-skill@latest install windsurf     # Windsurf
-npx @qilitt-mickey/vue3-temp-skill@latest install gemini       # Gemini CLI（项目级）
-npx @qilitt-mickey/vue3-temp-skill@latest install trae         # Trae
-npx @qilitt-mickey/vue3-temp-skill@latest install claude       # Claude Code
-npx @qilitt-mickey/vue3-temp-skill@latest install universal    # 通用标准 ~/.agents/skills
-npx @qilitt-mickey/vue3-temp-skill@latest install all          # 安装到所有工具
-
-# 通过 pnpm
-pnpm dlx @qilitt-mickey/vue3-temp-skill@latest install cursor
-
-# 全局安装后使用
-npm install -g @qilitt-mickey/vue3-temp-skill
-vue3-temp-skill install cursor
-```
-
-### 安装位置说明
 
-| 目标 | 全局安装路径 | 项目安装（`--project`） |
-|------|-------------|------------------------|
-| cursor | `~/.cursor/skills/vue3-temp-skill/` | `<项目>/.cursor/skills/vue3-temp-skill/` |
-| claude | `~/.claude/skills/vue3-temp-skill/` | `<项目>/.claude/skills/vue3-temp-skill/` |
-| universal | `~/.agents/skills/vue3-temp-skill/` | `<项目>/.agents/skills/vue3-temp-skill/` |
-| qoder | `~/.qoderworkcn/skills/vue3-temp-skill/` | `<项目>/.qoder/skills/vue3-temp-skill/` |
-| windsurf | `~/.windsurf/rules/vue3-temp-skill.md` | `<项目>/.windsurf/rules/vue3-temp-skill.md` |
-| trae | `~/.trae/rules/vue3-temp-skill.md` | `<项目>/.trae/rules/vue3-temp-skill.md` |
-| copilot | 当前目录 `.github/copilot-instructions.md`（建议加 `--project`） | `<项目>/.github/copilot-instructions.md` |
-| gemini | 当前目录 `GEMINI.md`（建议加 `--project`） | `<项目>/GEMINI.md` |
-
-> **注意**：`install all` 默认写入用户主目录下的技能目录。Copilot / Gemini 是项目级配置，未加 `--project` 时会写到**你执行命令时的当前目录**，容易误以为「没装上」。
-
-> 若本机曾经配置过 `@qilitt:registry=https://npm.pkg.github.com`，请删除该配置，否则仍会走旧源并 401：  
-> `npm config delete @qilitt:registry`  
-> 并检查 `~/.npmrc` 中是否还有 `npm.pkg.github.com` 相关行。
-
-### 安装到指定项目
+### 安装到 AI 工具
 
 ```bash
-npx @qilitt-mickey/vue3-temp-skill@latest install cursor --project ./my-vue-app
+npx @qilitt-mickey/vue3-temp-skill@latest install all
+# 或指定：cursor / claude / universal / ...
 ```
 
-### 更新技能
-
-当技能包发布新版本后，使用 `update` 命令同步更新：
+| 目标 | 全局路径示例 |
+|------|-------------|
+| cursor | `~/.cursor/skills/vue3-temp-skill/` |
+| claude | `~/.claude/skills/vue3-temp-skill/` |
+| universal | `~/.agents/skills/vue3-temp-skill/` |
 
-```bash
-# 更新所有已安装的目标到最新版本
-npx @qilitt-mickey/vue3-temp-skill@latest update
-
-# 更新指定目标
-npx @qilitt-mickey/vue3-temp-skill@latest update cursor
-```
+更多目标与 `--project` 见包内历史说明或 `bin/cli.js`。
 
-> `@latest` 标签确保 npx 每次都下载最新版本，无需手动清理缓存。
-
-### 其他命令
-
-```bash
-# 查看已安装的目标
-npx @qilitt-mickey/vue3-temp-skill list
-
-# 卸载
-npx @qilitt-mickey/vue3-temp-skill uninstall cursor     # 卸载指定目标
-npx @qilitt-mickey/vue3-temp-skill uninstall            # 卸载全部
-```
-
-## 目录结构
-
-```
-vue3-temp-skill/
-├── bin/
-│   └── cli.js              # CLI 入口（npx 调用）
-├── SKILL.md                # 主入口：路由索引 + 核心规范 + 质量审查清单
-├── references/             # 32 个模块详细文档
-│   ├── vue-core.md             # 项目基础规范
-│   ├── http-api.md             # HTTP 与 API 规范
-│   ├── ui-components.md        # Re* 组件开发规范
-│   ├── crud-pages.md           # CRUD 页面开发流程
-│   ├── advanced-ui.md          # 高级 UI 组件
-│   ├── layout-theme.md         # 布局与主题
-│   ├── permission-auth.md      # 权限与指令
-│   ├── mobile-h5.md            # 移动端与微信
-│   ├── build-optim.md          # 构建与工程化
-│   ├── code-quality.md         # 代码质量审查
-│   ├── api-check.md            # 接口对接检查
-│   ├── feedback-loading.md     # 反馈与 Loading
-│   ├── base-code-dict.md       # 基础代码（字典）
-│   ├── download-export.md      # 下载与导出
-│   ├── seamless-scroll.md      # 无缝滚动
-│   ├── qrcode-barcode.md       # 二维码与条形码
-│   ├── rich-text.md            # 富文本编辑器
-│   ├── verify-captcha.md       # 验证码与校验
-│   ├── data-screen.md          # 数据大屏
-│   ├── form-advanced.md        # 高级表单组件
-│   ├── feedback-ui.md          # 展示类反馈组件
-│   ├── graph-relation.md       # 知识图谱
-│   ├── workflow-bpmn.md        # BPMN 工作流
-│   ├── flowchart-g6.md         # G6 流程图
-│   ├── data-mapping.md         # JsPlumb 字段映射
-│   ├── websocket-realtime.md   # WebSocket 实时通信
-│   ├── file-management.md      # 文件管理
-│   ├── directives-advanced.md  # 高级自定义指令
-│   ├── data-compare.md         # 数据变更对比
-│   ├── detail-page.md          # 详情页开发
-│   ├── data-writeback.md       # 数据回显
-│   └── tree-table.md           # 树形表格
-├── package.json            # npm 包配置
-├── install.js              # 兼容旧版安装脚本
-└── README.md
-```
-
-## 自定义
-
-根据你的团队情况修改 `SKILL.md` 和 `references/` 下的文件：
-
-1. 调整技术栈版本号、组件库选择
-2. 修改组件命名规则、目录结构约定
-3. 补充团队特有的业务组件和 API 模式
-4. 调整代码质量检查清单
-
-## 维护者：发布到 npmjs.org
-
-### 首次发布（一次性）
-
-1. 注册 [npmjs.com](https://www.npmjs.com/signup)
-2. 在浏览器中登录 npm，进入 Settings → Access Tokens → Generate New Token
-3. 创建一个 Granular Access Token：
-   - 勾选 **Bypass two-factor authentication (2FA)**
-   - Packages 选 **Read and write** → **All packages**
-   - Organizations 选 **No access**
-   - Expiration 选 **90 days**
-4. 将生成的 token 写入 `~/.npmrc`：
-   ```bash
-   # Windows: C:\Users\<用户名>\.npmrc
-   # macOS/Linux: ~/.npmrc
-   //registry.npmjs.org/:_authToken=npm_你的token值
-   ```
-5. 确认 `package.json` 中的 `name` 字段使用正确的 scope（本包为 `@qilitt-mickey/vue3-temp-skill`）
-6. 在本仓库目录发布：
-   ```bash
-   npm publish --registry=https://registry.npmjs.org --@qilitt-mickey:registry=https://registry.npmjs.org
-   ```
-7. 验证：
-   ```bash
-   npm view @qilitt-mickey/vue3-temp-skill version
-   npx @qilitt-mickey/vue3-temp-skill@latest --help
-   ```
-
-> 注意：npm 搜索索引对新包有延迟，发布后可能需要几小时才能在 npmjs.com 搜索到。
-
-### 日常发版
-
-```bash
-npm run release          # 补丁 1.0.8 → 1.0.9
-npm run release:minor    # 次版本
-npm run release:major    # 主版本
-```
+## 生成工作流（AI）
 
-脚本会：升版本 → git commit → push Gitee → `npm publish --access public`。
+1. 解析需求 → 命中路由表  
+2. 读 core-kernel + inventory + code-quality  
+3. **addon**：查业务 `package.json`，缺失则按 inventory 第九节精确版本征得确认后 `pnpm add`（含 `-D` 插件）  
+4. 读功能模块；仓库有实现则对齐，用 Skill 示例  
+5. 生成 → 审查 → 修正输出  
 
-## License
+## 源码位置
 
-MIT
+技能包源码维护于：`E:/work/Project/Template/skills/vue3-temp-skill`（发布 npm 后再 `install` 到各 AI 工具）。