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

package/references/project-inventory.md

@@ -163,51 +163,53 @@
 
 ## 二、Re* 自定义组件清单
 
-> 所有自定义组件以 `Re` 为前缀，目录结构统一为 `ReXxx/src/xxx.vue` + `index.ts` + `type.ts`。
-> **开发新功能时，必须先检查此清单是否已有对应组件，禁止重复造轮子。**
-
-| 组件 | 用途 | 所在目录 |
-|---|---|---|
-| **ReAnchor** | 锚点导航（滚动定位） | `src/components/ReAnchor/` |
-| **ReAttachment** | 附件上传/管理 | `src/components/ReAttachment/` |
-| **ReAuth** | 权限包裹（按 auth code 控制显隐） | `src/components/ReAuth/` |
-| **ReAvatars** | 用户头像展示 | `src/components/ReAvatars/` |
-| **ReBarcode** | 条形码生成 | `src/components/ReBarcode/` |
-| **ReCascader** | 级联选择器 | `src/components/ReCascader/` |
-| **ReCheckCard** | 卡片选择（多选） | `src/components/ReCheckCard/` |
-| **ReCollapsible** | 折叠面板 | `src/components/ReCollapsible/` |
-| **ReDatePicker** | 日期选择器 | `src/components/ReDatePicker/` |
-| **ReDateRangePicker** | 日期范围选择器 | `src/components/ReDateRangePicker/` |
-| **ReDialog** | 弹窗 | `src/components/ReDialog/` |
-| **ReDialogResize** | 可拖拽缩放弹窗 | `src/components/ReDialogResize/` |
-| **ReDragVerify** | 拖拽验证（滑块验证） | `src/components/ReDragVerify/` |
-| **ReEchart** | ECharts 图表容器 | `src/components/ReEchart/` |
-| **ReFileViewer** | 文件预览（Office/PDF） | `src/components/ReFileViewer/` |
-| **ReFlicker** | 闪烁点效果 | `src/components/ReFlicker/` |
-| **ReGrid** | 栅格布局容器 | `src/components/ReGrid/` |
-| **ReGridItem** | 栅格子项 | `src/components/ReGridItem/` |
-| **ReHeaderPage** | 页面头部（标题/面包屑） | `src/components/ReHeaderPage/` |
-| **ReIconPicker** | 图标选择器 | `src/components/ReIconPicker/` |
-| **ReImageVerify** | 图片验证码 | `src/components/ReImageVerify/` |
-| **ReLanguageSwitch** | 语言切换 | `src/components/ReLanguageSwitch/` |
-| **ReNoticeBar** | 通知栏（长文本滚动） | `src/components/ReNoticeBar/` |
-| **RePagination** | 分页器 | `src/components/RePagination/` |
-| **RePopupPicker** | 弹出式选择器（移动端） | `src/components/RePopupPicker/` |
-| **ReQrcode** | 二维码生成 | `src/components/ReQrcode/` |
-| **ReRichText** | 富文本编辑器 | `src/components/ReRichText/` |
-| **ReSeamlessScroll** | 无缝滚动容器 | `src/components/ReSeamlessScroll/` |
-| **ReSegmented** | 分段控制器 | `src/components/ReSegmented/` |
-| **ReSelectQuery** | 远程搜索选择器（带分页） | `src/components/ReSelectQuery/` |
-| **ReSelectVant** | 移动端选择器 | `src/components/ReSelectVant/` |
-| **ReSmsCode** | 短信验证码倒计时按钮 | `src/components/ReSmsCode/` |
-| **ReSvgIcon** | SVG 图标 | `src/components/ReSvgIcon/` |
-| **ReTableBar** | 表格工具栏 | `src/components/ReTableBar/` |
-| **ReTableOperate** | 表格操作按钮（增删改查） | `src/components/ReTableOperate/` |
-| **ReText** | 文本展示（智能省略/tooltip） | `src/components/ReText/` |
-| **ReTimeLine** | 时间轴 | `src/components/ReTimeLine/` |
-| **ReTreeLine** | 树形连线 | `src/components/ReTreeLine/` |
-| **ReTypeit** | 打字机动画 | `src/components/ReTypeit/` |
-| **ReVerify** | 滑块拼图验证 | `src/components/ReVerify/` |
+> 所有自定义组件以 `Re` 为前缀。开发前先查本表，禁止重复造轮子。  
+> **用法**按功能模块写（见 `ui-components` 索引），本表只做名录 + 落点。
+
+| 组件 | 用途 | 目录 | 用法模块 |
+|---|---|---|---|
+| **ReAnchor** | 锚点导航 | `ReAnchor/` | `form-advanced` |
+| **ReAttachment** | 附件上传/管理 | `ReAttachment/` | `file-management` |
+| **ReAuth** | 权限包裹 | `ReAuth/` | `permission-auth` |
+| **ReAvatars** | 头像组 | `ReAvatars/` | 业务页 / `data-screen` |
+| **ReBarcode** | 条形码 | `ReBarcode/` | `qrcode-barcode` |
+| **ReCascader** | 级联选择 | `ReCascader/` | `form-advanced` |
+| **ReCheckCard** | 卡片多选 | `ReCheckCard/` | `form-advanced` |
+| **ReCollapsible** | 折叠 | `ReCollapsible/` | `form-advanced` |
+| **ReDatePicker** | 日期 | `ReDatePicker/` | `form-advanced` |
+| **ReDateRangePicker** | 日期范围 | `ReDateRangePicker/` | `form-advanced` |
+| **ReDialog** | 弹窗（`fullscreen` 默认 false） | `ReDialog/` | `form-advanced` |
+| **ReDialogResize** | 可缩放弹窗 | `ReDialogResize/` | `form-advanced` |
+| **ReDragVerify** | 滑块拖拽验证 | `ReDragVerify/` | `verify-captcha` |
+| **ReEchart** | ECharts 容器 | `ReEchart/` | `chart-echarts` |
+| **ReFileViewer** | 文件预览 | `ReFileViewer/` | `file-management` |
+| **ReFlicker** | 闪烁点 | `ReFlicker/` | `data-screen` |
+| **ReGrid** | 响应式栅格 | `ReGrid/` | `crud-pages` |
+| **ReGridItem** | 栅格子项 | `ReGridItem/` | `crud-pages` |
+| **ReHeaderPage** | 页头 | `ReHeaderPage/` | `crud-pages` / `detail-page` |
+| **ReIconPicker** | 图标选择 | `ReIconPicker/` | `icons` |
+| **ReImageVerify** | 图形验证码 | `ReImageVerify/` | `verify-captcha` |
+| **ReLanguageSwitch** | 语言切换 | `ReLanguageSwitch/` | `layout-theme` |
+| **ReNoticeBar** | 通知栏 | `ReNoticeBar/` | `feedback-loading` |
+| **RePagination** | 分页 | `RePagination/` | `crud-pages` |
+| **RePopupPicker** | 移动端弹出选择 | `RePopupPicker/` | `mobile-h5` |
+| **ReQrcode** | 二维码 | `ReQrcode/` | `qrcode-barcode` |
+| **ReRichText** | 富文本 | `ReRichText/` | `rich-text` |
+| **ReSeamlessScroll** | 无缝滚动 | `ReSeamlessScroll/` | `seamless-scroll` |
+| **ReSegmented** | 分段控制 | `ReSegmented/` | `layout-theme` |
+| **ReSelectQuery** | 远程分页选择 | `ReSelectQuery/` | `form-advanced` |
+| **ReSelectVant** | 移动端选择 | `ReSelectVant/` | `mobile-h5` |
+| **ReSmsCode** | 短信倒计时 | `ReSmsCode/` | `verify-captcha` |
+| **ReSvgIcon** | SVG / Iconify | `ReSvgIcon/` | `icons` |
+| **ReTableBar** | 表格工具栏 | `ReTableBar/` | `crud-pages` |
+| **ReTableOperate** | 行操作 | `ReTableOperate/` | `crud-pages` |
+| **ReText** | 文本省略 | `ReText/` | `layout-theme` |
+| **ReTimeLine** | 时间轴 | `ReTimeLine/` | `detail-page` / 业务 |
+| **ReTreeLine** | 树连线 | `ReTreeLine/` | `tree-table` |
+| **ReTypeit** | 打字机 | `ReTypeit/` | `data-screen` |
+| **ReVerify** | 拼图验证 | `ReVerify/` | `verify-captcha` |
+
+路径前缀均为 `src/components/`。
 
 ---
 
