This commit is contained in:
expdsn 2024-11-20 18:38:22 +08:00
parent 2aa592e48e
commit 842aed244f
11 changed files with 133 additions and 39 deletions

View File

@ -1,6 +1,7 @@
import { import {
computed, computed,
defineComponent, defineComponent,
onMounted,
onUnmounted, onUnmounted,
provide, provide,
ref, ref,
@ -24,6 +25,7 @@ import HotAdder from './HotAdder'
import GameAdder from './GameAdder' import GameAdder from './GameAdder'
import work_add_main_checked from '/icons/work_add_main_checked.png' import work_add_main_checked from '/icons/work_add_main_checked.png'
import useAdderPageStore from './useAdderPageStore' import useAdderPageStore from './useAdderPageStore'
import search from '../header/search'
addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler, IoGameController) addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler, IoGameController)
const ItemButton = defineComponent({ const ItemButton = defineComponent({
@ -83,9 +85,11 @@ export default defineComponent(() => {
const addTo = ref(layout.state.currentPage) const addTo = ref(layout.state.currentPage)
provide(AddToToken, addTo) provide(AddToToken, addTo)
// onUnmounted(() => { onUnmounted(() => {
// store.type = 1 store.isSearch = false
// })
})
return () => ( return () => (
<div <div
class={clsx( class={clsx(

View File

@ -292,6 +292,7 @@ export default defineComponent(() => {
label: form.name label: form.name
} }
layout.addBlock(data, addTo?.value) layout.addBlock(data, addTo?.value)
globalToast.success('添加成功')
} }
}} }}
> >

View File

@ -50,6 +50,12 @@ export default defineStore('adderPage', () => {
watch(selectType, (val) => { watch(selectType, (val) => {
getApps(val) getApps(val)
}) })
watch(isSearch, () => {
if (!isSearch.value) {
getApps(selectType.value)
}
})
const getApps = (_selectType: string) => { const getApps = (_selectType: string) => {
loading.value = true loading.value = true
request<HotAppType[]>('GET', `/api/app/hotApps?hotAppsId=${_selectType}`) request<HotAppType[]>('GET', `/api/app/hotApps?hotAppsId=${_selectType}`)

View File

@ -14,6 +14,7 @@ export default defineComponent(() => {
const tempFile = ref<File | null>(null) const tempFile = ref<File | null>(null)
const layout = useLayoutStore() const layout = useLayoutStore()
const tempBackground = ref('') const tempBackground = ref('')
const type = ref('img')
const handleDrop = (e: DragEvent) => { const handleDrop = (e: DragEvent) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -22,14 +23,26 @@ export default defineComponent(() => {
if (!file) return if (!file) return
tempBackground.value = URL.createObjectURL(file) tempBackground.value = URL.createObjectURL(file)
tempFile.value = file tempFile.value = file
if (file.type.includes('image')) {
type.value = 'img'
} else {
type.value = 'video'
}
} }
const showImg = computed(() => { const showImg = computed(() => {
if (tempBackground.value) { if (tempBackground.value) {
return tempBackground.value return tempBackground.value
} }
if (backgroundStore.state.isCustom) { if (backgroundStore.state.isCustom) {
return layout.background.video? layout.background.video: layout.background.image if (layout.background.video) {
type.value = 'video'
return layout.background.video
} else {
return layout.background.image
}
} }
return '' return ''
}) })
return () => ( return () => (
@ -77,7 +90,7 @@ export default defineComponent(() => {
<div class={'absolute top-0 left-0 w-full h-full'}> <div class={'absolute top-0 left-0 w-full h-full'}>
<BgContent <BgContent
image={showImg.value} image={showImg.value}
video={showImg.value.split('.').pop() === 'mp4' ? tempBackground.value : undefined} video={type.value === 'video' ? showImg.value : undefined}
></BgContent> ></BgContent>
</div> </div>
<div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}> <div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}>
@ -98,12 +111,18 @@ export default defineComponent(() => {
</span> </span>
<input <input
type="file" type="file"
accept="image/jpeg,image/png,image/svg + xml,image/gif,video/mp4"
ref={fileInput} ref={fileInput}
hidden hidden
onChange={(e: any) => { onChange={(e: any) => {
const file = e.target?.files?.[0] const file = e.target?.files?.[0]
if (!file) return if (!file) return
tempFile.value = file tempFile.value = file
if (file.type.includes('image')) {
type.value = 'img'
} else {
type.value = 'video'
}
tempBackground.value = URL.createObjectURL(file) tempBackground.value = URL.createObjectURL(file)
}} }}
/> />
@ -121,7 +140,6 @@ export default defineComponent(() => {
useLayoutStore().changeBackground(res) useLayoutStore().changeBackground(res)
backgroundStore.state.isCustom = true backgroundStore.state.isCustom = true
tempFile.value = null tempFile.value = null
tempBackground.value = ''
message.success('应用成功') message.success('应用成功')
}) })
} }

View File

@ -29,12 +29,14 @@ export const BgContent = defineComponent({
}} }}
> >
{props.video ? ( {props.video ? (
<video autoplay src={props.video} class="w-full h-full" muted /> <video autoplay src={props.video} loop class="w-full h-full object-cover" muted />
) : ( ) : (
<div <div
class="w-full h-full bg-center bg-cover bg-no-repeat" class="w-full h-full bg-center bg-cover bg-no-repeat"
style={{ style={{
backgroundImage: `url('${props.image}')` backgroundImage: `url('${props.image}')`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
}} }}
></div> ></div>
)} )}

View File

@ -15,25 +15,25 @@ export const DefaultPageSetting = [
{ {
name: '游戏', name: '游戏',
backgroundUrl: backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/831a4d4c-61ff-4bae-ad31-9c0f4fa2db1c.webp',
contentUrl: contentUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/b2f3ed2f-f550-499b-8ea1-dfd192cfd388.webp',
desct: '聚合多类游戏工具,以及 资讯、排行榜等' desct: '聚合多类游戏工具,以及 资讯、排行榜等'
}, },
{ {
name: '工作', name: '工作',
backgroundUrl: backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/b82fd47c-24c1-4f58-b0db-51414b3bdda4.webp',
contentUrl: contentUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/7e4cf74a-85cb-4e39-9e61-385b222ac8c4.webp',
desct: '结合番茄计时法等效率工具,让您可以高效学习' desct: '结合番茄计时法等效率工具,让您可以高效学习'
}, },
{ {
name: '轻娱', name: '轻娱',
backgroundUrl: backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/73164094-cb0d-4366-8d1a-afc84ac119cc.webp',
contentUrl: contentUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp', 'https://oss.goosetab.com/000/user_upload/1/resource/bcbbffc6-c8a4-4c8e-8ba5-36fa1fbad4f9.webp',
desct: '综合办公、学习、游戏等 属性,功能较为均勺' desct: '综合办公、学习、游戏等 属性,功能较为均勺'
} }
] ]
@ -193,15 +193,13 @@ export default defineComponent(() => {
if (res) { if (res) {
const affix = val.background.split('.').pop() const affix = val.background.split('.').pop()
if (!affix) return if (!affix) return
console.log(`background${uuid()}.${affix}`)
console.log(`${res.type}`)
const file = new File([res], `${uuid()}.${affix}`, { const file = new File([res], `${uuid()}.${affix}`, {
type: `${res.type}` type: `${res.type}`
}) })
uploadLocal(file).then((res2) => { uploadLocal(file).then((res2) => {
val.background = res2 val.background = res2
console.log(res2);
}) })
} }
}) })

View File

@ -46,6 +46,10 @@ export default defineComponent({
? 'text-[13px] flex z-20 items-center pointer-events-none gap-x-2' ? 'text-[13px] flex z-20 items-center pointer-events-none gap-x-2'
: 'h-[110px]' : 'h-[110px]'
)} )}
onDblclick={(e) => {
e.stopPropagation()
layout.state.simple = !layout.state.simple
}}
style={{ style={{
color: 'white', color: 'white',
transitionDuration: '.4s', transitionDuration: '.4s',

View File

@ -77,7 +77,6 @@ export default defineStore('layout', () => {
} }
const pageList = state.content[state.current].pages[page].list const pageList = state.content[state.current].pages[page].list
pageList.push(block) pageList.push(block)
globalToast.success('添加成功')
} }
const changeBlock = (item: EditBlockItemType, target: string) => { const changeBlock = (item: EditBlockItemType, target: string) => {
const idx = currentPage.value.list.findIndex((el) => el.id === target) const idx = currentPage.value.list.findIndex((el) => el.id === target)

View File

@ -265,8 +265,7 @@ body {
.background-enter-active, .background-enter-active,
.background-leave-active { .background-leave-active {
transform: scale(1); transform: scale(1);
transition: transition: transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8);
transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8),
} }
.background-enter-from { .background-enter-from {
@ -275,3 +274,27 @@ body {
.background-leave-to { .background-leave-to {
transform: scale(1); transform: scale(1);
} }
.eat-enter-active,
.eat-leave-active {
transition: transform 0.25s ease-in;
}
.eat-enter-from {
transform: translateY(0);
}
.eat-leave-to {
transform: translateY(100%);
}
.neweat-enter-active,
.neweat-leave-active {
transition: transform 0.25s ease-out ;
}
.neweat-enter-from {
transform: translateY(0);
}
.neweat-leave-to {
transform: translateY(107%);
}

View File

@ -1,6 +1,6 @@
import clsx from 'clsx' import clsx from 'clsx'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { defineComponent, ref } from 'vue' import { defineComponent, reactive, ref, Transition, watch } from 'vue'
export default defineComponent(() => { export default defineComponent(() => {
const list = [ const list = [
@ -77,6 +77,11 @@ export default defineComponent(() => {
'炒年糕' '炒年糕'
] ]
const text = ref('') const text = ref('')
const open = ref(false)
const pair = reactive({ front: true, back: true })
watch(open, (val) => {
if (!val) text.value = ''
})
return () => ( return () => (
<div <div
class="w-full h-full flex flex-col px-[14px] pt-[23px]" class="w-full h-full flex flex-col px-[14px] pt-[23px]"
@ -85,7 +90,7 @@ export default defineComponent(() => {
backgroundSize: '100% 100%' backgroundSize: '100% 100%'
}} }}
onClick={() => { onClick={() => {
text.value = '' open.value = false
}} }}
> >
<div class={'w-full flex justify-center'}> <div class={'w-full flex justify-center'}>
@ -95,12 +100,12 @@ export default defineComponent(() => {
<div <div
class={clsx( class={clsx(
'w-[130px] duration-150 bg-white relative', 'w-[130px] duration-150 bg-white relative',
text.value ? 'h-[120px]' : 'h-[17px]' open.value ? 'h-[120px]' : 'h-[17px]'
)} )}
> >
<button <button
class={ class={
'w-[48px] h-[19px] text-[12px] rounded left-1/2 bottom-[-10px] absolute -translate-x-1/2 rounded-br-[6px] rounded-bl-[6px] text-white' 'w-[48px] z-20 h-[19px] text-[12px] rounded left-1/2 bottom-[-10px] absolute -translate-x-1/2 rounded-br-[6px] rounded-bl-[6px] text-white'
} }
style={{ style={{
background: 'linear-gradient(180deg,#ffa061 0%,#ffb62f 100%)', background: 'linear-gradient(180deg,#ffa061 0%,#ffb62f 100%)',
@ -110,26 +115,60 @@ export default defineComponent(() => {
e.stopPropagation() e.stopPropagation()
const index = Math.floor(Math.random() * list.length) const index = Math.floor(Math.random() * list.length)
if (text.value) { if (text.value) {
text.value = '' pair.front = false
setTimeout(() => {
text.value = list[index]
}, 400)
}else {
text.value = list[index] text.value = list[index]
setTimeout(() => {
text.value = list[index]
pair.back = false
setTimeout(() => {
pair.front = true
pair.back = true
}, 250)
}, 250)
} else {
open.value = true
text.value = list[index]
} }
}} }}
> >
{text.value ? '换' : '开始'} {open.value ? '换' : '开始'}
</button> </button>
<span
class={ <div class={'w-full h-full absolute left-0 top-0 overflow-hidden'}>
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' <Transition name="eat">
} {pair.front && (
> <div class={'flex items-center justify-center w-full h-full'}>
{text.value} <span
</span> class={
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
}
>
{text.value}
</span>
</div>
)}
</Transition>
<Transition name="neweat">
{pair.back && (
<div
class={
'flex items-center justify-center w-full h-full left-0 top-[-130px] absolute '
}
>
<span
class={
'text-[12px] text-[#333] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'
}
>
{text.value}
</span>
</div>
)}
</Transition>
</div>
</div> </div>
{!text.value && ( {!text.value && (
<> <>
<span class={'text-[24px] mt-[24px] text-[#333]'}></span> <span class={'text-[24px] mt-[24px] text-[#333]'}></span>

View File

@ -26,7 +26,7 @@ export default defineComponent(() => {
'w-full bg-white/20 text-center rounded text-[14px] overflow-hidden text-ellipsis whitespace-nowrap' 'w-full bg-white/20 text-center rounded text-[14px] overflow-hidden text-ellipsis whitespace-nowrap'
} }
> >
{store.state.list ? store.state.list.filter((val) => !val.isCompleted).shift()?.title : '无目标'} {store.state.list ? store.state.list.filter((val) => !val.isCompleted).pop()?.title : '无目标'}
</div> </div>
<span class={'text-[42px] mb-1'}> <span class={'text-[42px] mb-1'}>
{store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)} {store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)}