From 44af23dd5faede5a5e48a5bb6f4dd6bd80a37b2e Mon Sep 17 00:00:00 2001
From: lijisanxiong <1518062161@qq.com>
Date: Thu, 26 Sep 2024 22:44:52 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E7=94=98=E7=89=B9=E9=83=A8?=
 =?UTF-8?q?=E4=BB=B6=E9=80=82=E9=85=8D=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/control/gantt/gantt.scss | 27 ++++++++++++++++++++++
 src/control/gantt/gantt.tsx  | 44 ++++++++++++++++++++++++++++++------
 2 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/control/gantt/gantt.scss b/src/control/gantt/gantt.scss
index 17f87bbb..78524cc6 100644
--- a/src/control/gantt/gantt.scss
+++ b/src/control/gantt/gantt.scss
@@ -3,6 +3,33 @@
   height: 100%;
 
   .xg-root {
+    // 背景
+    --gantt-bg: var(--ibiz-color-bg-1);
+    --gantt-bg-hover: var(--ibiz-color-disabled-border);
+    --gantt-bg-active: var(--ibiz-color-disabled-border);
+    --gantt-bg-checkmark: transparent;
+
+    // 阴影
+    --gantt-shadow: var(--ibiz-color-shadow);
+    --gantt-shadow-toolbar-item: var(--ibiz-color-shadow);
+
+    // 边框
+    --gantt-border: var(--ibiz-color-border);
+    --gantt-border-hover: var(--ibiz-color-disabled-border);
+    --gantt-border-dashed: var(--ibiz-color-disabled-border);
+    --gantt-border-toolbar-item: var(--ibiz-color-border);
+
+    // 文本
+    --gantt-text-0: var(--ibiz-color-text-0);
+    --gantt-text-3: var(--ibiz-color-text-3);
+
+    // 主要颜色
+    --gantt-white: var(--ibiz-color-white);
+    --gantt-black: var(--ibiz-color-black);
+
+    // 警示色
+    --gantt-warning: var(--ibiz-color-warning);
+
     .xg-table-body .xg-table-row {
       cursor: pointer;
 
diff --git a/src/control/gantt/gantt.tsx b/src/control/gantt/gantt.tsx
index f8ab21fe..bec1793a 100644
--- a/src/control/gantt/gantt.tsx
+++ b/src/control/gantt/gantt.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-restricted-syntax */
-import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
+import {
+  useControlController,
+  useNamespace,
+  useUIStore,
+} from '@ibiz-template/vue3-util';
 import {
   computed,
   defineComponent,
@@ -9,6 +13,7 @@ import {
   resolveComponent,
   VNode,
   h,
+  watch,
   onMounted,
   getCurrentInstance,
   ref,
@@ -118,19 +123,28 @@ export const GanttControl = defineComponent({
       return getComputedStyle(root).getPropertyValue(varName);
     };
 
-    const ganttStyle = computed(() => {
-      const style = {
+    const { UIStore } = useUIStore();
+    const ganttStyle = ref<IData>({});
+    const sliderColor = ref<IData>({});
+
+    // 计算甘特样式
+    const calcGanttStyle = () => {
+      return {
         primaryColor:
           c.state.ganttStyle?.primaryColor ||
           getVarValue('--ibiz-color-primary'),
         textColor:
           c.state.ganttStyle?.textColor ||
           getVarValue('--ibiz-color-primary-text'),
+        bgColor: getVarValue('--ibiz-color-bg-1'),
+        weekendColor: getVarValue('--ibiz-color-fill-2'),
+        todayColor: getVarValue('--ibiz-color-primary-light-active'),
+        borderColor: getVarValue('--ibiz-color-disabled-border'),
       };
-      return style;
-    });
+    };
 
-    const sliderColor = computed(() => {
+    // 计算滑块样式
+    const calcSliderColor = () => {
       const nodeColor: IData = {};
       c.model.detreeNodes?.forEach((node, index) => {
         const colorIndex = index % color.length;
@@ -139,7 +153,16 @@ export const GanttControl = defineComponent({
         )}, 1)`;
       });
       return nodeColor;
-    });
+    };
+
+    watch(
+      () => UIStore.theme,
+      () => {
+        ganttStyle.value = calcGanttStyle();
+        sliderColor.value = calcSliderColor();
+      },
+      { immediate: true },
+    );
 
     /**
      * 部件是否在加载状态
@@ -694,6 +717,13 @@ export const GanttControl = defineComponent({
           onMoveSlider={this.onSliderMove}
           primaryColor={this.ganttStyle.primaryColor}
           headerStyle={{ textColor: this.ganttStyle.textColor }}
+          borderColor={this.ganttStyle.borderColor}
+          bodyStyle={{
+            todayColor: this.ganttStyle.todayColor,
+            weekendColor: this.ganttStyle.weekendColor,
+            bgColor: this.ganttStyle.bgColor,
+            selectColor: this.ganttStyle.weekendColor,
+          }}
         >
           {{
             default: () => {
-- 
Gitee