diff --git a/CHANGELOG.md b/CHANGELOG.md index 374f1a1455a097f1a27ac5a2bc5922a465e970ee..2fac6edf9b5cdd751a33cc7145c6d2815f1757e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,11 @@ ## [Unreleased] +### Changed + +- 调整日历周、天样式头部事件项容器最大拖拽高度为320 +- 日历周、天样式绘制首个数据源时将背景色调整为主题色，文字颜色调整为主题文字色 + ## [0.7.41-alpha.13] - 2025-07-18 ### Added diff --git a/src/control/calendar/calendar-util.ts b/src/control/calendar/calendar-util.ts index a4b942e10ad66d1cb1deccf4a46b2045357cca56..199f159b8af3f12e3fa369f0561d58c59cbd3bb6 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 bfe1544523569f27ee1b6729eec0799e2bc4fd62..96fa3c6ae46bbb54fb4c4c7bdd7c1a2f5097a51d 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 d1f9046118db2132d6652f58dd9b406dfdc5eeaf..cac5788bbaa38c538ca04c4535f1de8dbb945582 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 9a6a709ec260aa57243ad7e8ae51e7d29636860a..c3cbc18ae0c2017a3f2a69c8ad2fd07c3711f615 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 ab3d908cac49897399e0bec791ea067649e80f9a..11e5de9486449a7bca987397525e6a179d852a22 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`; }; /** @@ -152,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) { @@ -163,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 6dd7c0d9bbee8e03565ebbe45e37420eb8377d31..1dda3e2b04732d10dcdfcb2aab090caaea36e236 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 b8bef5899d78795ba870b08632d857843c45d5c4..9cbf37ce475e15a701bf5c803d9201606617f69e 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 a8b6e85c58a315468d77f85dbae72aa3cb2daa4d..851ffb4e5ed061fe4754b67f0b2df92e9119d61e 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`; }; /** @@ -284,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) { @@ -295,6 +297,12 @@ export const useCalendarWeek = ( bkColorFade: tempBkColor, }); } + if (!event?.color) { + const tempColor = targetLegend && targetLegend.color; + Object.assign(tempEventContent, { + color: tempColor, + }); + } // 计算边框显示 if ( tempEventContent?.height &&