将图片资源调整到/tab目录下

src/fox/index.tsx

@@ -22,10 +22,10 @@ const stageStrList = [
 ]
 
 const load = async (stageStr: string) => {
-  await Assets.load({ alias: stageStr, src: `/fox/xiaohuli_${stageStr}.json` })
+  await Assets.load({ alias: stageStr, src: `/tab/fox/xiaohuli_${stageStr}.json` })
   await Assets.load({
     alias: stageStr + '_atlas',
-    src: `/fox/xiaohuli_${stageStr}.atlas`
+    src: `/tab/fox/xiaohuli_${stageStr}.atlas`
   })
 }
 

src/layout/adder/AdderPage.tsx

@@ -1,11 +1,4 @@
-import {
+import { computed, defineComponent, provide, ref, type InjectionKey, type Ref } from 'vue'
-  computed,
-  defineComponent,
-  provide,
-  ref,
-  type InjectionKey,
-  type Ref
-} from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import {
@@ -21,6 +14,7 @@ import WidgetAdder from './WidgetAdder'
 import { Form, Input, Select } from 'ant-design-vue'
 import HotAdder from './HotAdder'
 import GameAdder from './GameAdder'
+import work_add_main_checked from '/tab/icons/work_add_main_checked.png'
 addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler, IoGameController)
 
 const ItemButton = defineComponent({
@@ -60,7 +54,7 @@ const ItemButton = defineComponent({
       >
         {props.active && (
           <img
-            src="/icons/work_add_main_checked.png"
+            src={work_add_main_checked}
             class={'absolute h left-0 top-1/2 -translate-y-1/2  w-[8px] h-[34px]'}
           ></img>
         )}
@@ -87,7 +81,7 @@ export default defineComponent(() => {
         isGame.value ? 'bg-[#2C2E3D]' : 'bg-[#fffc]  backdrop-blur'
       )}
       // style={{
-      //   backgroundImage: `url('/bg/gameModel.png')`,
+      //   backgroundImage: `url('/tab/bg/gameModel.png')`,
       //   backgroundSize: '100% 100%'
       // }}
     >

src/layout/adder/HotAdder.tsx

@@ -34,7 +34,7 @@ export const LinkItem = defineComponent({
     const addTo = inject(AddToToken)
     return () => (
       <div
-        class={clsx(' w-full h-full rounded-lg relative flex flex-col justify-between shadow p-4', {
+        class={clsx(' w-full h-full rounded-lg relative flex flex-col justify-between overflow-hidden shadow p-4', {
           'bg-white/20': isGame.value,
           'bg-white/80': !isGame.value
         })}

src/layout/adder/WidgetAdder.tsx

@@ -17,7 +17,6 @@ export const WidgetItem = defineComponent({
     const isGame = computed(() => layout.state.current === 0)
     const addTo = inject(AddToToken)
     const isExist = computed(() => {
-
       return (
         layout.state.content[layout.state.current].pages[layout.state.currentPage].list.findIndex(
           (el) => el?.name === props.content.name
@@ -33,7 +32,10 @@ export const WidgetItem = defineComponent({
         key={props.content.name}
       >
         <div class="flex">
-          <img src={props.content.icon} class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg" />
+          <img
+            src={ props.content.icon}
+            class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
+          />
           <div class="px-2 w-0 flex-grow ">
             <div
               class={clsx('text text-sm mb-[2px]', {
@@ -119,10 +121,7 @@ export const WidgetItem = defineComponent({
 export default defineComponent(() => {
   return () => (
     <div class="absolute left-0 top-0 w-full h-full overflow-y-auto scrollbar-hide gap-4">
-      <div
+      <div class="w-full grid grid-cols-3 grid-flow-row-dense  gap-4" style="grid-auto-rows: 120px">
-        class="w-full grid grid-cols-3 grid-flow-row-dense  gap-4"
-        style="grid-auto-rows: 120px"
-      >
         {widgetList.map((el) => (
           <WidgetItem content={el} key={el.name} />
         ))}

src/layout/background/BackgroundPage.tsx

@@ -1,12 +1,9 @@
 import { Button, Select, Slider } from 'ant-design-vue'
-import { computed, defineComponent, ref, Transition, watch } from 'vue'
+import { defineComponent, ref, Transition, watch } from 'vue'
 import useLayoutStore from '../useLayoutStore'
-import Rect from '@/utils/Rect'
-import useResource from './useResource'
 import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
 import SettingItem from '@/settings/SettingItem'
 import useSettingsStore from '@/settings/useSettingsStore'
-import { v4 as uuid } from 'uuid'
 import useRouterStore from '@/useRouterStore'
 
 export default defineComponent(() => {
@@ -24,7 +21,7 @@ export default defineComponent(() => {
 
   const settings = useSettingsStore()
   return () => (
-    <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto">
+    <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto scrollbar-hide">
       <SettingItem
         noBg
         v-slots={{
@@ -81,13 +78,15 @@ export default defineComponent(() => {
           label: () => <div>遮罩浓度</div>
         }}
       >
-        <Slider
+        <div class={'w-[200px]'}>
-          v-model:value={settings.state.maskOpacity}
+          <Slider
-          step={0.01}
+            v-model:value={settings.state.maskOpacity}
-          tooltipOpen={false}
+            step={0.01}
-          min={0}
+            tooltipOpen={false}
-          max={0.7}
+            min={0}
-        />
+            max={0.7}
+          />
+        </div>
       </SettingItem>
       <SettingItem
         noRoundedT
@@ -95,13 +94,15 @@ export default defineComponent(() => {
           label: () => <div>遮罩模糊</div>
         }}
       >
-        <Slider
+        <div class={'w-[200px]'}>
-          v-model:value={settings.state.maskFilter}
+          <Slider
-          step={0.1}
+            v-model:value={settings.state.maskFilter}
-          tooltipOpen={false}
+            step={0.1}
-          min={0}
+            tooltipOpen={false}
-          max={20}
+            min={0}
-        />
+            max={20}
+          />
+        </div>
       </SettingItem>
       <Transition>
         {(settings.state.maskFilter > 0 || settings.state.maskOpacity > 0) && (

src/layout/background/BackgroundSwtich.tsx

@@ -9,28 +9,11 @@ import request from '@/utils/request'
 import useUserStore from '@/user/useUserStore'
 import useRouterStore from '@/useRouterStore'
 import useBackgroundStore from './useBackgroundStore'
-import { Button } from 'ant-design-vue'
 import CustomWallpaper from './CustomWallpaper'
 
 addIcons(BiChevronLeft, BiChevronDown)
 
-const typeList = [
+
-  '热门',
-  'COSPALY',
-  '二次元',
-  '风景',
-  '插画',
-  '热门',
-  'COSPALY',
-  '二次元',
-  '风景',
-  '插画',
-  '热门',
-  'COSPALY',
-  '二次元',
-  '风景',
-  '插画'
-]
 const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
 export type BackgroundType = {
   id: string
@@ -90,7 +73,7 @@ export default defineComponent(() => {
       style={
         isGame.value
           ? {
-              backgroundImage: `url('/bg/gameModel.png')`,
+              backgroundImage: `url('/tab/bg/gameModel.png')`,
               backgroundSize: '100% 100%'
             }
           : null

src/layout/background/CustomWallpaper.tsx

@@ -64,7 +64,7 @@ export default defineComponent(() => {
               tempBackground.value ? 'bg-black/50 hidden group-hover:flex' : 'flex'
             )}
           >
-            <img alt="123" src="/icons/uploadImg.png"></img>
+            <img alt="123" src={new URL('/tab/icons/uploadImg.png', import.meta.url).href}></img>
             <span
               class={clsx('text-[15px]  ', tempBackground.value ? 'text-[#fff]' : 'text-[#333]')}
             >
@@ -95,7 +95,6 @@ export default defineComponent(() => {
         onClick={() => {
           if (tempFile.value) {
             uploadLocal(tempFile.value).then((res) => {
-
               useLayoutStore().changeBackground(res)
 
               tempFile.value = null

src/layout/grid/BlockSettings.tsx

@@ -44,10 +44,10 @@ export default defineComponent(() => {
         <div class={'w-[180px]'}>
           <Slider
             v-model:value={settings.state.mainWidth}
-            step={0.01}
+            step={2}
             tooltipOpen={false}
-            min={0}
+            min={50}
-            max={1}
+            max={90}
           />
         </div>
       </SettingItem>

src/layout/grid/LinkBlock.tsx

@@ -52,7 +52,7 @@ export default defineComponent({
             window.open(props.block.link, '_blank')
           }}
           style={{
-            backgroundImage: `url('/bg/game.webp')`
+            backgroundImage: `url('/tab/bg/game.webp')`
           }}
         >
           <img src={props.block.icon} class={'w-[50px] h-[50px] rounded-lg'} alt="game icon" />
@@ -61,7 +61,7 @@ export default defineComponent({
               {props.block.label}
             </span>
           </div>
-          <img src="/icons/gameicon.webp" alt="game_icon" class={'absolute right-0 bottom-0 w-[36px]'} />
+          <img src="/tab/icons/gameicon.webp" alt="game_icon" class={'absolute right-0 bottom-0 w-[36px]'} />
         </div>
       )
     }

src/layout/grid/SearchSetting.tsx

@@ -1,6 +1,6 @@
 import SettingItem from '@/settings/SettingItem'
 import useSettingsStore from '@/settings/useSettingsStore'
-import { Select, Switch, type SelectProps } from 'ant-design-vue'
+import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
 import { defineComponent, ref } from 'vue'
 import useSearchConfigStore from '../header/search/useSearchConfigStore'
 
@@ -24,7 +24,20 @@ export default defineComponent({
             label: () => <div>搜索栏圆角</div>
           }}
         >
-          <Switch v-model:checked={settings.state.showBlockLabel} />
+          <div class={' flex items-center  gap-x-2'}>
+            <div class={'w-[180px]'}>
+              <Slider
+                v-model:value={settings.state.searchRadius}
+                tooltipOpen={false}
+                step={1}
+                min={0}
+                max={22}
+              />
+            </div>
+            <span class={'text-[#999] w-[30px] flex-0 text-[14px]'}>
+              {settings.state.searchRadius}px
+            </span>
+          </div>
         </SettingItem>
         <SettingItem
           noRoundedT
@@ -32,7 +45,18 @@ export default defineComponent({
             label: () => <div>搜索栏透明</div>
           }}
         >
-          <Switch v-model:checked={settings.state.showHistory} />
+          <div class={' flex items-center gap-x-2'}>
+            <div class={'w-[180px]'}>
+              <Slider
+                v-model:value={settings.state.searchOpacity}
+                step={0.01}
+                min={0.1}
+                tooltipOpen={false}
+                max={0.75}
+              />
+            </div>
+            <span class={'text-[#999] w-[30px]  text-[14px]'}>{settings.state.searchOpacity}</span>
+          </div>
         </SettingItem>
         <SettingItem
           v-slots={{

src/layout/grid/TimeSetting.tsx

@@ -0,0 +1,82 @@
+import SettingItem from '@/settings/SettingItem'
+import useSettingsStore, { type TimeUnit } from '@/settings/useSettingsStore'
+import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
+import { defineComponent, ref } from 'vue'
+import useSearchConfigStore from '../header/search/useSearchConfigStore'
+import clsx from 'clsx'
+const list: {
+  label: string
+  value: TimeUnit
+}[] = [
+  {
+    label: '日&月',
+    value: 'date'
+  },
+  {
+    label: '周',
+    value: 'week'
+  },
+  {
+    label: '秒',
+    value: 'second'
+  },
+  {
+    label: '农历',
+    value: 'lunal'
+  },
+  {
+    label: '12小时制',
+    value: '12hour'
+  }
+]
+export default defineComponent({
+  name: 'SearchSetting',
+  props: {},
+  setup() {
+    const settings = useSettingsStore()
+    const searchStore = useSearchConfigStore()
+    const options1 = ref<SelectProps['options']>(
+      [...searchStore.defaultList, ...searchStore.customList].map((item) => ({
+        value: item.name,
+        label: item.name
+      }))
+    )
+    return () => (
+      <div class="p-4">
+        <SettingItem
+          v-slots={{
+            label: () => <div>显示时间</div>
+          }}
+        >
+          <Switch v-model:checked={settings.state.showTime} />
+        </SettingItem>{' '}
+        <div class={'flex flex-col gap-y-1'}>
+          <span class={'text-[14px] font-bold text-[#333]'}>时间的样式</span>
+          <div class={'p-3 bg-[#000000]/[.05] rounded-lg grid gap-2 grid-rows-2 grid-cols-4'}>
+            {list.map((item) => (
+              <div
+                onClick={() => {
+                  if (settings.state.timeOptions.includes(item.value)) {
+                    settings.state.timeOptions = settings.state.timeOptions.filter(
+                      (el) => el !== item.value
+                    )
+                  } else {
+                    settings.state.timeOptions.push(item.value)
+                  }
+                }}
+                class={clsx(
+                  '  items-center justify-center flex rounded py-1 cursor-pointer',
+                  settings.state.timeOptions.includes(item.value)
+                    ? 'bg-[#ffa93d] text-white'
+                    : 'bg-black/[0.05] text-[#999] '
+                )}
+              >
+                {item.label}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/layout/header/GlobalTime.tsx

@@ -8,6 +8,12 @@ export default defineComponent({
   setup() {
     const time = useTimeStore()
     const text = computed(() => {
+      if (!useSettingsStore().state.timeOptions.includes('12hour')) {
+        return {
+          timeStr: `${time.date.getHours()}:${time.date.getMinutes()}:${time.date.getSeconds()}`,
+          dateStr: `${time.date.getMonth() + 1}月${time.date.getDate()}日`
+        }
+      }
       const h = time.date.getHours()
       const hour = h < 10 ? '0' + h : h
       const m = time.date.getMinutes()
@@ -43,7 +49,7 @@ export default defineComponent({
         }}
       >
         <Transition>
-          {settings.state.showDate && (
+          {settings.state.showTime && (
             <div
               class={
                 'transition-all ' +
@@ -59,9 +65,17 @@ export default defineComponent({
             <div
               class={'flex items-center gap-4 mt-4 ' + (layout.isCompact ? '' : 'justify-center')}
             >
-              <div>{text.value.dateStr}</div>
+              {settings.state.timeOptions.includes('date') && <div>{text.value.dateStr}</div>}
-              <Transition>{!layout.isCompact && <div>星期{info.value.dayWeek}</div>}</Transition>
+              <Transition>
-              <Transition>{!layout.isCompact && <div>{info.value.day}</div>}</Transition>
+                {!layout.isCompact && settings.state.timeOptions.includes('week') && (
+                  <div>星期{info.value.dayWeek}</div>
+                )}
+              </Transition>
+              <Transition>
+                {!layout.isCompact && settings.state.timeOptions.includes('lunal') && (
+                  <div>{info.value.day}</div>
+                )}
+              </Transition>
             </div>
           )}
         </Transition>

src/layout/header/search/useSearchConfigStore.ts

@@ -12,25 +12,25 @@ const defaultSearchList: SearchInfo[] = [
   {
     name: '百度',
     url: 'https://www.baidu.com/s?wd=',
-    icon: 'searchIcons/baidu.png',
+    icon: 'tab/searchIcons/baidu.png',
     show: true
   },
   {
     name: '必应',
     url: 'https://cn.bing.com/search?q=',
-    icon: 'searchIcons/bing.png',
+    icon: 'tab/searchIcons/bing.png',
     show: true
   },
   {
     name: '谷歌',
     url: 'https://www.google.com/search?q=',
-    icon: 'searchIcons/google.png',
+    icon: 'tab/searchIcons/google.png',
     show: true
   },
   {
     name: '360',
     url: 'https://www.so.com/s?q=',
-    icon: 'searchIcons/360.png',
+    icon: 'tab/searchIcons/360.png',
     show: true
   }
 

src/main.css

@@ -30,6 +30,13 @@ body {
   /* ! 全局禁用鼠标选择，需要在其他位置放开 */
   user-select: none;
 }
+
+.ant-slider-rail {
+  background-color: #0000001a !important;
+}
+.ant-slider-track {
+  background-color: #ffa94d !important;
+}
 @keyframes loading {
   0% {
     transform: rotate(0deg);

src/settings/SettingsOverlay.tsx

@@ -50,8 +50,8 @@ export default defineComponent(() => {
       {/* 弹框主体 */}
       <Transition name="settings">
         {show.value && (
-          <div class="absolute left-6 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
+          <div class="absolute left-6 bottom-20 bg-white w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
-            <div class="w-[200px] p-4 h-full bg-white/60 backdrop-blur flex flex-col">
+            <div class="w-[200px] p-4 h-full bg-[#ebebeb] backdrop-blur flex flex-col">
               <div
                 class={
                   'w-full h-0 flex-grow mb-4 rounded-lg hover:bg-white/70 transition-all cursor-pointer flex justify-center items-center ' +
@@ -65,6 +65,7 @@ export default defineComponent(() => {
                   <AvatarCircle />
                 </div>
               </div>
+              <div class={'w-full mb-5 h-[1px] bg-[#000000] opacity-10'}></div>
               <SettingsTab label="壁纸" path="settings-background" />
               <SettingsTab label="图标" path="settings-block" />
               <SettingsTab label="搜索" path="settings-search" />

src/settings/SettingsOverlayContent.tsx

@@ -5,12 +5,13 @@ import BackgroundPage from '@/layout/background/BackgroundPage'
 import ThemeProvider from '@/utils/ThemeProvider'
 import BlockSettings from '@/layout/grid/BlockSettings'
 import SearchSetting from '@/layout/grid/SearchSetting'
+import TimeSetting from '@/layout/grid/TimeSetting'
 
 export default defineComponent(() => {
   const router = useRouterStore()
 
   return () => (
-    <div class="w-0 h-full flex-grow bg-white/80 backdrop-blur">
+    <div class="w-0 h-full flex-grow  backdrop-blur">
       <ThemeProvider>
         {router.path === 'settings-user' ? (
           <UserPage />
@@ -20,6 +21,8 @@ export default defineComponent(() => {
           <BlockSettings />
         ) : router.path === 'settings-search' ? (
           <SearchSetting />
+        ) : router.path === 'settings-time' ? (
+          <TimeSetting />
         ) : null}
       </ThemeProvider>
     </div>

src/settings/useSettingsStore.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { computed, reactive } from 'vue'
 
 export type VisibleState = 'show' | 'auto' | ''
-
+export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second';
 export default defineStore(
   'settings',
   () => {
@@ -15,8 +15,8 @@ export default defineStore(
       showSider: 'show' as VisibleState,
       showDock: 'show' as VisibleState,
       showPet: 'show' as VisibleState,
-      showDate: true,
       showTime: true,
+      timeOptions: ['date', 'week', '12hour', 'lunal', 'second'] as TimeUnit[],
       showAdder: true,
       showHistory: true,
       // 尺寸
@@ -27,7 +27,8 @@ export default defineStore(
       showBlockLabel: true,
       // 搜索
       searchWidth: 30,
-      searchRadius: 12
+      searchRadius: 12,
+      searchOpacity: 0.75
 
     })
     return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }

src/utils/ThemeProvider.tsx

@@ -19,10 +19,10 @@ export default defineComponent({
             colorBgBase: props.dark ? '#393a41' : '#fff',
             colorBorder: 'transparent'
           },
-          
+
           components: {
             Slider: {
-              
+              railSize: 6
             },
             Button: {
               colorPrimary: '#f88e14'

src/widgets/calendar/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'calendar',
   label: '日历',
   description: '日历信息',
-  icon: '/icons/calendarIcon.png',
+  icon: '/tab/icons/calendarIcon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/constellation/Large.tsx

@@ -10,7 +10,7 @@ export default defineComponent(() => {
     <div
       class="w-full h-full  flex flex-col p-2"
       style={{
-        backgroundImage: 'url(/icons/constellation/constellation_icon_bg_large.webp)',
+        backgroundImage: 'url(/tab/icons/constellation/constellation_icon_bg_large.webp)',
         backgroundSize: '100% 100%',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center'
@@ -33,7 +33,7 @@ export default defineComponent(() => {
           <div class={'w-full pt-2 pl-5 relative'}>
             <img
               class={'w-[25px] h-[25px] top-0 left-2 absolute '}
-              src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
+              src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
             ></img>
 
             <span
@@ -41,7 +41,7 @@ export default defineComponent(() => {
             >
               {zodiacMap.get(store.state.selectCode)}
               <img
-                src="/icons/change_constellation.png"
+                src="/tab/icons/change_constellation.png"
                 class={'w-[14px] h-[14px] cursor-pointer'}
               ></img>
             </span>

src/widgets/constellation/Middle.tsx

@@ -9,7 +9,7 @@ export default defineComponent(() => {
     <div
       class="w-full h-full  flex flex-col p-2"
       style={{
-        backgroundImage: 'url(/icons/constellation/constellation_icon_bg_medium.webp)',
+        backgroundImage: 'url(/tab/icons/constellation/constellation_icon_bg_medium.webp)',
         backgroundSize: '100% 100%',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center'
@@ -27,7 +27,7 @@ export default defineComponent(() => {
         <div class={'w-full pt-4 pl-5 relative'}>
           <img
             class={'w-[25px] h-[25px] top-1 left-2 absolute '}
-            src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
+            src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
           ></img>
           <span class={'absolute right-1 top-1 text-[12px] text-[#666] scale-75'}>
             {dayjs().format('YYYY.MM.DD')}
@@ -35,7 +35,7 @@ export default defineComponent(() => {
           <span class={'relative z-10 flex items-center gap-x-1 font-bold text-[16px] text-[#333]'}>
             {zodiacMap.get(store.state.selectCode)}
             <img
-              src="/icons/change_constellation.png"
+              src="/tab/icons/change_constellation.png"
               class={'w-[14px] h-[14px] cursor-pointer'}
             ></img>
           </span>

src/widgets/constellation/Modal.tsx

@@ -11,7 +11,7 @@ export default defineComponent(() => {
     <div
       class="w-full h-full   p-2 overflow-hidden"
       style={{
-        background: `url('/bg/xingzuo_bg.png')`,
+        background: `url('/tab/bg/xingzuo_bg.png')`,
         backgroundSize: '100% 100%'
       }}
       onClick={() => {
@@ -22,27 +22,27 @@ export default defineComponent(() => {
         <div
           class={'w-full h-full   flex'}
           style={{
-            background: `url('/bg/xingzuo_bg_main.png')`,
+            background: `url('/tab/bg/xingzuo_bg_main.png')`,
             backgroundSize: '100% 100%'
           }}
         >
           <div class={'w-[358px] h-full flex flex-col py-2 pl-5'}>
             <div
               style={{
-                background: `url('/icons/xingzuo_icon_bg.png')`,
+                background: `url('/tab/icons/xingzuo_icon_bg.png')`,
                 backgroundSize: '100% 100%'
               }}
               class={'w-[168px] h-[168px] flex items-center justify-center '}
             >
               <img
                 class={'w-[48px] h-[48px]'}
-                src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
+                src={`/tab/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
               ></img>
             </div>
             <div class={'pl-8 mt-4 flex items-center gap-x-2 relative'}>
               <span class={'text-[16px]  font-bold'}>{zodiacMap.get(store.state.selectCode)}</span>
               <img
-                src="/icons/change_constellation.png"
+                src="/tab/icons/change_constellation.png"
                 class={'w-[14px] h-[14px] cursor-pointer'}
                 onClick={(e) => {
                   open.value = true
@@ -64,7 +64,7 @@ export default defineComponent(() => {
                       'absolute  top-1/2 -translate-y-1/2 hover:scale-110 duration-150 w-10 cursor-pointer',
                       page.value === 1 ? 'right-5' : 'left-5 rotate-180 '
                     )}
-                    src="/icons/constellation/xingzuo_right.png"
+                    src="/tab/icons/constellation/xingzuo_right.png"
                   ></img>
                   <div class={'w-full h-full grid grid-cols-6 grid-rows-1'}>
                     {Array.from(zodiacMap)
@@ -82,7 +82,7 @@ export default defineComponent(() => {
                           >
                             <img
                               class={'w-[48px] h-[48px] '}
-                              src={`/icons/constellation/${value}_big.png`}
+                              src={`/tab/icons/constellation/${value}_big.png`}
                             ></img>
                           </div>
                           <span class={'text-[16px] font-bold text-[#333] leading-[16px]'}>
@@ -111,8 +111,8 @@ export default defineComponent(() => {
                     <img
                       src={
                         (store.data?.today.exponents.caiyun.star || 0) > index
-                          ? '/icons/stared.png'
+                          ? '/tab/icons/stared.png'
-                          : '/icons/starun.png'
+                          : '/tab/icons/starun.png'
                       }
                       class={'w-[20px] h-[20px]'}
                     ></img>
@@ -126,8 +126,8 @@ export default defineComponent(() => {
                     <img
                       src={
                         (store.data?.today.exponents.aiqing.star || 0) > index
-                          ? '/icons/stared.png'
+                          ? '/tab/icons/stared.png'
-                          : '/icons/starun.png'
+                          : '/tab/icons/starun.png'
                       }
                       class={'w-[20px] h-[20px]'}
                     ></img>
@@ -141,8 +141,8 @@ export default defineComponent(() => {
                     <img
                       src={
                         (store.data?.today.exponents.zonghe.star || 0) > index
-                          ? '/icons/stared.png'
+                          ? '/tab/icons/stared.png'
-                          : '/icons/starun.png'
+                          : '/tab/icons/starun.png'
                       }
                       class={'w-[20px] h-[20px]'}
                     ></img>

src/widgets/constellation/Small.tsx

@@ -5,18 +5,18 @@ export default defineComponent(() => {
     <div
       class="w-full h-full flex items-center px-3"
       style={{
-        background: `url('/icons/constellation/starSign__back.png')`,
+        background: `url(${'/tab/icons/constellation/starSign__back.png'})`,
         backgroundSize: 'cover'
       }}
     >
-      <img class={'w-[48px] h-[48px]'} src={'/icons/constellation/starSign__icon.png'}></img>
+      <img class={'w-[48px] h-[48px]'} src={'/tab/icons/constellation/starSign__icon.png'}></img>
       <div class={'flex-1 flex justify-center'}>
         <div class="flex-col flex">
           <span class={'text-[16px] text-white'}>游戏折扣</span>
           <div class={'flex items-center text-[#fffc] text-[12px] '}>
             立即查看
             <div>
-              <img src="/icons/gt.png"></img>
+              <img src="/tab/icons/gt.png"></img>
             </div>
           </div>
         </div>

src/widgets/constellation/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'constellation',
   label: '星座运势',
   description: '你可查看星座运势',
-  icon: '/icons/constellation_icon.png',
+  icon: '/tab/icons/constellation_icon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/constellation/starCicle.tsx

@@ -27,7 +27,7 @@ export default defineComponent({
           backgroundPosition: 'center'
         }}
       >
-        <img class={'absolute top-0 '} src="/icons/constellation/constellation_un.png"></img>
+        <img class={'absolute top-0 '} src="/tab/icons/constellation/constellation_un.png"></img>
         <Progress
           percent={20 * props.star}
           type="dashboard"

src/widgets/demo/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'gameNews',
   label: '游戏资讯',
   description: '游戏资讯',
-  icon: '/icons/game_news_icon.png',
+  icon: '/tab/icons/game_news_icon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/discount/Small.tsx

@@ -6,18 +6,18 @@ export default defineComponent(() => {
     <div
       class="w-full h-full flex items-center px-3"
       style={{
-        background: `url('/bg/gameDiscount__back.png')`,
+        background: `url('/tab/bg/gameDiscount__back.png')`,
         backgroundSize: 'cover'
       }}
     >
-      <img class={'w-[48px] h-[48px]'} src={'/icons/gameDiscount__icon.png'}></img>
+      <img class={'w-[48px] h-[48px]'} src={'/tab/icons/gameDiscount__icon.png'}></img>
       <div class={'flex-1 flex justify-center'}>
         <div class="flex-col flex">
           <span class={'text-[16px] text-white'}>游戏折扣</span>
           <div class={'flex items-center text-[#fffc] text-[12px] '}>
             立即查看
             <div>
-              <img src="/icons/gt.png"></img>
+              <img src="/tab/icons/gt.png"></img>
             </div>
           </div>
         </div>

src/widgets/discount/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'discount',
   label: '游戏折扣',
   description: '游戏折扣',
-  icon: '/icons/discounts_icon.png',
+  icon: '/tab/icons/discounts_icon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/eat/Middle.tsx

@@ -81,7 +81,7 @@ export default defineComponent(() => {
     <div
       class="w-full h-full  flex flex-col px-[14px]  pt-[23px]"
       style={{
-        backgroundImage: `url('/bg/eat_bg@2x.webp')`,
+        backgroundImage: `url('/tab/bg/eat_bg@2x.webp')`,
         backgroundSize: '100% 100%'
       }}
       onClick={() => {
@@ -89,7 +89,7 @@ export default defineComponent(() => {
       }}
     >
       <div class={'w-full  flex justify-center'}>
-        <img src="/bg/eat_top_bg.webp" alt="eat_bg"></img>
+        <img src="/tab/bg/eat_top_bg.webp" alt="eat_bg"></img>
       </div>
       <div class={'flex flex-col w-full justify-center items-center'}>
         <div

src/widgets/eat/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'todayEat',
   label: '今天吃什么',
   description: '今天吃什么呢？',
-  icon: '/icons/today_eat.png',
+  icon: '/tab/icons/today_eat.png',
   modal: null,
   list: [
 

src/widgets/gameNews/Modal.tsx

@@ -24,7 +24,7 @@ export default defineComponent(() => {
       }}
     >
       <div class={'flex w-full justify-center pb-5'}>
-        <img class={'h-[20px]'} src="/icons/游戏资讯@2x.png"></img>
+        <img class={'h-[20px]'} src="/tab/icons/游戏资讯@2x.png"></img>
       </div>
       <div class={'h-0 w-full flex-1'}>
         <div class={'w-full h-full overflow-y-scroll'} onWheel={handleScroll} ref={containerRef}>

src/widgets/gameNews/Small.tsx

@@ -7,18 +7,18 @@ export default defineComponent(() => {
     <div
       class="w-full h-full flex items-center px-3"
       style={{
-        background: `url('/bg/gamenews__back.png')`,
+        background: `url('/tab/bg/gamenews__back.png')`,
         backgroundSize: 'cover'
       }}
     >
-      <img class={'w-[48px] h-[48px]'} src={'/icons/gamenews__icon.png'}></img>
+      <img class={'w-[48px] h-[48px]'} src={'/tab/icons/gamenews__icon.png'}></img>
       <div class={'flex-1 flex justify-center'}>
         <div class="flex-col flex">
           <span class={'text-[16px] text-white'}>游戏资讯</span>
           <div class={'flex items-center text-[#fffc] text-[12px] '}>
             立即查看
             <div>
-              <img src="/icons/gt.png"></img>
+              <img src="/tab/icons/gt.png"></img>
             </div>
           </div>
         </div>

src/widgets/gameNews/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'gameNews',
   label: '游戏资讯',
   description: '游戏资讯',
-  icon: '/icons/game_news_icon.png',
+  icon: '/tab/icons/game_news_icon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/gameVideo/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'gameVideo',
   label: 'gameVideo',
   description: 'gameVideoDesc',
-  icon: '/icons/game_video.png',
+  icon: '/tab/icons/game_video.png',
   modal: null,
   list: [
     {

src/widgets/hotspot/Large.tsx

@@ -23,7 +23,7 @@ export default defineComponent(() => {
             <span class={'z-10'}>{value}</span>
             {store.type === key && (
               <img
-                src="/icons/hotspot/hot_tab_bg.png"
+                src="/tab/icons/hotspot/hot_tab_bg.png"
                 class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
                 alt="bg"
               />

src/widgets/hotspot/Middle.tsx

@@ -29,7 +29,7 @@ export default defineComponent(() => {
                 <span class={'z-10'}>{value}</span>
                 {store.type === key && (
                   <img
-                    src="/icons/hotspot/hot_tab_bg.png"
+                    src="/tab/icons/hotspot/hot_tab_bg.png"
                     class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
                     alt="bg"
                   />

src/widgets/hotspot/Modal.tsx

@@ -8,7 +8,7 @@ export default defineComponent(() => {
   return () => (
     <div class="w-full h-full bg-[#e4eaff] flex flex-col">
       <div class={'w-full h-[47px] flex  items-center  justify-center'}>
-        <img src="/icons/热搜榜@2x.png" class={'w-[65px] object-cover'}></img>
+        <img src="/tab/icons/热搜榜@2x.png" class={'w-[65px] object-cover'}></img>
       </div>
       <div class={'flex-1  h-0'}>
         <div class={'flex w-full h-full bg-white'}>
@@ -28,7 +28,7 @@ export default defineComponent(() => {
                 )}
               >
                 <img
-                  src={`/icons/hotspot/${key}_info.png`}
+                  src={`/tab/icons/hotspot/${key}_info.png`}
                   class={'w-[24px] h-[24px] object-cover'}
                 ></img>
                 <span>{value}热点</span>

src/widgets/hotspot/Small.tsx

@@ -7,14 +7,14 @@ export default defineComponent(() => {
       class="w-full h-full flex items-center px-3 bg-[#405fd2]"
  
     >
-      <img class={'w-[48px] h-[48px]'} src={'/icons/hot_information_icon.png'}></img>
+      <img class={'w-[48px] h-[48px]'} src={'/tab/icons/hot_information_icon.png'}></img>
       <div class={'flex-1 flex justify-center'}>
         <div class="flex-col flex">
           <span class={'text-[16px] text-white'}>热点折扣</span>
           <div class={'flex items-center text-[#fffc] text-[12px] '}>
             立即查看
             <div>
-              <img src="/icons/gt.png"></img>
+              <img src="/tab/icons/gt.png"></img>
             </div>
           </div>
         </div>

src/widgets/hotspot/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'hotspot',
   label: '热点资讯',
   description: '热点信息尽在此处',
-  icon: '/icons/hot_information_icon.png',
+  icon: '/tab/icons/hot_information_icon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/weApply/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'weApply',
   label: '大家都在用',
   description: '盘点近期大热的应用软件和热门游戏',
-  icon: '/icons/recommendedIcon.png',
+  icon: '/tab/icons/recommendedIcon.png',
   modal: null,
   list: [
     {

src/widgets/weather/Large.tsx

@@ -59,7 +59,7 @@ export default defineComponent(() => {
       <div
         class={'w-full h-[100px] absolute left-0 top-0 '}
         style={{
-          backgroundImage: `url('/weather_img/img/weather_bg_large.webp')`,
+          backgroundImage: `url('/tab/weather_img/img/weather_bg_large.webp')`,
           backgroundRepeat: 'no-repeat',
           backgroundSize: 'contain'
         }}

src/widgets/weather/Middle.tsx

@@ -59,7 +59,7 @@ export default defineComponent(() => {
       <div
         class={'w-full h-[100px] absolute left-0 top-0 '}
         style={{
-          backgroundImage: `url('/weather_img/img/weather_bg_mdeium.webp')`,
+          backgroundImage: `url('/tab/weather_img/img/weather_bg_mdeium.webp')`,
           backgroundRepeat: 'no-repeat',
           backgroundSize: 'contain'
         }}

src/widgets/weather/Modal.tsx

@@ -215,7 +215,7 @@ export default defineComponent(() => {
         <div class={'w-full h-full px-7 py-4 flex flex-col gap-y-3'}>
           <div class="flex">
             <div class={'flex flex-col text-[#333]'}>
-              <span class="text-[#666]">{store.weatherData?.city.name}</span>
+              <span class="text-[#666]">{nowWeather.value?.city.name}</span>
               <span class={'text-[57px] font-bold'}>{nowWeather.value?.base.stemp}°</span>
               <span class="text-[14px] flex gap-x-1">
                 {nowWeather.value?.base.weather}

src/widgets/weather/index.ts

@@ -5,7 +5,7 @@ export default {
   name: 'weather',
   label: '天气',
   description: '天气资讯',
-  icon: '/icons/weatherIcon.png',
+  icon: '/tab/icons/weatherIcon.png',
   modal: asyncLoader(() => import('./Modal')),
   list: [
     {

src/widgets/weather/weatherIcon.tsx

@@ -91,7 +91,7 @@ export default defineComponent({
     const idx = computed(() => list.indexOf(props.weather || '未知天气'))
 
     const url = computed(() => {
-      return idx.value < 0 ? '/weather_img/38.png' : `/weather_img/${idx.value}.png`
+      return idx.value < 0 ? '/tab/weather_img/38.png' : `/tab/weather_img/${idx.value}.png`
     })
     return () => (
       <>

vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig({
     host: '0.0.0.0',
     port: 8200
   },
+  base: '/tab',
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))