@coffic/cosy-ui 0.8.10 → 0.8.12

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

@@ -0,0 +1,219 @@
+---
+/**
+ * @component DashboardSidebar
+ *
+ * @description
+ * DashboardSidebar 组件提供仪表盘布局的侧边栏导航功能。
+ * 包含系统名称显示、导航菜单和折叠/展开功能。
+ *
+ * @usage
+ * ```astro
+ * ---
+ * import { DashboardSidebar } from '@coffic/cosy-ui';
+ *
+ * const navItems = [
+ *   { href: "/dashboard", icon: "home", text: "仪表盘" },
+ *   { href: "/dashboard/users", icon: "user", text: "用户管理" }
+ * ];
+ * ---
+ *
+ * <DashboardSidebar
+ *   systemName="管理系统"
+ *   navItems={navItems}
+ * />
+ * ```
+ *
+ * @props
+ * - systemName?: string - 系统名称，默认为"管理系统"
+ * - navItems: NavItem[] - 导航项目
+ * - currentPath?: string - 当前路径，用于高亮当前页面
+ * - size?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
+ * - theme?: SidebarTheme - 侧边栏主题，默认为"default"
+ *
+ * @slots
+ * - footer - 侧边栏底部自定义内容，可用于展示用户信息等
+ */
+
+import '../../style.ts';
+import {
+  getNavItemIcon,
+  getSidebarWidth,
+  getSidebarTheme,
+  type NavItem,
+  type SidebarSize,
+  type SidebarTheme,
+} from './types';
+import AstroIcon from '../icons/AstroIcon.astro';
+
+export interface Props {
+  /**
+   * 系统名称
+   * @default "管理系统"
+   */
+  systemName?: string;
+
+  /**
+   * 导航项目
+   */
+  navItems: NavItem[];
+
+  /**
+   * 当前路径，用于高亮当前页面
+   */
+  currentPath?: string;
+
+  /**
+   * 侧边栏尺寸
+   * @default "md"
+   */
+  size?: SidebarSize;
+
+  /**
+   * 侧边栏主题
+   * @default "default"
+   */
+  theme?: SidebarTheme;
+}
+
+const {
+  systemName = '管理系统',
+  navItems,
+  currentPath = '',
+  size = 'md',
+  theme = 'default',
+} = Astro.props;
+
+const themeStyles = getSidebarTheme(theme);
+---
+
+<aside
+  class:list={[
+    getSidebarWidth(size),
+    'cosy:min-h-full cosy:flex cosy:flex-col',
+    themeStyles.bg,
+    themeStyles.textColor,
+  ]}>
+  <!-- 侧边栏头部 -->
+  <div
+    class:list={[
+      'cosy:navbar cosy:border-b',
+      themeStyles.headerBg,
+      themeStyles.borderColor,
+    ]}>
+    <div class="cosy:navbar-start">
+      <a
+        href="/dashboard"
+        class="cosy:btn cosy:btn-ghost cosy:text-lg cosy:font-semibold cosy:no-underline">
+        <span class="cosy:text-xl">⚡</span>
+        <span class="cosy:hidden cosy:lg:block">{systemName}</span>
+      </a>
+    </div>
+    <div class="cosy:navbar-end">
+      <button class="cosy:btn cosy:btn-ghost cosy:btn-sm" id="collapse-sidebar">
+        <AstroIcon name="menu" size="16px" stroke="currentColor" />
+      </button>
+    </div>
+  </div>
+
+  <!-- 导航菜单 -->
+  <div class="cosy:flex-1 cosy:overflow-y-auto">
+    <ul
+      class="cosy:menu cosy:p-4 cosy:space-y-1 cosy:list-none cosy:no-underline">
+      {
+        navItems.map((item: NavItem) => {
+          const isActive =
+            currentPath === item.href ||
+            (item.items &&
+              item.items.some(
+                (subitem: NavItem) => currentPath === subitem.href
+              ));
+
+          return (
+            <li>
+              <a
+                href={item.href}
+                class:list={[
+                  'cosy:no-underline',
+                  { 'cosy:menu-active': isActive },
+                ]}>
+                <AstroIcon
+                  name={getNavItemIcon(item)}
+                  size="16px"
+                  stroke="currentColor"
+                />
+                <span>{item.text}</span>
+                {item.badge && (
+                  <span class="cosy:badge cosy:badge-primary cosy:badge-sm">
+                    {item.badge}
+                  </span>
+                )}
+              </a>
+
+              {item.items && (
+                <ul class="cosy:ml-4 cosy:list-none cosy:no-underline">
+                  {item.items.map((subitem: NavItem) => {
+                    const isSubActive = currentPath === subitem.href;
+                    return (
+                      <li>
+                        <a
+                          href={subitem.href}
+                          class:list={[
+                            'cosy:text-sm cosy:no-underline',
+                            { 'cosy:menu-active': isSubActive },
+                          ]}>
+                          <AstroIcon
+                            name={getNavItemIcon(subitem)}
+                            size="14px"
+                            stroke="currentColor"
+                          />
+                          <span>{subitem.text}</span>
+                          {subitem.badge && (
+                            <span class="cosy:badge cosy:badge-primary cosy:badge-xs">
+                              {subitem.badge}
+                            </span>
+                          )}
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </li>
+          );
+        })
+      }
+    </ul>
+  </div>
+
+  <!-- 侧边栏底部自定义内容 -->
+  <div class:list={['cosy:mt-auto cosy:border-t', themeStyles.borderColor]}>
+    <slot name="footer" />
+  </div>
+</aside>
+
+<script>
+  // 侧边栏折叠/展开功能
+  document.addEventListener('DOMContentLoaded', () => {
+    const collapseSidebarBtn = document.getElementById('collapse-sidebar');
+    const drawerToggle = document.getElementById(
+      'dashboard-drawer'
+    ) as HTMLInputElement;
+
+    if (collapseSidebarBtn && drawerToggle) {
+      collapseSidebarBtn.addEventListener('click', () => {
+        drawerToggle.checked = !drawerToggle.checked;
+        // 保存状态到本地存储
+        localStorage.setItem(
+          'sidebarCollapsed',
+          drawerToggle.checked.toString()
+        );
+      });
+    }
+
+    // 从本地存储恢复状态
+    const savedState = localStorage.getItem('sidebarCollapsed');
+    if (savedState && drawerToggle) {
+      drawerToggle.checked = savedState === 'true';
+    }
+  });
+</script>

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

@@ -0,0 +1,164 @@
+---
+/**
+ * @component DashboardTopNavbar
+ *
+ * @description
+ * DashboardTopNavbar 组件提供仪表盘布局的顶部导航栏功能。
+ * 包含菜单切换按钮、面包屑导航、搜索框、通知和用户信息。
+ *
+ * @usage
+ * ```astro
+ * ---
+ * import { DashboardTopNavbar } from '@coffic/cosy-ui';
+ *
+ * const userMenuItems = [
+ *   { href: '/profile', text: '个人资料' },        // 自动匹配 user 图标
+ *   { href: '/settings', text: '设置' },          // 自动匹配 settings 图标
+ *   { href: '/logout', text: '退出登录' },         // 自动匹配 logout 图标
+ *   { href: '/help', text: '帮助中心', icon: 'help' } // 也可手动指定图标
+ * ];
+ * ---
+ *
+ * <DashboardTopNavbar
+ *   title="仪表盘"
+ *   userName="管理员"
+ *   userAvatar="/avatar.jpg"
+ *   userMenuItems={userMenuItems}
+ * />
+ * ```
+ *
+ * @props
+ * - title: string - 页面标题，用于面包屑导航
+ * - userName?: string - 用户名
+ * - userAvatar?: string - 用户头像
+ * - userMenuItems?: UserMenuItem[] - 用户菜单项，默认包含个人资料、设置、退出登录，图标会自动匹配
+ */
+
+import '../../style.ts';
+import AstroIcon from '../icons/AstroIcon.astro';
+import type { UserMenuItem } from './types';
+import { getUserMenuItemIcon } from './types';
+
+export interface Props {
+  /**
+   * 页面标题，用于面包屑导航
+   */
+  title: string;
+
+  /**
+   * 用户名
+   */
+  userName?: string;
+
+  /**
+   * 用户头像
+   */
+  userAvatar?: string;
+
+  /**
+   * 用户菜单项
+   */
+  userMenuItems?: UserMenuItem[];
+}
+
+const { title, userName, userAvatar, userMenuItems } = Astro.props;
+
+// 默认用户菜单项
+const defaultUserMenuItems: UserMenuItem[] = [
+  { href: '/profile', text: '个人资料' }, // 自动匹配 user 图标
+  { href: '/settings', text: '设置' }, // 自动匹配 settings 图标
+  { href: '/logout', text: '退出登录' }, // 自动匹配 logout 图标
+];
+
+const menuItems = userMenuItems || defaultUserMenuItems;
+---
+
+<div class="cosy:navbar cosy:bg-base-100 cosy:shadow-sm">
+  <div class="cosy:navbar-start">
+    <label
+      for="dashboard-drawer"
+      class="cosy:btn cosy:btn-square cosy:btn-ghost cosy:lg:hidden">
+      <AstroIcon name="menu" size="16px" stroke="currentColor" />
+    </label>
+
+    <div
+      class="cosy:text-base-content/70 cosy:flex cosy:items-center cosy:h-full cosy:text-lg cosy:font-medium cosy:px-4">
+      {title}
+    </div>
+  </div>
+
+  <div class="cosy:navbar-end cosy:gap-2">
+    <!-- 搜索框 -->
+    <div class="cosy:form-control cosy:hidden cosy:lg:flex">
+      <div class="cosy:input-group">
+        <input
+          type="text"
+          placeholder="搜索..."
+          class="cosy:input cosy:input-bordered cosy:input-sm cosy:w-48"
+        />
+        <button class="cosy:btn cosy:btn-square cosy:btn-sm">
+          <AstroIcon name="search" size="16px" stroke="currentColor" />
+        </button>
+      </div>
+    </div>
+
+    <!-- 通知 -->
+    <div class="cosy:indicator">
+      <button class="cosy:btn cosy:btn-ghost cosy:btn-circle">
+        <AstroIcon name="notification" size="18px" stroke="currentColor" />
+      </button>
+      <span
+        class="cosy:badge cosy:badge-xs cosy:badge-primary cosy:indicator-item"
+        >3</span
+      >
+    </div>
+
+    <!-- 用户信息 -->
+    {
+      userName && (
+        <div class="cosy:dropdown cosy:dropdown-end">
+          <div
+            tabindex="0"
+            role="button"
+            class="cosy:btn cosy:btn-ghost cosy:gap-2">
+            {userAvatar ? (
+              <div class="cosy:avatar">
+                <div class="cosy:w-8 cosy:rounded-full">
+                  <img src={userAvatar} alt={userName} />
+                </div>
+              </div>
+            ) : (
+              <div class="cosy:avatar cosy:placeholder">
+                <div class="cosy:bg-primary cosy:text-primary-content cosy:rounded-full cosy:w-8">
+                  <span class="cosy:text-sm">{userName.charAt(0)}</span>
+                </div>
+              </div>
+            )}
+            <span class="cosy:hidden cosy:lg:block">{userName}</span>
+          </div>
+          <ul
+            tabindex="0"
+            class="cosy:dropdown-content cosy:menu cosy:p-2 cosy:shadow cosy:bg-base-100 cosy:rounded-box cosy:w-52">
+            {menuItems.map((item) => {
+              const iconName = getUserMenuItemIcon(item);
+              return (
+                <li>
+                  <a
+                    href={item.href}
+                    class="cosy:no-underline cosy:flex cosy:items-center cosy:gap-2">
+                    <AstroIcon
+                      name={iconName}
+                      size="16px"
+                      stroke="currentColor"
+                    />
+                    {item.text}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )
+    }
+  </div>
+</div>

package/dist/src-astro/layout-dashboard/index.ts

@@ -1,11 +1,17 @@
-import DashboardLayout from './DashboardLayout.astro';
-import DashboardLayoutBasic from './DashboardLayoutBasic.astro';
-import BasicSourceCode from './DashboardLayoutBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+/**
+ * 仪表盘布局组件
+ */
 
-export { DashboardLayout, DashboardLayoutBasic };
+import DashboardLayout from './DashboardLayout.astro';
+import DashboardSidebar from './DashboardSidebar.astro';
+import DashboardTopNavbar from './DashboardTopNavbar.astro';
 
-// 导出示例源代码
-export const DashboardLayoutExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'DashboardLayout'),
+export {
+  DashboardLayout,
+  DashboardSidebar,
+  DashboardTopNavbar
 };
+
+// 导出类型和函数
+export type { NavItem, SidebarSize, SidebarTheme, ContentTheme } from './types';
+export { getIconFromHref, getNavItemIcon, getSidebarWidth, getSidebarTheme, getContentTheme } from './types';