xyyd-fatfox/src/widgets/calendar/Modal.tsx

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(() => {
  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>
  )
})