From 4f27721cd18f67c78c8998bdd9313ed74d2f878c Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sun, 28 Dec 2025 01:12:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E8=BE=B9=E6=A0=8F=E5=9F=BA=E4=BA=8Ena?=
 =?UTF-8?q?ive=20ui=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/src2/App.vue                   |  37 ++-
 dashboard/src2/components/AppSidebar.vue | 327 ++++++++++++++++++-----
 2 files changed, 281 insertions(+), 83 deletions(-)

diff --git a/dashboard/src2/App.vue b/dashboard/src2/App.vue
index cf36025..720247b 100644
--- a/dashboard/src2/App.vue
+++ b/dashboard/src2/App.vue
@@ -1,14 +1,12 @@
 <template>
 	<div class="relative flex h-full flex-col">
-		<div class="h-full flex-1">
-			<div class="flex h-full">
-				<div
-					v-if="!isSignupFlow && !$isMobile && !isHideSidebar"
-					class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
-				>
-					<AppSidebar v-if="$session.user" />
-				</div>
-				<div class="w-full overflow-auto" id="scrollContainer">
+		<n-layout class="h-full" has-sider>
+			<AppSidebar
+				v-if="!isSignupFlow && !$isMobile && !isHideSidebar && $session.user"
+				v-model:collapsed="sidebarCollapsed"
+			/>
+			<n-layout class="h-full">
+				<div class="w-full h-full overflow-auto" id="scrollContainer">
 					<MobileNav
 						v-if="!isSignupFlow && $isMobile && !isHideSidebar && $session.user"
 					/>
@@ -27,15 +25,16 @@
 					</div>
 					<router-view />
 				</div>
-			</div>
-		</div>
+			</n-layout>
+		</n-layout>
 		<Toaster position="top-right" />
 		<component v-for="dialog in dialogs" :is="dialog" :key="dialog.id" />
 	</div>
 </template>
 
 <script setup>
-import { defineAsyncComponent, computed, watch, ref, provide } from 'vue';
+import { defineAsyncComponent, computed, watch, ref, provide, onMounted } from 'vue';
+import { NLayout } from 'naive-ui';
 import { Toaster } from 'vue-sonner';
 import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
