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

package/references/data-writeback.md

@@ -1,104 +1,104 @@
-# 数据回写与编辑
-
-## 表单回显
-
-### 新增/编辑页
-
-```typescript
-async function getDetail() {
-  const { id } = getParameter.value
-  if (!id) return
-  const res = await getDetailApi({ id })
-  Object.assign(formData, res.data)
-}
-```
-
-### 选择类组件回填
-
-| 组件 | 回填方式 |
-|------|---------|
-| `ReSelectQuery` | 传 `edit-data` 属性 |
-| `el-tree-select` | 传 `:cache-data` 属性 |
-| `ReCascader` | 直接传 `v-model` 数组 |
-
-### 表单重置
-
-```typescript
-function reset() {
-  formRef.value.resetFields()
-}
-```
-
-## 表格行编辑
-
-表格内编辑时维护行状态，支持备份/恢复：
-
-```typescript
-const tableData = ref([])
-
-function startEdit(row) {
-  row._edit = true
-  row._backup = { ...row }  // 备份原始数据
-}
-
-function cancelEdit(row) {
-  Object.assign(row, row._backup)  // 恢复
-  row._edit = false
-}
-
-function saveEdit(row) {
-  // 调用保存接口
-  saveRowApi(row).then(() => {
-    row._edit = false
-    delete row._backup
-  })
-}
-```
-
-## 多表单联合校验
-
-页面包含多个表单时，使用 `validateForms` 统一校验：
-
-```typescript
-import { validateForms } from '@/utils/utils'
-
-const formModulesRef = ref([])
-const formModules = [
-  { refName: 'formA' },
-  { refName: 'formB' },
-]
-
-async function handleSubmit() {
-  const valid = await validateForms(formModulesRef.value, formModules)
-  if (!valid) return
-  // 所有表单校验通过，提交数据
-}
-```
-
-## useFormCheck Hook
-
-表单校验聚合，适用于需要监听多个字段校验状态的场景：
-
-```typescript
-import { useFormCheck } from '@/hooks/useFormCheck'
-
-const { validateStatus, onValidate } = useFormCheck(['field1', 'field2'])
-
-// 在 el-form 的 @validate 事件中收集
-// validateStatus 响应式记录各字段的校验结果
-```
-
-## 关键约定
-
-1. 回显时只覆盖表单字段，不破坏响应式结构（使用 `Object.assign` 而非重新赋值）。
-2. 编辑前备份数据（`_backup`），取消时恢复。
-3. 选择类组件回填需同时维护 code 与 name 两个字段。
-4. 多表单校验使用 `validateForms`，不要手动逐个调用 `validate()`。
-5. 提交按钮必须有 `loading` 状态防重复提交。
-
-## 关联文件
-
-- [src/utils/utils.ts](file:///e:/work/vue3-web-temp/src/utils/utils.ts)
-- [src/hooks/useFormCheck.ts](file:///e:/work/vue3-web-temp/src/hooks/useFormCheck.ts)
-- [src/views/form/moreForm/index.vue](file:///e:/work/vue3-web-temp/src/views/form/moreForm/index.vue)
-- [src/views/form/selectTree/index.vue](file:///e:/work/vue3-web-temp/src/views/form/selectTree/index.vue)
+# 数据回写与编辑
+
+> 按本文件示例编写，复用项目已有回显/回填约定与选择器回写方式，勿另起一套表单赋值实现。
+
+## 表单回显
+
+### 新增/编辑页
+
+```typescript
+async function getDetail() {
+  const { id } = getParameter.value
+  if (!id) return
+  const res = await getDetailApi({ id })
+  Object.assign(formData, res.data)
+}
+```
+
+### 选择类组件回填
+
+| 组件 | 回填方式 |
+|------|---------|
+| `ReSelectQuery` | 传 `edit-data` 属性 |
+| `el-tree-select` | 传 `:cache-data` 属性 |
+| `ReCascader` | 直接传 `v-model` 数组 |
+
+### 表单重置
+
+```typescript
+function reset() {
+  formRef.value.resetFields()
+}
+```
+
+## 表格行编辑
+
+表格内编辑时维护行状态，支持备份/恢复：
+
+```typescript
+const tableData = ref([])
+
+function startEdit(row) {
+  row._edit = true
+  row._backup = { ...row }  // 备份原始数据
+}
+
+function cancelEdit(row) {
+  Object.assign(row, row._backup)  // 恢复
+  row._edit = false
+}
+
+function saveEdit(row) {
+  // 调用保存接口
+  saveRowApi(row).then(() => {
+    row._edit = false
+    delete row._backup
+  })
+}
+```
+
+## 多表单联合校验
+
+页面包含多个表单时，使用 `validateForms` 统一校验：
+
+```typescript
+import { validateForms } from '@/utils/utils'
+
+const formModulesRef = ref([])
+const formModules = [
+  { refName: 'formA' },
+  { refName: 'formB' },
+]
+
+async function handleSubmit() {
+  const valid = await validateForms(formModulesRef.value, formModules)
+  if (!valid) return
+  // 所有表单校验通过，提交数据
+}
+```
+
+## useFormCheck Hook
+
+表单校验聚合，适用于需要监听多个字段校验状态的场景：
+
+```typescript
+import { useFormCheck } from '@/hooks/useFormCheck'
+
+const { validateStatus, onValidate } = useFormCheck(['field1', 'field2'])
+
+// 在 el-form 的 @validate 事件中收集
+// validateStatus 响应式记录各字段的校验结果
+```
+
+## 关键约定
+
+1. 回显时只覆盖表单字段，不破坏响应式结构（使用 `Object.assign` 而非重新赋值）。
+2. 编辑前备份数据（`_backup`），取消时恢复。
+3. 选择类组件回填需同时维护 code 与 name 两个字段。
+4. 多表单校验使用 `validateForms`，不要手动逐个调用 `validate()`。
+5. 提交按钮必须有 `loading` 状态防重复提交。
+
+## 关联文件
+
+- [src/utils/utils.ts](file:///e:/work/vue3-web-temp/src/utils/utils.ts)
+- [src/hooks/useFormCheck.ts](file:///e:/work/vue3-web-temp/src/hooks/useFormCheck.ts)

package/references/detail-page.md

@@ -1,99 +1,100 @@
-# 详情页开发
-
-## useDetail Hook
-
-用于列表→详情/新增/编辑页的跳转和参数传递。
-
-```typescript
-import { useDetail } from '@/hooks/useDetail'
-
-const { toDetail, initToDetail, getParameter } = useDetail()
-```
-
-## 跳转
-
-```typescript
-// 从列表跳详情/编辑/新增
-toDetail('QueryDetail', { id: row.id, mark: 'view', text: row.name })
-toDetail('QueryDetail', { id: row.id, mark: 'edit', text: row.name })
-toDetail('QueryDetail', { mark: 'create', text: '新增数据' })
-```
-
-### 参数说明
-
-| 参数 | 说明 |
-|------|------|
-| `routeName` | 目标路由 `name`（必须与路由配置一致） |
-| `params.id` | 数据唯一标识 |
-| `params.mark` | 状态标识：`edit` / `view` / `create` 或自定义 |
-| `params.text` | 用于拼接标签页标题的文本 |
-
-> 数字类型参数跳转前需 `toString()`，因为 `vue-router` 解析后全为字符串。
-
-## 详情页初始化
-
-```vue
-<script setup lang="ts">
-import { useDetail } from '@/hooks/useDetail'
-
-defineOptions({ name: 'QueryDetail' }) // 必须与路由 name 一致
-
-const { initToDetail, getParameter } = useDetail()
-initToDetail('QueryDetail')
-
-// 获取参数
-const { id, mark, text } = getParameter.value
-</script>
-```
-
-### 标签页标题自动生成
-
-`initToDetail` 会根据参数自动生成多标签页标题：
-
-| 条件 | 标题 |
-|------|------|
-| 无 `id` | `新增` |
-| `mark === 'edit'` | `编辑【xxx】` |
-| `mark === 'view'` | `查看【xxx】` |
-
-## 数据回显
-
-```typescript
-async function getDetail() {
-  const { id } = getParameter.value
-  if (!id) return
-  const res = await getDetailApi({ id })
-  Object.assign(formData, res.data)
-}
-
-onMounted(() => {
-  getDetail()
-})
-```
-
-## 非多标签页场景
-
-普通详情页直接使用 `getParameter` 获取路由参数：
-
-```vue
-<script setup lang="ts">
-import { useDetail } from '@/hooks/useDetail'
-
-const { getParameter } = useDetail()
-const route = useRoute()
-const id = route.query.id
-</script>
-```
-
-## 关键约定
-
-1. 详情页组件 `name` 必须与路由 `name` 一致，否则标签页标题功能异常。
-2. 通过 `getParameter` 获取 `query` 或 `params` 参数，不要直接用 `useRoute()`。
-3. 表单详情页回显：进入页面后调详情接口，用 `Object.assign(formData, data)` 赋值。
-4. `mark` 字段控制页面编辑态：`view` 禁用表单，`edit` 可编辑，`create` 新增。
-5. 选择类组件回填需同时维护 code 与 name（详见 data-writeback 模块）。
-
-## 关联文件
-
-- [src/hooks/useDetail.ts](file:///e:/work/vue3-web-temp/src/hooks/useDetail.ts)
-- [src/views/component/detail/detail.vue](file:///e:/work/vue3-web-temp/src/views/component/detail/detail.vue)
+# 详情页开发
+
+> 按本文件示例编写，复用 `useDetail` 等已有详情跳转约定，勿另起一套传参/回显方式。
+
+## useDetail Hook
+
+用于列表→详情/新增/编辑页的跳转和参数传递。
+
+```typescript
+import { useDetail } from '@/hooks/useDetail'
+
+const { toDetail, initToDetail, getParameter } = useDetail()
+```
+
+## 跳转
+
+```typescript
+// 从列表跳详情/编辑/新增
+toDetail('QueryDetail', { id: row.id, mark: 'view', text: row.name })
+toDetail('QueryDetail', { id: row.id, mark: 'edit', text: row.name })
+toDetail('QueryDetail', { mark: 'create', text: '新增数据' })
+```
+
+### 参数说明
+
+| 参数 | 说明 |
+|------|------|
+| `routeName` | 目标路由 `name`（必须与路由配置一致） |
+| `params.id` | 数据唯一标识 |
+| `params.mark` | 状态标识：`edit` / `view` / `create` 或自定义 |
+| `params.text` | 用于拼接标签页标题的文本 |
+
+> 数字类型参数跳转前需 `toString()`，因为 `vue-router` 解析后全为字符串。
+
+## 详情页初始化
+
+```vue
+<script setup lang="ts">
+import { useDetail } from '@/hooks/useDetail'
+
+defineOptions({ name: 'QueryDetail' }) // 必须与路由 name 一致
+
+const { initToDetail, getParameter } = useDetail()
+initToDetail('QueryDetail')
+
+// 获取参数
+const { id, mark, text } = getParameter.value
+</script>
+```
+
+### 标签页标题自动生成
+
+`initToDetail` 会根据参数自动生成多标签页标题：
+
+| 条件 | 标题 |
+|------|------|
+| 无 `id` | `新增` |
+| `mark === 'edit'` | `编辑【xxx】` |
+| `mark === 'view'` | `查看【xxx】` |
+
+## 数据回显
+
+```typescript
+async function getDetail() {
+  const { id } = getParameter.value
+  if (!id) return
+  const res = await getDetailApi({ id })
+  Object.assign(formData, res.data)
+}
+
+onMounted(() => {
+  getDetail()
+})
+```
+
+## 非多标签页场景
+
+普通详情页直接使用 `getParameter` 获取路由参数：
+
+```vue
+<script setup lang="ts">
+import { useDetail } from '@/hooks/useDetail'
+
+const { getParameter } = useDetail()
+const route = useRoute()
+const id = route.query.id
+</script>
+```
+
+## 关键约定
+
+1. 详情页组件 `name` 必须与路由 `name` 一致，否则标签页标题功能异常。
+2. 通过 `getParameter` 获取 `query` 或 `params` 参数，不要直接用 `useRoute()`。
+3. 表单详情页回显：进入页面后调详情接口，用 `Object.assign(formData, data)` 赋值。
+4. `mark` 字段控制页面编辑态：`view` 禁用表单，`edit` 可编辑，`create` 新增。
+5. 选择类组件回填需同时维护 code 与 name（详见 data-writeback 模块）。
+
+## 关联文件
+
+- [src/hooks/useDetail.ts](file:///e:/work/vue3-web-temp/src/hooks/useDetail.ts)

package/references/directives-advanced.md

@@ -1,9 +1,32 @@
-# 高级自定义指令
+# 高级自定义指令（复制 / 自适应字号）
 
-除 `v-auth` 权限指令（见 permission-auth 模块）外，项目还提供复制与字体自适应指令。
+> 按本文件示例编写，复用项目已有 `v-copy` / `v-auto-font`，勿另起一套复制或字号自适应实现。  
+> 本模块**只**覆盖 `v-copy`、`v-auto-font`。  
+> `v-auth` → **permission-auth**；`v-compare` 全套 → **data-compare**。  
+> **匹配原则**：用户用自然语言描述体验问题即可；**不要求**用户知道指令名或会写代码。指令名仅供 AI 落码时使用。
 
-> **数据变更对比（`v-compare` 整套）** 内容多、控件用法各异，已独立为 **data-compare** 模块。  
-> 涉及编辑页对比 / 变更汇总 / 表格行增删改对比时，**必须加载** `references/data-compare.md`，不要使用本节旧示例。
+## 何时命中
+
+用户描述的是**想要的效果**，不是技术名词。AI 根据语义映射到本模块资产。
+
+| 用户可能怎么说（自然语言） | 是否命中 | AI 应使用的资产 |
+|----------------------------|----------|-----------------|
+| 「订单号点一下就能复制」「编号太长不好抄，希望能一键复制」 | ✅ | `v-copy` |
+| 「卡片/表头标题太长显示不下，字能不能跟着变小」「文字别被截断，挤得下就行」 | ✅ | `v-auto-font` |
+| 「删除按钮只有管理员能看见」 | ❌ → `permission-auth` | `v-auth` / `ReAuth` |
+| 「编辑时标出改了哪些字段 / 变更汇总」 | ❌ → `data-compare` | `v-compare` 等 |
+| 「把表格导出成 Excel / 下载一份」 | ❌ → `download-export` | 导出下载 |
+| 「帮我加个自定义指令」（没说要干什么） | ❌ 先追问效果 | — |
+
+**推荐用户描述（面向业务/产品，无需懂代码）**：
+
+```text
+/vue3-temp-skill 表格里的订单号太长不好抄，希望点一下就能复制
+/vue3-temp-skill 卡片标题经常超长显示不全，希望字号能跟着宽度自动变小
+/vue3-temp-skill 邀请码旁边加个复制按钮，点一下复制成功要有提示
+```
+
+**AI 内部映射（用户无需写出）**：上述第 1、3 条 → `v-copy`；第 2 条 → `v-auto-font`。
 
 ## v-copy 复制指令
 

package/references/download-export.md

@@ -1,68 +1,70 @@
-# 下载与导出
-
-规范文件下载、模板下载、文件流导出与附件预览。在需要下载文件、导出表格或预览附件时参照。
-
-## 常用工具
-
-项目集成了 `@pureadmin/utils` 与自定义工具：
-
-```typescript
-import {
-  downloadByBase64,
-  downloadByData,
-  downloadByOnlineUrl,
-  downloadByUrl,
-} from "@pureadmin/utils";
-
-import { download, blobDown, downloadAttachment } from "@/utils/utils";
-```
-
-## 文件流下载
-
-接口返回 Blob 时：
-
-```typescript
-import { blobDown } from "@/utils/utils";
-
-const res = await exportExcel(params);
-blobDown(res.data, "导出.xlsx", res);
-```
-
-若后端在 `content-disposition` 中返回文件名，可自动解析。
-
-## 模板下载
-
-```typescript
-import { download } from "@/utils/utils";
-
-await download("user-template");
-```
-
-后端返回 Blob，前端自动下载为 `user-template.xlsx`。
-
-## 在线地址/图片下载
-
-```typescript
-// 在线图片
-downloadByOnlineUrl("https://xxx.com/a.png", "a.png");
-
-// 普通文件
-downloadByUrl("https://xxx.com/file.zip", "file.zip");
-
-// base64 图片
-downloadByBase64(base64String, "a.png");
-```
-
-## 附件下载
-
-```typescript
-import { downloadAttachment } from "@/utils/utils";
-
-downloadAttachment("https://xxx.com/file.pdf", "file.pdf");
-```
-
-## 关键约定
-
-1. 导出文件名优先从响应头解析，其次前端指定。
-2. 大文件导出需显示 loading。
-3. 下载失败时给用户明确提示。
+# 下载与导出
+
+> 按本文件示例编写，复用项目已有下载/导出工具与封装，勿另起一套文件流处理。
+
+规范文件下载、模板下载、文件流导出与附件预览。在需要下载文件、导出表格或预览附件时参照。
+
+## 常用工具
+
+项目集成了 `@pureadmin/utils` 与自定义工具：
+
+```typescript
+import {
+  downloadByBase64,
+  downloadByData,
+  downloadByOnlineUrl,
+  downloadByUrl,
+} from "@pureadmin/utils";
+
+import { download, blobDown, downloadAttachment } from "@/utils/utils";
+```
+
+## 文件流下载
+
+接口返回 Blob 时：
+
+```typescript
+import { blobDown } from "@/utils/utils";
+
+const res = await exportExcel(params);
+blobDown(res.data, "导出.xlsx", res);
+```
+
+若后端在 `content-disposition` 中返回文件名，可自动解析。
+
+## 模板下载
+
+```typescript
+import { download } from "@/utils/utils";
+
+await download("user-template");
+```
+
+后端返回 Blob，前端自动下载为 `user-template.xlsx`。
+
+## 在线地址/图片下载
+
+```typescript
+// 在线图片
+downloadByOnlineUrl("https://xxx.com/a.png", "a.png");
+
+// 普通文件
+downloadByUrl("https://xxx.com/file.zip", "file.zip");
+
+// base64 图片
+downloadByBase64(base64String, "a.png");
+```
+
+## 附件下载
+
+```typescript
+import { downloadAttachment } from "@/utils/utils";
+
+downloadAttachment("https://xxx.com/file.pdf", "file.pdf");
+```
+
+## 关键约定
+
+1. 导出文件名优先从响应头解析，其次前端指定。
+2. 大文件导出需显示 loading。
+3. 下载失败时给用户明确提示。