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 LoginModal from './user/LoginModal'
import { computed } from 'vue'
import asyncLoader from './utils/asyncLoader'
import useLayoutStore from './layout/useLayoutStore'
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 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 />
    <Grid v-if="layout.ready" />
    <Dock />
    <div class="fixed z-40 right-[14%] top-8">
      <Fox />
    </div>
  </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>