完成了开始模式选择页面，欢迎页，适配了设置项的夜间模式

src/App.vue

@@ -13,6 +13,7 @@ import LoginModal from './user/LoginModal'
 import { computed } from 'vue'
 import asyncLoader from './utils/asyncLoader'
 import useLayoutStore from './layout/useLayoutStore'
+import WelcomePage from './layout/grid/WelcomePage'
 const Grid = asyncLoader(() => import('./layout/grid'))
 const Fox = asyncLoader(() => import('./fox'))
 const settings = useSettingsStore()
@@ -38,6 +39,7 @@ const layout = useLayoutStore()
     </div>
     <DirModal />
     <GlobalMenu />
+    <WelcomePage></WelcomePage>
   </div>
 </template>
 

src/layout/background/BackgroundPage.tsx

@@ -5,6 +5,7 @@ import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-desig
 import SettingItem from '@/settings/SettingItem'
 import useSettingsStore from '@/settings/useSettingsStore'
 import useRouterStore from '@/useRouterStore'
+import clsx from 'clsx'
 
 export default defineComponent(() => {
   const layout = useLayoutStore()
@@ -63,6 +64,7 @@ export default defineComponent(() => {
           </Button>
           <Button
             type="text"
+            class={clsx(useLayoutStore().state.current === 0 && 'text-white')}
             icon={<DownloadOutlined />}
             onClick={() => {
               window.open(layout.background.video || layout.background.image, '_blank')

src/layout/dock/index.tsx

@@ -14,15 +14,12 @@ export default defineComponent(() => {
     ref('dock')
   )
   const current = ref(-1)
-  // window.addEventListener('keydown', (e) => {
-  //   const i = layout.state.dockLabels.indexOf(e.key)
-  //   if (i >= 0) {
-  //     layout.state.dock[i] = null
-  //   }
-  // })
   return () =>
     setting.state.showDock !== '' && (
       <div
+        onDragover={()=> {
+          show.value = true
+        }}
         onMouseenter={() => {
           show.value = true
         }}
@@ -39,7 +36,7 @@ export default defineComponent(() => {
             setting.state.showDock === 'auto'
               ? show.value
                 ? 'bottom-4'
-                : '-bottom-24'
+                : '-bottom-[90px]'
               : 'bottom-4'
           )}
           ref={container}

src/layout/grid/DockSetting.tsx

@@ -60,8 +60,8 @@ export default defineComponent({
               else settings.state.showDock = 'show'
             }}
           />
-        </SettingItem>{' '}
+        </SettingItem>
-        <div class={'flex flex-col  text-[#333]'}>
+        <div class={'flex flex-col  '}>
           <span class={'font-bold'}>快捷键设置</span>
           <p class={'text-[12px] text-[#999]'}>选中要更换快捷键的目标，点击键盘即可更换快捷键</p>
           <div class={'w-full h-[1px] bg-[#ddd] mt-2'}></div>
@@ -70,9 +70,10 @@ export default defineComponent({
               <div class="w-full flex gap-x-4">
                 <span class={'w-[20px]'}>{idx + 1}</span>
                 <div
-                  class={
+                  class={clsx(
-                    'flex-1 bg-black/[0.05] text-[#333] border-[1px] py-1 rounded-lg relative flex items-center  pl-4 border-transparent hover:border-[#ffa94d]'
+
-                  }
+                    'flex-1 bg-black/[0.05]  border-[1px] py-1 rounded-lg relative flex items-center  pl-4 border-transparent hover:border-[#ffa94d]'
+                  )}
                 >
                   <Select
                     onChange={(e) => {

src/layout/grid/SiderSetting.tsx

@@ -3,12 +3,14 @@ import useSettingsStore from '@/settings/useSettingsStore'
 import { Switch } from 'ant-design-vue'
 import clsx from 'clsx'
 import { defineComponent } from 'vue'
+import useLayoutStore from '../useLayoutStore'
 
 export default defineComponent({
   name: 'SiderSetting',
   props: {},
   setup() {
     const settings = useSettingsStore()
+    const layout = useLayoutStore()
     return () => (
       <div class="p-4 flex flex-col gap-y-4 ">
         <div
@@ -20,8 +22,11 @@ export default defineComponent({
                 settings.state.siderDirection = 'left'
               }}
               class={clsx(
-                'bg-white flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
+                ' flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
-                settings.state.siderDirection === 'left' ? 'border-[#ffa94d]' : 'border-transparent'
+                settings.state.siderDirection === 'left'
+                  ? 'border-[#ffa94d]'
+                  : 'border-transparent',
+                layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
               )}
             >
               <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
@@ -48,10 +53,11 @@ export default defineComponent({
                 settings.state.siderDirection = 'right'
               }}
               class={clsx(
-                'bg-white flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
+                ' flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
                 settings.state.siderDirection === 'right'
                   ? 'border-[#ffa94d]'
-                  : 'border-transparent'
+                  : 'border-transparent',
+                layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
               )}
             >
               <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>

src/layout/grid/WelcomePage.tsx

@@ -0,0 +1,141 @@
+import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
+import WelcomeImg from '~/public/icons/welcome/welcomeTitle.png'
+import DivBgImg from '~/public/icons/welcome/back.png'
+import startUseImg from '~/public/icons/welcome/startUse.png'
+import useBackgroundStore from '../background/useBackgroundStore'
+import useLayoutStore from '../useLayoutStore'
+export const DefaultPageSetting = [
+  {
+    name: '游戏',
+    backgroundUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
+    contentUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
+    desct: '聚合多类游戏工具，以及 资讯、排行榜'
+  },
+  {
+    name: '工作台',
+    backgroundUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp',
+    contentUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp',
+    desct: '结合番茄计时法等效率工具，让您可以高效学'
+  },
+  {
+    name: '轻娱',
+    backgroundUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
+    contentUrl:
+      'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
+    desct: '综合办公、学习、游戏等 属性，功能较为均'
+  }
+]
+export default defineComponent(() => {
+  const show = computed(() => true)
+  const selectMode = ref(0)
+  const layout = useLayoutStore()
+
+  const isFirst = ref(false)
+  onMounted(() => {
+    // 检查 localStorage 是否已经有访问记录
+    const visited = localStorage.getItem('hasVisited')
+
+    if (!visited) {
+      // 如果没有记录，说明是第一次访问
+      isFirst.value = true
+      // 设置标记，后续访问不会再次显示
+    }
+  })
+  return () =>
+    isFirst.value && (
+      <div class="fixed left-0 top-0 z-50 w-full ">
+        <Transition>
+          {show.value && (
+            <div
+              class="w-full h-screen bg-black/60 "
+              onClick={() => {}}
+              style={{
+                backgroundImage: `url('${DefaultPageSetting[selectMode.value].backgroundUrl}')`,
+                backgroundSize: '100% 100%',
+                backgroundPosition: 'center center',
+                backgroundRepeat: 'no-repeat'
+              }}
+            >
+              <div class="w-full h-screen bg-black/60 " onClick={() => {}}></div>
+            </div>
+          )}
+        </Transition>
+        <Transition name="modal">
+          <div class="w-[1000px] items-center justify-center gap-y-2 flex flex-col z-30 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ">
+            <div
+              class={'w-[812px] h-[46px] flex justify-center mb-[10px] '}
+              style={{
+                backgroundImage: `url('${WelcomeImg}')`,
+                backgroundSize: '100% 100%',
+                backgroundPosition: 'center center',
+                backgroundRepeat: 'no-repeat'
+              }}
+            >
+              <span class={'leading-[20px] -mt-2 text-[20px] text-white '}>请选择您的初始模式</span>
+            </div>
+            <div class={'w-full h-[370px] flex justify-center'}>
+              <div class={'w-[868px] h-[370px] '}>
+                <div class={'relative w-full h-full flex justify-center'}>
+                  {DefaultPageSetting.map((item, idx) => (
+                    <div
+                      class={
+                        ' w-[709px] h-[370px] cursor-pointer duration-150 absolute top-0 left-0 bg-[#2c2e3e] p-3 overflow-hidden rounded-2xl'
+                      }
+                      onClick={() => {
+                        selectMode.value = idx
+                      }}
+                      style={{
+                        transform: `translate(${idx === selectMode.value ? 80 : idx === (selectMode.value + 1) % 2 ? 219 : -52}px) scale(${
+                          idx === selectMode.value ? 1 : 0.85
+                        })`,
+                        backgroundImage: `url('${DivBgImg}')`,
+                        backgroundSize: '100% 100%',
+                        zIndex: selectMode.value === idx ? 10 : 0
+                      }}
+                    >
+                      <div
+                        class={'w-full h-full rounded-2xl'}
+                        style={{
+                          backgroundImage: `url('${item.contentUrl}')`,
+                          backgroundSize: '100% 100%',
+                          backgroundPosition: 'center center',
+                          backgroundRepeat: 'no-repeat'
+                        }}
+                      ></div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div class={'flex flex-col items-center gap-y-1 text-white'}>
+              <span>{DefaultPageSetting[selectMode.value].name}模式</span>
+              <span class={'w-[180px]'}>{DefaultPageSetting[selectMode.value].desct}</span>
+            </div>
+            <div
+              class={
+                'w-[175px] h-[41px] mt-4 flex items-center justify-center text-[#333] cursor-pointer'
+              }
+              onClick={() => {
+                localStorage.setItem('hasVisited', 'true')
+                isFirst.value = false
+                layout.changeBackground(DefaultPageSetting[selectMode.value].backgroundUrl)
+              }}
+              style={{
+                backgroundImage: `url('${startUseImg}')`,
+                backgroundSize: '100% 100%',
+                backgroundPosition: 'center center',
+                backgroundRepeat: 'no-repeat'
+              }}
+            >
+              开始使用
+            </div>
+          </div>
+        </Transition>
+      </div>
+    )
+})

src/layout/sider/index.tsx

@@ -80,6 +80,9 @@ export default defineComponent(() => {
             'w-[130px]   min-h-[620px] hover:bg-red-10 z-20 fixed top-1/2 -translate-y-1/2 bottom-0 ',
             settings.state.siderDirection === 'left' ? 'left-0' : 'right-0'
           )}
+          onDragover={() => {
+            show.value = true
+          }}
           onMouseleave={() => {
             show.value = false
           }}

src/settings/SettingItem.tsx

@@ -1,5 +1,6 @@
+import useLayoutStore from '@/layout/useLayoutStore'
 import clsx from 'clsx'
-import { defineComponent, type SlotsType, type VNode } from 'vue'
+import { computed, defineComponent, type SlotsType, type VNode } from 'vue'
 
 export default defineComponent({
   props: {
@@ -22,18 +23,25 @@ export default defineComponent({
     end?: () => VNode[]
   }>,
   setup(props, ctx) {
+    const layout = useLayoutStore()
+    const isGame = computed(() => {
+      return layout.state.current === 0
+    })
     return () => (
       <div
         class={clsx('flex items-center w-full py-2 px-3 rounded-lg justify-between', {
           'rounded-b-none': props.noRoundedB,
           'rounded-t-none': props.noRoundedT,
-          'bg-black/5': !props.noBg
+          'bg-black/5': !props.noBg && !isGame.value,
+          'bg-white/10': !props.noBg && isGame.value
         })}
         style={{
           marginBottom: props.noRoundedB ? 0 : '12px'
         }}
       >
-        <div class="text-sm text-black/60 mr-4">{ctx.slots.label?.()}</div>
+        <div class={clsx('text-sm  mr-4', isGame.value ? 'text-white' : 'text-black/60')}>
+          {ctx.slots.label?.()}
+        </div>
         <div class="">{ctx.slots.default?.()}</div>
         {/* {ctx.slots.end?.()} */}
       </div>

src/settings/SettingsOverlay.tsx

@@ -1,7 +1,12 @@
+import useLayoutStore from '@/layout/useLayoutStore'
 import AvatarCircle from '@/user/AvatarCircle'
+import useUserStore from '@/user/useUserStore'
 import useRouterStore from '@/useRouterStore'
 import asyncLoader from '@/utils/asyncLoader'
+import clsx from 'clsx'
+import { OhVueIcon } from 'oh-vue-icons'
 import { computed, defineComponent, Transition } from 'vue'
+import SettingLineImg from '~/public/icons/settingLine.png'
 const Content = asyncLoader(() => import('./SettingsOverlayContent'))
 
 const SettingsTab = defineComponent({
@@ -17,12 +22,23 @@ const SettingsTab = defineComponent({
   },
   setup(props) {
     const router = useRouterStore()
+    const layout = useLayoutStore()
+    const isGame = computed(() => {
+      return layout.state.current === 0
+    })
     return () => (
       <div
-        class={
+        class={clsx(
-          'w-full h-[30px] leading-[30px] text-sm text-center rounded-lg text-slate-600 my-1 transition-all cursor-pointer hover:bg-white/70 ' +
+          'w-full h-[30px] leading-[30px] text-sm text-center rounded-lg  my-1 transition-all cursor-pointer ',
-          (router.path === props.path ? 'bg-white/70 font-bold shadow-lg' : '')
+          {
-        }
+            'bg-white/30 text-[#fff] hover:bg-white/30  ':
+              isGame.value && props.path === router.path,
+            'bg-white/70 hover:bg-white/70  text-[#333] ':
+              !isGame.value && props.path === router.path,
+            'text-[#fff]  hover:bg-white/30': isGame.value && props.path !== router.path,
+            'text-[#999]  hover:bg-white/70': !isGame.value && props.path !== router.path
+          }
+        )}
         onClick={() => {
           router.go(props.path as any)
         }}
@@ -35,7 +51,12 @@ const SettingsTab = defineComponent({
 
 export default defineComponent(() => {
   const router = useRouterStore()
+  const { profile } = useUserStore()
   const show = computed(() => router.path.startsWith('settings-'))
+  const layout = useLayoutStore()
+  const isGame = computed(() => {
+    return layout.state.current === 0
+  })
   return () => (
     <div class="fixed left-0 bottom-0 z-40 w-full">
       {/* 背景遮罩 */}
@@ -50,31 +71,64 @@ export default defineComponent(() => {
       {/* 弹框主体 */}
       <Transition name="settings">
         {show.value && (
-          <div class="absolute left-6 bottom-20 bg-white w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
+          <div
-            <div class="w-[200px] p-4 h-full bg-[#ebebeb] backdrop-blur flex flex-col">
+            class={clsx(
+              'absolute left-6 bottom-10   w-[660px] h-[580px] rounded-lg overflow-hidden shadow-2xl flex',
+              isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#000] bg-white'
+            )}
+          >
+            <div
+              class={clsx(
+                'w-[200px] p-4 h-full  backdrop-blur flex flex-col',
+                isGame.value ? 'bg-[#fff]/10 text-white ' : 'bg-[#ebebeb]'
+              )}
+            >
               <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 ' +
+                  'w-full h-0 flex-grow mb-4 rounded-lg  transition-all flex justify-center items-center '
-                  (router.path === 'settings-user' ? 'bg-white/70 shadow-lg' : '')
                 }
-                onClick={() => {
-                  router.go('settings-user')
-                }}
               >
-                <div class="w-12 h-12 relative">
+                <div class=" relative">
-                  <AvatarCircle />
+                  {profile.id ? (
+                    <div
+                      class="w-16 h-16 rounded-full overflow-hidden cursor-pointer"
+                      onClick={() => {
+                        router.go('settings-user')
+                      }}
+                    >
+                      <AvatarCircle />
+                    </div>
+                  ) : (
+                    <div
+                      class={'px-7 py-2  rounded-md cursor-pointer'}
+                      style={{
+                        background: 'linear-gradient(180deg,#ffaa4e 0%,#ff6227 100%)'
+                      }}
+                      onClick={() => {
+                        router.go('settings-user')
+                      }}
+                    >
+                      登录注册
+                    </div>
+                  )}
                 </div>
               </div>
-              <div class={'w-full mb-5 h-[1px] bg-[#000000] opacity-10'}></div>
+              {isGame.value ? (
-              <SettingsTab label="壁纸" path="settings-background" />
+                <img class={'mb-5 '} src={SettingLineImg}></img>
-              <SettingsTab label="图标" path="settings-block" />
+              ) : (
-              <SettingsTab label="搜索" path="settings-search" />
+                <div class={'w-full mb-5 h-[1px] bg-[#000000] opacity-10'}></div>
-              <SettingsTab label="时间" path="settings-time" />
+              )}
-              <SettingsTab label="侧边栏" path="settings-sider" />
+              <div class={'flex flex-col overflow-y-auto h-[370px] scrollbar-hide'}>
-              <SettingsTab label="AI助手" path="settings-ai" />
+                <SettingsTab label="壁纸" path="settings-background" />
-              <SettingsTab label="快捷栏" path="settings-dock" />
+                <SettingsTab label="图标" path="settings-block" />
-              <SettingsTab label="重置" path="settings-reset" />
+                <SettingsTab label="搜索" path="settings-search" />
-              <SettingsTab label="问题反馈" path="settings-fallback" />
+                <SettingsTab label="时间" path="settings-time" />
+                <SettingsTab label="侧边栏" path="settings-sider" />
+                <SettingsTab label="AI助手" path="settings-ai" />
+                <SettingsTab label="快捷栏" path="settings-dock" />
+                <SettingsTab label="重置" path="settings-reset" />
+                <SettingsTab label="问题反馈" path="settings-fallback" />
+              </div>
             </div>
             <Content />
           </div>

src/user/UserPage.tsx

@@ -5,11 +5,14 @@ import AvatarCircle from './AvatarCircle'
 import useUserStore from './useUserStore'
 import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
 import { globalToast } from '@/main'
+import clsx from 'clsx'
+import useLayoutStore from '@/layout/useLayoutStore'
 
-const labelStyle = 'w-16 text-black/60'
+const labelStyle = 'w-16'
 
 export default defineComponent(() => {
   const router = useRouterStore()
+  const layout = useLayoutStore()
   const user = useUserStore()
   return () => (
     <div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
@@ -19,7 +22,12 @@ export default defineComponent(() => {
         </div>
       </div>
       {user.isLogin && (
-        <div class="h-0 flex-grow py-4 px-12">
+        <div
+          class={clsx(
+            'h-0 flex-grow py-4 px-12 ',
+            layout.state.current === 0 ? 'text-white' : 'text-[#333]'
+          )}
+        >
           <div class="flex py-2">
             <div class={labelStyle}>用户名:</div>
             <div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
@@ -52,6 +60,7 @@ export default defineComponent(() => {
             </Button>
             <Button
               type="text"
+              class={'text-[#999] hover:text-[#999]'}
               icon={<LogoutOutlined />}
               onClick={() => {
                 Modal.confirm({

vite.config.ts

@@ -30,7 +30,8 @@ export default defineConfig({
   base: '/tab',
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '~': fileURLToPath(new URL('./', import.meta.url))
     }
   },
   build: {