@@ -217,7 +219,7 @@
 
 | Hook | 用途 | 关键 API |
 |---|---|---|
-| **useApp** | 全局应用状态（布局、字典、登出等） | `baseCodeGet(codeType)`、`filterValue()`、`headerHeight`、`svgLoading` |
+| **useApp** | 全局应用状态（布局、字典、登出等） | `baseCodeGet`、`filterValue`、`svgLoading`、`layout`、`logout` 等；顶栏高度不由此导出 |
 | **useDetail** | 列表→详情：写顶部 tag 并跳转 | `toDetail(name, params, title?, 'query'\|'params')`、`initToDetail(name)`、`getParameter`；路由配 `showLink:false`（不进侧栏）+`activePath`（见 `detail-page`） |
 | **useFormCheck** | 多表单校验聚合 | 追踪各字段校验状态，emit `form-validate` 事件 |
 | **useTableSearch** | 列表页搜索/分页/Loading/动态表高 | `content`（须绑 `el-card.vts-page-card`）、`multipleTableRef`（建议绑 `el-table`）、`otherRef`（表上方额外模块）、`tableHeight`（卡片底边 − 表格顶边 − 分页；空数据仍有占位高）、`paginationRef`、`tableData`、`pagination`、`loading`、`onSearch()`、`reset()`、`formRef`、`gridRef`、`collapsed` / `showCollapse` / `collapsedToggle` |

