完成tomato弹窗部分和主体

src/App.vue

@@ -14,6 +14,8 @@ import { computed } from 'vue'
 import asyncLoader from './utils/asyncLoader'
 import useLayoutStore from './layout/useLayoutStore'
 import WelcomePage from './layout/grid/WelcomePage'
+import TomatoPage from './layout/grid/TomatoPage'
+import useRouterStore from './useRouterStore'
 const Grid = asyncLoader(() => import('./layout/grid'))
 const Fox = asyncLoader(() => import('./fox'))
 const settings = useSettingsStore()
@@ -21,6 +23,7 @@ const blockSize = computed(() => settings.state.blockSize + 'rem')
 const blockPadding = computed(() => settings.state.blockPadding + 'rem')
 const mainWidth = computed(() => settings.state.mainWidth + '%')
 const blockRadius = computed(() => settings.state.blockRadius)
+const router = useRouterStore()
 const layout = useLayoutStore()
 </script>
 <template>
@@ -31,7 +34,7 @@ const layout = useLayoutStore()
     <SettingsOverlay />
     <SettingsButton />
     <Sider />
-    <LoginModal />
+    <LoginModal v-if="router.path !== 'global-login'"/>
     <Grid v-if="layout.ready" />
     <Dock />
     <div class="fixed z-40 right-[14%] top-8">
@@ -40,6 +43,7 @@ const layout = useLayoutStore()
     <DirModal />
     <GlobalMenu />
     <WelcomePage></WelcomePage>
+    <TomatoPage></TomatoPage>
   </div>
 </template>
 

src/layout/background/index.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, ref, Transition, watch } from 'vue'
+import { defineComponent, Transition } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import useSettingsStore from '@/settings/useSettingsStore'
 import useBackgroundStore from './useBackgroundStore'
 
 export default defineComponent({
+  name: 'BackgroundPage',
   setup() {
     const layout = useLayoutStore()
     const background = useBackgroundStore()
@@ -34,7 +35,9 @@ export default defineComponent({
             backgroundColor: `rgba(0,0,0,${settings.state.maskOpacity})`,
             backdropFilter: `blur(${settings.state.maskFilter}px)`
           }}
-        ></div>
+        >
+
+        </div>
       </div>
     )
   }

src/layout/grid/TomatoPage.tsx

@@ -0,0 +1,102 @@
+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'
+import useTomatoStore from '@/widgets/work/useTomatoStore'
+import Search from '../header/search'
+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 background = useBackgroundStore()
+  const layout = useLayoutStore()
+
+  const store = useTomatoStore()
+  const isFirst = ref(false)
+  onMounted(() => {
+    // 检查 localStorage 是否已经有访问记录
+    const visited = localStorage.getItem('hasVisited')
+
+    if (!visited) {
+      // 如果没有记录，说明是第一次访问
+      isFirst.value = true
+      // 设置标记，后续访问不会再次显示
+    }
+  })
+  return () =>
+    !store.openFullscreen && (
+      <div class="fixed left-0 top-0 z-50 w-full ">
+        <Transition name="background">
+          {background.bgTrriger && (
+            <>
+              {layout.background.video ? (
+                <video src={layout.background.video} class="w-full h-screen" />
+              ) : (
+                <div
+                  class="w-full h-screen bg-center bg-cover bg-no-repeat"
+                  style={{
+                    backgroundImage: `url('${layout.background.image}')`
+                  }}
+                ></div>
+              )}
+            </>
+          )}
+        </Transition>
+        <Transition name="modal">
+
+          <div class={"w-[500px] h-[500px] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 "}>
+            {
+              Array.from({ length: 60 }).map((_, idx) => (
+                <div class={"bg-white w-[30px] h-[5px] absolute mt-[-2.5px] top-1/2"} style={{
+                  transformOrigin: '250px',
+                  borderRadius: '3px',
+                  transform: `rotateZ(${idx * 6}deg)`
+
+                }}>
+
+                </div>
+              ))
+            }
+            <div class={"w-[500px] flex justify-center flex-col items-center h-full "}>
+              <span class={"text-[24px] leading-[36px]"}>专注中</span>
+              <span class={"font-din text-[82px] font-bold leading-[115px]"}>15:00</span>
+              <div class={"relative"}>
+                <Search isMini></Search>
+              </div>
+              <div class={"w-full flex gap-x-3"}>
+                
+              </div>
+            </div>
+          </div>
+
+        </Transition>
+      </div>
+    )
+})

src/layout/header/search/index.tsx

@@ -6,24 +6,33 @@ import SearchConfig from './SearchConfig'
 import SearchHistory from './SearchHistory'
 import SearchSuggestion from './SearchSuggestion'
 import useLayoutStore from '@/layout/useLayoutStore'
+import clsx from 'clsx'
 
-export default defineComponent(() => {
+export default defineComponent((props: {
+  isMini?: boolean
+}) => {
   const settings = useSettingsStore()
   const search = useSearchStore()
   const searchConfig = useSearchConfigStore()
   const layout = useLayoutStore()
   return () => (
     <div
-      class="absolute left-1/2 -translate-x-1/2 z-20 transition-all"
+      class={clsx(!props?.isMini ? "absolute left-1/2 -translate-x-1/2 z-20 transition-all" : "w-full")}
-      style={{
+      style={
+        props.isMini ? {
+
+        } :
+          {
             top: layout.isCompact ? '40px' : '172px',
             width: settings.state.searchWidth + 'rem'
           }}
     >
       <div
         class={
-          'w-full h-11 shadow-content overflow-hidden max-w-[90vw] px-1 transition-all flex justify-between items-center gap-4 ' +
+          clsx(
-          (search.focus ? 'bg-white/60' : 'bg-white/40 hover:bg-white/60')
+            'w-full h-11 shadow-content overflow-hidden  px-1 transition-all flex justify-between items-center gap-4 ',
+            (search.focus ? 'bg-white/60' : 'bg-white/40 hover:bg-white/60'),
+            props.isMini ? "" : "max-w-[90vw] w-full")
         }
         style={{
           borderRadius: settings.state.searchRadius + 'px'
@@ -60,4 +69,7 @@ export default defineComponent(() => {
       </Transition>
     </div>
   )
+}, {
+  name: 'SearchComponent',
+  props: ['isMini']
 })

src/widgets/work/modal_view/data.tsx

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+
+export default defineComponent(() => {
+    return () => (
+        <div class={"w-full h-full"}>
+            
+        </div>
+    )
+})

src/widgets/work/modal_view/list.tsx

@@ -91,7 +91,11 @@ export default defineComponent(() => {
           <button class={"w-[126px] h-[44px] text-[16px] text-white rounded-lg gap-x-1  font-bold flex items-center justify-center"} style={{
             background: 'linear-gradient(225deg,#642FFF 0%,#5162FF 100%)',
             boxShadow: '0 2px 4px #0003'
-          }}>
+          }}
+            onClick={() => {
+              store.openFullscreen = true
+            }}
+          >
 
             <img src={PlayImg} alt="play img " class={"w-[13px]"} />
             开始计时

src/widgets/work/useTomatoStore.ts

@@ -21,9 +21,10 @@ export default defineStore("work", () => {
 
     })
     const openShowModel = ref<undefined | null | TomatoTarget>()
-
+    const openFullscreen = ref(false)
     return {
         state,
-        openShowModel
+        openShowModel,
+        openFullscreen
     }
 })