chaos_it/src/lib/components/layout/app/AppSidebar.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/state';
	import { fly, fade } from 'svelte/transition';

	import Icon from '$lib/components/icon/Icon.svelte';
	import { sidebarStore, setSidebarOpen } from '$lib/stores/sidebarStore';
	import { authStore } from '$lib/stores/authStore.ts'; // 假设你有这个store
	import {  } from '$lib/stores/authStore.ts'; // 假设你有这个store
	import type { NavItem } from '$lib/types/layout.ts';
	import { authService } from '$lib/api/services/authService.ts';

	// 模拟一些数据，增加了分组的概念（如果需要）
	const rawNavItems: NavItem[] = [
		{
			id: 'dashboard',
			label: '仪表盘',
			icon: 'home',
			href: '/app/dashboard',
		},
		{
			id: 'statistics',
			label: '数据看板',
			icon: 'data-pie',
			href: '/app/statistics',
		},
		{
			id: 'settings',
			label: '系统设置',
			icon: 'settings',
			href: '/app/settings',
			subItems: [
				{
					id: 'users',
					label: '用户管理',
					href: '/app/settings/users',
				},
				{
					id: 'roles',
					label: '角色权限',
					href: '/app/settings/roles',
				},
			]
		}
	];

	/**
	 * 递归计算高亮状态
	 * 只要子元素有一个是激活的，父元素就算激活
	 */
	function processNavItems(items: NavItem[], currentPath: string): any[] {
		return items.map(item => {
			// 判断当前项是否匹配
			const isSelfActive = item.href === '/'
				? currentPath === '/'
				: currentPath.startsWith(item.href);

			// 处理子项
			let processedSubItems = undefined;
			let isChildActive = false;

			if (item.subItems) {
				processedSubItems = processNavItems(item.subItems, currentPath);
				// 检查是否有子项被激活
				isChildActive = processedSubItems.some(sub => sub.isActive || sub.isChildActive);
			}

			return {
				...item,
				subItems: processedSubItems,
				isActive: isSelfActive,     // 自身路径匹配
				isChildActive: isChildActive // 子路径匹配（用于展开菜单）
			};
		});
	}

	// 使用 $derived 动态计算
	let navItems = $derived(processNavItems(rawNavItems, page.url.pathname));

	function handleMobileClose() {
		const isMobile = window.innerWidth < 768;
		if (isMobile && $sidebarStore.isOpen) {
			setSidebarOpen(false);
		}
	}
</script>

{#if $sidebarStore.isOpen}
	<div
		role="button"
		tabindex="0"
		class="fixed inset-0 bg-black/50 z-20 md:hidden cursor-pointer backdrop-blur-sm"
		onclick={handleMobileClose}
		onkeydown={(e) => e.key === 'Escape' && handleMobileClose()}
		transition:fade={{ duration: 200 }}
	></div>

	<aside
		in:fly={{duration: 200, x: -100}}
		out:fly={{duration: 200, x: -100}}
		class="flex-shrink-0 flex flex-col bg-base-200 border-r border-base-100/70 fixed h-full md:relative z-30 w-64"
	>

		<div class="h-18 p-4 flex items-center flex-shrink-0">
			<a href={resolve("/app/dashboard")} class="flex items-center gap-3" onclick={handleMobileClose}>
				<Icon id="logo" size="32" className="flex-shrink-0" />
				<p class="truncate font-bold font-serif text-lg">IT DTMS</p>
			</a>
		</div>

		<div class="flex-1 overflow-y-auto custom-scrollbar">
			<ul class="menu px-2 menu-vertical w-full gap-1">
				{#each navItems as item (item.id)}

					{#if item.subItems && item.subItems.length > 0}
						<li>
							<details open={item.isChildActive}>
								<summary class="group {item.isActive ? 'text-primary font-medium' : ''}">
									<Icon id={item.icon} size="20" />
									<span class="truncate">{item.label}</span>
								</summary>
								<ul>
									{#each item.subItems as subItem (subItem.id)}
										<li>
											<a
												href={resolve(subItem.href)}
												onclick={handleMobileClose}
												class={subItem.isActive ? 'active font-medium' : ''}
											>
												<span class="text-xs opacity-50">•</span>
												<span class="truncate">{subItem.label}</span>
											</a>
										</li>
									{/each}
								</ul>
							</details>
						</li>

					{:else}
						<li>
							<a
								href={resolve(item.href)}
								onclick={handleMobileClose}
								class="group {item.isActive ? 'active font-medium' : ''}"
							>
								<Icon id={item.icon} size="20" />
								<span class="truncate">{item.label}</span>
							</a>
						</li>
					{/if}

				{/each}
			</ul>
		</div>

		{#if $authStore.isAuthenticated && $authStore.user}
			<div class="p-3 border-t border-base-content/10 flex-shrink-0 bg-base-200/50">
				<div class="dropdown dropdown-top dropdown-end w-full">

					<div
						tabindex="0"
						role="button"
						class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-300 transition-colors cursor-pointer w-full"
					>
						<div class="avatar placeholder">
							<div class="bg-neutral text-neutral-content rounded-full w-10">
								{#if $authStore.user?.avatar}
									<img src={$authStore.user.avatar} alt="avatar" />
								{:else}
									<span class="text-xs">User</span>
								{/if}
							</div>
						</div>

						<div class="flex flex-col flex-1 min-w-0">
							<span class="text-sm font-bold truncate">{$authStore.user.nickname}</span>
							<span class="text-xs text-base-content/60 truncate">@{$authStore.user?.username}</span>
						</div>

						<Icon id="chevrons-up-down" size="16" className="opacity-50" />
					</div>

					<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-lg bg-base-100 rounded-box w-60 mb-2 border border-base-content/10">
						<li class="menu-title px-4 py-2">我的账户</li>
						<li><a href="/app/profile"><Icon id="user-profile" size="16"/> 个人资料</a></li>
						<li><a href="/app/settings"><Icon id="settings" size="16"/> 设置</a></li>
						<div class="divider my-1"></div>
						<li>
							<button class="text-error" onclick={authService.logout}>
								<Icon id="sign-out" size="16"/> 退出登录
							</button>
						</li>
					</ul>
				</div>
			</div>
		{/if}

	</aside>
{/if}

<style>
    /* 可选：美化滚动条 */
    .custom-scrollbar::-webkit-scrollbar {
        width: 5px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.3);
        border-radius: 20px;
    }
</style>