package/references/ui-components.md

@@ -1,165 +1,67 @@
 ---
 skill: ui-components
-description: 规范 Re* 前缀自定义组件的目录结构、导出方式、类型定义和开发流程。在创建或修改公共组件时调用。
+description: Re* 公共组件目录/导出/类型约定；用法按功能模块分散在各 references，本文件只做索引与新建规范。
 scope: project
 tags: [vue3, component, re-component, library, typescript]
 ---
 
-# Re* 自定义组件开发规范
+# Re* 自定义组件
 
-> 新建公共组件时加载。  
-> **核心 vs 附加**：核心 Re* 清单见 `core-kernel` / `project-inventory`；附件、图表、验证码等归各专项模块，勿在无业务场景时塞进默认 CRUD。
+> **新建/改公共组件**时读本文件（目录与导出）。  
+> **业务用法与样板**不在此堆砌——按功能进对应模块（下表）。名录见 `project-inventory` 第二节。
 
-## 组件目录结构
+## 用法按模块（禁止把示例全堆本文件）
 
-每个 Re 组件必须遵循以下目录结构：
+| 功能 | 组件 | 读 |
+|------|------|-----|
+| 列表 / CRUD | ReTableBar、ReGrid、ReGridItem、RePagination、ReTableOperate、ReHeaderPage | `crud-pages` |
+| 弹窗 / 高级表单 | ReDialog、ReDialogResize、ReSelectQuery、ReCascader、ReCheckCard、ReCollapsible、ReAnchor、ReDatePicker、ReDateRangePicker | `form-advanced` |
+| 权限 | ReAuth | `permission-auth` |
+| 图标 | ReSvgIcon、ReIconPicker | `icons` |
+| 附件 / 预览 | ReAttachment、ReFileViewer | `file-management` |
+| 富文本 | ReRichText | `rich-text` |
+| 图表 | ReEchart | `chart-echarts` |
+| 验证码 | ReVerify、ReDragVerify、ReImageVerify、ReSmsCode | `verify-captcha` |
+| 码图 | ReQrcode、ReBarcode | `qrcode-barcode` |
+| 无缝滚动 | ReSeamlessScroll | `seamless-scroll` |
+| 树表 | ReTreeLine | `tree-table` |
+| 布局壳辅助 | ReSegmented、ReLanguageSwitch、ReText、ReNoticeBar | `layout-theme`（展示类）+ 组件源码 |
+| 移动端 | ReSelectVant、RePopupPicker | `mobile-h5` |
+| 大屏点缀 | ReFlicker、ReTypeit、ReTimeLine、ReAvatars | `data-screen` / 对应业务页 |
 
-```
-src/components/RePagination/
-├── src/
-│   └── pagination.vue    # 组件实现文件
-├── index.ts              # 统一导出入口
-└── type.ts               # 类型定义（Props / Emits / Slots）
-```
-
-### 规则说明
-
-1. 组件目录使用大驼峰命名：`Re[ComponentName]`。
-2. 组件实现文件放在 `src/` 子目录下，使用短横线命名：`pagination.vue`。
-3. `index.ts` 是组件的唯一导出入口，外部通过 `import { RePagination } from "@/components/RePagination"` 引入。
-4. `type.ts` 集中定义 Props、Emits、Slots 类型。
+新建 Re* 后：在 `project-inventory` 第二节补一行，并在上表对应模块补用法（有则补强，无则新增小节）。
 
-## 导出模式
+## 目录与导出
 
-### index.ts 标准写法
+优先对齐仓库现有形态：
 
-```typescript
-// src/components/RePagination/index.ts
-import pagination from "./src/pagination.vue";
-
-export const RePagination = pagination;
-export default RePagination;
 ```
-
-### 多组件导出
-
-如果一个目录下有多个组件：
-
-```typescript
-// src/components/ReDialog/index.ts
-import dialog from "./src/dialog.vue";
-import dialogHeader from "./src/dialog-header.vue";
-
-export const ReDialog = dialog;
-export const ReDialogHeader = dialogHeader;
-export default ReDialog;
+src/components/ReXxx/
+├── src/index.vue    # 或 src/xxx.vue（以该组件仓库为准）
+├── index.ts         # withInstall / 具名导出
+├── type.ts          # 可选；复杂 Props 必有
+└── hook.ts          # 可选
 ```
 
