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

package/src/components/Table/Table.vue

@@ -1,216 +1,305 @@
 <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 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'
+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
+  shape: Shape;
 }
 
-const props = defineProps<Props>()
+const props = defineProps<Props>();
 
 /**
  * 前端内置固定列：序号列
  */
 const indexColumn = {
-    configId: 'index',
-    name: '序号',
-    isShow: true,
-    isReadonly: false,
-}
+  configId: "index",
+  name: "序号",
+  isShow: true,
+  isReadonly: false,
+};
 /**
  * 当前组件内部使用的行数据类型
  * 允许动态字段，便于适配后端返回的任意列
  */
 // 列宽度状态（动态调整，使用 configId 作为 key）
-const columnWidths = ref<Record<string, number>>({})
+const columnWidths = ref<Record<string, number>>({});
 /**
  * 搜索输入框 ref
  */
-const searchInputRef = ref<HTMLInputElement | null>(null)
+const searchInputRef = ref<HTMLInputElement | null>(null);
 
 /**
  * 表格容器 ref（用于虚拟滚动）
  */
-const tableContainerRef = ref<HTMLDivElement | null>(null)
+const tableContainerRef = ref<HTMLDivElement | null>(null);
 
 /**
  * 当前编辑中的输入框 ref
  */
-const editingInputRef = ref<HTMLInputElement | null>(null)
+const editingInputRef = ref<HTMLInputElement | null>(null);
 
 /**
  * 搜索相关状态
  */
-const showSearchBar = ref(false)
-const searchKeyword = ref('')
-const searchMatchedIds = ref<string[]>([])
-const currentMatchIndex = ref(-1)
+const showSearchBar = ref(false);
+const searchKeyword = ref("");
+const searchMatchedIds = ref<string[]>([]);
+const currentMatchIndex = ref(-1);
 /**
  * 默认列配置
  * 没有后端列配置时，使用这组默认列
  */
-const defaultColumns = ref<GanttColumn[]>([])
+const defaultColumns = ref<GanttColumn[]>([]);
 
 // 甘特图数据：使用后端数据
-type GanttItem = GanttData & { hasChildren: boolean }
-const ganttItems = ref<GanttItem[]>([])
+type GanttItem = GanttData & { hasChildren: boolean };
+const ganttItems = ref<GanttItem[]>([]);
 /**
  * 除序号列之外的第一列 configId（displayColumns[1]）
  */
 const firstDataColId = computed(() => {
-    return displayColumns.value[1]?.configId || ''
-})
+  return displayColumns.value[1]?.configId || "";
+});
 /**
  * 实际表格数据
  * 优先使用后端数据，没有则使用 mock 数据
@@ -218,753 +307,889 @@ const firstDataColId = computed(() => {
 // const ganttItems = ref<GanttItem[]>([...mockData.value])
 
 // 列配置：优先使用后端数据
-const columnConfig = ref<any[]>([...defaultColumns.value])
+const columnConfig = ref<any[]>([...defaultColumns.value]);
 
 /**
  * 当前可见列
  */
 const visibleColumns = computed(() => {
-    return columnConfig.value.filter(col => col.isShow)
-})
+  return columnConfig.value.filter((col) => col.isShow);
+});
 /**
  * 最终渲染列
  * 序号列固定在最左侧
  */
 const displayColumns = computed(() => {
-    return [indexColumn, ...visibleColumns.value]
-})
+  return [indexColumn, ...visibleColumns.value];
+});
 
 /**
  * 过滤后的数据（用于搜索）
  * 如果没有搜索关键字，返回所有数据
  */
 const filteredGanttItems = computed(() => {
-    const keyword = searchKeyword.value.trim().toLowerCase()
-    if (!keyword) {
-        return ganttItems.value
-    }
+  const keyword = searchKeyword.value.trim().toLowerCase();
+  if (!keyword) {
+    return ganttItems.value;
+  }
 
-    if (searchMatchedIds.value.length === 0) {
-        return []
-    }
+  if (searchMatchedIds.value.length === 0) {
+    return [];
+  }
 
-    return ganttItems.value.filter(item => searchMatchedIds.value.includes(item.id))
-})
+  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 TABLE_HEADER_HEIGHT = 28;
+const TABLE_ROW_HEIGHT = 32;
+const TABLE_VIRTUAL_OVERSCAN = 8;
 
 const {
-    virtualRows,
-    virtualTopSpacerHeight,
-    virtualBottomSpacerHeight,
-    virtualStartIndex,
-    virtualEndIndex,
-    syncVirtualViewportState,
-    visibleColumnSpan,
+  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),
-})
+  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
+  if (!editingTextCell.value) return;
 