@@ -52,6 +51,20 @@ const MobileNav = defineAsyncComponent(
 const route = useRoute();
 const team = getTeam();
 
+// 侧边栏折叠状态
+const sidebarCollapsed = ref(false);
+
+// 响应式：在移动端默认折叠
+onMounted(() => {
+	const checkMobile = () => {
+		if (window.innerWidth < 768) {
+			sidebarCollapsed.value = true;
+		}
+	};
+	checkMobile();
+	window.addEventListener('resize', checkMobile);
+});
+
 const isHideSidebar = computed(() => {
 	const alwaysHideSidebarRoutes = [
 		'Site Login',
diff --git a/dashboard/src2/components/AppSidebar.vue b/dashboard/src2/components/AppSidebar.vue
index d0098d6..0b0d93c 100644
--- a/dashboard/src2/components/AppSidebar.vue
+++ b/dashboard/src2/components/AppSidebar.vue
@@ -1,98 +1,283 @@
 <template>
-	<div
-		class="relative flex min-h-screen w-[220px] flex-col border-r bg-gray-50"
+	<n-layout-sider
+		: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 class="p-2">
-			<Dropdown
-				:options="[
-					{
-						label: '切换团队',
-						icon: 'command',
-						condition: () =>
-							$team?.pg?.valid_teams?.length > 1 || $team?.pg?.is_desk_user,
-						onClick: () => (showTeamSwitcher = true)
-					},
-					{
-						label: '退出登录',
-						icon: 'log-out',
-						onClick: $session.logout.submit
-					}
-				]"
-			>
-				<template v-slot="{ open }">
-					<button
-						class="flex w-[204px] items-center rounded-md px-2 py-2 text-left"
-						:class="open ? 'bg-white shadow-sm' : 'hover:bg-gray-200'"
+		<div class="flex h-full flex-col">
+			<!-- 用户信息区域 -->
+			<div class="p-2">
+				<n-dropdown
+					:options="dropdownOptions"
+					:show-arrow="true"
+					trigger="click"
+					@select="handleDropdownSelect"
+				>
+					<div
+						class="flex cursor-pointer items-center rounded-md px-2 py-2 transition-colors hover:bg-gray-200"
+						:class="{ 'justify-center': collapsed }"
 					>
-						<JLogo class="mb-1 h-8 w-8 shrink-0 rounded" />
-						<div class="ml-2 flex flex-1 flex-col overflow-hidden">
+						<JLogo class="h-8 w-8 shrink-0 rounded" />
+						<div
+							v-if="!collapsed"
+							class="ml-2 flex flex-1 flex-col overflow-hidden"
+						>
 							<div class="text-base font-medium leading-none text-gray-900">
 								今果 Jingrow
 							</div>
-							<Tooltip :text="$team?.pg?.user || null">
-								<div
-									class="mt-1 hidden overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-gray-700 sm:inline"
-								>
-									{{ $team?.get.loading ? '加载中...' : $team?.pg?.user }}
-								</div>
-							</Tooltip>
+							<n-tooltip>
+								<template #trigger>
+									<div
+										class="mt-1 overflow-hidden text-ellipsis whitespace-nowrap pb-1 text-sm leading-none text-gray-700"
+									>
+										{{ teamUserText }}
+									</div>
+								</template>
+								{{ teamUserText }}
+							</n-tooltip>
 						</div>
-						<FeatherIcon
-							name="chevron-down"
-							class="ml-auto h-5 w-5 text-gray-700"
+					</div>
+				</n-dropdown>
+			</div>
+
+			<!-- 导航菜单 -->
+			<div class="flex-1 overflow-auto">
+				<NavigationItems>
+					<template v-slot="{ navigation }">
+						<n-menu
+							:collapsed="collapsed"
+							:collapsed-width="64"
+							:options="convertToMenuOptions(navigation)"
+							:value="activeKey"
+							:router="false"
+							@update:value="handleMenuSelect"
 						/>
-					</button>
-				</template>
-			</Dropdown>
-		</div>
-		<nav class="px-2">
-			<NavigationItems>
-				<template v-slot="{ navigation }">
-					<template v-for="(item, i) in navigation" :key="item.name">
-						<AppSidebarItemGroup v-if="item.children" :item="item" />
-						<AppSidebarItem class="mt-0.5" v-else :item="item" />
 					</template>
-				</template>
-			</NavigationItems>
-		</nav>
-		<!-- TODO: update component name after dashboard-beta merges -->
+				</NavigationItems>
+			</div>
+		</div>
+
+		<!-- 切换团队对话框 -->
 		<SwitchTeamDialog2 v-model="showTeamSwitcher" />
-	</div>
+	</n-layout-sider>
 </template>
 
 <script>
-import { defineAsyncComponent } from 'vue';
-import AppSidebarItem from './AppSidebarItem.vue';
-import { Tooltip } from 'jingrow-ui';
+import { defineAsyncComponent, computed, ref, h, getCurrentInstance } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NLayoutSider, NMenu, NDropdown, NTooltip } from 'naive-ui';
 import NavigationItems from './NavigationItems.vue';
-import AppSidebarItemGroup from './AppSidebarItemGroup.vue';
+import JLogo from '@/components/icons/JLogo.vue';
 
 export default {
 	name: 'AppSidebar',
 	components: {
-		AppSidebarItem,
-		AppSidebarItemGroup,
+		NLayoutSider,
+		NMenu,
+		NDropdown,
+		NTooltip,
+		NavigationItems,
+		JLogo,
 		SwitchTeamDialog2: defineAsyncComponent(() =>
 			import('./SwitchTeamDialog.vue')
 		),
-		Tooltip,
-		NavigationItems
 	},
-	data() {
+	props: {
+		collapsed: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['update:collapsed'],
+	setup(props, { emit }) {
+		const route = useRoute();
+		const router = useRouter();
+		const instance = getCurrentInstance();
+		const showTeamSwitcher = ref(false);
+
+		// 响应式：在移动端默认折叠
+		const isMobile = computed(() => {
+			if (typeof window === 'undefined') return false;
+			return window.innerWidth < 768;
+		});
+
+		const collapsed = computed({
+			get: () => {
+				// 如果 props 有值，使用 props；否则根据屏幕大小判断
+				if (props.collapsed !== undefined) {
+					return props.collapsed;
+				}
+				return isMobile.value;
+			},
+			set: (value) => emit('update:collapsed', value),
+		});
+
+		// 监听窗口大小变化
+		if (typeof window !== 'undefined') {
+			const handleResize = () => {
+				if (window.innerWidth < 768 && !props.collapsed) {
+					emit('update:collapsed', true);
+				}
+			};
+			window.addEventListener('resize', handleResize);
+		}
+
+		// 下拉菜单选项
+		const dropdownOptions = computed(() => {
+			const options = [];
+			// 通过 getCurrentInstance 访问全局属性
+			const team = instance?.appContext.config.globalProperties.$team?.pg;
+			if (
+				team &&
+				(team.valid_teams?.length > 1 || team.is_desk_user)
+			) {
+				options.push({
+					label: '切换团队',
+					key: 'switch-team',
+					icon: () => h('i', { class: 'i-lucide-command h-4 w-4' }),
+				});
+			}
+			options.push({
+				label: '退出登录',
+				key: 'logout',
+				icon: () => h('i', { class: 'i-lucide-log-out h-4 w-4' }),
+			});
+			return options;
+		});
+
+		// 处理下拉菜单选择
+		const handleDropdownSelect = (key) => {
+			if (key === 'switch-team') {
+				showTeamSwitcher.value = true;
+			} else if (key === 'logout') {
+				const session = instance?.appContext.config.globalProperties.$session;
+				if (session) {
+					session.logout.submit();
+				}
+			}
+		};
+
+		// 转换导航项为菜单选项
+		const convertToMenuOptions = (items) => {
+			if (!items || !Array.isArray(items)) return [];
+			
+			return items
+				.filter((item) => item.condition !== false)
+				.map((item) => {
+					// 处理图标：item.icon 是一个函数，返回 h() 创建的组件
+					// Naive UI 的 n-menu 需要 icon 是一个渲染函数
+					let iconComponent = undefined;
+					if (item.icon) {
+						// item.icon 本身就是一个函数，直接使用
+						// 但需要确保它返回一个有效的 VNode
+						iconComponent = item.icon;
+					}
+
+					// 处理路由：NavigationItems 中的 route 已经是相对于 /dashboard/ 的路径（如 '/sites'）
+					// 路由配置的 base 是 '/dashboard/'，所以直接使用 item.route 即可
+					let routePath = item.route || item.name;
+
+					const option = {
+						label: item.name,
+						key: routePath,
+						icon: iconComponent,
+						disabled: item.disabled,
+					};
+
+					// 处理子菜单
+					if (item.children && item.children.length > 0) {
+						option.children = convertToMenuOptions(item.children);
+					}
+
+					// 处理徽章
+					if (item.badge) {
+						try {
+							// item.badge 是一个函数，调用它获取徽章组件
+							const badgeResult = item.badge();
+							if (badgeResult) {
+								option.label = () => h('div', { 
+									class: 'flex items-center justify-between w-full' 
+								}, [
+									h('span', item.name),
+									badgeResult,
+								]);
+							}
+						} catch (e) {
+							// 徽章处理失败，使用默认标签
+							console.warn('Badge rendering failed:', e);
+						}
+					}
+
+					return option;
+				});
+		};
+
+		// 当前激活的菜单项
+		const activeKey = computed(() => {
+			// 路由配置的 base 是 '/dashboard/'，route.path 返回的是相对于 base 的路径
+			// 例如：如果访问 /dashboard/sites，route.path 应该是 '/sites'
+			let path = route.path;
+			// 确保路径格式正确（以 / 开头）
+			if (!path.startsWith('/')) {
+				path = '/' + path;
+			}
+			// 如果路径是 /dashboard，转换为 /
+			if (path === '/dashboard') {
+				path = '/';
+			}
+			return path;
+		});
+
+		// 处理菜单选择
+		const handleMenuSelect = (key) => {
+			// 路由配置的 base 是 '/dashboard/'，key 已经是相对于 base 的路径（如 '/sites'）
+			// 直接使用 router.push，Vue Router 会自动处理 base
+			router.push(key).catch((err) => {
+				// 忽略导航重复的错误
+				if (err.name !== 'NavigationDuplicated') {
+					console.error('Navigation error:', err);
+				}
+			});
+		};
+
+		// 处理折叠
+		const handleCollapse = () => {
+			emit('update:collapsed', true);
+		};
+
+		// 处理展开
+		const handleExpand = () => {
+			emit('update:collapsed', false);
+		};
+
+		// 团队用户文本
+		const teamUserText = computed(() => {
+			const team = instance?.appContext.config.globalProperties.$team;
+			if (team?.get?.loading) {
+				return '加载中...';
+			}
+			return team?.pg?.user || '';
+		});
+
 		return {
-			showTeamSwitcher: false
+			showTeamSwitcher,
+			collapsed,
+			dropdownOptions,
+			activeKey,
+			teamUserText,
+			handleDropdownSelect,
+			handleMenuSelect,
+			handleCollapse,
+			handleExpand,
+			convertToMenuOptions,
 		};
 	},
-	methods: {
-		support() {
-			window.open('https://jingrow.com/support', '_blank');
-		},
-		feedback() {
-			window.open(
-				'https://jingrow.com/feedback/new',
-				'_blank'
-			);
-		}
-	}
 };
 </script>
\ No newline at end of file