Merge remote-tracking branch 'origin/weather'
This commit is contained in:
commit
5289504f67
|
|
@ -20,6 +20,7 @@
|
|||
"ant-design-vue": "4.x",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"gsap": "^3.12.5",
|
||||
"localforage": "^1.10.0",
|
||||
"lunar-typescript": "^1.7.5",
|
||||
"oh-vue-icons": "^1.0.0-rc3",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
|
|
@ -7,8 +7,9 @@ import widgetList from '@/widgets'
|
|||
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
|
||||
const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
|
||||
const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
|
||||
const BackgroundSwtich = asyncLoader(() => import('@/layout/background/BackgroundSwtich'))
|
||||
|
||||
const noFullList: RouteStr[] = ['global-search', 'global-adder']
|
||||
const noFullList: RouteStr[] = ['global-search', 'global-adder', 'global-background']
|
||||
|
||||
export default defineComponent(() => {
|
||||
const router = useRouterStore()
|
||||
|
|
@ -16,7 +17,8 @@ export default defineComponent(() => {
|
|||
() =>
|
||||
router.path.startsWith('widget-') ||
|
||||
router.path === 'global-search' ||
|
||||
router.path === 'global-adder'
|
||||
router.path === 'global-adder' ||
|
||||
router.path === 'global-background'
|
||||
)
|
||||
const full = ref(false)
|
||||
watch(router, () => {
|
||||
|
|
@ -41,7 +43,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
|
||||
style={{
|
||||
width: full.value ? '100%' : '900px',
|
||||
width: full.value ? '100%' : '900px',
|
||||
height: full.value ? '100vh' : '540px',
|
||||
borderRadius: full.value ? '0' : '1rem'
|
||||
}}
|
||||
|
|
@ -80,21 +82,24 @@ export default defineComponent(() => {
|
|||
<SearchPage />
|
||||
) : router.path === 'global-adder' ? (
|
||||
<AdderPage />
|
||||
) : router.path.startsWith('widget-') ? (
|
||||
(() => {
|
||||
const name = router.path.split('-')[1]
|
||||
const selected = widgetList.find((el) => el.name === name)
|
||||
if (!selected)
|
||||
return (
|
||||
<div class="w-full h-full flex justify-center items-center text-black/80">
|
||||
组件维护中
|
||||
</div>
|
||||
)
|
||||
const compo = selected.modal
|
||||
console.log(compo)
|
||||
return <compo />
|
||||
})()
|
||||
) : null}
|
||||
) : router.path === 'global-background' ? (
|
||||
<BackgroundSwtich/>
|
||||
) :
|
||||
router.path.startsWith('widget-') ? (
|
||||
(() => {
|
||||
const name = router.path.split('-')[1]
|
||||
const selected = widgetList.find((el) => el.name === name)
|
||||
if (!selected)
|
||||
return (
|
||||
<div class="w-full h-full flex justify-center items-center text-black/80">
|
||||
组件维护中
|
||||
</div>
|
||||
)
|
||||
const compo = selected.modal
|
||||
console.log(compo)
|
||||
return <compo />
|
||||
})()
|
||||
) : null}
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default defineComponent(() => {
|
|||
<div class="flex justify-between items-center py-4">
|
||||
<Button type="primary" icon={<SwapOutlined />}
|
||||
onClick={()=> {
|
||||
router.go ('')
|
||||
router.go('global-background')
|
||||
|
||||
}}>
|
||||
更换壁纸
|
||||
|
|
|
|||
|
|
@ -1,11 +1,194 @@
|
|||
import { defineComponent } from "vue";
|
||||
import {
|
||||
computed,
|
||||
defineComponent,
|
||||
onMounted,
|
||||
ref,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import useLayoutStore from '../useLayoutStore'
|
||||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||
import clsx from 'clsx'
|
||||
import { BiChevronLeft } from "oh-vue-icons/icons";
|
||||
import CategoryTab from '@/utils/CategoryTab';
|
||||
import { BiChevronDown } from "oh-vue-icons/icons";
|
||||
import request from '@/utils/request';
|
||||
import useUserStore from '@/user/useUserStore';
|
||||
import useRouterStore from '@/useRouterStore';
|
||||
import useBackgroundStore from './useBackgroundStore';
|
||||
addIcons(BiChevronLeft, BiChevronDown)
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
return (
|
||||
<div class={"w-full h-full bg-red-300"}>
|
||||
background
|
||||
|
||||
const typeList = [
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画',
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画',
|
||||
'热门',
|
||||
'COSPALY',
|
||||
'二次元',
|
||||
'风景',
|
||||
'插画'
|
||||
]
|
||||
const wallpaperAttrList = [
|
||||
'动态壁纸',
|
||||
'静态壁纸',
|
||||
'自定义壁纸'
|
||||
]
|
||||
export type BackgroundType = {
|
||||
id: string
|
||||
oridinal: number
|
||||
type: string
|
||||
attr: number
|
||||
}
|
||||
export type WallpaperItem = {
|
||||
id: string
|
||||
hotNum: number
|
||||
time: number
|
||||
typeId: string
|
||||
url: string
|
||||
}
|
||||
export default defineComponent(() => {
|
||||
const layout = useLayoutStore()
|
||||
const router = useRouterStore()
|
||||
const isGame = computed(() => layout.state.current === 0)
|
||||
const selectType = ref('')
|
||||
const addTo = ref(layout.state.currentPage)
|
||||
const typeList = ref<BackgroundType[]>([])
|
||||
const wallpaperList = ref<WallpaperItem[]>([])
|
||||
const selectAttr = ref(0)
|
||||
const userStore = useUserStore()
|
||||
const backgroundStore = useBackgroundStore()
|
||||
const sortBy = ref<'hotNum' | 'time'>('hotNum')
|
||||
onMounted(() => {
|
||||
request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => {
|
||||
console.log(res);
|
||||
typeList.value = res
|
||||
selectType.value = res[0].id
|
||||
})
|
||||
})
|
||||
watch(() => [selectType.value, sortBy.value], (e) => {
|
||||
wallpaperList.value = []
|
||||
request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
|
||||
console.log(res);
|
||||
wallpaperList.value = res
|
||||
})
|
||||
}, {
|
||||
immediate: true
|
||||
})
|
||||
watch(selectAttr, (e) => {
|
||||
|
||||
selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
|
||||
})
|
||||
return () => (
|
||||
<div 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 ? {
|
||||
backgroundImage: `url('/bg/gameModel.png')`,
|
||||
backgroundSize: '100% 100%',
|
||||
} : null}>
|
||||
<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>
|
||||
<span class="font-bold text-[14px] ">壁纸库</span>
|
||||
<button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div class="flex-1 h-0 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-1 w-0">
|
||||
<CategoryTab v-slots={{
|
||||
select: (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] bg-[#D6D6D6]')}>
|
||||
{text}
|
||||
</button>,
|
||||
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
|
||||
}}></CategoryTab>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative w-[100px]">
|
||||
<select
|
||||
onChange={(e: any) => {
|
||||
sortBy.value = e.target.value
|
||||
}}
|
||||
value={sortBy.value}
|
||||
class={clsx(
|
||||
' block w-full appearance-none rounded-lg border-none py-1.5 px-3 text-sm/6 ',
|
||||
'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
|
||||
'*:text-black',
|
||||
isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5"
|
||||
)}
|
||||
>
|
||||
<option value="hotNum">按热度</option>
|
||||
<option value="time">按最新</option>
|
||||
</select>
|
||||
<OhVueIcon
|
||||
fill={isGame.value ? 'white' : 'black'}
|
||||
name={BiChevronDown.name}
|
||||
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 w-full h-0 flex relative">
|
||||
<div class="w-full h-full overflow-y-scroll">
|
||||
<div class="w-full grid grid-cols-3 gap-4 ">
|
||||
{wallpaperList.value.map(item =>
|
||||
<div
|
||||
onClick={() => {
|
||||
backgroundStore.setBackground(item.url)
|
||||
}}
|
||||
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden">
|
||||
<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]" />
|
||||
<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%)'
|
||||
}} />
|
||||
</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">
|
||||
{
|
||||
wallpaperAttrList.map((item, index) => (
|
||||
<div key={index}
|
||||
onClick={() => {
|
||||
if (index === 2) {
|
||||
|
||||
if (!userStore.isLogin) {
|
||||
router.go('global-login')
|
||||
}
|
||||
return
|
||||
}
|
||||
selectAttr.value = index
|
||||
|
||||
}}
|
||||
class={clsx("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>
|
||||
)
|
||||
})
|
||||
27
src/main.css
27
src/main.css
|
|
@ -157,3 +157,30 @@ body {
|
|||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
@layer utilities {
|
||||
.scrollbar-transparent::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.scrollbar-transparent::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-transparent::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-transparent {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import type { BackgroundType } from "@/layout/background/BackgroundSwtich";
|
||||
import clsx from "clsx";
|
||||
import gsap from "gsap";
|
||||
import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
list: {
|
||||
type: Array<BackgroundType>,
|
||||
required: true
|
||||
},
|
||||
selectType: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
},
|
||||
slots: {} as SlotsType<{
|
||||
select?: (text: string) => VNode[]
|
||||
unSelect?: (text: string) => VNode[]
|
||||
}>,
|
||||
emits: ['update:type'],
|
||||
setup(props, ctx) {
|
||||
const tabRefs = ref<(Element | null)[]>([])
|
||||
const parentRef = ref<Element | null>(null)
|
||||
const number = ref(0)
|
||||
const tweened = reactive({
|
||||
number: 0
|
||||
})
|
||||
|
||||
|
||||
watch(number, (n) => {
|
||||
gsap.to(tweened, {
|
||||
number: n,
|
||||
duration: .5,
|
||||
onUpdate: () => {
|
||||
if (parentRef.value)
|
||||
parentRef.value.scrollLeft = tweened.number
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
watch(() => [props.selectType], () => {
|
||||
const idx = props.list.findIndex((item) => item.id === props.selectType)
|
||||
if (idx === -1) return
|
||||
if (tabRefs.value[idx]) {
|
||||
const childRef = tabRefs.value[idx]
|
||||
if (!childRef) return
|
||||
if (!childRef.parentElement) return
|
||||
const parentRect = childRef.parentElement.getBoundingClientRect()
|
||||
const childRect = childRef.getBoundingClientRect()
|
||||
const distance = childRect.left - parentRect.left
|
||||
if (!parentRef.value) return
|
||||
if (idx > 3) {
|
||||
number.value = distance - 350
|
||||
} else {
|
||||
number.value = 0
|
||||
|
||||
}
|
||||
} else {
|
||||
number.value = 0
|
||||
|
||||
}
|
||||
}
|
||||
)
|
||||
return () => (
|
||||
<div
|
||||
ref={parentRef}
|
||||
class="w-full overflow-x-scroll scrollbar-hide" onWheel={(e) => {
|
||||
e.preventDefault()
|
||||
if (parentRef.value)
|
||||
parentRef.value.scrollLeft += e.deltaY
|
||||
|
||||
}}>
|
||||
< div class="w-full flex gap-x-2 " >
|
||||
{
|
||||
|
||||
props.list.map((item, index) => (
|
||||
item.id === props.selectType ?
|
||||
<div >
|
||||
{ctx.slots.select?.(item.type) || <button>loading</button>}
|
||||
</div>
|
||||
: <div onClick={()=> {
|
||||
ctx.emit('update:type', item.id)
|
||||
}}>
|
||||
{ctx.slots.unSelect?.(item.type) || <button>loading</button>}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div >
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue