원클릭으로
convention-audit
// Use when: reviewing code for compliance with Robot Admin project conventions, or when generating a compliance report. Triggers on: convention check, 规范检查, audit, 代码审查, code review, 命名规范, naming convention, 代码规范.
// Use when: reviewing code for compliance with Robot Admin project conventions, or when generating a compliance report. Triggers on: convention check, 规范检查, audit, 代码审查, code review, 命名规范, naming convention, 代码规范.
| name | convention-audit |
| description | Use when: reviewing code for compliance with Robot Admin project conventions, or when generating a compliance report. Triggers on: convention check, 规范检查, audit, 代码审查, code review, 命名规范, naming convention, 代码规范. |
对 Robot Admin 项目中的代码进行规范合规性审查,检测违反编码约定的问题并给出修正建议。
目录命名:
| 类型 | 约定 | 示例 | 反例 |
|---|---|---|---|
| 全局组件目录 | C_ + PascalCase | C_Header/, C_Settings/ | header/, cHeader/ |
| 局部组件目录 | c_ + camelCase | c_detail/, c_role/ | Detail/, c-detail/ |
| Demo 目录 | 数字编号-功能名 | 01-icon/, 10-table/ | icon/, table-demo/ |
| Store 目录 | 领域名(kebab-case) | user/, theme/ | userStore/, s_user/ |
文件三件套:
每个页面/组件目录必须包含:
index.vue — 主组件index.scss — 样式(scoped)data.ts — 配置数据(页面级)或 types.ts(组件级)变量/函数:
| 类型 | 约定 | 示例 | 反例 |
|---|---|---|---|
| Store 导出 | s_ + camelCase + Store | s_userStore | useUserStore, userStore |
| Composable | use + PascalCase | useLoginController | loginController |
| 工具函数文件 | d_ 前缀 | d_auth.ts | auth.ts, authUtils.ts |
| 组件 name | PascalCase | defineOptions({ name: 'UserManage' }) | 缺少 name |
| API 函数 | 动词 + 资源 + Api | getUserListApi | getUsers, userList |
| 类型/接口 | PascalCase | UserInfo, FormOption | userInfo, form_option |
组件引用:
| 场景 | 约定 | 示例 |
|---|---|---|
| 模板中组件 | PascalCase | <C_Table />, <NCard /> |
| 自有组件库 | C_ 前缀 | <C_Form />, <C_ActionBar /> |
| Naive UI 组件 | N 前缀 | <NButton />, <NModal /> |
<script setup lang="ts"> 区块顺序(必须按序):
① defineOptions({ name: '...' })
② Props / Emits
③ 外部 Store / Composable
④ 响应式状态 (ref / reactive)
⑤ 计算属性 (computed)
⑥ 方法函数
⑦ 生命周期 (onMounted / onUnmounted)
⑧ Watch
⑨ defineExpose
违规检测项:
defineOptions({ name: '...' }) → 影响 DevTools 和 KeepAlivedefineProps({ ... }) → 应使用 interface + withDefaults@use './index.scss' → 应使用 @use 而非内联样式或 @importlang="ts" → 必须使用 TypeScriptscoped → 必须使用 scoped 样式自动导入违规:
以下 API 应不出现在 import 语句中(已配置自动导入):
// Vue 核心
ref, computed, watch, onMounted, nextTick, reactive, readonly, h, ...
// Vue Router
useRoute, useRouter
// Pinia
defineStore, storeToRefs
// VueUse
useLocalStorage, useClipboard, useDebounceFn, ...
// Naive UI 组件
NCard, NButton, NSpace, NInput, NSelect, NTag, NModal, ...
// Naive UI Composables
useMessage, useDialog, useNotification, useLoadingBar
// 用户自定义(stores / composables / hooks)
s_userStore, s_themeStore, useLoginController, ...
导入顺序违规:
正确顺序:
1. 外部样式
2. Vue 核心
3. 路由/状态
4. UI 库
5. @robot-admin/* 自有包
6. 项目内部 @/ 别名
7. 相对路径 ./
路径别名违规:
../../stores/user → 应使用 @/stores/user../../../api/auth → 应使用 @/api/auth文件头注释(必须存在):
/*
* @Author: ChenYu ycyplus@gmail.com
* @Date: YYYY-MM-DD
* @LastEditors: ChenYu ycyplus@gmail.com
* @LastEditTime: YYYY-MM-DD
* @FilePath: \Robot_Admin\src\xxx\xxx.ts
* @Description: 文件描述
* Copyright (c) YYYY by CHENY, All Rights Reserved 😎.
*/
JSDoc 注释(所有导出函数/类/方法必须有):
/**
* * @description: 功能描述
* ? @param {Type} name 参数说明
* ! @return {ReturnType} 返回值说明
*/
any → 应使用具体类型或 unknowngetData<T>() 必须指定 T优先级规则:
1. UnoCSS 原子类(间距、布局、颜色)
2. 组件 SCSS(复杂样式)
3. CSS 变量(主题适应)
违规检测:
color: #333 → 应使用 CSS 变量 var(--c-text-1)@import 导入样式 → 应使用 @usescoped 属性axios → 应使用 @robot-admin/request-coregenerated/index.ts 中getData<T>(...)s_ 前缀// ============ 状态 ============useXxxStore 命名(应为 s_xxxStore)提交信息格式:
<type>(<scope>): <subject>
审计结果以表格呈现:
## 审计报告:{{文件路径}}
| # | 维度 | 级别 | 问题描述 | 建议修正 |
| --- | ---- | -------- | ------------------------ | ------------------------------- |
| 1 | 命名 | 🔴 Error | Store 命名缺少 s\_ 前缀 | `useUserStore` → `s_userStore` |
| 2 | 注释 | 🟡 Warn | 缺少文件头注释 | 添加 @Author/@Date/@Description |
| 3 | 导入 | 🟡 Warn | 手动导入了 ref | 删除 import,已自动导入 |
| 4 | 样式 | 🔵 Info | 可使用 UnoCSS 原子类替代 | `p-4` 替代 `padding: 16px` |
### 等级说明
- 🔴 Error: 必须修正,违反强制规则
- 🟡 Warn: 建议修正,违反推荐规则
- 🔵 Info: 可选优化,提升代码质量
当用户说"帮我检查下这个文件的规范"时,按以下流程执行:
Use when: upgrading dependencies, adding common features, or when the user explicitly requests branch sync check. Triggers on: 分支同步, branch sync, 版本升级, dependency upgrade, 同步更新, sync branches, 依赖更新, 通用功能.
Use when: generating Vue 3 page code from either a page-spec JSON or a natural language description. Outputs index.vue + data.ts + index.scss following Robot Admin conventions. Triggers on: page generation, code generation, 生成页面, 代码生成, vue页面, codegen, 页面骨架, scaffold, 建个页面, 写个页面, 帮我做个页面, 口述需求, natural language page request.
Use when: generating mock data for development without a backend. Optional skill - activated when user confirms or explicitly requests it. Triggers on: 生成mock, mock数据, 模拟数据, mock生成, 前端mock, 联调前mock.
Use when: generating TypeScript API layer (type definitions + request functions) from page-spec JSON or Swagger/OpenAPI docs. Triggers on: api contract, api generation, 接口约定, 生成api, swagger to ts, openapi, 接口文件, api层.
Use when: analyzing Axure exported HTML prototype files or detailed design documents to extract page inventory, classify interaction patterns, and produce a structured page-spec JSON for Vue 3 + Naive UI development. Triggers on: prototype analysis, axure scan, page inventory, 原型解析, 页面清单, axure转vue, 详设文档, design doc.
Use when: registering new pages into the dynamic router system. Adds route entries to dynamicRouter.json and optionally updates keepAliveConfig.ts. Triggers on: route registration, 注册路由, 添加菜单, menu registration, 路由配置, dynamicRouter, 新增页面路由.