molong/vueadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
molong
2026-01-16 11:44:13 +08:00
parent 08f97d1a21
commit 56c35b920e
5 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/layouts/index.vue
View File

@@ -14,7 +14,7 @@
<a-layout class="main-layout">
<a-layout-header class="app-header">
<div class="header-left">
<a-button type="text" :icon="sidebarCollapsed ? 'menu-unfold' : 'menu-fold'"
<a-button type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
@click="toggleSidebar" class="collapse-btn" />
<breadcrumb />
</div>
@@ -44,7 +44,7 @@
<a-layout class="main-layout">
<a-layout-header class="app-header">
<div class="header-left">
<a-button type="text" :icon="sidebarCollapsed ? 'menu-unfold' : 'menu-fold'"
<a-button type="text" :icon="sidebarCollapsed ? h(MenuUnfoldOutlined) : h(MenuFoldOutlined)"
@click="toggleSidebar" class="collapse-btn" />
<breadcrumb />
</div>
@@ -85,9 +85,10 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, ref, h } from 'vue'
import { useRoute } from 'vue-router'
import { useLayoutStore } from '@/stores/modules/layout'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import userbar from './components/userbar.vue'
import breadcrumb from './components/breadcrumb.vue'
@@ -143,6 +144,7 @@ const handleCollapse = (collapsed) => {
align-items: center;
background-color: #ffffff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
height: 60px;
z-index: 9;
.header-left {
@@ -152,7 +154,7 @@ const handleCollapse = (collapsed) => {
.collapse-btn {
font-size: 16px;
padding: 4px 8px;
padding: 0 8px;
}
}
}
@@ -191,7 +193,7 @@ const handleCollapse = (collapsed) => {
.menu-sidebar {
background-color: #ffffff;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 1px 0 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}
@@ -204,7 +206,6 @@ const handleCollapse = (collapsed) => {
.app-header {
padding: 0 20px;
height: 50px;
}
.app-main {
@@ -216,7 +217,7 @@ const handleCollapse = (collapsed) => {
&.layout-menu {
.full-menu-sidebar {
background-color: #ffffff;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.1);
z-index: 10;
.logo-box-full {
@@ -251,7 +252,6 @@ const handleCollapse = (collapsed) => {
.app-header {
padding: 0 20px;
height: 50px;
}
.app-main {
@@ -265,7 +265,6 @@ const handleCollapse = (collapsed) => {
.top-header {
padding: 0 20px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;