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

View File

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

View File

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

View File

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

View File

@ -29,12 +29,14 @@ export const BgContent = defineComponent({
}}
>
{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
class="w-full h-full bg-center bg-cover bg-no-repeat"
style={{
backgroundImage: `url('${props.image}')`
backgroundImage: `url('${props.image}')`,
backgroundSize: 'cover',
backgroundPosition: 'center center',
}}
></div>
)}

View File

@ -15,25 +15,25 @@ export const DefaultPageSetting = [
{
name: '游戏',
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:
'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: '聚合多类游戏工具,以及 资讯、排行榜等'
},
{
name: '工作',
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:
'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: '结合番茄计时法等效率工具,让您可以高效学习'
},
{
name: '轻娱',
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:
'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: '综合办公、学习、游戏等 属性,功能较为均勺'
}
]
@ -193,15 +193,13 @@ export default defineComponent(() => {
if (res) {
const affix = val.background.split('.').pop()
if (!affix) return
console.log(`background${uuid()}.${affix}`)
console.log(`${res.type}`)
const file = new File([res], `${uuid()}.${affix}`, {
type: `${res.type}`
})
uploadLocal(file).then((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'
: 'h-[110px]'
)}
onDblclick={(e) => {
e.stopPropagation()
layout.state.simple = !layout.state.simple
}}
style={{
color: 'white',
transitionDuration: '.4s',

View File

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

View File

@ -265,8 +265,7 @@ body {
.background-enter-active,
.background-leave-active {
transform: scale(1);
transition:
transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8),
transition: transform 0.6s cubic-bezier(0.47, 1.64, 0.41, 0.8);
}
.background-enter-from {
@ -275,3 +274,27 @@ body {
.background-leave-to {
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 dayjs from 'dayjs'
import { defineComponent, ref } from 'vue'
import { defineComponent, reactive, ref, Transition, watch } from 'vue'
export default defineComponent(() => {
const list = [
@ -77,6 +77,11 @@ export default defineComponent(() => {
'炒年糕'
]
const text = ref('')
const open = ref(false)
const pair = reactive({ front: true, back: true })
watch(open, (val) => {
if (!val) text.value = ''
})
return () => (
<div
class="w-full h-full flex flex-col px-[14px] pt-[23px]"
@ -85,7 +90,7 @@ export default defineComponent(() => {
backgroundSize: '100% 100%'
}}
onClick={() => {
text.value = ''
open.value = false
}}
>
<div class={'w-full flex justify-center'}>
@ -95,12 +100,12 @@ export default defineComponent(() => {
<div
class={clsx(
'w-[130px] duration-150 bg-white relative',
text.value ? 'h-[120px]' : 'h-[17px]'
open.value ? 'h-[120px]' : 'h-[17px]'
)}
>
<button
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={{
background: 'linear-gradient(180deg,#ffa061 0%,#ffb62f 100%)',
@ -110,26 +115,60 @@ export default defineComponent(() => {
e.stopPropagation()
const index = Math.floor(Math.random() * list.length)
if (text.value) {
text.value = ''
setTimeout(() => {
text.value = list[index]
}, 400)
}else {
pair.front = false
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>
<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 class={'w-full h-full absolute left-0 top-0 overflow-hidden'}>
<Transition name="eat">
{pair.front && (
<div class={'flex items-center justify-center w-full h-full'}>
<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>
{!text.value && (
<>
<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'
}
>
{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>
<span class={'text-[42px] mb-1'}>
{store.state.beginTime < 0 ? '15:00' : formatSeconds(store.remainingTime)}