!2 i#ICZHVS 增加task内容支持自定义渲染

Merge pull request !2 from 秋成/master

Author: nelson820125

README-EN.md

@@ -136,6 +136,7 @@ jordium-gantt-vue3/
 | `useDefaultDrawer` | `boolean` | `true` | Use default edit drawer |
 | `showToolbar` | `boolean` | `true` | Show toolbar |
 | `toolbarConfig` | `ToolbarConfig` | `{}` | Toolbar configuration |
+| `taskListConfig` | `TaskListConfig` | `{}` | Task list configuration (including default width, min/max width limits, etc.) |
 | `localeMessages` | `Partial<Messages['zh-CN']>` | - | Custom locale messages |
 | `workingHours` | `WorkingHours` | - | Working hours configuration |
 | `onTaskDoubleClick` | `(task: Task) => void` | - | Task double-click event callback |
@@ -299,6 +300,31 @@ interface ToolbarConfig {
 }
 ```
 
+**TaskListConfig**
+```typescript
+interface TaskListConfig {
+  columns?: TaskListColumnConfig[]  // Column configuration array
+  showAllColumns?: boolean         // Show all columns, default true
+  defaultWidth?: number           // Default expanded width in pixels, default 320px
+  minWidth?: number              // Minimum width in pixels, default 280px, cannot be less than 280px
+  maxWidth?: number              // Maximum width in pixels, default 1160px
+}
+
+interface TaskListColumnConfig {
+  type?: TaskListColumnType       // Column type
+  key: string                    // Key for internationalization, also used as identifier
+  label?: string                 // Display label
+  cssClass?: string              // CSS class name
+  width?: number                 // Optional column width
+  visible?: boolean              // Whether to display, default true
+}
+
+type TaskListColumnType = 
+  | 'name' | 'predecessor' | 'assignee' 
+  | 'startDate' | 'endDate' | 'estimatedHours' 
+  | 'actualHours' | 'progress'
+```
+
 **WorkingHours Configuration**
 ```typescript
 interface WorkingHours {
@@ -445,13 +471,21 @@ const milestones = ref([
     type: 'milestone'
   }
 ])
+
+// TaskList width configuration example
+const taskListConfig = {
+  defaultWidth: 400,  // Default expanded width 400px (default 320px)
+  minWidth: 300,      // Minimum width 300px (default 280px)
+  maxWidth: 1200      // Maximum width 1200px (default 1160px)
+}
 </script>
 
 <template>
   <div style="height: 600px;">
     <GanttChart 
       :tasks="tasks" 
       :milestones="milestones"
+      :task-list-config="taskListConfig"
     />
   </div>
 </template>

README.md

@@ -137,6 +137,7 @@ jordium-gantt-vue3/
 | `useDefaultDrawer` | `boolean` | `true` | 是否使用默认编辑抽屉 |
 | `showToolbar` | `boolean` | `true` | 是否显示工具栏 |
 | `toolbarConfig` | `ToolbarConfig` | `{}` | 工具栏配置 |
+| `taskListConfig` | `TaskListConfig` | `{}` | 任务列表配置（包括默认宽度、最小最大宽度限制等） |
 | `localeMessages` | `Partial<Messages['zh-CN']>` | - | 自定义多语言配置 |
 | `workingHours` | `WorkingHours` | - | 工作时间配置 |
 | `onTaskDoubleClick` | `(task: Task) => void` | - | 任务双击事件回调 |
@@ -313,6 +314,31 @@ interface ToolbarConfig {
 }
 ```
 
+**TaskListConfig 任务列表配置**
+```typescript
+interface TaskListConfig {
+  columns?: TaskListColumnConfig[]  // 列配置数组
+  showAllColumns?: boolean         // 是否显示所有列，默认true
+  defaultWidth?: number           // 默认展开宽度，单位像素，默认320px
+  minWidth?: number              // 最小宽度，单位像素，默认280px，不能小于280px
+  maxWidth?: number              // 最大宽度，单位像素，默认1160px
+}
+
+interface TaskListColumnConfig {
+  type?: TaskListColumnType       // 列类型
+  key: string                    // 用于国际化的key，也可以作为识别符
+  label?: string                 // 显示标签
+  cssClass?: string              // CSS类名
+  width?: number                 // 可选的列宽度
+  visible?: boolean              // 是否显示，默认true
+}
+
+type TaskListColumnType = 
+  | 'name' | 'predecessor' | 'assignee' 
+  | 'startDate' | 'endDate' | 'estimatedHours' 
+  | 'actualHours' | 'progress'
+```
+
 **WorkingHours 工作时间配置**
 ```typescript
 interface WorkingHours {
@@ -459,13 +485,21 @@ const milestones = ref([
     type: 'milestone'
   }
 ])
+
+// TaskList宽度配置示例
+const taskListConfig = {
+  defaultWidth: 400,  // 默认展开宽度400px（默认320px）
+  minWidth: 300,      // 最小宽度300px（默认280px） 
+  maxWidth: 1200      // 最大宽度1200px（默认1160px）
+}
 </script>
 
 <template>
   <div style="height: 600px;">
     <GanttChart 
       :tasks="tasks" 
       :milestones="milestones"
+      :task-list-config="taskListConfig"
     />
   </div>
 </template>