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

package/src/components/Gantt/Gantt.vue

@@ -0,0 +1,1544 @@
+<template>
+  <div class="gantt-container" :style="containerStyle" @click="onContainerClick">
+    <!-- 搜索栏 -->
+    <div v-if="showSearchBar" class="gantt-search-bar">
+      <input v-model="searchKeyword" type="text" class="search-input" placeholder="搜索..." @input="onSearchInput"
+        ref="searchInputRef" />
+      <span class="search-result-info">{{ searchResultText }}</span>
+      <button class="search-nav-btn" :disabled="!canGoPrev" @click="gotoPrevMatch" title="上一条">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <path d="M8 10L4 6l4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
+            stroke-linejoin="round" />
+        </svg>
+      </button>
+      <button class="search-nav-btn" :disabled="!canGoNext" @click="gotoNextMatch" title="下一条">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+          <path d="M4 10l4-4-4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
+            stroke-linejoin="round" />
+        </svg>
+      </button>
+      <button class="search-close-btn" @click="closeSearch" title="关闭">×</button>
+    </div>
+
+    <!-- 左侧表格 -->
+    <div class="gantt-left" ref="leftTableRef">
+      <table class="gantt-table">
+        <thead>
+          <tr class="header-row-1">
+            <th :colspan="visibleColumns.length"></th>
+          </tr>
+          <tr class="header-row-2">
+            <th v-for="col in visibleColumns" :key="col.configId"
+              :class="isNameColumn(col.configId) ? 'col-name' : 'col-date'"
+              :style="{ width: columnWidths[col.configId] + 'px' }">
+              <div class="th-content">
+                <span class="th-label">{{ col.name }}</span>
+                <div class="col-resizer" @mousedown="startColumnResize(col.configId, $event)"></div>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- 虚拟占位：不渲染窗口外的真实行，但用 spacer 维持完整滚动高度 -->
+          <tr v-if="virtualTopSpacerHeight > 0" class="gantt-spacer-row" aria-hidden="true">
+            <td :colspan="visibleColumnSpan">
+              <div class="gantt-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 visibleColumns" :key="col.configId"
+              :class="isNameColumn(col.configId) ? 'col-name' : 'col-date'"
+              :style="{ width: columnWidths[col.configId] + 'px' }" :title="getCellValue(row.item, col.configId)"
+              @dblclick.stop="handleCellDoubleClick(row.item, col)">
+
+              <!-- 名称列特殊处理：显示展开图标 -->
+              <template v-if="isNameColumn(col.configId)">
+                <div style="display: flex; align-items: center; gap: 4px;">
+                  <span v-if="row.item.icon" class="expand-icon" @click.stop="toggleExpand(row.item)">
+                    <img :src="getIcon('childIcons', row.item.icon)" alt="" style="width: 16px; height: 16px; display: block;" />
+                  </span>
+                  <!-- 编辑状态 -->
+                  <input v-if="editingTextCell?.id === row.item.id && editingTextCell?.field === col.configId"
+                    v-model="editingTextCell.value" type="text" class="cell-input" ref="textInputRef"
+                    @blur="saveTextEdit(row.item, col.configId)" @keyup.enter="saveTextEdit(row.item, col.configId)"
+                    @keyup.esc="cancelTextEdit" @click.stop style="flex: 1;" />
+                  <!-- 显示状态 -->
+                  <span v-else class="item-name">{{ getCellValue(row.item, col.configId) }}</span>
+                </div>
+              </template>
+
+              <!-- 日期列：支持编辑 -->
+              <template v-else-if="isDateColumn(col.configId)">
+                <div v-if="editingCell?.id === row.item.id && editingCell?.field === col.configId" @click.stop>
+                  <el-date-picker
+                    v-model="editingCell.value"
+                    type="datetime"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    :teleported="true"
+                    :editable="false"
+                    :clearable="true"
+                    ref="datePickerRef"
+                    @change="onDateChange(row.item, col.configId, $event)"
+                  />
+                </div>
+                <span v-else>{{ formatDate(getCellValue(row.item, col.configId)) }}</span>
+              </template>
+
+              <!-- 其他列：支持文本编辑 -->
+              <template v-else>
+                <!-- 编辑状态 -->
+                <input v-if="editingTextCell?.id === row.item.id && editingTextCell?.field === col.configId"
+                  v-model="editingTextCell.value" type="text" class="cell-input" ref="textInputRef"
+                  @blur="saveTextEdit(row.item, col.configId)" @keyup.enter="saveTextEdit(row.item, col.configId)"
+                  @keyup.esc="cancelTextEdit" @click.stop />
+                <!-- 显示状态 -->
+                <span v-else>{{ getCellValue(row.item, col.configId) }}</span>
+              </template>
+            </td>
+          </tr>
+          <tr v-if="virtualBottomSpacerHeight > 0" class="gantt-spacer-row" aria-hidden="true">
+            <td :colspan="visibleColumnSpan">
+              <div class="gantt-spacer" :style="{ height: virtualBottomSpacerHeight + 'px' }"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 可拖拽分隔线 -->
+    <div class="gantt-divider" @mousedown="startResize" />
+
+    <!-- 右侧时间轴 -->
+    <div class="gantt-timeline" ref="timelineRef">
+      <div class="timeline-header" :style="{ minWidth: monthHeaders.length * monthWidth + 'px' }">
+        <!-- 年份行 -->
+        <div class="year-row">
+          <div v-for="year in yearHeaders" :key="year.year" class="year-cell" :style="{ width: year.width + 'px' }">
+            {{ year.year }}
+          </div>
+        </div>
+        <!-- 月份行 -->
+        <div class="month-row">
+          <div v-for="(month, idx) in monthHeaders" :key="idx" class="month-cell" :style="{ width: monthWidth + 'px' }">
+            {{ month.label }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 时间轴主体 -->
+      <div class="timeline-body" :style="{ width: monthHeaders.length * monthWidth + 'px' }">
+        <!-- 网格线 -->
+        <div class="grid-lines">
+          <div v-for="(month, idx) in monthHeaders" :key="idx" class="grid-line"
+            :style="{ left: (idx + 1) * monthWidth - 1 + 'px' }" />
+        </div>
+        <!-- 左右两侧共用同一组 spacer 和可视行，才能保持逐行对齐 -->
+        <div v-if="virtualTopSpacerHeight > 0" class="timeline-spacer" :style="{ height: virtualTopSpacerHeight + 'px' }" aria-hidden="true"></div>
+        <!-- 甘特条 -->
+        <div v-for="row in virtualRows" :key="row.item.id" class="bar-row"
+          :class="{ 'row-selected': selectedRowIds.has(row.item.id) }"
+          @click.stop="selectRow(row.item.id, $event)"
+          @contextmenu="handleContextMenu(row.item, $event)">
+          <div v-if="getItemStartDate(row.item) && getItemEndDate(row.item) && !row.item.isMilestone" class="gantt-bar"
+            :style="getBarStyle(row.item)"
+            :title="`${'目标'}: ${row.item.goal ?? ''}\n${'愿景'}: ${row.item.vision ?? ''}`" />
+          <div v-if="row.item.isMilestone" class="gantt-milestone" :style="getMilestoneStyle(row.item)"
+            :title="getItemName(row.item)" />
+        </div>
+        <div v-if="virtualBottomSpacerHeight > 0" class="timeline-spacer" :style="{ height: virtualBottomSpacerHeight + 'px' }" aria-hidden="true"></div>
+      </div>
+    </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, ref, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import type { Shape, GanttData } from '../../types'
+import { ElDatePicker } from 'element-plus'
+import { eventBus } from '../../store/eventBus'
+import GanttContextMenu from '../GanttContextMenu/GanttContextMenu.vue'
+import { getIcon } from '../../utils/iconLoader'
+import { useChartRowSelection, useVirtualScroll } from '../../hooks'
+import { DateUtils } from '../../utils'
+
+interface Props {
+  shape: Shape
+}
+
+const props = defineProps<Props>()
+
+const timelineRef = ref<HTMLDivElement>()
+const searchInputRef = ref<HTMLInputElement>()
+const leftTableRef = ref<HTMLDivElement>()
+const tableWidth = ref(340)
+const monthWidth = 80
+
+// 搜索相关状态
+const showSearchBar = ref(false)
+const searchKeyword = ref('')
+const searchMatchedIds = ref<string[]>([])
+const currentMatchIndex = ref(-1)
+
+// 容器样式
+const containerStyle = computed(() => {
+  return {
+    width: '100%',
+    height: '100%',
+  }
+})
+
+// 预定义的颜色数组（用于随机选择）
+const ganttColors = [
+  '#409eff', // 蓝色
+  '#67c23a', // 绿色
+  '#e6a23c', // 橙色
+  '#f56c6c', // 红色
+  '#909399', // 灰色
+  '#5470c6', // 深蓝
+  '#91cc75', // 浅绿
+  '#fac858', // 黄色
+  '#ee6666', // 浅红
+  '#73c0de', // 青色
+  '#3ba272', // 青绿
+  '#fc8452', // 橙红
+  '#9a60b4', // 紫色
+  '#ea7ccc', // 粉色
+]
+
+// 根据 ID 生成一致的随机颜色（同一个 ID 总是返回相同的颜色）
+function getColorForId(id: string): string {
+  let hash = 0
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const index = Math.abs(hash) % ganttColors.length
+  return ganttColors[index]
+}
+
+// 甘特图数据：使用后端数据
+type GanttItem = GanttData & { hasChildren: boolean }
+const ganttItems = ref<GanttItem[]>([])
+
+// 默认列配置（仅作为后备，实际使用时会被后端数据覆盖）
+const defaultColumns: any[] = [
+  { configId: 'name', name: '名称', isShow: true, isReadonly: false },
+  { configId: 'startDate', name: '开始时间', isShow: true, isReadonly: false },
+  { configId: 'endDate', name: '结束时间', isShow: true, isReadonly: false },
+]
+
+// 列配置：优先使用后端数据
+const columnConfig = ref<any[]>([...defaultColumns])
+
+// 列宽度状态（动态调整，使用 configId 作为 key）
+const columnWidths = ref<Record<string, number>>({})
+
+// 根据 configId 获取默认列宽
+function getDefaultColumnWidth(configId: string): number {
+  // 名称列默认宽一些
+  if (configId.includes('name') || configId.includes('Name')) {
+    return 140
+  }
+  // 日期列默认窄一些
+  if (configId.includes('Date') || configId.includes('date') || configId.includes('Time') || configId.includes('time')) {
+    return 90
+  }
+  // 其他列默认中等宽度
+  return 100
+}
+
+// 初始化默认列宽
+defaultColumns.forEach(col => {
+  columnWidths.value[col.configId] = getDefaultColumnWidth(col.configId)
+})
+
+// 可见列
+const visibleColumns = computed(() => {
+  return columnConfig.value.filter(col => col.isShow)
+})
+
+// 切换列显示状态
+function toggleColumnVisibility(configId: string) {
+  const colIndex = columnConfig.value.findIndex(c => c.configId === configId)
+
+  if (colIndex !== -1) {
+    const col = columnConfig.value[colIndex]
+    const newCol = { ...col, isShow: !col.isShow }
+    const newColumns = [...columnConfig.value]
+    newColumns[colIndex] = newCol
+    columnConfig.value = newColumns
+  }
+}
+
+// 监听真实数据变化，同步到 ganttItems 和 columnConfig
+watch(() => props.shape.ganttData, (data) => {
+  if (data && data.length > 0) {
+    ganttItems.value = data.map(d => ({ ...d, hasChildren: false }))
+  } else {
+    ganttItems.value = []
+  }
+}, { immediate: true })
+
+watch(() => props.shape.attributeColumns, (columns) => {
+  if (columns && columns.length > 0) {
+    columnConfig.value = columns
+
+    // 初始化列宽（如果还没有设置）
+    columns.forEach((col: any) => {
+      if (!columnWidths.value[col.configId]) {
+        columnWidths.value[col.configId] = getDefaultColumnWidth(col.configId)
+      }
+    })
+
+    eventBus.emit('gantt-columns-from-backend', columns)
+  } else {
+    // 没有后端数据时使用默认配置
+    columnConfig.value = [...defaultColumns]
+    eventBus.emit('gantt-columns-from-backend', defaultColumns)
+  }
+}, { immediate: true })
+
+// 行选中状态（支持多选）
+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: 'gantt-row-selected',
+  onBeforeSelect: () => {
+    closeDatePicker()
+    closeTextEdit()
+  },
+  onClearSelection: () => {
+    closeDatePicker()
+    closeTextEdit()
+  },
+})
+
+function onContainerClick() {
+  clearSelection()
+}
+
+// 搜索结果文本
+const searchResultText = computed(() => {
+  if (!searchKeyword.value) return ''
+  if (searchMatchedIds.value.length === 0) return '0 of 0'
+  return `${currentMatchIndex.value + 1} of ${searchMatchedIds.value.length}`
+})
+
+// 是否可以上一条/下一条
+const canGoPrev = computed(() => searchMatchedIds.value.length > 0 && currentMatchIndex.value > 0)
+const canGoNext = computed(() => searchMatchedIds.value.length > 0 && currentMatchIndex.value < searchMatchedIds.value.length - 1)
+
+// 过滤后的甘特图数据（只显示匹配的）
+const filteredGanttItems = computed(() => {
+  if (!searchKeyword.value || searchMatchedIds.value.length === 0) {
+    return ganttItems.value
+  }
+  return ganttItems.value.filter(item => searchMatchedIds.value.includes(item.id))
+})
+
+// 固定行高虚拟化：左右两侧只渲染同一段可视窗口，减少表格和甘特条的 DOM 数量。
+// ========== 虚拟滚动 ==========
+const GANTT_HEADER_HEIGHT = 56
+const GANTT_ROW_HEIGHT = 32
+const GANTT_VIRTUAL_OVERSCAN = 8
+
+const {
+  virtualRows,
+  virtualTopSpacerHeight,
+  virtualBottomSpacerHeight,
+  virtualStartIndex,
+  virtualEndIndex,
+  syncVirtualViewportState,
+  visibleColumnSpan,
+} = useVirtualScroll(filteredGanttItems, {
+  itemHeight: GANTT_ROW_HEIGHT,
+  headerHeight: GANTT_HEADER_HEIGHT,
+  overscan: GANTT_VIRTUAL_OVERSCAN,
+  containerRef: leftTableRef,
+  extraContainerRefs: [timelineRef],
+  columnCount: computed(() => visibleColumns.value.length),
+})
+
+// 搜索输入处理
+function onSearchInput() {
+  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 = getCellValue(item, col.configId)
+      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 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()
+    scheduleGanttPaneBottomCompensation()
+  })
+}
+
+// 关闭搜索
+function closeSearch() {
+  showSearchBar.value = false
+  searchKeyword.value = ''
+  searchMatchedIds.value = []
+  currentMatchIndex.value = -1
+  nextTick(() => {
+    scheduleGanttPaneBottomCompensation()
+  })
+}
+
+// 监听工具栏指令
+function onGanttToolbarAction(action: string) {
+  if (action === 'ganttMoveUp') moveUp()
+  else if (action === 'ganttMoveDown') moveDown()
+  else if (action === 'ganttSearch') openSearch()
+  else if (action === 'ganttDelete') deleteRows()
+  else if (action === 'ganttRemove') removeRows()
+}
+
+// 监听后端数据变化
+function handleCanvasDataChange(data: any[]) {
+  if (data && data.length > 0) {
+    ganttItems.value = data.map(d => ({ ...d, hasChildren: false }))
+  }
+}
+
+function handleCanvasColumnChange(columns: any[]) {
+  if (columns && columns.length > 0) {
+    columnConfig.value = columns
+
+    // 初始化列宽（如果还没有设置）
+    columns.forEach((col: any) => {
+      if (!columnWidths.value[col.configId]) {
+        columnWidths.value[col.configId] = getDefaultColumnWidth(col.configId)
+      }
+    })
+
+    // 同步到工具栏菜单
+    eventBus.emit('gantt-columns-from-backend', columns)
+  }
+}
+
+// // 处理编辑成功
+// function handleEditSuccess(data: { itemId: string; configId: string; newValue: string }) {
+//   // 更新本地数据
+//   const item = ganttItems.value.find(i => i.id === data.itemId)
+//   if (item) {
+//     (item as any)[data.configId] = data.newValue
+//   }
+// }
+
+// // 处理编辑失败
+// function handleEditFailure(data: { itemId: string; configId: string; oldValue: string }) {
+//   // 恢复原值
+//   const item = ganttItems.value.find(i => i.id === data.itemId)
+//   if (item) {
+//     (item as any)[data.configId] = data.oldValue
+//   }
+// }
+onMounted(() => {
+  eventBus.on('gantt-toolbar-action', onGanttToolbarAction)
+  eventBus.on('gantt-toggle-column', toggleColumnVisibility)
+  eventBus.on('canvas-data-change', handleCanvasDataChange)
+  eventBus.on('canvas-data-column', handleCanvasColumnChange)
+  //监听移除成功事件
+  eventBus.on('table-gantt-remove:success', onRemoveSuccess)
+  // 新增成功回执：直接选中最后一条
+  eventBus.on('table-gantt-add:success', selectLastRow)
+  // eventBus.on('gantt-cell-edit-success', handleEditSuccess)
+  // eventBus.on('gantt-cell-edit-failure', handleEditFailure)
+
+  // 同步左右滚动
+  setupScrollSync()
+})
+
+onUnmounted(() => {
+  eventBus.off('gantt-toolbar-action', onGanttToolbarAction)
+  eventBus.off('gantt-toggle-column', toggleColumnVisibility)
+  eventBus.off('canvas-data-change', handleCanvasDataChange)
+  eventBus.off('canvas-data-column', handleCanvasColumnChange)
+  eventBus.off('table-gantt-remove:success', onRemoveSuccess)
+  eventBus.off('table-gantt-add:success', selectLastRow)
+  // eventBus.off('gantt-cell-edit-success', handleEditSuccess)
+  // eventBus.off('gantt-cell-edit-failure', handleEditFailure)
+
+  // 清理滚动监听
+  cleanupScrollSync()
+})
+
+// 日期编辑状态
+const editingCell = ref<{ id: string; field: string; value: string | null } | null>(null)
+const datePickerRef = ref()
+
+// 文本编辑状态
+const editingTextCell = ref<{ id: string; field: string; value: string } | null>(null)
+const textInputRef = ref<HTMLInputElement>()
+
+// 根据 configId 获取单元格的值
+function getCellValue(item: GanttData & { hasChildren: boolean }, configId: string): string {
+  const value = (item as any)[configId]
+
+  // 如果值是对象（如 Element.owner），返回其 nodeName
+  if (value && typeof value === 'object' && value.nodeName) {
+    return value.nodeName
+  }
+
+  return value || ''
+}
+
+// 获取行的名称（用于显示）
+function getItemName(item: GanttData): string {
+  // 尝试从第一列获取名称
+  if (columnConfig.value.length > 0) {
+    return getCellValue(item as any, columnConfig.value[0].configId)
+  }
+  return item['NamedElement.name'] || item.id
+}
+
+// 获取行的开始日期
+function getItemStartDate(item: GanttData): string {
+  // 查找日期列的 configId
+  const dateCol = columnConfig.value.find(col =>
+    col.configId.toLowerCase().includes('startdate') ||
+    col.configId.toLowerCase().includes('start')
+  )
+  return dateCol ? (item[dateCol.configId] || '') : ''
+}
+
+// 获取行的结束日期
+function getItemEndDate(item: GanttData): string {
+  // 查找日期列的 configId
+  const dateCol = columnConfig.value.find(col =>
+    col.configId.toLowerCase().includes('enddate') ||
+    col.configId.toLowerCase().includes('end')
+  )
+  return dateCol ? (item[dateCol.configId] || '') : ''
+}
+
+// 判断是否是日期列
+function isDateColumn(configId: string): boolean {
+  // 通过 configId 判断是否包含日期相关关键字
+  const lowerConfigId = configId.toLowerCase()
+  return lowerConfigId.includes('date') || lowerConfigId.includes('time')
+}
+
+// 判断是否是名称列（第一列，显示展开图标）
+function isNameColumn(configId: string): boolean {
+  // 判断是否是第一列
+  return columnConfig.value.length > 0 && columnConfig.value[0].configId === configId
+}
+
+function openDatePicker(item: GanttData & { hasChildren: boolean }, field: string) {
+  editingCell.value = { id: item.id, field, value: getCellValue(item, field) || null }
+  nextTick(() => {
+    datePickerRef.value?.focus?.()
+  })
+}
+
+function onDateChange(item: GanttData & { hasChildren: boolean }, field: string, val: string | null) {
+  if (!val) {
+    closeDatePicker()
+    return
+  }
+
+  const oldValue = getCellValue(item, field)
+
+  // 值未改变，直接关闭编辑
+  if (oldValue === val) {
+    closeDatePicker()
+    return
+  }
+
+  // 发送编辑事件到父组件
+  eventBus.emit('gantt-cell-edit', {
+    item,
+    configId: field,
+    oldValue,
+    newValue: val
+  })
+
+  closeDatePicker()
+}
+
+function closeDatePicker() {
+  editingCell.value = null
+}
+
+// 文本编辑相关函数
+function handleCellDoubleClick(item: GanttData & { hasChildren: boolean }, col: any) {
+  // 如果列是只读的，不允许编辑
+  if (col.isReadonly) return
+
+  // 先关闭之前的编辑
+  closeDatePicker()
+  closeTextEdit()
+
+  // 如果是日期列，打开日期选择器
+  if (isDateColumn(col.configId)) {
+    openDatePicker(item, col.configId)
+  } else {
+    // 否则打开文本编辑
+    openTextEdit(item, col.configId)
+  }
+}
+
+function openTextEdit(item: GanttData & { hasChildren: boolean }, field: string) {
+  editingTextCell.value = { id: item.id, field, value: getCellValue(item, field) }
+  nextTick(() => {
+    textInputRef.value?.focus()
+    textInputRef.value?.select()
+  })
+}
+
+function saveTextEdit(item: GanttData & { hasChildren: boolean }, field: string) {
+  if (!editingTextCell.value || editingTextCell.value.value === undefined) {
+    editingTextCell.value = null
+    return
+  }
+
+  const oldValue = getCellValue(item, field)
+  const newValue = editingTextCell.value.value
+
+  // 值未改变，直接关闭编辑
+  if (oldValue === newValue) {
+    editingTextCell.value = null
+    return
+  }
+
+  // 发送编辑事件到父组件
+  eventBus.emit('gantt-cell-edit', {
+    item,
+    configId: field,
+    oldValue,
+    newValue
+  })
+
+  // 暂时关闭编辑状态（等待接口返回）
+  editingTextCell.value = null
+}
+
+function cancelTextEdit() {
+  editingTextCell.value = null
+}
+
+function closeTextEdit() {
+  // 如果有正在编辑的文本，先保存
+  if (editingTextCell.value) {
+    const item = ganttItems.value.find(i => i.id === editingTextCell.value!.id)
+    if (item) {
+      saveTextEdit(item, editingTextCell.value.field)
+    } else {
+      editingTextCell.value = null
+    }
+  }
+}
+
+watch([virtualStartIndex, virtualEndIndex], () => {
+  const renderedIds = new Set(virtualRows.value.map(({ item }) => item.id))
+
+  if (editingCell.value && !renderedIds.has(editingCell.value.id)) {
+    closeDatePicker()
+  }
+
+  if (editingTextCell.value && !renderedIds.has(editingTextCell.value.id)) {
+    closeTextEdit()
+  }
+})
+
+// 计算时间范围
+const timeRange = computed(() => {
+  const items = ganttItems.value
+  if (items.length === 0) {
+    const now = new Date()
+    return { start: new Date(now.getFullYear(), 0, 1), end: new Date(now.getFullYear() + 1, 0, 1) }
+  }
+  let minDate = Infinity
+  let maxDate = -Infinity
+  for (const item of items) {
+    const startDate = getItemStartDate(item)
+    const endDate = getItemEndDate(item)
+    if (startDate) {
+      const timestamp = DateUtils.getTimestamp(startDate)
+      if (timestamp && timestamp < minDate) minDate = timestamp
+    }
+    if (endDate) {
+      const timestamp = DateUtils.getTimestamp(endDate)
+      if (timestamp && timestamp > maxDate) maxDate = timestamp
+    }
+  }
+  
+  // 如果没有任何有效日期，显示当前年份
+  if (minDate === Infinity && maxDate === -Infinity) {
+    const now = new Date()
+    return { start: new Date(now.getFullYear(), 0, 1), end: new Date(now.getFullYear() + 1, 0, 1) }
+  }
+
+  // 如果只有开始日期，没有结束日期，则结束日期设为开始日期后一年
+  if (minDate !== Infinity && maxDate === -Infinity) {
+    maxDate = new Date(minDate).setFullYear(new Date(minDate).getFullYear() + 1)
+  }
+  
+  // 如果只有结束日期，没有开始日期，则开始日期设为结束日期前一年
+  if (minDate === Infinity && maxDate !== -Infinity) {
+    minDate = new Date(maxDate).setFullYear(new Date(maxDate).getFullYear() - 1)
+  }
+
+  // 获取最早和最晚日期
+  const minDateObj = new Date(minDate)
+  const maxDateObj = new Date(maxDate)
+
+  // 开始时间：向前推 2 个月，但不早于该年的 1 月
+  const startMonth = Math.max(0, minDateObj.getMonth() - 2)
+  const start = new Date(minDateObj.getFullYear(), startMonth, 1)
+
+  // 结束时间：向后推，确保至少显示 12 个月
+  const monthsDiff = (maxDateObj.getFullYear() - start.getFullYear()) * 12 +
+    (maxDateObj.getMonth() - start.getMonth())
+
+  let endMonth = maxDateObj.getMonth() + 6 // 默认向后推 6 个月
+  let endYear = maxDateObj.getFullYear()
+
+  // 如果总月数少于 12 个月，扩展到至少 12 个月
+  if (monthsDiff < 12) {
+    endMonth = start.getMonth() + 12
+    endYear = start.getFullYear()
+  }
+
+  // 处理月份溢出
+  while (endMonth >= 12) {
+    endMonth -= 12
+    endYear += 1
+  }
+
+  const end = new Date(endYear, endMonth, 1)
+  return { start, end }
+})
+
+// 月份表头
+const monthHeaders = computed(() => {
+  const headers: { year: number; month: number; label: string }[] = []
+  const monthLabels = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+  const { start, end } = timeRange.value
+  const cur = new Date(start)
+  while (cur < end) {
+    headers.push({ year: cur.getFullYear(), month: cur.getMonth(), label: monthLabels[cur.getMonth()] })
+    cur.setMonth(cur.getMonth() + 1)
+  }
+  return headers
+})
+
+// 年份表头
+const yearHeaders = computed(() => {
+  const years: { year: number; width: number }[] = []
+  const months = monthHeaders.value
+  if (months.length === 0) return years
+  let currentYear = months[0].year
+  let count = 0
+  for (const m of months) {
+    if (m.year !== currentYear) {
+      years.push({ year: currentYear, width: count * monthWidth })
+      currentYear = m.year
+      count = 0
+    }
+    count++
+  }
+  years.push({ year: currentYear, width: count * monthWidth })
+  return years
+})
+
+// 日期格式化（使用 DateUtils）
+function formatDate(dateStr: string): string {
+  return DateUtils.format(dateStr, 'datetime')
+}
+
+// 计算甘特条位置
+function getBarStyle(item: GanttData) {
+  const { start } = timeRange.value
+  const itemStartDate = getItemStartDate(item)
+  const itemEndDate = getItemEndDate(item)
+  if (!itemStartDate || !itemEndDate) return {}
+
+  const startDate = DateUtils.parse(itemStartDate)
+  const endDate = DateUtils.parse(itemEndDate)
+  if (!startDate || !endDate) return {}
+
+  // 计算开始位置：从时间轴起点到任务开始的月数
+  const startMonthOffset = getMonthOffset(start, startDate)
+  const left = startMonthOffset * monthWidth
+
+  // 计算宽度：任务持续的月数
+  const durationMonths = getMonthOffset(startDate, endDate)
+  const width = Math.max(durationMonths * monthWidth, 4)
+
+  // 使用后端提供的颜色，如果没有则根据 ID 生成随机颜色
+  const bgColor = item.ganttStyle?.backgroundColor || getColorForId(item.id)
+
+  return { left: `${left}px`, width: `${width}px`, backgroundColor: bgColor }
+}
+
+// 里程碑样式
+function getMilestoneStyle(item: GanttData) {
+  const { start } = timeRange.value
+  const itemStartDate = getItemStartDate(item)
+  if (!itemStartDate) return {}
+
+  // 计算位置：从时间轴起点到里程碑的月数
+  const startDate = DateUtils.parse(itemStartDate)
+  if (!startDate) return {}
+
+  const startMonthOffset = getMonthOffset(start, startDate)
+  const left = startMonthOffset * monthWidth
+
+  return { left: `${left}px` }
+}
+
+// 计算两个日期之间的月份偏移量（对齐到月份边界）
+function getMonthOffset(startDate: Date, endDate: Date): number {
+  const startYear = startDate.getFullYear()
+  const startMonth = startDate.getMonth()
+  const startDay = startDate.getDate()
+
+  const endYear = endDate.getFullYear()
+  const endMonth = endDate.getMonth()
+  const endDay = endDate.getDate()
+
+  // 计算完整的月份差
+  const monthsDiff = (endYear - startYear) * 12 + (endMonth - startMonth)
+
+  // 如果是同一个月
+  if (monthsDiff === 0) {
+    const monthDays = new Date(startYear, startMonth + 1, 0).getDate()
+    // 特殊情况：整月（1号到月末）
+    if (startDay === 1 && endDay === monthDays) {
+      return 1
+    }
+    // 从1号开始
+    if (startDay === 1) {
+      return endDay / monthDays
+    }
+    // 其他情况
+    return (endDay - startDay + 1) / monthDays
+  }
+
+  // 跨月情况
+  const startMonthDays = new Date(startYear, startMonth + 1, 0).getDate()
+  const endMonthDays = new Date(endYear, endMonth + 1, 0).getDate()
+
+  // 起始月：如果是1号，从月初开始（0偏移）；否则计算已过的天数
+  const startOffset = startDay === 1 ? 0 : (startDay - 1) / startMonthDays
+
+  // 结束月：如果是月末，到月末（1.0）；如果是1号，到月初（0）；否则计算已过的天数
+  let endOffset = 0
+  if (endDay === endMonthDays) {
+    endOffset = 1
+  } else if (endDay === 1) {
+    endOffset = 0
+  } else {
+    endOffset = endDay / endMonthDays
+  }
+
+  // 总偏移 = 完整月份 - 起始偏移 + 结束偏移
+  return monthsDiff - startOffset + endOffset
+}
+
+function toggleExpand(item: GanttData & { hasChildren: boolean }) {
+  item.isExpand = !item.isExpand
+}
+
+// 分隔线拖拽
+function startResize(e: MouseEvent) {
+  const startX = e.clientX
+  const startWidth = tableWidth.value
+  const onMove = (ev: MouseEvent) => {
+    tableWidth.value = Math.max(180, Math.min(500, startWidth + ev.clientX - startX))
+  }
+  const onUp = () => {
+    document.removeEventListener('mousemove', onMove)
+    document.removeEventListener('mouseup', onUp)
+  }
+  document.addEventListener('mousemove', onMove)
+  document.addEventListener('mouseup', onUp)
+}
+
+// 列宽调整
+function startColumnResize(columnKey: string, e: MouseEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+
+  const startX = e.clientX
+  const startWidth = columnWidths.value[columnKey]
+
+  const onMove = (ev: MouseEvent) => {
+    const delta = ev.clientX - startX
+    const newWidth = Math.max(60, Math.min(300, startWidth + delta))
+    columnWidths.value[columnKey] = newWidth
+  }
+
+  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)
+}
+
+// 滚动同步相关
+let isLeftScrolling = false
+let isRightScrolling = false
+let leftScrollHandler: ((e: Event) => void) | null = null
+let rightScrollHandler: ((e: Event) => void) | null = null
+let paneResizeObserver: ResizeObserver | null = null
+let paneResizeHandler: (() => void) | null = null
+let paneCompensationRafId: number | null = null
+
+function getHorizontalScrollbarHeight(el: HTMLElement) {
+  return Math.max(0, el.offsetHeight - el.clientHeight)
+}
+
+function updateGanttPaneBottomCompensation() {
+  const leftEl = leftTableRef.value
+  const rightEl = timelineRef.value
+
+  if (!leftEl || !rightEl) return
+
+  const leftScrollbarHeight = leftEl.scrollWidth > leftEl.clientWidth + 1
+    ? getHorizontalScrollbarHeight(leftEl)
+    : 0
+  const rightScrollbarHeight = rightEl.scrollWidth > rightEl.clientWidth + 1
+    ? getHorizontalScrollbarHeight(rightEl)
+    : 0
+  const targetScrollbarHeight = Math.max(leftScrollbarHeight, rightScrollbarHeight)
+
+  leftEl.style.setProperty(
+    '--gantt-bottom-compensation',
+    `${Math.max(0, targetScrollbarHeight - leftScrollbarHeight)}px`
+  )
+  rightEl.style.setProperty(
+    '--gantt-bottom-compensation',
+    `${Math.max(0, targetScrollbarHeight - rightScrollbarHeight)}px`
+  )
+}
+
+function scheduleGanttPaneBottomCompensation() {
+  if (paneCompensationRafId !== null) {
+    cancelAnimationFrame(paneCompensationRafId)
+  }
+
+  paneCompensationRafId = requestAnimationFrame(() => {
+    paneCompensationRafId = null
+    updateGanttPaneBottomCompensation()
+  })
+}
+
+function setupScrollSync() {
+  const leftEl = leftTableRef.value
+  const rightEl = timelineRef.value
+
+  if (!leftEl || !rightEl) return
+
+  // 左侧滚动时同步到右侧
+  leftScrollHandler = () => {
+    if (isRightScrolling) return
+    isLeftScrolling = true
+    rightEl.scrollTop = leftEl.scrollTop
+    // 同步后立刻刷新虚拟窗口，避免 scrollTop 变了但渲染行还没切换。
+    syncVirtualViewportState(leftEl)
+    requestAnimationFrame(() => {
+      isLeftScrolling = false
+    })
+  }
+
+  // 右侧滚动时同步到左侧
+  rightScrollHandler = () => {
+    if (isLeftScrolling) return
+    isRightScrolling = true
+    leftEl.scrollTop = rightEl.scrollTop
+    syncVirtualViewportState(rightEl)
+    requestAnimationFrame(() => {
+      isRightScrolling = false
+    })
+  }
+
+  leftEl.addEventListener('scroll', leftScrollHandler)
+  rightEl.addEventListener('scroll', rightScrollHandler)
+
+  paneResizeHandler = () => {
+    syncVirtualViewportState()
+    scheduleGanttPaneBottomCompensation()
+  }
+  window.addEventListener('resize', paneResizeHandler)
+
+  if (typeof ResizeObserver !== 'undefined') {
+    paneResizeObserver = new ResizeObserver(paneResizeHandler)
+    paneResizeObserver.observe(leftEl)
+    paneResizeObserver.observe(rightEl)
+
+    const leftTable = leftEl.querySelector('.gantt-table')
+    const timelineBody = rightEl.querySelector('.timeline-body')
+    if (leftTable) paneResizeObserver.observe(leftTable)
+    if (timelineBody) paneResizeObserver.observe(timelineBody)
+  }
+
+  syncVirtualViewportState(leftEl)
+  scheduleGanttPaneBottomCompensation()
+}
+
+function cleanupScrollSync() {
+  const leftEl = leftTableRef.value
+  const rightEl = timelineRef.value
+
+  if (leftScrollHandler && leftEl) {
+    leftEl.removeEventListener('scroll', leftScrollHandler)
+  }
+  if (rightScrollHandler && rightEl) {
+    rightEl.removeEventListener('scroll', rightScrollHandler)
+  }
+
+  if (paneResizeHandler) {
+    window.removeEventListener('resize', paneResizeHandler)
+  }
+
+  paneResizeObserver?.disconnect()
+
+  if (paneCompensationRafId !== null) {
+    cancelAnimationFrame(paneCompensationRafId)
+  }
+
+  leftEl?.style.removeProperty('--gantt-bottom-compensation')
+  rightEl?.style.removeProperty('--gantt-bottom-compensation')
+
+  leftScrollHandler = null
+  rightScrollHandler = null
+  paneResizeObserver = null
+  paneResizeHandler = null
+  paneCompensationRafId = null
+}
+</script>
+
+<style scoped>
+/* 统一行高变量 */
+.gantt-container {
+  --header-row-h: 28px;
+  /* 右侧年份行、月份行各自的高度 */
+  --data-row-h: 32px;
+  /* 数据行高度（左右一致） */
+
+  display: flex;
+  box-sizing: border-box;
+  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-search-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 36px;
+  background: #f5f7fa;
+  border-bottom: 1px solid #dcdfe6;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 8px;
+  z-index: 10;
+  box-sizing: border-box;
+}
+
+.search-input {
+  flex: 1;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px;
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input:focus {
+  border-color: #409eff;
+}
+
+.search-result-info {
+  font-size: 12px;
+  color: #606266;
+  white-space: nowrap;
+  min-width: 60px;
+  text-align: center;
+}
+
+.search-nav-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px;
+  background: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #606266;
+  transition: all 0.2s;
+}
+
+.search-nav-btn:hover:not(:disabled) {
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.search-nav-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.search-close-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  color: #909399;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-close-btn:hover {
+  border-color: #f56c6c;
+  color: #f56c6c;
+}
+
+/* ========== 左侧面板 ========== */
+.gantt-left {
+  width: v-bind("tableWidth + 'px'");
+  min-width: 180px;
+  flex-shrink: 0;
+  border-right: 1px solid #dcdfe6;
+  overflow-x: auto;
+  overflow-y: auto;
+  margin-top: v-bind("showSearchBar ? '36px' : '0'");
+}
+
+/* 隐藏左侧的垂直滚动条 */
+.gantt-left::-webkit-scrollbar {
+  width: 0;
+  height: 8px;
+}
+
+.gantt-left::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.gantt-left::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.gantt-left::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.gantt-table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* 所有 th/td 统一 box-sizing，用 border-bottom + border-right 模拟表格线 */
+.gantt-table th,
+.gantt-table td {
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 1px solid #ebeef5;
+  border-right: 1px solid #ebeef5;
+  padding: 0 8px;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+/* 每行第一个单元格加左边框 */
+.gantt-table th:first-child,
+.gantt-table td:first-child {
+  border-left: 1px solid #ebeef5;
+}
+
+/* 表头第1行：空行，对应右侧年份行 */
+.header-row-1 th {
+  height: var(--header-row-h);
+  background: #f5f7fa;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-top: 1px solid #ebeef5;
+  border-bottom-color: #dcdfe6;
+}
+
+/* 表头第2行：列标题，对应右侧月份行 */
+.header-row-2 th {
+  height: var(--header-row-h);
+  background: #f5f7fa;
+  font-weight: 500;
+  color: #606266;
+  position: sticky;
+  top: var(--header-row-h);
+  z-index: 1;
+  border-bottom-color: #dcdfe6;
+  padding: 0;
+}
+
+.th-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+}
+
+.th-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.col-resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  user-select: none;
+}
+
+.col-resizer:hover {
+  background-color: rgba(64, 158, 255, 0.1);
+}
+
+/* 数据行 */
+.gantt-table td {
+  height: var(--data-row-h);
+}
+
+.gantt-spacer-row td {
+  height: 0;
+  padding: 0;
+  border: none !important;
+}
+
+/* spacer 只负责撑高度，不参与真实内容布局 */
+.gantt-spacer {
+  width: 1px;
+}
+
+/* 当行包含日期选择器时，允许溢出 */
+.gantt-row:has(.col-date > div) {
+  position: relative;
+  z-index: 10;
+}
+
+.col-name {
+  max-width: none;
+}
+
+.col-date {
+  width: auto;
+  font-size: 11px;
+  color: #909399;
+  text-align: center;
+  position: relative;
+  cursor: default;
+}
+
+/* 当日期列包含日期选择器时，允许溢出 */
+.col-date:has(div) {
+  overflow: visible !important;
+}
+
+/* 日期选择器容器 */
+.col-date>div {
+  position: relative;
+  z-index: 100;
+}
+
+/* 日期选择器内嵌样式 */
+.col-date :deep(.el-date-editor) {
+  width: 100% !important;
+}
+
+.col-date :deep(.el-input__wrapper) {
+  padding: 0 4px;
+  height: 26px;
+  font-size: 11px;
+}
+
+/* 日期选择器弹出层 */
+.col-date :deep(.el-picker__popper) {
+  z-index: 1000 !important;
+}
+
+.expand-icon {
+  cursor: pointer;
+  user-select: none;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 单元格输入框样式 */
+.cell-input {
+  width: 100%;
+  height: 24px;
+  padding: 0 4px;
+  border: 1px solid #409eff;
+  border-radius: 2px;
+  font-size: 12px;
+  outline: none;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+.cell-input:focus {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+/* ========== 分隔线 ========== */
+.gantt-divider {
+  width: 4px;
+  cursor: col-resize;
+  background: #dcdfe6;
+  flex-shrink: 0;
+}
+
+.gantt-divider:hover {
+  background: #409eff;
+}
+
+/* ========== 右侧时间轴 ========== */
+.gantt-timeline {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  margin-top: v-bind("showSearchBar ? '36px' : '0'");
+}
+
+.gantt-left,
+.gantt-timeline {
+  padding-bottom: var(--gantt-bottom-compensation, 0px);
+}
+
+/* 右侧显示滚动条 */
+.gantt-timeline::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gantt-timeline::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.gantt-timeline::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.gantt-timeline::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.timeline-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: #f5f7fa;
+}
+
+.year-row {
+  display: flex;
+  height: var(--header-row-h);
+  border-bottom: 1px solid #dcdfe6;
+  box-sizing: border-box;
+}
+
+.year-cell {
+  text-align: center;
+  font-weight: 500;
+  line-height: calc(var(--header-row-h) - 1px);
+  color: #303133;
+  border-right: 1px solid #ebeef5;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.month-row {
+  display: flex;
+  height: var(--header-row-h);
+  border-bottom: 1px solid #dcdfe6;
+  box-sizing: border-box;
+}
+
+.month-cell {
+  text-align: center;
+  line-height: calc(var(--header-row-h) - 1px);
+  color: #606266;
+  border-right: 1px solid #ebeef5;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* ========== 甘特条区域 ========== */
+.timeline-body {
+  position: relative;
+}
+
+.timeline-spacer {
+  width: 100%;
+  pointer-events: none;
+}
+
+.grid-lines {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+.grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  border-left: 1px dashed #e4e7ed;
+}
+
+.bar-row {
+  height: var(--data-row-h);
+  position: relative;
+  border-bottom: 1px solid #ebeef5;
+  box-sizing: border-box;
+}
+
+.gantt-bar {
+  position: absolute;
+  top: 6px;
+  height: 20px;
+  border-radius: 3px;
+  background: #409eff;
+  opacity: 0.85;
+}
+
+/* 行选中效果（左右两侧共用） */
+.row-selected {
+  background-color: #ecf5ff !important;
+}
+
+.gantt-row.row-selected td {
+  background-color: #ecf5ff;
+}
+
+.gantt-milestone {
+  position: absolute;
+  top: 8px;
+  width: 14px;
+  height: 14px;
+  background: #e6a23c;
+  transform: rotate(45deg);
+  margin-left: -7px;
+}
+</style>