vxe-gantt 4.1.18 → 4.1.20

package/README.md

@@ -54,9 +54,26 @@
 
 [👀 Vxe Gantt](https://gantt.vxeui.com/)  
 
-* [x] gantt 甘特图
-* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 依赖线
-* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 任务条拖拽
+* [x] 左侧渲染表格
+* [x] 右侧渲染视图
+* [x] 任务视图
+  * [x] 年视图
+  * [x] 季度视图
+  * [x] 月视图
+  * [x] 周视图
+  * [x] 星期视图
+  * [x] 日视图
+  * [x] 小数视图
+  * [x] 分钟视图
+  * [x] 秒视图
+* [x] 子任务
+* [x] 日期轴
+* [x] 里程碑
+* [x] 虚拟滚动
+* [x] CSS 变量主题
+* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 依赖线连接线
+* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 任务条可拖拽
+* [x] ([企业版](https://vxetable.cn/pluginDocs/)) 可视化创建依赖线
 
 ## 安装
 

package/es/gantt/src/emits.js

@@ -14,5 +14,8 @@ export const ganttEmits = [
     'task-move-end',
     'task-resize-start',
     'task-resize-drag',
-    'task-resize-end'
+    'task-resize-end',
+    'task-link-click',
+    'task-link-dblclick',
+    'task-link-remove'
 ];

package/es/gantt/src/gantt-body.js

@@ -129,7 +129,7 @@ export default defineVxeComponent({
             const scaleUnit = computeScaleUnit.value;
             const taskViewOpts = computeTaskViewOpts.value;
             const { viewStyle } = taskViewOpts;
-            const { rowClassName, rowStyle } = viewStyle || {};
+            const { rowClassName, rowStyle, cellClassName, cellStyle } = viewStyle || {};
             const { tableColumn, scrollYLoad } = reactData;
             const trVNs = [];
             tableData.forEach((row, $rowIndex) => {
@@ -172,7 +172,7 @@ export default defineVxeComponent({
                     $rowIndex,
                     _rowIndex
                 };
-                trVNs.push(h('tr', Object.assign({ key: treeConfig ? rowid : $rowIndex, class: [
+                trVNs.push(h('tr', Object.assign({ key: rowClassName || rowStyle || cellClassName || cellStyle ? rowid : $rowIndex, class: [
                         'vxe-gantt-view--body-row',
                         {
                             'row--stripe': stripe && (_rowIndex + 1) % 2 === 0,

package/es/gantt/src/gantt-chart.js

@@ -12,15 +12,14 @@ export default defineVxeComponent({
     setup() {
         const $xeGantt = inject('$xeGantt', {});
         const $xeGanttView = inject('$xeGanttView', {});
-        const { props: ganttProps, internalData: ganttInternalData } = $xeGantt;
+        const { props: ganttProps, reactData: ganttReactData, internalData: ganttInternalData } = $xeGantt;
         const { reactData: ganttViewReactData, internalData: ganttViewInternalData } = $xeGanttView;
         const { computeProgressField, computeTitleField, computeTypeField, computeTaskBarOpts, computeScaleUnit, computeTaskLinkOpts, computeTaskBarMilestoneOpts } = $xeGantt.getComputeMaps();
         const refElem = ref();
         const refTaskWrapperElem = ref();
-        const reflineWrapperElem = ref();
+        const refChartBeforeWrapperElem = ref();
+        const refChartAfterWrapperElem = ref();
         const renderTaskBar = ($xeTable, row, rowid, rowIndex, $rowIndex, _rowIndex) => {
-            const tableProps = $xeTable.props;
-            const { treeConfig } = tableProps;
             const tableReactData = $xeTable.reactData;
             const { resizeHeightFlag } = tableReactData;
             const tableInternalData = $xeTable.internalData;
@@ -32,6 +31,7 @@ export default defineVxeComponent({
             const ganttSlots = $xeGantt.context.slots;
             const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar'];
             const { taskBarMilestoneConfig } = ganttProps;
+            const { activeLink, activeBarRowid } = ganttReactData;
             const titleField = computeTitleField.value;
             const progressField = computeProgressField.value;
             const typeField = computeTypeField.value;
@@ -75,21 +75,9 @@ export default defineVxeComponent({
                 rowIndex,
                 _rowIndex
             };
-            const ons = {
-                onClick(evnt) {
-                    $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-                },
-                onDblclick(evnt) {
-                    $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-                },
-                onMousedown(evnt) {
-                    if ($xeGantt.handleTaskBarMousedownEvent) {
-                        $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-                    }
-                }
-            };
+            const ctOns = {};
             if (showTooltip) {
-                ons.onMouseover = (evnt) => {
+                ctOns.onMouseover = (evnt) => {
                     const { dragBarRow } = ganttInternalData;
                     const ttParams = Object.assign({ $event: evnt }, ctParams);
                     if (!dragBarRow) {
@@ -97,7 +85,7 @@ export default defineVxeComponent({
                     }
                     $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
                 };
-                ons.onMouseleave = (evnt) => {
+                ctOns.onMouseleave = (evnt) => {
                     const { dragBarRow } = ganttInternalData;
                     const ttParams = Object.assign({ $event: evnt }, ctParams);
                     if (!dragBarRow) {
@@ -112,23 +100,19 @@ export default defineVxeComponent({
                     isMilestone,
                     title,
                     vbStyle,
-                    vpStyle
+                    vpStyle,
+                    rowid,
+                    ctOns
                 });
             }
             else if (taskBarSlot) {
-                cbVNs.push(h('div', {
-                    key: 'cbc',
-                    class: 'vxe-gantt-view--chart-custom-bar-content'
-                }, $xeGantt.callSlot(taskBarSlot, barParams)));
+                cbVNs.push(h('div', Object.assign({ key: 'cbc', class: 'vxe-gantt-view--chart-custom-bar-content-wrapper' }, ctOns), $xeGantt.callSlot(taskBarSlot, barParams)));
             }
             else {
                 if (isMilestone) {
                     const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts;
                     const tbmParams = { $gantt: $xeGantt, row };
-                    cbVNs.push(h('div', {
-                        key: 'vcm',
-                        class: 'vxe-gantt-view--chart-milestone-wrapper'
-                    }, [
+                    cbVNs.push(h('div', Object.assign({ key: 'vcm', class: 'vxe-gantt-view--chart-milestone-wrapper' }, ctOns), [
                         h('div', {
                             class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
                             style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
@@ -145,22 +129,25 @@ export default defineVxeComponent({
                     ]));
                 }
                 else {
-                    cbVNs.push(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));
+                    cbVNs.push(h('div', Object.assign({ key: 'vbc', class: 'vxe-gantt-view--chart-bar-content-wrapper' }, ctOns), [
+                        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)
+                    ]));
                 }
             }
             return h('div', {
-                key: treeConfig ? rowid : $rowIndex,
+                key: rowid,
                 rowid,
                 class: ['vxe-gantt-view--chart-row', `is--${gettaskType(typeValue)}`, {
                         'is--round': round,
@@ -173,7 +160,25 @@ export default defineVxeComponent({
                     $xeGantt.handleTaskBarContextmenuEvent(evnt, ctParams);
                 }
             }, [
-                h('div', Object.assign({ class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`], style: vbStyle, rowid }, ons), cbVNs)
+                h('div', {
+                    class: [taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', `is--${gettaskType(typeValue)}`, {
+                            'is--active': activeBarRowid === rowid,
+                            'active--link': activeLink && (rowid === `${activeLink.from}` || rowid === `${activeLink.to}`)
+                        }],
+                    style: vbStyle,
+                    rowid,
+                    onClick(evnt) {
+                        $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+                    },
+                    onDblclick(evnt) {
+                        $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+                    },
+                    onMousedown(evnt) {
+                        if ($xeGantt.handleTaskBarMousedownEvent) {
+                            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                        }
+                    }
+                }, cbVNs)
             ]);
         };
         const renderTaskRows = ($xeTable, tableData) => {
@@ -214,38 +219,55 @@ export default defineVxeComponent({
         };
         const renderVN = () => {
             const $xeTable = ganttViewInternalData.xeTable;
+            const { dragLinkFromStore } = ganttReactData;
             const { tableData } = ganttViewReactData;
             const taskLinkOpts = computeTaskLinkOpts.value;
-            const { showArrow } = taskLinkOpts;
+            const taskBarOpts = computeTaskBarOpts.value;
+            const { isCurrent, isHover } = taskLinkOpts;
+            const { linkCreatable } = taskBarOpts;
             return h('div', {
                 ref: refElem,
-                class: 'vxe-gantt-view--chart-wrapper'
+                class: ['vxe-gantt-view--chart-wrapper', {
+                        'is--cl-drag': dragLinkFromStore.rowid
+                    }]
             }, [
-                $xeGantt.renderGanttTaskLines
+                $xeGantt.renderGanttTaskChartBefores
                     ? h('div', {
-                        ref: reflineWrapperElem,
-                        class: ['vxe-gantt-view--chart-line-wrapper', {
-                                'show-arrow': showArrow
+                        ref: refChartBeforeWrapperElem,
+                        class: ['vxe-gantt-view--chart-before-wrapper', {
+                                'link--current': isCurrent,
+                                'link--hover': isHover
                             }]
-                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskLines() : [])
+                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartBefores() : [])
                     : renderEmptyElement($xeGantt),
                 h('div', {
                     ref: refTaskWrapperElem,
-                    class: 'vxe-gantt-view--chart-task-wrapper'
-                }, $xeTable ? renderTaskRows($xeTable, tableData) : [])
+                    class: ['vxe-gantt-view--chart-task-wrapper', {
+                            'link--current': isCurrent,
+                            'link--create': linkCreatable
+                        }]
+                }, $xeTable ? renderTaskRows($xeTable, tableData) : []),
+                $xeGantt.renderGanttTaskChartAfters
+                    ? h('div', {
+                        ref: refChartAfterWrapperElem,
+                        class: 'vxe-gantt-view--chart-after-wrapper'
+                    }, $xeTable && isEnableConf(taskLinkOpts) ? $xeGantt.renderGanttTaskChartAfters() : [])
+                    : renderEmptyElement($xeGantt)
             ]);
         };
         onMounted(() => {
             const { elemStore } = ganttViewInternalData;
             const prefix = 'main-chart-';
             elemStore[`${prefix}task-wrapper`] = refTaskWrapperElem;
-            elemStore[`${prefix}line-wrapper`] = reflineWrapperElem;
+            elemStore[`${prefix}before-wrapper`] = refChartBeforeWrapperElem;
+            elemStore[`${prefix}after-wrapper`] = refChartAfterWrapperElem;
         });
         onUnmounted(() => {
             const { elemStore } = ganttViewInternalData;
             const prefix = 'main-chart-';
             elemStore[`${prefix}task-wrapper`] = null;
-            elemStore[`${prefix}line-wrapper`] = null;
+            elemStore[`${prefix}before-wrapper`] = null;
+            elemStore[`${prefix}after-wrapper`] = null;
         });
         return renderVN;
     }

package/es/gantt/src/gantt-view.js

@@ -897,7 +897,7 @@ export default defineVxeComponent({
             reactData.scrollXWidth = viewTableWidth;
             return Promise.all([
                 updateTaskChart(),
-                $xeGantt.handleUpdateTaskLink ? $xeGantt.handleUpdateTaskLink($xeGanttView) : null
+                $xeGantt.handleUpdateTaskLinkStyle ? $xeGantt.handleUpdateTaskLinkStyle($xeGanttView) : null
             ]);
         };
         const handleRecalculateStyle = () => {
@@ -1046,10 +1046,15 @@ export default defineVxeComponent({
             if (scrollXSpaceEl) {
                 scrollXSpaceEl.style.width = `${scrollXWidth}px`;
             }
-            const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper']);
-            const svgElem = lineWrapper ? lineWrapper.firstElementChild : null;
-            if (svgElem) {
-                svgElem.style.width = `${scrollXWidth}px`;
+            const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
+            const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
+            if (beforeSvgElem) {
+                beforeSvgElem.style.width = `${scrollXWidth}px`;
+            }
+            const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
+            const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
+            if (afterSvgElem) {
+                afterSvgElem.style.width = `${scrollXWidth}px`;
             }
             calcScrollbar();
             return nextTick();
@@ -1102,10 +1107,15 @@ export default defineVxeComponent({
             if (scrollYSpaceEl) {
                 scrollYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
             }
-            const lineWrapper = getRefElem(elemStore['main-chart-line-wrapper']);
-            const svgElem = lineWrapper ? lineWrapper.firstElementChild : null;
-            if (svgElem) {
-                svgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+            const beforeWrapper = getRefElem(elemStore['main-chart-before-wrapper']);
+            const beforeSvgElem = beforeWrapper ? beforeWrapper.firstElementChild : null;
+            if (beforeSvgElem) {
+                beforeSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
+            }
+            const afterWrapper = getRefElem(elemStore['main-chart-after-wrapper']);
+            const afterSvgElem = afterWrapper ? afterWrapper.firstElementChild : null;
+            if (afterSvgElem) {
+                afterSvgElem.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
             }
             reactData.scrollYTop = scrollYTop;
             reactData.scrollYHeight = scrollYHeight;

package/es/gantt/src/gantt.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, provide, reactive, onUnmounted, watch, nextTick, onMounted } from 'vue';
+import { h, ref, computed, provide, reactive, onBeforeUnmount, onUnmounted, watch, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getLastZIndex, nextZIndex, isEnableConf, formatText } from '../../ui/src/utils';
@@ -21,9 +21,52 @@ function createInternalData() {
         linkFromKeyMaps: {},
         linkUniqueMaps: {},
         uFoot: false,
-        resizeTableWidth: 0
-        // barTipTimeout: null
-        // dragBarRow: null
+        resizeTableWidth: 0,
+        // barTipTimeout: null,
+        // dragBarRow: null,
+        // dragLineRow: null,
+        dragLinkToStore: {
+            rowid: null,
+            type: 0
+        }
+    };
+}
+function createReactData() {
+    var _a;
+    return {
+        tableLoading: false,
+        proxyInited: false,
+        isZMax: false,
+        tableLinks: [],
+        tableData: [],
+        filterData: [],
+        formData: {},
+        sortData: [],
+        footerData: [],
+        tZindex: 0,
+        tablePage: {
+            total: 0,
+            pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
+            currentPage: 1
+        },
+        showLeftView: true,
+        showRightView: true,
+        taskScaleList: [],
+        barTipStore: {
+            row: null,
+            content: '',
+            visible: false,
+            params: null
+        },
+        dragLinkFromStore: {
+            rowid: null,
+            type: 0
+        },
+        activeBarRowid: null,
+        activeLink: null,
+        isActiveCeLe: false,
+        linkList: [],
+        upLinkFlag: 0
     };
 }
 const viewTypeLevelMaps = {
@@ -49,7 +92,6 @@ export default defineVxeComponent({
         } }),
     emits: ganttEmits,
     setup(props, context) {
-        var _a;
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         // 使用已安装的组件，如果未安装则不渲染
@@ -59,34 +101,7 @@ export default defineVxeComponent({
         const VxeToolbarComponent = VxeUI.getComponent('VxeToolbar');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
         const { computeSize } = useFns.useSize(props);
-        const reactData = reactive({
-            tableLoading: false,
-            proxyInited: false,
-            isZMax: false,
-            tableLinks: [],
-            tableData: [],
-            filterData: [],
-            formData: {},
-            sortData: [],
-            footerData: [],
-            tZindex: 0,
-            tablePage: {
-                total: 0,
-                pageSize: ((_a = getConfig().pager) === null || _a === void 0 ? void 0 : _a.pageSize) || 10,
-                currentPage: 1
-            },
-            showLeftView: true,
-            showRightView: true,
-            taskScaleList: [],
-            barTipStore: {
-                row: null,
-                content: '',
-                visible: false,
-                params: null
-            },
-            linkList: [],
-            upLinkFlag: 0
-        });
+        const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
         const refTable = ref();
@@ -197,6 +212,10 @@ export default defineVxeComponent({
             const { scales } = taskViewOpts;
             return scales;
         });
+        const computeTaskLinkStyle = computed(() => {
+            const { lineType, lineWidth, lineStatus, lineColor } = computeTaskLinkOpts.value;
+            return `${lineType || ''}_${lineWidth || ''}_${lineStatus || ''}_${lineColor || ''}`;
+        });
         const computeTitleField = computed(() => {
             const taskOpts = computeTaskOpts.value;
             return taskOpts.titleField || 'title';
@@ -1646,21 +1665,34 @@ export default defineVxeComponent({
                         $xeTable.handleToggleCheckRowEvent(evnt, params);
                     }
                 }
+                reactData.isActiveCeLe = false;
+                reactData.activeBarRowid = null;
+                reactData.activeLink = null;
                 $xeGantt.dispatchEvent('task-cell-click', params, evnt);
             },
             handleTaskCellDblclickEvent(evnt, params) {
                 $xeGantt.dispatchEvent('task-cell-dblclick', params, evnt);
             },
             handleTaskBarClickEvent(evnt, params) {
+                const $xeTable = refTable.value;
+                const taskBarOpts = computeTaskBarOpts.value;
+                const { linkCreatable } = taskBarOpts;
+                const { row } = params;
+                reactData.isActiveCeLe = !!linkCreatable;
+                reactData.activeBarRowid = $xeTable ? $xeTable.getRowid(row) : row;
+                reactData.activeLink = null;
                 $xeGantt.dispatchEvent('task-bar-click', params, evnt);
             },
             handleTaskBarDblclickEvent(evnt, params) {
                 $xeGantt.dispatchEvent('task-bar-dblclick', params, evnt);
             },
             triggerTaskBarTooltipEvent(evnt, params) {
-                const { barTipStore } = reactData;
-                const { dragBarRow } = internalData;
-                if (dragBarRow) {
+                const { barTipStore, activeLink } = reactData;
+                const { dragBarRow, dragLineRow } = internalData;
+                if (dragBarRow || dragLineRow) {
+                    return;
+                }
+                if (activeLink) {
                     return;
                 }
                 const taskBarTooltipOpts = computeTaskBarTooltipOpts.value;
@@ -2246,6 +2278,11 @@ export default defineVxeComponent({
             handleTaskScaleConfig();
             $xeGantt.refreshTaskView();
         });
+        watch(computeTaskLinkStyle, () => {
+            if ($xeGantt.handleUpdateTaskLinkData) {
+                $xeGantt.handleUpdateTaskLinkData();
+            }
+        });
         hooks.forEach((options) => {
             const { setupGantt } = options;
             if (setupGantt) {
@@ -2255,15 +2292,15 @@ export default defineVxeComponent({
                 }
             }
         });
-        if ($xeGantt.handleTaskUpdateLinks) {
+        if ($xeGantt.handleTaskLoadLinks) {
             if (props.links) {
-                $xeGantt.handleTaskUpdateLinks(props.links);
+                $xeGantt.handleTaskLoadLinks(props.links);
             }
         }
         handleTaskScaleConfig();
         initPages();
         onMounted(() => {
-            if (!$xeGantt.handleUpdateTaskLink) {
+            if (!$xeGantt.handleUpdateTaskLinkData) {
                 if (props.links) {
                     warnLog('vxe.error.notProp', ['links']);
                 }
@@ -2314,6 +2351,9 @@ export default defineVxeComponent({
             initGanttView();
             globalEvents.on($xeGantt, 'keydown', handleGlobalKeydownEvent);
         });
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData());
+        });
         onUnmounted(() => {
             globalEvents.off($xeGantt, 'keydown');
             XEUtils.assign(internalData, createInternalData());

package/es/gantt/src/util.js

@@ -33,9 +33,6 @@ export function getTaskBarLeft(chartRest, viewCellWidth) {
 export function getTaskBarWidth(chartRest, viewCellWidth) {
     return Math.max(1, chartRest ? (Math.floor(viewCellWidth * chartRest.oWidthSize) - 1) : 0);
 }
-export function getTaskLinkKey(from, to) {
-    return `${from}_${to}`;
-}
 const taskTypeMaps = {
     milestone: true
 };

package/es/gantt/style.css

@@ -14,6 +14,11 @@
 .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar {
   border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
 }
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar .vxe-gantt-view--chart-custom-bar-content-wrapper, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar .vxe-gantt-view--chart-custom-bar-content-wrapper {
+  border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
+}
 .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-bar:hover::after, .vxe-gantt-view--chart-row.is--round > .vxe-gantt-view--chart-custom-bar:hover::after {
   border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
 }
@@ -26,7 +31,6 @@
   top: 50%;
   left: 0;
   transform: translateY(-50%);
-  overflow: hidden;
   pointer-events: all;
 }
 .vxe-gantt-view--chart-bar.is--default,
@@ -35,8 +39,18 @@
   background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
 }
 
-.vxe-gantt-view--chart-custom-bar-content {
+.vxe-gantt-view--chart-bar-content-wrapper,
+.vxe-gantt-view--chart-custom-bar-content-wrapper {
   width: 100%;
+  overflow: hidden;
+}
+
+.vxe-gantt-view--chart-bar-content-wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .vxe-gantt-view--chart-bar {