@liujitcn/kratos-admin-core 0.0.47 → 0.0.48

package/README.md

@@ -177,3 +177,9 @@ pnpm --filter @liujitcn/kratos-admin-core type:check
 pnpm --filter @liujitcn/kratos-admin-core build:package
 pnpm --filter @liujitcn/kratos-admin-core pack
 ```
+
+时间列的对齐方式由页面通过 `align` 显式配置，ProTable 不按时间字段名称判断；修改时间列使用 `align: "center"` 居中显示。
+
+ProTable 的 `cellType: "actions"` 操作列按当前行的 `hidden` 过滤按钮，优先展示使用 `common.action.edit`、`common.action.delete` 文案的编辑、删除操作；可见按钮超过三项时，其余操作收入“更多”菜单。未配置或无权限的编辑、删除不会补充显示，菜单保留图标、禁用状态和点击参数；自定义 render 或插槽不参与折叠。
+
+操作列默认固定在右侧。配置式操作列（`cellType: "actions"`）根据当前页实际展示按钮和表头的最大宽度自适应，计入翻译文案、图标和间距，随语言、字体和行权限变化重新测量，最小宽度为 `80px`；折叠菜单内的按钮不参与测量。自定义 render 或插槽操作列仍默认 `160px`。页面可通过 `width` 或 `minWidth` 覆盖自动宽度，通过 `fixed: "left"` 调整固定位置，或通过 `fixed: false` 取消固定。

package/dist/package/declarations/src/format.d.ts

@@ -1 +1 @@
-export { formatJson, formatSrc, normalizeRichTextMediaPaths, normalizeStaticAssetPath } from "./utils/utils";
+export { formatDateTime, formatJson, formatSrc, normalizeRichTextMediaPaths, normalizeStaticAssetPath } from "./utils/utils";

package/dist/package/declarations/src/utils/proTable.d.ts

@@ -1,10 +1,9 @@
-import type { ColumnProps, EnumProps } from "../components/ProTable/interface";
+import type { EnumProps } from "../components/ProTable/interface";
+export { resolveTableColumnAlign, type TableAlign } from "./tableColumn";
 /** 字典值输出给表格枚举时的目标类型。 */
 type DictValueType = "number" | "string";
 /** 表格批量操作支持的主键类型。 */
 type SelectedId = string | number;
-/** 表格单元格支持的对齐方式。 */
-export type TableAlign = "left" | "center" | "right";
 /** 表格分页入参。 */
 type PageRequestParams = Record<string, any> & {
     /** 当前页码。 */
@@ -19,14 +18,6 @@ type NormalizedPageRequest<T extends PageRequestParams> = T & {
     /** 接口请求每页条数。 */
     page_size: number;
 };
-/**
- * 根据列语义和当前表格数据解析单元格对齐方式。
- *
- * 显式 align 始终优先；数据表映射按文本左对齐，字典、静态枚举及预置状态列居中，
- * 金额列和纯数字列右对齐，其余内容左对齐。空表时会先按列语义返回默认值，
- * 数据加载后由响应式表格重新解析。
- */
-export declare function resolveTableColumnAlign(column: ColumnProps, rows?: Record<string, any>[]): TableAlign;
 /**
  * 将字典缓存转换为 ProTable 搜索枚举数据。
  */
@@ -41,4 +32,3 @@ export declare function buildPageRequest<T extends PageRequestParams>(params: T)
  * 统一整理表格多选和单条操作产生的 ID 集合。
  */
 export declare function normalizeSelectedIds(selected?: SelectedId | SelectedId[]): SelectedId[];
-export {};

package/dist/package/declarations/src/utils/tableColumn.d.ts

@@ -0,0 +1,11 @@
+import type { ColumnProps } from "../components/ProTable/interface";
+/** 表格单元格支持的对齐方式。 */
+export type TableAlign = "left" | "center" | "right";
+/**
+ * 根据列语义和当前表格数据解析单元格对齐方式。
+ *
+ * 显式 align 始终优先；字典、枚举及预置状态列居中，
+ * 金额列和纯数字列右对齐，其余内容左对齐。空表时会先按列语义返回默认值，
+ * 数据加载后由响应式表格重新解析。
+ */
+export declare function resolveTableColumnAlign(column: ColumnProps, rows?: Record<string, any>[]): TableAlign;

package/dist/package/declarations/src/utils/utils.d.ts

@@ -6,6 +6,8 @@ export declare function formatJson(str: string): string;
  * 将后端分单位金额转换为元字符串。
  */
 export declare function formatPrice(price?: number): string;
+/** 将时间值格式化为统一的本地日期时间文本。 */
+export declare function formatDateTime(value?: string | number | Date): string;
 /**
  * 按静态资源域名补齐图片地址。
  */

package/dist/package/src/components/ProTable/components/TableColumn.vue

@@ -3,8 +3,19 @@
 </template>
 
 <script setup lang="ts" name="TableColumn">
-import { h, inject, isProxy, markRaw, ref, toRaw, useSlots } from "vue";
-import { ElButton, ElImage, ElSwitch, ElTableColumn, ElTag, ElText } from "element-plus";
+import { h, inject, isProxy, markRaw, onUnmounted, ref, toRaw, useSlots, withDirectives } from "vue";
+import type { ObjectDirective } from "vue";
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElImage,
+  ElSwitch,
+  ElTableColumn,
+  ElTag,
+  ElText
+} from "element-plus";
 import DictLabel from "../../../components/Dict/DictLabel.vue";
 import { ColumnProps, HeaderRenderScope, RenderScope, TableActionProps } from "../../../components/ProTable/interface";
 import type { TableAlign } from "../../../utils/proTable";
@@ -21,6 +32,57 @@ const slots = useSlots();
 
 const enumMap = inject("enumMap", ref(new Map()));
 
+const actionWidths = ref(new Map<string, number>());
+const measuredCells = new Map<HTMLElement, string>();
+let resizeObserver: ResizeObserver | undefined;
+let measureFrame = 0;
+
+/** 合并当前列所有可见行和表头的实际宽度，支持语言、字体和权限变化。 */
+const scheduleActionMeasurement = () => {
+  cancelAnimationFrame(measureFrame);
+  measureFrame = requestAnimationFrame(() => {
+    const widths = new Map<string, number>();
+    measuredCells.forEach((key, element) => {
+      if (!element.isConnected || !element.getClientRects().length) return;
+      const cell = element.closest(".cell");
+      if (!cell) return;
+      const style = getComputedStyle(cell);
+      const width = Math.ceil(
+        element.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + 2
+      );
+      widths.set(key, Math.max(widths.get(key) ?? 80, width));
+    });
+    if (widths.size !== actionWidths.value.size || [...widths].some(([key, width]) => actionWidths.value.get(key) !== width)) {
+      actionWidths.value = widths;
+    }
+  });
+};
+
+/** 观察渲染后的操作内容，避免按字符个数估算不同语言的文本宽度。 */
+const measureActionContent: ObjectDirective<HTMLElement, string> = {
+  mounted(element, binding) {
+    measuredCells.set(element, binding.value);
+    resizeObserver ??= new ResizeObserver(scheduleActionMeasurement);
+    resizeObserver.observe(element);
+    scheduleActionMeasurement();
+  },
+  updated(element, binding) {
+    measuredCells.set(element, binding.value);
+    scheduleActionMeasurement();
+  },
+  unmounted(element) {
+    measuredCells.delete(element);
+    resizeObserver?.unobserve(element);
+    scheduleActionMeasurement();
+  }
+};
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+  cancelAnimationFrame(measureFrame);
+  measuredCells.clear();
+});
+
 /**
  * 透传给 Element Plus 前移除图标组件上的响应式代理，避免 Vue 对组件对象发出性能告警。
  */
@@ -166,18 +228,23 @@ const renderMoneyCell = (item: ColumnProps, scope: RenderScope<any>) => {
 };
 
 /**
- * 渲染操作按钮列，统一处理显隐、禁用与透传参数。
+ * 渲染操作按钮列，优先展示编辑、删除，超过三项时将其他操作折叠。
  */
 const renderActionsCell = (item: ColumnProps, scope: RenderScope<any>) => {
   if (!item.actions?.length) return "--";
   const visibleActions = item.actions.filter(action => !getBooleanValue(action.hidden, scope));
   if (!visibleActions.length) return "--";
-  return visibleActions.map((action: TableActionProps) => {
+  const primaryLabels = [t("common.action.edit"), t("common.action.delete")];
+  const primaryActions = primaryLabels.flatMap(label => visibleActions.filter(action => action.label === label));
+  const otherActions = visibleActions.filter(action => !primaryLabels.includes(action.label));
+  const inlineActions = visibleActions.length > 3 ? primaryActions : [...primaryActions, ...otherActions];
+  const buttons = inlineActions.map((action: TableActionProps) => {
     const params = resolveColumnParams(action.params, scope);
     return h(
       ElButton,
       {
         key: action.label,
+        size: "small",
         type: action.type ?? "primary",
         link: action.link ?? true,
         icon: normalizeActionIcon(action.icon),
@@ -187,6 +254,41 @@ const renderActionsCell = (item: ColumnProps, scope: RenderScope<any>) => {
       { default: () => action.label }
     );
   });
+  if (visibleActions.length > 3 && otherActions.length)
+    buttons.push(
+      h(
+        ElDropdown,
+        { trigger: "click", placement: "bottom-end", size: "small" },
+        {
+          default: () =>
+            h(ElButton, { type: "primary", link: true, size: "small", icon: ArrowDown }, () => t("common.action.more")),
+          dropdown: () =>
+            h(ElDropdownMenu, null, () =>
+              otherActions.map(action => {
+                const disabled = getBooleanValue(action.disabled, scope);
+                const params = resolveColumnParams(action.params, scope);
+                return h(
+                  ElDropdownItem,
+                  {
+                    key: action.label,
+                    icon: normalizeActionIcon(action.icon),
+                    disabled,
+                    style: disabled ? undefined : { color: `var(--el-color-${action.type ?? "primary"})` },
+                    onClick: () => {
+                      if (!disabled) action.onClick(scope, params);
+                    }
+                  },
+                  () => action.label
+                );
+              })
+            )
+        }
+      )
+    );
+  const content = h("span", { class: "pro-table-actions" }, buttons);
+  return item.width == null && item.minWidth == null
+    ? withDirectives(content, [[measureActionContent, item.prop ?? item.label ?? ""]])
+    : content;
 };
 
 /** 渲染默认表头标题，避免窄列换行并保留完整标题提示。 */
@@ -213,12 +315,23 @@ const renderPresetCell = (item: ColumnProps, scope: RenderScope<any>) => {
   }
 };
 
+/** 渲染表格列，为操作列提供自适应宽度和右侧固定默认值。 */
 const RenderTableColumn = (item: ColumnProps) => {
   if (!item.isShow) return null;
+  const isActionColumn = item.cellType === "actions" || item.prop === "operation";
+  const autoActionWidth = item.cellType === "actions" && !item.render && !(item.prop && slots[handleProp(item.prop)]);
   return h(
     ElTableColumn,
     {
       ...item,
+      width:
+        item.width ??
+        (isActionColumn && item.minWidth == null
+          ? autoActionWidth
+            ? (actionWidths.value.get(item.prop ?? item.label ?? "") ?? 80)
+            : 160
+          : undefined),
+      fixed: item.fixed ?? (isActionColumn ? "right" : undefined),
       align: item.align ?? props.resolveAlign?.(item) ?? "left",
       showOverflowTooltip: item.showOverflowTooltip ?? item.prop !== "operation"
     },
@@ -235,9 +348,39 @@ const RenderTableColumn = (item: ColumnProps) => {
       header: (scope: HeaderRenderScope<any>) => {
         if (item.headerRender) return item.headerRender(scope);
         if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope);
+        if (autoActionWidth && item.width == null && item.minWidth == null) {
+          return withDirectives(h("span", { class: "pro-table-action-header" }, item.label), [
+            [measureActionContent, item.prop ?? item.label ?? ""]
+          ]);
+        }
         return renderHeaderLabel(item);
       }
     }
   );
 };
 </script>
+
+<style lang="scss">
+// 操作容器在函数式列的插槽中生成，不带本组件的 scopeId，使用专属类名限定样式。
+.pro-table-actions {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 4px;
+  align-items: center;
+  width: max-content;
+  vertical-align: middle;
+  white-space: nowrap;
+  .el-button {
+    margin-left: 0;
+  }
+  .el-dropdown {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+.pro-table-action-header {
+  display: inline-block;
+  width: max-content;
+  white-space: nowrap;
+}
+</style>

package/dist/package/src/format.ts

@@ -1 +1 @@
-export { formatJson, formatSrc, normalizeRichTextMediaPaths, normalizeStaticAssetPath } from "./utils/utils";
+export { formatDateTime, formatJson, formatSrc, normalizeRichTextMediaPaths, normalizeStaticAssetPath } from "./utils/utils";

package/dist/package/src/utils/proTable.ts

@@ -1,16 +1,14 @@
-import type { ColumnProps, EnumProps, TypeProps } from "../components/ProTable/interface";
+import type { EnumProps } from "../components/ProTable/interface";
 import type { OptionBaseDictResponse_BaseDictItem } from "../rpc/system/admin/v1/base_dict";
 import { useDictStoreHook } from "../stores/modules/dict";
-import { isRef } from "vue";
+
+export { resolveTableColumnAlign, type TableAlign } from "./tableColumn";
 
 /** 字典值输出给表格枚举时的目标类型。 */
 type DictValueType = "number" | "string";
 /** 表格批量操作支持的主键类型。 */
 type SelectedId = string | number;
 
-/** 表格单元格支持的对齐方式。 */
-export type TableAlign = "left" | "center" | "right";
-
 /** 表格分页入参。 */
 type PageRequestParams = Record<string, any> & {
   /** 当前页码。 */
@@ -27,54 +25,6 @@ type NormalizedPageRequest<T extends PageRequestParams> = T & {
   page_size: number;
 };
 
-/**
- * 获取表格行的列值，支持点号分隔的多级字段。
- */
-function getTableCellValue(row: Record<string, any>, prop: string) {
-  return prop.split(".").reduce((value, key) => (value == null ? undefined : value[key]), row as any);
-}
-
-/**
- * 判断值是否为可用于数值对齐的 Number 类型。
- */
-function isPureNumber(value: unknown) {
-  return typeof value === "number" && Number.isFinite(value);
-}
-
-/**
- * 判断枚举是否来自数据表映射，远程函数和响应式选项都属于动态数据映射。
- */
-function isDataTableEnum(enumValue: ColumnProps["enum"]) {
-  return typeof enumValue === "function" || isRef(enumValue);
-}
-
-/**
- * 根据列语义和当前表格数据解析单元格对齐方式。
- *
- * 显式 align 始终优先；数据表映射按文本左对齐，字典、静态枚举及预置状态列居中，
- * 金额列和纯数字列右对齐，其余内容左对齐。空表时会先按列语义返回默认值，
- * 数据加载后由响应式表格重新解析。
- */
-export function resolveTableColumnAlign(column: ColumnProps, rows: Record<string, any>[] = []): TableAlign {
-  if (column.align === "left" || column.align === "center" || column.align === "right") return column.align;
-
-  const centeredTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
-  if (centeredTypes.includes(column.type as TypeProps)) return "center";
-  if (column.cellType === "actions" || column.cellType === "status" || column.cellType === "image") return "center";
-  if (column.cellType === "money") return "right";
-  if (column.dictCode || column.tag) return "center";
-  if (column.enum) return isDataTableEnum(column.enum) ? "left" : "center";
-
-  if (column.prop) {
-    const values = rows
-      .map(row => getTableCellValue(row, column.prop as string))
-      .filter(value => value !== undefined && value !== null && value !== "");
-    if (values.length && values.every(isPureNumber)) return "right";
-  }
-
-  return "left";
-}
-
 /**
  * 按配置将字典值转换为表格枚举可识别的类型。
  */

package/dist/package/src/utils/tableColumn.ts

@@ -0,0 +1,55 @@
+import type { ColumnProps, TypeProps } from "../components/ProTable/interface";
+
+/** 表格单元格支持的对齐方式。 */
+export type TableAlign = "left" | "center" | "right";
+
+/** 获取表格行的列值，支持点号分隔的多级字段。 */
+function getTableCellValue(row: Record<string, any>, prop: string) {
+  return prop.split(".").reduce((value, key) => (value == null ? undefined : value[key]), row as any);
+}
+
+/** 判断值是否为可用于数值对齐的 Number 类型。 */
+function isPureNumber(value: unknown) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+/** 判断列字段名是否表示时间值。 */
+function isTimeColumn(column: ColumnProps) {
+  const prop = column.prop?.toLowerCase();
+  return !!prop && /(^|[._])(created|updated|deleted|expires|scheduled|execute|start|end|login|logout|last)[._]?at?$/.test(prop);
+}
+
+/** 判断列字段名是否表示数值。 */
+function isNumericColumn(column: ColumnProps) {
+  const prop = column.prop?.toLowerCase();
+  return !!prop && /(^|[._])(id|sort|size|count|total|rows|priority|status_code|latency|duration|process_time|ttl|retention|attempt|qps|rate|number|num|amount|days|minutes|seconds|ms)$/.test(prop);
+}
+
+/**
+ * 根据列语义和当前表格数据解析单元格对齐方式。
+ *
+ * 显式 align 始终优先；字典、枚举及预置状态列居中，
+ * 金额列和纯数字列右对齐，其余内容左对齐。空表时会先按列语义返回默认值，
+ * 数据加载后由响应式表格重新解析。
+ */
+export function resolveTableColumnAlign(column: ColumnProps, rows: Record<string, any>[] = []): TableAlign {
+  if (column.align === "left" || column.align === "center" || column.align === "right") return column.align;
+
+  const centeredTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
+  if (centeredTypes.includes(column.type as TypeProps)) return "center";
+  if (column.cellType === "actions" || column.cellType === "status" || column.cellType === "image") return "center";
+  if (column.cellType === "money") return "right";
+  if (column.dictCode || column.tag) return "center";
+  if (column.enum) return "center";
+  if (isTimeColumn(column)) return "center";
+  if (isNumericColumn(column)) return "right";
+
+  if (column.prop) {
+    const values = rows
+      .map(row => getTableCellValue(row, column.prop as string))
+      .filter(value => value !== undefined && value !== null && value !== "");
+    if (values.length && values.every(isPureNumber)) return "right";
+  }
+
+  return "left";
+}

package/dist/package/src/utils/utils.ts

@@ -17,6 +17,15 @@ export function formatPrice(price?: number) {
   return (price / 100).toFixed(2);
 }
 
+/** 将时间值格式化为统一的本地日期时间文本。 */
+export function formatDateTime(value?: string | number | Date) {
+  if (value === undefined || value === null || value === "") return "-";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return String(value);
+  const pad = (part: number) => String(part).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+
 /**
  * 按静态资源域名补齐图片地址。
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujitcn/kratos-admin-core",
   "private": false,
-  "version": "0.0.47",
+  "version": "0.0.48",
   "type": "module",
   "description": "kratos-admin frontend runtime and base modules",
   "author": {
@@ -32,7 +32,7 @@
     "dayjs": "^1.11.21",
     "dompurify": "^3.4.5",
     "driver.js": "^1.3.1",
-    "echarts": "^5.5.1",
+    "echarts": "^6.1.0",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.7.6",
     "go-captcha-vue": "2.0.6",