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

package/references/qrcode-barcode.md

@@ -1,92 +1,107 @@
-# 二维码与条形码
-
-规范二维码/条形码生成组件的使用。在需要展示扫码、商品条码、票据二维码等场景时参照。
-
-## 组件选型
-
-| 场景                | 组件        | 底层库      |
-| ------------------- | ----------- | ----------- |
-| 二维码（支持 logo） | `ReQrcode`  | `qrcode`    |
-| 条形码              | `ReBarcode` | `jsbarcode` |
-
-## ReQrcode
-
-```vue
-<script setup lang="ts">
-import ReQrcode from "@/components/ReQrcode";
-import logoImg from "@/assets/logo.png";
-
-const text = ref("https://example.com");
-const logoUrl = ref(logoImg);
-
-function onDone(url: string) {
-  console.log("生成完成:", url);
-}
-</script>
-
-<template>
-  <ReQrcode :text="text" :width="200" @done="onDone" />
-
-  <!-- 带 logo / 颜色配置 -->
-  <ReQrcode
-    :text="text"
-    :logo="logoUrl"
-    :width="200"
-    :options="{
-      color: { dark: '#55D187', light: '#2d8cf0' },
-    }"
-    @click="text = ''"
-  />
-</template>
-```
-
-### Props
-
-| Prop       | 类型                     | 默认值     | 说明                        |
-| ---------- | ------------------------ | ---------- | --------------------------- |
-| `text`     | `string \| array`        | -          | 二维码内容                  |
-| `tag`      | `'canvas' \| 'img'`      | `'canvas'` | 渲染标签；`img` 不支持 logo |
-| `width`    | `number`                 | `200`      | 宽度（正方形）              |
-| `logo`     | `string \| object`       | -          | logo 地址或配置对象         |
-| `options`  | `QRCodeRenderersOptions` | `{}`       | qrcode.js 配置              |
-| `disabled` | `boolean`                | `false`    | 是否显示过期遮罩            |
-
-### Events
-
-- `done(url)`：生成完成返回 base64 URL。
-- `click`：点击二维码触发。
-- `disabled-click`：点击过期遮罩触发。
-
-## ReBarcode
-
-```vue
-<script setup lang="ts">
-import ReBarcode from "@/components/ReBarcode";
-
-const barcodeText = ref("HP12399300-12");
-const options = reactive({
-  lineColor: "#990000",
-  background: "#eee",
-});
-</script>
-
-<template>
-  <ReBarcode :text="barcodeText" />
-  <ReBarcode :text="barcodeText" type="EAN13" :options="options" />
-</template>
-```
-
-### Props
-
-| Prop      | 类型                         | 默认值      | 说明                                                         |
-| --------- | ---------------------------- | ----------- | ------------------------------------------------------------ |
-| `text`    | `string`                     | -           | 条形码内容                                                   |
-| `tag`     | `'canvas' \| 'img' \| 'svg'` | `'canvas'`  | 渲染标签                                                     |
-| `type`    | `string`                     | `'CODE128'` | 编码格式：`CODE128` / `CODE39` / `EAN13` / `EAN8` / `UPC` 等 |
-| `options` | `object`                     | `{}`        | JsBarcode 完整配置                                           |
-
-## 关键约定
-
-1. 二维码内容为空时不渲染，需配合 `v-if` 或默认值处理。
-2. logo 图片需考虑跨域；本地图片建议通过 `import` 引入。
-3. 条形码 `type` 与 `options.format` 同时存在时，`type` 优先级更高。
+# 二维码与条形码
+
+> 按本文件示例编写，复用项目已有 `ReQrcode` / `ReBarcode` 等封装，勿另起一套码生成实现。
+
+规范二维码/条形码生成组件的使用。在需要展示扫码、商品条码、票据二维码等场景时参照。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 | 类型 |
+|---|---|---|
+| `qrcode` | `1.5.4` | dependencies |
+| `jsbarcode` | `3.12.3` | dependencies |
+| `@types/qrcode` | `1.5.6` | **devDependencies** |
+
+```bash
+pnpm add qrcode@1.5.4 jsbarcode@3.12.3
+pnpm add -D @types/qrcode@1.5.6
+```
+
+## 组件选型
+
+| 场景                | 组件        | 底层库      |
+| ------------------- | ----------- | ----------- |
+| 二维码（支持 logo） | `ReQrcode`  | `qrcode`    |
+| 条形码              | `ReBarcode` | `jsbarcode` |
+
+## ReQrcode
+
+```vue
+<script setup lang="ts">
+import ReQrcode from "@/components/ReQrcode";
+import logoImg from "@/assets/logo.png";
+
+const text = ref("https://example.com");
+const logoUrl = ref(logoImg);
+
+function onDone(url: string) {
+  console.log("生成完成:", url);
+}
+</script>
+
+<template>
+  <ReQrcode :text="text" :width="200" @done="onDone" />
+
+  <!-- 带 logo / 颜色配置 -->
+  <ReQrcode
+    :text="text"
+    :logo="logoUrl"
+    :width="200"
+    :options="{
+      color: { dark: '#55D187', light: '#2d8cf0' },
+    }"
+    @click="text = ''"
+  />
+</template>
+```
+
+### Props
+
+| Prop       | 类型                     | 默认值     | 说明                        |
+| ---------- | ------------------------ | ---------- | --------------------------- |
+| `text`     | `string \| array`        | -          | 二维码内容                  |
+| `tag`      | `'canvas' \| 'img'`      | `'canvas'` | 渲染标签；`img` 不支持 logo |
+| `width`    | `number`                 | `200`      | 宽度（正方形）              |
+| `logo`     | `string \| object`       | -          | logo 地址或配置对象         |
+| `options`  | `QRCodeRenderersOptions` | `{}`       | qrcode.js 配置              |
+| `disabled` | `boolean`                | `false`    | 是否显示过期遮罩            |
+
+### Events
+
+- `done(url)`：生成完成返回 base64 URL。
+- `click`：点击二维码触发。
+- `disabled-click`：点击过期遮罩触发。
+
+## ReBarcode
+
+```vue
+<script setup lang="ts">
+import ReBarcode from "@/components/ReBarcode";
+
+const barcodeText = ref("HP12399300-12");
+const options = reactive({
+  lineColor: "#990000",
+  background: "#eee",
+});
+</script>
+
+<template>
+  <ReBarcode :text="barcodeText" />
+  <ReBarcode :text="barcodeText" type="EAN13" :options="options" />
+</template>
+```
+
+### Props
+
+| Prop      | 类型                         | 默认值      | 说明                                                         |
+| --------- | ---------------------------- | ----------- | ------------------------------------------------------------ |
+| `text`    | `string`                     | -           | 条形码内容                                                   |
+| `tag`     | `'canvas' \| 'img' \| 'svg'` | `'canvas'`  | 渲染标签                                                     |
+| `type`    | `string`                     | `'CODE128'` | 编码格式：`CODE128` / `CODE39` / `EAN13` / `EAN8` / `UPC` 等 |
+| `options` | `object`                     | `{}`        | JsBarcode 完整配置                                           |
+
+## 关键约定
+
+1. 二维码内容为空时不渲染，需配合 `v-if` 或默认值处理。
+2. logo 图片需考虑跨域；本地图片建议通过 `import` 引入。
+3. 条形码 `type` 与 `options.format` 同时存在时，`type` 优先级更高。

