save

src/layout/grid/TomatoPage.tsx

@@ -1,11 +1,15 @@
 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 returnImg from "~/public/icons/work/return.png"
+import endImg from "~/public/icons/work/tomotoIconEnd.png"
+import playWaveGif from "~/public/icons/work/playMusicIcon.gif"
+import PlayStartImg from "~/public/icons/work/start.png"
+import musicIcon from "~/public/icons/work/musicIcon.png"
 import useBackgroundStore from '../background/useBackgroundStore'
 import useLayoutStore from '../useLayoutStore'
-import useTomatoStore from '@/widgets/work/useTomatoStore'
+import useTomatoStore, { musicList } from '@/widgets/work/useTomatoStore'
 import Search from '../header/search'
+import { Tooltip } from 'ant-design-vue'
+import { formatSeconds } from '@/utils/tool'
 export const DefaultPageSetting = [
   {
     name: '游戏',
@@ -51,7 +55,7 @@ export default defineComponent(() => {
     }
   })
   return () =>
-    !store.openFullscreen && (
+    store.openFullscreen && (
       <div class="fixed left-0 top-0 z-50 w-full ">
         <Transition name="background">
           {background.bgTrriger && (
@@ -84,16 +88,57 @@ export default defineComponent(() => {
                 </div>
               ))
             }
-            <div class={"w-[500px] flex justify-center flex-col items-center h-full "}>
+            <div class={"w-[500px] flex justify-center flex-col items-center gap-y-3 h-full text-white "}>
               <span class={"text-[24px] leading-[36px]"}>专注中</span>
-              <span class={"font-din text-[82px] font-bold leading-[115px]"}>15:00</span>
+              <span class={"font-din text-[82px] font-bold leading-[115px]"}>{!store.state.isStart ? '15:00' : formatSeconds(store.remainingTime)}</span>
               <div class={"relative"}>
+                <div class={"aboslute w-[370px]"}>
                   <Search isMini></Search>
-              </div>
-              <div class={"w-full flex gap-x-3"}>
 
                 </div>
               </div>
+              <div class={"w-full flex gap-x-4 justify-center mt-5"}>
+                <Tooltip title={"返回工作模式"}>
+                  <div
+                    onClick={() => {
+                      store.openFullscreen = false
+                    }}
+                    class={"w-[44px] h-[44px] flex items-center justify-center rounded-lg cursor-pointer hover:opacity-90"}
+                    style={{
+                      background: 'linear-gradient(225deg,#707eff 0%,#6b97ff 100%)',
+                      boxShadow: '0 2px 4px #0003'
+                    }}>
+                    <img src={returnImg} alt='return' class={"w-[18px] h-[18px]"}></img>
+                  </div>
+                </Tooltip>
+                <Tooltip title={"停止"}>
+                  <div
+                    class={"w-[44px] h-[44px] flex items-center justify-center rounded-lg cursor-pointer hover:opacity-90"}
+                    style={{
+                      background: 'linear-gradient(225deg,#707eff 0%,#6b97ff 100%)',
+                      boxShadow: '0 2px 4px #0003'
+                    }}>
+                    <img src={endImg} alt='return' class={"w-[18px] h-[18px]"}></img>
+                  </div>
+                </Tooltip>
+
+                <div class={"w-[140px] h-[44px] relative bg-[#f0f0f0] rounded-lg flex px-3 items-center justify-between cursor-pointer hover:opacity-90"}
+                  style={{
+                    boxShadow: '0 2px 4px #0003'
+                  }}>
+                  {
+                    store.state.isPlaying ?
+                      <img src={playWaveGif} alt='return' class={"w-[18px] h-[18px] "}></img>
+                      :
+                      <img src={musicIcon} alt='return' class={"w-[18px] h-[18px] "}></img>
+                  }
+                  <span class={"whitespace-nowrap text-ellipsis overflow-hidden text-[#333]"}>{musicList[store.state.selectMusic].name}</span>
+                  <div class={"w-[26px] h-[26px] right-[-14px] rounded-full bg-[#c0c0c0] absolute flex items-center justify-center"}>
+                    <img src={PlayStartImg} alt='start ' class={"w-[12px] h-[12px]"}></img>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
 
         </Transition>

src/utils/tool.ts

@@ -23,3 +23,17 @@ export function generateRandomString(n: number): string {
 
   return result;
 }
+/**
+ * 将秒转换为“分:秒”的格式
+ * @param seconds - 输入的秒数
+ * @returns 格式化后的字符串，格式为“MM:SS”
+ */
+export function formatSeconds(seconds: number): string {
+  // 计算分钟数
+  const minutes = Math.floor(seconds / 60);
+  // 计算剩余的秒数
+  const remainingSeconds = seconds % 60;
+  
+  // 返回格式化后的字符串，确保分钟和秒数都是两位数
+  return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
+}