v 1.6.0.preview1 - TaskList Slots

2025-12-13 21:25:35 +08:00
parent 0c3620c7f7
commit c8aa1ba9a3
10 changed files with 995 additions and 55 deletions
@@ -44,6 +44,7 @@ const props = withDefaults(defineProps<Props>(), {
    afternoon: { start: 13, end: 17 },
  }),
  taskListConfig: undefined,
+  taskListColumnRenderMode: 'default',
  taskBarConfig: undefined,
  autoSortByStartDate: false,
  allowDragAndResize: true,
@@ -84,11 +85,6 @@ const emit = defineEmits([
 const { showMessage } = useMessage()
 const slots = useSlots()

-// 获取所有列级 slot 名称并通过 provide 传递给子组件
-const columnSlotNames = computed(() => {
-  return Object.keys(slots).filter(name => name.startsWith('column-'))
-})
-
 // 提供 slots 给子组件（TaskList 和 TaskRow）
 provide('gantt-column-slots', slots)

@@ -135,6 +131,8 @@ interface Props {
  }
  // 任务列表配置
  taskListConfig?: TaskListConfig
+  // 任务列表列渲染模式：'default' 使用 taskListConfig.columns 配置，'declarative' 使用声明式 <task-list-column> 标签
+  taskListColumnRenderMode?: 'default' | 'declarative'
  // TaskBar 配置
  taskBarConfig?: TaskBarConfig
  // 是否启用自动排序（根据开始时间排序任务）
@@ -2307,6 +2305,7 @@ function handleMilestoneDialogDelete(milestoneId: number) {
          :tasks="tasksForTaskList"
          :use-default-drawer="props.useDefaultDrawer"
          :task-list-config="props.taskListConfig"
+          :task-list-column-render-mode="props.taskListColumnRenderMode"
          :enable-task-row-move="props.enableTaskRowMove"
          @task-collapse-change="handleTaskCollapseChange"
          @start-timer="handleStartTimer"
@@ -2316,6 +2315,10 @@ function handleMilestoneDialogDelete(milestoneId: number) {
          @delete="handleTaskDelete"
          @task-row-moved="handleTaskRowMoved"
        >
+          <!-- 传递默认 slot (用于声明式列定义) -->
+          <template v-if="$slots.default" #default>
+            <slot />
+          </template>
          <!-- 传递 custom-task-content slot -->
          <template v-if="$slots['custom-task-content']" #custom-task-content="rowScope">
            <slot name="custom-task-content" v-bind="rowScope" />
@@ -8,15 +8,20 @@ import { DEFAULT_TASK_LIST_COLUMNS } from '../models/configs/TaskListConfig'
 import { useTaskRowDrag } from '../composables/useTaskRowDrag'
 import { moveTask } from '../utils/taskTreeUtils'
 import type { Slots } from 'vue'
+import { useTaskListColumns } from '../composables/useTaskListColumns'
+import type { DeclarativeColumnConfig } from '../composables/useTaskListColumns'

 interface Props {
  tasks?: Task[]
  useDefaultDrawer?: boolean
  taskListConfig?: TaskListConfig
+  taskListColumnRenderMode?: 'default' | 'declarative'
  enableTaskRowMove?: boolean
 }

-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  taskListColumnRenderMode: 'default',
+})

 // 定义emit事件
 // const emit = defineEmits(['task-collapse-change', 'start-timer', 'stop-timer'])
@@ -49,6 +54,24 @@ const columnSlots = inject<Slots>('gantt-column-slots', {})
 // 多语言支持
 const { t } = useI18n()

+// 使用声明式列管理 composable
+const { declarativeColumns, finalColumns, getColumnWidthStyle: getDeclarativeColumnWidth } =
+  useTaskListColumns(
+    props.taskListColumnRenderMode || 'default',
+    slots,
+    props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS,
+  )
+
+// 计算实际使用的列配置
+const columnsToUse = computed(() => {
+  if (props.taskListColumnRenderMode === 'declarative') {
+    return declarativeColumns.value
+  }
+  // 默认模式：使用 taskListConfig 中的列配置
+  const columns = props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS
+  return columns.filter(col => col.visible !== false)
+})
+
 // TaskList 容器引用
 const taskListRef = ref<HTMLElement | null>(null)
 const taskListBodyRef = ref<HTMLElement | null>(null)
@@ -68,6 +91,12 @@ const taskListBodyHeight = ref(0)

 // 获取列宽度样式（百分比转像素）
 const getColumnWidthStyle = (column: { width?: number | string }) => {
+  // 声明式模式：使用 composable 中的方法
+  if (props.taskListColumnRenderMode === 'declarative') {
+    return getDeclarativeColumnWidth(column, cachedContainerWidth.value)
+  }
+
+  // 默认模式：原有逻辑
  if (!column.width) return {}

  let widthPx: string
@@ -94,13 +123,8 @@ const getColumnWidthStyle = (column: { width?: number | string }) => {
  }
 }

-// 计算可见的列配置
-const visibleColumns = computed(() => {
-  const columns = props.taskListConfig?.columns || DEFAULT_TASK_LIST_COLUMNS
-
-  // 过滤出可见的列（visible !== false）
-  return columns.filter(col => col.visible !== false)
-})
+// 计算可见的列配置（已被 columnsToUse 替代，保留以兼容）
+const visibleColumns = computed(() => columnsToUse.value)

 // 使用 props.tasks 的引用，不创建副本
 // 这样可以直接修改对象，触发响应式更新，不需要外部监听事件
@@ -596,20 +620,58 @@ onUnmounted(() => {
 <template>
  <div ref="taskListRef" class="task-list">
    <div class="task-list-header">
-      <!-- 任务名称列，始终显示 -->
-      <div class="col col-name">
-        {{ (t as any).taskName || '任务名称' }}
-      </div>
-      <!-- 可配置的其他列 -->
-      <div
-        v-for="column in visibleColumns"
-        :key="column.key"
-        class="col"
-        :class="column.cssClass || `col-${column.key}`"
-        :style="getColumnWidthStyle(column)"
-      >
-        {{ (t as any)[column.key] || column.label }}
-      </div>
+      <!-- 声明式模式 -->
+      <template v-if="taskListColumnRenderMode === 'declarative'">
+        <div
+          v-for="(column, index) in columnsToUse"
+          :key="index"
+          class="col"
+          :class="column.cssClass"
+          :style="{
+            ...getColumnWidthStyle(column),
+            justifyContent: column.align === 'center' ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start',
+            textAlign: column.align || 'left'
+          }"
+        >
+          <!-- 使用 header slot 或显示 label -->
+          <template v-if="column.headerSlot">
+            <component :is="column.headerSlot" />
+          </template>
+          <template v-else>
+            {{ column.label }}
+          </template>
+        </div>
+      </template>
+
+      <!-- 默认模式：使用配置的列 -->
+      <template v-else>
+        <!-- 任务名称列，始终显示 -->
+        <div class="col col-name">
+          <!-- 检查是否有 header-name slot -->
+          <template v-if="columnSlots['header-name']">
+            <component :is="columnSlots['header-name']" />
+          </template>
+          <template v-else>
+            {{ (t as any).taskName || '任务名称' }}
+          </template>
+        </div>
+        <!-- 可配置的其他列 -->
+        <div
+          v-for="column in visibleColumns"
+          :key="column.key"
+          class="col"
+          :class="column.cssClass || `col-${column.key}`"
+          :style="getColumnWidthStyle(column)"
+        >
+          <!-- 检查是否有对应的 header-{key} slot -->
+          <template v-if="columnSlots[`header-${column.key}`]">
+            <component :is="columnSlots[`header-${column.key}`]" />
+          </template>
+          <template v-else>
+            {{ (t as any)[column.key] || column.label }}
+          </template>
+        </div>
+      </template>
    </div>
    <div ref="taskListBodyRef" class="task-list-body" @scroll="handleTaskListScroll">
      <div class="task-list-body-spacer" :style="{ height: `${startSpacerHeight}px` }"></div>
@@ -623,6 +685,8 @@ onUnmounted(() => {
        :hovered-task-id="hoveredTaskId"
        :on-hover="handleTaskRowHover"
        :columns="visibleColumns"
+        :declarative-columns="taskListColumnRenderMode === 'declarative' ? columnsToUse : undefined"
+        :render-mode="taskListColumnRenderMode"
        :get-column-width-style="getColumnWidthStyle"
        :disable-children-render="true"
        :show-task-icon="props.taskListConfig?.showTaskIcon"
@@ -691,6 +755,7 @@ onUnmounted(() => {
  color: var(--gantt-text-header);
  border-right-color: var(--gantt-border-medium);
  padding: 0 10px;
+  box-sizing: border-box; /* 确保 padding 包含在宽度内 */
 }

 .task-list-body {
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * TaskListColumn 声明式列组件
+ * 用于在 GanttChart 中声明式定义任务列表的列
+ * 类似于 Element Plus 的 el-table-column
+ */
+
+// 显式定义组件名称，用于识别
+defineOptions({
+  name: 'TaskListColumn',
+})
+
+interface Props {
+  // 列的属性名（用于访问任务数据）
+  prop?: string
+  // 列的显示标签
+  label?: string
+  // 列宽度，支持像素数字或百分比字符串
+  width?: number | string
+  // 列对齐方式
+  align?: 'left' | 'center' | 'right'
+  // CSS 类名
+  cssClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  align: 'left',
+})
+
+// 定义 slot
+defineSlots<{
+  // 列头部插槽
+  header?: () => any
+  // 列内容默认插槽，接收 scope 对象 { row: Task, $index: number }
+  default?: (scope: { row: any; $index: number }) => any
+}>()
+
+// 注意：此组件不渲染任何内容，仅用于声明列配置
+// 实际渲染由 TaskList 和 TaskRow 处理
+</script>
+
+<template>
+  <!-- 此组件不渲染内容 -->
+</template>
@@ -5,6 +5,7 @@ import { useI18n } from '../composables/useI18n'
 import { formatPredecessorDisplay } from '../utils/predecessorUtils'
 import type { Task } from '../models/classes/Task'
 import type { TaskListColumnConfig } from '../models/configs/TaskListConfig'
+import type { DeclarativeColumnConfig } from '../composables/useTaskListColumns'
 import TaskContextMenu from './TaskContextMenu.vue'

 interface TaskRowSlotProps {
@@ -36,6 +37,8 @@ interface Props {
  hoveredTaskId?: number | null
  onHover?: (taskId: number | null) => void
  columns: TaskListColumnConfig[]
+  declarativeColumns?: DeclarativeColumnConfig[]
+  renderMode?: 'default' | 'declarative'
  getColumnWidthStyle?: (column: { width?: number | string }) => StyleValue
  disableChildrenRender?: boolean
  showTaskIcon?: boolean // 是否显示任务图标，默认true
@@ -43,7 +46,9 @@ interface Props {
  dragStart?: (task: Task, element: HTMLElement, event: MouseEvent) => void
  dragOver?: (task: Task, element: HTMLElement, event: MouseEvent) => void
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  renderMode: 'default',
+})
 const emit = defineEmits([
  'toggle',
  'dblclick',
@@ -85,6 +90,142 @@ const renderColumnSlot = (columnKey: string, slotProps: any) => {
  return null
 }

+// 计算实际要渲染的列
+const columnsToRender = computed(() => {
+  if (props.renderMode === 'declarative' && props.declarativeColumns) {
+    return props.declarativeColumns
+  }
+  return props.columns
+})
+
+// 判断是否是第一列
+const isFirstColumn = (index: number) => index === 0
+
+// 获取声明式列的对齐样式
+const getDeclarativeColumnAlign = (column: DeclarativeColumnConfig) => {
+  // if (!column.align || column.align === 'left') return {}
+  return {
+    justifyContent: column.align === 'center' ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start',
+    textAlign: column.align || 'left',
+  }
+}
+
+// 渲染声明式列的内容
+const renderDeclarativeColumn = (
+  column: DeclarativeColumnConfig,
+  index: number,
+): any => {
+  // 第一列特殊处理：需要显示折叠按钮、图标等
+  if (isFirstColumn(index)) {
+    // 获取列对应的值（使用 prop 或默认为 name）
+    const columnValue = column.prop ? (props.task as any)[column.prop] : props.task.name
+
+    // 如果有自定义 slot
+    if (column.defaultSlot) {
+      return h('div', { class: 'task-name-content' }, [
+        // 自定义内容
+        h(
+          'span',
+          {
+            class: ['task-name-text', { 'parent-task': isParentTask.value }],
+            title: columnValue,
+          },
+          column.defaultSlot({
+            row: props.task,
+            $index: index,
+          }),
+        ),
+      ])
+    }
+
+    // 默认显示列的值（使用 prop）
+    return h('div', { class: 'task-name-content' }, [
+      // 任务图标
+      props.showTaskIcon !== false
+        ? h(
+            'span',
+            { class: 'task-icon' },
+            isMilestoneGroup.value
+              ? h(
+                  'svg',
+                  {
+                    width: 16,
+                    height: 16,
+                    viewBox: '0 0 24 24',
+                    fill: 'none',
+                    stroke: 'currentColor',
+                    'stroke-width': 2,
+                    class: 'milestone-group-icon',
+                  },
+                  h('polygon', { points: '12,2 22,12 12,22 2,12' }),
+                )
+              : isStoryTask.value || hasChildren.value
+                ? h(
+                    'svg',
+                    {
+                      width: 16,
+                      height: 16,
+                      viewBox: '0 0 24 24',
+                      fill: 'none',
+                      stroke: 'currentColor',
+                      'stroke-width': 2,
+                    },
+                    h('path', {
+                      d: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z',
+                    }),
+                  )
+                : h(
+                    'svg',
+                    {
+                      width: 16,
+                      height: 16,
+                      viewBox: '0 0 24 24',
+                      fill: 'none',
+                      stroke: 'currentColor',
+                      'stroke-width': 2,
+                    },
+                    [
+                      h('path', {
+                        d: 'M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z',
+                      }),
+                      h('polyline', { points: '14,2 14,8 20,8' }),
+                      h('line', { x1: 16, y1: 13, x2: 8, y2: 13 }),
+                      h('line', { x1: 16, y1: 17, x2: 8, y2: 17 }),
+                      h('polyline', { points: '10,9 9,9 8,9' }),
+                    ],
+                  ),
+          )
+        : null,
+      // 列的值（使用 prop 或默认 name）
+      h(
+        'span',
+        {
+          class: ['task-name-text', { 'parent-task': isParentTask.value }],
+          title: columnValue,
+        },
+        columnValue || '-',
+      ),
+    ])
+  }
+
+  // 其他列：正常处理
+  // 如果有自定义 slot，使用 slot
+  if (column.defaultSlot) {
+    return column.defaultSlot({
+      row: props.task,
+      $index: index,
+    })
+  }
+
+  // 否则使用 prop 访问任务数据
+  if (column.prop) {
+    const value = (props.task as any)[column.prop]
+    return value !== undefined && value !== null ? value : '-'
+  }
+
+  return '-'
+}
+
 const baseIndent = 10
 const indent = computed(() => `${baseIndent + props.level * 20}px`)
 const hasChildren = computed(() => !!(props.task.children && props.task.children.length > 0))
@@ -373,33 +514,85 @@ onUnmounted(() => {
      @mouseleave="handleMouseLeave"
      @contextmenu="handleContextMenu"
    >
-      <div class="col col-name" :style="{ paddingLeft: indent }">
-        <span
-          v-if="(isStoryTask || hasChildren) && !isMilestoneGroup"
-          class="collapse-btn"
-          @click.stop="handleToggle"
+      <!-- 声明式渲染模式 -->
+      <template v-if="renderMode === 'declarative' && declarativeColumns">
+        <div
+          v-for="(column, index) in columnsToRender"
+          :key="index"
+          class="col"
+          :class="[column.cssClass, { 'col-name': isFirstColumn(index) }]"
+          :style="{
+            ...(getColumnWidthStyle ? getColumnWidthStyle(column) : {}),
+            ...getDeclarativeColumnAlign(column),
+          }"
        >
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
+          <!-- 第一列：保留 collapse-btn, milestone-spacer, leaf-spacer -->
+          <div v-if="isFirstColumn(index)"
+              :style="{ paddingLeft: indent }"
+              class="first-col-wrapper">
+            <span
+              v-if="(isStoryTask || hasChildren) && !isMilestoneGroup"
+              class="collapse-btn"
+              @click.stop="handleToggle"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <polyline v-if="props.task.collapsed" points="9,18 15,12 9,6" />
+                <polyline v-else points="18,15 12,9 6,15" />
+              </svg>
+            </span>
+
+            <span v-if="isMilestoneGroup" class="milestone-spacer"></span>
+
+            <span
+              v-if="!isParentTask && !isMilestoneGroup && showTaskIcon === false"
+              class="leaf-spacer"
+            ></span>
+
+            <!-- 渲染列内容 -->
+            <component :is="() => renderDeclarativeColumn(column, index)" />
+          </div>
+
+          <!-- 其他列：直接渲染内容 -->
+          <component v-else :is="() => renderDeclarativeColumn(column, index)" />
+        </div>
+      </template>
+
+      <!-- 默认渲染模式 -->
+      <template v-else>
+        <div class="col col-name" :style="{ paddingLeft: indent }">
+          <span
+            v-if="(isStoryTask || hasChildren) && !isMilestoneGroup"
+            class="collapse-btn"
+            @click.stop="handleToggle"
          >
-            <polyline v-if="props.task.collapsed" points="9,18 15,12 9,6" />
-            <polyline v-else points="18,15 12,9 6,15" />
-          </svg>
-        </span>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <polyline v-if="props.task.collapsed" points="9,18 15,12 9,6" />
+              <polyline v-else points="18,15 12,9 6,15" />
+            </svg>
+          </span>

-        <!-- 里程碑分组的占位空间，用于与有折叠按钮的任务对齐 -->
-        <span v-if="isMilestoneGroup" class="milestone-spacer"></span>
+          <!-- 里程碑分组的占位空间，用于与有折叠按钮的任务对齐 -->
+          <span v-if="isMilestoneGroup" class="milestone-spacer"></span>

-        <!-- 叶子节点的占位空间（无折叠按钮且无图标显示时） -->
-        <span
-          v-if="!isParentTask && !isMilestoneGroup && showTaskIcon === false"
-          class="leaf-spacer"
-        ></span>
+          <!-- 叶子节点的占位空间（无折叠按钮且无图标显示时） -->
+          <span
+            v-if="!isParentTask && !isMilestoneGroup && showTaskIcon === false"
+            class="leaf-spacer"
+          ></span>

        <!-- 优先级1: 列级自定义 Slot (#column-name) - 覆盖整列内容（图标+文本+徽章） -->
        <component
@@ -642,6 +835,8 @@ onUnmounted(() => {
          </template>
        </template>
      </div>
+      </template>
+      <!-- 结束默认渲染模式 -->
    </div>
    <template
      v-if="
@@ -657,6 +852,8 @@ onUnmounted(() => {
        :hovered-task-id="props.hoveredTaskId"
        :on-hover="props.onHover"
        :columns="props.columns"
+        :declarative-columns="props.declarativeColumns"
+        :render-mode="props.renderMode"
        :get-column-width-style="props.getColumnWidthStyle"
        :disable-children-render="props.disableChildrenRender"
        :show-task-icon="props.showTaskIcon"
@@ -1151,4 +1348,17 @@ onUnmounted(() => {
 :global(html[data-theme='dark']) .task-row-drop-target.drop-child {
  background-color: rgba(125, 180, 240, 0.1) !important;
 }
+
+/* 声明式列第一列的包装器 */
+.first-col-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 声明式列的 padding，与 header 保持一致 */
+.task-row .col {
+  padding: 0 10px;
+}
 </style>
@@ -1,6 +1,7 @@
 export { default as GanttChart } from './GanttChart.vue'
 export { default as GanttToolbar } from './GanttToolbar.vue'
 export { default as TaskList } from './TaskList.vue'
+export { default as TaskListColumn } from './TaskListColumn.vue'
 export { default as TaskRow } from './TaskRow.vue'
 export { default as Timeline } from './Timeline.vue'
 export { default as TaskBar } from './TaskBar.vue'
@@ -0,0 +1,191 @@
+import { computed, type VNode, type Slots, type VNodeChild } from 'vue'
+import type { Task } from '../models/classes/Task'
+import type { TaskListColumnConfig } from '../models/configs/TaskListConfig'
+
+/**
+ * 声明式列配置接口
+ * 从 task-list-column 组件解析出的列配置
+ */
+export interface DeclarativeColumnConfig {
+  prop?: string
+  label?: string
+  width?: number | string
+  align?: 'left' | 'center' | 'right'
+  cssClass?: string
+  // slot 函数
+  headerSlot?: () => VNodeChild
+  defaultSlot?: (scope: { row: Task; $index: number }) => VNodeChild
+}
+
+/**
+ * 从 VNode 中提取 task-list-column 的配置
+ */
+export function extractColumnConfig(vnode: VNode): DeclarativeColumnConfig | null {
+  // 检查是否是 task-list-column 组件
+  // 支持多种识别方式
+  let isTaskListColumn = false
+
+  if (typeof vnode.type === 'object') {
+    const component = vnode.type as any
+    // 检查组件名称的多种可能性
+    isTaskListColumn =
+      component.name === 'TaskListColumn' ||
+      component.__name === 'TaskListColumn' ||
+      // 检查文件名（setup script 组件）
+      (component.__file && component.__file.includes('TaskListColumn'))
+  }
+
+  if (!isTaskListColumn) {
+    return null
+  }
+
+  // 提取 props
+  const props = vnode.props || {}
+  type ChildrenType = {
+    header?: () => VNodeChild
+    default?: (scope: { row: Task; $index: number }) => VNodeChild
+  } | null
+  const children = vnode.children as ChildrenType
+
+  // 提取 slots
+  const headerSlot = children?.header
+  const defaultSlot = children?.default
+
+  return {
+    prop: props.prop,
+    label: props.label,
+    width: props.width,
+    align: props.align || 'left',
+    cssClass: props.cssClass,
+    headerSlot,
+    defaultSlot,
+  }
+}
+
+/**
+ * 解析声明式列配置
+ * 从默认 slot 的 VNode 中提取所有 task-list-column 的配置
+ */
+export function parseDeclarativeColumns(slots: Slots): DeclarativeColumnConfig[] {
+  const defaultSlot = slots.default?.()
+
+  if (!defaultSlot || !Array.isArray(defaultSlot)) {
+    return []
+  }
+
+  const columns: DeclarativeColumnConfig[] = []
+
+  // 递归提取所有 task-list-column
+  const extractColumns = (vnodes: VNode[]) => {
+    for (const vnode of vnodes) {
+      // 跳过注释节点和文本节点，但继续处理 Fragment
+      if (!vnode) {
+        continue
+      }
+
+      // 如果是 Fragment 或其他 Symbol 类型，直接处理子节点
+      if (typeof vnode.type === 'symbol') {
+        if (vnode.children && Array.isArray(vnode.children)) {
+          extractColumns(vnode.children as VNode[])
+        }
+        continue
+      }
+
+      const config = extractColumnConfig(vnode)
+      if (config) {
+        columns.push(config)
+      }
+
+      // 递归处理子节点
+      if (vnode.children && Array.isArray(vnode.children)) {
+        extractColumns(vnode.children as VNode[])
+      }
+    }
+  }
+
+  extractColumns(defaultSlot)
+
+  return columns
+}/**
+ * Task List Columns Composable
+ * 用于管理任务列表的列配置（支持声明式和配置式）
+ */
+export function useTaskListColumns(
+  renderMode: 'default' | 'declarative',
+  slots: Slots,
+  defaultColumns?: TaskListColumnConfig[],
+) {
+  // 声明式列配置
+  const declarativeColumns = computed(() => {
+    if (renderMode !== 'declarative') {
+      return []
+    }
+    return parseDeclarativeColumns(slots)
+  })
+
+  // 最终使用的列配置
+  const finalColumns = computed(() => {
+    if (renderMode === 'declarative') {
+      return declarativeColumns.value
+    }
+    return defaultColumns || []
+  })
+
+  // 获取列宽度样式
+  const getColumnWidthStyle = (
+    column: { width?: number | string },
+    containerWidth?: number,
+  ) => {
+    if (!column.width) return {}
+
+    let widthPx: string
+
+    // 如果是百分比，转换为像素
+    if (typeof column.width === 'string' && column.width.includes('%')) {
+      if (containerWidth && containerWidth > 0) {
+        const percentage = parseFloat(column.width) / 100
+        const pixels = Math.floor(containerWidth * percentage)
+        widthPx = `${pixels}px`
+      } else {
+        return {} // 容器宽度未知时返回空
+      }
+    } else {
+      // 像素值：处理数字或字符串数字
+      if (typeof column.width === 'number') {
+        widthPx = `${column.width}px`
+      } else if (typeof column.width === 'string') {
+        // 如果字符串已经包含单位（px, rem, em等），直接使用
+        if (/\d+(px|rem|em|%)/.test(column.width)) {
+          widthPx = column.width
+        } else {
+          // 纯数字字符串，添加 px 单位
+          widthPx = `${column.width}px`
+        }
+      } else {
+        widthPx = String(column.width)
+      }
+    }
+
+    return {
+      flex: `0 0 ${widthPx}`,
+      minWidth: widthPx,
+      maxWidth: widthPx,
+    }
+  }
+
+  // 获取列对齐样式
+  const getColumnAlignStyle = (align?: 'left' | 'center' | 'right') => {
+    if (!align || align === 'left') return {}
+    return {
+      justifyContent: align === 'center' ? 'center' : 'flex-end',
+      textAlign: align,
+    }
+  }
+
+  return {
+    declarativeColumns,
+    finalColumns,
+    getColumnWidthStyle,
+    getColumnAlignStyle,
+  }
+}
@@ -1,6 +1,7 @@
 // 导出所有组件
 export { default as GanttChart } from './components/GanttChart.vue'
 export { default as TaskList } from './components/TaskList.vue'
+export { default as TaskListColumn } from './components/TaskListColumn.vue'
 export { default as Timeline } from './components/Timeline.vue'
 export { default as TaskBar } from './components/TaskBar.vue'
 export { default as TaskDrawer } from './components/TaskDrawer.vue'
@@ -26,9 +27,11 @@ import './styles/theme-variables.css'
 // 导出安装函数（可选，用于Vue.use()）
 import type { App } from 'vue'
 import GanttChart from './components/GanttChart.vue'
+import TaskListColumn from './components/TaskListColumn.vue'

 export const install = (app: App) => {
  app.component('GanttChart', GanttChart)
+  app.component('TaskListColumn', TaskListColumn)
 }

 export default {