package/references/rich-text.md

@@ -1,73 +1,85 @@
-# 富文本编辑器
-
-规范 wangEditor 富文本编辑器 ReRichText 的使用，含图片/视频上传与 v-model 同步。在需要富文本录入时参照。
-
-## 组件
-
-使用 `ReRichText` 封装 `@wangeditor/editor`。
-
-```vue
-<script setup lang="ts">
-import ReRichText from "@/components/ReRichText";
-
-const content = ref("");
-const attachmentIds = ref<string[]>([]);
-</script>
-
-<template>
-  <ReRichText
-    v-model="content"
-    v-model:attachment-ids="attachmentIds"
-    :height="300"
-    placeholder="请输入内容"
-    :toolbar-config="{ excludeKeys: ['insertImage', 'insertVideo'] }"
-    :upload-params="{ bizKey: 'news_001', projectStage: 'draft' }"
-  />
-</template>
-```
-
-## Props
-
-| Prop              | 类型               | 默认值                                            | 说明             |
-| ----------------- | ------------------ | ------------------------------------------------- | ---------------- |
-| `modelValue`      | `string`           | `''`                                              | HTML 内容        |
-| `height`          | `string \| number` | `300`                                             | 编辑器高度       |
-| `placeholder`     | `string`           | `'请输入内容'`                                    | 占位文案         |
-| `disabled`        | `boolean`          | `false`                                           | 只读模式         |
-| `uploadImagePath` | `string`           | `'/documentInfo/uploadFile'`                      | 图片上传接口路径 |
-| `uploadVideoPath` | `string`           | `'/documentInfo/uploadFile'`                      | 视频上传接口路径 |
-| `bizKey`          | `string`           | `''`                                              | 业务主键         |
-| `projectStage`    | `string`           | `''`                                              | 附件阶段         |
-| `uploadParams`    | `object`           | `{}`                                              | 上传额外参数     |
-| `toolbarConfig`   | `object`           | `{ excludeKeys: ['insertImage', 'insertVideo'] }` | 工具栏配置       |
-
-## Events
-
-- `update:modelValue(html)`：内容同步。
-- `change(html)`：内容变化回调。
-
-## 上传模式
-
-当前启用 **自定义上传**（`customUpload`），通过项目统一 `getUploadUrl` 接口上传：
-
-```typescript
-// 关键参数
-{
-  multipartFile: file,
-  ...uploadParams,
-  bizKey,
-  projectStage,
-  attachmentType: 'news_image',
-  fileType: getFileType(file.name),
-  operatorCode: userStore.userCode || ''
-}
-```
-
-如需切换为 wangEditor 默认 server 模式，注释 `customUpload` 并开放 `server`、`customInsert` 等配置。
-
-## 关键约定
-
-1. 编辑器实例在 `onBeforeUnmount` 中销毁，避免内存泄漏。
-2. 空内容使用 `editor.isEmpty()` 判断，图片/视频等非文本场景也能正确处理。
-3. 上传成功后会将附件 ID 追加到 `attachmentIds`，用于业务关联。
-4. 全屏编辑时自动启用编辑器，退出后恢复 `disabled` 状态。
+# 富文本编辑器
+
+> 按本文件示例编写；富文本使用选型表中的 `@wangeditor/editor` + `ReRichText`，勿改用 Quill / TinyMCE 等；新依赖须待确认。
+
+规范 wangEditor 富文本编辑器 ReRichText 的使用，含图片/视频上传与 v-model 同步。在需要富文本录入时参照。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 |
+|---|---|
+| `@wangeditor/editor` | `5.1.23` |
+
+```bash
+pnpm add @wangeditor/editor@5.1.23
+```
+
+## 组件
+
+使用 `ReRichText` 封装 `@wangeditor/editor`。
+
+```vue
+<script setup lang="ts">
+import ReRichText from "@/components/ReRichText";
+
+const content = ref("");
+const attachmentIds = ref<string[]>([]);
+</script>
+
+<template>
+  <ReRichText
+    v-model="content"
+    v-model:attachment-ids="attachmentIds"
+    :height="300"
+    placeholder="请输入内容"
+    :toolbar-config="{ excludeKeys: ['insertImage', 'insertVideo'] }"
+    :upload-params="{ bizKey: 'news_001', projectStage: 'draft' }"
+  />
+</template>
+```
+
+## Props
+
+| Prop              | 类型               | 默认值                                            | 说明             |
+| ----------------- | ------------------ | ------------------------------------------------- | ---------------- |
+| `modelValue`      | `string`           | `''`                                              | HTML 内容        |
+| `height`          | `string \| number` | `300`                                             | 编辑器高度       |
+| `placeholder`     | `string`           | `'请输入内容'`                                    | 占位文案         |
+| `disabled`        | `boolean`          | `false`                                           | 只读模式         |
+| `uploadImagePath` | `string`           | `'/documentInfo/uploadFile'`                      | 图片上传接口路径 |
+| `uploadVideoPath` | `string`           | `'/documentInfo/uploadFile'`                      | 视频上传接口路径 |
+| `bizKey`          | `string`           | `''`                                              | 业务主键         |
+| `projectStage`    | `string`           | `''`                                              | 附件阶段         |
+| `uploadParams`    | `object`           | `{}`                                              | 上传额外参数     |
+| `toolbarConfig`   | `object`           | `{ excludeKeys: ['insertImage', 'insertVideo'] }` | 工具栏配置       |
+
+## Events
+
+- `update:modelValue(html)`：内容同步。
+- `change(html)`：内容变化回调。
+
+## 上传模式
+
+当前启用 **自定义上传**（`customUpload`），通过项目统一 `getUploadUrl` 接口上传：
+
+```typescript
+// 关键参数
+{
+  multipartFile: file,
+  ...uploadParams,
+  bizKey,
+  projectStage,
+  attachmentType: 'news_image',
+  fileType: getFileType(file.name),
+  operatorCode: userStore.userCode || ''
+}
+```
+
+如需切换为 wangEditor 默认 server 模式，注释 `customUpload` 并开放 `server`、`customInsert` 等配置。
+
+## 关键约定
+
+1. 编辑器实例在 `onBeforeUnmount` 中销毁，避免内存泄漏。
+2. 空内容使用 `editor.isEmpty()` 判断，图片/视频等非文本场景也能正确处理。
+3. 上传成功后会将附件 ID 追加到 `attachmentIds`，用于业务关联。
+4. 全屏编辑时自动启用编辑器，退出后恢复 `disabled` 状态。

