xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更改

This commit is contained in:
expdsn 2024-10-09 15:12:57 +08:00
parent 04f0294f0e
commit 12119322b7
1 changed files with 198 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/layout/background/BackgroundSwtich.tsx
View File

@ -1,22 +1,16 @@
import { import { computed, defineComponent, onMounted, ref, watch } from 'vue'
computed,
defineComponent,
onMounted,
ref,
watch,
} from 'vue'
import useLayoutStore from '../useLayoutStore' import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons' import { OhVueIcon, addIcons } from 'oh-vue-icons'
import clsx from 'clsx' import clsx from 'clsx'
import { BiChevronLeft } from "oh-vue-icons/icons"; import { BiChevronLeft } from 'oh-vue-icons/icons'
import CategoryTab from '@/utils/CategoryTab'; import CategoryTab from '@/utils/CategoryTab'
import { BiChevronDown } from "oh-vue-icons/icons"; import { BiChevronDown } from 'oh-vue-icons/icons'
import request from '@/utils/request'; import request from '@/utils/request'
import useUserStore from '@/user/useUserStore'; import useUserStore from '@/user/useUserStore'
import useRouterStore from '@/useRouterStore'; import useRouterStore from '@/useRouterStore'
import useBackgroundStore from './useBackgroundStore'; import useBackgroundStore from './useBackgroundStore'
addIcons(BiChevronLeft, BiChevronDown)
addIcons(BiChevronLeft, BiChevronDown)
const typeList = [ const typeList = [
'热门', '热门',
@ -35,11 +29,7 @@ const typeList = [
'风景', '风景',
'插画' '插画'
] ]
const wallpaperAttrList = [ const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
'动态壁纸',
'静态壁纸',
'自定义壁纸'
]
export type BackgroundType = { export type BackgroundType = {
id: string id: string
oridinal: number oridinal: number
@ -58,44 +48,57 @@ export default defineComponent(() => {
const router = useRouterStore() const router = useRouterStore()
const isGame = computed(() => layout.state.current === 0) const isGame = computed(() => layout.state.current === 0)
const selectType = ref('') const selectType = ref('')
const addTo = ref(layout.state.currentPage)
const typeList = ref<BackgroundType[]>([]) const typeList = ref<BackgroundType[]>([])
const wallpaperList = ref<WallpaperItem[]>([]) const wallpaperList = ref<WallpaperItem[]>([])
const selectAttr = ref(0) const selectAttr = ref(0)
const userStore = useUserStore() const userStore = useUserStore()
const backgroundStore = useBackgroundStore()
const sortBy = ref<'hotNum' | 'time'>('hotNum') const sortBy = ref<'hotNum' | 'time'>('hotNum')
onMounted(() => { onMounted(() => {
request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => { request<BackgroundType[]>('GET', '/api/backgroundTypes').then((res) => {
console.log(res); console.log(res)
typeList.value = res typeList.value = res
selectType.value = res[0].id selectType.value = res[0].id
}) })
}) })
watch(() => [selectType.value, sortBy.value], (e) => { watch(
() => [selectType.value, sortBy.value],
(e) => {
wallpaperList.value = [] wallpaperList.value = []
request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => { request<WallpaperItem[]>('GET', `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
console.log(res); (res) => {
console.log(res)
wallpaperList.value = res wallpaperList.value = res
}) }
}, { )
},
{
immediate: true immediate: true
}) }
)
watch(selectAttr, (e) => { watch(selectAttr, (e) => {
selectType.value = typeList.value.filter((val) => val.attr === e)[0].id || ''
selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
}) })
return () => ( return () => (
<div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white' <div
: 'text-[#333] bg-white' class={clsx(
'w-full flex-col h-full relative flex px-7 py-7 text-[14px]',
isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#333] bg-white'
)} )}
style={isGame.value ? { style={
isGame.value
? {
backgroundImage: `url('/bg/gameModel.png')`, backgroundImage: `url('/bg/gameModel.png')`,
backgroundSize: '100% 100%', backgroundSize: '100% 100%'
} : null}> }
<div class={clsx("flex w-full justify-between items-center border-b-[1px] border-solid pb-2", : null
isGame.value ? "border-white/[.2]" : "dark:border-black/[.2]" }
)}> >
<div
class={clsx(
'flex w-full justify-between items-center border-b-[1px] border-solid pb-2',
isGame.value ? 'border-white/[.2]' : 'dark:border-black/[.2]'
)}
>
<OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon> <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
<span class="font-bold text-[14px] ">壁纸库</span> <span class="font-bold text-[14px] ">壁纸库</span>
<button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button> <button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
@ -104,21 +107,35 @@ export default defineComponent(() => {
<div class="flex flex-col w-full h-full py-3 gap-y-3 relative"> <div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
<div class="flex justify-between items-center "> <div class="flex justify-between items-center ">
<div class="flex-1 w-0"> <div class="flex-1 w-0">
<CategoryTab v-slots={{ <CategoryTab
select: (text: string) => <button v-slots={{
class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ', select: (text: string) => (
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]')}> <button
{text} class={clsx(
</button>, 'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
unSelect: (text: string) => <button isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ', )}
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]')}> >
{text} {text}
</button> </button>
}} list={typeList.value.filter(val => val.attr === selectAttr.value)} selectType={selectType.value} onUpdate:type={(e) => { ),
unSelect: (text: string) => (
<button
class={clsx(
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
)}
>
{text}
</button>
)
}}
list={typeList.value.filter((val) => val.attr === selectAttr.value)}
selectType={selectType.value}
onUpdate:type={(e) => {
selectType.value = e selectType.value = e
}}></CategoryTab> }}
></CategoryTab>
</div> </div>
<div class="relative w-[100px]"> <div class="relative w-[100px]">
@ -132,7 +149,7 @@ export default defineComponent(() => {
'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25', 'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
// Make the text of each option black on Windows // Make the text of each option black on Windows
'*:text-black', '*:text-black',
isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5" isGame.value ? 'text-white bg-white/5' : 'text-[#333] bg-black/5'
)} )}
> >
<option value="hotNum">按热度</option> <option value="hotNum">按热度</option>
@ -149,45 +166,51 @@ export default defineComponent(() => {
<div class="flex-1 w-full h-0 flex relative"> <div class="flex-1 w-full h-0 flex relative">
<div class="w-full h-full overflow-y-scroll"> <div class="w-full h-full overflow-y-scroll">
<div class="w-full grid grid-cols-3 gap-4 "> <div class="w-full grid grid-cols-3 gap-4 ">
{wallpaperList.value.map(item => {wallpaperList.value.map((item) => (
<div <div
onClick={() => { onClick={() => {}}
layout.changeBackground(item.url) class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"
}} >
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"> <img
<img src={item.url + '?x-oss-process=image/resize,w_300'} class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]" /> src={item.url + '?x-oss-process=image/resize,w_300'}
<div class="absolute top-0 left-0 right-0 bottom-0 " style={{ class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]"
/>
<div
class="absolute top-0 left-0 right-0 bottom-0 "
style={{
background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)' background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
}} /> }}
</div>)} />
</div>
))}
</div> </div>
</div> </div>
</div> </div>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1"> <div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
{ {wallpaperAttrList.map((item, index) => (
wallpaperAttrList.map((item, index) => ( <div
<div key={index} key={index}
onClick={() => { onClick={() => {
if (index === 2) { if (index === 2) {
if (!userStore.isLogin) { if (!userStore.isLogin) {
router.go('global-login') router.go('global-login')
} }
return return
} }
selectAttr.value = index selectAttr.value = index
}} }}
class={clsx("px-8 py-2 rounded-[8px]", class={clsx(
index === selectAttr.value ? "bg-white text-[#333]" : "cursor-pointer text-white hover:bg-white/[.4]")}>{item}</div> 'px-8 py-2 rounded-[8px]',
)) index === selectAttr.value
} ? 'bg-white text-[#333]'
: 'cursor-pointer text-white hover:bg-white/[.4]'
)}
>
{item}
</div>
))}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) )