@qilitt-mickey/vue3-temp-skill 1.1.21 → 1.1.23

package/SKILL.md

@@ -77,7 +77,7 @@ tags: [vue3, typescript, element-plus, vant, pinia, vite, unocss, crud, componen
 | 模块 | 关键词 |
 |------|--------|
 | **http-api** | 接口、http、加密、API |
-| **crud-pages** | 列表、表格、查询、管理、CRUD、新增编辑 |
+| **crud-pages** | 列表、表格、查询、管理、CRUD、新增编辑、操作列、行操作 |
 | **detail-page** | 详情、编辑页、查看页、新开路由、toDetail、activePath、showLink、顶部 tag |
 | **data-writeback** | 回显、回填、useFormCheck |
 | **permission-auth** | 权限、v-auth、roles、ReAuth |

package/package.json

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

package/references/code-quality.md

@@ -37,7 +37,7 @@ lint / type-check **过了也不能放过**下列项。发现即改代码，禁
 | `toDetail` / 独立 `*Detail` 路由 | 路由无 `activePath`，或 `showLink` 非 `false` | `detail-page` 三件套 |
 | 同上 | 默认场景缺 `keepAlive`/`moreTags`（业务未声明不要缓存） | 样板默认写出；不要缓存再删 |
 | 同上 | 详情页无 `initToDetail`，或 `name` 与路由不一致 | 对齐 `defineOptions` |
-| 列表页 | 无 `el-card.vts-page-card` / `100vh` 减顶栏定高 / 无 `tableHeight` / 分页在 ReTableBar 外 / 操作列手写多按钮未用 `ReTableOperate` | `crud-pages` L1–L9 |
+| 列表页 | 无 `el-card.vts-page-card` / `100vh` 减顶栏定高 / 无 `tableHeight` / 分页在 ReTableBar 外 / 操作列手写多按钮未用 `ReTableOperate` / 操作列写死 `width` 未用 `resolveOperateColumnWidth` / `ReTableOperate` 未传 `:size="size"` | `crud-pages` L1–L9 |
 | `src/api/**` | 绕过 `@/utils/http`，或虚构 `/api` 前缀，或响应当 `success`/`code` | `http-api` |
 | 下载/导出 API | 无 `responseType: "blob"` | `http-api` / `download-export` |
 | 删除/危险操作 | 无确认框 | `feedback-loading` |

package/references/core-kernel.md

@@ -114,8 +114,7 @@ export function getCustomerList(data: CustomerQuery, url: string) {
 | 场景 | 档位 | 像素（令牌） |
 |------|------|--------------|
 | 查询区表单/按钮、工具栏按钮、弹窗内表单 | **default（不写 size）** | `--control-height`（设计 `--component-size-base`，默认 32px） |
-| 表格 / 分页 | `:size="size"`（ReTableBar 透出） | 随密度切换，与表单档位独立 |
-| 表格行内操作、紧凑工具条 | `small` | `--control-height-sm`（24px） |
+| 表格 / 分页 / **行内操作** | `:size="size"`（ReTableBar 透出） | 随密度切换（small / default / large），与表单档位独立 |
 | 登录/整屏主表单主按钮 | `large` | `--control-height-lg`（40px） |
 | 移动端 Vant | 见 `mobile-h5` | — |
 

package/references/crud-pages.md

@@ -49,7 +49,7 @@ useTableSearch(formQuery, searchFn, url)
 | L6 | 表格绑 `ref="multipleTableRef"` + `tableHeight`；分页在 `ReTableBar` `#default` 内、表格下方 |
 | L7 | `RePagination`：`:pagination` + `@handle-current-change` / `@handle-size-change` |
 | L8 | 查询与表之间的额外模块包一根元素绑 `otherRef`（须在表格上方，高度计入 `tableTop`） |
-| L9 | 表格操作列 `ReTableOperate :list`；按钮过多用 `limit`（默认 **3**）自动「更多」下拉，见下文专节 |
+| L9 | 表格操作列 **必须** `ReTableOperate :list` + `resolveOperateColumnWidth` + `:size="size"`；用户口述多项操作时按下文「需求→落盘」整段生成，禁止手写 `el-button` / 写死列宽 |
 
 ```vue
 <script setup lang="ts">
@@ -60,7 +60,7 @@ import { ReGrid } from "@/components/ReGrid";
 import { ReGridItem } from "@/components/ReGridItem";
 import { RePagination } from "@/components/RePagination";
 import { ReTableBar } from "@/components/ReTableBar";
-import { ReTableOperate } from "@/components/ReTableOperate";
+import { ReTableOperate, resolveOperateColumnWidth } from "@/components/ReTableOperate";
 import { useApp } from "@/hooks/useApp";
 import { useTableSearch } from "@/hooks/useTableSearch";
 import { message } from "@/utils/message";
@@ -96,6 +96,8 @@ const {
 
 const tableList = computed(() => tableData.value.tableList as Customer[]);
 
+const operateLimit = 3;
+
 const operateButtons: OperateButton[] = [
   {
     label: $t("删除"),
@@ -216,9 +218,19 @@ function handleSizeChange(size: number) {
             >
               <el-table-column prop="code" :label="$t('编号')" min-width="120" />
               <el-table-column prop="name" :label="$t('名称')" min-width="140" />
-              <el-table-column :label="$t('操作')" width="160" fixed="right">
+              <el-table-column
+                :label="$t('操作')"
+                :width="resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size })"
+                fixed="right"
+              >
                 <template #default="{ row, $index }">
-                  <ReTableOperate :list="operateButtons" :row="row" :index="$index" />
+                  <ReTableOperate
+                    :list="operateButtons"
+                    :row="row"
+                    :index="$index"
+                    :limit="operateLimit"
+                    :size="size"
+                  />
                 </template>
               </el-table-column>
             </el-table>
@@ -250,22 +262,96 @@ function handleSizeChange(size: number) {
 | `limit` | 默认 **`3`**：可见按钮总数阈值（含「更多」槽位） |
 | ≤ `limit` | 全部以文字按钮平铺 |
 | > `limit` | 前 **`limit - 1`** 个平铺，其余进 **「更多」** `el-dropdown` |
-| 过滤顺序 | 先 `auth`（`hasAuth`）→ 再 `show(row)` → 再按 `limit` 折叠 |
-| `size` | 组件默认 `small`（行内紧凑）；可按列改 |
+| 过滤顺序 | 先 `auth`（无权限整项剔除）→ 再按 `show(row)` 决定显隐 → 再按 `limit` 折叠 |
+| `size` | **须与表格一致**：传 ReTableBar `#default` 透出的 `size`（`small` \| `default` \| `large`）；组件默认 `default`；槽宽 / 列宽推算须带同一 `size` |
+| 对齐 | **从左排列**，最多 `limit` 项（含「更多」）；`show:false` **不占位**；每个平铺项（含「更多」）**等宽槽**，槽宽默认按 `list` 最长文案自动适配（可用 `slotMinWidth` 覆盖）；「更多」用 **text + 主题色**（禁止 `link` / 单独 `ml-*`） |
+| 列宽 | **禁止写死** `width="220"` 等；用 `resolveOperateColumnWidth({ list: operateButtons, limit })` 与组件同一套规则推算（`limit × 槽宽 + 留白`） |
 
 示例：`limit=3` 且有 5 个可见按钮 → 平铺 2 个 +「更多」（内含后 3 个）。
 
 ```vue
-<!-- 默认折叠阈值 3 -->
-<ReTableOperate :list="operateButtons" :row="row" :index="$index" />
+<script setup lang="ts">
+import { ReTableOperate, resolveOperateColumnWidth } from "@/components/ReTableOperate";
 
-<!-- 需要多露几个时再改，勿低于 2（否则「更多」几乎占满） -->
-<ReTableOperate :list="operateButtons" :row="row" :index="$index" :limit="4" />
+const operateLimit = 3;
+const operateButtons: OperateButton[] = [/* … */];
+</script>
+
+<ReTableBar ...>
+  <template #default="{ size }">
+    <el-table :size="size" ...>
+      <el-table-column
+        :label="$t('操作')"
+        :width="resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size })"
+        fixed="right"
+      >
+        <template #default="{ row, $index }">
+          <ReTableOperate
+            :list="operateButtons"
+            :row="row"
+            :index="$index"
+            :limit="operateLimit"
+            :size="size"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+  </template>
+</ReTableBar>
 ```
 
-`OperateButton` 常用字段：`label`、`type`、`icon`、`auth`、`show`、`disabled`、`onClick`（见组件 `type.ts`）。危险操作用 `type: 'danger'`；权限写 `auth`，勿在列模板里 `v-if` 角色。
+`limit` / `size` 在列宽、组件上**须一致**；`size` 随 ReTableBar 密度切换（宽松 / 默认 / 紧凑），与查询区表单档位独立（见 `core-kernel` 组件尺寸、`design-system` 7.5.8）。
+
+文案特别长时可传 `slotMinWidth`，列宽推算带上同一参数：
+
+```typescript
+resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size, slotMinWidth: 96 });
+```
 
-操作列 `width`：按钮多时适当加宽（如 160～220），仍依赖 `limit` 折叠，禁止无限加宽硬塞。
+`OperateButton` 常用字段：`label`、`type`、`icon`、`auth`、`show`、`disabled`、`onClick`（见组件 `type.ts`）。危险操作用 `type: 'danger'`；权限写 `auth`，勿在列模板里 `v-if` 角色。**同一列表的 `list` 顺序须固定**（如始终「填报→查看→催办→…」），靠 `show` 控制显隐，勿按行动态改数组顺序。
+
+操作列建议 `fixed="right"`。模版已在 `element-plus.scss` 为含 `.re-table-operate` 的单元格关闭省略号，避免列宽不足时出现 `..`。
+
+### 需求 → 落盘（强制 · 自动生成清单）
+
+用户只要提到「操作列有 A、B、C…」或「行操作：查看 / 编辑 / …」，**禁止追问是否用 ReTableOperate**，直接按本清单整段落盘（与模版 `views/table/base` 一致）：
+
+1. **解析按钮序列**：按用户口述顺序写入 `operateButtons: OperateButton[]`（顺序固定，勿按行改数组）。
+2. **折叠阈值**：声明 `const operateLimit = 3`（除非用户明确要求其它平铺数）；可见数 > `limit` 时组件自动「更多」，业务页勿自造下拉。
+3. **显隐 / 权限**：状态相关写 `show: row => …`；权限写 `auth`；危险操作用 `type: 'danger'`；图标用 `i-ep:*`。
+4. **列宽动态推算**（禁止写死 `width="200"`）：
+   ```ts
+   resolveOperateColumnWidth({ list: operateButtons, limit: operateLimit, size })
+   ```
+5. **密度联动**：在 `ReTableBar` `#default="{ size }"` 内同时传给 `el-table`、`ReTableOperate`、`resolveOperateColumnWidth`。
+6. **模板落点**：
+   ```vue
+   <ReTableOperate
+     :list="operateButtons"
+     :row="row"
+     :index="$index"
+     :limit="operateLimit"
+     :size="size"
+   />
+   ```
+7. **回调**：每个 `onClick` 落真实函数（跳详情 / 确认框 / API），禁止只写 `console.log` 占位（演示页除外）。
+
+**口述示例 → 生成预期**
+
+| 用户口述 | 生成要点 |
+|----------|----------|
+| 操作列有查看、编辑、删除 | 3 项 ≤ limit → 全部平铺，无「更多」；列宽按最长「查看/编辑/删除」推算 |
+| 操作列有填报、查看、催办、审核、快速通过、发起修订 | 固定顺序；`show` 按状态；>3 自动「更多」；列宽按最长「发起修订」推算 |
+| 已完成可发起修订、导出、审核记录 | 至少 4 项可见时平铺「查看\|发起修订\|更多」 |
+
+**反例**：
+- 写死 `width="260"` / 不传 `:size="size"` → 与表格密度不一致、切换紧凑/宽松后按钮错位  
+- 列宽 `resolveOperateColumnWidth` 未传 `size` 或与组件 `:size` 不一致 → 推算宽度与实渲染不符  
+- 前置透明占位 / 为隐藏按钮留空 → 左侧大空档  
+- 平铺项按内容宽度自然撑开、无等宽槽 → 「发起修订」等比二字项把「更多」挤偏  
+- 给「更多」写 `ml-2` 或用 `type="primary" link` → 与 text 按钮档位不一致  
+- 按行拼接不同顺序的 `list` → 同名操作无法对应  
+- 用户已列多项操作仍手写 `el-button` 或省略 `resolveOperateColumnWidth` → 违反 L9  
 
 ## 列表 → 详情/编辑
 
@@ -379,5 +465,6 @@ async function onSubmit() {
 | 裸 `router.push` 开详情 | `toDetail` + meta（见 detail-page） |
 | 详情根节点 `vts-page-fill` / `h-full` / `overflow-hidden` | `min-height: 100%` + `bg-bg_color`；滚动交给壳层 `el-scrollbar`（见 detail-page ④） |
 | `ReTableOperate :buttons` | `:list` |
-| 操作列手写多颗 `el-button` / 自造更多菜单 | `ReTableOperate`；过多靠 `limit`（默认 3）进「更多」 |
+| 操作列手写多颗 `el-button` / 自造更多菜单 / 写死列宽 | `ReTableOperate` + `resolveOperateColumnWidth` + `:size="size"`；过多靠 `limit`（默认 3）进「更多」 |
+| 「更多」单独 `ml-2` / `link` / 隐藏项占位导致空档 | 从左等宽槽 + text 主题色；见上文「对齐 / 需求→落盘」 |
 | `@show-collapse` | `@should-show-collapse` |

package/references/project-inventory.md

@@ -212,7 +212,7 @@ AI 生成业务代码时：以 Skill 模块标准样板为准；先查 `package.
 | **ReSmsCode** | 短信倒计时 | `ReSmsCode/` | `verify-captcha` |
 | **ReSvgIcon** | SVG / Iconify | `ReSvgIcon/` | `icons` |
 | **ReTableBar** | 表格工具栏 | `ReTableBar/` | `crud-pages` |
-| **ReTableOperate** | 行操作（`limit` 默认 3，超出进「更多」） | `ReTableOperate/` | `crud-pages` |
+| **ReTableOperate** | 行操作（`limit` 默认 3；超出进「更多」；列宽用 `resolveOperateColumnWidth`；`:size` 跟表格密度） | `ReTableOperate/` | `crud-pages` |
 | **ReText** | 文本省略 | `ReText/` | `layout-theme` |
 | **ReTimeLine** | 时间轴 | `ReTimeLine/` | `detail-page` / 业务 |
 | **ReTreeLine** | 树连线 | `ReTreeLine/` | `tree-table` |