@qilitt-mickey/vue3-temp-skill 1.1.13 → 1.1.14

package/SKILL.md

@@ -24,11 +24,20 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 
 1. 先读 `references/core-kernel.md`
 2. 复用仓库已有 `Re*` / Hook / utils；选型表指定库勿擅自替换
-3. 按命中模块内完整示例编写
+3. 按命中模块内**强制完整样板**整段编写（禁止只抄 API 签名、丢掉 meta/配套段落）
 4. 无对应能力 → 标注「待确认」，未经同意不引入新依赖
 5. 真相源：`仓库已有封装` > `本 Skill 示例` > 通用 Vue 习惯
 6. 命中 addon / 缺依赖时再读 `project-inventory.md` 第九节；精确版本安装，禁止 `@latest`
 
+## 抗略读（全模块 · 提高命中率）
+
+按需模块 ≠ 可浅读。命中即须落到该文件的**完整样板 / Must-do**，生成后靠 `code-quality` 硬失败表兜底。
+
+1. **样板字段默认写出**：示例里写明的 `activePath` / `keepAlive` / `roles` / `responseType: "blob"` 等不得改成 `//` 注释再当可选项；仅业务明确不需要时才删除
+2. **关联能力同批落盘**：列表→详情 = `crud-pages` + `detail-page` 三件套；有 API = 同步 `http-api`；有删除 = 确认框；有编辑回显 = `Object.assign`
+3. **Hook ≠ 壳层自动**：`toDetail` 写 tag；侧栏高亮 / keepAlive 靠路由 meta；`http` 加解密靠环境开关，不靠单请求配置
+4. **大范围交付仍须逐模块核对硬失败表**，禁止「lint 过了就算完」
+
 ## 模块路由表
 
 ### 始终加载
@@ -112,7 +121,8 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 
 - HTTP：`import { http } from '@/utils/http'`；方法跟后端（允许 GET/POST）；`Result<T>`；`VITE_API_BASE_URL` → `http-api`
 - 列表：`onSearch` / `reset` + 黄金样板 → `crud-pages`
-- 独立详情：`toDetail` + 路由 meta → `detail-page`
+- 独立详情：`toDetail` **不能替代** `activePath` / `keepAlive` / `moreTags`；三件套 → `detail-page`
+- 权限：`meta.roles` + `v-auth`/`ReAuth` → `permission-auth`
 - 不二次挂 Layout；`script setup` + `defineOptions({ name })`；`$t('中文')`；样式契约 → `core-kernel`
 
 ## 工作流
@@ -134,6 +144,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 ## 代码质量审查
 - 闸门：已执行 code-quality（生成后）
 - 清单：选型 / 类型 / 组件 / API / 安全 / 业务 / 列表→详情(如适用) / 列表布局(如适用) / 风格 → 通过 | 已修正：…
