优化代码

src/boot.js

@@ -0,0 +1,10 @@
+import * as AIcons from '@ant-design/icons-vue'
+
+export default {
+	install(app) {
+
+		for (let icon in AIcons) {
+			app.component(`${icon}`, AIcons[icon])
+		}
+	}
+}

src/layouts/components/userbar.vue

@@ -1,5 +1,18 @@
 <template>
 	<div class="userbar">
+		<a-tooltip title="全屏">
+			<a-button type="text" @click="toggleFullscreen" class="action-btn">
+				<FullscreenOutlined v-if="!isFullscreen" />
+				<FullscreenExitOutlined v-else />
+			</a-button>
+		</a-tooltip>
+
+		<a-tooltip title="布局设置">
+			<a-button type="text" @click="showSetting = true" class="action-btn">
+				<SettingOutlined />
+			</a-button>
+		</a-tooltip>
+
 		<a-dropdown :trigger="['click']">
 			<div class="user-info">
 				<a-avatar :size="32" :src="userStore.user?.avatar || ''">
@@ -27,19 +40,6 @@
 			</template>
 		</a-dropdown>
 
-		<a-tooltip title="全屏">
-			<a-button type="text" @click="toggleFullscreen" class="action-btn">
-				<FullscreenOutlined v-if="!isFullscreen" />
-				<FullscreenExitOutlined v-else />
-			</a-button>
-		</a-tooltip>
-
-		<a-tooltip title="布局设置">
-			<a-button type="text" @click="showSetting = true" class="action-btn">
-				<SettingOutlined />
-			</a-button>
-		</a-tooltip>
-
 		<!-- 布局设置抽屉 -->
 		<a-drawer v-model:open="showSetting" title="布局设置" placement="right" :width="280">
 			<div class="setting-content">
@@ -185,7 +185,7 @@ const changeThemeColor = (color) => {
 		align-items: center;
 		gap: 8px;
 		cursor: pointer;
-		padding: 4px 12px;
+		padding: 0 12px;
 		border-radius: 4px;
 		transition: background-color 0.3s;
 

src/layouts/index.vue

@@ -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;

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 import router from './router'
 import pinia from './stores'
 import i18n from './i18n'
+import boot from './boot'
 
 const app = createApp(App)
 
@@ -13,5 +14,6 @@ app.use(Antd)
 app.use(router)
 app.use(pinia)
 app.use(i18n)
+app.use(boot)
 
 app.mount('#app')

src/pages/home/index.vue

@@ -4,7 +4,6 @@
 <template>
 	<div class="dashboard">
 		<h1 class="page-title">欢迎回来，管理员！</h1>
-
 		<div class="dashboard-cards">
 			<div class="stat-card">
 				<div class="stat-icon">👥</div>