xyyd-fatfox/src/App.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>