From 9cd6da6b82d932838996148a3ff17989604d5fa5 Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Tue, 15 Oct 2024 19:07:44 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=97=A5=E5=8E=86=E5=B0=8F?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/grid/index.tsx | 6 +- src/widgets/calendar/Large.tsx | 112 +++++++++++++++++++- src/widgets/calendar/Middle.tsx | 71 ++++++++++++- src/widgets/calendar/Modal.tsx | 174 +++++++++++++++++++++++++++++++- src/widgets/calendar/Small.tsx | 18 ++-- 5 files changed, 365 insertions(+), 16 deletions(-) diff --git a/src/layout/grid/index.tsx b/src/layout/grid/index.tsx index 711c7bb..3b32b5c 100644 --- a/src/layout/grid/index.tsx +++ b/src/layout/grid/index.tsx @@ -61,9 +61,9 @@ export default defineComponent(() => { style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)" ref={container} > - {layout.currentPage.list.map((block, idx) => ( - - ))} + {layout.currentPage.list.map( + (block, idx) => block?.id && + )} {settings.state.showAdder && (
{ - return () =>
大
+ const store = useCalendarStore() + return () => ( +
+
+
+ {dayjs().format('MM')}月 +
+
+
+ {dayjs().format('DD')} +
+ {dayjs().format('ddd')} + + {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月 + {Lunar.fromDate(dayjs().toDate()).getDayInChinese()} + +
+
+
+
+
+ 宜 +
+ + {Lunar.fromDate(dayjs().toDate()) + .getDayYi() + .filter((_, index) => index < 1) + .map((item) => ( + {item} + ))} + +
+
+
+ 忌 +
+ + {Lunar.fromDate(dayjs().toDate()) + .getDayJi() + .filter((_, index) => index < 1) + .map((item) => ( + {item} + ))} + +
+
+
+
+
+
+
+ {dayList.map((item) => ( + {item} + ))} +
+
+
+ {store.dayList + .filter( + (_, index) => + index < + (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35 + ? 42 + : 35) + ) + .map((el, key) => ( +
+ {el.label} +
+ ))} +
+
+
+
+ ) }) diff --git a/src/widgets/calendar/Middle.tsx b/src/widgets/calendar/Middle.tsx index f150db2..8669813 100644 --- a/src/widgets/calendar/Middle.tsx +++ b/src/widgets/calendar/Middle.tsx @@ -1,5 +1,72 @@ import { defineComponent } from 'vue' - +import dayjs from 'dayjs' +import { Lunar } from 'lunar-typescript' export default defineComponent(() => { - return () =>
中
+ return () => ( +
+
+
+ {dayjs().format('MM')}月 +
+
+
+ {dayjs().format('DD')} +
+ {dayjs().format('ddd')} + + {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月 + {Lunar.fromDate(dayjs().toDate()).getDayInChinese()} + +
+
+
+
+
+ 宜 +
+ + {Lunar.fromDate(dayjs().toDate()) + .getDayYi() + .filter((_, index) => index < 1) + .map((item) => ( + {item} + ))} + +
+
+
+ 忌 +
+ + {Lunar.fromDate(dayjs().toDate()) + .getDayJi() + .filter((_, index) => index < 1) + .map((item) => ( + {item} + ))} + +
+
+
+
+
+
+ ) }) diff --git a/src/widgets/calendar/Modal.tsx b/src/widgets/calendar/Modal.tsx index 44d8761..b98b4ee 100644 --- a/src/widgets/calendar/Modal.tsx +++ b/src/widgets/calendar/Modal.tsx @@ -1,5 +1,175 @@ -import { defineComponent } from 'vue' +import { computed, defineComponent } from 'vue' +import { useCalendarStore } from './useCalendarStore' +import dayjs from 'dayjs' +import { Lunar, Solar } from 'lunar-typescript' +import { DatePicker } from 'ant-design-vue' +import { FaChevronLeft } from 'oh-vue-icons/icons' +import { addIcons, OhVueIcon } from 'oh-vue-icons' +import clsx from 'clsx' +addIcons(FaChevronLeft) +export const dayList = ['一', '二', '三', '四', '五', '六', '日'] export default defineComponent(() => { - return () =>
日历弹框
+ const store = useCalendarStore() + const lunar = computed(() => Lunar.fromDate(store.state.select.toDate())) + const solar = computed(() => Solar.fromDate(store.state.select.toDate())) + return () => ( +
+
+
+ {store.state.select.format('MM')}月 +
+
+
+ {store.state.select.format('D')} + {store.state.select.format('ddd')} + + 本年第{store.state.select.diff(store.state.select.set('date', 1).set('months', 0), 'weeks')}周，第 + {store.state.select.diff(store.state.select.set('date', 1).set('month', 0), 'day')}天 + +
+
+
+
+ 星座 +
+ {solar.value.getXingZuo()}座 +
+
+
+ 宜 +
+
+ {lunar.value.getDayYi().map((item: any) => { + return
{item}，
+ })} +
+
+
+
+ 忌 +
+
+ {lunar.value.getDayJi().map((item: any) => { + return
{item}，
+ })} +
+
+
+
+
+
+
+
+
{ + store.state.select = store.state.select.subtract(1, 'month') + }} + > + +
+
+ { + store.state.select = store.state.select.set('M', dayjs(e).get('M')) + }} + /> + {store.state.select.format('YYYY')} +
+
+ { + store.state.select = store.state.select.set('M', dayjs(e).get('M')) + }} + /> + {store.state.select.format('MM')} +
+
{ + store.state.select = store.state.select.add(1, 'month') + }} + > + +
+
+
+
+ {dayList.map((item) => { + return ( +
+ {item} +
+ ) + })} + {store.dayList + .filter( + (_, index) => + index < + (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35 + ? 42 + : 35) + ) + + .map((el, key) => ( +
{ + store.state.select = el.day + }} + class={clsx( + 'flex justify-center items-center flex-col rounded-lg border-[1px] cursor-pointer', + { + ' opacity-40': el.type === 1 || el.type === -1, + 'border-[#76d7f2] border-solid border-[1px] bg-[#F5FDFF]': el.day.isSame( + dayjs(), + 'day' + ), + 'border-transparent border-solid': !el.day.isSame(dayjs(), 'day') && !el.day.isSame(store.state.select, 'day'), + 'border-[#76d7f2] border-solid border-[1px]': !el.day.isSame(dayjs(), 'day') && el.day.isSame(store.state.select, 'day'), + } + )} + > + {el.label} + {el.lunar.getDayInChinese()} +
+ ))} +
+
+
+
+ ) }) diff --git a/src/widgets/calendar/Small.tsx b/src/widgets/calendar/Small.tsx index d3571d2..3225e36 100644 --- a/src/widgets/calendar/Small.tsx +++ b/src/widgets/calendar/Small.tsx @@ -23,13 +23,17 @@ export default defineComponent(() => { {dayjs().format('DD')}
-
- {dayjs().format('YYYY年MM月')} - - {Lunar.fromDate(dayjs().toDate()).getMonthInChinese() + - '月' + - Lunar.fromDate(dayjs().toDate()).getDayInChinese()} - +
+
+ + {dayjs().format('YYYY年MM月')} + + + {Lunar.fromDate(dayjs().toDate()).getMonthInChinese() + + '月' + + Lunar.fromDate(dayjs().toDate()).getDayInChinese()} + +
)