支持左侧列表默认展开的宽度配置

2025-09-25 09:44:58 +08:00
parent 16557a260e
commit f8d6dc6304
6 changed files with 281 additions and 26 deletions
@@ -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,6 +471,13 @@ 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>
@@ -452,6 +485,7 @@ const milestones = ref([
    <GanttChart 
      :tasks="tasks" 
      :milestones="milestones"
+      :task-list-config="taskListConfig"
    />
  </div>
 </template>
@@ -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,6 +485,13 @@ const milestones = ref([
    type: 'milestone'
  }
 ])
+
+// TaskList宽度配置示例
+const taskListConfig = {
+  defaultWidth: 400,  // 默认展开宽度400px（默认320px）
+  minWidth: 300,      // 最小宽度300px（默认280px） 
+  maxWidth: 1200      // 最大宽度1200px（默认1160px）
+}
 </script>

 <template>
@@ -466,6 +499,7 @@ const milestones = ref([
    <GanttChart 
      :tasks="tasks" 
      :milestones="milestones"
+      :task-list-config="taskListConfig"
    />
  </div>
 </template>
@@ -55,8 +55,18 @@ const availableColumns = ref<TaskListColumnConfig[]>([
  { key: 'progress', label: '进度', visible: true },
 ])

+// TaskList宽度配置
+const taskListWidth = ref({
+  defaultWidth: 400,  // 默认宽度400px（比默认320px更宽）
+  minWidth: 300,      // 最小宽度300px（比默认280px略大）
+  maxWidth: 1200,     // 最大宽度1200px（比默认1160px略大）
+})
+
 const taskListConfig = computed<TaskListConfig>(() => ({
  columns: availableColumns.value,
+  defaultWidth: taskListWidth.value.defaultWidth,
+  minWidth: taskListWidth.value.minWidth,
+  maxWidth: taskListWidth.value.maxWidth,
 }))

 // 切换列显示状态
@@ -660,24 +670,91 @@ function onTimerStopped(task: Task) {
    </h1>
    <VersionHistoryDrawer :visible="showVersionDrawer" @close="showVersionDrawer = false" />

-    <!-- TaskList列配置面板 -->
+    <!-- TaskList配置面板 -->
    <div class="config-panel">
      <h3 class="config-title">
        <svg class="config-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15l3-3H9l3 3z" fill="currentColor"/>
          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"/>
        </svg>
-        TaskList 列配置
+        TaskList 配置
      </h3>
-      <div class="column-controls">
-        <label v-for="column in availableColumns" :key="column.key" class="column-control">
-          <input
-            type="checkbox"
-            :checked="column.visible"
-            @change="toggleColumn(column.key, $event)"
-          />
-          <span class="column-label">{{ column.label }}</span>
-        </label>
+
+      <!-- 宽度配置区域 -->
+      <div class="config-section">
+        <h4 class="section-title">
+          <svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect
+              x="3"
+              y="6"
+              width="18"
+              height="12"
+              stroke="currentColor"
+              stroke-width="2"
+              fill="none"
+            />
+            <path d="M8 12h8M8 9l-2 3 2 3M16 9l2 3-2 3" stroke="currentColor" stroke-width="1.5" fill="none"/>
+          </svg>
+          宽度设置
+        </h4>
+        <div class="width-controls">
+          <div class="width-control">
+            <label class="width-label">默认宽度:</label>
+            <input
+              v-model.number="taskListWidth.defaultWidth"
+              type="number"
+              :min="taskListWidth.minWidth"
+              :max="taskListWidth.maxWidth"
+              step="10"
+              class="width-input"
+            />
+            <span class="width-unit">px</span>
+          </div>
+          <div class="width-control">
+            <label class="width-label">最小宽度:</label>
+            <input
+              v-model.number="taskListWidth.minWidth"
+              type="number"
+              min="280"
+              :max="taskListWidth.defaultWidth"
+              step="10"
+              class="width-input"
+            />
+            <span class="width-unit">px</span>
+          </div>
+          <div class="width-control">
+            <label class="width-label">最大宽度:</label>
+            <input
+              v-model.number="taskListWidth.maxWidth"
+              type="number"
+              :min="taskListWidth.defaultWidth"
+              max="2000"
+              step="10"
+              class="width-input"
+            />
+            <span class="width-unit">px</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 列配置区域 -->
+      <div class="config-section">
+        <h4 class="section-title">
+          <svg class="section-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z" fill="currentColor"/>
+          </svg>
+          列显示
+        </h4>
+        <div class="column-controls">
+          <label v-for="column in availableColumns" :key="column.key" class="column-control">
+            <input
+              type="checkbox"
+              :checked="column.visible"
+              @change="toggleColumn(column.key, $event)"
+            />
+            <span class="column-label">{{ column.label }}</span>
+          </label>
+        </div>
      </div>
    </div>

@@ -781,6 +858,69 @@ function onTimerStopped(task: Task) {
  color: var(--gantt-primary-color, #409eff);
 }

+.config-section {
+  margin-bottom: 24px;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 12px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.section-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--primary-color);
+}
+
+.width-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.width-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.width-label {
+  flex: 0 0 80px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.width-input {
+  flex: 1;
+  padding: 4px 8px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--input-background, #fff);
+  color: var(--text-primary);
+  font-size: 13px;
+  max-width: 100px;
+}
+
+.width-input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+.width-unit {
+  flex: 0 0 20px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+
 .column-controls {
  display: flex;
  flex-wrap: wrap;
@@ -117,7 +117,35 @@ interface Props {
  taskListConfig?: TaskListConfig
 }

-const leftPanelWidth = ref(320)
+// 使用taskListConfig中的默认宽度，如果未配置则使用320px
+const leftPanelWidth = ref(props.taskListConfig?.defaultWidth || 320)
+
+// 监听taskListConfig变化，更新相关配置
+watch(
+  () => props.taskListConfig,
+  (newConfig) => {
+    if (newConfig) {
+      // 更新默认宽度
+      if (newConfig.defaultWidth !== undefined) {
+        leftPanelWidth.value = newConfig.defaultWidth
+      }
+
+      // 更新最小最大宽度限制
+      ganttPanelLeftMinWidth.value = getTaskListMinWidth()
+      taskListBodyWidth.value = getTaskListMaxWidth()
+      taskListBodyProposedWidth.value = getTaskListMaxWidth()
+      taskListBodyWidthLimit.value = getTaskListMaxWidth()
+      ganttPanelLeftCurrentWidth.value = getTaskListMinWidth()
+
+      // 确保当前宽度在新的限制范围内
+      const adjustedWidth = checkWidthLimits(leftPanelWidth.value)
+      if (adjustedWidth !== leftPanelWidth.value) {
+        leftPanelWidth.value = adjustedWidth
+      }
+    }
+  },
+  { immediate: false, deep: true },
+)

 // Timeline组件的引用
 const timelineRef = ref<InstanceType<typeof Timeline> | null>(null)
@@ -139,14 +167,25 @@ watch(
 // 边框: 7个列间边框 * 1px = 7px
 // 滚动条预留: 20px
 // 额外边距: 13px (task-list-header的左边距3px + 其他10px预留)
-const TASK_LIST_MAX_WIDTH = 1120 + 7 + 20 + 13 // = 1160px
-const TASK_LIST_MIN_WIDTH = 320 // TaskList最小宽度
+const DEFAULT_TASK_LIST_MAX_WIDTH = 1120 + 7 + 20 + 13 // = 1160px
+const DEFAULT_TASK_LIST_MIN_WIDTH = 280 // 最小宽度不能小于280px

-const taskListBodyWidth = ref(TASK_LIST_MAX_WIDTH) // TaskList默认宽度
-const ganttPanelLeftMinWidth = ref(TASK_LIST_MIN_WIDTH) // 左侧面板最小宽度
-const ganttPanelLeftCurrentWidth = ref(TASK_LIST_MIN_WIDTH) // 当前左侧面板宽度
-const taskListBodyProposedWidth = ref(TASK_LIST_MAX_WIDTH)
-const taskListBodyWidthLimit = ref(TASK_LIST_MAX_WIDTH)
+// TaskList最小宽度，支持通过taskListConfig配置
+const getTaskListMinWidth = () => {
+  const configMinWidth = props.taskListConfig?.minWidth || DEFAULT_TASK_LIST_MIN_WIDTH
+  return Math.max(configMinWidth, DEFAULT_TASK_LIST_MIN_WIDTH) // 确保不小于280px
+}
+
+// TaskList最大宽度，支持通过taskListConfig配置
+const getTaskListMaxWidth = () => {
+  return props.taskListConfig?.maxWidth || DEFAULT_TASK_LIST_MAX_WIDTH
+}
+
+const taskListBodyWidth = ref(getTaskListMaxWidth()) // TaskList默认宽度
+const ganttPanelLeftMinWidth = ref(getTaskListMinWidth()) // 左侧面板最小宽度
+const ganttPanelLeftCurrentWidth = ref(getTaskListMinWidth()) // 当前左侧面板宽度
+const taskListBodyProposedWidth = ref(getTaskListMaxWidth())
+const taskListBodyWidthLimit = ref(getTaskListMaxWidth())

 // 简化的限制检查函数：直接基于面板实际宽度判断
 const checkWidthLimits = (proposedLeftWidth: number): number => {
@@ -225,11 +264,11 @@ function onMouseDown(e: MouseEvent) {
    document.body.style.webkitUserSelect = ''
    document.body.style.cursor = ''

-    taskListBodyWidth.value = TASK_LIST_MAX_WIDTH // TaskList默认宽度
-    ganttPanelLeftMinWidth.value = TASK_LIST_MIN_WIDTH // 左侧面板最小宽度
-    taskListBodyProposedWidth.value = TASK_LIST_MAX_WIDTH
-    taskListBodyWidthLimit.value = TASK_LIST_MAX_WIDTH
-    ganttPanelLeftCurrentWidth.value = TASK_LIST_MIN_WIDTH // 当前左侧面板宽度
+    taskListBodyWidth.value = getTaskListMaxWidth() // TaskList默认宽度
+    ganttPanelLeftMinWidth.value = getTaskListMinWidth() // 左侧面板最小宽度
+    taskListBodyProposedWidth.value = getTaskListMaxWidth()
+    taskListBodyWidthLimit.value = getTaskListMaxWidth()
+    ganttPanelLeftCurrentWidth.value = getTaskListMinWidth() // 当前左侧面板宽度

    window.removeEventListener('mousemove', onMouseMove)
    window.removeEventListener('mouseup', onMouseUp)
@@ -465,8 +465,8 @@ onUnmounted(() => {
        @add-successor="emit('add-successor', $event)"
        @delete="handleTaskDelete"
      >
-        <template v-if="hasContentSlot" #custom-task-content="childScope">
-          <slot name="custom-task-content" v-bind="childScope" />
+        <template v-if="hasContentSlot" #custom-task-content="slotProps">
+          <slot name="custom-task-content" v-bind="slotProps" />
        </template>
      </TaskRow>
    </template>
@@ -22,8 +22,16 @@ export interface TaskListColumnConfig {
 export interface TaskListConfig {
  columns?: TaskListColumnConfig[]
  showAllColumns?: boolean // 是否显示所有列，默认true
+  defaultWidth?: number // 默认展开宽度，单位像素，默认320px
+  minWidth?: number // 最小宽度，单位像素，默认280px，不能小于280px
+  maxWidth?: number // 最大宽度，单位像素，默认1160px
 }

+// 默认宽度配置
+export const DEFAULT_TASK_LIST_WIDTH = 320 // 默认展开宽度
+export const DEFAULT_TASK_LIST_MIN_WIDTH = 280 // 最小宽度
+export const DEFAULT_TASK_LIST_MAX_WIDTH = 1160 // 最大宽度
+
 // 默认列配置
 export const DEFAULT_TASK_LIST_COLUMNS: TaskListColumnConfig[] = [
  {