package/references/seamless-scroll.md

@@ -1,38 +1,40 @@
-# 无缝滚动
-
-规范无缝滚动、无限滚动列表与轮播滚动效果。在需要公告栏、排行榜、滚动列表时参照。
-
-## 组件
-
-使用 `ReSeamlessScroll` 实现无缝滚动：
-
-```vue
-<ReSeamlessScroll :data="list" :class-option="classOption">
-  <ul>
-    <li v-for="item in list" :key="item.id">
-      {{ item.title }}
-    </li>
-  </ul>
-</ReSeamlessScroll>
-```
-
-## 常用配置
-
-```typescript
-const classOption = {
-  step: 1, // 步长
-  limitMoveNum: 5, // 启动滚动的最小数据量
-  hoverStop: true, // 鼠标悬停停止
-  direction: "top", // top | bottom | left | right
-  singleHeight: 0, // 单步停顿高度
-  singleWidth: 0,
-  waitTime: 1000, // 单步停顿时间
-  autoPlay: true,
-};
-```
-
-## 关键约定
-
-1. 数据量小于 `limitMoveNum` 时不滚动。
-2. 水平滚动时内容需要足够宽；垂直滚动时容器需要固定高度。
-3. 组件内部会复制一份内容实现无缝效果，DOM 操作-heavy 场景避免数据频繁更新。
+# 无缝滚动
+
+> 按本文件示例编写，复用项目已有 `ReSeamlessScroll` 等封装，勿另起一套滚动实现。
+
+规范无缝滚动、无限滚动列表与轮播滚动效果。在需要公告栏、排行榜、滚动列表时参照。
+
+## 组件
+
+使用 `ReSeamlessScroll` 实现无缝滚动：
+
+```vue
+<ReSeamlessScroll :data="list" :class-option="classOption">
+  <ul>
+    <li v-for="item in list" :key="item.id">
+      {{ item.title }}
+    </li>
+  </ul>
+</ReSeamlessScroll>
+```
+
+## 常用配置
+
+```typescript
+const classOption = {
+  step: 1, // 步长
+  limitMoveNum: 5, // 启动滚动的最小数据量
+  hoverStop: true, // 鼠标悬停停止
+  direction: "top", // top | bottom | left | right
+  singleHeight: 0, // 单步停顿高度
+  singleWidth: 0,
+  waitTime: 1000, // 单步停顿时间
+  autoPlay: true,
+};
+```
+
+## 关键约定
+
+1. 数据量小于 `limitMoveNum` 时不滚动。
+2. 水平滚动时内容需要足够宽；垂直滚动时容器需要固定高度。
+3. 组件内部会复制一份内容实现无缝效果，DOM 操作-heavy 场景避免数据频繁更新。

