完善小组件：修复bug 原创

src/config.ts

@@ -10,7 +10,7 @@ export const ossCdnBase = import.meta.env.PROD ? ossBase : ossBase
 
 // 后端地址
 export const apiBase = import.meta.env.PROD
-  ? 'http://192.168.110.28:8300'
+  ? 'http://106.15.37.113:8300'
   : 'http://192.168.110.28:8300'
 
 // 后端 cdn 加速地址

src/layout/background/BackgroundPage.tsx

@@ -21,10 +21,7 @@ export default defineComponent(() => {
     },
     { immediate: true }
   )
-  const resource = useResource(
+
-    computed(() => layout.state.content[selected.value].background),
-    'background'
-  )
   const settings = useSettingsStore()
   return () => (
     <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto">
@@ -46,13 +43,13 @@ export default defineComponent(() => {
       </SettingItem>
       <div class="px-4">
         <div class="h-[180px]">
-          {resource.video && resource.type !== 'own' ? (
+          {layout.background.video && layout.background.type !== 'own' ? (
-            <video class="w-full h-full" src={resource.video} autoplay={false} controls />
+            <video class="w-full h-full" src={layout.background.video} autoplay={false} controls />
           ) : (
             <div
               class="w-full h-full bg-center bg-no-repeat bg-cover"
               style={{
-                backgroundImage: `url('${resource.image}')`
+                backgroundImage: `url('${layout.background.image}')`
               }}
             ></div>
           )}
@@ -71,7 +68,7 @@ export default defineComponent(() => {
             type="text"
             icon={<DownloadOutlined />}
             onClick={() => {
-              window.open(resource.video || resource.image, '_blank')
+              window.open(layout.background.video || layout.background.image, '_blank')
             }}
           >
             下载壁纸

src/layout/background/BackgroundSwtich.tsx

@@ -47,6 +47,7 @@ export type WallpaperItem = {
 }
 export default defineComponent(() => {
   const layout = useLayoutStore()
+  const background = useBackgroundStore()
   const router = useRouterStore()
   const isGame = computed(() => layout.state.current === 0)
   const selectType = ref('')
@@ -102,10 +103,18 @@ export default defineComponent(() => {
           'flex w-full justify-between items-center border-b-[1px] border-solid   pb-2',
           isGame.value ? 'border-white/[.2]' : 'dark:border-black/[.2]'
         )}
+      >
+        <div
+          onClick={() => {
+            router.back()
+          }}
         >
           <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
+        </div>
+
         <span class="font-bold text-[14px]  ">壁纸库</span>
-        <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
+        <div></div>
+        {/* <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button> */}
       </div>
       <div class="flex-1 h-0  relative">
         {selectAttr.value !== 2 ? (
@@ -128,7 +137,7 @@ export default defineComponent(() => {
                       <button
                         class={clsx(
                           'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
-                          isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
+                          isGame.value ? ' text-white' : 'text-[#000] hover:bg-[#f0ecec]'
                         )}
                       >
                         {text}
@@ -176,6 +185,10 @@ export default defineComponent(() => {
                     <div
                       onClick={() => {
                         layout.changeBackground(item.url)
+                        background.bgTrriger = false
+                        setTimeout(() => {
+                          background.bgTrriger = true
+                        }, 0)
                       }}
                       class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden"
                     >

src/layout/background/index.tsx

@@ -1,24 +1,18 @@
 import { defineComponent, ref, Transition, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import useSettingsStore from '@/settings/useSettingsStore'
+import useBackgroundStore from './useBackgroundStore'
 
 export default defineComponent({
   setup() {
     const layout = useLayoutStore()
+    const background = useBackgroundStore()
     const settings = useSettingsStore()
-    const trriger = ref(true)
-    watch(layout.background, () => {
-      trriger.value = false
-      setTimeout(() => {
-        trriger.value = true
-      },0)
-    })
-    return () => (
 
+    return () => (
       <div class="absolute left-0 top-0 w-full h-screen z-0">
         <Transition name="background">
-          {
+          {background.bgTrriger && (
-            trriger.value &&
             <>
               {layout.background.video ? (
                 <video src={layout.background.video} class="w-full h-full" />
@@ -31,9 +25,7 @@ export default defineComponent({
                 ></div>
               )}
             </>
-
+          )}
-          }
-
         </Transition>
         <div
           class="absolute left-0 top-0 w-full h-full bg-black"
@@ -44,9 +36,6 @@ export default defineComponent({
           }}
         ></div>
       </div>
-
-
-
     )
   }
 })

src/layout/background/useBackgroundStore.ts

@@ -3,6 +3,7 @@ import { reactive, ref, watch } from 'vue'
 
 export default defineStore('background', () => {
   const tag = ref(localStorage.getItem('backgroundTag') || '')
+  const bgTrriger = ref(true)
   const resource = reactive({
     type: 'image',
     brief: '',
@@ -29,6 +30,7 @@ export default defineStore('background', () => {
   )
   return {
     tag,
-    resource
+    resource,
+    bgTrriger
   }
 })

src/layout/header/GlobalTime.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
     const layout = useLayoutStore()
     return () => (
       <div
-        class="absolute z-20 shadow-text tracking-widest font-mono font-bold h-[110px] transition-all"
+        class="absolute z-20 shadow-text tracking-widest  font-bold h-[110px] transition-all"
         style={{
           color: layout.isCompact ? 'white' : 'rgba(255,255,255,.8)',
           transitionDuration: '.4s',

src/main.css

@@ -8,6 +8,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-family:
+    SourceHanSans,
     -apple-system,
     BlinkMacSystemFont,
     Helvetica Neue,
@@ -18,6 +19,12 @@
     WenQuanYi Micro Hei,
     sans-serif;
 }
+@font-face {
+  font-family: 'SourceHanSans';
+  src: url('/fonts/SourceHanSansCN-Regular.subset.otf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
 body {
   /* ! 全局禁用鼠标选择，需要在其他位置放开 */
   user-select: none;
@@ -185,9 +192,8 @@ body {
   }
 }
 
-
 .background-enter-active {
-  animation: bounce-in .8s;
+  animation: bounce-in 0.8s;
 }
 
 @keyframes bounce-in {
@@ -199,6 +205,5 @@ body {
   }
   100% {
     transform: scale(1);
-
   }
 }

src/settings/SettingsOverlay.tsx

@@ -43,7 +43,7 @@ export default defineComponent(() => {
         <div
           class="w-full h-screen"
           onClick={() => {
-            router.back()
+            router.replace('')
           }}
         ></div>
       )}

src/useRouterStore.ts

@@ -32,9 +32,13 @@ export default defineStore('router', () => {
   const path = computed(() => {
     return his.value[0] || ''
   })
+  const replace = (path: RouteStr) => {
+    his.value = [path]
+  }
   return {
     path,
     go,
-    back
+    back,
+    replace
   }
 })

src/widgets/calendar/Small.tsx

@@ -1,5 +1,36 @@
 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 p-1 flex gap-x-2 items-center bg-[#f0f0f0] px-3">
+      <div class={'h-[48px] w-[48px] flex flex-col rounded-lg overflow-hidden '}>
+        <div
+          class={
+            'w-full h-[18px] text-[10px] text-white flex items-center justify-center font-bold font-din'
+          }
+          style={{
+            background: '#ffffff linear-gradient(225deg,#76d7f2 0%,#5aebb0 100%)'
+          }}
+        >
+          {dayjs().format('ddd')}
+        </div>
+        <div
+          class={
+            'h-0 flex-1 bg-white flex items-center justify-center text-[#333] font-bold text-[22px] font-din'
+          }
+        >
+          {dayjs().format('DD')}
+        </div>
+      </div>
+      <div class={'flex flex-col'}>
+        <span class={"text-[14px] text-[#333] tracking-tight"}>{dayjs().format('YYYY年MM月')}</span>
+        <span class={"text-[12px] text-[#999]"}>
+          {Lunar.fromDate(dayjs().toDate()).getMonthInChinese() +
+            '月' +
+            Lunar.fromDate(dayjs().toDate()).getDayInChinese()}
+        </span>
+      </div>
+    </div>
+  )
 })

src/widgets/calendar/useCalendarStore.ts

@@ -0,0 +1,84 @@
+import { defineStore } from 'pinia'
+import { computed, reactive } from 'vue'
+import dayjs from 'dayjs'
+import { Lunar } from 'lunar-typescript'
+import HolidayData from './holiday.json'
+
+export type DateInfo = {
+  day: dayjs.Dayjs
+  label: string
+  lunar: Lunar
+  type: 1 | 0 | -1 //下月，本月，上月
+  hType: 0 | 1 | 2 //无，休，班
+  tag: string
+}
+
+export const useCalendarStore = defineStore('calendar', () => {
+  const state = reactive({
+    select: dayjs(),
+    index: 0
+  })
+  const jumpMonth = (m: number) => {
+    state.select = state.select.add(m, 'month')
+  }
+  const recentHoliday = (datetime: dayjs.Dayjs, isHoliday: boolean) => {
+    if (!HolidayData) return {}
+    for (let i = 0; i < HolidayData.length; i++) {
+      const item = HolidayData[i]
+      if (
+        datetime.toDate().getTime() < dayjs(item.data.date).toDate().getTime() &&
+        item.data.name !== '班' &&
+        item.data.name !== '休'
+      ) {
+        if (!isHoliday) return { name: item.data.name, date: item.data.date }
+        if (item.data.isOffDay) return { name: item.data.name, date: item.data.date }
+      }
+    }
+
+    return {}
+  }
+
+  const dayList = computed(() => {
+    const _arr = [] as DateInfo[]
+    const firstDayInMonth = dayjs(state.select).startOf('month')
+    const lastDayInMonth = dayjs(state.select).endOf('month')
+    for (let i = 0; i < 42; i++) {
+      let _day: dayjs.Dayjs
+      let type: 0 | 1 | -1 = 0
+      let hType: 0 | 1 | 2 = 0
+      if (i < firstDayInMonth.day()) {
+        _day = firstDayInMonth.subtract(firstDayInMonth.day() - i, 'day')
+        type = -1
+      } else if (i >= lastDayInMonth.date() + firstDayInMonth.day()) {
+        _day = firstDayInMonth.add(i - firstDayInMonth.day(), 'day')
+        type = 1
+      } else {
+        _day = firstDayInMonth.add(i - firstDayInMonth.day(), 'day')
+      }
+      const _holiday = HolidayData.find((val) => val.data.date === _day.format('YYYY-MM-DD'))
+
+      if (_holiday) {
+        if (_holiday.data.isOffDay) {
+          hType = 1
+        } else {
+          hType = 2
+        }
+      }
+      _arr.push({
+        day: _day,
+        label: _day.format('DD'),
+        lunar: Lunar.fromDate(_day.toDate()),
+        type: type,
+        hType: hType,
+        tag: _holiday?.data.name || ''
+      })
+    }
+    return _arr
+  })
+  return {
+    state,
+    jumpMonth,
+    recentHoliday,
+    dayList
+  }
+})