完成日历小组件

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(
-          <BlockWrapper key={block.id} idx={idx} block={block} />
+          (block, idx) => block?.id && <BlockWrapper key={block.id} idx={idx} block={block} />
-        ))}
+        )}
         {settings.state.showAdder && (
           <div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
             <div

src/widgets/calendar/Large.tsx

@@ -1,5 +1,113 @@
 import { defineComponent } from 'vue'
-
+import dayjs from 'dayjs'
+import { Lunar } from 'lunar-typescript'
+import { useCalendarStore } from './useCalendarStore'
+import clsx from 'clsx'
+import { dayList } from './Modal'
 export default defineComponent(() => {
-  return () => <div class="w-full h-full bg-red-50">大</div>
+  const store = useCalendarStore()
+  return () => (
+    <div
+      class="w-full h-full  flex items-center backdrop-blur"
+      style={{
+        background: 'rgba(118,215,242,.4)'
+      }}
+    >
+      <div class={'w-1/2 h-full flex flex-col overflow-hidden '}>
+        <div
+          class={'w-full h-[44px] text-[16px] text-white flex items-center justify-center  '}
+          style={{
+            background: '#ffffff linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
+          }}
+        >
+          {dayjs().format('MM')}月
+        </div>
+        <div
+          class={'h-0 flex-1 bg-white flex items-center justify-center text-[#333]  text-[22px] '}
+        >
+          <div
+            class={'w-full h-full flex flex-col    items-center justify-between py-2 text-[20px]'}
+          >
+            <span class={'text-[42px] leading-[40px] font-bold'}>{dayjs().format('DD')}</span>
+            <div class={'flex gap-x-2 text-[14px] font-medium'}>
+              <span>{dayjs().format('ddd')}</span>
+              <span>
+                {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
+                {Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+              </span>
+            </div>
+            <div class={'w-full h-0 border-dashed border-[#999] border-[1px]'}></div>
+            <div class={'w-full flex gap-x-5 justify-center'}>
+              <div class={'flex gap-x-1 items-center'}>
+                <div
+                  class={
+                    'w-[24px] h-[24px] flex items-center justify-center bg-[#ff8686]  rounded-full text-white font-medium text-[12px]'
+                  }
+                >
+                  宜
+                </div>
+                <span class={'text-[12px] flex flex-col text-[#666]'}>
+                  {Lunar.fromDate(dayjs().toDate())
+                    .getDayYi()
+                    .filter((_, index) => index < 1)
+                    .map((item) => (
+                      <span>{item}</span>
+                    ))}
+                </span>
+              </div>
+              <div class={'flex gap-x-1 items-center'}>
+                <div
+                  class={
+                    'w-[24px] h-[24px] flex items-center justify-center  bg-[#5ac195] rounded-full text-white font-medium text-[12px]'
+                  }
+                >
+                  忌
+                </div>
+                <span class={'text-[12px] flex flex-col  text-[#666]'}>
+                  {Lunar.fromDate(dayjs().toDate())
+                    .getDayJi()
+                    .filter((_, index) => index < 1)
+                    .map((item) => (
+                      <span>{item}</span>
+                    ))}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class={'w-1/2 h-full flex flex-col '}>
+        <div class={'h-[44px] bg-[#76d7f2] px-[30px] items-center flex justify-between '}>
+          {dayList.map((item) => (
+            <span class={'text-white'}>{item}</span>
+          ))}
+        </div>
+        <div class={'h-0 flex-1 w-full'}>
+          <div class={'w-full h-full grid grid-cols-7 gap-1 px-[30px] py-2 '}>
+            {store.dayList
+              .filter(
+                (_, index) =>
+                  index <
+                  (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
+                    ? 42
+                    : 35)
+              )
+              .map((el, key) => (
+                <div
+                  class={clsx(
+                    'text-[12px] flex  items-center justify-center h-[18px] w-[20px] text-white ',
+                    el.day.isSame(dayjs(), 'day') && 'bg-[#00aada] rounded-lg',
+                    {
+                      'opacity-40': el.type === 1 || el.type === -1
+                    }
+                  )}
+                >
+                  {el.label}
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 })

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 () => <div class="w-full h-full bg-red-50">中</div>
+  return () => (
+    <div class="w-full h-full  flex gap-x-2 items-center bg-[#f0f0f0] ">
+      <div class={'w-full h-full flex flex-col rounded-lg overflow-hidden '}>
+        <div
+          class={'w-full h-[44px] text-[16px] text-white flex items-center justify-center  '}
+          style={{
+            background: '#ffffff linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
+          }}
+        >
+          {dayjs().format('MM')}月
+        </div>
+        <div
+          class={'h-0 flex-1 bg-white flex items-center justify-center text-[#333]  text-[22px] '}
+        >
+          <div
+            class={'w-full h-full flex flex-col    items-center justify-between py-2 text-[20px]'}
+          >
+            <span class={'text-[42px] leading-[40px] font-bold'}>{dayjs().format('DD')}</span>
+            <div class={'flex gap-x-2 text-[14px] font-medium'}>
+              <span>{dayjs().format('ddd')}</span>
+              <span>
+                {Lunar.fromDate(dayjs().toDate()).getMonthInChinese()}月
+                {Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+              </span>
+            </div>
+            <div class={'w-full h-0 border-dashed border-[#999] border-[1px]'}></div>
+            <div class={'w-full flex gap-x-5 justify-center'}>
+              <div class={'flex gap-x-1 items-center'}>
+                <div
+                  class={
+                    'w-[24px] h-[24px] flex items-center justify-center bg-[#ff8686]  rounded-full text-white font-medium text-[12px]'
+                  }
+                >
+                  宜
+                </div>
+                <span class={'text-[12px] flex flex-col text-[#666]'}>
+                  {Lunar.fromDate(dayjs().toDate())
+                    .getDayYi()
+                    .filter((_, index) => index < 1)
+                    .map((item) => (
+                      <span>{item}</span>
+                    ))}
+                </span>
+              </div>
+              <div class={'flex gap-x-1 items-center'}>
+                <div
+                  class={
+                    'w-[24px] h-[24px] flex items-center justify-center  bg-[#5ac195] rounded-full text-white font-medium text-[12px]'
+                  }
+                >
+                  忌
+                </div>
+                <span class={'text-[12px] flex flex-col  text-[#666]'}>
+                  {Lunar.fromDate(dayjs().toDate())
+                    .getDayJi()
+                    .filter((_, index) => index < 1)
+                    .map((item) => (
+                      <span>{item}</span>
+                    ))}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 })

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 () => <div class="w-full h-full bg-red-50">日历弹框</div>
+  const store = useCalendarStore()
+  const lunar = computed(() => Lunar.fromDate(store.state.select.toDate()))
+  const solar = computed(() => Solar.fromDate(store.state.select.toDate()))
+  return () => (
+    <div class="w-full h-full bg-white/90 flex backdrop-blur-lg">
+      <div class={'w-[186px]  rounded-br-2xl flex flex-col'}>
+        <div
+          class={
+            'w-full h-[48px] rounded-tr-2xl flex items-center justify-center text-white  font-bold text-[16px]'
+          }
+          style={{
+            background: 'linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
+          }}
+        >
+          {store.state.select.format('MM')}月
+        </div>
+        <div class={'flex-1 h-0 bg-white rounded-br-2xl'}>
+          <div
+            class={'w-full h-full flex-shrink-0 pb-2 flex flex-col items-center overflow-y-scroll'}
+          >
+            <span class={'text-[48px] font-extrabold pt-2'}>{store.state.select.format('D')}</span>
+            <span>{store.state.select.format('ddd')}</span>
+            <span>
+              本年第{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')}天
+            </span>
+            <div class={'w-[138px] h-[1px] flex-shrink-0 my-7 bg-black/10 relative'}></div>
+            <div class={'w-full flex flex-col gap-y-3 justify-center items-center px-6'}>
+              <div class={'flex items-center w-full justify-between '}>
+                <div
+                  class={
+                    'bg-[#ff8686] w-[64px] rounded-md text-white h-[30px] flex justify-center items-center'
+                  }
+                >
+                  星座
+                </div>
+                <span class={'text-[#666] text-[14px]'}>{solar.value.getXingZuo()}座</span>
+              </div>
+              <div class={'flex  w-full  gap-x-5'}>
+                <div
+                  class={
+                    'rounded-full bg-[#ff8686] w-[30px] h-[30px] flex items-center justify-center text-white'
+                  }
+                >
+                  宜
+                </div>
+                <div class={'flex flex-col text-[#666] text-[14px]'}>
+                  {lunar.value.getDayYi().map((item: any) => {
+                    return <div class={'flex items-center'}>{item}，</div>
+                  })}
+                </div>
+              </div>
+              <div class={'flex  w-full  gap-x-5'}>
+                <div
+                  class={
+                    'rounded-full bg-[#5ac195] w-[30px] h-[30px] flex items-center justify-center text-white'
+                  }
+                >
+                  忌
+                </div>
+                <div class={'flex flex-col text-[#666] text-[14px]'}>
+                  {lunar.value.getDayJi().map((item: any) => {
+                    return <div class={'flex items-center'}>{item}，</div>
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class={'flex flex-1 bg flex-col py-4'}>
+        <div class={'flex gap-x-4 ml-5 '}>
+          <div
+            class={'bg-black/10 p-1 rounded-md cursor-pointer hover:bg-white/50'}
+            onClick={() => {
+              store.state.select = store.state.select.subtract(1, 'month')
+            }}
+          >
+            <OhVueIcon name={FaChevronLeft.name} fill="#666"></OhVueIcon>
+          </div>
+          <div
+            class={
+              'bg-black/[.1] hover:bg-white/50 text-[#333] text-[14px] cursor-pointer items-center rounded-30  overflow-hidden relative w-[108px] flex justify-center py-[2px] rounded-xl'
+            }
+          >
+            <DatePicker
+              class={'w-full absolute left-0 top-0 opacity-0 '}
+              picker="year"
+              onChange={(e) => {
+                store.state.select = store.state.select.set('M', dayjs(e).get('M'))
+              }}
+            />
+            {store.state.select.format('YYYY')}
+          </div>
+          <div
+            class={
+              'bg-black/[.1] hover:bg-white/50 cursor-pointer text-[#333] text-[14px] items-center rounded-30  overflow-hidden relative w-[108px] flex justify-center py-[2px] rounded-xl'
+            }
+          >
+            <DatePicker
+              class={'w-full absolute left-0 top-0 opacity-0 '}
+              picker="month"
+              onChange={(e) => {
+                store.state.select = store.state.select.set('M', dayjs(e).get('M'))
+              }}
+            />
+            {store.state.select.format('MM')}
+          </div>
+          <div
+            class={'bg-black/10 rounded-md p-1 rotate-180 hover:bg-white/50 cursor-pointer'}
+            onClick={() => {
+              store.state.select = store.state.select.add(1, 'month')
+            }}
+          >
+            <OhVueIcon name={FaChevronLeft.name} fill="#666"></OhVueIcon>
+          </div>
+        </div>
+        <div class={'flex-1 h-0 w-full '}>
+          <div class={'w-full h-full grid grid-cols-7 grid-rows-auto gap-x-6 gap-y-2  p-2'}>
+            {dayList.map((item) => {
+              return (
+                <div key={item} class="flex justify-center items-center ">
+                  <span class="text-[16px] font-bold text-[#333333] dark:text-white">{item}</span>
+                </div>
+              )
+            })}
+            {store.dayList
+              .filter(
+                (_, index) =>
+                  index <
+                  (store.dayList.reduce((acc, cur) => (cur!.type !== 1 ? acc + 1 : acc), 0) > 35
+                    ? 42
+                    : 35)
+              )
+
+              .map((el, key) => (
+                <div
+                  onClick={() => {
+                    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'),
+                    }
+                  )}
+                >
+                  <span class={'text-[14px] text-[#333]'}>{el.label}</span>
+                  <span class={'text-[12px] text-[#666]'}>{el.lunar.getDayInChinese()}</span>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 })

src/widgets/calendar/Small.tsx

@@ -23,13 +23,17 @@ export default defineComponent(() => {
           {dayjs().format('DD')}
         </div>
       </div>
-      <div class={'flex flex-col'}>
+      <div class={' flex-1 flex justify-center  '}>
-        <span class={"text-[14px] text-[#333] tracking-tight"}>{dayjs().format('YYYY年MM月')}</span>
+        <div class={' flex flex-col'}>
-        <span class={"text-[12px] text-[#999]"}>
+          <span class={'text-[14px] text-[#333] tracking-tight'}>
-          {Lunar.fromDate(dayjs().toDate()).getMonthInChinese() +
+            {dayjs().format('YYYY年MM月')}
-            '月' +
+          </span>
-            Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+          <span class={'text-[12px] text-[#999]'}>
-        </span>
+            {Lunar.fromDate(dayjs().toDate()).getMonthInChinese() +
+              '月' +
+              Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+          </span>
+        </div>
       </div>
     </div>
   )