From 97187b246b94dd58cb585ebaed7e8644d2f00119 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:26:04 +0800 Subject: [PATCH] update 调整代码格式 --- src/layout/index.vue | 106 ++++++++++++++++++++++++++-------------------------- 1 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index 8bc1c8b..fb59a13 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,56 +1,3 @@ -<script setup lang="ts"> -import SideBar from './components/Sidebar/index.vue' -import { AppMain, Navbar, Settings, TagsView } from './components' -import useAppStore from '@/store/modules/app' -import useSettingsStore from '@/store/modules/settings' - -const settingsStore = useSettingsStore() -const theme = computed(() => settingsStore.theme); -const sidebar = computed(() => useAppStore().sidebar); -const device = computed(() => useAppStore().device); -const needTagsView = computed(() => settingsStore.tagsView); -const fixedHeader = computed(() => settingsStore.fixedHeader); - -const classObj = computed(() => ({ - hideSidebar: !sidebar.value.opened, - openSidebar: sidebar.value.opened, - withoutAnimation: sidebar.value.withoutAnimation, - mobile: device.value === 'mobile' -})) - -const { width } = useWindowSize(); -const WIDTH = 992; // refer to Bootstrap's responsive design - -watchEffect(() => { - if (device.value === 'mobile' && sidebar.value.opened) { - useAppStore().closeSideBar({ withoutAnimation: false }) - } - if (width.value - 1 < WIDTH) { - useAppStore().toggleDevice('mobile') - useAppStore().closeSideBar({ withoutAnimation: true }) - } else { - useAppStore().toggleDevice('desktop') - } -}) - -const navbarRef = ref(Navbar); -const settingRef = ref(Settings); - -onMounted(() => { - nextTick(() => { - navbarRef.value.initTenantList(); - }) -}) - -const handleClickOutside = () => { - useAppStore().closeSideBar({ withoutAnimation: false }) -} - -const setLayout = () => { - settingRef.value.openSetting(); -} -</script> - <template> <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> @@ -66,6 +13,59 @@ </div> </template> +<script setup lang="ts"> +import SideBar from './components/Sidebar/index.vue' +import { AppMain, Navbar, Settings, TagsView } from './components' +import useAppStore from '@/store/modules/app' +import useSettingsStore from '@/store/modules/settings' + +const settingsStore = useSettingsStore() +const theme = computed(() => settingsStore.theme); +const sidebar = computed(() => useAppStore().sidebar); +const device = computed(() => useAppStore().device); +const needTagsView = computed(() => settingsStore.tagsView); +const fixedHeader = computed(() => settingsStore.fixedHeader); + +const classObj = computed(() => ({ + hideSidebar: !sidebar.value.opened, + openSidebar: sidebar.value.opened, + withoutAnimation: sidebar.value.withoutAnimation, + mobile: device.value === 'mobile' +})) + +const { width } = useWindowSize(); +const WIDTH = 992; // refer to Bootstrap's responsive design + +watchEffect(() => { + if (device.value === 'mobile' && sidebar.value.opened) { + useAppStore().closeSideBar({ withoutAnimation: false }) + } + if (width.value - 1 < WIDTH) { + useAppStore().toggleDevice('mobile') + useAppStore().closeSideBar({ withoutAnimation: true }) + } else { + useAppStore().toggleDevice('desktop') + } +}) + +const navbarRef = ref(Navbar); +const settingRef = ref(Settings); + +onMounted(() => { + nextTick(() => { + navbarRef.value.initTenantList(); + }) +}) + +const handleClickOutside = () => { + useAppStore().closeSideBar({ withoutAnimation: false }) +} + +const setLayout = () => { + settingRef.value.openSetting(); +} +</script> + <style lang="scss" scoped> @import "@/assets/styles/mixin.scss"; @import "@/assets/styles/variables.module.scss"; -- Gitblit v1.9.3