fix: 修复左侧边栏折叠样式问题/处理控制台警告修正写法

apps/web/src/components/Sidebar/index.vue

@@ -12,7 +12,9 @@
 				}"
 			>
 				<el-dropdown placement="bottom-start" trigger="click">
-					<SvgIcon name="Plus" style="cursor: pointer" />
+					<span style="cursor: pointer">
+						<SvgIcon name="Plus" />
+					</span>
 					<template #dropdown>
 						<el-dropdown-menu>
 							<el-dropdown-item @click="createWorkflow">工作流程</el-dropdown-item>
@@ -30,7 +32,9 @@
 							<span class="desc">快速搜索</span>
 						</div>
 					</template>
-					<SvgIcon name="Search" @click="showSearchDialog = true" style="cursor: pointer" />
+					<span style="cursor: pointer" @click="showSearchDialog = true">
+						<SvgIcon name="Search" />
+					</span>
 				</el-tooltip>
 				<el-tooltip placement="bottom">
 					<template #content>
@@ -39,7 +43,9 @@
 							<span class="desc">折叠侧边栏</span>
 						</div>
 					</template>
-					<SvgIcon name="Fold" @click="toggle" />
+					<span style="cursor: pointer" @click="toggle">
+						<SvgIcon name="Fold" />
+					</span>
 				</el-tooltip>
 			</div>
 		</div>
@@ -47,7 +53,7 @@
 		<el-menu :default-active="activeMenu" router class="el-menu-vertical-demo main-menu">
 			<el-menu-item index="/">
 				<el-tooltip v-if="collapsed" content="概览" placement="right">
-					<SvgIcon name="home" />
+					<span><SvgIcon name="home" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="home" />
 				<span v-if="!collapsed" class="label">概览</span>
@@ -55,7 +61,7 @@
 
 			<el-menu-item index="/chat">
 				<el-tooltip v-if="collapsed" content="聊天" placement="right">
-					<SvgIcon name="chatMessage" />
+					<span><SvgIcon name="chatMessage" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="chatMessage" />
 				<span v-if="!collapsed" class="label">聊天 <small class="beta">beta</small></span>
@@ -71,7 +77,7 @@
 				@click="$router.push('/management')"
 			>
 				<el-tooltip v-if="collapsed" content="管理面板" placement="right">
-					<SvgIcon name="platForm" />
+					<span><SvgIcon name="platForm" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="platForm" />
 				<span v-if="!collapsed" class="label">管理面板</span>
@@ -83,7 +89,7 @@
 				@click="$router.push('/templates')"
 			>
 				<el-tooltip v-if="collapsed" content="模板" placement="right">
-					<SvgIcon name="box" />
+					<span><SvgIcon name="box" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="box" />
 				<span v-if="!collapsed" class="label">模板</span>
@@ -95,7 +101,7 @@
 				@click="$router.push('/statistics')"
 			>
 				<el-tooltip v-if="collapsed" content="统计" placement="right">
-					<SvgIcon name="line" />
+					<span><SvgIcon name="line" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="line" />
 				<span v-if="!collapsed" class="label">统计</span>
@@ -107,7 +113,7 @@
 				@click="$router.push('/help')"
 			>
 				<el-tooltip v-if="collapsed" content="帮助" placement="right">
-					<SvgIcon name="help" />
+					<span><SvgIcon name="help" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="help" />
 				<span v-if="!collapsed" class="label">帮助</span>
@@ -119,7 +125,7 @@
 				@click="$router.push('/settings')"
 			>
 				<el-tooltip v-if="collapsed" content="设置" placement="right">
-					<SvgIcon name="setting" />
+					<span><SvgIcon name="setting" /></span>
 				</el-tooltip>
 				<SvgIcon v-else name="setting" />
 				<span v-if="!collapsed" class="label">设置</span>
@@ -242,6 +248,21 @@ const handleDropdownSelect = (item: any) => {
 	color: #ff6b6b;
 	background-color: #f0f0f0;
 }
+.top-icons > span {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.top-icons > span svg {
+	padding: 6px 8px;
+	margin: -6px -8px;
+	border-radius: 4px;
+	transition: all 0.2s ease;
+}
+.top-icons > span:hover svg {
+	color: #ff6b6b;
+	background-color: #f0f0f0;
+}
 
 .main-menu {
 	padding-top: 8px;
@@ -255,7 +276,7 @@ const handleDropdownSelect = (item: any) => {
 	height: 32px;
 }
 .el-menu-vertical-demo .el-menu-item:hover {
-	background: #fafafa;
+	background: #f0f0f0;
 }
 .el-menu-vertical-demo .el-menu-item.is-active {
 	background: #f0f0f0 !important;
@@ -272,7 +293,7 @@ const handleDropdownSelect = (item: any) => {
 	flex: 1 1 auto;
 }
 .bottom-menu {
-	padding: 8px 6px;
+	padding-bottom: 8px;
 	border-top: 1px solid #f2f2f2;
 	display: flex;
 	flex-direction: column;
@@ -282,7 +303,7 @@ const handleDropdownSelect = (item: any) => {
 	display: flex;
 	align-items: center;
 	gap: 10px;
-	padding: 8px 12px;
+	padding: 8px 18px;
 	color: #333;
 	cursor: pointer;
 	border-radius: 4px;
@@ -307,6 +328,11 @@ const handleDropdownSelect = (item: any) => {
 }
 .sidebar.collapsed .top-icons {
 	gap: 10px;
+	flex-direction: column;
+}
+.sidebar.collapsed .top-icons > span {
+	width: 100%;
+	justify-content: center;
 }
 :deep(.el-button + .el-button) {
 	margin-left: 0;
@@ -347,4 +373,7 @@ const handleDropdownSelect = (item: any) => {
 		font-size: 11px;
 	}
 }
+:deep(.el-menu-item *) {
+	vertical-align: initial;
+}
 </style>

apps/web/src/layouts/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-container style="height: 100vh">
-		<el-aside width="200px">
+		<el-aside width="auto">
 			<Sidebar />
 		</el-aside>
 

apps/web/src/views/Dashboard.vue

@@ -90,7 +90,7 @@
 				</div>
 
 				<div>
-					<el-button type="text">筛选</el-button>
+					<el-button text>筛选</el-button>
 				</div>
 			</div>