优化左边栏折叠效果

dashboard/src2/App.vue

@@ -1,10 +1,22 @@
 <template>
 	<div class="relative flex h-full flex-col">
 		<n-layout class="h-full" has-sider>
-			<AppSidebar
+			<n-layout-sider
 				v-if="!isSignupFlow && !$isMobile && !isHideSidebar && $session.user"
+				bordered
+				collapse-mode="width"
+				:collapsed-width="64"
+				:width="240"
 				v-model:collapsed="sidebarCollapsed"
-			/>
+				:show-trigger="true"
+				:responsive="true"
+				:breakpoint="768"
+				class="app-sidebar-sider"
+				@collapse="sidebarCollapsed = true"
+				@expand="sidebarCollapsed = false"
+			>
+				<AppSidebar :collapsed="sidebarCollapsed" />
+			</n-layout-sider>
 			<n-layout class="h-full">
 				<div class="w-full h-full overflow-auto" id="scrollContainer">
 					<MobileNav
@@ -34,7 +46,7 @@
 
 <script setup>
 import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
-import { NLayout } from 'naive-ui';
+import { NLayout, NLayoutSider } from 'naive-ui';
 import { Toaster } from 'vue-sonner';
 import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
@@ -109,3 +121,40 @@ provide('session', session);
 </script>
 
 <style src="../src/assets/style.css"></style>