package/references/table-vxe.md

@@ -0,0 +1,114 @@
+---
+skill: table-vxe
+description: vxe-table / vxe-pc-ui 高性能表格规范。大数据量或复杂网格编辑时加载。自带完整示例。
+scope: project
+tags: [vxe-table, vxe-pc-ui, grid, performance, table]
+---
+
+# VXE 高性能表格
+
+> **何时命中**：数据量大（建议 >1000 行）、虚拟滚动、复杂网格。  
+> **反例**：普通 CRUD 分页列表优先 `el-table` + `useTableSearch`（`crud-pages`），不要滥用 VXE。
+
+## 依赖（缺则先装）
+
+| 包 | 版本 |
+|---|---|
+| `vxe-table` | `4.19.21` |
+| `vxe-pc-ui` | `4.15.19` |
+
+```bash
+pnpm add vxe-table@4.19.21 vxe-pc-ui@4.15.19
+```
+
+选型表已指定，勿改用 ag-grid 等。注册方式以项目 `main.ts` 现有 vxe 注册为准。
+
+## 必须复用
+
+- HTTP / 分页约定仍走 `@/utils/http` + `Result<T>`
+
+## 完整示例
+
+```vue
+<script setup lang="ts">
+import type { VxeGridInstance, VxeGridProps } from "vxe-table";
+import { http } from "@/utils/http";
+
+defineOptions({ name: "OrderVxeList" });
+
+interface RowVO {
+  id: string;
+  name: string;
+  status: number;
+}
+
+const gridRef = ref<VxeGridInstance>();
+const loading = ref(false);
+
+const gridOptions = reactive<VxeGridProps<RowVO>>({
+  border: true,
+  height: 600,
+  loading: false,
+  rowConfig: { keyField: "id" },
+  columnConfig: { resizable: true },
+  columns: [
+    { type: "seq", width: 60 },
+    { field: "name", title: "名称", minWidth: 140 },
+    {
+      field: "status",
+      title: "状态",
+      width: 100,
+      formatter: ({ cellValue }) => (cellValue === 1 ? "启用" : "禁用"),
+    },
+  ],
+  data: [],
+  pagerConfig: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 20,
+    pageSizes: [20, 50, 100],
+  },
+});
+
+async function loadData() {
+  loading.value = true;
+  gridOptions.loading = true;
+  try {
+    const pager = gridOptions.pagerConfig!;
+    const res = await http.request<
+      Result<{ content?: RowVO[]; totalCount?: number }>
+    >("post", `${import.meta.env.VITE_API_BASE_URL}/console/order/list`, {
+      data: {
+        pageNo: pager.currentPage,
+        pageSize: pager.pageSize,
+      },
+    });
+    if (res.status === 200) {
+      gridOptions.data = res.data?.content || [];
+      pager.total = res.data?.totalCount || 0;
+    }
+  } finally {
+    loading.value = false;
+    gridOptions.loading = false;
+  }
+}
+
+function onPageChange({ currentPage, pageSize }: { currentPage: number; pageSize: number }) {
+  gridOptions.pagerConfig!.currentPage = currentPage;
+  gridOptions.pagerConfig!.pageSize = pageSize;
+  loadData();
+}
+
+onMounted(() => loadData());
+</script>
+
+<template>
+  <vxe-grid ref="gridRef" v-bind="gridOptions" @page-change="onPageChange" />
+</template>
+```
+
+## 额外审查
+
+- [ ] 未对普通小列表强行上 VXE
+- [ ] 未引入其它表格库
+- [ ] 分页字段与项目一致（`pageNo`/`pageSize`/`content`/`totalCount`）

