From 49e4a08f1080863391cc627579880b6bf5dc44df Mon Sep 17 00:00:00 2001
From: qiuchengw <qiuchengw@163.com>
Date: Wed, 24 Sep 2025 17:29:38 +0800
Subject: [PATCH] =?UTF-8?q?#ICZHXX=20=E5=B7=A6=E4=BE=A7=E7=9A=84table?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E5=92=8C=E5=88=97=E5=86=85=E5=AE=B9=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/HtmlContent.vue        |  7 +----
 src/components/TaskList.vue | 47 +------------------------------
 src/components/TaskRow.vue  | 46 +-----------------------------
 src/styles/list.css         | 56 +++++++++++++++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 97 deletions(-)
 create mode 100644 src/styles/list.css

diff --git a/demo/HtmlContent.vue b/demo/HtmlContent.vue
index cdb17c6..dc6a221 100644
--- a/demo/HtmlContent.vue
+++ b/demo/HtmlContent.vue
@@ -1,20 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import type { Task } from '../src/models/Task'
 
 interface Props {
   task: Task,
   type: 'task-row' | 'task-bar'
 }
-
 const props = withDefaults(defineProps<Props>(), {
   color: '#409eff',
   progress: 0,
 })
-console.error("props", props)
-function handleButtonClick() {
-  alert('hello')
-}
+// console.error('props', props)
 </script>
 
 <template>
diff --git a/src/components/TaskList.vue b/src/components/TaskList.vue
index 42ae72c..572ea6e 100644
--- a/src/components/TaskList.vue
+++ b/src/components/TaskList.vue
@@ -423,6 +423,7 @@ onUnmounted(() => {
 
 <style scoped>
 @import '../styles/theme-variables.css';
+@import '../styles/list.css';
 
 .task-list {
   width: 100%;
@@ -455,17 +456,6 @@ onUnmounted(() => {
   z-index: 10; /* 确保在滚动时保持在最上层 */
 }
 
-.col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-right: 1px solid var(--gantt-border-light);
-  box-sizing: border-box;
-  overflow: hidden;
-  font-weight: 400;
-}
-
 .task-list-header .col {
   justify-content: center;
   font-weight: 700;
@@ -474,41 +464,6 @@ onUnmounted(() => {
   border-right-color: var(--gantt-border-medium);
 }
 
-.col:last-child {
-  border-right: none;
-}
-
-.col-name {
-  flex: 2 0 300px;
-  min-width: 300px;
-  justify-content: flex-start;
-}
-
-.col-pre {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-assignee {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-date {
-  flex: 1.2 0 140px;
-  min-width: 140px;
-}
-
-.col-hours {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
-.col-progress {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
 .task-list-body {
   width: max-content;
   background: var(--gantt-bg-primary);
diff --git a/src/components/TaskRow.vue b/src/components/TaskRow.vue
index 71a5793..387160b 100644
--- a/src/components/TaskRow.vue
+++ b/src/components/TaskRow.vue
@@ -460,6 +460,7 @@ onUnmounted(() => {
 
 <style scoped>
 @import '../styles/theme-variables.css';
+@import '../styles/list.css';
 
 .task-row {
   display: flex;
@@ -611,51 +612,6 @@ onUnmounted(() => {
   margin-right: 4px;
 }
 
-.col {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border-right: 1px solid var(--gantt-border-light);
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.col:last-child {
-  border-right: none;
-}
-
-.col-name {
-  flex: 2 0 300px;
-  min-width: 300px;
-  justify-content: flex-start;
-}
-
-.col-pre {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-assignee {
-  flex: 1 0 120px;
-  min-width: 120px;
-}
-
-.col-date {
-  flex: 1.2 0 140px;
-  min-width: 140px;
-}
-
-.col-hours {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
-.col-progress {
-  flex: 1 0 100px;
-  min-width: 100px;
-}
-
 .task-name-text {
   display: inline-block;
   max-width: calc(100% - 24px);
diff --git a/src/styles/list.css b/src/styles/list.css
new file mode 100644
index 0000000..d136f01
--- /dev/null
+++ b/src/styles/list.css
@@ -0,0 +1,56 @@
+@import './theme-variables.css';
+
+.col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  border-right: 1px solid var(--gantt-border-light);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.col:last-child {
+  border-right: none;
+}
+
+.col-name {
+  flex: 2 0 300px;
+  min-width: 300px;
+  max-width: 300px;
+  justify-content: flex-start;
+}
+
+.col-pre {
+  flex: 1 0 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.col-assignee {
+  flex: 1 0 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.col-date {
+  flex: 1.2 0 140px;
+  min-width: 140px;
+  max-width: 140px;
+}
+
+.col-hours {
+  flex: 1 0 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
+.col-progress {
+  flex: 1 0 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
+.col:last-child {
+  border-right: none;
+}