+
+<style>
+/* 侧边栏整体样式优化 */
+.app-sidebar-sider {
+	background: #fafafa !important;
+	border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
+	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+/* 触发器样式优化 */
+.app-sidebar-sider .n-layout-sider-trigger {
+	background: #fff !important;
+	border: 1px solid rgba(0, 0, 0, 0.08) !important;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+	transition: all 0.2s ease !important;
+	width: 32px !important;
+	height: 32px !important;
+	border-radius: 50% !important;
+	right: -16px !important;
+}
+
+.app-sidebar-sider .n-layout-sider-trigger:hover {
+	background: #f5f5f5 !important;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.app-sidebar-sider .n-layout-sider-trigger .n-base-icon {
+	color: #666;
+	font-size: 14px;
+}
+
+/* 确保侧边栏内容正确显示 */
+.app-sidebar-sider .n-layout-sider-scroll-container {
+	height: 100%;
+	overflow: hidden;
+}
+</style>

dashboard/src2/components/AppSidebar.vue

@@ -1,19 +1,7 @@
 <template>
-	<n-layout-sider
+	<div class="sidebar-container">
-		:collapsed="collapsed"
-		:collapsed-width="64"
-		:width="220"
-		:show-trigger="true"
-		:collapsible="true"
-		:trigger-style="{ position: 'absolute', right: '-20px' }"
-		:collapsed-trigger-style="{ position: 'absolute', right: '-20px' }"
-		class="h-screen"
-		@collapse="handleCollapse"
-		@expand="handleExpand"
-	>
-		<div style="display: block; height: 100%;">
 		<!-- 用户信息区域 -->
-			<div class="p-2">
+		<div class="sidebar-header" :class="{ 'sidebar-header-collapsed': collapsed }">
 			<n-dropdown
 				:options="dropdownOptions"
 				:show-arrow="true"
@@ -21,22 +9,15 @@
 				@select="handleDropdownSelect"
 			>
 				<div
-						class="flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-gray-200"
+					class="user-info"
-						:class="{ 'justify-center': collapsed }"
+					:class="{ 'user-info-collapsed': collapsed }"
 				>
-						<JLogo class="h-8 w-8 shrink-0 rounded" />
+					<JLogo class="logo-icon" />
-						<div
+					<div v-if="!collapsed" class="user-info-text">
-							v-if="!collapsed"
+						<div class="brand-name">今果 Jingrow</div>
-							class="ml-2 flex flex-1 flex-col overflow-hidden"
-						>
-							<div class="text-base font-medium leading-none text-gray-900">
-								今果 Jingrow
-							</div>
 						<n-tooltip>
 							<template #trigger>
-									<div
+								<div class="user-name">
-										class="mt-1 overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-gray-700"
-									>
 									{{ teamUserText }}
 								</div>
 							</template>
@@ -48,13 +29,13 @@
 		</div>
 
 		<!-- 导航菜单 -->
-			<div class="flex-1 overflow-auto">
+		<div class="sidebar-menu">
 			<NavigationItems>
 				<template v-slot="{ navigation }">
 					<n-menu
 						:collapsed="collapsed"
 						:collapsed-width="64"
-							:collapsed-icon-size="24"
+						:collapsed-icon-size="20"
 						:options="convertToMenuOptions(navigation)"
 						:value="activeKey"
 						:router="false"
@@ -68,20 +49,18 @@
 
 	<!-- 切换团队对话框 -->
 	<SwitchTeamDialog2 v-model="showTeamSwitcher" />
-	</n-layout-sider>
 </template>
 
 <script>
 import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { NLayoutSider, NMenu, NDropdown, NTooltip, NIcon } from 'naive-ui';
+import { NMenu, NDropdown, NTooltip, NIcon } from 'naive-ui';
 import NavigationItems from './NavigationItems.vue';
 import JLogo from '@/components/icons/JLogo.vue';
 
 export default {
 	name: 'AppSidebar',
 	components: {
-		NLayoutSider,
 		NMenu,
 		NDropdown,
 		NTooltip,
@@ -177,11 +156,6 @@ export default {
 			return items
 				.filter((item) => item.condition !== false)
 				.map((item) => {
-					console.log(`[AppSidebar] Processing "${item.name}":`, {
-						hasIcon: !!item.icon,
-						iconType: typeof item.icon,
-						collapsed: collapsed.value
-					});
 					// 处理图标：item.icon 是一个函数，返回 h() 创建的组件
 					// Naive UI 的 n-menu 需要 icon 是一个渲染函数
 					let iconComponent = undefined;
@@ -189,16 +163,6 @@ export default {
 						iconComponent = () => {
 							try {
 								const iconVNode = item.icon();
-								// 检查图标 VNode 的实际结构
-								console.log(`[AppSidebar] Icon render for "${item.name}":`, {
-									hasVNode: !!iconVNode,
-									vnodeType: iconVNode?.type,
-									vnodeTypeName: iconVNode?.type?.name || iconVNode?.type?.__name || iconVNode?.type,
-									vnodeProps: iconVNode?.props,
-									vnodeChildren: iconVNode?.children,
-									shapeFlag: iconVNode?.shapeFlag,
-									collapsed: collapsed.value
-								});
 								
 								// 如果图标 VNode 没有 props，添加默认的 size
 								if (iconVNode && !iconVNode.props) {
@@ -214,14 +178,7 @@ export default {
 								}
 								
 								// 用 NIcon 包装
-								const wrapped = h(NIcon, null, { default: () => iconVNode });
+								return h(NIcon, null, { default: () => iconVNode });
-								console.log(`[AppSidebar] Wrapped icon for "${item.name}":`, {
-									hasWrapped: !!wrapped,
-									wrappedType: wrapped?.type,
-									wrappedChildren: wrapped?.children,
-									wrappedProps: wrapped?.props
-								});
-								return wrapped;
 							} catch (e) {
 								console.error(`[AppSidebar] Icon error for "${item.name}":`, e);
 								return null;
@@ -296,17 +253,6 @@ export default {
 			});
 		};
 
-		// 处理折叠
-		const handleCollapse = () => {
-			console.log('[AppSidebar] handleCollapse called');
-			emit('update:collapsed', true);
-		};
-
-		// 处理展开
-		const handleExpand = () => {
-			console.log('[AppSidebar] handleExpand called');
-			emit('update:collapsed', false);
-		};
 
 		// 团队用户文本
 		const teamUserText = computed(() => {
@@ -325,8 +271,6 @@ export default {
 			teamUserText,
 			handleDropdownSelect,
 			handleMenuSelect,
-			handleCollapse,
-			handleExpand,
 			convertToMenuOptions,
 		};
 	},
@@ -334,42 +278,212 @@ export default {
 </script>
 
 <style scoped>
-/* 全局覆盖，确保优先级最高 */
+/* 侧边栏容器 */
-/* 确保菜单图标在折叠状态下正确显示 */
+.sidebar-container {
-/* 注意：不要覆盖 Naive UI 的默认 display 样式，只调整必要的属性 */
+	display: block;
+	height: 100%;
+	background: #fafafa;
+}
+
+/* 用户信息区域 */
+.sidebar-header {
+	padding: 16px 12px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+	transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-header-collapsed {
+	padding: 16px 8px;
+}
+
+.user-info {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 8px 12px;
+	border-radius: 8px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.user-info:hover {
+	background: rgba(0, 0, 0, 0.04);
+}
+
+.user-info-collapsed {
+	justify-content: center;
+	padding: 8px;
+	gap: 0;
+}
+
+.user-info-collapsed .logo-icon {
+	margin: 0 auto;
+}
+
+.logo-icon {
+	width: 32px;
+	height: 32px;
+	flex-shrink: 0;
+}
+
+.user-info-text {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.brand-name {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1a1a1a;
+	line-height: 1.2;
+}
+
+.user-name {
+	font-size: 13px;
+	color: #666;
+	line-height: 1.2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 菜单区域 */
+.sidebar-menu {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 8px 0;
+}
+
+/* 菜单项样式优化 */
+:deep(.app-sidebar-menu .n-menu-item) {
+	margin: 1px 8px;
+}
+
+:deep(.app-sidebar-menu .n-menu-item-content) {
+	border-radius: 8px;
+	padding: 10px 12px;
+	margin: 0;
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	font-size: 14px;
+	color: #4a5568;
+	line-height: 1.5;
+	position: relative;
+}
+
+:deep(.app-sidebar-menu .n-menu-item-content:hover) {
+	background: rgba(0, 0, 0, 0.04);
+}
+
+:deep(.app-sidebar-menu .n-menu-item-content.n-menu-item-content--selected) {
+	background: rgba(24, 160, 88, 0.1);
+	color: #18a058;
+	font-weight: 500;
+}
+
+:deep(.app-sidebar-menu .n-menu-item-content.n-menu-item-content--selected::before) {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 3px;
+	height: 20px;
+	background: #18a058;
+	border-radius: 0 2px 2px 0;
+}
+
+/* 折叠状态下的菜单项 */
+:deep(.app-sidebar-menu.n-menu--collapsed .n-menu-item) {
+	margin: 2px 8px;
+}
 
 :deep(.app-sidebar-menu.n-menu--collapsed .n-menu-item-content) {
 	justify-content: center;
+	padding: 10px;
+	margin: 0;
+	border-radius: 8px;
+}
+
+:deep(.app-sidebar-menu.n-menu--collapsed .n-menu-item-content.n-menu-item-content--selected::before) {
+	display: none;
+}
+
+/* 图标样式优化 - 更轻量优雅 */
+:deep(.app-sidebar-menu .n-icon) {
+	color: #8b8e95;
+	transition: color 0.2s ease;
+	font-size: 18px;
 }
 
-/* 确保图标 SVG 可见 */
 :deep(.app-sidebar-menu .n-icon svg) {
-	width: 100%;
+	width: 18px;
-	height: 100%;
+	height: 18px;
+	stroke-width: 1.2;
 	display: block;
 }
 
-/* 修复 n-layout-sider 的 flex 布局导致图标不显示的问题 */
+/* 折叠状态下的图标 */
-/* 根源：Naive UI 的 .n-layout-sider 默认是 display: flex，这会导致内部图标无法正确渲染 */
+:deep(.app-sidebar-menu.n-menu--collapsed .n-icon) {
-/* 解决方案：直接覆盖 .n-layout-sider 的 display 属性，使用更高优先级的选择器 */
+	font-size: 20px;
-</style>
-
-<style>
-/* 全局样式，不使用 scoped，确保能覆盖 Naive UI 的默认样式 */
-/* 修复：覆盖 .n-layout-sider 的 display: flex，这是导致图标不显示的根本原因 */
-.n-layout-sider {
-	display: block !important;
 }
 
-.n-layout-sider .n-layout-sider-scroll-container {
+:deep(.app-sidebar-menu.n-menu--collapsed .n-icon svg) {
-	display: block !important;
+	width: 20px;
+	height: 20px;
+	stroke-width: 1.2;
 }
 
-/* 确保所有内部容器都是 block，避免 flex 布局影响图标 */
+/* 选中和悬停状态的图标颜色 */
-.n-layout-sider > * {
+:deep(.app-sidebar-menu .n-menu-item-content.n-menu-item-content--selected .n-icon) {
-	display: block !important;
+	color: #18a058;
+}
+
+:deep(.app-sidebar-menu .n-menu-item-content:hover .n-icon) {
+	color: #18a058;
+}
+
+/* 菜单标签样式 */
+:deep(.app-sidebar-menu .n-menu-item-content__icon) {
+	margin-right: 12px;
+}
+
+:deep(.app-sidebar-menu.n-menu--collapsed .n-menu-item-content__icon) {
+	margin-right: 0;
+}
+
+/* 子菜单样式 */
+:deep(.app-sidebar-menu .n-submenu) {
+	margin: 2px 8px;
+}
+
+:deep(.app-sidebar-menu .n-submenu .n-submenu-children) {
+	padding-left: 0;
+}
+
+:deep(.app-sidebar-menu .n-submenu .n-menu-item-content) {
+	padding-left: 36px;
+}
+
+/* 滚动条样式 */
+.sidebar-menu::-webkit-scrollbar {
+	width: 4px;
+}
+
+.sidebar-menu::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 2px;
+}
+
+.sidebar-menu::-webkit-scrollbar-thumb:hover {
+	background: rgba(0, 0, 0, 0.15);
 }
 </style>
-
-<style scoped>
-</style>