@mx-sose-front/mx-sose-graph 1.1.8 → 1.2.1

package/src/components/Table/Table.vue

@@ -0,0 +1,1193 @@
+<template>
+  <div class="gantt-container" @click="onContainerClick">
+    <!-- 左侧表格 -->
+    <div
+      class="gantt-left"
+      :class="{ 'with-search-bar': showSearchBar }"
+      ref="tableContainerRef"
+      @scroll="() => syncVirtualViewportState()"
+    >
+      <table class="gantt-table" :style="{ width: tableWidth + 'px' }">
+        <!-- 用 colgroup 统一控制整列宽度 -->
+        <colgroup>
+          <col
+            v-for="col in displayColumns"
+            :key="col.configId"
+            :style="{ width: getColumnWidth(col.configId) + 'px' }"
+          />
+        </colgroup>
+        <thead>
+          <tr class="header-row-2">
+            <th v-for="col in displayColumns" :key="col.id" class="col-date">
+              <div class="th-content">
+                <div v-if="col.configId == 'index'" style="text-align: center">
+                  {{ col.name }}
+                </div>
+                <div v-else class="th-label">{{ col.name }}</div>
+                <div
+                  v-if="col.configId !== 'index'"
+                  class="col-resizer"
+                  @mousedown="startColumnResize(col.configId, $event)"
+                ></div>
+              </div>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <!-- 上方占位空间 -->
+          <tr
+            v-if="virtualTopSpacerHeight > 0"
+            class="table-spacer-row"
+            aria-hidden="true"
+          >
+            <td :colspan="visibleColumnSpan">
+              <div
+                class="table-spacer"
+                :style="{ height: virtualTopSpacerHeight + 'px' }"
+              ></div>
+            </td>
+          </tr>
+
+          <!-- 虚拟行 -->
+          <tr
+            v-for="row in virtualRows"
+            :key="row.item.id"
+            class="gantt-row"
+            :class="{ 'row-selected': selectedRowIds.has(row.item.id) }"
+            @click.stop="selectRow(row.item.id, $event)"
+            @contextmenu="handleContextMenu(row.item, $event)"
+          >
+            <td
+              v-for="col in displayColumns"
+              :key="col.configId"
+              class="col-date"
+              :title="getDisplayCellValue(row.item, col)"
+              @dblclick.stop="
+                col.configId !== 'index' && openCellEditor(row.item, col)
+              "
+            >
+              <!-- 编辑态：根据列的 valueType 渲染不同编辑控件（Element Plus） -->
+              <template v-if="isCellEditing(row.item.id, col.configId)">
+                <!-- 布尔：单选（与属性面板保持一致） -->
+                <el-radio-group
+                  v-if="editingTextCell?.editorType === 'Boolean'"
+                  v-model="editingTextCell!.value"
+                  class="cell-boolean-group"
+                  @click.stop
+                  @change="saveTextEdit(row.item, col.configId)"
+                >
+                  <el-radio :label="true" size="small">是</el-radio>
+                  <el-radio :label="false" size="small">否</el-radio>
+                </el-radio-group>
+                <!-- 日期：日期时间选择器 -->
+                <el-date-picker
+                  v-else-if="editingTextCell?.editorType === 'Date'"
+                  :ref="setEditingInputRef"
+                  v-model="editingTextCell!.value"
+                  type="datetime"
+                  size="small"
+                  class="cell-date"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                  :teleported="false"
+                  :clearable="true"
+                  :editable="false"
+                  @click.stop
+                  @change="saveTextEdit(row.item, col.configId)"
+                  @blur="saveTextEdit(row.item, col.configId)"
+                  @keydown.esc.prevent="closeCellEditor"
+                />
+                <!-- 枚举：下拉选择，选项来自后端 literals -->
+                <el-select
+                  v-else-if="
+                    editingTextCell?.editorType === 'Enumeration' &&
+                    col.literals &&
+                    col.literals.length
+                  "
+                  v-model="editingTextCell!.value"
+                  size="small"
+                  class="cell-select"
+                  @click.stop
+                  @change="saveTextEdit(row.item, col.configId)"
+                  @blur="saveTextEdit(row.item, col.configId)"
+                >
+                  <el-option
+                    v-for="opt in col.literals"
+                    :key="opt.value"
+                    :label="opt.key"
+                    :value="opt.value"
+                  />
+                </el-select>
+                <!-- 富文本：先用 textarea（属性面板是弹窗富文本，这里做轻量版） -->
+                <el-input
+                  v-else-if="editingTextCell?.editorType === 'Html'"
+                  :ref="setEditingInputRef"
+                  v-model="editingTextCell!.value"
+                  type="textarea"
+                  autosize
+                  size="small"
+                  class="cell-textarea"
+                  @click.stop
+                  @blur="saveTextEdit(row.item, col.configId)"
+                  @keydown.esc.prevent="closeCellEditor"
+                />
+                <!-- 其他（String、Integer 等）：文本/数字输入框 -->
+                <el-input
+                  v-else
+                  :ref="setEditingInputRef"
+                  v-model="editingTextCell!.value"
+                  :type="
+                    editingTextCell?.editorType === 'Integer'
+                      ? 'number'
+                      : 'text'
+                  "
+                  size="small"
+                  class="cell-input"
+                  @click.stop
+                  @blur="saveTextEdit(row.item, col.configId)"
+                  @keydown.enter.prevent="saveTextEdit(row.item, col.configId)"
+                  @keydown.esc.prevent="closeCellEditor"
+                />
+              </template>
+
+              <!-- 显示态 -->
+              <template v-else>
+                <div
+                  v-if="col.configId === 'index'"
+                  class="item-index"
+                  style="text-align: center"
+                >
+                  {{ row.index + 1 }}
+                </div>
+                <div
+                  v-else-if="
+                    col.valueType === 'Boolean' &&
+                    hasBooleanCellValue(row.item, col.configId)
+                  "
+                  class="item-name cell-boolean-display"
+                >
+                  <el-radio-group
+                    :model-value="normalizeBooleanValue((row.item as any)[col.configId])"
+                    class="cell-boolean-group"
+                    :disabled="col.isReadonly === true"
+                    @click.stop
+                    @change="handleBooleanCellChange(row.item, col.configId, $event)"
+                  >
+                    <el-radio :label="true" size="small">是</el-radio>
+                    <el-radio :label="false" size="small">否</el-radio>
+                  </el-radio-group>
+                </div>
+                <div v-else-if="col.valueType === 'Boolean'" class="item-name"></div>
+                <div v-else class="item-name">
+                  <div
+                    v-if="getDisplayCellIcon(row.item, col)"
+                    class="expand-icon"
+                  >
+                    <img
+                      :src="
+                        getIcon('childIcons', getDisplayCellIcon(row.item, col))
+                      "
+                      alt=""
+                      style="width: 16px; height: 16px; display: block"
+                    />
+                  </div>
+                  <span class="cell-text">{{
+                    getDisplayCellValue(row.item, col)
+                  }}</span>
+                </div>
+              </template>
+            </td>
+          </tr>
+
+          <!-- 下方占位空间 -->
+          <tr
+            v-if="virtualBottomSpacerHeight > 0"
+            class="table-spacer-row"
+            aria-hidden="true"
+          >
+            <td :colspan="visibleColumnSpan">
+              <div
+                class="table-spacer"
+                :style="{ height: virtualBottomSpacerHeight + 'px' }"
+              ></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- 右键菜单 -->
+    <GanttContextMenu
+      v-model:visible="showContextMenu"
+      :position="contextMenuPosition"
+      :can-move-up="canMoveUp"
+      :can-move-down="canMoveDown"
+      @property-config="handlePropertyConfig"
+      @tree-highlight="handleTreeHighlight"
+      @move-up="handleMoveUpFromMenu"
+      @move-down="handleMoveDownFromMenu"
+      @delete="handleDeleteFromMenu"
+      @remove="handleRemoveFromMenu"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import type { Shape, GanttData, GanttColumn } from "../../types";
+import { eventBus } from "../../store/eventBus";
+import GanttContextMenu from "../GanttContextMenu/GanttContextMenu.vue";
+import { getIcon } from "../../utils/iconLoader";
+import { useChartRowSelection, useVirtualScroll } from "../../hooks";
+/**
+ * 组件入参
+ */
+interface Props {
+  shape: Shape;
+}
+
+const props = defineProps<Props>();
+
+/**
+ * 前端内置固定列：序号列
+ */
+const indexColumn = {
+  configId: "index",
+  name: "序号",
+  isShow: true,
+  isReadonly: false,
+};
+/**
+ * 当前组件内部使用的行数据类型
+ * 允许动态字段，便于适配后端返回的任意列
+ */
+// 列宽度状态（动态调整，使用 configId 作为 key）
+const columnWidths = ref<Record<string, number>>({});
+/**
+ * 搜索输入框 ref
+ */
+const searchInputRef = ref<HTMLInputElement | null>(null);
+
+/**
+ * 表格容器 ref（用于虚拟滚动）
+ */
+const tableContainerRef = ref<HTMLDivElement | null>(null);
+
+/**
+ * 当前编辑中的输入框 ref
+ */
+const editingInputRef = ref<HTMLInputElement | null>(null);
+
+/**
+ * 搜索相关状态
+ */
+const showSearchBar = ref(false);
+const searchKeyword = ref("");
+const searchMatchedIds = ref<string[]>([]);
+const currentMatchIndex = ref(-1);
+/**
+ * 默认列配置
+ * 没有后端列配置时，使用这组默认列
+ */
+const defaultColumns = ref<GanttColumn[]>([]);
+
+// 甘特图数据：使用后端数据
+type GanttItem = GanttData & { hasChildren: boolean };
+const ganttItems = ref<GanttItem[]>([]);
+/**
+ * 除序号列之外的第一列 configId（displayColumns[1]）
+ */
+const firstDataColId = computed(() => {
+  return displayColumns.value[1]?.configId || "";
+});
+/**
+ * 实际表格数据
+ * 优先使用后端数据，没有则使用 mock 数据
+ */
+// const ganttItems = ref<GanttItem[]>([...mockData.value])
+
+// 列配置：优先使用后端数据
+const columnConfig = ref<any[]>([...defaultColumns.value]);
+
+/**
+ * 当前可见列
+ */
+const visibleColumns = computed(() => {
+  return columnConfig.value.filter((col) => col.isShow);
+});
+/**
+ * 最终渲染列
+ * 序号列固定在最左侧
+ */
+const displayColumns = computed(() => {
+  return [indexColumn, ...visibleColumns.value];
+});
+
+/**
+ * 过滤后的数据（用于搜索）
+ * 如果没有搜索关键字，返回所有数据
+ */
+const filteredGanttItems = computed(() => {
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  if (!keyword) {
+    return ganttItems.value;
+  }
+
+  if (searchMatchedIds.value.length === 0) {
+    return [];
+  }
+
+  return ganttItems.value.filter((item) =>
+    searchMatchedIds.value.includes(item.id),
+  );
+});
+
+// ========== 虚拟滚动 ==========
+const TABLE_HEADER_HEIGHT = 28;
+const TABLE_ROW_HEIGHT = 32;
+const TABLE_VIRTUAL_OVERSCAN = 8;
+
+const {
+  virtualRows,
+  virtualTopSpacerHeight,
+  virtualBottomSpacerHeight,
+  virtualStartIndex,
+  virtualEndIndex,
+  syncVirtualViewportState,
+  visibleColumnSpan,
+} = useVirtualScroll(filteredGanttItems, {
+  itemHeight: TABLE_ROW_HEIGHT,
+  headerHeight: TABLE_HEADER_HEIGHT,
+  overscan: TABLE_VIRTUAL_OVERSCAN,
+  containerRef: tableContainerRef,
+  columnCount: computed(() => displayColumns.value.length),
+});
+
+/**
+ * 监听虚拟索引变化，自动关闭不可见行的编辑状态
+ */
+watch([virtualStartIndex, virtualEndIndex], () => {
+  if (!editingTextCell.value) return;
+
+  const renderedIds = new Set(virtualRows.value.map(({ item }) => item.id));
+  if (!renderedIds.has(editingTextCell.value.id)) {
+    closeCellEditor();
+  }
+});
+
+/**
+ * 行交互状态
+ * 统一复用表格/甘特图共享的行选择与右键菜单逻辑
+ */
+const {
+  canMoveDown,
+  canMoveUp,
+  clearSelection,
+  contextMenuPosition,
+  deleteRows,
+  handleContextMenu,
+  handleDeleteFromMenu,
+  handleMoveDownFromMenu,
+  handleMoveUpFromMenu,
+  handlePropertyConfig,
+  handleRemoveFromMenu,
+  handleTreeHighlight,
+  moveDown,
+  moveUp,
+  onRemoveSuccess,
+  removeRows,
+  selectLastRow,
+  selectRow,
+  selectedRowIds,
+  showContextMenu,
+} = useChartRowSelection<GanttItem>({
+  items: ganttItems,
+  rowSelectedEvent: "table-row-selected",
+  onClearSelection: () => {
+    closeCellEditor();
+  },
+  onDeleteRows: () => {
+    closeCellEditor();
+  },
+  onAfterRemoveSuccess: () => {
+    closeCellEditor();
+  },
+});
+
+/**
+ * 当前编辑中的单元格
+ * 增加 editorType / column 信息，便于根据 valueType 渲染不同编辑控件
+ */
+const editingTextCell = ref<{
+  id: string;
+  field: string;
+  value: any;
+  editorType?: string;
+  column?: any;
+} | null>(null);
+
+// 根据 configId 获取默认列宽
+function getDefaultColumnWidth(configId: string): number {
+  if (configId === "index") {
+    return 50;
+  }
+  // 其他列默认中等宽度
+  return 400;
+}
+function getColumnWidth(configId: string): number {
+  if (configId === "index") {
+    return 50;
+  }
+  return columnWidths.value[configId] || getDefaultColumnWidth(configId);
+}
+
+/**
+ * 点击空白区域，清空选中并关闭编辑态
+ */
+function onContainerClick() {
+  clearSelection();
+}
+/**
+ * 新增行
+ */
+function addRow() {
+  eventBus.emit("table-add-row");
+}
+/**
+ * 搜索结果显示文本
+ */
+const searchResultText = computed(() => {
+  if (!searchKeyword.value.trim()) return "";
+  if (searchMatchedIds.value.length === 0) return "0 of 0";
+  return `${currentMatchIndex.value + 1} of ${searchMatchedIds.value.length}`;
+});
+
+/**
+ * 上一条 / 下一条按钮状态
+ */
+const canGoPrev = computed(() => {
+  return searchMatchedIds.value.length > 0 && currentMatchIndex.value > 0;
+});
+
+const canGoNext = computed(() => {
+  return (
+    searchMatchedIds.value.length > 0 &&
+    currentMatchIndex.value < searchMatchedIds.value.length - 1
+  );
+});
+
+/**
+ * 执行搜索
+ * 搜索范围为当前可见列
+ */
+function runSearch() {
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  if (!keyword) {
+    searchMatchedIds.value = [];
+    currentMatchIndex.value = -1;
+    return;
+  }
+
+  // 模糊匹配：搜索所有可见列的值
+  const matched = ganttItems.value.filter((item) => {
+    return visibleColumns.value.some((col) => {
+      const value = getDisplayCellValue(item, col);
+      return value.toLowerCase().includes(keyword);
+    });
+  });
+
+  searchMatchedIds.value = matched.map((item) => item.id);
+  currentMatchIndex.value = searchMatchedIds.value.length > 0 ? 0 : -1;
+
+  // 自动选中第一个匹配项
+  if (currentMatchIndex.value >= 0) {
+    selectRow(searchMatchedIds.value[0]);
+  }
+}
+
+/**
+ * 搜索输入事件
+ */
+function onSearchInput() {
+  runSearch();
+}
+
+/**
+ * 跳转上一条匹配
+ */
+function gotoPrevMatch() {
+  if (!canGoPrev.value) return;
+  currentMatchIndex.value--;
+  selectRow(searchMatchedIds.value[currentMatchIndex.value]);
+}
+
+/**
+ * 跳转下一条匹配
+ */
+function gotoNextMatch() {
+  if (!canGoNext.value) return;
+  currentMatchIndex.value++;
+  selectRow(searchMatchedIds.value[currentMatchIndex.value]);
+}
+
+/**
+ * 打开搜索栏
+ */
+function openSearch() {
+  showSearchBar.value = true;
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
+}
+
+/**
+ * 关闭搜索栏
+ */
+function closeSearch() {
+  showSearchBar.value = false;
+  searchKeyword.value = "";
+  searchMatchedIds.value = [];
+  currentMatchIndex.value = -1;
+}
+
+/**
+ * 工具栏指令监听
+ */
+function onGanttToolbarAction(action: string) {
+  const actionMap: Record<string, () => void> = {
+    chartNewModel: addRow,
+    chartDelete: deleteRows,
+    chartRemove: removeRows,
+    chartMoveUp: moveUp,
+    chartMoveDown: moveDown,
+    chartSearch: openSearch,
+  };
+  const fn = actionMap[action];
+  if (!fn) return;
+  fn();
+}
+/**
+ * 判断当前单元格是否正在编辑
+ */
+function isCellEditing(rowId: string, field: string) {
+  return (
+    editingTextCell.value?.id === rowId &&
+    editingTextCell.value?.field === field
+  );
+}
+
+/**
+ * 设置当前编辑输入框 ref
+ */
+function setEditingInputRef(el: HTMLInputElement | null | any) {
+  editingInputRef.value = el;
+}
+
+/**
+ * 打开单元格编辑
+ * 根据列的 valueType 选择合适的编辑控件
+ */
+function openCellEditor(item: GanttItem, col: any) {
+  if (col.isReadonly === true) return;
+  if (!hasCellProperty(item, col.configId)) return;
+
+  // 原始值直接从数据行中读取，避免使用展示值（例如枚举的 label）
+  const rawValue = (item as any)[col.configId];
+
+  console.log("[graph-table-openCellEditor] valueType:", col.valueType, {
+    configId: col.configId,
+    column: col,
+    value: rawValue ?? null,
+  });
+
+  if (col.valueType === "Boolean") {
+    return;
+  }
+
+  // 复杂类型：交给宿主应用使用“属性面板同款编辑器”处理
+  // 这样 graph 包保持轻量，不强依赖业务侧的弹窗/选择器实现
+  // 复杂值类型不走表格内联编辑，统一交给宿主侧弹出属性面板同款编辑器。
+  // Transfer 在业务上对应“选择用例”穿梭框，双击单元格时也要走这条链路。
+  const complexTypes = new Set([
+    "Element",
+    "Element_List",
+    "Relations_End",
+    "ValueSpecification",
+    "NoString",
+    "Transfer",
+    "Html",
+    "Htmld",
+  ]);
+  if (complexTypes.has(col.valueType)) {
+    eventBus.emit("table-cell-open-editor", {
+      item,
+      column: col,
+      configId: col.configId,
+      valueType: col.valueType,
+      value: rawValue ?? null,
+    });
+    return;
+  }
+
+  editingTextCell.value = {
+    id: item.id,
+    field: col.configId,
+    value: rawValue ?? "",
+    editorType: col.valueType,
+    column: col,
+  };
+  nextTick(() => {
+    const inst = editingInputRef.value as any;
+    inst?.focus?.();
+    inst?.select?.();
+  });
+}
+
+function getRawCellValue(item: any, configId: string) {
+  const v = item?.[configId];
+  return v;
+}
+
+function hasCellProperty(item: any, configId: string): boolean {
+  return !!item && Object.prototype.hasOwnProperty.call(item, configId);
+}
+
+function normalizeBooleanValue(value: any): boolean | undefined {
+  if (value === null || value === undefined || value === "") {
+    return undefined;
+  }
+
+  if (typeof value === "boolean") {
+    return value;
+  }
+
+  if (typeof value === "string") {
+    if (value === "true") return true;
+    if (value === "false") return false;
+    if (value === "1") return true;
+    if (value === "0") return false;
+  }
+
+  if (typeof value === "number") {
+    if (value === 1) return true;
+    if (value === 0) return false;
+  }
+
+  return undefined;
+}
+
+function hasBooleanCellValue(item: any, configId: string): boolean {
+  if (!hasCellProperty(item, configId)) {
+    return false;
+  }
+
+  return normalizeBooleanValue(item[configId]) !== undefined;
+}
+
+function stripHtmlTags(value: unknown): string {
+  return String(value ?? "")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/gi, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function handleBooleanCellChange(
+  item: GanttItem,
+  field: string,
+  value: string | number | boolean | undefined,
+) {
+  if (!hasBooleanCellValue(item, field)) {
+    return;
+  }
+
+  const oldValue = getRawCellValue(item as any, field);
+  const normalizedOldValue = normalizeBooleanValue(oldValue);
+  const normalizedNewValue = normalizeBooleanValue(value);
+
+  if (normalizedOldValue === normalizedNewValue) {
+    return;
+  }
+
+  eventBus.emit("gantt-cell-edit", {
+    item,
+    configId: field,
+    oldValue,
+    newValue: normalizedNewValue,
+  });
+}
+
+/**
+ * 保存单元格值
+ */
+function saveTextEdit(item: GanttItem, field: string) {
+  if (!editingTextCell.value || editingTextCell.value.value === undefined) {
+    editingTextCell.value = null;
+    return;
+  }
+
+  const oldValue = getRawCellValue(item as any, field);
+  const newValue = editingTextCell.value.value;
+
+  // 值未改变，直接关闭编辑
+  if (oldValue === newValue) {
+    editingTextCell.value = null;
+    return;
+  }
+
+  // 发送编辑事件到父组件（与 Gantt 使用相同的事件名）
+  eventBus.emit("gantt-cell-edit", {
+    item,
+    configId: field,
+    oldValue,
+    newValue,
+  });
+
+  // 暂时关闭编辑状态（等待接口返回）
+  editingTextCell.value = null;
+}
+
+/**
+ * 关闭单元格编辑
+ */
+function closeCellEditor() {
+  editingTextCell.value = null;
+  editingInputRef.value = null;
+}
+//监听获取后端列配置
+watch(
+  () => props.shape.attributeColumns,
+  (columns) => {
+    if (columns && columns.length > 0) {
+      columnConfig.value = columns;
+      // 初始化列宽（如果还没有设置）
+      columns.forEach((col: any) => {
+        if (col.configId !== "index" && !columnWidths.value[col.configId]) {
+          columnWidths.value[col.configId] = getDefaultColumnWidth(
+            col.configId,
+          );
+        }
+      });
+      // 同步到工具栏菜单
+      eventBus.emit("chart-columns-from-backend", columns);
+    } else {
+      // 没有后端数据时使用默认配置
+      columnConfig.value = [...defaultColumns.value];
+    }
+  },
+  { immediate: true },
+);
+// 统一提取对象/对象数组类型单元格的展示文本和图标，避免 Element_List 展示成 [object Object]。
+function getCellDisplayMeta(value: any): { text: string; icon: string } {
+  if (Array.isArray(value)) {
+    const objectItems = value.filter(
+      (item) => item && typeof item === "object",
+    );
+    const text = objectItems
+      .map((item: any) => item.nodeName || item.modelName || "")
+      .filter(Boolean)
+      .join("、");
+
+    return {
+      text: text || String(value ?? ""),
+      icon: objectItems.find((item: any) => item.icon)?.icon || "",
+    };
+  }
+
+  if (value && typeof value === "object") {
+    return {
+      text: value.nodeName || value.modelName || String(value ?? ""),
+      icon: value.icon || "",
+    };
+  }
+
+  return {
+    text: String(value ?? ""),
+    icon: "",
+  };
+}
+
+// 根据列配置获取“展示值”（用于单元格展示 / title）
+function getDisplayCellValue(
+  item: GanttData & { hasChildren: boolean },
+  col: any,
+): string {
+  const configId = col.configId;
+  const value = (item as any)[configId];
+
+  if (col.valueType === "Html" || col.valueType === "Htmld") {
+    return stripHtmlTags(value);
+  }
+
+  if (col.valueType === "Boolean") {
+    const normalizedValue = normalizeBooleanValue(value);
+    if (normalizedValue === true) return "是";
+    if (normalizedValue === false) return "否";
+    return "";
+  }
+
+  // 枚举类型：用 literals 中的 key 作为展示文案
+  if (
+    col.valueType === "Enumeration" &&
+    col.literals &&
+    Array.isArray(col.literals)
+  ) {
+    const matched = col.literals.find((opt: any) => opt.value === value);
+    return matched?.key ?? String(value ?? "");
+  }
+
+  return getCellDisplayMeta(value).text;
+}
+
+// 获取单元格应展示的图标。
+// 第一列仍然优先展示行本身图标，其他对象/对象数组列则展示值里的 icon。
+function getDisplayCellIcon(
+  item: GanttData & { hasChildren: boolean },
+  col: any,
+): string {
+  if (col.configId === firstDataColId.value && item.icon) {
+    return item.icon;
+  }
+
+  return getCellDisplayMeta((item as any)[col.configId]).icon;
+}
+// 根据 configId 获取“原始值”（用于比较 old/new、搜索等）
+function getCellValue(
+  item: GanttData & { hasChildren: boolean },
+  configId: string,
+): string {
+  return getCellDisplayMeta((item as any)[configId]).text;
+}
+// 列宽调整
+function startColumnResize(columnKey: string, e: MouseEvent) {
+  if (columnKey === "index") return;
+
+  e.stopPropagation();
+  e.preventDefault();
+
+  const startX = e.clientX;
+  const startWidth = getColumnWidth(columnKey);
+
+  const onMove = (ev: MouseEvent) => {
+    const delta = ev.clientX - startX;
+    const nextWidth = Math.max(200, startWidth + delta);
+    columnWidths.value[columnKey] = nextWidth;
+  };
+
+  const onUp = () => {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  };
+
+  document.body.style.cursor = "col-resize";
+  document.body.style.userSelect = "none";
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+function handleCanvasColumnChange(columns: any[]) {
+  if (columns && columns.length > 0) {
+    columnConfig.value = columns;
+
+    // 初始化列宽（如果还没有设置）
+    columns.forEach((col: any) => {
+      if (col.configId !== "index" && !columnWidths.value[col.configId]) {
+        columnWidths.value[col.configId] = getDefaultColumnWidth(col.configId);
+      }
+    });
+
+    // 同步到工具栏菜单
+    // eventBus.emit('chart-columns-from-backend', columns)
+  }
+}
+
+// 监听后端数据变化
+function handleCanvasDataChange(data: any[]) {
+  if (data && data.length > 0) {
+    ganttItems.value = data.map((d) => ({
+      ...d,
+      hasChildren: false,
+    })) as (GanttData & { hasChildren: boolean })[];
+  }
+}
+
+// 监听列配置变更（来自工具栏菜单）
+function onColumnConfigChange(config: Array<any>) {
+  columnConfig.value = config;
+}
+const tableWidth = computed(() => {
+  return displayColumns.value.reduce((total, col) => {
+    return total + getColumnWidth(col.configId);
+  }, 0);
+});
+/**
+ * 生命周期：注册事件
+ */
+onMounted(() => {
+  eventBus.on("table-toolbar-action", onGanttToolbarAction);
+  eventBus.on("canvas-data-change", handleCanvasDataChange);
+  eventBus.on("chart-column-config", onColumnConfigChange);
+  eventBus.on("canvas-data-column", handleCanvasColumnChange);
+  //监听移除成功事件
+  eventBus.on("table-gantt-remove:success", onRemoveSuccess);
+  // 新增成功回执：直接选中最后一条
+  eventBus.on("table-gantt-add:success", selectLastRow);
+});
+
+/**
+ * 生命周期：卸载事件
+ */
+onUnmounted(() => {
+  eventBus.off("table-toolbar-action", onGanttToolbarAction);
+  eventBus.off("canvas-data-change", handleCanvasDataChange);
+  eventBus.off("chart-column-config", onColumnConfigChange);
+  eventBus.off("canvas-data-column", handleCanvasColumnChange);
+  eventBus.off("table-gantt-remove:success", onRemoveSuccess);
+  eventBus.off("table-gantt-add:success", selectLastRow);
+});
+</script>
+
+<style scoped lang="scss">
+/* 甘特表格容器 */
+.gantt-container {
+  --header-row-h: 28px;
+  --data-row-h: 32px;
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  overflow: hidden;
+  font-size: 12px;
+  font-family:
+    "Source Han Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
+}
+/* 左侧表格区域 */
+.gantt-left {
+  width: 100%;
+  overflow: auto;
+}
+
+.gantt-left.with-search-bar {
+  margin-top: 36px;
+}
+
+/* 虚拟滚动占位行 */
+.table-spacer-row td {
+  height: 0;
+  padding: 0;
+  border: none !important;
+}
+
+.table-spacer {
+  width: 1px;
+}
+
+/* 表格 */
+.gantt-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+.th-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+.th-content > :nth-child(1) {
+  margin-left: 4px;
+}
+.gantt-table th,
+.gantt-table td {
+  box-sizing: border-box;
+  padding: 0 8px;
+  border: none;
+  border-bottom: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gantt-table th:first-child,
+.gantt-table td:first-child {
+  border-left: 1px solid #ebeef5;
+  width: 50px;
+  min-width: 50px;
+  max-width: 50px;
+}
+
+/* 表头第二行 */
+.header-row-2 th {
+  position: sticky;
+  z-index: 1;
+  height: var(--header-row-h);
+  background: #f5f7fa;
+  border-bottom-color: #dcdfe6;
+  font-weight: 500;
+  color: #606266;
+}
+
+/* 数据行 */
+.gantt-table td {
+  height: var(--data-row-h);
+}
+
+/* 列样式 */
+.col-name {
+  text-align: left;
+}
+
+.col-td {
+  text-align: center;
+}
+
+.col-index {
+  width: 60px !important;
+}
+
+.th-label {
+  font-weight: 600;
+}
+.cell-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* 展开图标 */
+.expand-icon {
+  display: inline-block;
+  margin-right: 4px;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 名称文本 */
+.item-name {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.expand-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.item-index {
+  text-align: center;
+}
+
+/* 单元格编辑输入框（Element Plus 包一层外壳，尽量贴合现有样式） */
+.cell-input {
+  width: 100%;
+}
+
+.cell-input :deep(.el-input__wrapper) {
+  padding: 0 6px;
+  height: 24px;
+  box-shadow: 0 0 0 1px #409eff inset;
+  border-radius: 3px;
+}
+
+.cell-select {
+  width: 100%;
+}
+
+.cell-select :deep(.el-input__wrapper) {
+  min-height: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 3px;
+}
+
+.cell-boolean-display {
+  overflow: visible;
+}
+
+.cell-boolean-group {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+}
+
+.cell-boolean-group :deep(.el-radio) {
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 0;
+}
+
+.cell-boolean-group :deep(.el-radio:last-child) {
+  margin-right: 0;
+}
+
+.cell-boolean-group :deep(.el-radio__label) {
+  padding-left: 4px;
+}
+
+.cell-date {
+  width: 100%;
+}
+
+.cell-date :deep(.el-input__wrapper) {
+  min-height: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 3px;
+}
+
+.cell-textarea {
+  width: 100%;
+}
+
+.cell-textarea :deep(.el-textarea__inner) {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 4px 6px;
+}
+
+.col-resizer {
+  position: absolute;
+  right: -8px;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+}
+
+.col-resizer:hover {
+  background-color: rgba(64, 158, 255, 0.1);
+}
+
+/* 选中行高亮 */
+.row-selected {
+  background-color: #ecf5ff !important;
+}
+
+.gantt-row.row-selected td {
+  background-color: #ecf5ff;
+}
+</style>