From 56a9c28ec1cd95b8ead467ebdccbde1bbce986cb Mon Sep 17 00:00:00 2001 From: plightfield <1207120484@qq.com> Date: Fri, 15 Nov 2024 21:01:19 +0800 Subject: [PATCH] change --- src/layout/background/BackgroundSwtich.tsx | 17 +- src/layout/background/index.tsx | 110 ++++++++-- src/layout/background/useBackgroundStore.ts | 4 +- src/layout/grid/TomatoPage.tsx | 221 ++++++++++---------- src/main.css | 26 +-- 5 files changed, 223 insertions(+), 155 deletions(-) diff --git a/src/layout/background/BackgroundSwtich.tsx b/src/layout/background/BackgroundSwtich.tsx index a85d971..8db7d7d 100644 --- a/src/layout/background/BackgroundSwtich.tsx +++ b/src/layout/background/BackgroundSwtich.tsx @@ -13,7 +13,6 @@ import CustomWallpaper from './CustomWallpaper' addIcons(BiChevronLeft, BiChevronDown) - const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸'] export type BackgroundType = { id: string @@ -51,11 +50,12 @@ export default defineComponent(() => { (e) => { if (!e[0]) return wallpaperList.value = [] - request('GET', `/api/app/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then( - (res) => { - wallpaperList.value = res - } - ) + request( + 'GET', + `/api/app/backgrounds?typeId=${e[0]}&sort=${sortBy.value}` + ).then((res) => { + wallpaperList.value = res + }) }, { immediate: true @@ -166,10 +166,6 @@ export default defineComponent(() => {
{ layout.changeBackground(item.url) - background.bgTrriger = false - setTimeout(() => { - background.bgTrriger = true - }, 0) }} class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden" > @@ -201,7 +197,6 @@ export default defineComponent(() => {
{ - if (index === 2) { if (!userStore.isLogin) { router.go('global-login') diff --git a/src/layout/background/index.tsx b/src/layout/background/index.tsx index 5e37035..ba35c9d 100644 --- a/src/layout/background/index.tsx +++ b/src/layout/background/index.tsx @@ -1,31 +1,103 @@ -import { defineComponent, Transition } from 'vue' +import { defineComponent, nextTick, reactive, ref, Transition, watch } from 'vue' import useLayoutStore from '../useLayoutStore' import useSettingsStore from '@/settings/useSettingsStore' -import useBackgroundStore from './useBackgroundStore' + +const BgContent = defineComponent({ + props: { + image: { + type: String, + required: false, + default: '' + }, + video: { + type: String, + required: false, + default: '' + }, + zIndex: { + type: Number, + required: false, + default: 0 + } + }, + setup(props) { + return () => ( +
+ {props.video ? ( +
+ ) + } +}) export default defineComponent({ name: 'BackgroundPage', setup() { const layout = useLayoutStore() - const background = useBackgroundStore() const settings = useSettingsStore() + const animate = ref(false) + const pair = reactive<{ + front: typeof layout.background | null + back: typeof layout.background | null + }>({ front: { ...layout.background }, back: null }) + let first = false + watch(layout.background, (val) => { + if (!first) { + first = true + pair.front = { ...val } as any + pair.back = null + return + } + animate.value = true + nextTick(() => { + // 让前面的消失，后面的显式 + pair.front = null + pair.back = { ...val } + }) + }) + watch( + () => pair.front, + (val) => { + if (val === null) { + setTimeout(() => { + animate.value = false + nextTick(() => { + pair.front = { ...pair.back } as any + pair.back = null + }) + }, 600) + } + } + ) + watch(pair, console.log) return () => (
- - {background.bgTrriger && ( - <> - {layout.background.video ? ( -
) } diff --git a/src/layout/background/useBackgroundStore.ts b/src/layout/background/useBackgroundStore.ts index 0482552..760a97c 100644 --- a/src/layout/background/useBackgroundStore.ts +++ b/src/layout/background/useBackgroundStore.ts @@ -3,7 +3,6 @@ import { reactive, ref, watch } from 'vue' export default defineStore('background', () => { const tag = ref(localStorage.getItem('backgroundTag') || '') - const bgTrriger = ref(true) const resource = reactive({ type: 'image', brief: '', @@ -30,7 +29,6 @@ export default defineStore('background', () => { ) return { tag, - resource, - bgTrriger + resource } }) diff --git a/src/layout/grid/TomatoPage.tsx b/src/layout/grid/TomatoPage.tsx index 837b73c..348cdbd 100644 --- a/src/layout/grid/TomatoPage.tsx +++ b/src/layout/grid/TomatoPage.tsx @@ -1,16 +1,15 @@ -import { computed, defineComponent, onMounted, ref, Transition, watch } from 'vue' -import returnImg from "~/icons/work/return.png" -import endImg from "~/icons/work/tomotoIconEnd.png" -import playWaveGif from "~/icons/work/playMusicIcon.gif" -import PlayStartImg from "~/icons/work/start.png" -import musicIcon from "~/icons/work/musicIcon.png" -import useBackgroundStore from '../background/useBackgroundStore' -import useLayoutStore from '../useLayoutStore' +import { defineComponent, onMounted, ref, Transition } from 'vue' +import returnImg from '~/icons/work/return.png' +import endImg from '~/icons/work/tomotoIconEnd.png' +import playWaveGif from '~/icons/work/playMusicIcon.gif' +import PlayStartImg from '~/icons/work/start.png' +import musicIcon from '~/icons/work/musicIcon.png' import useTomatoStore, { musicList } from '@/widgets/work/useTomatoStore' import Search from '../header/search' import { Modal, Tooltip } from 'ant-design-vue' import { formatSeconds } from '@/utils/tool' import clsx from 'clsx' +import Background from '../background' export const DefaultPageSetting = [ { name: '游戏', @@ -38,8 +37,6 @@ export const DefaultPageSetting = [ } ] export default defineComponent(() => { - const background = useBackgroundStore() - const layout = useLayoutStore() const store = useTomatoStore() const isFirst = ref(false) const showSelectModal = ref(false) @@ -57,129 +54,135 @@ export default defineComponent(() => { return () => store.openFullscreen && (
- - - {background.bgTrriger && ( - <> - {layout.background.video ? ( - + +
- -
- - + { showSelectModal.value = false - }}> -
- 音乐选择 -
- { - musicList.map((item, idx) => ( -
{ - store.state.selectMusic = idx - store.setTrack(idx) - }} - class={"bg-black/[0.05] cursor-pointer rounded-lg text-[#333] text-[14px] py-2 pl-10 border-[1px] relative border-transparent hover:border-[#5955FB]"}> - { - store.state.selectMusic === idx && - - - } - {item.name} -
- )) - } + }} + > +
+ 音乐选择 +
+ {musicList.map((item, idx) => ( +
{ + store.state.selectMusic = idx + store.setTrack(idx) + }} + class={ + 'bg-black/[0.05] cursor-pointer rounded-lg text-[#333] text-[14px] py-2 pl-10 border-[1px] relative border-transparent hover:border-[#5955FB]' + } + > + {store.state.selectMusic === idx && ( + + )} + {item.name} +
+ ))}
+ }} + > + 确定 +
-
- { - Array.from({ length: 60 }).map((_, idx) => ( -
= idx) ? "bg-white" : "bg-white/50" - )} style={{ +
+ {Array.from({ length: 60 }).map((_, idx) => ( +
= idx ? 'bg-white' : 'bg-white/50' + )} + style={{ transformOrigin: '250px', borderRadius: '3px', transform: `rotateZ(${idx * 6}deg)` - - }}> - -
- )) - } + }} + >
+ ))}
-
- 专注中 - {!store.state.isStart ? '15:00' : formatSeconds(store.remainingTime)} -
-
+
+ 专注中 + + {!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"} + 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.isStart ? - store.stopTomatoTime() : - store.beginTomatoTime() - + store.state.isStart ? store.stopTomatoTime() : store.beginTomatoTime() }} - class={"w-[44px] h-[44px] flex items-center justify-center rounded-lg cursor-pointer hover:opacity-90"} + 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' - }}> - { - store.state.isStart ? - return - : - start - - } + }} + > + {store.state.isStart ? ( + return + ) : ( + start + )}
-
{ showSelectModal.value = true }} > - - { - store.state.isPlaying ? - return - : - return - } - {musicList[store.state.selectMusic].name} + {store.state.isPlaying ? ( + return + ) : ( + return + )} + + {musicList[store.state.selectMusic].name} +
{ e.stopPropagation() store.togglePlay() }} - class={"w-[26px] h-[26px] right-[-14px] rounded-full bg-[#c0c0c0] absolute flex items-center justify-center"}> - { - store.state.isPlaying ? - start - : - start - + class={ + 'w-[26px] h-[26px] right-[-14px] rounded-full bg-[#c0c0c0] absolute flex items-center justify-center' } + > + {store.state.isPlaying ? ( + start + ) : ( + start + )}
-
) diff --git a/src/main.css b/src/main.css index b0b10de..8e25083 100644 --- a/src/main.css +++ b/src/main.css @@ -262,18 +262,20 @@ body { } } -.background-enter-active { - animation: bounce-in 0.8s; +.background-enter-active, +.background-leave-active { + transform: scale(1); + opacity: 1; + transition: + transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8), + opacity 0.6s ease-out; } -@keyframes bounce-in { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.25); - } - 100% { - transform: scale(1); - } +.background-enter-from { + transform: scale(1.25); + opacity: 0; +} +.background-leave-to { + transform: scale(1); + opacity: 0; }