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

package/package.json

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

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

@@ -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,63 @@ 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";
+
+const operateLimit = 3;
+const operateButtons: OperateButton[] = [/* … */];
+</script>
 
-<!-- 需要多露几个时再改，勿低于 2（否则「更多」几乎占满） -->
-<ReTableOperate :list="operateButtons" :row="row" :index="$index" :limit="4" />
+<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 });
+```
+
+`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` 的单元格关闭省略号，避免列宽不足时出现 `..`。
 
-操作列 `width`：按钮多时适当加宽（如 160～220），仍依赖 `limit` 折叠，禁止无限加宽硬塞。
+**反例**：
+- 写死 `width="260"` / 不传 `:size="size"` → 与表格密度不一致、切换紧凑/宽松后按钮错位  
+- 列宽 `resolveOperateColumnWidth` 未传 `size` 或与组件 `:size` 不一致 → 推算宽度与实渲染不符  
+- 前置透明占位 / 为隐藏按钮留空 → 左侧大空档  
+- 平铺项按内容宽度自然撑开、无等宽槽 → 「发起修订」等比二字项把「更多」挤偏  
+- 给「更多」写 `ml-2` 或用 `type="primary" link` → 与 text 按钮档位不一致  
+- 按行拼接不同顺序的 `list` → 同名操作无法对应  
 
 ## 列表 → 详情/编辑
 
@@ -380,4 +433,5 @@ async function onSubmit() {
 | 详情根节点 `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）进「更多」 |
+| 「更多」单独 `ml-2` / 操作列左对齐导致行间末位错位 | 右对齐 + 统一间距；见上文「对齐」约定 |
 | `@show-collapse` | `@should-show-collapse` |