@@ -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 {
diff --git a/src/components/TaskListColumn.vue b/src/components/TaskListColumn.vue
new file mode 100644
index 0000000..fc24948
--- /dev/null
+++ b/src/components/TaskListColumn.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/src/components/TaskRow.vue b/src/components/TaskRow.vue
index 48fe6e2..6847c87 100644
--- a/src/components/TaskRow.vue
+++ b/src/components/TaskRow.vue
@@ -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
()
+const props = withDefaults(defineProps(), {
+ 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"
>
-
-
+
+
-
+
-
-
-
-
+
+
-
-
+
+
-
-
+
+
{