fix: 🐛body-style 不生效的问题

xpyjs · May 26, 2023 · de2b06c · de2b06c
1 parent 6e87705
commit de2b06c
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 34 deletions.
diff --git a/demo/App.vue b/demo/App.vue
@@ -805,14 +805,8 @@ export default defineComponent({
         };
       } else {
         this.levelColor = ['azure', 'cornsilk'];
-        this.headerStyle = {
-          bgColor: '',
-          textColor: ''
-        };
-        this.bodyStyle = {
-          bgColor: '',
-          textColor: ''
-        };
+        this.headerStyle = {};
+        this.bodyStyle = {};
       }
     },
 

diff --git a/src/components/common/GanttBody.vue b/src/components/common/GanttBody.vue
@@ -32,7 +32,7 @@
         :style="{
           width: `${ganttColumnWidth}px`,
           left: `${ganttColumnWidth * i}px`,
-          backgroundColor: '#ddd'
+          backgroundColor: $styleBox.bodyStyle?.weekendColor || '#ddd'
         }"
       ></div>
     </template>
@@ -44,7 +44,7 @@
       :style="{
         width: `${ganttColumnWidth}px`,
         left: `${todayLeft}px`,
-        backgroundColor: '#87CEFA'
+        backgroundColor: $styleBox.bodyStyle?.todayColor || '#87CEFA'
       }"
     ></div>
   </div>

diff --git a/src/components/common/Row.vue b/src/components/common/Row.vue
@@ -2,23 +2,25 @@
   <div
     :class="[
       'xg-row',
-      {
-        'xg-row__hover':
-          props.renderStyle && $param.hoverItem?.uuid === props.data?.uuid
-      },
-      {
-        'xg-row__select':
-          props.renderStyle && $param.selectItem?.uuid === props.data?.uuid
-      },
+      // {
+      //   'xg-row__hover':
+      //     props.renderStyle && $param.hoverItem?.uuid === props.data?.uuid
+      // },
+      // {
+      //   'xg-row__select':
+      //     props.renderStyle && $param.selectItem?.uuid === props.data?.uuid
+      // },
       { 'xg-row__only': !props.renderStyle }
     ]"
     :style="{
       top: `${(props.data?.flatIndex ?? 0) * rowHeight}px`,
       height: `${rowHeight}px`,
       borderWidth: props.renderStyle ? '1px' : 0,
-      backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] ?? undefined) : undefined,
+      color: $styleBox.headerStyle?.textColor,
+      // backgroundColor: props.renderStyle ? ($styleBox.levelColor[props.data!.level] || $styleBox.headerStyle?.bgColor) : undefined,
+      backgroundColor: bgColor,
       'border-color': $styleBox.borderColor
-      }"
+    }"
     @mouseenter.capture="onEnter"
     @mouseleave="onLeave"
     @click="onClick"
@@ -32,6 +34,8 @@ import useEvent from '@/composables/useEvent';
 import useParam from '@/composables/useParam';
 import useStyle from '@/composables/useStyle';
 import RowItem from '@/models/data/row';
+import { blend } from '@/utils/colors';
+import { computed } from 'vue';
 
 const props = defineProps({
   data: RowItem,
@@ -51,6 +55,23 @@ function onLeave() {
   $param.hoverItem = null;
 }
 
+const bgColor = computed(() => {
+  if (!props.renderStyle) return undefined;
+
+  let c =
+    $styleBox.levelColor[props.data!.level] || $styleBox.headerStyle?.bgColor;
+
+  if ($param.selectItem?.uuid === props.data?.uuid) {
+    c = blend('#ffffff99', $styleBox.bodyStyle?.selectColor ?? '#e0e0e0');
+  }
+
+  if ($param.hoverItem?.uuid === props.data?.uuid) {
+    c = blend('#ffffff99', $styleBox.bodyStyle?.hoverColor ?? '#f0f0f0');
+  }
+
+  return c;
+});
+
 const { EmitRowClick, EmitRowDblClick } = useEvent();
 let clicks = 0;
 const delay = 300;

diff --git a/src/typings/color.d.ts b/src/typings/color.d.ts
@@ -0,0 +1,13 @@
+declare interface HeaderOptions {
+  bgColor?: string;
+  textColor?: string;
+}
+
+declare interface BodyOptions {
+  todayColor?: string;
+  weekendColor?: string;
+  bgColor?: string;
+  textColor?: string;
+  hoverColor?: string;
+  selectColor?: string;
+}
diff --git a/src/typings/size.d.ts b/src/typings/size.d.ts
@@ -1,15 +1 @@
 declare type GanttColumnSize = 'small' | 'normal' | 'large';
-
-declare interface HeaderOptions {
-  bgColor?: string;
-  textColor?: string;
-}
-
-declare interface BodyOptions {
-  todayColor?: string;
-  weekendColor?: string;
-  bgColor?: string;
-  textColor?: string;
-  hoverColor?: string;
-  selectColor?: string;
-}