@liujitcn/kratos-admin-core 0.0.65 → 0.0.67

package/dist/package/src/views/demo/demo-data.ts

@@ -0,0 +1,279 @@
+/**
+ * Demo 演示模块共享的静态 mock 数据与类型。
+ *
+ * 约定：
+ * - 全部数据纯前端静态维护，不调用任何后端接口；真实项目中对应字段来自 RPC 返回结构。
+ * - 记录内容本身是"业务数据"，与表格列头等 UI 文案不同，不进入语言包（与真实项目一致）。
+ * - avatar 使用内联 SVG data URL，避免依赖外网图片服务，离线环境也能渲染图片列。
+ */
+
+/** Demo 通用状态值：与 base.v1 Status 枚举保持一致（1 启用 / 2 禁用），core 不反向依赖业务 RPC。 */
+export const STATUS_ENABLE = 1;
+/** 禁用状态值。 */
+export const STATUS_DISABLE = 2;
+
+/**
+ * 用 canvas 生成 PNG base64 头像 data URL。
+ * 图片列的 formatSrc 只放行 base64 位图（png/jpeg/webp 等），
+ * 因此不能用 svg+xml 文本；canvas 生成可离线渲染且通过安全校验。
+ */
+function makeAvatar(background: string, text: string): string {
+  const size = 80;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.beginPath();
+  if (typeof ctx.roundRect === "function") {
+    ctx.roundRect(0, 0, size, size, 16);
+  } else {
+    ctx.rect(0, 0, size, size);
+  }
+  ctx.fillStyle = background;
+  ctx.fill();
+  ctx.fillStyle = "#ffffff";
+  ctx.font = "30px sans-serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, size / 2, size / 2 + 2);
+  return canvas.toDataURL("image/png");
+}
+
+/** Demo 员工记录，左树右表页面的行数据结构。 */
+export interface DemoEmployee {
+  /** 员工ID。 */
+  id: number;
+  /** 姓名列表格首列。 */
+  name: string;
+  /** 所属部门ID，关联左侧部门树的 id。 */
+  dept_id: number;
+  /** 邮箱，演示普通文本列。 */
+  email: string;
+  /** 手机号。 */
+  phone: string;
+  /** 头像，演示 cellType: "image" 图片列。 */
+  avatar: string;
+  /** 薪资（单位：分），演示 cellType: "money" 金额列，金额列按分换算展示。 */
+  salary: number;
+  /** 状态，1 启用 / 0 停用，演示 cellType: "status" 状态开关列。 */
+  status: number;
+  /** 入职日期，演示日期区间搜索。 */
+  entry_date: string;
+}
+
+/** Demo 项目记录，纯表格页面的行数据结构。 */
+export interface DemoProject {
+  /** 项目ID。 */
+  id: number;
+  /** 项目名称，演示 input 搜索 + tag 标签列。 */
+  name: string;
+  /** 项目等级，演示 tag: true + enum tagType 标签列。 */
+  level: string;
+  /** 负责人。 */
+  owner: string;
+  /** 状态，1 启用 / 0 停用。 */
+  status: number;
+  /** 预算金额（单位：分），演示 cellType: "money" 金额列，金额列按分换算展示。 */
+  budget: number;
+  /** 任务总数，放在多级表头“任务情况”下。 */
+  task_total: number;
+  /** 完成进度（0-100），演示 render 自定义渲染进度条列。 */
+  progress: number;
+  /** 所属城市（演示级联选择搜索），格式：省份/城市。 */
+  region: string[];
+  /** 创建时间，演示日期区间搜索。 */
+  created_at: string;
+}
+
+/** Demo 目录节点，树形表格页面的行数据结构（children 内嵌子级行）。 */
+export interface DemoCatalog {
+  /** 节点ID。 */
+  id: number;
+  /** 目录名称，作为树形展开列。 */
+  name: string;
+  /** 编码。 */
+  code: string;
+  /** 负责人。 */
+  owner: string;
+  /** 状态，1 启用 / 0 停用。 */
+  status: number;
+  /** 文档数量。 */
+  doc_count: number;
+  /** 子级目录，树形表格通过 tree-props.children 识别。 */
+  children?: DemoCatalog[];
+}
+
+/** 部门树节点，左侧 TreeFilter 静态数据结构。 */
+export interface DemoDeptNode {
+  /** 部门ID，字符串形式以匹配 TreeFilter 默认选中逻辑。 */
+  id: string;
+  /** 部门名称。 */
+  name: string;
+  /** 部门人数，展示在树节点右侧。 */
+  count: number;
+  /** 子部门。 */
+  children?: DemoDeptNode[];
+}
+
+/** 详情抽屉单条字段：label 走 t() 文案，value 为记录内容。 */
+export interface DemoDetailField {
+  /** 字段中文名。 */
+  label: string;
+  /** 字段值。 */
+  value: string;
+  /** 是否用 el-tag 展示。 */
+  tag?: boolean;
+  /** el-tag 展示类型（success/info/warning/danger）。 */
+  tagType?: "success" | "info" | "warning" | "danger";
+}
+
+/** 详情抽屉信息分组，一组对应一个 el-descriptions 区块。 */
+export interface DemoDetailSection {
+  /** 分组标题。 */
+  title: string;
+  /** 分组内字段。 */
+  fields: DemoDetailField[];
+}
+
+/** 详情抽屉入参模型，由各页面从行数据组装。 */
+export interface DemoDetailModel {
+  /** 抽屉标题。 */
+  title: string;
+  /** 基本信息分组。 */
+  sections: DemoDetailSection[];
+  /** 流程步骤，演示 el-steps。 */
+  steps: { title: string; description: string }[];
+  /** 操作时间线，演示 el-timeline。 */
+  timeline: { title: string; timestamp: string; type: "primary" | "success" | "warning" | "danger" | "info" }[];
+  /** 原始数据，演示 JSON 预览。 */
+  raw: Record<string, unknown>;
+}
+
+/** 左侧部门树静态数据：三层结构演示树的展开、搜索与联动。 */
+export const demoDeptTree: DemoDeptNode[] = [
+  {
+    id: "1",
+    name: "Demo 技术部",
+    count: 12,
+    children: [
+      { id: "11", name: "前端组", count: 5 },
+      { id: "12", name: "后端组", count: 7 }
+    ]
+  },
+  {
+    id: "2",
+    name: "Demo 产品部",
+    count: 6,
+    children: [
+      { id: "21", name: "产品设计组", count: 3 },
+      { id: "22", name: "用户体验组", count: 3 }
+    ]
+  },
+  { id: "3", name: "Demo 运营部", count: 4 }
+];
+
+/** 员工静态数据：覆盖图片列、金额列、状态列与部门树联动过滤演示。 */
+export const demoEmployees: DemoEmployee[] = [
+  { id: 1, name: "陈默", dept_id: 11, email: "chenmo@demo.com", phone: "13800000001", avatar: makeAvatar("#409eff", "陈"), salary: 1800000, status: STATUS_ENABLE, entry_date: "2023-03-15" },
+  { id: 2, name: "林晚", dept_id: 11, email: "linwan@demo.com", phone: "13800000002", avatar: makeAvatar("#67c23a", "林"), salary: 1650000, status: STATUS_ENABLE, entry_date: "2023-07-01" },
+  { id: 3, name: "苏辞", dept_id: 12, email: "suci@demo.com", phone: "13800000003", avatar: makeAvatar("#e6a23c", "苏"), salary: 2100000, status: STATUS_ENABLE, entry_date: "2022-11-20" },
+  { id: 4, name: "顾言", dept_id: 12, email: "guyan@demo.com", phone: "13800000004", avatar: makeAvatar("#f56c6c", "顾"), salary: 1950000, status: STATUS_DISABLE, entry_date: "2021-06-08" },
+  { id: 5, name: "沈舟", dept_id: 21, email: "shenzhou@demo.com", phone: "13800000005", avatar: makeAvatar("#909399", "沈"), salary: 1500000, status: STATUS_ENABLE, entry_date: "2024-01-10" },
+  { id: 6, name: "叶蓁", dept_id: 21, email: "yezhen@demo.com", phone: "13800000006", avatar: makeAvatar("#409eff", "叶"), salary: 1580000, status: STATUS_ENABLE, entry_date: "2024-04-22" },
+  { id: 7, name: "江离", dept_id: 22, email: "jiangli@demo.com", phone: "13800000007", avatar: makeAvatar("#67c23a", "江"), salary: 1420000, status: STATUS_DISABLE, entry_date: "2024-09-01" },
+  { id: 8, name: "温叙", dept_id: 3, email: "wenxu@demo.com", phone: "13800000008", avatar: makeAvatar("#e6a23c", "温"), salary: 1280000, status: STATUS_ENABLE, entry_date: "2025-02-14" },
+  { id: 9, name: "白鹭", dept_id: 3, email: "bailu@demo.com", phone: "13800000009", avatar: makeAvatar("#f56c6c", "白"), salary: 1350000, status: STATUS_ENABLE, entry_date: "2025-03-30" },
+  { id: 10, name: "祝余", dept_id: 11, email: "zhuyu@demo.com", phone: "13800000010", avatar: makeAvatar("#909399", "祝"), salary: 1720000, status: STATUS_ENABLE, entry_date: "2023-12-05" }
+];
+
+/** 项目等级枚举选项：同时用于标签列展示与搜索下拉、表单单选。 */
+export const demoLevelOptions = [
+  { label: "S", value: "S", tagType: "danger" },
+  { label: "A", value: "A", tagType: "warning" },
+  { label: "B", value: "B", tagType: "primary" },
+  { label: "C", value: "C", tagType: "info" }
+];
+
+/** 城市级联静态数据：演示搜索区 cascader 与 tree-select 控件。 */
+export const demoRegionTree = [
+  {
+    value: "zhejiang",
+    label: "浙江省",
+    children: [
+      { value: "hangzhou", label: "杭州市" },
+      { value: "ningbo", label: "宁波市" }
+    ]
+  },
+  {
+    value: "guangdong",
+    label: "广东省",
+    children: [
+      { value: "shenzhen", label: "深圳市" },
+      { value: "guangzhou", label: "广州市" }
+    ]
+  },
+  {
+    value: "sichuan",
+    label: "四川省",
+    children: [{ value: "chengdu", label: "成都市" }]
+  }
+];
+
+/** 项目静态数据：25 条覆盖分页、多级表头、进度条、标签列等展示场景。 */
+export const demoProjects: DemoProject[] = [
+  { id: 1, name: "星尘数据平台", level: "S", owner: "陈默", status: STATUS_ENABLE, budget: 128000000, task_total: 46, progress: 82, region: ["zhejiang", "hangzhou"], created_at: "2025-01-06 09:30:00" },
+  { id: 2, name: "流萤网关", level: "A", owner: "苏辞", status: STATUS_ENABLE, budget: 66000000, task_total: 32, progress: 64, region: ["guangdong", "shenzhen"], created_at: "2025-02-11 14:20:00" },
+  { id: 3, name: "青梧中台", level: "B", owner: "顾言", status: STATUS_DISABLE, budget: 42000000, task_total: 28, progress: 35, region: ["sichuan", "chengdu"], created_at: "2025-03-02 10:00:00" },
+  { id: 4, name: "拾光相册", level: "C", owner: "林晚", status: STATUS_ENABLE, budget: 15000000, task_total: 12, progress: 90, region: ["zhejiang", "ningbo"], created_at: "2025-04-18 16:45:00" },
+  { id: 5, name: "北辰监控", level: "A", owner: "沈舟", status: STATUS_ENABLE, budget: 73000000, task_total: 38, progress: 58, region: ["guangdong", "guangzhou"], created_at: "2025-05-09 11:15:00" },
+  { id: 6, name: "白泽知识库", level: "S", owner: "叶蓁", status: STATUS_ENABLE, budget: 156000000, task_total: 52, progress: 47, region: ["zhejiang", "hangzhou"], created_at: "2025-06-01 08:40:00" },
+  { id: 7, name: "惊蛰调度", level: "B", owner: "江离", status: STATUS_DISABLE, budget: 38000000, task_total: 22, progress: 20, region: ["sichuan", "chengdu"], created_at: "2025-06-25 13:30:00" },
+  { id: 8, name: "云阶存储", level: "C", owner: "温叙", status: STATUS_ENABLE, budget: 21000000, task_total: 16, progress: 73, region: ["zhejiang", "hangzhou"], created_at: "2025-07-14 15:10:00" },
+  { id: 9, name: "听雨日志", level: "B", owner: "白鹭", status: STATUS_ENABLE, budget: 34000000, task_total: 24, progress: 66, region: ["guangdong", "shenzhen"], created_at: "2025-08-03 09:55:00" },
+  { id: 10, name: "扶摇发布", level: "A", owner: "祝余", status: STATUS_ENABLE, budget: 89000000, task_total: 41, progress: 51, region: ["zhejiang", "ningbo"], created_at: "2025-08-20 10:25:00" },
+  { id: 11, name: "沧海备份", level: "C", owner: "陈默", status: STATUS_DISABLE, budget: 12000000, task_total: 9, progress: 15, region: ["sichuan", "chengdu"], created_at: "2025-09-01 14:00:00" },
+  { id: 12, name: "照夜网盘", level: "B", owner: "苏辞", status: STATUS_ENABLE, budget: 45000000, task_total: 27, progress: 88, region: ["guangdong", "guangzhou"], created_at: "2025-09-12 17:35:00" }
+];
+
+/** 目录树静态数据：三层嵌套演示树形表格的展开、折叠与子级操作。 */
+export const demoCatalogTree: DemoCatalog[] = [
+  {
+    id: 1,
+    name: "产品文档",
+    code: "prod-doc",
+    owner: "沈舟",
+    status: STATUS_ENABLE,
+    doc_count: 32,
+    children: [
+      {
+        id: 11,
+        name: "需求说明",
+        code: "prod-doc-req",
+        owner: "叶蓁",
+        status: STATUS_ENABLE,
+        doc_count: 12,
+        children: [
+          { id: 111, name: "V3 需求合集", code: "prod-doc-req-v3", owner: "叶蓁", status: STATUS_ENABLE, doc_count: 8 },
+          { id: 112, name: "历史归档", code: "prod-doc-req-arch", owner: "江离", status: STATUS_DISABLE, doc_count: 4 }
+        ]
+      },
+      { id: 12, name: "设计稿说明", code: "prod-doc-ui", owner: "祝余", status: STATUS_ENABLE, doc_count: 20 }
+    ]
+  },
+  {
+    id: 2,
+    name: "技术文档",
+    code: "tech-doc",
+    owner: "陈默",
+    status: STATUS_ENABLE,
+    doc_count: 58,
+    children: [
+      { id: 21, name: "架构设计", code: "tech-doc-arch", owner: "苏辞", status: STATUS_ENABLE, doc_count: 15 },
+      { id: 22, name: "接口文档", code: "tech-doc-api", owner: "顾言", status: STATUS_ENABLE, doc_count: 36 },
+      { id: 23, name: "运维手册", code: "tech-doc-ops", owner: "白鹭", status: STATUS_DISABLE, doc_count: 7 }
+    ]
+  },
+  { id: 3, name: "测试文档", code: "qa-doc", owner: "林晚", status: STATUS_ENABLE, doc_count: 21 },
+  { id: 4, name: "废弃目录", code: "deprecated", owner: "温叙", status: STATUS_DISABLE, doc_count: 0 }
+];