-    const renderedIds = new Set(virtualRows.value.map(({ item }) => item.id))
-    if (!renderedIds.has(editingTextCell.value.id)) {
-        closeCellEditor()
-    }
-})
+  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,
+  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 渲染不同编辑控件
-*/
+  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)
+  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
+  if (configId === "index") {
+    return 50;
+  }
+  // 其他列默认中等宽度
+  return 400;
 }
 function getColumnWidth(configId: string): number {
-    if (configId === 'index') {
-        return 50
-    }
-    return columnWidths.value[configId] || getDefaultColumnWidth(configId)
+  if (configId === "index") {
+    return 50;
+  }
+  return columnWidths.value[configId] || getDefaultColumnWidth(configId);
 }
 
 /**
  * 点击空白区域，清空选中并关闭编辑态
  */
 function onContainerClick() {
-    clearSelection()
+  clearSelection();
 }
 /**
  * 新增行
  */
 function addRow() {
-    eventBus.emit('table-add-row')
+  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}`
-})
+  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
-})
+  return searchMatchedIds.value.length > 0 && currentMatchIndex.value > 0;
+});
 
 const canGoNext = computed(() => {
-    return (
-        searchMatchedIds.value.length > 0 &&
-        currentMatchIndex.value < searchMatchedIds.value.length - 1
-    )
-})
+  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])
-    }
+  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()
+  runSearch();
 }
 
 /**
  * 跳转上一条匹配
  */
 function gotoPrevMatch() {
-    if (!canGoPrev.value) return
-    currentMatchIndex.value--
-    selectRow(searchMatchedIds.value[currentMatchIndex.value])
+  if (!canGoPrev.value) return;
+  currentMatchIndex.value--;
+  selectRow(searchMatchedIds.value[currentMatchIndex.value]);
 }
 
 /**
  * 跳转下一条匹配
  */
 function gotoNextMatch() {
-    if (!canGoNext.value) return
-    currentMatchIndex.value++
-    selectRow(searchMatchedIds.value[currentMatchIndex.value])
+  if (!canGoNext.value) return;
+  currentMatchIndex.value++;
+  selectRow(searchMatchedIds.value[currentMatchIndex.value]);
 }
 
 /**
  * 打开搜索栏
  */
 function openSearch() {
-    showSearchBar.value = true
-    nextTick(() => {
-        searchInputRef.value?.focus()
-    })
+  showSearchBar.value = true;
+  nextTick(() => {
+    searchInputRef.value?.focus();
+  });
 }
 
 /**
  * 关闭搜索栏
  */
 function closeSearch() {
-    showSearchBar.value = false
-    searchKeyword.value = ''
-    searchMatchedIds.value = []
-    currentMatchIndex.value = -1
+  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()
+  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
+  return (
+    editingTextCell.value?.id === rowId &&
+    editingTextCell.value?.field === field
+  );
 }
 
 /**
  * 设置当前编辑输入框 ref
  */
 function setEditingInputRef(el: HTMLInputElement | null | any) {
-    editingInputRef.value = el
+  editingInputRef.value = el;
 }
 
 /**
-* 打开单元格编辑
-* 根据列的 valueType 选择合适的编辑控件
-*/
+ * 打开单元格编辑
+ * 根据列的 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?.()
-    })
+  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
+  const v = item?.[configId];
+  return v;
 }
 
-/**
- * 保存单元格值
- */
-function saveTextEdit(item: GanttItem, field: string) {
+function hasCellProperty(item: any, configId: string): boolean {
+  return !!item && Object.prototype.hasOwnProperty.call(item, configId);
+}
 
-    if (!editingTextCell.value || editingTextCell.value.value === undefined) {
-        editingTextCell.value = null
-        return
-    }
+function normalizeBooleanValue(value: any): boolean | undefined {
+  if (value === null || value === undefined || value === "") {
+    return undefined;
+  }
 
-    const oldValue = getRawCellValue(item as any, field)
-    const newValue = editingTextCell.value.value
+  if (typeof value === "boolean") {
+    return value;
+  }
 
-    // 值未改变，直接关闭编辑
-    if (oldValue === newValue) {
-        editingTextCell.value = null
-        return
-    }
+  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;
+}
 
-    // 发送编辑事件到父组件（与 Gantt 使用相同的事件名）
-    eventBus.emit('gantt-cell-edit', {
-        item,
-        configId: field,
-        oldValue,
-        newValue
-    })
+function hasBooleanCellValue(item: any, configId: string): boolean {
+  if (!hasCellProperty(item, configId)) {
+    return false;
+  }
 
-    // 暂时关闭编辑状态（等待接口返回）
-    editingTextCell.value = null
+  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
+  editingTextCell.value = null;
+  editingInputRef.value = null;
 }
 //监听获取后端列配置
-watch(() => props.shape.attributeColumns, (columns) => {
+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)
+      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]
+      // 没有后端数据时使用默认配置
+      columnConfig.value = [...defaultColumns.value];
     }
-}, { immediate: true })
+  },
+  { 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 (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("、");
 
-    if (value && typeof value === 'object') {
-        return {
-            text: value.nodeName || value.modelName || String(value ?? ''),
-            icon: value.icon || '',
-        }
-    }
+    return {
+      text: text || String(value ?? ""),
+      icon: objectItems.find((item: any) => item.icon)?.icon || "",
+    };
+  }
 
+  if (value && typeof value === "object") {
     return {
-        text: String(value ?? ''),
-        icon: '',
-    }
+      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
+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
+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 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)
+  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)
-    }
+  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 })[]
-    }
+  if (data && data.length > 0) {
+    ganttItems.value = data.map((d) => ({
+      ...d,
+      hasChildren: false,
+    })) as (GanttData & { hasChildren: boolean })[];
+  }else{
+    ganttItems.value = [];
+  }
 }
 
 // 监听列配置变更（来自工具栏菜单）
 function onColumnConfigChange(config: Array<any>) {
-    columnConfig.value = config
+  columnConfig.value = config;
 }
 const tableWidth = computed(() => {
-    return displayColumns.value.reduce((total, col) => {
-        return total + getColumnWidth(col.configId)
-    }, 0)
-})
+  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)
-})
+  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)
-})
+  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;
+  --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;
+  width: 100%;
+  overflow: auto;
 }
 
 .gantt-left.with-search-bar {
-    margin-top: 36px;
+  margin-top: 36px;
 }
 
 /* 虚拟滚动占位行 */
 .table-spacer-row td {
-    height: 0;
-    padding: 0;
-    border: none !important;
+  height: 0;
+  padding: 0;
+  border: none !important;
 }
 
 .table-spacer {
-    width: 1px;
+  width: 1px;
 }
 
 /* 表格 */
 .gantt-table {
-    border-collapse: separate;
-    border-spacing: 0;
-    table-layout: fixed;
+  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;
+  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;
+  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;
+  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;
+  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);
+  height: var(--data-row-h);
 }
 
 /* 列样式 */
 .col-name {
-    text-align: left;
+  text-align: left;
 }
 
 .col-td {
-    text-align: center;
+  text-align: center;
 }
 
 .col-index {
-    width: 60px !important;
+  width: 60px !important;
 }
 
 .th-label {
-    font-weight: 600;
+  font-weight: 600;
 }
 .cell-text {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  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;
+  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;
+  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;
+  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;
+  text-align: center;
 }
 
 /* 单元格编辑输入框（Element Plus 包一层外壳，尽量贴合现有样式） */
 .cell-input {
-    width: 100%;
+  width: 100%;
 }
 
 .cell-input :deep(.el-input__wrapper) {
-    padding: 0 6px;
-    height: 24px;
-    box-shadow: 0 0 0 1px #409eff inset;
-    border-radius: 3px;
+  padding: 0 6px;
+  height: 24px;
+  box-shadow: 0 0 0 1px #409eff inset;
+  border-radius: 3px;
 }
 
 .cell-select {
-    width: 100%;
+  width: 100%;
 }
 
 .cell-select :deep(.el-input__wrapper) {
-    min-height: 24px;
-    height: 24px;
-    padding: 0 6px;
-    border-radius: 3px;
+  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-switch {
-    display: inline-flex;
-    align-items: center;
-    height: 24px;
+.cell-boolean-group :deep(.el-radio__label) {
+  padding-left: 4px;
 }
 
 .cell-date {
-    width: 100%;
+  width: 100%;
 }
 
 .cell-date :deep(.el-input__wrapper) {
-    min-height: 24px;
-    height: 24px;
-    padding: 0 6px;
-    border-radius: 3px;
+  min-height: 24px;
+  height: 24px;
+  padding: 0 6px;
+  border-radius: 3px;
 }
 
 .cell-textarea {
-    width: 100%;
+  width: 100%;
 }
 
 .cell-textarea :deep(.el-textarea__inner) {
-    font-size: 12px;
-    line-height: 18px;
-    padding: 4px 6px;
+  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;
+  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);
+  background-color: rgba(64, 158, 255, 0.1);
 }
 
 /* 选中行高亮 */
 .row-selected {
-    background-color: #ecf5ff !important;
+  background-color: #ecf5ff !important;
 }
 
 .gantt-row.row-selected td {
-    background-color: #ecf5ff;
+  background-color: #ecf5ff;
 }
 </style>