chore: 调整默认布局为混合布局

This commit is contained in:
2025-04-12 21:51:17 +08:00
parent 7e6b219c23
commit 8ad088615f
5 changed files with 40 additions and 2 deletions

View File

@@ -5,11 +5,11 @@ export const defaultSettings: App.AppSettings = {
tabMode: 'card-gutter', tabMode: 'card-gutter',
animate: false, animate: false,
animateMode: 'zoom-fade', animateMode: 'zoom-fade',
menuCollapse: true, menuCollapse: false,
menuAccordion: true, menuAccordion: true,
menuDark: false, menuDark: false,
copyrightDisplay: true, copyrightDisplay: true,
layout: 'left', layout: 'mix',
enableColorWeaknessMode: false, enableColorWeaknessMode: false,
enableMourningMode: false, enableMourningMode: false,
} }

View File

@@ -6,6 +6,7 @@
> >
<Logo :collapsed="appStore.menuCollapse"></Logo> <Logo :collapsed="appStore.menuCollapse"></Logo>
<Menu :menus="leftMenus" :menu-style="{ width: '220px', flex: 1 }"></Menu> <Menu :menus="leftMenus" :menu-style="{ width: '220px', flex: 1 }"></Menu>
<WwAds class="ads" />
</section> </section>
<section class="layout-mix-right"> <section class="layout-mix-right">
@@ -41,6 +42,7 @@ import Menu from './components/Menu/index.vue'
import HeaderRightBar from './components/HeaderRightBar/index.vue' import HeaderRightBar from './components/HeaderRightBar/index.vue'
import Logo from './components/Logo.vue' import Logo from './components/Logo.vue'
import MenuFoldBtn from './components/MenuFoldBtn.vue' import MenuFoldBtn from './components/MenuFoldBtn.vue'
import WwAds from './components/WwAds.vue'
import GiFooter from '@/components/GiFooter/index.vue' import GiFooter from '@/components/GiFooter/index.vue'
import { useAppStore, useRouteStore } from '@/stores' import { useAppStore, useRouteStore } from '@/stores'
import { isExternal } from '@/utils/validate' import { isExternal } from '@/utils/validate'

View File

@@ -11,6 +11,7 @@
<a-scrollbar outer-class="menu-scroll-view" style="height: 100%; overflow: auto"> <a-scrollbar outer-class="menu-scroll-view" style="height: 100%; overflow: auto">
<Menu></Menu> <Menu></Menu>
</a-scrollbar> </a-scrollbar>
<WwAds class="ads" />
</a-layout-sider> </a-layout-sider>
</div> </div>
</template> </template>
@@ -18,6 +19,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Menu from '../Menu/index.vue' import Menu from '../Menu/index.vue'
import Logo from '../Logo.vue' import Logo from '../Logo.vue'
import WwAds from '../WwAds.vue'
import { useAppStore } from '@/stores' import { useAppStore } from '@/stores'
import { useDevice } from '@/hooks' import { useDevice } from '@/hooks'

View File

@@ -0,0 +1,33 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import { useAppStore } from '@/stores'
const appStore = useAppStore()
onMounted(() => {
const s = document.createElement('script')
s.async = true
s.src = `https://cdn.wwads.cn/js/makemoney.js`
document.querySelector('.wwads-container')!.appendChild(s)
})
</script>
<template>
<div v-show="!appStore.menuCollapse" class="wwads-container">
<div class="wwads-cn wwads-vertical" data-id="359" style="max-width: 180px"></div>
</div>
</template>
<style>
.wwads-container {
padding: 1px 15px 10px;
margin-top: 20px;
background-color: var(--color-fill-2);
}
.wwads-vertical {
background-color: transparent !important;
}
.wwads-text {
color: var(--color-text-2) !important;
}
</style>

View File

@@ -73,6 +73,7 @@ export const systemRoutes: RouteRecordRaw[] = [
name: 'About', name: 'About',
component: Layout, component: Layout,
meta: { title: '关于项目', icon: 'apps', hidden: false, sort: 999 }, meta: { title: '关于项目', icon: 'apps', hidden: false, sort: 999 },
redirect: '/about/document/api',
children: [ children: [
{ {
path: '/about/document/api', path: '/about/document/api',