@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/layouts/DashboardLayout.astro

@@ -0,0 +1,660 @@
+---
+/**
+ * @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="管理后台" 
+ *   navItems={navItems}
+ *   userName="管理员"
+ * >
+ *   <h1>仪表盘内容</h1>
+ *   <p>这是仪表盘的主要内容</p>
+ * </DashboardLayout>
+ * ```
+ */
+
+import BaseLayout from './BaseLayout.astro';
+import '../../app.css';
+
+export interface 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;
+}
+
+const {
+  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: "☰"
+};
+---
+
+<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>
+
+<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');
+    }
+  });
+</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>