@coffic/cosy-ui 0.8.10 → 0.8.12

package/dist/src-astro/layout-dashboard/DashboardLayout.astro

@@ -13,15 +13,23 @@
  * 3. 可定制性 - 支持自定义导航项、系统名称和用户信息
  * 4. 状态保持 - 记住用户的侧边栏折叠状态
  *
- * @example
+ * @usage
+ * 基本用法：
  * ```astro
  * ---
- * import DashboardLayout from '../layouts/DashboardLayout.astro';
+ * import { DashboardLayout } from '@coffic/cosy-ui';
  *
  * const navItems = [
- *   { href: "/dashboard", icon: "home", text: "仪表盘" },
- *   { href: "/dashboard/users", icon: "user", text: "用户管理" },
- *   { href: "/dashboard/settings", icon: "settings", text: "系统设置" }
+ *   { href: "/dashboard", text: "仪表盘" },                    // 自动匹配 dashboard 图标
+ *   { href: "/dashboard/users", text: "用户管理" },             // 自动匹配 users 图标
+ *   { href: "/dashboard/settings", text: "系统设置" },          // 自动匹配 settings 图标
+ *   { href: "/dashboard/reports", icon: "chart", text: "报表" } // 手动指定图标
+ * ];
+ *
+ * const userMenuItems = [
+ *   { href: "/profile", text: "个人资料" },        // 自动匹配 user 图标
+ *   { href: "/settings", text: "设置" },          // 自动匹配 settings 图标
+ *   { href: "/logout", text: "退出登录" }          // 自动匹配 logout 图标
  * ];
  * ---
  *
@@ -29,23 +37,87 @@
  *   title="管理后台"
  *   navItems={navItems}
  *   userName="管理员"
+ *   userMenuItems={userMenuItems}
+ *   sidebarSize="lg"
+ * >
+ *   <h1>仪表盘内容</h1>
+ *   <p>这是仪表盘的主要内容</p>
+ * </DashboardLayout>
+ * ```
+ *
+ * 带有底部自定义内容的用法：
+ * ```astro
+ * <DashboardLayout
+ *   title="管理后台"
+ *   navItems={navItems}
+ *   userName="管理员"
  * >
  *   <h1>仪表盘内容</h1>
  *   <p>这是仪表盘的主要内容</p>
+ *
+ *   <div slot="sidebar-footer" class="p-4">
+ *     <div class="flex items-center gap-3">
+ *       <div class="avatar">
+ *         <div class="w-10 rounded-full">
+ *           <img src="/avatar.jpg" alt="用户头像" />
+ *         </div>
+ *       </div>
+ *       <div>
+ *         <div class="font-semibold">张三</div>
+ *         <div class="text-sm opacity-70">产品经理</div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </DashboardLayout>
+ * ```
+ *
+ * 带有主内容区域背景的用法：
+ * ```astro
+ * <DashboardLayout
+ *   title="管理后台"
+ *   navItems={navItems}
+ *   userName="管理员"
+ *   mainBackgroundTheme="gradient-cool"
+ * >
+ *   <h1>仪表盘内容</h1>
+ *   <p>这是带有背景的主要内容</p>
  * </DashboardLayout>
  * ```
+ *
+ * @props
+ * - title: string - 页面标题
+ * - description?: string - 页面描述
+ * - systemName?: string - 系统名称，默认为"管理系统"
+ * - navItems: NavItem[] - 导航项目
+ * - userName?: string - 用户名
+ * - userAvatar?: string - 用户头像
+ * - userMenuItems?: UserMenuItem[] - 用户菜单项，默认包含个人资料、设置、退出登录，图标会自动匹配
+ * - sidebarCollapsed?: boolean - 是否折叠侧边栏，默认为false
+ * - sidebarSize?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
+ * - sidebarTheme?: SidebarTheme - 侧边栏主题，默认为"default"
+ * - mainBackgroundTheme?: MainBackgroundTheme - 主内容区域背景主题，默认为"transparent"
+ * - head?: astroHTML.JSX.Element - 自定义头部内容
+ * - class?: string - 页面类名
+ * - class:list?: any - 类名列表
+ * - debug?: boolean - 调试模式，默认为false
+ *
+ * @slots
+ * - default - 主要内容区域
+ * - sidebar-footer - 侧边栏底部自定义内容，可用于展示用户信息、版权信息等
  */
 
 import { BaseLayout } from '../../index-astro';