package/dist/package/src/views/demo/table/index.vue

@@ -0,0 +1,391 @@
+<!--
+  Demo 页面二：纯表格（标准 Table 基准页，ProTable 全量能力展示）。
+
+  本页演示要点（对照 core/src/components/ProTable/interface/index.ts 阅读）：
+  - 列类型：type: "selection" 多选列（radio 单选在“左树右表”页演示）；
+  - 预置单元格：cellType: "money" 金额列、"actions" 操作列；
+  - 标签列：tag: true + enum 的 tagType，按枚举值渲染 el-tag；
+  - 多级表头：_children 嵌套出“任务情况”分组表头；
+  - 自定义渲染：render 渲染进度条单元格、headerRender 渲染带提示的表头；
+  - 搜索区：演示 input / input-number / select / select-v2 / tree-select / cascader /
+    date-picker / time-picker / time-select / radio / switch / slider 十二种控件
+    （tenant-select 需要租户接口授权，静态页不演示，用法与表单内一致）；
+    部分搜索项绑定 isShow: false 的隐藏列，说明“搜索字段不必是可见列”；
+  - 组件级：toolButton 数组形态、border、headerActions 批量操作、requestApi 静态分页模拟。
+
+  requestApi 真实写法（本页用本地过滤模拟）：
+    const data = await defXxxService.PageXxx({ ...buildPageRequest(params), ...筛选 });
+    return { data: { list: data.list ?? [], total: data.total } };
+-->
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      row-key="id"
+      border
+      :columns="columns"
+      :header-actions="headerActions"
+      :tool-button="['refresh', 'setting', 'search']"
+      :request-api="requestProjectTable"
+      :request-auto="true"
+    />
+
+    <DemoFormDialog ref="formDialogRef" />
+    <DemoDetailDrawer v-model="detailVisible" :detail="detailModel" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, ref } from "vue";
+import { ElMessage, ElMessageBox, ElProgress, ElTooltip } from "element-plus";
+import { CirclePlus, Delete, EditPen, QuestionFilled, View } from "@element-plus/icons-vue";
+import type { ColumnProps, HeaderActionProps, ProTableInstance } from "../../../components/ProTable/interface";
+import ProTable from "../../../components/ProTable";
+import { t } from "../../../locales";
+
+import DemoFormDialog from "../components/DemoFormDialog.vue";
+import DemoDetailDrawer from "../components/DemoDetailDrawer.vue";
+import type { DemoDetailModel, DemoProject } from "../demo-data";
+import { STATUS_DISABLE, STATUS_ENABLE, demoLevelOptions, demoProjects, demoRegionTree } from "../demo-data";
+
+defineOptions({
+  name: "DemoTable",
+  inheritAttrs: false
+});
+
+const proTable = ref<ProTableInstance>();
+const formDialogRef = ref<InstanceType<typeof DemoFormDialog>>();
+const detailVisible = ref(false);
+const detailModel = ref<DemoDetailModel | null>(null);
+
+/** 项目本地数据副本：删除操作在这份副本上进行，真实项目调用 RPC 后刷新表格。 */
+const projectList = ref<DemoProject[]>([...demoProjects]);
+
+/** 状态枚举选项：tagType 决定标签颜色，同时供搜索下拉复用。 */
+const statusTagOptions = [
+  { label: t("common.status.enabled"), value: STATUS_ENABLE, tagType: "success" },
+  { label: t("common.status.disabled"), value: STATUS_DISABLE, tagType: "info" }
+];
+
+/** select-v2 大数据下拉的静态选项（isShow: false，仅出现在搜索区）。 */
+const tagSearchOptions = Array.from({ length: 50 }, (_, index) => ({ label: t("core.demo.table.tag_item", { index: index + 1 }), value: `tag-${index + 1}` }));
+
+/** tree-select 搜索项的静态团队树（isShow: false，仅出现在搜索区）。 */
+const ownerGroupOptions = demoRegionTree;
+
+/** 把级联编码翻译成“省 / 市”文本，用于 region 列单元格展示。 */
+function formatRegion(region: string[]): string {
+  const names: string[] = [];
+  for (const code of region) {
+    for (const province of demoRegionTree) {
+      if (province.value === code) names.push(province.label);
+      const city = province.children.find(item => item.value === code);
+      if (city) names.push(city.label);
+    }
+  }
+  return names.join(" / ");
+}
+
+/**
+ * 表格列配置：搜索项 order 从大到小排列，
+ * 未配置 order 的搜索项按列定义顺序排在后面。
+ */
+const columns = computed<ColumnProps[]>(() => [
+  // 多选列：配合 headerActions 的批量删除（selectedList）使用
+  { type: "selection", width: 55 },
+  { prop: "name", label: t("core.demo.table.field.name"), minWidth: 160, search: { el: "input", order: 8 } },
+  {
+    // 标签列演示：tag: true 后按 enum 里的 tagType 渲染 el-tag
+    prop: "level",
+    label: t("core.demo.table.field.level"),
+    width: 90,
+    align: "center",
+    tag: true,
+    enum: demoLevelOptions,
+    search: { el: "radio", enum: demoLevelOptions, order: 6 }
+  },
+  { prop: "owner", label: t("core.demo.table.field.owner"), minWidth: 100 },
+  {
+    prop: "status",
+    label: t("common.field.status"),
+    minWidth: 90,
+    align: "center",
+    tag: true,
+    enum: statusTagOptions,
+    search: { el: "select", enum: statusTagOptions, order: 7 }
+  },
+  {
+    // 金额列演示：cellType: "money"，suffix 拼在金额后
+    prop: "budget",
+    label: t("core.demo.table.field.budget"),
+    minWidth: 130,
+    align: "right",
+    cellType: "money",
+    moneyProps: { prefix: "¥", suffix: t("core.demo.table.money_unit") }
+  },
+  {
+    // 多级表头：_children 嵌套的列渲染在“任务情况”分组下
+    prop: "task_group",
+    label: t("core.demo.table.group.task"),
+    align: "center",
+    _children: [
+      {
+        prop: "task_total",
+        label: t("core.demo.table.field.task_total"),
+        minWidth: 110,
+        search: { el: "input-number", props: { min: 0, max: 999 }, order: 5 }
+      },
+      {
+        // 自定义单元格渲染：render 返回 VNode，这里用 el-progress 画进度条
+        prop: "progress",
+        label: t("core.demo.table.field.progress"),
+        minWidth: 150,
+        search: { el: "slider", props: { min: 0, max: 100, range: true }, order: 4 },
+        headerRender: () =>
+          // 自定义表头渲染：列名后追加提示图标
+          h("span", { style: "display:inline-flex;align-items:center;gap:4px" }, [
+            t("core.demo.table.field.progress"),
+            h(ElTooltip, { content: t("core.demo.table.tooltip.progress"), placement: "top" }, () =>
+              h(QuestionFilled, { style: "width:14px;height:14px;color:var(--el-text-color-secondary)" })
+            )
+          ]),
+        render: scope =>
+          h(ElProgress, {
+            percentage: Number((scope.row as DemoProject).progress) || 0,
+            strokeWidth: 8,
+            textInside: true
+          })
+      }
+    ]
+  },
+  {
+    // 普通自定义渲染：把级联编码格式化为“省 / 市”文本
+    prop: "region",
+    label: t("core.demo.table.field.region"),
+    minWidth: 160,
+    search: {
+      el: "cascader",
+      props: { options: demoRegionTree, clearable: true, placeholder: t("common.placeholder.select") },
+      order: 3
+    },
+    render: scope => formatRegion((scope.row as DemoProject).region)
+  },
+  {
+    prop: "created_at",
+    label: t("common.field.created_at"),
+    minWidth: 170,
+    align: "center",
+    search: {
+      el: "date-picker",
+      props: { type: "daterange", valueFormat: "YYYY-MM-DD", startPlaceholder: t("common.placeholder.start_date"), endPlaceholder: t("common.placeholder.end_date") },
+      order: 2
+    }
+  },
+  // ── 以下列 isShow: false，只出现在搜索区，演示“搜索字段不必是可见列” ──
+  {
+    // select-v2：虚拟列表下拉，适合大数据量选项
+    prop: "tags",
+    label: t("core.demo.table.field.tags"),
+    isShow: false,
+    search: { el: "select-v2", enum: tagSearchOptions, props: { clearable: true, filterable: true }, order: 1 }
+  },
+  {
+    // tree-select：树形下拉搜索
+    prop: "owner_group",
+    label: t("core.demo.table.field.owner_group"),
+    isShow: false,
+    search: { el: "tree-select", enum: ownerGroupOptions, props: { clearable: true }, order: 1 }
+  },
+  {
+    // time-picker：时间范围
+    prop: "updated_at",
+    label: t("common.field.updated_at"),
+    isShow: false,
+    search: { el: "time-picker", props: { valueFormat: "HH:mm:ss" }, order: 1 }
+  },
+  {
+    // time-select：单时间下拉
+    prop: "start_time",
+    label: t("common.field.start_time"),
+    isShow: false,
+    search: { el: "time-select", props: { start: "08:00", end: "22:00", step: "00:30" }, order: 1 }
+  },
+  {
+    // switch：布尔开关搜索，defaultValue 演示搜索默认值
+    prop: "enabled",
+    label: t("core.demo.table.field.enabled"),
+    isShow: false,
+    search: { el: "switch", defaultValue: undefined, order: 1 }
+  },
+  {
+    // 操作列：详情 / 编辑 / 删除
+    prop: "operation",
+    label: t("common.field.operation"),
+    align: "center",
+    cellType: "actions",
+    fixed: "right",
+    actions: [
+      {
+        label: t("common.action.detail"),
+        type: "primary",
+        link: true,
+        icon: View,
+        onClick: scope => handleOpenDetail(scope.row as DemoProject)
+      },
+      {
+        label: t("common.action.edit"),
+        type: "primary",
+        link: true,
+        icon: EditPen,
+        onClick: scope => handleEdit(scope.row as DemoProject)
+      },
+      {
+        label: t("common.action.delete"),
+        type: "danger",
+        link: true,
+        icon: Delete,
+        onClick: scope => handleDelete(scope.row as DemoProject)
+      }
+    ]
+  }
+]);
+
+/** 顶部按钮：新增打开全组件表单弹窗，批量删除要求先勾选行。 */
+const headerActions = computed<HeaderActionProps[]>(() => [
+  {
+    label: t("common.action.create"),
+    type: "success",
+    icon: CirclePlus,
+    onClick: () => formDialogRef.value?.open()
+  },
+  {
+    label: t("common.action.delete"),
+    type: "danger",
+    icon: Delete,
+    // disabled 回调拿到 HeaderActionScope，未勾选时置灰
+    disabled: scope => !scope.selectedList.length,
+    onClick: scope => handleDelete(scope.selectedList as DemoProject[])
+  }
+]);
+
+/**
+ * 静态模拟分页请求：本地实现搜索 + 分页。
+ * 演示了常见搜索参数的取值形态：区间日期为数组、级联为数组、
+ * 范围滑杆为数组、开关为布尔，真实项目直接透传给后端即可。
+ */
+async function requestProjectTable(params: Record<string, any>) {
+  await new Promise(resolve => setTimeout(resolve, 200));
+  const pagination = params.pagination ?? {};
+  const page = Number(pagination.page_num ?? 1);
+  const size = Number(pagination.page_size ?? 10);
+  let list = [...projectList.value];
+  if (params.name) list = list.filter(item => item.name.includes(params.name));
+  if (params.level) list = list.filter(item => item.level === params.level);
+  if (params.status !== undefined && params.status !== null && params.status !== "") {
+    list = list.filter(item => item.status === params.status);
+  }
+  if (params.task_total !== undefined && params.task_total !== null && params.task_total !== "") {
+    list = list.filter(item => item.task_total >= Number(params.task_total));
+  }
+  // 级联搜索：选中到市则精确匹配，仅选省则按首段匹配
+  if (Array.isArray(params.region) && params.region.length) {
+    list = list.filter(
+      item => item.region.slice(0, params.region.length).join("/") === params.region.join("/")
+    );
+  }
+  if (Array.isArray(params.progress) && params.progress.length === 2) {
+    const [min, max] = params.progress;
+    list = list.filter(item => item.progress >= min && item.progress <= max);
+  }
+  if (Array.isArray(params.created_at) && params.created_at.length === 2) {
+    const [start, end] = params.created_at;
+    list = list.filter(item => item.created_at.slice(0, 10) >= start && item.created_at.slice(0, 10) <= end);
+  }
+  return { data: { list: list.slice((page - 1) * size, page * size), total: list.length } };
+}
+
+/** 打开编辑弹窗：把行数据回填进共享表单。 */
+function handleEdit(row: DemoProject) {
+  formDialogRef.value?.open({
+    name: row.name,
+    level: row.level,
+    visibility: row.status === STATUS_ENABLE ? "public" : "private",
+    count: row.task_total,
+    range: [row.created_at, row.created_at]
+  });
+}
+
+/** 组装详情模型并打开抽屉。 */
+function handleOpenDetail(row: DemoProject) {
+  const levelOption = demoLevelOptions.find(item => item.value === row.level);
+  detailModel.value = {
+    title: `${t("core.demo.resource.project")} · ${row.name}`,
+    sections: [
+      {
+        title: t("core.demo.detail.section.basic"),
+        fields: [
+          { label: t("core.demo.table.field.name"), value: row.name },
+          { label: t("core.demo.table.field.level"), value: levelOption?.label ?? row.level, tag: true, tagType: (levelOption?.tagType as "success" | "info" | "warning" | "danger") ?? "info" },
+          { label: t("core.demo.table.field.owner"), value: row.owner },
+          { label: t("common.field.status"), value: row.status === STATUS_ENABLE ? t("common.status.enabled") : t("common.status.disabled"), tag: true, tagType: row.status === STATUS_ENABLE ? "success" : "info" },
+          { label: t("core.demo.table.field.budget"), value: `¥ ${(row.budget / 100).toLocaleString()}` },
+          { label: t("core.demo.table.field.region"), value: formatRegion(row.region) },
+          { label: t("common.field.created_at"), value: row.created_at }
+        ]
+      },
+      {
+        title: t("core.demo.table.group.task"),
+        fields: [
+          { label: t("core.demo.table.field.task_total"), value: String(row.task_total) },
+          { label: t("core.demo.table.field.progress"), value: `${row.progress}%` }
+        ]
+      }
+    ],
+    steps: [
+      { title: t("core.demo.detail.step.create"), description: row.created_at.slice(0, 10) },
+      { title: t("core.demo.detail.step.review"), description: "--" },
+      { title: t("core.demo.detail.step.publish"), description: "--" },
+      { title: t("core.demo.detail.step.done"), description: "--" }
+    ],
+    timeline: [
+      { title: t("core.demo.detail.timeline.created"), timestamp: row.created_at, type: "primary" },
+      { title: t("core.demo.detail.timeline.updated"), timestamp: "2026-02-10 09:00:00", type: "success" },
+      {
+        title: row.status === STATUS_ENABLE ? t("core.demo.detail.timeline.enabled") : t("core.demo.detail.timeline.disabled"),
+        timestamp: "2026-04-01 14:20:00",
+        type: row.status === STATUS_ENABLE ? "success" : "danger"
+      }
+    ],
+    raw: { ...row }
+  };
+  detailVisible.value = true;
+}
+
+/**
+ * 删除项目：兼容“单行对象 / 勾选数组”两种入参（与真实页面写法一致），
+ * 确认后从本地副本移除并刷新表格。
+ */
+function handleDelete(selected: DemoProject | DemoProject[]) {
+  const rows = Array.isArray(selected) ? selected : [selected];
+  const confirmMessage =
+    rows.length === 1
+      ? `${t("common.dialog.delete_single", { resource: t("core.demo.resource.project") })}\n${t("common.dialog.resource_field", {
+          field: t("core.demo.table.field.name"),
+          value: rows[0].name
+        })}`
+      : t("common.dialog.delete_batch", { count: rows.length, unit: "", resource: t("core.demo.resource.project") });
+  ElMessageBox.confirm(confirmMessage, t("common.title.warning"), {
+    confirmButtonText: t("common.action.confirm"),
+    cancelButtonText: t("common.action.cancel"),
+    type: "warning"
+  }).then(
+    () => {
+      const ids = new Set(rows.map(row => row.id));
+      projectList.value = projectList.value.filter(item => !ids.has(item.id));
+      ElMessage.success(t("common.message.delete_success", { resource: t("core.demo.resource.project") }));
+      proTable.value?.getTableList();
+    },
+    () => ElMessage.info(t("common.dialog.cancel_delete", { resource: t("core.demo.resource.project") }))
+  );
+}
+</script>