vxe-gantt 3.2.5 → 3.2.8

package/packages/gantt/src/gantt-chart.ts

@@ -2,8 +2,8 @@ import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
-import { getCellRestHeight, hasMilestoneTask, gettaskType } from './util'
-import { getStringValue, isEnableConf } from '../../ui/src/utils'
+import { getCellRestHeight, hasMilestoneTask, getTaskType, hasSubviewTask } from './util'
+import { getStringValue, isEnableConf, hasEnableConf } from '../../ui/src/utils'
 
 import type { VxeComponentStyleType } from 'vxe-pc-ui'
 import type { TableInternalData, TableReactData, VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from 'vxe-table'
@@ -38,7 +38,7 @@ export default defineVxeComponent({
     //
     // Render
     //
-    renderTaskBar (h: CreateElement, $xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, row: any, rowid: string, rowIndex: number, $rowIndex: number, _rowIndex: number) {
+    renderTaskBar (h: CreateElement, $xeTable: VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods, row: any, rowid: string, rowIndex: number, $rowIndex: number, _rowIndex: number, rowChildren: any[], isExpandTree: boolean) {
       const _vm = this
       const $xeGantt = _vm.$xeGantt
 
@@ -56,13 +56,14 @@ export default defineVxeComponent({
       const ganttSlots = $xeGantt.$scopedSlots
       const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar']
 
-      const { taskBarMilestoneConfig } = ganttProps
+      const { taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
       const { activeLink, activeBarRowid } = ganttReactData
       const titleField = $xeGantt.computeTitleField
       const progressField = $xeGantt.computeProgressField
       const typeField = $xeGantt.computeTypeField
       const taskBarOpts = $xeGantt.computeTaskBarOpts
       const taskBarMilestoneOpts = $xeGantt.computeTaskBarMilestoneOpts
+      const taskBarSubviewOpts = $xeGantt.computeTaskBarSubviewOpts
       const scaleUnit = $xeGantt.computeScaleUnit
       const barParams = { $gantt: $xeGantt, row, scaleType: scaleUnit }
       const { showProgress, showContent, contentMethod, barStyle, moveable, showTooltip } = taskBarOpts
@@ -75,8 +76,9 @@ export default defineVxeComponent({
 
       let title = getStringValue(XEUtils.get(row, titleField))
       const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
-      const typeValue = gettaskType(XEUtils.get(row, typeField))
-      const isMilestone = !!(taskBarMilestoneConfig && hasMilestoneTask(typeValue))
+      const renderTaskType = getTaskType(XEUtils.get(row, typeField))
+      const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType))
+      const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType))
 
       const vbStyle: VxeComponentStyleType = {}
       const vpStyle: VxeComponentStyleType = {
@@ -148,7 +150,92 @@ export default defineVxeComponent({
           }, $xeGantt.callSlot(taskBarSlot, barParams, h))
         )
       } else {
-        if (isMilestone) {
+        if (isSubview && rowChildren && rowChildren.length) {
+          if (isExpandTree) {
+            if (taskBarSubviewOpts.showOverview) {
+              cbVNs.push(
+                h('div', {
+                  key: 'vcso',
+                  class: ['vxe-gantt-view--chart-subview-wrapper is--overview', {
+                    'is--round': round,
+                    'is--move': moveable
+                  }]
+                }, [
+                  h('div', {
+                    key: rowid,
+                    attrs: {
+                      rowid: rowid
+                    },
+                    class: 'vxe-gantt-view--chart-subview-bar'
+                  }, [
+                    h('div', {
+                      class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                    }, [
+                      showContent
+                        ? h('div', {
+                          class: 'vxe-gantt-view--chart-content'
+                        }, title)
+                        : renderEmptyElement($xeGantt)
+                    ])
+                  ])
+                ])
+              )
+            }
+          } else {
+            cbVNs.push(
+              h('div', {
+                key: 'vcsc',
+                class: ['vxe-gantt-view--chart-subview-wrapper is--inline', {
+                  'is--round': round,
+                  'is--move': moveable
+                }]
+              }, rowChildren.map(childRow => {
+                const childRowid = $xeTable.getRowid(childRow)
+                let childTitle = getStringValue(XEUtils.get(childRow, titleField))
+                const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
+                const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
+
+                const vpcStyle: VxeComponentStyleType = {
+                  width: `${childProgressValue || 0}%`
+                }
+                if (isBarRowStyle) {
+                  const { completedBgColor } = barStyObj
+                  if (completedBgColor) {
+                    vpcStyle.backgroundColor = completedBgColor
+                  }
+                }
+
+                if (contentMethod) {
+                  childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }))
+                }
+
+                return h('div', {
+                  key: childRowid,
+                  attrs: {
+                    rowid: childRowid
+                  },
+                  class: ['vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`]
+                }, [
+                  h('div', {
+                    class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                  }, [
+                    showProgress
+                      ? h('div', {
+                        class: 'vxe-gantt-view--chart-progress',
+                        style: vpcStyle
+                      })
+                      : renderEmptyElement($xeGantt),
+                    showContent
+                      ? h('div', {
+                        class: 'vxe-gantt-view--chart-content'
+                      }, childTitle)
+                      : renderEmptyElement($xeGantt)
+                  ])
+                ])
+              }))
+            )
+          }
+        } else if (isMilestone) {
           const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
           const tbmParams = { $gantt: $xeGantt, row }
           cbVNs.push(
@@ -181,14 +268,12 @@ export default defineVxeComponent({
             }, [
               showProgress
                 ? h('div', {
-                  key: 'vcp',
                   class: 'vxe-gantt-view--chart-progress',
                   style: vpStyle
                 })
                 : renderEmptyElement($xeGantt),
               showContent
                 ? h('div', {
-                  key: 'vcc',
                   class: 'vxe-gantt-view--chart-content'
                 }, title)
                 : renderEmptyElement($xeGantt)
@@ -202,7 +287,7 @@ export default defineVxeComponent({
         attrs: {
           rowid
         },
-        class: ['vxe-gantt-view--chart-row', `is--${gettaskType(typeValue)}`, {
+        class: ['vxe-gantt-view--chart-row', `is--${renderTaskType}`, {
           'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
           'is--round': round,
           'is--move': moveable
@@ -217,7 +302,7 @@ export default defineVxeComponent({
         }
       }, [
         h('div', {
-          class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`, {
+          class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${renderTaskType}`, {
             'is--active': activeBarRowid === rowid,
             'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
           }],
@@ -268,16 +353,17 @@ export default defineVxeComponent({
           rowIndex = rowRest.index
           _rowIndex = rowRest._index
         }
-        trVNs.push(_vm.renderTaskBar(h, $xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex))
         let isExpandTree = false
         let rowChildren: any[] = []
 
-        if (treeConfig && !scrollYLoad && !transform) {
+        if (treeConfig) {
           rowChildren = row[childrenField]
           isExpandTree = !!treeExpandedFlag && rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid]
         }
+
+        trVNs.push(_vm.renderTaskBar(h, $xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex, rowChildren, isExpandTree))
         // 如果是树形表格
-        if (isExpandTree) {
+        if (treeConfig && isExpandTree && !scrollYLoad && !transform) {
           trVNs.push(..._vm.renderTaskRows(h, $xeTable, rowChildren))
         }
       })

package/packages/gantt/src/gantt-view.ts

@@ -2,7 +2,7 @@ import { VNode, CreateElement } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 import { setScrollTop, setScrollLeft, removeClass, addClass, hasClass } from '../../ui/src/dom'
-import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask } from './util'
+import { getRefElem, getStandardGapTime, getTaskBarLeft, getTaskBarWidth, hasMilestoneTask, getTaskType, hasSubviewTask } from './util'
 import XEUtils from 'xe-utils'
 import GanttViewHeaderComponent from './gantt-header'
 import GanttViewBodyComponent from './gantt-body'
@@ -556,14 +556,23 @@ function handleParseColumn ($xeGanttView: VxeGanttViewConstructor & VxeGanttView
         const rowid = $xeTable.getRowid(row)
         let startValue = XEUtils.get(row, startField)
         let endValue = XEUtils.get(row, endField)
-        const isMilestone = hasMilestoneTask(XEUtils.get(row, typeField))
+        const renderTaskType = getTaskType(XEUtils.get(row, typeField))
+        const isMilestone = hasMilestoneTask(renderTaskType)
+        const isSubview = hasSubviewTask(renderTaskType)
         if (isMilestone) {
           if (!startValue) {
             startValue = endValue
           }
           endValue = startValue
         }
-        if (startValue && endValue) {
+        if (isSubview) {
+          ctMaps[rowid] = {
+            row,
+            rowid,
+            oLeftSize: 0,
+            oWidthSize: 0
+          }
+        } else if (startValue && endValue) {
           const { offsetLeftSize, offsetWidthSize } = renderFn(startValue, endValue)
           ctMaps[rowid] = {
             row,
@@ -698,7 +707,36 @@ function calcScrollbar ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPriv
   }
 }
 
-function updateTaskChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
+function handleSubTaskMinMaxSize ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods, $xeTable: VxeTableConstructor, list: any[]) {
+  const $xeGantt = $xeGanttView.$xeGantt
+  const internalData = $xeGanttView.internalData
+
+  const { chartMaps } = internalData
+  const treeOpts = $xeTable.computeTreeOpts
+  const childrenField = treeOpts.children || treeOpts.childrenField
+
+  const typeField = $xeGantt.computeTypeField
+  let minChildLeftSize = 0
+  let maxChildLeftSize = 0
+  XEUtils.eachTree(list, childRow => {
+    const childRowid = $xeTable.getRowid(childRow)
+    const renderTaskType = XEUtils.get(childRow, typeField)
+    if (hasSubviewTask(renderTaskType)) {
+      return
+    }
+    const childChartRest = childRowid ? chartMaps[childRowid] : null
+    if (childChartRest) {
+      maxChildLeftSize = Math.max(maxChildLeftSize, childChartRest.oLeftSize + childChartRest.oWidthSize)
+      minChildLeftSize = minChildLeftSize ? Math.min(minChildLeftSize, childChartRest.oLeftSize) : childChartRest.oLeftSize
+    }
+  }, { children: childrenField })
+  return {
+    minSize: minChildLeftSize,
+    maxSize: maxChildLeftSize
+  }
+}
+
+function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivateMethods) {
   const $xeGantt = $xeGanttView.$xeGantt
   const reactData = $xeGanttView.reactData
   const internalData = $xeGanttView.internalData
@@ -710,6 +748,8 @@ function updateTaskChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPr
   const { elemStore, chartMaps } = internalData
   const chartWrapper = getRefElem(elemStore['main-chart-task-wrapper'])
   if (chartWrapper && $xeTable) {
+    const treeOpts = $xeTable.computeTreeOpts
+    const childrenField = treeOpts.children || treeOpts.childrenField
     XEUtils.arrayEach(chartWrapper.children, (rowEl) => {
       const barEl = rowEl.children[0] as HTMLDivElement
       if (!barEl) {
@@ -720,9 +760,51 @@ function updateTaskChart ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPr
         return
       }
       const chartRest = rowid ? chartMaps[rowid] : null
-      barEl.style.left = `${getTaskBarLeft(chartRest, viewCellWidth)}px`
-      if (!hasClass(barEl, 'is--milestone')) {
-        barEl.style.width = `${getTaskBarWidth(chartRest, viewCellWidth)}px`
+      const row = chartRest ? chartRest.row : null
+      // 子任务视图
+      if (hasClass(barEl, 'is--subview')) {
+        const childWrapperEl = barEl.firstElementChild as HTMLDivElement
+        if (childWrapperEl) {
+          // 行内展示
+          if (hasClass(childWrapperEl, 'is--inline')) {
+            XEUtils.arrayEach(childWrapperEl.children, (childEl) => {
+              const childBarEl = childEl as HTMLDivElement
+              const childRowid = childBarEl.getAttribute('rowid') || ''
+              const childChartRest = childRowid ? chartMaps[childRowid] : null
+              if (childChartRest) {
+                const childRow = childChartRest.row
+                // 如果是子视图
+                if (hasClass(childBarEl, 'is--subview')) {
+                  const subChildren: any[] = childRow[childrenField]
+                  const { minSize: minChildLeftSize, maxSize: maxChildLeftSize } = handleSubTaskMinMaxSize($xeGanttView, $xeTable, subChildren)
+                  childBarEl.style.left = `${viewCellWidth * minChildLeftSize}px`
+                  childBarEl.style.width = `${viewCellWidth * (maxChildLeftSize - minChildLeftSize)}px`
+                } else {
+                  childBarEl.style.left = `${getTaskBarLeft(childChartRest, viewCellWidth)}px`
+                  if (!hasClass(childBarEl, 'is--milestone')) {
+                    // 里程碑不需要宽度
+                    childBarEl.style.width = `${getTaskBarWidth(childChartRest, viewCellWidth)}px`
+                  }
+                }
+              }
+            })
+          } else {
+            // 如果展开子任务
+            const childBarEl = childWrapperEl.firstElementChild as HTMLDivElement
+            if (childBarEl) {
+              const rowChildren: any[] = row ? row[childrenField] : []
+              const { minSize: minChildLeftSize, maxSize: maxChildLeftSize } = handleSubTaskMinMaxSize($xeGanttView, $xeTable, rowChildren)
+              childBarEl.style.left = `${viewCellWidth * minChildLeftSize}px`
+              childBarEl.style.width = `${viewCellWidth * (maxChildLeftSize - minChildLeftSize)}px`
+            }
+          }
+        }
+      } else {
+        barEl.style.left = `${getTaskBarLeft(chartRest, viewCellWidth)}px`
+        // 里程碑不需要宽度
+        if (!hasClass(barEl, 'is--milestone')) {
+          barEl.style.width = `${getTaskBarWidth(chartRest, viewCellWidth)}px`
+        }
       }
     })
   }
@@ -859,7 +941,7 @@ function updateStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttViewPrivat
   reactData.scrollXWidth = viewTableWidth
 
   return Promise.all([
-    updateTaskChart($xeGanttView),
+    updateTaskChartStyle($xeGanttView),
     $xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null
   ])
 }

package/packages/gantt/src/gantt.ts

@@ -2,7 +2,7 @@ import { PropType, VNode, CreateElement, Component } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { VxeUI } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
-import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils'
+import { getLastZIndex, nextZIndex, isEnableConf, hasEnableConf, formatText } from '../../ui/src/utils'
 import { getOffsetHeight, getPaddingTopBottomSize, getDomNode, toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
@@ -174,6 +174,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     taskLinkConfig: Object as PropType<VxeGanttPropTypes.TaskLinkConfig>,
     taskBarConfig: Object as PropType<VxeGanttPropTypes.TaskBarConfig>,
     taskBarMilestoneConfig: Object as PropType<VxeGanttPropTypes.TaskBarMilestoneConfig>,
+    taskBarSubviewConfig: Object as PropType<VxeGanttPropTypes.TaskBarSubviewConfig>,
     taskBarTooltipConfig: Object as PropType<VxeGanttPropTypes.TaskBarTooltipConfig>,
     taskSplitConfig: Object as PropType<VxeGanttPropTypes.TaskSplitConfig>,
     taskBarResizeConfig: Object as PropType<VxeGanttPropTypes.TaskBarResizeConfig>,
@@ -299,6 +300,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return Object.assign({}, getConfig().gantt.taskBarMilestoneConfig, props.taskBarMilestoneConfig)
     },
+    computeTaskBarSubviewOpts () {
+      const $xeGantt = this
+      const props = $xeGantt
+
+      return Object.assign({}, getConfig().gantt.taskBarSubviewConfig, props.taskBarSubviewConfig)
+    },
     computeTaskBarTooltipOpts () {
       const $xeGantt = this
       const props = $xeGantt
@@ -404,12 +411,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeGantt
       const reactData = $xeGantt.reactData
 
-      const { height, maxHeight } = props
+      const { height, maxHeight, taskBarSubviewConfig } = props
       const { isZMax, tZindex } = reactData
       const taskViewOpts = $xeGantt.computeTaskViewOpts as VxeGanttPropTypes.TaskViewConfig
       const { tableStyle } = taskViewOpts
       const taskBarOpts = $xeGantt.computeTaskBarOpts as VxeGanttPropTypes.TaskBarConfig
       const { barStyle } = taskBarOpts
+      const taskBarSubviewOpts = $xeGantt.computeTaskBarSubviewOpts
       const stys: VxeComponentStyleType = {}
       if (isZMax) {
         stys.zIndex = tZindex
@@ -422,13 +430,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       }
       if (barStyle && !XEUtils.isFunction(barStyle)) {
-        const { bgColor, completedBgColor } = barStyle
+        const { bgColor, completedBgColor, overviewBgColor } = barStyle
         if (bgColor) {
           stys['--vxe-ui-gantt-view-task-bar-background-color'] = bgColor
         }
         if (completedBgColor) {
           stys['--vxe-ui-gantt-view-task-bar-completed-background-color'] = completedBgColor
         }
+        if (overviewBgColor && hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts)) {
+          stys['--vxe-ui-gantt-view-task-bar-overview-background-color'] = overviewBgColor
+        }
       }
       if (tableStyle) {
         const { width: defTbWidth } = tableStyle

package/packages/gantt/src/static.ts

@@ -21,11 +21,15 @@ export enum VxeGanttDependencyType {
 }
 
 /**
- * 任务类型
+ * 任务渲染类型
  */
 export enum VxeGanttTaskType {
   /**
-   * 里程碑
+   * 里程碑类型，该类型节点不需要结束日期
    */
-  Milestone = 'milestone'
+  Milestone = 'milestone',
+  /**
+   * 子视图类型，该类型会将子任务渲染到一行，无需开始日期和结束日期
+   */
+  Subview = 'subview'
 }

package/packages/gantt/src/util.ts

@@ -1,4 +1,4 @@
-import type { VxeGanttDefines } from '../../../types'
+import type { VxeGanttDefines, VxeGanttTaskType } from '../../../types'
 import type { VxeTableDefines, VxeTablePropTypes } from 'vxe-table'
 
 export function getRefElem (refEl: any) {
@@ -29,15 +29,19 @@ export function getTaskBarLeft (chartRest: VxeGanttDefines.RowCacheItem | null,
 }
 
 export function getTaskBarWidth (chartRest: VxeGanttDefines.RowCacheItem | null, viewCellWidth: number) {
-  return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0)
+  return chartRest && chartRest.oWidthSize ? Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0) : 0
 }
 
-const taskTypeMaps: Record<string, boolean> = {
-  milestone: true
+const taskTypeMaps: Record<VxeGanttTaskType, boolean> = {
+  milestone: true,
+  subview: true
 }
 export function hasMilestoneTask (type: string) {
-  return taskTypeMaps[type]
+  return type === 'milestone'
 }
-export function gettaskType (type: string) {
-  return taskTypeMaps[type] ? type : 'default'
+export function hasSubviewTask (type: string) {
+  return type === 'subview'
+}
+export function getTaskType (type: string) {
+  return taskTypeMaps[type as VxeGanttTaskType] ? type as VxeGanttTaskType : 'default'
 }

package/packages/ui/index.ts

@@ -95,6 +95,9 @@ setConfig({
       resize: true,
       showCollapseTableButton: true,
       showCollapseTaskButton: true
+    },
+    taskBarSubviewConfig: {
+      // showOverview: false
     }
   }
 })

package/packages/ui/src/utils.ts

@@ -8,6 +8,10 @@ export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
 
+export function hasEnableConf (conf: any, opts: any): boolean {
+  return opts && (conf ? opts.enabled !== false : opts.enabled)
+}
+
 export function isEmptyValue (cellValue: any) {
   return cellValue === null || cellValue === undefined || cellValue === ''
 }

package/styles/components/gantt-module/gantt-chart.scss

@@ -13,7 +13,8 @@
   width: 100%;
   height: 0;
   &.row--pending {
-    .vxe-gantt-view--chart-bar {
+    .vxe-gantt-view--chart-bar,
+    .vxe-gantt-view--chart-subview-bar {
       color: var(--vxe-ui-font-disabled-color);
       opacity: 0.5;
       text-decoration: line-through;
@@ -35,7 +36,30 @@
     }
   }
 }
+.vxe-gantt-view--chart-subview-wrapper {
+  &.is--round {
+    & > .vxe-gantt-view--chart-subview-bar {
+      border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      .vxe-gantt-view--chart-subview-bar-content-wrapper {
+        border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+      }
+      &:hover {
+        &::after {
+          border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+        }
+      }
+    }
+  }
+  &.is--overview {
+    & > .vxe-gantt-view--chart-subview-bar {
+      color: #ffffff;
+      background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+    }
+  }
+}
+
 .vxe-gantt-view--chart-bar,
+.vxe-gantt-view--chart-subview-bar,
 .vxe-gantt-view--chart-custom-bar {
   display: flex;
   flex-direction: row;
@@ -48,20 +72,27 @@
     color: #ffffff;
     background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
   }
+  &.is--subview {
+    color: #ffffff;
+    background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+  }
 }
 .vxe-gantt-view--chart-bar-content-wrapper,
-.vxe-gantt-view--chart-custom-bar-content-wrapper {
+.vxe-gantt-view--chart-custom-bar-content-wrapper,
+.vxe-gantt-view--chart-subview-bar-content-wrapper {
   width: 100%;
   overflow: hidden;
 }
-.vxe-gantt-view--chart-bar-content-wrapper {
+.vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-subview-bar-content-wrapper {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.vxe-gantt-view--chart-bar {
+.vxe-gantt-view--chart-bar,
+.vxe-gantt-view--chart-subview-bar {
   align-items: center;
   height: var(--vxe-ui-gantt-view-chart-bar-height);
   &.is--default {

package/styles/theme/base.scss

@@ -8,6 +8,7 @@
   --vxe-ui-gantt-view-task-bar-border-radius: calc(var(--vxe-ui-gantt-view-split-bar-height) / 2);
   --vxe-ui-gantt-view-task-bar-background-color: var(--vxe-ui-font-primary-lighten-color);
   --vxe-ui-gantt-view-task-bar-completed-background-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-gantt-view-task-bar-overview-background-color: var(--vxe-ui-font-primary-darken-color);
   --vxe-ui-gantt-view-task-line-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-gantt-view-task-line-width: 2px;
   --vxe-ui-gantt-view-task-line-arrow-width: 5;