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

package/src/components/Table/Table.vue

@@ -0,0 +1,970 @@
+<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-switch
+                                    v-if="editingTextCell?.editorType === 'Boolean'"
+                                    v-model="editingTextCell!.value"
+                                    size="small"
+                                    class="cell-switch"
+                                    @click.stop
+                                    @change="saveTextEdit(row.item, col.configId)"
+                                />
+                                <!-- 日期：日期时间选择器 -->
+                                <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 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
+
+    // 原始值直接从数据行中读取，避免使用展示值（例如枚举的 label）
+    const rawValue = (item as any)[col.configId]
+
+    // 复杂类型：交给宿主应用使用“属性面板同款编辑器”处理
+    // 这样 graph 包保持轻量，不强依赖业务侧的弹窗/选择器实现
+    // 复杂值类型不走表格内联编辑，统一交给宿主侧弹出属性面板同款编辑器。
+    // Transfer 在业务上对应“选择用例”穿梭框，双击单元格时也要走这条链路。
+    const complexTypes = new Set([
+        'Element',
+        'Element_List',
+        'Relations_End',
+        'ValueSpecification',
+        'NoString',
+        'Transfer',
+    ])
+    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 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 === 'Boolean') {
+        if (value === true) return '是'
+        if (value === 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;
+    padding: 0 8px;
+    box-sizing: border-box;
+}
+
+.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-switch {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+}
+
+.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>