99 lines
3.1 KiB
Vue
99 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import useSettingsStore from './settings/useSettingsStore'
|
||
import Header from './layout/header'
|
||
import Background from './layout/background'
|
||
import GLobalModal from './GlobalModal'
|
||
import SettingsButton from './settings/SettingsButton'
|
||
import SettingsOverlay from './settings/SettingsOverlay'
|
||
import Sider from './layout/sider'
|
||
import Dock from './layout/dock'
|
||
import DirModal from './layout/grid/DirModal'
|
||
import GlobalMenu from './layout/GlobalMenu'
|
||
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'
|
||
import TomatoPage from './layout/grid/TomatoPage'
|
||
import useRouterStore from './useRouterStore'
|
||
import BackupRecovery from './user/BackupRecovery'
|
||
import { ConfigProvider } from 'ant-design-vue'
|
||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||
const Grid = asyncLoader(() => import('./layout/grid'))
|
||
const Fox = asyncLoader(() => import('./fox'))
|
||
const settings = useSettingsStore()
|
||
const blockSize = computed(() => settings.state.blockSize + 'rem')
|
||
const blockPadding = computed(() => settings.state.blockPadding + 'rem')
|
||
const mainWidth = computed(() => settings.state.mainWidth + '%')
|
||
const blockRadius = computed(() => settings.state.blockRadius)
|
||
const router = useRouterStore()
|
||
const layout = useLayoutStore()
|
||
</script>
|
||
<template>
|
||
<ConfigProvider :locale="zhCN">
|
||
<div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
|
||
<Header />
|
||
<Background
|
||
@dblclick="
|
||
() => {
|
||
layout.state.simple = !layout.state.simple
|
||
}
|
||
"
|
||
/>
|
||
<GLobalModal />
|
||
<SettingsOverlay />
|
||
<SettingsButton />
|
||
|
||
<Sider
|
||
v-if="
|
||
!layout.state.simple ||
|
||
(layout.state.simple && settings.state.simpleModeShowString.includes('showSider'))
|
||
"
|
||
/>
|
||
<LoginModal v-if="router.path === 'global-login'" />
|
||
<Transition>
|
||
<Grid v-if="layout.ready && !layout.state.simple" />
|
||
</Transition>
|
||
<Dock
|
||
v-if="
|
||
!layout.state.simple ||
|
||
(layout.state.simple && settings.state.simpleModeShowString.includes('showDock'))
|
||
"
|
||
/>
|
||
<div
|
||
class="fixed z-40 right-[14%] top-8"
|
||
v-if="
|
||
!layout.state.simple ||
|
||
(layout.state.simple && settings.state.simpleModeShowString.includes('showPet'))
|
||
"
|
||
>
|
||
<Fox />
|
||
</div>
|
||
<DirModal />
|
||
<GlobalMenu />
|
||
<WelcomePage></WelcomePage>
|
||
<TomatoPage></TomatoPage>
|
||
|
||
<BackupRecovery v-if="router.path === 'global-backup'"></BackupRecovery>
|
||
</div>
|
||
</ConfigProvider>
|
||
</template>
|
||
|
||
<style lang="less">
|
||
.style-root {
|
||
--block-size: 5.2rem;
|
||
--block-padding: 1rem;
|
||
--main-width: 95%;
|
||
--block-radius: 0.2;
|
||
|
||
// 以下是响应式设计, 绑定 settings 中的尺寸
|
||
@media screen and (min-width: 68px) {
|
||
/* 768px 之上，尺寸可以独自设计 */
|
||
--block-size: v-bind(blockSize);
|
||
--block-padding: v-bind(blockPadding);
|
||
--main-width: v-bind(mainWidth);
|
||
--block-radius: v-bind(blockRadius);
|
||
}
|
||
}
|
||
</style>
|