Lexcubia
/
quasar-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 优化布局结构，细化拆分

This commit is contained in:
Lexcubia 2025-04-08 09:03:24 +00:00
parent 086bbd2fe7
commit 093e176cf5
9 changed files with 119 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/ContainerLayout.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<q-page-container>
<router-view />
</q-page-container>
</template>
<script lang="ts" setup>
// 无额外逻辑
</script>

17
src/layouts/FooterLayout.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-footer elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="settingStore.toggleLeftDrawer" />
<q-toolbar-title>
<div>页脚</div>
</q-toolbar-title>
<q-btn dense flat round icon="menu" @click="settingStore.toggleRightDrawer" />
</q-toolbar>
</q-footer>
</template>
<script lang="ts" setup>
import { useSettingStore } from 'stores/setting'
const settingStore = useSettingStore()
</script>

26
src/layouts/HeaderLayout.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<q-header reveal elevated class="bg-primary text-white" height-hint="98">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>标题</q-toolbar-title>
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
</q-toolbar>
<q-tabs align="left">
<q-route-tab to="/page1" label="Page One" />
<q-route-tab to="/page2" label="Page Two" />
<q-route-tab to="/page3" label="Page Three" />
</q-tabs>
</q-header>
</template>
<script lang="ts" setup>
import { useSettingStore } from 'stores/setting'
const settingStore = useSettingStore()
const toggleLeftDrawer = () => {
settingStore.toggleLeftDrawer()
}
const toggleRightDrawer = () => {
settingStore.toggleRightDrawer()
}
</script>

17
src/layouts/LeftDrawerLayout.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-drawer
show-if-above
v-model="settingStore.leftDrawerOpen"
side="left"
elevated
>
<!-- 左侧抽屉菜单 -->
左栏
</q-drawer>
</template>
<script lang="ts" setup>
import { useSettingStore } from 'stores/setting'
const settingStore = useSettingStore()
</script>

67
src/layouts/MainLayout.vue
View File

@ -1,60 +1,19 @@
<template>
<q-layout view="hHh lpR lff">
<q-header reveal elevated class="bg-primary text-white" height-hint="98">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>
<!-- <q-avatar>
<img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
</q-avatar> -->
标题
</q-toolbar-title>
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
</q-toolbar>
<q-tabs align="left">
<q-route-tab to="/page1" label="Page One" />
<q-route-tab to="/page2" label="Page Two" />
<q-route-tab to="/page3" label="Page Three" />
</q-tabs>
</q-header>
<q-drawer show-if-above v-model="leftDrawerOpen" side="left" elevated>
<!-- drawer content -->
左栏
</q-drawer>
<q-drawer show-if-above v-model="rightDrawerOpen" side="right" elevated>
<!-- drawer content -->
右栏
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
<q-footer elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
<q-toolbar-title>
<div>页脚</div>
</q-toolbar-title>
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
</q-toolbar>
</q-footer>
<HeaderLayout />
<TabsLayout />
<LeftDrawerLayout />
<RightDrawerLayout />
<ContainerLayout />
<FooterLayout />
</q-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const leftDrawerOpen = ref(false)
const rightDrawerOpen = ref(false)
function toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value
}
function toggleRightDrawer() {
rightDrawerOpen.value = !rightDrawerOpen.value
}
</script>
import HeaderLayout from './HeaderLayout.vue'
import TabsLayout from './TabsLayout.vue'
import LeftDrawerLayout from './LeftDrawerLayout.vue'
import RightDrawerLayout from './RightDrawerLayout.vue'
import FooterLayout from './FooterLayout.vue'
import ContainerLayout from './ContainerLayout.vue'
</script>

17
src/layouts/RightDrawerLayout.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<q-drawer
show-if-above
v-model="settingStore.rightDrawerOpen"
side="right"
elevated
>
<!-- 右侧抽屉内容 -->
右栏
</q-drawer>
</template>
<script lang="ts" setup>
import { useSettingStore } from 'stores/setting'
const settingStore = useSettingStore()
</script>

11
src/layouts/TabsLayout.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<q-tabs align="left">
<q-route-tab to="/page1" label="Page One" />
<q-route-tab to="/page2" label="Page Two" />
<q-route-tab to="/page3" label="Page Three" />
</q-tabs>
</template>
<script lang="ts" setup>
// 无额外逻辑
</script>

2
src/stores/index.ts
View File

@ -1,7 +1,7 @@
import { defineStore } from '#q-app/wrappers'
import { createPinia } from 'pinia'
import { useCounterStore } from './example-store'
import { useSettingStore } from './setting-store' // 确保 setting-store 被导入
import { useSettingStore } from './setting' // 确保 setting-store 被导入
/*
* When adding new properties to stores, you should also

10
src/stores/setting-store.ts → src/stores/setting.ts
View File

@ -4,12 +4,12 @@ export const useSettingStore = defineStore('setting', {
state: () => ({
theme: 'light',
language: 'en-US',
leftDrawerOpen: false,
rightDrawerOpen: false,
}),
getters: {
isDarkTheme: (state) => state.theme === 'dark',
},
actions: {
setTheme(theme: string) {
this.theme = theme
@ -17,6 +17,12 @@ export const useSettingStore = defineStore('setting', {
setLanguage(language: string) {
this.language = language
},
toggleLeftDrawer() {
this.leftDrawerOpen = !this.leftDrawerOpen
},
toggleRightDrawer() {
this.rightDrawerOpen = !this.rightDrawerOpen
},
},
})