diff --git a/public/icons/work/music/AVeryBradySpecial.mp3 b/public/icons/work/music/AVeryBradySpecial.mp3 new file mode 100644 index 0000000..065fc4b Binary files /dev/null and b/public/icons/work/music/AVeryBradySpecial.mp3 differ diff --git a/public/icons/work/music/AWonderfulStore.mp3 b/public/icons/work/music/AWonderfulStore.mp3 new file mode 100644 index 0000000..6dc5121 Binary files /dev/null and b/public/icons/work/music/AWonderfulStore.mp3 differ diff --git a/public/icons/work/music/AsignalRose.mp3 b/public/icons/work/music/AsignalRose.mp3 new file mode 100644 index 0000000..9a26f36 Binary files /dev/null and b/public/icons/work/music/AsignalRose.mp3 differ diff --git a/public/icons/work/music/aPartOfUs.mp3 b/public/icons/work/music/aPartOfUs.mp3 new file mode 100644 index 0000000..3cc812a Binary files /dev/null and b/public/icons/work/music/aPartOfUs.mp3 differ diff --git a/public/icons/work/music/aThousandLifetimes.mp3 b/public/icons/work/music/aThousandLifetimes.mp3 new file mode 100644 index 0000000..d2d8255 Binary files /dev/null and b/public/icons/work/music/aThousandLifetimes.mp3 differ 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')}`; +} diff --git a/src/widgets/work/Large.tsx b/src/widgets/work/Large.tsx index b83de91..996ea16 100644 --- a/src/widgets/work/Large.tsx +++ b/src/widgets/work/Large.tsx @@ -3,7 +3,7 @@ import { defineComponent } from 'vue' export default defineComponent(() => { return () => (
- large +
) }) diff --git a/src/widgets/work/modal_view/list.tsx b/src/widgets/work/modal_view/list.tsx index ab5f73b..5462391 100644 --- a/src/widgets/work/modal_view/list.tsx +++ b/src/widgets/work/modal_view/list.tsx @@ -1,6 +1,7 @@ import { computed, defineComponent, ref } from 'vue' import useTomatoStore from '../useTomatoStore' import NoDataImg from "~/public/icons/work/noData.png" +import StopImg from "~/public/icons/work/tomotoIconEnd.png" import clsx from 'clsx' import dayjs from 'dayjs' import PlayImg from "~/public/icons/work/work_page-play.png" @@ -88,18 +89,36 @@ export default defineComponent(() => { 你今日已完成 {store.state.list.filter(val => dayjs(val.finishTime).isSame(dayjs(), 'day') && val.isCompleted).length}个番茄时 不积跬步无以至千里、千里之行始于足下。
- : + + + } - play img - 开始计时 - diff --git a/src/widgets/work/useTomatoStore.ts b/src/widgets/work/useTomatoStore.ts index 200c384..f4fcc19 100644 --- a/src/widgets/work/useTomatoStore.ts +++ b/src/widgets/work/useTomatoStore.ts @@ -1,6 +1,14 @@ +import useTimeStore from "@/utils/useTimeStore"; +import dayjs from "dayjs"; import { defineStore } from "pinia"; -import { reactive, ref } from "vue"; +import { computed, reactive, ref, watch } from "vue"; +import APartOfUsMusic from "~/public/icons/work/music/aPartOfUs.mp3" +import AsignalRose from "~/public/icons/work/music/AsignalRose.mp3" +import AThousandLifetimes from "~/public/icons/work/music/aThousandLifetimes.mp3" +import AVeryBradySpecial from "~/public/icons/work/music/AVeryBradySpecial.mp3" +import AWonderfulStore from "~/public/icons/work/music/AWonderfulStore.mp3" +const TOTAL_TIME = 60 * 60 * 15 export type TomatoTarget = { id: string; finishTime: number; @@ -13,18 +21,99 @@ export type TomatoTime = { date: number; finishTime: number; } - +export const musicList = [ + { + name: 'A Part of Us', + music: APartOfUsMusic + }, { + name: 'a signal rose', + music: AsignalRose + }, { + name: 'a thousand lifetimes', + music: AThousandLifetimes + }, { + name: 'A Very Brady Special', + music: AVeryBradySpecial + }, { + name: 'A Wonderful Story', + music: AWonderfulStore + } +] export default defineStore("work", () => { const state = reactive({ list: [] as TomatoTarget[], - timeList: [] as TomatoTime[] + timeList: [] as TomatoTime[], + isPlaying: false as boolean, + selectMusic: 0, + isStart: false as boolean, + beginTime: -1 as number }) + + const time = useTimeStore() + const beginTomatoTime = () => { + state.beginTime = dayjs().valueOf() + state.isStart = true + playMusic() + } + const stopTomatoTime = () => { + state.isStart = false + state.beginTime = -1 + stopMusic() + } + const remainingTime = computed(() => { + const totalTime = TOTAL_TIME + + return dayjs(state.beginTime).add(15, 'minute').diff(dayjs(time.date), 'second') + }) + const playAudio = computed(() => { + const audio = new Audio(musicList[state.selectMusic].music) + return audio + }) + watch(() => remainingTime, (val) => { + if (val.value < 0) { + state.isPlaying = false + state.isStart = false + state.beginTime = -1 + state.timeList.push({ + date: dayjs().valueOf(), + finishTime: TOTAL_TIME + }) + } + }) + // watch(() => state.isPlaying, (val) => { + // if (val) { + // playAudio.value.play() + // } else { + // playAudio.value.pause() + + // } + // }) + const playMusic = () => { + state.isPlaying = true + playAudio.value.play() + } + + const pauseMusic = () => { + state.isPlaying = false + playAudio.value.pause() + } + const stopMusic = () => { + state.isPlaying = false + playAudio.value.pause() + playAudio.value.currentTime = 0 + } const openShowModel = ref() const openFullscreen = ref(false) return { state, openShowModel, - openFullscreen + openFullscreen, + beginTomatoTime, + remainingTime, + playMusic, + pauseMusic, + stopMusic, + stopTomatoTime } }) \ No newline at end of file