+- 硬失败：无 | 已拦截并修正：…
 - 命令：`pnpm lint:fix` → …；`pnpm type-check` → …
 - 待确认：…
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qilitt-mickey/vue3-temp-skill",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Vue 3 企业级中后台项目开发规范技能包 — core-kernel 架构、按需功能模块",
   "bin": {
     "vue3-temp-skill": "./bin/cli.js"

package/references/api-check.md

@@ -9,6 +9,8 @@ tags: [api, backend, integration, contract, http, checklist, mock]
 
 写法与示例 → **`http-api`**。本文件只做联调核对。权威源：`types/global.d.ts`、`src/utils/http.ts`、`src/api/**`、`mock/**`、`useTableSearch`。
 
+**抗略读**：联调阶段仍须核对「下载是否带 blob」「分页字段是否 content/totalCount」；契约不过 = API 未完成，禁止只靠 lint 放行。
+
 ## 基本信息
 
 - [ ] 业务 path 与后端文档一致；忌把 `/mock/...` 当生产约定

package/references/code-quality.md

@@ -12,7 +12,7 @@ tags: [code-review, quality, checklist, lint, typescript, vue3, security, perfor
 ## 协议（按序）
 
 1. 重读本文件
-2. 列出本轮改动路径，对照下方清单
+2. 列出本轮改动路径，对照下方清单；**硬失败表命中则先改代码再继续**
 3. 业务项目根目录必跑：`pnpm lint:fix` → `pnpm type-check`（无脚本则 `pnpm lint` / `pnpm exec eslint . --fix`；`pnpm exec vue-tsc --noEmit`）
 4. 失败则修代码并重跑，直至通过或写明阻塞
 5. 最终回复追加：
@@ -22,11 +22,29 @@ tags: [code-review, quality, checklist, lint, typescript, vue3, security, perfor
 - 闸门：已执行 code-quality（生成后）
 - 改动文件：`path/a`、`path/b`、…
 - 清单：选型 ✅ / 类型 ✅ / 组件 ✅ / API ✅ / 安全 ✅ / 业务 ✅ / 列表→详情 ✅或N/A / 列表布局 ✅或N/A / 风格 ✅
+- 硬失败：无 | 已拦截并修正：…
 - 已修正：…（无则写「无」）
 - 命令：`pnpm lint:fix` → …；`pnpm type-check` → …
 - 待确认：…
 ```
 
+## 硬失败（对照落盘文件；命中即未通过）
+
+lint / type-check **过了也不能放过**下列项。发现即改代码，禁止「已知问题后续再说」。
+
+| 触发条件（改动里出现） | 未通过条件 | 正确做法 |
+|------------------------|------------|----------|
+| `toDetail` / 独立 `*Detail` 路由 | 路由无 `activePath`，或 `showLink` 非 `false` | `detail-page` 三件套 |
+| 同上 | 默认场景缺 `keepAlive`/`moreTags`（业务未声明不要缓存） | 样板默认写出；不要缓存再删 |
+| 同上 | 详情页无 `initToDetail`，或 `name` 与路由不一致 | 对齐 `defineOptions` |
+| 列表页 | 无 `el-card.vts-page-card` / 无 `tableHeight` / 分页在 ReTableBar 外 | `crud-pages` L1–L8 |
+| `src/api/**` | 绕过 `@/utils/http`，或虚构 `/api` 前缀，或响应当 `success`/`code` | `http-api` |
+| 下载/导出 API | 无 `responseType: "blob"` | `http-api` / `download-export` |
+| 删除/危险操作 | 无确认框 | `feedback-loading` |
+| 编辑回显 | 整表 `formData = res.data` 破坏响应式 | `Object.assign`（`data-writeback`） |
+| 按钮权限需求 | 裸 `v-if` 角色判断，未用 `v-auth`/`ReAuth` | `permission-auth` |
+| 新菜单路由 | 父级无 `icon` 或业务页二次挂 `Layout` | `icons` + `core-kernel` |
+
 ## 选型与硬约束
 
 - [ ] 已读 `core-kernel`；addon/缺依赖时已读 `project-inventory`
@@ -34,7 +52,7 @@ tags: [code-review, quality, checklist, lint, typescript, vue3, security, perfor
 - [ ] addon 缺包按 inventory 第九节精确版本（禁止 `@latest`）
 - [ ] 列表方法名 `onSearch` / `reset`；HTTP 用 `@/utils/http` + `Result<T>`
 - [ ] 业务路由未二次挂 Layout
-- [ ] 独立详情：`showLink:false` + `activePath` + `toDetail` + `initToDetail`（细则 `detail-page`）
+- [ ] 独立详情：对照路由文件确认 `showLink:false` + `activePath` + `keepAlive`/`moreTags`（默认）+ `toDetail` + `initToDetail`
 - [ ] 列表布局按 `crud-pages` 黄金样板（`el-card.vts-page-card`+`content`+固定 height、`tableHeight`、`otherRef`、分页在 ReTableBar 内；内容区无外层滚动条）
 
 ## TypeScript
@@ -88,13 +106,12 @@ tags: [code-review, quality, checklist, lint, typescript, vue3, security, perfor
 ## 业务
 
 - [ ] 提交前 `validate()`；删除有确认；提交有 loading；列表有 `v-loading`
-- [ ] 编辑回显正确；分页切换会拉数
+- [ ] 编辑回显正确（`Object.assign`）；分页切换会拉数
 
-### 列表→详情（命中 detail-page 时）
+### 列表→详情（改动含 toDetail / *Detail 路由时强制，禁止 N/A 糊弄）
 
-- [ ] 兄弟绝对 path；`showLink:false`；`activePath`=列表 path；非空 `title`
-- [ ] 仅 `toDetail`；详情 `initToDetail`；`name` 对齐
-- [ ] 按需 `keepAlive` / `moreTags`
+- [ ] **打开落盘路由文件**核对：兄弟绝对 path；`showLink:false`；`activePath`=列表 path；非空 `title`；默认 `keepAlive`+`moreTags`
+- [ ] 仅 `toDetail`；详情 `initToDetail`；`name` 对齐；`toDetail` 第 3 参 title 可辨识
 
 ### 列表布局（命中 crud-pages 时）
 

package/references/core-kernel.md

@@ -18,7 +18,7 @@ tags: [vue3, kernel, conventions, layout, router, http, crud, inventory]
 | 3 | 方法跟后端文档，**允许 GET / POST**；POST → `data`，GET → `params` |
 | 4 | 列表用 `useTableSearch`，方法名 **`onSearch` / `reset`** |
 | 5 | 业务路由 **禁止** 再挂 `component: Layout` |
-| 6 | 独立详情/编辑：路由与跳转按 **`detail-page`**（`showLink` / `activePath` / `toDetail` / `initToDetail`） |
+| 6 | 独立详情/编辑：按 **`detail-page` 三件套**（`showLink`+`activePath`+默认`keepAlive`/`moreTags` + `toDetail` + `initToDetail`）；`toDetail`≠自动侧栏高亮/缓存 |
 | 7 | 页面权限 `meta.roles`；按钮 `v-auth` / `ReAuth` |
 | 8 | 环境只用 `import.meta.env.VITE_*` |
 | 9 | i18n：`$t('中文key')` |
@@ -44,11 +44,15 @@ export default {
       component: () => import("@/views/xxx/list/index.vue"),
       meta: { title: "客户列表", roles: ["admin", "common"] },
     },
-    // 独立详情：兄弟路由 + showLink/activePath，完整约定见 detail-page
+    // 独立详情：兄弟路由 + showLink + activePath + keepAlive/moreTags，见 detail-page 三件套
   ],
 } satisfies RouteConfigsTable;
 ```
 
+### 抗略读
+
+命中模块须照其**强制完整样板**落盘；样板中的字段默认写出。壳层行为（tag / 侧栏 / keep-alive）以路由 meta + 项目已有实现为准，不假设 Hook 会「全自动」。
+
 ### 权限
 
 ```vue

package/references/crud-pages.md

@@ -9,6 +9,8 @@ tags: [vue3, crud, list, form, detail, table, useTableSearch, page, layout]
 
 遵守 `core-kernel` / `http-api`。独立详情路由 → 同时加载 `detail-page`。回显 → `data-writeback`。
 
+**抗略读**：列表页必须整段照抄「列表黄金样板」；有独立详情时 **同批** 落 `detail-page` 三件套（禁止只写 `toDetail`）。方法名固定 `onSearch` / `reset`。
+
 ## useTableSearch
 
 ```typescript
@@ -238,6 +240,8 @@ function handleSizeChange(size: number) {
 
 ## 列表 → 详情/编辑
 
+有独立详情/编辑路由时：**必须同时命中并深读 `detail-page`**。禁止只抄下面的 `toDetail` 就交卷。
+
 ```typescript
 import { useDetail } from "@/hooks/useDetail";
 const { toDetail } = useDetail();
@@ -254,7 +258,24 @@ function onEdit(row: Customer, mark: "edit" | "view") {
 }
 ```
 
-路由 meta 与详情页 `initToDetail` → **`detail-page`**。
+**同批必落兄弟路由 meta**（完整三件套见 `detail-page`；此处不可省略）：
+
+```typescript
+{
+  path: "/customer/detail",
+  name: "CustomerDetail",
+  component: () => import("@/views/customer/detail/index.vue"),
+  meta: {
+    title: "客户详情",
+    showLink: false,
+    activePath: "/customer/list",
+    keepAlive: true,
+    moreTags: true,
+  },
+},
+```
+
+详情页 `initToDetail` + `defineOptions({ name })` 对齐 → **`detail-page`**。
 
 ## 表单页
 
@@ -315,7 +336,7 @@ async function onSubmit() {
 },
 ```
 
-独立详情兄弟路由 → `detail-page`。禁止业务模块再挂 Layout。
+独立详情兄弟路由（含 `activePath` / `keepAlive` / `moreTags`）→ `detail-page`。禁止业务模块再挂 Layout。
 
 ## 反例（短表）
 
@@ -325,6 +346,7 @@ async function onSubmit() {
 | `ref="content"` 挂 div / 只用 minHeight / 缺 `vts-page-card` | `el-card.vts-page-card` + 固定 height |
 | 不绑 `tableHeight` / 分页在卡片外 / 手写魔法数扣高度 | 样板 L6/L7；高度交给 `useTableSearch` |
 | 额外模块不绑 `otherRef` | L8 |
-| 裸 `router.push` 开详情 | `toDetail`（见 detail-page） |
+| 只写 `toDetail`、详情路由缺 `activePath` | 三件套整段落盘（见 detail-page） |
+| 裸 `router.push` 开详情 | `toDetail` + meta（见 detail-page） |
 | `ReTableOperate :buttons` | `:list` |
 | `@show-collapse` | `@should-show-collapse` |

package/references/data-writeback.md

@@ -2,6 +2,19 @@
 
 > 按本文件示例编写，复用项目已有回显/回填约定与选择器回写方式，勿另起一套表单赋值实现。
 
+**抗略读**：编辑回显**必须** `Object.assign(formData, res.data)`，禁止 `formData = res.data` 破坏响应式。提交按钮默认带 `loading`。
+
+## 强制样板（编辑回显）
+
+```typescript
+async function getDetail() {
+  const { id } = getParameter.value;
+  if (!id) return;
+  const res = await getDetailApi({ id });
+  if (res.status === 200 && res.data) Object.assign(formData, res.data);
+}
+```
+
 ## 表单回显
 
 ### 新增/编辑页

package/references/detail-page.md

@@ -9,18 +9,13 @@ tags: [vue3, detail, toDetail, useDetail, activePath, showLink, multiTags, keepA
 
 真相源：模版 `useDetail.ts`、`multiTags`、侧栏 `NavVertical`。列表打开独立路由页时按本文件落地。
 
-## 概念
+**反认知偏差（必读）**：`toDetail` 只负责写顶部 tag 并跳转；**侧栏高亮靠 `meta.activePath`，缓存/多开靠 `meta.keepAlive` / `moreTags`**。三者缺一不可，禁止只写 `toDetail`。
 
-| 能力 | 字段 / API |
-|------|------------|
-| 不进左侧菜单 | 路由 `meta.showLink: false` |
-| 顶部 tag（multiTags） | `useDetail().toDetail` → `handleTags('push')` |
-| 侧栏高亮 | 路由 `meta.activePath` = 列表 path |
-| 页面缓存 | `meta.keepAlive`；多开 tag 再加 `moreTags: true` |
+## 详情三件套（强制完整样板 · 整段照抄再改名）
 
-`showLink` 只管侧栏是否显示，不控制顶部 tag。详情不在菜单里 → 必须用 `toDetail` 写 tag；裸 `router.push` 只换路由。
+缺任一段 = 未完成。样板内字段**默认全部写出**（勿改成 `//` 注释再「按需打开」）。仅当业务明确不要缓存/多开时，才删掉对应行。
 
-## 路由（与列表兄弟）
+### ① 兄弟路由 meta
 
 ```typescript
 {
@@ -31,36 +26,27 @@ tags: [vue3, detail, toDetail, useDetail, activePath, showLink, multiTags, keepA
     title: "客户详情",
     showLink: false,
     activePath: "/customer/list",
-    // keepAlive: true,
-    // moreTags: true,
+    keepAlive: true,
+    moreTags: true,
   },
 },
 ```
 
-| 字段 | 要求 |
-|------|------|
-| `title` | 非空 |
-| `showLink: false` | 必填 |
-| `activePath` | = 列表 path |
-| `name` | = `defineOptions({ name })` |
-
-## 列表打开
+### ② 列表页打开
 
 ```typescript
 import { useDetail } from "@/hooks/useDetail";
 const { toDetail } = useDetail();
 
 toDetail("CustomerDetail", { webId: "0" }, "(新增)");
-toDetail("CustomerDetail", { id: row.id, text: row.name, mark: "edit" }, `(编辑)【${row.name}】`);
+toDetail(
+  "CustomerDetail",
+  { id: row.id, text: row.name, mark: "edit" },
+  `(编辑)【${row.name}】`,
+);
 ```
 
-```typescript
-toDetail(name, parameter, title?, model = "query") // model: "query" | "params"
-```
-
-写入 tag 时不要把路由上的 `showLink: false` 原样塞进 `handleTags` 的 meta。
-
-## 详情页
+### ③ 详情页初始化
 
 ```vue
 <script setup lang="ts">
@@ -72,12 +58,36 @@ const { id, mark } = getParameter as DetailParameter;
 </script>
 ```
 
-`initToDetail` 标题：无 id → `(新增)`；`mark===edit'` → `(编辑)【text】`；`view` → `(查看)【text】`。
+## 概念
+
+| 能力 | 字段 / API | 谁负责 |
+|------|------------|--------|
+| 不进左侧菜单 | `meta.showLink: false` | 路由 |
+| 顶部 tag | `toDetail` → `handleTags('push')` | Hook |
+| 侧栏高亮 | `meta.activePath` = 列表 path | 路由 |
+| 页面缓存 / 多开 | `meta.keepAlive` + `moreTags: true` | 路由 |
+
+`showLink` 只管侧栏是否显示，不控制顶部 tag。裸 `router.push` 只换路由、不写 tag。
+
+| 字段 | 要求 |
+|------|------|
+| `title` | 非空 |
+| `showLink: false` | 必填 |
+| `activePath` | = 列表 path（必填） |
+| `keepAlive` / `moreTags` | 默认 `true`；不要缓存/多开再删 |
+| `name` | = `defineOptions({ name })` |
+
+```typescript
+toDetail(name, parameter, title?, model = "query") // model: "query" | "params"
+```
+
+写入 tag 时不要把路由上的 `showLink: false` 原样塞进 `handleTags` 的 meta。
+
+`initToDetail` 标题：无 id → `(新增)`；`mark==='edit'` → `(编辑)【text】`；`view` → `(查看)【text】`。
 
 ## Must-do
 
-1. 兄弟路由 + `showLink: false` + `activePath` + 非空 `title`
-2. 列表只用 `toDetail`，禁止裸 `router.push`
-3. 详情页必调 `initToDetail`；`name` 对齐
-4. 参数用 `getParameter`
-5. 需缓存 / 多开时配 `keepAlive` / `moreTags`
+1. 三件套整段落盘（路由 + `toDetail` + `initToDetail`）
+2. `showLink: false` + `activePath` + 非空 `title` + 默认 `keepAlive`/`moreTags`
+3. 列表只用 `toDetail`，禁止裸 `router.push`
+4. 详情页必调 `initToDetail`；`name` 对齐；参数用 `getParameter`

package/references/download-export.md

@@ -4,6 +4,26 @@
 
 规范文件下载、模板下载、文件流导出与附件预览。在需要下载文件、导出表格或预览附件时参照。
 
+**抗略读**：导出/下载 API **必须**带 `responseType: "blob"`（默认写出，勿当可选项注释掉）；前端用 `blobDown` / 项目已有 `download*`，禁止手写 `URL.createObjectURL` 另起一套（除非仓库无封装）。
+
+## 强制样板（导出）
+
+```typescript
+// api
+export function exportExcel(data: Recordable) {
+  return http.request<Result<Blob>>(
+    "post",
+    `${import.meta.env.VITE_API_BASE_URL}/xxx/export`,
+    { data },
+    { responseType: "blob" },
+  );
+}
+
+// 页面
+const res = await exportExcel(params);
+blobDown(res.data, "导出.xlsx", res);
+```
+
 ## 常用工具
 
 项目集成了 `@pureadmin/utils` 与自定义工具：

package/references/feedback-loading.md

@@ -4,6 +4,25 @@
 
 规范系统 Loading、Message、MessageBox、NoticeBar 等反馈组件的使用。在需要提示用户或阻塞操作时参照。
 
+**抗略读**：删除/危险操作**默认写出** `ElMessageBox.confirm`；列表请求接 `v-loading`；提交默认 `loading` 防重复。提示文案一律 `$t()`。
+
+## 强制样板（删除确认）
+
+```typescript
+import { ElMessageBox } from "element-plus";
+import { message } from "@/utils/message";
+
+async function onDelete(row: { id: string }) {
+  await ElMessageBox.confirm($t("确定删除吗？"), $t("温馨提醒"), {
+    confirmButtonText: $t("确定"),
+    cancelButtonText: $t("取消"),
+    type: "warning",
+  });
+  // await deleteApi({ id: row.id })
+  message($t("删除成功"), { type: "success" });
+}
+```
+
 ## Loading
 
 ### 局部 Loading

package/references/form-advanced.md

@@ -10,6 +10,8 @@ tags: [form, dialog, ReDialog, ReDialogResize, ReSelectQuery, ReCascader, iconPi
 > 核心选择器与 CRUD 列表筛选项高频相关。  
 > **弹窗**：业务弹窗统一用 `ReDialog` / `ReDialogResize`，禁止业务页直接堆裸 `el-dialog`（除非用户明确要求）。
 
+**抗略读**：弹窗走项目 `ReDialog` 黄金样板（含销毁/禁点遮罩等默认项），勿降级为裸 `el-dialog`。远程下拉用 `ReSelectQuery` 真实 props（`url`/`value`/`label`/`edit-data`），禁止臆造 `:api`。
+
 ## 依赖（缺则先装）
 
 按用到的能力安装（先查 `package.json`）：

package/references/http-api.md

@@ -9,6 +9,31 @@ tags: [axios, http, api, encryption, rsa, aes, download, request]
 
 > 实现落点：`src/utils/http.ts`、`src/api/**`、全局 `Result<T>`。
 
+**抗略读**：接口文件须整段按下方「强制样板」落盘；禁止组件内直接 `axios`/`fetch`。加解密靠 `VITE_ENCODE_SWITCH`，禁止臆造单请求 `crypto: true`。下载接口**默认写出** `responseType: "blob"`（勿注释掉）。
+
+## 强制样板（新建 API 照抄）
+
+```typescript
+import { http } from "@/utils/http";
+
+export function getCustomerList(data: CustomerQuery) {
+  return http.request<Result<CustomerPage>>(
+    "post",
+    `${import.meta.env.VITE_API_BASE_URL}/customer/list`,
+    { data },
+  );
+}
+
+export function downloadCustomer(data: Recordable) {
+  return http.request<Result<Blob>>(
+    "post",
+    `${import.meta.env.VITE_API_BASE_URL}/customer/export`,
+    { data },
+    { responseType: "blob" },
+  );
+}
+```
+
 ## Http 封装架构
 
 项目使用自定义 `Http` 类封装 Axios，位于 `src/utils/http.ts`。核心特性：

package/references/icons.md

@@ -11,6 +11,18 @@ tags: [vue3, icon, svg-icon, ReSvgIcon, ReIconPicker, iconify, ep, ri, unocss, m
 > **真相源**：`src/components/ReSvgIcon`、`src/components/ReIconPicker`、`src/icons/svg`、`main.ts`、`uno.config.ts`、`build/plugins/SvgSpriteLoader.ts` / `SvgLoader.ts`。  
 > 选型表见 `project-inventory`「图标」节；勿另起 IconFont / 未约定的图标库。
 
+**抗略读**：新建菜单/父级路由时 **`meta.icon` 默认写出**（如 `ep:user`），禁止交无图标菜单。页面内优先 `<svg-icon name="..." />`，勿散落未约定图标库。
+
+## 强制样板（菜单 icon）
+
+```typescript
+meta: { title: "客户管理", icon: "ep:user", rank: 10 }
+```
+
+```vue
+<svg-icon name="ep:search" />
+```
+
 ---
 
 ## 依赖（core，模板已装）

package/references/permission-auth.md

@@ -7,6 +7,20 @@ tags: [vue3, permission, auth, directive, hooks, v-auth, role, access-control]
 
 # 权限控制与自定义指令
 
+**抗略读**：有权限需求时，`meta.roles` 与 `v-auth`/`ReAuth` **默认写出**（勿注释成可选项）。禁止 `v-if="roles.includes(...)"` 手写角色判断。
+
+## 强制样板（页面 + 按钮）
+
+```typescript
+// 路由：roles 默认写出
+meta: { title: "用户管理", roles: ["admin", "common"] }
+```
+
+```vue
+<el-button v-auth="['admin']" @click="onDelete">{{ $t("删除") }}</el-button>
+<ReAuth :value="['admin']"><!-- 区域级 --></ReAuth>
+```
+
 ## 权限体系概览
 
 项目权限分为三个层级：
@@ -33,7 +47,7 @@ export default {
       component: () => import("@/views/system/user/index.vue"),
       meta: {
         title: "用户管理",
-        roles: ["admin", "editor"],  // 只有这些角色可以访问
+        roles: ["admin", "editor"],
       },
     },
     {
@@ -42,7 +56,7 @@ export default {
       component: () => import("@/views/system/config/index.vue"),
       meta: {
         title: "系统配置",
-        roles: ["admin"],  // 仅管理员可访问
+        roles: ["admin"],
       },
     },
   ],