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

完成了开始模式选择页面，欢迎页，适配了设置项的夜间模式

This commit is contained in:
expdsn 2024-10-31 18:21:32 +08:00
parent 121e9bcc69
commit 7d09205087
16 changed files with 269 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icons/settingLine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/icons/welcome/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/icons/welcome/startUse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/icons/welcome/welcomeRight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/icons/welcome/welcomeTitle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

2
src/App.vue
View File

@ -13,6 +13,7 @@ import LoginModal from './user/LoginModal'
import { computed } from 'vue'
import asyncLoader from './utils/asyncLoader'
import useLayoutStore from './layout/useLayoutStore'
import WelcomePage from './layout/grid/WelcomePage'
const Grid = asyncLoader(() => import('./layout/grid'))
const Fox = asyncLoader(() => import('./fox'))
const settings = useSettingsStore()
@ -38,6 +39,7 @@ const layout = useLayoutStore()
</div>
<DirModal />
<GlobalMenu />
<WelcomePage></WelcomePage>
</div>
</template>

2
src/layout/background/BackgroundPage.tsx
View File

@ -5,6 +5,7 @@ import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-desig
import SettingItem from '@/settings/SettingItem'
import useSettingsStore from '@/settings/useSettingsStore'
import useRouterStore from '@/useRouterStore'
import clsx from 'clsx'
export default defineComponent(() => {
const layout = useLayoutStore()
@ -63,6 +64,7 @@ export default defineComponent(() => {
</Button>
<Button
type="text"
class={clsx(useLayoutStore().state.current === 0 && 'text-white')}
icon={<DownloadOutlined />}
onClick={() => {
window.open(layout.background.video || layout.background.image, '_blank')

11
src/layout/dock/index.tsx
View File

@ -14,15 +14,12 @@ export default defineComponent(() => {
ref('dock')
)
const current = ref(-1)
// window.addEventListener('keydown', (e) => {
// const i = layout.state.dockLabels.indexOf(e.key)
// if (i >= 0) {
// layout.state.dock[i] = null
// }
// })
return () =>
setting.state.showDock !== '' && (
<div
onDragover={()=> {
show.value = true
}}
onMouseenter={() => {
show.value = true
}}
@ -39,7 +36,7 @@ export default defineComponent(() => {
setting.state.showDock === 'auto'
? show.value
? 'bottom-4'
: '-bottom-24'
: '-bottom-[90px]'
: 'bottom-4'
)}
ref={container}

11
src/layout/grid/DockSetting.tsx
View File

@ -60,8 +60,8 @@ export default defineComponent({
else settings.state.showDock = 'show'
}}
/>
</SettingItem>{' '}
<div class={'flex flex-col text-[#333]'}>
</SettingItem>
<div class={'flex flex-col '}>
<span class={'font-bold'}>快捷键设置</span>
<p class={'text-[12px] text-[#999]'}>选中要更换快捷键的目标，点击键盘即可更换快捷键</p>
<div class={'w-full h-[1px] bg-[#ddd] mt-2'}></div>
@ -70,9 +70,10 @@ export default defineComponent({
<div class="w-full flex gap-x-4">
<span class={'w-[20px]'}>{idx + 1}</span>
<div
class={
'flex-1 bg-black/[0.05] text-[#333] border-[1px] py-1 rounded-lg relative flex items-center pl-4 border-transparent hover:border-[#ffa94d]'
}
class={clsx(
'flex-1 bg-black/[0.05] border-[1px] py-1 rounded-lg relative flex items-center pl-4 border-transparent hover:border-[#ffa94d]'
)}
>
<Select
onChange={(e) => {

14
src/layout/grid/SiderSetting.tsx
View File

@ -3,12 +3,14 @@ import useSettingsStore from '@/settings/useSettingsStore'
import { Switch } from 'ant-design-vue'
import clsx from 'clsx'
import { defineComponent } from 'vue'
import useLayoutStore from '../useLayoutStore'
export default defineComponent({
name: 'SiderSetting',
props: {},
setup() {
const settings = useSettingsStore()
const layout = useLayoutStore()
return () => (
<div class="p-4 flex flex-col gap-y-4 ">
<div
@ -20,8 +22,11 @@ export default defineComponent({
settings.state.siderDirection = 'left'
}}
class={clsx(
'bg-white flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
settings.state.siderDirection === 'left' ? 'border-[#ffa94d]' : 'border-transparent'
' flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
settings.state.siderDirection === 'left'
? 'border-[#ffa94d]'
: 'border-transparent',
layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
)}
>
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
@ -48,10 +53,11 @@ export default defineComponent({
settings.state.siderDirection = 'right'
}}
class={clsx(
'bg-white flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
' flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px] ',
settings.state.siderDirection === 'right'
? 'border-[#ffa94d]'
: 'border-transparent'
: 'border-transparent',
layout.state.current === 0 ? 'bg-[#7B7C85]' : 'bg-white'
)}
>
<div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>

141
src/layout/grid/WelcomePage.tsx Normal file
View File

@ -0,0 +1,141 @@
import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
import WelcomeImg from '~/public/icons/welcome/welcomeTitle.png'
import DivBgImg from '~/public/icons/welcome/back.png'
import startUseImg from '~/public/icons/welcome/startUse.png'
import useBackgroundStore from '../background/useBackgroundStore'
import useLayoutStore from '../useLayoutStore'
export const DefaultPageSetting = [
{
name: '游戏',
backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.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',
desct: '聚合多类游戏工具，以及 资讯、排行榜'
},
{
name: '工作台',
backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.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',
desct: '结合番茄计时法等效率工具，让您可以高效学'
},
{
name: '轻娱',
backgroundUrl:
'https://newfatfox.oss-cn-beijing.aliyuncs.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',
desct: '综合办公、学习、游戏等 属性，功能较为均'
}
]
export default defineComponent(() => {
const show = computed(() => true)
const selectMode = ref(0)
const layout = useLayoutStore()
const isFirst = ref(false)
onMounted(() => {
// 检查 localStorage 是否已经有访问记录
const visited = localStorage.getItem('hasVisited')
if (!visited) {
// 如果没有记录，说明是第一次访问
isFirst.value = true
// 设置标记，后续访问不会再次显示
}
})
return () =>
isFirst.value && (
<div class="fixed left-0 top-0 z-50 w-full ">
<Transition>
{show.value && (
<div
class="w-full h-screen bg-black/60 "
onClick={() => {}}
style={{
backgroundImage: `url('${DefaultPageSetting[selectMode.value].backgroundUrl}')`,
backgroundSize: '100% 100%',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
>
<div class="w-full h-screen bg-black/60 " onClick={() => {}}></div>
</div>
)}
</Transition>
<Transition name="modal">
<div class="w-[1000px] items-center justify-center gap-y-2 flex flex-col z-30 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ">
<div
class={'w-[812px] h-[46px] flex justify-center mb-[10px] '}
style={{
backgroundImage: `url('${WelcomeImg}')`,
backgroundSize: '100% 100%',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
>
<span class={'leading-[20px] -mt-2 text-[20px] text-white '}>请选择您的初始模式</span>
</div>
<div class={'w-full h-[370px] flex justify-center'}>
<div class={'w-[868px] h-[370px] '}>
<div class={'relative w-full h-full flex justify-center'}>
{DefaultPageSetting.map((item, idx) => (
<div
class={
' w-[709px] h-[370px] cursor-pointer duration-150 absolute top-0 left-0 bg-[#2c2e3e] p-3 overflow-hidden rounded-2xl'
}
onClick={() => {
selectMode.value = idx
}}
style={{
transform: `translate(${idx === selectMode.value ? 80 : idx === (selectMode.value + 1) % 2 ? 219 : -52}px) scale(${
idx === selectMode.value ? 1 : 0.85
})`,
backgroundImage: `url('${DivBgImg}')`,
backgroundSize: '100% 100%',
zIndex: selectMode.value === idx ? 10 : 0
}}
>
<div
class={'w-full h-full rounded-2xl'}
style={{
backgroundImage: `url('${item.contentUrl}')`,
backgroundSize: '100% 100%',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
></div>
</div>
))}
</div>
</div>
</div>
<div class={'flex flex-col items-center gap-y-1 text-white'}>
<span>{DefaultPageSetting[selectMode.value].name}模式</span>
<span class={'w-[180px]'}>{DefaultPageSetting[selectMode.value].desct}</span>
</div>
<div
class={
'w-[175px] h-[41px] mt-4 flex items-center justify-center text-[#333] cursor-pointer'
}
onClick={() => {
localStorage.setItem('hasVisited', 'true')
isFirst.value = false
layout.changeBackground(DefaultPageSetting[selectMode.value].backgroundUrl)
}}
style={{
backgroundImage: `url('${startUseImg}')`,
backgroundSize: '100% 100%',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
>
开始使用
</div>
</div>
</Transition>
</div>
)
})

3
src/layout/sider/index.tsx
View File

@ -80,6 +80,9 @@ export default defineComponent(() => {
'w-[130px] min-h-[620px] hover:bg-red-10 z-20 fixed top-1/2 -translate-y-1/2 bottom-0 ',
settings.state.siderDirection === 'left' ? 'left-0' : 'right-0'
)}
onDragover={() => {
show.value = true
}}
onMouseleave={() => {
show.value = false
}}

14
src/settings/SettingItem.tsx
View File

@ -1,5 +1,6 @@
import useLayoutStore from '@/layout/useLayoutStore'
import clsx from 'clsx'
import { defineComponent, type SlotsType, type VNode } from 'vue'
import { computed, defineComponent, type SlotsType, type VNode } from 'vue'
export default defineComponent({
props: {
@ -22,18 +23,25 @@ export default defineComponent({
end?: () => VNode[]
}>,
setup(props, ctx) {
const layout = useLayoutStore()
const isGame = computed(() => {
return layout.state.current === 0
})
return () => (
<div
class={clsx('flex items-center w-full py-2 px-3 rounded-lg justify-between', {
'rounded-b-none': props.noRoundedB,
'rounded-t-none': props.noRoundedT,
'bg-black/5': !props.noBg
'bg-black/5': !props.noBg && !isGame.value,
'bg-white/10': !props.noBg && isGame.value
})}
style={{
marginBottom: props.noRoundedB ? 0 : '12px'
}}
>
<div class="text-sm text-black/60 mr-4">{ctx.slots.label?.()}</div>
<div class={clsx('text-sm mr-4', isGame.value ? 'text-white' : 'text-black/60')}>
{ctx.slots.label?.()}
</div>
<div class="">{ctx.slots.default?.()}</div>
{/* {ctx.slots.end?.()} */}
</div>

70
src/settings/SettingsOverlay.tsx
View File

@ -1,7 +1,12 @@
import useLayoutStore from '@/layout/useLayoutStore'
import AvatarCircle from '@/user/AvatarCircle'
import useUserStore from '@/user/useUserStore'
import useRouterStore from '@/useRouterStore'
import asyncLoader from '@/utils/asyncLoader'
import clsx from 'clsx'
import { OhVueIcon } from 'oh-vue-icons'
import { computed, defineComponent, Transition } from 'vue'
import SettingLineImg from '~/public/icons/settingLine.png'
const Content = asyncLoader(() => import('./SettingsOverlayContent'))
const SettingsTab = defineComponent({
@ -17,12 +22,23 @@ const SettingsTab = defineComponent({
},
setup(props) {
const router = useRouterStore()
const layout = useLayoutStore()
const isGame = computed(() => {
return layout.state.current === 0
})
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' : '')
class={clsx(
'w-full h-[30px] leading-[30px] text-sm text-center rounded-lg my-1 transition-all cursor-pointer ',
{
'bg-white/30 text-[#fff] hover:bg-white/30 ':
isGame.value && props.path === router.path,
'bg-white/70 hover:bg-white/70 text-[#333] ':
!isGame.value && props.path === router.path,
'text-[#fff] hover:bg-white/30': isGame.value && props.path !== router.path,
'text-[#999] hover:bg-white/70': !isGame.value && props.path !== router.path
}
)}
onClick={() => {
router.go(props.path as any)
}}
@ -35,7 +51,12 @@ const SettingsTab = defineComponent({
export default defineComponent(() => {
const router = useRouterStore()
const { profile } = useUserStore()
const show = computed(() => router.path.startsWith('settings-'))
const layout = useLayoutStore()
const isGame = computed(() => {
return layout.state.current === 0
})
return () => (
<div class="fixed left-0 bottom-0 z-40 w-full">
{/* 背景遮罩 */}
@ -50,22 +71,54 @@ export default defineComponent(() => {
{/* 弹框主体 */}
<Transition name="settings">
{show.value && (
<div class="absolute left-6 bottom-20 bg-white w-[600px] h-[480px] rounded-lg overflow-hidden shadow-2xl flex">
<div class="w-[200px] p-4 h-full bg-[#ebebeb] backdrop-blur flex flex-col">
<div
class={clsx(
'absolute left-6 bottom-10 w-[660px] h-[580px] rounded-lg overflow-hidden shadow-2xl flex',
isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#000] bg-white'
)}
>
<div
class={clsx(
'w-[200px] p-4 h-full backdrop-blur flex flex-col',
isGame.value ? 'bg-[#fff]/10 text-white ' : 'bg-[#ebebeb]'
)}
>
<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' : '')
'w-full h-0 flex-grow mb-4 rounded-lg transition-all flex justify-center items-center '
}
>
<div class=" relative">
{profile.id ? (
<div
class="w-16 h-16 rounded-full overflow-hidden cursor-pointer"
onClick={() => {
router.go('settings-user')
}}
>
<div class="w-12 h-12 relative">
<AvatarCircle />
</div>
) : (
<div
class={'px-7 py-2 rounded-md cursor-pointer'}
style={{
background: 'linear-gradient(180deg,#ffaa4e 0%,#ff6227 100%)'
}}
onClick={() => {
router.go('settings-user')
}}
>
登录注册
</div>
)}
</div>
</div>
{isGame.value ? (
<img class={'mb-5 '} src={SettingLineImg}></img>
) : (
<div class={'w-full mb-5 h-[1px] bg-[#000000] opacity-10'}></div>
)}
<div class={'flex flex-col overflow-y-auto h-[370px] scrollbar-hide'}>
<SettingsTab label="壁纸" path="settings-background" />
<SettingsTab label="图标" path="settings-block" />
<SettingsTab label="搜索" path="settings-search" />
@ -76,6 +129,7 @@ export default defineComponent(() => {
<SettingsTab label="重置" path="settings-reset" />
<SettingsTab label="问题反馈" path="settings-fallback" />
</div>
</div>
<Content />
</div>
)}

13
src/user/UserPage.tsx
View File

@ -5,11 +5,14 @@ import AvatarCircle from './AvatarCircle'
import useUserStore from './useUserStore'
import { EditOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons-vue'
import { globalToast } from '@/main'
import clsx from 'clsx'
import useLayoutStore from '@/layout/useLayoutStore'
const labelStyle = 'w-16 text-black/60'
const labelStyle = 'w-16'
export default defineComponent(() => {
const router = useRouterStore()
const layout = useLayoutStore()
const user = useUserStore()
return () => (
<div class="absolute left-0 top-0 w-full h-full p-4 flex flex-col">
@ -19,7 +22,12 @@ export default defineComponent(() => {
</div>
</div>
{user.isLogin && (
<div class="h-0 flex-grow py-4 px-12">
<div
class={clsx(
'h-0 flex-grow py-4 px-12 ',
layout.state.current === 0 ? 'text-white' : 'text-[#333]'
)}
>
<div class="flex py-2">
<div class={labelStyle}>用户名:</div>
<div class="w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap break-all">
@ -52,6 +60,7 @@ export default defineComponent(() => {
</Button>
<Button
type="text"
class={'text-[#999] hover:text-[#999]'}
icon={<LogoutOutlined />}
onClick={() => {
Modal.confirm({

3
vite.config.ts
View File

@ -30,7 +30,8 @@ export default defineConfig({
base: '/tab',
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
'@': fileURLToPath(new URL('./src', import.meta.url)),
'~': fileURLToPath(new URL('./', import.meta.url))
}
},
build: {