92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
|
import useRouterStore from '@/useRouterStore'
|
||
|
|
import asyncLoader from '@/utils/asyncLoader'
|
||
|
|
import { computed, defineComponent, Transition } from 'vue'
|
||
|
|
|
||
|
|
const ProfilePage = asyncLoader(() => import('@/user/UserPage'))
|
||
|
|
const BackgroundPage = asyncLoader(() => import('@/layout/background/BackgroundPage'))
|
||
|
|
|
||
|
|
const SettingsTab = defineComponent({
|
||
|
|
props: {
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
path: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
const router = useRouterStore()
|
||
|
|
return () => (
|
||
|
|
<div
|
||
|
|
class={
|
||
|
|
'w-full h-[30px] leading-[30px] text-sm text-center rounded-lg text-slate-600 my-1 transition-all cursor-pointer hover:bg-white/70 ' +
|
||
|
|
(router.path === props.path ? 'bg-white/70 font-bold shadow-lg' : '')
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
router.path = props.path as any
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{props.label}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
export default defineComponent(() => {
|
||
|
|
const router = useRouterStore()
|
||
|
|
const show = computed(() => router.path.startsWith('settings-'))
|
||
|
|
return () => (
|
||
|
|
<div class="fixed left-0 bottom-0 z-20 w-full">
|
||
|
|
{/* 背景遮罩 */}
|
||
|
|
{show.value && (
|
||
|
|
<div
|
||
|
|
class="w-full h-screen"
|
||
|
|
onClick={() => {
|
||
|
|
router.path = ''
|
||
|
|
}}
|
||
|
|
></div>
|
||
|
|
)}
|
||
|
|
{/* 弹框主体 */}
|
||
|
|
<Transition name="settings">
|
||
|
|
{show.value && (
|
||
|
|
<div class="absolute left-8 bottom-20 w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
|
||
|
|
<div class="w-[200px] p-4 h-full bg-white/60 backdrop-blur flex flex-col">
|
||
|
|
<div
|
||
|
|
class={
|
||
|
|
'w-full h-0 flex-grow mb-4 rounded-lg hover:bg-white/70 transition-all cursor-pointer flex justify-center items-center ' +
|
||
|
|
(router.path === 'settings-user' ? 'bg-white/70 shadow-lg' : '')
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
router.path = 'settings-user'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div class="w-12 h-12 rounded-full overflow-hidden bg-black/20"></div>
|
||
|
|
</div>
|
||
|
|
<SettingsTab label="壁纸" path="settings-background" />
|
||
|
|
<SettingsTab label="图标" path="settings-block" />
|
||
|
|
<SettingsTab label="搜索" path="settings-search" />
|
||
|
|
<SettingsTab label="时间" path="settings-time" />
|
||
|
|
<SettingsTab label="侧边栏" path="settings-sider" />
|
||
|
|
<SettingsTab label="AI助手" path="settings-ai" />
|
||
|
|
<SettingsTab label="快捷栏" path="settings-dock" />
|
||
|
|
<SettingsTab label="重置" path="settings-reset" />
|
||
|
|
<SettingsTab label="问题反馈" path="settings-fallback" />
|
||
|
|
</div>
|
||
|
|
<div class="w-0 h-full flex-grow bg-white/90 backdrop-blur">
|
||
|
|
<Transition>
|
||
|
|
{router.path === 'settings-user' ? (
|
||
|
|
<ProfilePage />
|
||
|
|
) : router.path === 'settings-background' ? (
|
||
|
|
<BackgroundPage />
|
||
|
|
) : null}
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|