-## 类型定义
-
-### type.ts 标准写法
-
 ```typescript
-// src/components/RePagination/type.ts
-import type { ComponentPublicInstance } from "vue";
+// index.ts 常见写法
+import { withInstall } from '@pureadmin/utils'
+import comp from './src/index.vue'
 
-export interface RePaginationProps {
-  /** 当前页码 */
-  currentPage: number;
-  /** 每页条数 */
-  pageSize: number;
-  /** 总条数 */
-  total: number;
-  /** 每页条数选项 */
-  pageSizes?: number[];
-  /** 是否显示总数 */
-  showTotal?: boolean;
-}
-
-export interface RePaginationEmits {
-  (e: "update:currentPage", page: number): void;
-  (e: "update:pageSize", size: number): void;
-  (e: "change", page: number, size: number): void;
-}
-
-export type RePaginationInstance = ComponentPublicInstance<RePaginationProps>;
+export const ReXxx = withInstall(comp)
+export default ReXxx
 ```
 
-### 类型约定
-
-1. Props 类型命名：`Re[ComponentName]Props`。
-2. Emits 类型命名：`Re[ComponentName]Emits`，使用函数签名格式。
-3. 如需在组件外部引用实例类型，导出 `Re[ComponentName]Instance`。
-4. 每个 Props 字段必须写 JSDoc 注释说明用途。
-
-## 组件实现模板
-
-```vue
-<script setup lang="ts">
-import type { ReComponentNameProps, ReComponentNameEmits } from "../../type";
-
-defineOptions({
-  name: "ReComponentName",
-});
-
-const props = withDefaults(defineProps<ReComponentNameProps>(), {
-  pageSizes: () => [10, 20, 50, 100],
-  showTotal: true,
-});
-
-const emit = defineEmits<ReComponentNameEmits>();
-
-function handleChange(page: number, size: number) {
-  emit("update:currentPage", page);
-  emit("update:pageSize", size);
-  emit("change", page, size);
-}
-</script>
-
-<template>
-  <div class="re-component-name">
-    <!-- 组件内容 -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.re-component-name {
-  /* 样式 */
-}
-</style>
-```
+规则：大驼峰目录名；外部只从 `@/components/ReXxx` 引入；`defineOptions({ name })`；样式默认 `scoped`。
 
-## 现有 Re 组件清单
+## 类型
 
-| 组件名 | 用途 | 关键特性 |
-|--------|------|----------|
-| ReDialog | 弹窗 | 拖拽、全屏、表单嵌套 |
-| RePagination | 分页 | 配合 useTableSearch |
-| ReTableBar | 表格工具栏 | 列配置、密度、全屏 |
-| ReGrid | 数据表格 | 基于 el-table 封装 |
-| ReTableOperate | 操作列 | 按钮组、权限控制 |
-| ReSelectQuery | 查询选择器 | 下拉+搜索+分页 |
-| ReCascader | 级联选择 | 支持异步加载 |
-| ReRichText | 富文本编辑器 | 基于 wangEditor |
-| ReQrcode | 二维码 | 支持 Logo 嵌入 |
-| ReBarcode | 条形码 | 多种编码格式 |
-| ReVerify | 验证码 | 图形/滑块/拖拽验证 |
-| ReSeamlessScroll | 无缝滚动 | 支持多方向 |
-| ReNoticeBar | 通知栏 | 滚动/关闭 |
-| ReIconPicker | 图标选择器 | 完整规范见 `icons` 模块 |
-| ReSvgIcon | 全局 svg-icon | 本地 + Iconify；见 `icons` |
-| ReSegmented | 分段控制器 | 自定义选项 |
-| ReCheckCard | 多选卡片 | 卡片式选择 |
-| ReTreeLine | 树形连线 | 树结构可视化 |
-| ReFlicker | 闪烁效果 | 数据大屏常用 |
-| ReTypeit | 打字效果 | 逐字显示动画 |
-| ReAuth | 权限组件 | 按钮级权限控制 |
+- `ReXxxProps` / `ReXxxEmits`；字段 JSDoc  
+- 需要实例类型时导出 `ReXxxInstance`
 
-## 常见反例
+## 反例
 
-- 组件没有 `index.ts` 导出文件，外部直接引用 `.vue` 文件。
-- Props 类型内联在组件中，没有抽取到 `type.ts`。
-- 组件 `name` 没有使用 `defineOptions` 显式声明。
-- 样式没有使用 `scoped`，导致全局污染。
-- 组件 class 名没有使用 `re-` 前缀。
-- Props 字段没有 JSDoc 注释。
+- 业务直接 `import …/src/index.vue`  
+- 无 `index.ts`  
+- 重复造已有 Re*（先查 inventory）  
+- 在本文件粘贴各模块完整业务样板（应写到对应功能模块）