From ede1be881220b07e27a9eed824bd441e6a83c41d Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Mon, 21 Jul 2025 22:22:19 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat=EF=BC=9A=E8=B0=83=E6=95=B4=E6=97=A5?= =?UTF-8?q?=E5=8E=86=E5=91=A8=E3=80=81=E5=A4=A9=E6=A0=B7=E5=BC=8F=E5=A4=B4?= =?UTF-8?q?=E9=83=A8=E4=BA=8B=E4=BB=B6=E9=A1=B9=E5=AE=B9=E5=99=A8=E6=9C=80?= =?UTF-8?q?=E5=A4=A7=E6=8B=96=E6=8B=BD=E9=AB=98=E5=BA=A6=E4=B8=BA320?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++++ .../calendar/components/calendar-daily/use-calendar-daily.ts | 4 +++- .../calendar/components/calendar-week/use-calendar-week.ts | 4 +++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 374f1a145..64423513d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ ## [Unreleased] +### Changed + +- 调整日历周、天样式头部事件项容器最大拖拽高度为320 + ## [0.7.41-alpha.13] - 2025-07-18 ### Added diff --git a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts index ab3d908ca..3b6811bee 100644 --- a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts +++ b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts @@ -54,7 +54,9 @@ export const useCalendarDaily = ( const handleDrag = (event: DragEvent) => { const heightChange: number = (event as IParams).clientY - initialMouseY + initialHeight; - resizableHand.value.style.height = `${heightChange}px`; + // 顶部拖动高度时增加最大高度限制 + if (heightChange < 320) + resizableHand.value.style.height = `${heightChange}px`; }; /** diff --git a/src/control/calendar/components/calendar-week/use-calendar-week.ts b/src/control/calendar/components/calendar-week/use-calendar-week.ts index a8b6e85c5..bf65e0c1e 100644 --- a/src/control/calendar/components/calendar-week/use-calendar-week.ts +++ b/src/control/calendar/components/calendar-week/use-calendar-week.ts @@ -61,7 +61,9 @@ export const useCalendarWeek = ( const handleDrag = (event: DragEvent) => { const heightChange: number = (event as IParams).clientY - initialMouseY + initialHeight; - resizableHand.value.style.height = `${heightChange}px`; + // 顶部拖动高度时增加最大高度限制 + if (heightChange < 320) + resizableHand.value.style.height = `${heightChange}px`; }; /** -- Gitee From d2b276e76a7e47c0460e5516ff2ab53379519ffe Mon Sep 17 00:00:00 2001 From: lijisanxiong <1518062161@qq.com> Date: Tue, 22 Jul 2025 09:24:16 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E6=97=A5=E5=8E=86=E5=91=A8?= =?UTF-8?q?=E3=80=81=E5=A4=A9=E6=A0=B7=E5=BC=8F=E7=BB=98=E5=88=B6=E9=A6=96?= =?UTF-8?q?=E4=B8=AA=E6=95=B0=E6=8D=AE=E6=BA=90=E6=97=B6=E5=B0=86=E8=83=8C?= =?UTF-8?q?=E6=99=AF=E8=89=B2=E8=B0=83=E6=95=B4=E4=B8=BA=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=EF=BC=8C=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2=E8=B0=83?= =?UTF-8?q?=E6=95=B4=E4=B8=BA=E4=B8=BB=E9=A2=98=E6=96=87=E5=AD=97=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + src/control/calendar/calendar-util.ts | 57 ++++++++ src/control/calendar/calendar.scss | 16 ++- src/control/calendar/calendar.tsx | 129 ++++++++++++++---- .../calendar-daily/calendar-daily.tsx | 1 - .../calendar-daily/use-calendar-daily.ts | 12 +- .../calendar-week/calendar-week.scss | 3 +- .../calendar-week/calendar-week.tsx | 1 - .../calendar-week/use-calendar-week.ts | 12 +- 9 files changed, 191 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64423513d..2fac6edf9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Changed - 调整日历周、天样式头部事件项容器最大拖拽高度为320 +- 日历周、天样式绘制首个数据源时将背景色调整为主题色，文字颜色调整为主题文字色 ## [0.7.41-alpha.13] - 2025-07-18 diff --git a/src/control/calendar/calendar-util.ts b/src/control/calendar/calendar-util.ts index a4b942e10..199f159b8 100644 --- a/src/control/calendar/calendar-util.ts +++ b/src/control/calendar/calendar-util.ts @@ -1,3 +1,4 @@ +import { Namespace } from '@ibiz-template/core'; import dayjs from 'dayjs'; /** @@ -51,3 +52,59 @@ export const isTimeBetween = (_argrs: { dayjs(date).isBefore(endTime, unit)) ); }; + +/** + * 用于处理日历图例 + * + * @export + * @param {Namespace} ns 菜单样式处理命名空间 + */ +export function useCalendarLegend(ns: Namespace): { + handleColor: () => string; + handleBkColor: (_tempBgColors: IData, _type: string) => string; +} { + /** + * @description 获取css变量值 + * @param {string} varName + * @return {*} + */ + const getVarValue = (varName: string): string => { + const root = document.documentElement; + return getComputedStyle(root).getPropertyValue(varName); + }; + + const bgColors = [ + // 首个颜色用主题色 + getVarValue(`${ns.cssVarName('color-primary')}`), + '#2196F3', + '#4CAF50', + '#3F51B5', + '#FF9800', + '#673AB7', + '#757575', + ]; + + /** + * @description 处理背景颜色 + * @param {IData} _bgColorMap + * @returns {string} + */ + const handleBkColor = (_bgColorMap: IData, type: string): string => { + let _bgColor = _bgColorMap.get(type); + const length = _bgColorMap.size; + if (type && !_bgColor && length < bgColors.length) { + _bgColor = bgColors[length]; + _bgColorMap.set(type, _bgColor); + } + return _bgColor || bgColors[0]; + }; + + /** + * @description 处理字体颜色 + * @returns {string} + */ + const handleColor = (): string => { + return getVarValue(`${ns.cssVarName('color-primary-text')}`); + }; + return { handleColor, handleBkColor }; +} diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss index bfe154452..96fa3c6ae 100644 --- a/src/control/calendar/calendar.scss +++ b/src/control/calendar/calendar.scss @@ -9,6 +9,10 @@ $control-calendar: ( margin: getCssVar(spacing, extra-tight), ); +$control-calendar-item: ( + color: none, +); + @include b(control-calendar) { @include set-component-css-var(control-calendar, $control-calendar); @@ -51,7 +55,7 @@ $control-calendar: ( } .el-calendar__header { - flex-wrap: wrap; + flex-wrap: nowrap; } .el-calendar-table, @@ -146,7 +150,10 @@ $control-calendar: ( @include b(control-calendar-item) { @include set-component-css-var(control-calendar, $control-calendar); + @include set-component-css-var(control-calendar-item, $control-calendar-item); + #{getCssVarName(color, text, 2)}: getCssVar(control-calendar-item, color); + #{getCssVarName(editor, default, text, color)}: getCssVar(control-calendar-item, color); height: 100%; padding: getCssVar(control-calendar, item-padding); margin-bottom: getCssVar(control-calendar, margin); @@ -183,6 +190,7 @@ $control-calendar: ( @include b(control-calendar-content-title) { line-height: getCssVar(editor, default, line-height); + white-space: nowrap; } @include b(control-calendar-content-header) { @@ -194,11 +202,15 @@ $control-calendar: ( & > * + * { margin-left: getCssVar(control-calendar, item-padding); } + + .el-button-group { + display: flex; + } } @include b(control-calendar-legend) { display: flex; - justify-content: flex-end; + justify-content: center; width: 100%; & > * + * { diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index d1f904611..cac5788bb 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -4,6 +4,7 @@ import { IBizCustomRender, useControlController, useNamespace, + useUIStore, } from '@ibiz-template/vue3-util'; import { defineComponent, @@ -24,6 +25,7 @@ import { } from '@ibiz/model-core'; import { CalendarController, + CalendarItemData, IButtonContainerState, IButtonState, ICalendarItemData, @@ -33,7 +35,11 @@ import dayjs from 'dayjs'; import { showTitle } from '@ibiz-template/core'; import { MenuItem } from '@imengyu/vue3-context-menu'; import CustomCalendar from './components/custom-calendar'; -import { getWeekRange, isTimeBetween } from './calendar-util'; +import { + getWeekRange, + isTimeBetween, + useCalendarLegend, +} from './calendar-util'; import './calendar.scss'; export const CalendarControl = defineComponent({ @@ -75,10 +81,50 @@ export const CalendarControl = defineComponent({ (...args) => new CalendarController(...args), ); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); + const { UIStore } = useUIStore(); + + const { handleColor, handleBkColor } = useCalendarLegend(ns); + const calendarRef = ref(); const curPopover = ref(); const showDateRange = ref(c.controlParams.showmode === 'daterange'); const showDateList = ref(c.controlParams.showmode === 'expand'); + + // 日历图例数据计算颜色值 + const bgColorMap = new Map(); + const legendItems = ref([]); + // 计算甘特样式 + const calcGanttStyle = (): IData[] => { + return c.state.legends.map(_item => { + const tempItem = { ..._item }; + if (!_item.bkcolor) { + Object.assign(tempItem, { + bkcolor: handleBkColor(bgColorMap, _item.id), + }); + } + if (!_item.color) + Object.assign(tempItem, { + color: handleColor(), + }); + return tempItem; + }); + }; + watch( + () => c.state.legends, + () => { + legendItems.value = calcGanttStyle(); + }, + { deep: true }, + ); + + // 适配主题切换 + watch( + () => UIStore.theme, + () => { + legendItems.value = calcGanttStyle(); + }, + ); + // 气泡框对应显示日期 const popoverValue = ref(''); @@ -169,6 +215,7 @@ export const CalendarControl = defineComponent({ return { color: data.color, backgroundColor: data.bkColor, + [`${ns.cssVarBlockName('item-color')}`]: data.color, }; }; @@ -205,7 +252,25 @@ export const CalendarControl = defineComponent({ return result; }); } - return calendarItems; + return calendarItems.map(_item => { + const targetLegend = legendItems.value.find( + (legendItem: IData) => legendItem.id === _item.itemType, + ); + const { model, data } = _item as IData; + if (!targetLegend || !model || !data) return _item; + + // 图例没有配置颜色时，赋默认颜色 + const _tempModel = { ...model }; + if (!_item.bkColor) + Object.assign(_tempModel, { + bkcolor: targetLegend.bkcolor, + }); + if (!_item.color) + Object.assign(_tempModel, { + color: targetLegend.color, + }); + return new CalendarItemData(_tempModel, data); + }); }; // *上下文菜单相关 / @@ -404,6 +469,7 @@ export const CalendarControl = defineComponent({ showDateRange, showDateList, popoverValue, + legendItems, selectDate, calcItemStyle, calcCalendarItems, @@ -623,6 +689,36 @@ export const CalendarControl = defineComponent({ header: ({ date }: { date: string }): VNode[] => { return [ {date}, +
+ {this.c.model.sysCalendarItems && + this.c.model.sysCalendarItems.length > 1 && + this.c.model.sysCalendarItems?.map( + (calendarItem: IData) => { + let label = calendarItem.name!; + const legend = this.legendItems.find( + _legend => _legend.id === calendarItem.id, + ); + if (calendarItem.nameLanguageRes) { + label = ibiz.i18n.t( + calendarItem.nameLanguageRes.lanResTag!, + calendarItem.name, + ); + } + return ( +
+
+ {label} +
+ ); + }, + )} +
,
, -
- {this.c.model.sysCalendarItems && - this.c.model.sysCalendarItems.length > 1 && - this.c.model.sysCalendarItems?.map( - (calendarItem: IData) => { - let label = calendarItem.name!; - if (calendarItem.nameLanguageRes) { - label = ibiz.i18n.t( - calendarItem.nameLanguageRes.lanResTag!, - calendarItem.name, - ); - } - return ( -
-
- {label} -
- ); - }, - )} -
, ]; }, 'date-cell': ({ data }: { data: IData }): VNode => { @@ -774,7 +843,7 @@ export const CalendarControl = defineComponent({ ref='calendarRef' viewType={this.c.model.calendarStyle} events={this.c.state.items} - legends={this.c.state.legends} + legends={this.legendItems} multiple={!this.c.state.singleSelect} selectedData={this.c.state.selectedData} onEventClick={(value: IParams) => { diff --git a/src/control/calendar/components/calendar-daily/calendar-daily.tsx b/src/control/calendar/components/calendar-daily/calendar-daily.tsx index 9a6a709ec..c3cbc18ae 100644 --- a/src/control/calendar/components/calendar-daily/calendar-daily.tsx +++ b/src/control/calendar/components/calendar-daily/calendar-daily.tsx @@ -146,7 +146,6 @@ export const CalendarDaily = defineComponent({ {events.value.map((event: IUIEvent, index: number) => { const eventBoxStyle = {}; const eventContentStyle = { - color: event.color, background: event.bkColorFade, }; return renderEventItem( diff --git a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts index 3b6811bee..11e5de948 100644 --- a/src/control/calendar/components/calendar-daily/use-calendar-daily.ts +++ b/src/control/calendar/components/calendar-daily/use-calendar-daily.ts @@ -154,9 +154,9 @@ export const useCalendarDaily = ( Object.assign(tempItem, { styleTop }); } if (!event?.bkColor) { - const bkColor = targetLegend - ? targetLegend.bkcolor - : handleBkColor(tempColors, event.itemType); + const bkColor = + (targetLegend && targetLegend.bkcolor) || + handleBkColor(tempColors, event.itemType); Object.assign(tempItem, { bkColor }); } if (tempItem.bkColor) { @@ -165,6 +165,12 @@ export const useCalendarDaily = ( bkColorFade: tempBkColor, }); } + if (!event?.color) { + const tempColor = targetLegend && targetLegend.color; + Object.assign(tempItem, { + color: tempColor, + }); + } // 计算边框显示 if (tempItem?.height && (tempItem as IParams)?.height > 10) { const border = '1px solid #FFF'; diff --git a/src/control/calendar/components/calendar-week/calendar-week.scss b/src/control/calendar/components/calendar-week/calendar-week.scss index 6dd7c0d9b..1dda3e2b0 100644 --- a/src/control/calendar/components/calendar-week/calendar-week.scss +++ b/src/control/calendar/components/calendar-week/calendar-week.scss @@ -238,7 +238,7 @@ padding: 0; &.el-popover.el-popper { - padding: 24px 12px 8px; + padding: 12px; } @include m(body) { @@ -254,6 +254,7 @@ overflow: auto; } @include m(close) { + display: none; position: absolute; top: 8px; right: 8px; diff --git a/src/control/calendar/components/calendar-week/calendar-week.tsx b/src/control/calendar/components/calendar-week/calendar-week.tsx index b8bef5899..9cbf37ce4 100644 --- a/src/control/calendar/components/calendar-week/calendar-week.tsx +++ b/src/control/calendar/components/calendar-week/calendar-week.tsx @@ -353,7 +353,6 @@ export const CalendarWeek = defineComponent({ const eventContentStyle = { background: event.bkColorFade, 'border-left': `3px solid ${event.bkColor}`, - color: event.color, }; const tempContent = renderEventItem( 'content', diff --git a/src/control/calendar/components/calendar-week/use-calendar-week.ts b/src/control/calendar/components/calendar-week/use-calendar-week.ts index bf65e0c1e..851ffb4e5 100644 --- a/src/control/calendar/components/calendar-week/use-calendar-week.ts +++ b/src/control/calendar/components/calendar-week/use-calendar-week.ts @@ -286,9 +286,9 @@ export const useCalendarWeek = ( } Object.assign(tempEventContent, { height, styleTop, timeRange }); if (!event?.bkColor) { - const bkColor = targetLegend - ? targetLegend.bkcolor - : handleBkColor(tempColors, event.itemType); + const bkColor = + (targetLegend && targetLegend.bkcolor) || + handleBkColor(tempColors, event.itemType); Object.assign(tempEventContent, { bkColor }); } if (tempEventContent.bkColor) { @@ -297,6 +297,12 @@ export const useCalendarWeek = ( bkColorFade: tempBkColor, }); } + if (!event?.color) { + const tempColor = targetLegend && targetLegend.color; + Object.assign(tempEventContent, { + color: tempColor, + }); + } // 计算边框显示 if ( tempEventContent?.height && -- Gitee