diff --git a/public/icons/work/tomotoIconEnd.png b/public/icons/work/tomotoIconEnd.png new file mode 100644 index 0000000..9e89a52 Binary files /dev/null and b/public/icons/work/tomotoIconEnd.png differ diff --git a/public/icons/work/tomotoback.png b/public/icons/work/tomotoback.png new file mode 100644 index 0000000..ff71ac9 Binary files /dev/null and b/public/icons/work/tomotoback.png differ diff --git a/src/layout/grid/TomatoPage.tsx b/src/layout/grid/TomatoPage.tsx index b5cb21f..c5f2fe4 100644 --- a/src/layout/grid/TomatoPage.tsx +++ b/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 && (
{background.bgTrriger && ( @@ -84,14 +88,55 @@ export default defineComponent(() => {
)) } -
+
专注中 - 15:00 + {!store.state.isStart ? '15:00' : formatSeconds(store.remainingTime)}
- +
+ + +
-
- +
+ +
{ + 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' + }}> + return +
+ + +
+ return +
+ + +
+ { + store.state.isPlaying ? + return + : + return + } + {musicList[store.state.selectMusic].name} +
+ start +
+
diff --git a/src/utils/tool.ts b/src/utils/tool.ts index 72ca3b6..58c4abd 100644 --- a/src/utils/tool.ts +++ b/src/utils/tool.ts @@ -22,4 +22,18 @@ export function generateRandomString(n: number): string { } return result; -} \ No newline at end of file +} +/** + * 将秒转换为“分:秒”的格式 + * @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')}`; +}