@qilitt-mickey/vue3-temp-skill 1.1.74 → 1.1.76

package/references/detail-page.md

@@ -1,119 +1,119 @@
----
-name: detail-page
-description: 列表→独立路由详情/编辑/查看。路由 meta、toDetail 写顶部 tag、activePath 保侧栏高亮、initToDetail。
-scope: project
-tags: [vue3, detail, toDetail, useDetail, activePath, showLink, multiTags, keepAlive]
----
-
-# 详情页 / 编辑页跳转
-
-权威性优先级：模版 `useDetail.ts`、`multiTags`、侧栏 `NavVertical`。列表打开独立路由页时按本文件落地。
-
-**反认知偏差（必读）**：`toDetail` 只负责写顶部 tag 并跳转；**侧栏高亮靠 `meta.activePath`，缓存/多开靠 `meta.keepAlive` / `moreTags`**。三者缺一不可，禁止只写 `toDetail`。
-
-## 详情三件套（标准样板 · 整段照抄再改名）
-
-缺任一段 = 未完成。样板内字段**默认全部写出**（勿改成 `//` 注释再「按需打开」）。仅当业务明确不要缓存/多开时，才删掉对应行。
-
-### ① 兄弟路由 meta
-
-```typescript
-{
-  path: "/customer/detail",
-  name: "CustomerDetail",
-  component: () => import("@/views/customer/detail/index.vue"),
-  meta: {
-    title: "客户详情",
-    showLink: false,
-    activePath: "/customer/list",
-    keepAlive: true,
-    moreTags: true,
-  },
-},
-```
-
-### ② 列表页打开
-
-```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}】`,
-);
-```
-
-### ③ 详情页初始化
-
-```vue
-<script setup lang="ts">
-import { useDetail } from "@/hooks/useDetail";
-defineOptions({ name: "CustomerDetail" });
-const { initToDetail, getParameter } = useDetail();
-initToDetail("CustomerDetail");
-const { id, mark } = getParameter as DetailParameter;
-</script>
-```
-
-### ④ 详情页容器（滚动约定）
-
-详情 / 编辑 / 查看页是**长内容页**，滚动交给壳层 `.app-main` 内 `el-scrollbar`。**禁止**根节点使用 `vts-page-fill` / `h-full` / `overflow-hidden`（那是定高画布专用）。
-
-```vue
-<template>
-  <div
-    v-loading.lock="pageLoading"
-    class="bg-bg_color p-5"
-    :style="{ minHeight: '100%' }"
-  >
-    <ReHeaderPage />
-    <!-- 表单 / 描述 / 版本记录等 -->
-  </div>
-</template>
-```
-
-| 禁止 | 原因 |
-|------|------|
-| `class="vts-page-fill"` | 触发定高链，内容被裁切、外层滚不动 |
-| `h-full` + `overflow-hidden` | 把超出内容锁死在视口内 |
-| `el-card.vts-page-card` 包整页长表单 | 列表定高卡专用；详情走外层滚动 |
-
-完整布局原理见 `layout-theme`「内容区高度与滚动」；列表页见 `crud-pages`。
-
-## 概念
-
-| 能力 | 字段 / 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. 三件套整段落盘（路由 + `toDetail` + `initToDetail`）
-2. `showLink: false` + `activePath` + 非空 `title` + 默认 `keepAlive`/`moreTags`
-3. 列表只用 `toDetail`，禁止裸 `router.push`
-4. 详情页必调 `initToDetail`；`name` 对齐；参数用 `getParameter`
-5. 详情根容器：`min-height: 100%` + `bg-bg_color`；**禁止** `vts-page-fill` / `h-full` / `overflow-hidden`
+---
+name: detail-page
+description: 列表→独立路由详情/编辑/查看。路由 meta、toDetail 写顶部 tag、activePath 保侧栏高亮、initToDetail。
+scope: project
+tags: [vue3, detail, toDetail, useDetail, activePath, showLink, multiTags, keepAlive]
+---
+
+# 详情页 / 编辑页跳转
+
+权威性优先级：模版 `useDetail.ts`、`multiTags`、侧栏 `NavVertical`。列表打开独立路由页时按本文件落地。
+
+**反认知偏差（必读）**：`toDetail` 只负责写顶部 tag 并跳转；**侧栏高亮靠 `meta.activePath`，缓存/多开靠 `meta.keepAlive` / `moreTags`**。三者缺一不可，禁止只写 `toDetail`。
+
+## 详情三件套（标准样板 · 整段照抄再改名）
+
+缺任一段 = 未完成。样板内字段**默认全部写出**（勿改成 `//` 注释再「按需打开」）。仅当业务明确不要缓存/多开时，才删掉对应行。
+
+### ① 兄弟路由 meta
+
+```typescript
+{
+  path: "/customer/detail",
+  name: "CustomerDetail",
+  component: () => import("@/views/customer/detail/index.vue"),
+  meta: {
+    title: "客户详情",
+    showLink: false,
+    activePath: "/customer/list",
+    keepAlive: true,
+    moreTags: true,
+  },
+},
+```
+
+### ② 列表页打开
+
+```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}】`,
+);
+```
+
+### ③ 详情页初始化
+
+```vue
+<script setup lang="ts">
+import { useDetail } from "@/hooks/useDetail";
+defineOptions({ name: "CustomerDetail" });
+const { initToDetail, getParameter } = useDetail();
+initToDetail("CustomerDetail");
+const { id, mark } = getParameter as DetailParameter;
+</script>
+```
+
+### ④ 详情页容器（滚动约定）
+
+详情 / 编辑 / 查看页是**长内容页**，滚动交给壳层 `.app-main` 内 `el-scrollbar`。**禁止**根节点使用 `vts-page-fill` / `h-full` / `overflow-hidden`（那是定高画布专用）。
+
+```vue
+<template>
+  <div
+    v-loading.lock="pageLoading"
+    class="bg-bg_color p-5"
+    :style="{ minHeight: '100%' }"
+  >
+    <ReHeaderPage />
+    <!-- 表单 / 描述 / 版本记录等 -->
+  </div>
+</template>
+```
+
+| 禁止 | 原因 |
+|------|------|
+| `class="vts-page-fill"` | 触发定高链，内容被裁切、外层滚不动 |
+| `h-full` + `overflow-hidden` | 把超出内容锁死在视口内 |
+| `el-card.vts-page-card` 包整页长表单 | 列表定高卡专用；详情走外层滚动 |
+
+完整布局原理见 `layout-theme`「内容区高度与滚动」；列表页见 `crud-pages`。
+
+## 概念
+
+| 能力 | 字段 / 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. 三件套整段落盘（路由 + `toDetail` + `initToDetail`）
+2. `showLink: false` + `activePath` + 非空 `title` + 默认 `keepAlive`/`moreTags`
+3. 列表只用 `toDetail`，禁止裸 `router.push`
+4. 详情页必调 `initToDetail`；`name` 对齐；参数用 `getParameter`
+5. 详情根容器：`min-height: 100%` + `bg-bg_color`；**禁止** `vts-page-fill` / `h-full` / `overflow-hidden`

package/references/download-export.md

@@ -1,97 +1,97 @@
----
-name: download-export
-description: 导出/下载必须带 responseType blob，使用 blobDown 或项目已有下载工具
-scope: project
-tags: [导出, excel, blob, 下载文件, 下载, 导出Excel]
----
-
-# 下载与导出
-
-> 按本文件示例编写，复用项目已有下载/导出工具与封装，勿另起一套文件流处理。
-
-规范文件下载、模板下载、文件流导出与附件预览。在需要下载文件、导出表格或预览附件时参照。
-
-**完整性守则**：导出/下载 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` 与自定义工具：
-
-```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. 下载失败时给用户明确提示。
+---
+name: download-export
+description: 导出/下载必须带 responseType blob，使用 blobDown 或项目已有下载工具
+scope: project
+tags: [导出, excel, blob, 下载文件, 下载, 导出Excel]
+---
+
+# 下载与导出
+
+> 按本文件示例编写，复用项目已有下载/导出工具与封装，勿另起一套文件流处理。
+
+规范文件下载、模板下载、文件流导出与附件预览。在需要下载文件、导出表格或预览附件时参照。
+
+**完整性守则**：导出/下载 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` 与自定义工具：
+
+```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. 下载失败时给用户明确提示。

package/references/feedback-loading.md

@@ -1,104 +1,104 @@
----
-name: feedback-loading
-description: Message、Loading、MessageBox、NoticeBar 反馈和加载
-scope: project
-tags: [message, loading, 确认框, 提示, 加载, 操作反馈, 骨架屏, skeleton]
----
-
-# 反馈与 Loading
-
-> 按本文件示例编写，复用项目已有 Message / Loading / MessageBox 封装，勿另起一套提示方案。
-
-规范系统 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
-
-```vue
-<el-card v-loading.lock="loading" :element-loading-spinner="svgLoading">
-  <!-- 内容 -->
-</el-card>
-```
-
-### 全屏 Loading
-
-```vue
-<el-button v-loading.lock.fullscreen="fullLoading" @click="submit">
-  保存
-</el-button>
-```
-
-### 获取系统统一 Loading SVG
-
-```typescript
-import { useApp } from "@/hooks/useApp";
-
-const { svgLoading } = useApp();
-```
-
-## Message
-
-使用 `src/utils/message.ts` 封装函数：
-
-```typescript
-import { message, closeAllMessage } from "@/utils/message";
-
-message("操作成功", { type: "success" });
-message("警告信息", { type: "warning", duration: 3000 });
-```
-
-默认 `duration: 5000`、`grouping: true`、`plain: true`。
-
-## MessageBox
-
-```typescript
-import { ElMessageBox } from "element-plus";
-
-ElMessageBox.confirm($t("确定删除吗？"), $t("温馨提醒"), {
-  confirmButtonText: $t("确定"),
-  cancelButtonText: $t("取消"),
-  type: "warning",
-});
-```
-
-## ReNoticeBar 通知栏
-
-落点：`src/components/ReNoticeBar`。长文本滚动 / 可关闭提示，用于页内公告条。
-
-```vue
-<script setup lang="ts">
-import ReNoticeBar from "@/components/ReNoticeBar";
-</script>
-
-<template>
-  <ReNoticeBar :text="$t('系统将于今晚维护，请提前保存数据')" />
-</template>
-```
-
-Props / 行为以组件源码为准；颜色走主题令牌，禁止业务写死提示条背景 hex。
-
-## 关键约定
-
-1. 所有提示文案使用 `$t()`。
-2. 长耗时操作显示 loading，避免用户重复点击。
-3. 表单提交失败调用 `checkReeorPosition()` 定位错误项。
+---
+name: feedback-loading
+description: Message、Loading、MessageBox、NoticeBar 反馈和加载
+scope: project
+tags: [message, loading, 确认框, 提示, 加载, 操作反馈, 骨架屏, skeleton]
+---
+
+# 反馈与 Loading
+
+> 按本文件示例编写，复用项目已有 Message / Loading / MessageBox 封装，勿另起一套提示方案。
+
+规范系统 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
+
+```vue
+<el-card v-loading.lock="loading" :element-loading-spinner="svgLoading">
+  <!-- 内容 -->
+</el-card>
+```
+
+### 全屏 Loading
+
+```vue
+<el-button v-loading.lock.fullscreen="fullLoading" @click="submit">
+  保存
+</el-button>
+```
+
+### 获取系统统一 Loading SVG
+
+```typescript
+import { useApp } from "@/hooks/useApp";
+
+const { svgLoading } = useApp();
+```
+
+## Message
+
+使用 `src/utils/message.ts` 封装函数：
+
+```typescript
+import { message, closeAllMessage } from "@/utils/message";
+
+message("操作成功", { type: "success" });
+message("警告信息", { type: "warning", duration: 3000 });
+```
+
+默认 `duration: 5000`、`grouping: true`、`plain: true`。
+
+## MessageBox
+
+```typescript
+import { ElMessageBox } from "element-plus";
+
+ElMessageBox.confirm($t("确定删除吗？"), $t("温馨提醒"), {
+  confirmButtonText: $t("确定"),
+  cancelButtonText: $t("取消"),
+  type: "warning",
+});
+```
+
+## ReNoticeBar 通知栏
+
+落点：`src/components/ReNoticeBar`。长文本滚动 / 可关闭提示，用于页内公告条。
+
+```vue
+<script setup lang="ts">
+import ReNoticeBar from "@/components/ReNoticeBar";
+</script>
+
+<template>
+  <ReNoticeBar :text="$t('系统将于今晚维护，请提前保存数据')" />
+</template>
+```
+
+Props / 行为以组件源码为准；颜色走主题令牌，禁止业务写死提示条背景 hex。
+
+## 关键约定
+
+1. 所有提示文案使用 `$t()`。
+2. 长耗时操作显示 loading，避免用户重复点击。
+3. 表单提交失败调用 `checkReeorPosition()` 定位错误项。