67 lines
2.2 KiB
Vue
67 lines
2.2 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'
|
||
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>
|
||
<div class="fixed left-0 top-0 w-full h-screen style-root" @contextmenu.prevent>
|
||
<Header />
|
||
<Background />
|
||
<GLobalModal />
|
||
<SettingsOverlay />
|
||
<SettingsButton />
|
||
<Sider />
|
||
<LoginModal v-if="router.path !== 'global-login'"/>
|
||
<Grid v-if="layout.ready" />
|
||
<Dock />
|
||
<div class="fixed z-40 right-[14%] top-8">
|
||
<Fox />
|
||
</div>
|
||
<DirModal />
|
||
<GlobalMenu />
|
||
<WelcomePage></WelcomePage>
|
||
<TomatoPage></TomatoPage>
|
||
</div>
|
||
</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>
|