package/references/tree-table.md

@@ -1,5 +1,7 @@
 # 树形表格与树结构
 
+> 使用 `handleTree` / `ReTreeLine` + `el-table` tree，按本示例编写。
+
 ## 树结构工具函数
 
 ### handleTree — 扁平转树
@@ -108,4 +110,3 @@ import { ReTreeLine } from '@/components/ReTreeLine'
 
 - [src/utils/tree.ts](file:///e:/work/vue3-web-temp/src/utils/tree.ts)
 - [src/components/ReTreeLine/index.ts](file:///e:/work/vue3-web-temp/src/components/ReTreeLine/index.ts)
-- [src/views/table/treeTable/index.vue](file:///e:/work/vue3-web-temp/src/views/table/treeTable/index.vue)

package/references/ui-components.md

@@ -7,6 +7,9 @@ tags: [vue3, component, re-component, library, typescript]
 
 # Re* 自定义组件开发规范
 
+> 新建公共组件时加载。  
+> **核心 vs 附加**：核心 Re* 清单见 `core-kernel` / `project-inventory`；附件、图表、验证码等归各专项模块，勿在无业务场景时塞进默认 CRUD。
+
 ## 组件目录结构
 
 每个 Re 组件必须遵循以下目录结构：
@@ -143,7 +146,8 @@ function handleChange(page: number, size: number) {
 | ReVerify | 验证码 | 图形/滑块/拖拽验证 |
 | ReSeamlessScroll | 无缝滚动 | 支持多方向 |
 | ReNoticeBar | 通知栏 | 滚动/关闭 |
-| ReIconPicker | 图标选择器 | 支持多图标库 |
+| ReIconPicker | 图标选择器 | 完整规范见 `icons` 模块 |
+| ReSvgIcon | 全局 svg-icon | 本地 + Iconify；见 `icons` |
 | ReSegmented | 分段控制器 | 自定义选项 |
 | ReCheckCard | 多选卡片 | 卡片式选择 |
 | ReTreeLine | 树形连线 | 树结构可视化 |