+import DashboardSidebar from './DashboardSidebar.astro';
+import DashboardTopNavbar from './DashboardTopNavbar.astro';
 import '../../style.ts';
-
-export interface NavItem {
-  href: string;
-  icon: string;
-  text: string;
-  badge?: string | number;
-  items?: NavItem[];
-}
+import {
+  type NavItem,
+  type SidebarSize,
+  type SidebarTheme,
+  type MainBackgroundTheme,
+  type UserMenuItem,
+  getMainBackgroundTheme,
+} from './types';
 
 export interface Props {
   /**
@@ -79,12 +151,35 @@ export interface Props {
    */
   userAvatar?: string;
 
+  /**
+   * 用户菜单项
+   */
+  userMenuItems?: UserMenuItem[];
+
   /**
    * 是否折叠侧边栏
    * @default false
    */
   sidebarCollapsed?: boolean;
 
+  /**
+   * 侧边栏尺寸
+   * @default "md"
+   */
+  sidebarSize?: SidebarSize;
+
+  /**
+   * 侧边栏主题
+   * @default "default"
+   */
+  sidebarTheme?: SidebarTheme;
+
+  /**
+   * 主内容区域背景主题
+   * @default "transparent"
+   */
+  mainBackgroundTheme?: MainBackgroundTheme;
+
   /**
    * 自定义头部内容
    */
@@ -99,6 +194,12 @@ export interface Props {
    * 类名列表
    */
   'class:list'?: any;
+
+  /**
+   * 调试模式
+   * @default false
+   */
+  debug?: boolean;
 }
 
 const {
@@ -108,31 +209,20 @@ const {
   navItems,
   userName,
   userAvatar,
+  userMenuItems,
   sidebarCollapsed = false,
+  sidebarSize = 'md',
+  sidebarTheme = 'default',
+  mainBackgroundTheme = 'transparent',
   head,
   class: className,
   'class:list': classList,
+  debug = false,
   ...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: '☰',
-};
+const mainBackgroundStyles = getMainBackgroundTheme(mainBackgroundTheme);
 ---
 
 <BaseLayout
@@ -142,545 +232,59 @@ const iconMap: Record<string, string> = {
   keywords=""
   author=""
   robots=""
-  class="dashboard-layout"
+  debug={debug}
+  class:list={['cosy:min-h-screen cosy:bg-base-200', className, classList]}
   {...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>
+  <div class:list={['cosy:drawer', { 'cosy:drawer-open': !sidebarCollapsed }]}>
+    <input id="dashboard-drawer" type="checkbox" class="cosy:drawer-toggle" />
 
-                  {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="cosy:drawer-side">
+      <label
+        for="dashboard-drawer"
+        aria-label="close sidebar"
+        class="cosy:drawer-overlay"></label>
+      <DashboardSidebar
+        systemName={systemName}
+        navItems={navItems}
+        currentPath={currentPath}
+        size={sidebarSize}
+        theme={sidebarTheme}>
+        <slot name="sidebar-footer" slot="footer" />
+      </DashboardSidebar>
+    </div>
 
     <!-- 主内容区 -->
-    <div class="main-content">
+    <div class="cosy:drawer-content cosy:flex cosy:flex-col">
       <!-- 顶部导航栏 -->
-      <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>
+      <DashboardTopNavbar
+        title={title}
+        userName={userName}
+        userAvatar={userAvatar}
+        userMenuItems={userMenuItems}
+      />
 
       <!-- 页面内容 -->
-      <main class="page-content">
-        <div class="content-container">
-          <slot />
-        </div>
+      <main
+        class:list={['cosy:flex-1 cosy:p-4 cosy:lg:p-6', mainBackgroundStyles]}>
+        <slot />
       </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');
+    const drawerToggle = document.getElementById(
+      'dashboard-drawer'
+    ) as HTMLInputElement;
+
+    if (drawerToggle) {
+      const savedState = localStorage.getItem('sidebarCollapsed');
+      if (savedState) {
+        drawerToggle.checked = savedState === 'true';
+      }
     }
   });
 </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>