@coffic/cosy-ui 0.4.3 → 0.4.7

package/dist/components/layouts/DashboardLayout.astro

@@ -1,32 +1,32 @@
 ---
 /**
  * @component DashboardLayout
- * 
+ *
  * @description
  * DashboardLayout 组件适用于管理后台的布局，包含侧边栏导航和顶部导航栏。
  * 提供了完整的管理界面框架，包括响应式设计和暗色主题支持。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 清晰的信息层次 - 通过侧边栏和顶部导航提供明确的导航结构
  * 2. 响应式布局 - 在不同设备上提供良好的用户体验
  * 3. 可定制性 - 支持自定义导航项、系统名称和用户信息
  * 4. 状态保持 - 记住用户的侧边栏折叠状态
- * 
+ *
  * @example
  * ```astro
  * ---
  * import DashboardLayout from '../layouts/DashboardLayout.astro';
- * 
+ *
  * const navItems = [
  *   { href: "/dashboard", icon: "home", text: "仪表盘" },
  *   { href: "/dashboard/users", icon: "user", text: "用户管理" },
  *   { href: "/dashboard/settings", icon: "settings", text: "系统设置" }
  * ];
  * ---
- * 
- * <DashboardLayout 
- *   title="管理后台" 
+ *
+ * <DashboardLayout
+ *   title="管理后台"
  *   navItems={navItems}
  *   userName="管理员"
  * >
@@ -40,621 +40,632 @@ import BaseLayout from './BaseLayout.astro';
 import '../../app.css';
 
 export interface NavItem {
-  href: string;
-  icon: string;
-  text: string;
-  badge?: string | number;
-  items?: NavItem[];
+	href: string;
+	icon: string;
+	text: string;
+	badge?: string | number;
+	items?: NavItem[];
 }
 
 export interface Props {
-  /**
-   * 页面标题
-   */
-  title: string;
-  
-  /**
-   * 页面描述
-   */
-  description?: string;
-  
-  /**
-   * 系统名称
-   * @default "管理系统"
-   */
-  systemName?: string;
-  
-  /**
-   * 导航项目
-   */
-  navItems: NavItem[];
-  
-  /**
-   * 用户名
-   */
-  userName?: string;
-  
-  /**
-   * 用户头像
-   */
-  userAvatar?: string;
-  
-  /**
-   * 是否折叠侧边栏
-   * @default false
-   */
-  sidebarCollapsed?: boolean;
-  
-  /**
-   * 自定义头部内容
-   */
-  head?: astroHTML.JSX.Element;
-  
-  /**
-   * 页面类名
-   */
-  class?: string;
-  
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+	/**
+	 * 页面标题
+	 */
+	title: string;
+
+	/**
+	 * 页面描述
+	 */
+	description?: string;
+
+	/**
+	 * 系统名称
+	 * @default "管理系统"
+	 */
+	systemName?: string;
+
+	/**
+	 * 导航项目
+	 */
+	navItems: NavItem[];
+
+	/**
+	 * 用户名
+	 */
+	userName?: string;
+
+	/**
+	 * 用户头像
+	 */
+	userAvatar?: string;
+
+	/**
+	 * 是否折叠侧边栏
+	 * @default false
+	 */
+	sidebarCollapsed?: boolean;
+
+	/**
+	 * 自定义头部内容
+	 */
+	head?: astroHTML.JSX.Element;
+
+	/**
+	 * 页面类名
+	 */
+	class?: string;
+
+	/**
+	 * 类名列表
+	 */
+	'class:list'?: any;
 }
 
 const {
-  title,
-  description,
-  systemName = "管理系统",
-  navItems,
-  userName,
-  userAvatar,
-  sidebarCollapsed = false,
-  head,
-  class: className,
-  'class:list': classList,
-  ...rest
+	title,
+	description,
+	systemName = '管理系统',
+	navItems,
+	userName,
+	userAvatar,
+	sidebarCollapsed = false,
+	head,
+	class: className,
+	'class:list': classList,
+	...rest
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
 
 // 图标映射
 const iconMap: Record<string, string> = {
-  home: "🏠",
-  user: "👤",
-  users: "👥",
-  settings: "⚙️",
-  chart: "📊",
-  document: "📄",
-  calendar: "📅",
-  notification: "🔔",
-  message: "💬",
-  search: "🔍",
-  star: "⭐",
-  heart: "❤️",
-  menu: "☰"
+	home: '🏠',
+	user: '👤',
+	users: '👥',
+	settings: '⚙️',
+	chart: '📊',
+	document: '📄',
+	calendar: '📅',
+	notification: '🔔',
+	message: '💬',
+	search: '🔍',
+	star: '⭐',
+	heart: '❤️',
+	menu: '☰',
 };
 ---
 
-<BaseLayout 
-  title={title} 
-  description={description}
-  head={head}
-  class="dashboard-layout"
-  {...rest}
->
-  <div class:list={["dashboard-container", { collapsed: sidebarCollapsed }]}>
-    <!-- 侧边栏 -->
-    <aside class="sidebar">
-      <div class="sidebar-header">
-        <a href="/dashboard" class="logo">
-          <span class="logo-icon">⚡</span>
-          <span class="logo-text">{systemName}</span>
-        </a>
-        <button class="collapse-button" id="collapse-sidebar">
-          <span class="collapse-icon">{iconMap.menu}</span>
-        </button>
-      </div>
-      
-      <nav class="sidebar-nav">
-        <ul class="nav-list">
-          {navItems.map((item: NavItem) => {
-            const isActive = currentPath === item.href || 
-              (item.items && item.items.some((subitem: NavItem) => currentPath === subitem.href));
-            
-            return (
-              <li class:list={["nav-item", { active: isActive }]}>
-                <a href={item.href} class="nav-link">
-                  <span class="nav-icon">{iconMap[item.icon] || "📁"}</span>
-                  <span class="nav-text">{item.text}</span>
-                  {item.badge && <span class="nav-badge">{item.badge}</span>}
-                </a>
-                
-                {item.items && (
-                  <ul class="subnav-list">
-                    {item.items.map((subitem: NavItem) => {
-                      const isSubActive = currentPath === subitem.href;
-                      return (
-                        <li class:list={["subnav-item", { active: isSubActive }]}>
-                          <a href={subitem.href} class="subnav-link">
-                            <span class="subnav-icon">{iconMap[subitem.icon] || "📄"}</span>
-                            <span class="subnav-text">{subitem.text}</span>
-                            {subitem.badge && <span class="subnav-badge">{subitem.badge}</span>}
-                          </a>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-    </aside>
-    
-    <!-- 主内容区 -->
-    <div class="main-content">
-      <!-- 顶部导航栏 -->
-      <header class="top-navbar">
-        <div class="navbar-left">
-          <button class="menu-button" id="toggle-sidebar">
-            <span class="menu-icon">{iconMap.menu}</span>
-          </button>
-          
-          <div class="breadcrumb">
-            <span class="breadcrumb-item">{title}</span>
-          </div>
-        </div>
-        
-        <div class="navbar-right">
-          <div class="search-box">
-            <input type="text" placeholder="搜索..." class="search-input" />
-            <span class="search-icon">{iconMap.search}</span>
-          </div>
-          
-          <button class="notification-button">
-            <span class="notification-icon">{iconMap.notification}</span>
-            <span class="notification-badge">3</span>
-          </button>
-          
-          {userName && (
-            <div class="user-dropdown">
-              <button class="user-button">
-                {userAvatar ? (
-                  <img src={userAvatar} alt={userName} class="user-avatar" />
-                ) : (
-                  <span class="user-avatar-placeholder">{userName.charAt(0)}</span>
-                )}
-                <span class="user-name">{userName}</span>
-              </button>
-            </div>
-          )}
-        </div>
-      </header>
-      
-      <!-- 页面内容 -->
-      <main class="page-content">
-        <div class="content-container">
-          <slot />
-        </div>
-      </main>
-    </div>
-  </div>
+<BaseLayout
+	title={title}
+	description={description || ''}
+	head={head}
+	keywords=""
+	author=""
+	robots=""
+	class="dashboard-layout"
+	{...rest}>
+	<div class:list={['dashboard-container', { collapsed: sidebarCollapsed }]}>
+		<!-- 侧边栏 -->
+		<aside class="sidebar">
+			<div class="sidebar-header">
+				<a href="/dashboard" class="logo">
+					<span class="logo-icon">⚡</span>
+					<span class="logo-text">{systemName}</span>
+				</a>
+				<button class="collapse-button" id="collapse-sidebar">
+					<span class="collapse-icon">{iconMap.menu}</span>
+				</button>
+			</div>
+
+			<nav class="sidebar-nav">
+				<ul class="nav-list">
+					{
+						navItems.map((item: NavItem) => {
+							const isActive =
+								currentPath === item.href ||
+								(item.items && item.items.some((subitem: NavItem) => currentPath === subitem.href));
+
+							return (
+								<li class:list={['nav-item', { active: isActive }]}>
+									<a href={item.href} class="nav-link">
+										<span class="nav-icon">{iconMap[item.icon] || '📁'}</span>
+										<span class="nav-text">{item.text}</span>
+										{item.badge && <span class="nav-badge">{item.badge}</span>}
+									</a>
+
+									{item.items && (
+										<ul class="subnav-list">
+											{item.items.map((subitem: NavItem) => {
+												const isSubActive = currentPath === subitem.href;
+												return (
+													<li class:list={['subnav-item', { active: isSubActive }]}>
+														<a href={subitem.href} class="subnav-link">
+															<span class="subnav-icon">{iconMap[subitem.icon] || '📄'}</span>
+															<span class="subnav-text">{subitem.text}</span>
+															{subitem.badge && <span class="subnav-badge">{subitem.badge}</span>}
+														</a>
+													</li>
+												);
+											})}
+										</ul>
+									)}
+								</li>
+							);
+						})
+					}
+				</ul>
+			</nav>
+		</aside>
+
+		<!-- 主内容区 -->
+		<div class="main-content">
+			<!-- 顶部导航栏 -->
+			<header class="top-navbar">
+				<div class="navbar-left">
+					<button class="menu-button" id="toggle-sidebar">
+						<span class="menu-icon">{iconMap.menu}</span>
+					</button>
+
+					<div class="breadcrumb">
+						<span class="breadcrumb-item">{title}</span>
+					</div>
+				</div>
+
+				<div class="navbar-right">
+					<div class="search-box">
+						<input type="text" placeholder="搜索..." class="search-input" />
+						<span class="search-icon">{iconMap.search}</span>
+					</div>
+
+					<button class="notification-button">
+						<span class="notification-icon">{iconMap.notification}</span>
+						<span class="notification-badge">3</span>
+					</button>
+
+					{
+						userName && (
+							<div class="user-dropdown">
+								<button class="user-button">
+									{userAvatar ? (
+										<img src={userAvatar} alt={userName} class="user-avatar" />
+									) : (
+										<span class="user-avatar-placeholder">{userName.charAt(0)}</span>
+									)}
+									<span class="user-name">{userName}</span>
+								</button>
+							</div>
+						)
+					}
+				</div>
+			</header>
+
+			<!-- 页面内容 -->
+			<main class="page-content">
+				<div class="content-container">
+					<slot />
+				</div>
+			</main>
+		</div>
+	</div>
 </BaseLayout>
 
 <script>
-  // 侧边栏折叠/展开功能
-  document.addEventListener('DOMContentLoaded', () => {
-    const toggleSidebarBtn = document.getElementById('toggle-sidebar');
-    const collapseSidebarBtn = document.getElementById('collapse-sidebar');
-    const dashboardContainer = document.querySelector('.dashboard-container');
-    
-    if (toggleSidebarBtn && dashboardContainer) {
-      toggleSidebarBtn.addEventListener('click', () => {
-        dashboardContainer.classList.toggle('collapsed');
-        // 保存状态到本地存储
-        localStorage.setItem('sidebarCollapsed', 
-          dashboardContainer.classList.contains('collapsed') ? 'true' : 'false');
-      });
-    }
-    
-    if (collapseSidebarBtn && dashboardContainer) {
-      collapseSidebarBtn.addEventListener('click', () => {
-        dashboardContainer.classList.toggle('collapsed');
-        // 保存状态到本地存储
-        localStorage.setItem('sidebarCollapsed', 
-          dashboardContainer.classList.contains('collapsed') ? 'true' : 'false');
-      });
-    }
-    
-    // 从本地存储恢复状态
-    const savedState = localStorage.getItem('sidebarCollapsed');
-    if (savedState === 'true' && dashboardContainer) {
-      dashboardContainer.classList.add('collapsed');
-    }
-  });
+	// 侧边栏折叠/展开功能
+	document.addEventListener('DOMContentLoaded', () => {
+		const toggleSidebarBtn = document.getElementById('toggle-sidebar');
+		const collapseSidebarBtn = document.getElementById('collapse-sidebar');
+		const dashboardContainer = document.querySelector('.dashboard-container');
+
+		if (toggleSidebarBtn && dashboardContainer) {
+			toggleSidebarBtn.addEventListener('click', () => {
+				dashboardContainer.classList.toggle('collapsed');
+				// 保存状态到本地存储
+				localStorage.setItem(
+					'sidebarCollapsed',
+					dashboardContainer.classList.contains('collapsed') ? 'true' : 'false'
+				);
+			});
+		}
+
+		if (collapseSidebarBtn && dashboardContainer) {
+			collapseSidebarBtn.addEventListener('click', () => {
+				dashboardContainer.classList.toggle('collapsed');
+				// 保存状态到本地存储
+				localStorage.setItem(
+					'sidebarCollapsed',
+					dashboardContainer.classList.contains('collapsed') ? 'true' : 'false'
+				);
+			});
+		}
+
+		// 从本地存储恢复状态
+		const savedState = localStorage.getItem('sidebarCollapsed');
+		if (savedState === 'true' && dashboardContainer) {
+			dashboardContainer.classList.add('collapsed');
+		}
+	});
 </script>
 
 <style>
-  /* 基础布局 */
-  .dashboard-layout {
-    min-height: 100vh;
-    background-color: #f5f7fa;
-  }
-  
-  .dashboard-container {
-    display: flex;
-    min-height: 100vh;
-  }
-  
-  /* 侧边栏 */
-  .sidebar {
-    width: 260px;
-    background-color: #1e293b;
-    color: #e2e8f0;
-    transition: width 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 50;
-    overflow-y: auto;
-  }
-  
-  .sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-  
-  .logo {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    color: #fff;
-    text-decoration: none;
-  }
-  
-  .logo-icon {
-    font-size: 1.5rem;
-  }
-  
-  .logo-text {
-    font-size: 1.25rem;
-    font-weight: 600;
-    white-space: nowrap;
-  }
-  
-  .collapse-button {
-    background: none;
-    border: none;
-    color: #e2e8f0;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.375rem;
-  }
-  
-  .collapse-button:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  
-  .sidebar-nav {
-    flex: 1;
-    padding: 1rem 0;
-  }
-  
-  .nav-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  
-  .nav-item {
-    margin-bottom: 0.25rem;
-  }
-  
-  .nav-link {
-    display: flex;
-    align-items: center;
-    padding: 0.75rem 1rem;
-    color: #e2e8f0;
-    text-decoration: none;
-    border-radius: 0.375rem;
-    margin: 0 0.5rem;
-    gap: 0.75rem;
-  }
-  
-  .nav-link:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-  
-  .nav-item.active .nav-link {
-    background-color: rgba(59, 130, 246, 0.5);
-    color: #fff;
-  }
-  
-  .nav-icon {
-    font-size: 1.25rem;
-    width: 1.5rem;
-    text-align: center;
-  }
-  
-  .nav-text {
-    flex: 1;
-    white-space: nowrap;
-  }
-  
-  .nav-badge {
-    background-color: #ef4444;
-    color: #fff;
-    font-size: 0.75rem;
-    padding: 0.125rem 0.375rem;
-    border-radius: 9999px;
-  }
-  
-  .subnav-list {
-    list-style: none;
-    padding: 0;
-    margin: 0.25rem 0 0.5rem 2.5rem;
-  }
-  
-  .subnav-link {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1rem;
-    color: #cbd5e1;
-    text-decoration: none;
-    border-radius: 0.375rem;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-  }
-  
-  .subnav-link:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-  
-  .subnav-item.active .subnav-link {
-    color: #3b82f6;
-    font-weight: 500;
-  }
-  
-  .subnav-icon {
-    font-size: 1rem;
-    width: 1.25rem;
-    text-align: center;
-  }
-  
-  /* 主内容区 */
-  .main-content {
-    flex: 1;
-    margin-left: 260px;
-    transition: margin-left 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-  }
-  
-  /* 顶部导航栏 */
-  .top-navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.75rem 1.5rem;
-    background-color: #fff;
-    border-bottom: 1px solid #e2e8f0;
-    height: 64px;
-    position: sticky;
-    top: 0;
-    z-index: 40;
-  }
-  
-  .navbar-left {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  
-  .menu-button {
-    background: none;
-    border: none;
-    color: #64748b;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.375rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .menu-button:hover {
-    background-color: #f1f5f9;
-  }
-  
-  .breadcrumb {
-    color: #64748b;
-    font-size: 0.875rem;
-  }
-  
-  .navbar-right {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
-  
-  .search-box {
-    position: relative;
-  }
-  
-  .search-input {
-    padding: 0.5rem 1rem 0.5rem 2.5rem;
-    border: 1px solid #e2e8f0;
-    border-radius: 0.375rem;
-    background-color: #f8fafc;
-    width: 240px;
-    font-size: 0.875rem;
-  }
-  
-  .search-icon {
-    position: absolute;
-    left: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #94a3b8;
-  }
-  
-  .notification-button {
-    background: none;
-    border: none;
-    color: #64748b;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.375rem;
-    position: relative;
-  }
-  
-  .notification-button:hover {
-    background-color: #f1f5f9;
-  }
-  
-  .notification-badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: #ef4444;
-    color: #fff;
-    font-size: 0.75rem;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 9999px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .user-dropdown {
-    position: relative;
-  }
-  
-  .user-button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0.5rem;
-    border-radius: 0.375rem;
-  }
-  
-  .user-button:hover {
-    background-color: #f1f5f9;
-  }
-  
-  .user-avatar {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 9999px;
-    object-fit: cover;
-  }
-  
-  .user-avatar-placeholder {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 9999px;
-    background-color: #3b82f6;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-  }
-  
-  .user-name {
-    color: #334155;
-    font-weight: 500;
-  }
-  
-  /* 页面内容 */
-  .page-content {
-    flex: 1;
-    padding: 1.5rem;
-  }
-  
-  .content-container {
-    background-color: #fff;
-    border-radius: 0.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    padding: 1.5rem;
-  }
-  
-  /* 折叠状态 */
-  .dashboard-container.collapsed .sidebar {
-    width: 80px;
-  }
-  
-  .dashboard-container.collapsed .logo-text,
-  .dashboard-container.collapsed .nav-text,
-  .dashboard-container.collapsed .nav-badge,
-  .dashboard-container.collapsed .subnav-list {
-    display: none;
-  }
-  
-  .dashboard-container.collapsed .nav-link {
-    justify-content: center;
-    padding: 0.75rem;
-  }
-  
-  .dashboard-container.collapsed .nav-icon {
-    margin: 0;
-  }
-  
-  .dashboard-container.collapsed .main-content {
-    margin-left: 80px;
-  }
-  
-  /* 响应式调整 */
-  @media (max-width: 1024px) {
-    .sidebar {
-      transform: translateX(-100%);
-      width: 260px;
-    }
-    
-    .main-content {
-      margin-left: 0;
-    }
-    
-    .dashboard-container.collapsed .sidebar {
-      transform: translateX(0);
-    }
-    
-    .dashboard-container:not(.collapsed) .sidebar {
-      transform: translateX(-100%);
-    }
-  }
-  
-  @media (max-width: 640px) {
-    .search-box {
-      display: none;
-    }
-    
-    .user-name {
-      display: none;
-    }
-    
-    .top-navbar {
-      padding: 0.75rem 1rem;
-    }
-    
-    .page-content {
-      padding: 1rem;
-    }
-    
-    .content-container {
-      padding: 1rem;
-    }
-  }
-</style> 
+	/* 基础布局 */
+	.dashboard-layout {
+		min-height: 100vh;
+		background-color: #f5f7fa;
+	}
+
+	.dashboard-container {
+		display: flex;
+		min-height: 100vh;
+	}
+
+	/* 侧边栏 */
+	.sidebar {
+		width: 260px;
+		background-color: #1e293b;
+		color: #e2e8f0;
+		transition: width 0.3s ease;
+		display: flex;
+		flex-direction: column;
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 50;
+		overflow-y: auto;
+	}
+
+	.sidebar-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+	}
+
+	.logo {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: #fff;
+		text-decoration: none;
+	}
+
+	.logo-icon {
+		font-size: 1.5rem;
+	}
+
+	.logo-text {
+		font-size: 1.25rem;
+		font-weight: 600;
+		white-space: nowrap;
+	}
+
+	.collapse-button {
+		background: none;
+		border: none;
+		color: #e2e8f0;
+		cursor: pointer;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+	}
+
+	.collapse-button:hover {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.sidebar-nav {
+		flex: 1;
+		padding: 1rem 0;
+	}
+
+	.nav-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.nav-item {
+		margin-bottom: 0.25rem;
+	}
+
+	.nav-link {
+		display: flex;
+		align-items: center;
+		padding: 0.75rem 1rem;
+		color: #e2e8f0;
+		text-decoration: none;
+		border-radius: 0.375rem;
+		margin: 0 0.5rem;
+		gap: 0.75rem;
+	}
+
+	.nav-link:hover {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.nav-item.active .nav-link {
+		background-color: rgba(59, 130, 246, 0.5);
+		color: #fff;
+	}
+
+	.nav-icon {
+		font-size: 1.25rem;
+		width: 1.5rem;
+		text-align: center;
+	}
+
+	.nav-text {
+		flex: 1;
+		white-space: nowrap;
+	}
+
+	.nav-badge {
+		background-color: #ef4444;
+		color: #fff;
+		font-size: 0.75rem;
+		padding: 0.125rem 0.375rem;
+		border-radius: 9999px;
+	}
+
+	.subnav-list {
+		list-style: none;
+		padding: 0;
+		margin: 0.25rem 0 0.5rem 2.5rem;
+	}
+
+	.subnav-link {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		color: #cbd5e1;
+		text-decoration: none;
+		border-radius: 0.375rem;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+	}
+
+	.subnav-link:hover {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
+
+	.subnav-item.active .subnav-link {
+		color: #3b82f6;
+		font-weight: 500;
+	}
+
+	.subnav-icon {
+		font-size: 1rem;
+		width: 1.25rem;
+		text-align: center;
+	}
+
+	/* 主内容区 */
+	.main-content {
+		flex: 1;
+		margin-left: 260px;
+		transition: margin-left 0.3s ease;
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	/* 顶部导航栏 */
+	.top-navbar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.75rem 1.5rem;
+		background-color: #fff;
+		border-bottom: 1px solid #e2e8f0;
+		height: 64px;
+		position: sticky;
+		top: 0;
+		z-index: 40;
+	}
+
+	.navbar-left {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.menu-button {
+		background: none;
+		border: none;
+		color: #64748b;
+		cursor: pointer;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.menu-button:hover {
+		background-color: #f1f5f9;
+	}
+
+	.breadcrumb {
+		color: #64748b;
+		font-size: 0.875rem;
+	}
+
+	.navbar-right {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.search-box {
+		position: relative;
+	}
+
+	.search-input {
+		padding: 0.5rem 1rem 0.5rem 2.5rem;
+		border: 1px solid #e2e8f0;
+		border-radius: 0.375rem;
+		background-color: #f8fafc;
+		width: 240px;
+		font-size: 0.875rem;
+	}
+
+	.search-icon {
+		position: absolute;
+		left: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		color: #94a3b8;
+	}
+
+	.notification-button {
+		background: none;
+		border: none;
+		color: #64748b;
+		cursor: pointer;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+		position: relative;
+	}
+
+	.notification-button:hover {
+		background-color: #f1f5f9;
+	}
+
+	.notification-badge {
+		position: absolute;
+		top: 0;
+		right: 0;
+		background-color: #ef4444;
+		color: #fff;
+		font-size: 0.75rem;
+		width: 1rem;
+		height: 1rem;
+		border-radius: 9999px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.user-dropdown {
+		position: relative;
+	}
+
+	.user-button {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+	}
+
+	.user-button:hover {
+		background-color: #f1f5f9;
+	}
+
+	.user-avatar {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 9999px;
+		object-fit: cover;
+	}
+
+	.user-avatar-placeholder {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 9999px;
+		background-color: #3b82f6;
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+	}
+
+	.user-name {
+		color: #334155;
+		font-weight: 500;
+	}
+
+	/* 页面内容 */
+	.page-content {
+		flex: 1;
+		padding: 1.5rem;
+	}
+
+	.content-container {
+		background-color: #fff;
+		border-radius: 0.5rem;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		padding: 1.5rem;
+	}
+
+	/* 折叠状态 */
+	.dashboard-container.collapsed .sidebar {
+		width: 80px;
+	}
+
+	.dashboard-container.collapsed .logo-text,
+	.dashboard-container.collapsed .nav-text,
+	.dashboard-container.collapsed .nav-badge,
+	.dashboard-container.collapsed .subnav-list {
+		display: none;
+	}
+
+	.dashboard-container.collapsed .nav-link {
+		justify-content: center;
+		padding: 0.75rem;
+	}
+
+	.dashboard-container.collapsed .nav-icon {
+		margin: 0;
+	}
+
+	.dashboard-container.collapsed .main-content {
+		margin-left: 80px;
+	}
+
+	/* 响应式调整 */
+	@media (max-width: 1024px) {
+		.sidebar {
+			transform: translateX(-100%);
+			width: 260px;
+		}
+
+		.main-content {
+			margin-left: 0;
+		}
+
+		.dashboard-container.collapsed .sidebar {
+			transform: translateX(0);
+		}
+
+		.dashboard-container:not(.collapsed) .sidebar {
+			transform: translateX(-100%);
+		}
+	}
+
+	@media (max-width: 640px) {
+		.search-box {
+			display: none;
+		}
+
+		.user-name {
+			display: none;
+		}
+
+		.top-navbar {
+			padding: 0.75rem 1rem;
+		}
+
+		.page-content {
+			padding: 1rem;
+		}
+
+		.content-container {
+			padding: 1rem;
+		}
+	}
+</style>