@coffic/cosy-ui 0.8.7 → 0.8.11

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

@@ -0,0 +1,206 @@
+---
+/**
+ * @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"
+ */
+
+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',
+    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>
+
+  <!-- 导航菜单 -->
+  <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', { 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',
+                          { 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>
+</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,132 @@
+---
+/**
+ * @component DashboardTopNavbar
+ *
+ * @description
+ * DashboardTopNavbar 组件提供仪表盘布局的顶部导航栏功能。
+ * 包含菜单切换按钮、面包屑导航、搜索框、通知和用户信息。
+ *
+ * @usage
+ * ```astro
+ * ---
+ * import { DashboardTopNavbar } from '@coffic/cosy-ui';
+ * ---
+ *
+ * <DashboardTopNavbar
+ *   title="仪表盘"
+ *   userName="管理员"
+ *   userAvatar="/avatar.jpg"
+ * />
+ * ```
+ *
+ * @props
+ * - title: string - 页面标题，用于面包屑导航
+ * - userName?: string - 用户名
+ * - userAvatar?: string - 用户头像
+ */
+
+import '../../style.ts';
+import AstroIcon from '../icons/AstroIcon.astro';
+
+export interface Props {
+  /**
+   * 页面标题，用于面包屑导航
+   */
+  title: string;
+
+  /**
+   * 用户名
+   */
+  userName?: string;
+
+  /**
+   * 用户头像
+   */
+  userAvatar?: string;
+}
+
+const { title, userName, userAvatar } = Astro.props;
+---
+
+<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="18px" stroke="currentColor" />
+    </label>
+
+    <div class="cosy:breadcrumbs cosy:text-sm cosy:ml-4">
+      <ul>
+        <li><span class="cosy:text-base-content/70">{title}</span></li>
+      </ul>
+    </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">
+            <li>
+              <a class="cosy:no-underline">个人资料</a>
+            </li>
+            <li>
+              <a class="cosy:no-underline">设置</a>
+            </li>
+            <li>
+              <a class="cosy:no-underline">退出登录</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';

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

@@ -0,0 +1,313 @@
+/**
+ * 仪表盘组件的共享类型定义
+ */
+
+export interface NavItem {
+    href: string;
+    icon?: string;  // 现在是可选的，会根据 href 自动推断
+    text: string;
+    badge?: string | number;
+    items?: NavItem[];
+}
+
+/**
+ * 侧边栏尺寸类型
+ */
+export type SidebarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * 侧边栏尺寸配置映射
+ */
+export const sidebarSizeMap: Record<SidebarSize, string> = {
+    'sm': 'cosy:w-48',   // 12rem (192px)
+    'md': 'cosy:w-64',   // 16rem (256px) - 默认
+    'lg': 'cosy:w-72',   // 18rem (288px)
+    'xl': 'cosy:w-80',   // 20rem (320px)
+};
+
+/**
+ * 获取侧边栏宽度样式类
+ * @param size 侧边栏尺寸
+ * @returns 对应的 CSS 类名
+ */
+export function getSidebarWidth(size: SidebarSize = 'md'): string {
+    return sidebarSizeMap[size];
+}
+
+/**
+ * 侧边栏背景色主题类型
+ */
+export type SidebarTheme = 'default' | 'dark' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * 侧边栏背景色主题配置映射
+ */
+export const sidebarThemeMap: Record<SidebarTheme, { bg: string; headerBg: string; textColor: string; borderColor: string }> = {
+    'default': {
+        bg: 'cosy:bg-base-300',
+        headerBg: 'cosy:bg-base-300',
+        textColor: 'cosy:text-base-content',
+        borderColor: 'cosy:border-base-200'
+    },
+    'dark': {
+        bg: 'cosy:bg-base-100',
+        headerBg: 'cosy:bg-base-100',
+        textColor: 'cosy:text-base-content',
+        borderColor: 'cosy:border-base-200'
+    },
+    'neutral': {
+        bg: 'cosy:bg-neutral',
+        headerBg: 'cosy:bg-neutral',
+        textColor: 'cosy:text-neutral-content',
+        borderColor: 'cosy:border-neutral-focus'
+    },
+    'primary': {
+        bg: 'cosy:bg-primary',
+        headerBg: 'cosy:bg-primary',
+        textColor: 'cosy:text-primary-content',
+        borderColor: 'cosy:border-primary-focus'
+    },
+    'secondary': {
+        bg: 'cosy:bg-secondary',
+        headerBg: 'cosy:bg-secondary',
+        textColor: 'cosy:text-secondary-content',
+        borderColor: 'cosy:border-secondary-focus'
+    },
+    'accent': {
+        bg: 'cosy:bg-accent',
+        headerBg: 'cosy:bg-accent',
+        textColor: 'cosy:text-accent-content',
+        borderColor: 'cosy:border-accent-focus'
+    },
+    'info': {
+        bg: 'cosy:bg-info',
+        headerBg: 'cosy:bg-info',
+        textColor: 'cosy:text-info-content',
+        borderColor: 'cosy:border-info-focus'
+    },
+    'success': {
+        bg: 'cosy:bg-success',
+        headerBg: 'cosy:bg-success',
+        textColor: 'cosy:text-success-content',
+        borderColor: 'cosy:border-success-focus'
+    },
+    'warning': {
+        bg: 'cosy:bg-warning',
+        headerBg: 'cosy:bg-warning',
+        textColor: 'cosy:text-warning-content',
+        borderColor: 'cosy:border-warning-focus'
+    },
+    'error': {
+        bg: 'cosy:bg-error',
+        headerBg: 'cosy:bg-error',
+        textColor: 'cosy:text-error-content',
+        borderColor: 'cosy:border-error-focus'
+    }
+};
+
+/**
+ * 获取侧边栏主题样式类
+ * @param theme 侧边栏主题
+ * @returns 对应的样式配置
+ */
+export function getSidebarTheme(theme: SidebarTheme = 'default') {
+    return sidebarThemeMap[theme];
+}
+
+/**
+ * 内容区域背景色主题类型
+ */
+export type ContentTheme = 'card' | 'transparent' | 'base' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * 内容区域背景色主题配置映射
+ */
+export const contentThemeMap: Record<ContentTheme, { container: string; shadow: string }> = {
+    'card': {
+        container: 'cosy:card cosy:bg-base-100',
+        shadow: 'cosy:shadow-sm'
+    },
+    'transparent': {
+        container: '',
+        shadow: ''
+    },
+    'base': {
+        container: 'cosy:card cosy:bg-base-200',
+        shadow: 'cosy:shadow-sm'
+    },
+    'neutral': {
+        container: 'cosy:card cosy:bg-neutral',
+        shadow: 'cosy:shadow-sm'
+    },
+    'primary': {
+        container: 'cosy:card cosy:bg-primary cosy:text-primary-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'secondary': {
+        container: 'cosy:card cosy:bg-secondary cosy:text-secondary-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'accent': {
+        container: 'cosy:card cosy:bg-accent cosy:text-accent-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'info': {
+        container: 'cosy:card cosy:bg-info cosy:text-info-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'success': {
+        container: 'cosy:card cosy:bg-success cosy:text-success-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'warning': {
+        container: 'cosy:card cosy:bg-warning cosy:text-warning-content',
+        shadow: 'cosy:shadow-sm'
+    },
+    'error': {
+        container: 'cosy:card cosy:bg-error cosy:text-error-content',
+        shadow: 'cosy:shadow-sm'
+    }
+};
+
+/**
+ * 获取内容区域主题样式类
+ * @param theme 内容主题
+ * @returns 对应的样式配置
+ */
+export function getContentTheme(theme: ContentTheme = 'card') {
+    return contentThemeMap[theme];
+}
+
+/**
+ * 基于 href 关键词匹配图标名称的映射表
+ */
+const hrefToIconMap: Record<string, string> = {
+    // 主页相关
+    'dashboard': 'dashboard',
+    'home': 'home',
+    'index': 'home',
+
+    // 用户相关
+    'user': 'user',
+    'users': 'users',
+    'profile': 'user',
+    'account': 'user',
+    'member': 'users',
+    'team': 'users',
+
+    // 设置相关
+    'setting': 'settings',
+    'config': 'settings',
+    'preference': 'settings',
+    'admin': 'settings',
+    'manage': 'settings',
+    'tool': 'tools',
+
+    // 数据相关
+    'chart': 'chart',
+    'analytics': 'chart',
+    'report': 'report',
+    'statistic': 'chart',
+    'data': 'chart',
+
+    // 文档相关
+    'doc': 'document',
+    'document': 'document',
+    'file': 'document',
+    'page': 'document',
+    'article': 'document',
+    'content': 'document',
+
+    // 日历和时间
+    'calendar': 'calendar',
+    'schedule': 'calendar',
+    'event': 'calendar',
+    'date': 'calendar',
+
+    // 通知和消息
+    'notification': 'notification',
+    'message': 'message',
+    'chat': 'message',
+    'mail': 'mail',
+    'email': 'mail',
+    'inbox': 'inboxArchive',
+
+    // 搜索
+    'search': 'search',
+    'find': 'search',
+
+    // 收藏和标记
+    'favorite': 'star',
+    'bookmark': 'star',
+    'star': 'star',
+    'like': 'heart',
+
+    // 文件夹和目录
+    'folder': 'folder',
+    'directory': 'folder',
+    'category': 'folder',
+
+    // 安全和权限
+    'security': 'security',
+    'permission': 'security',
+    'auth': 'security',
+    'login': 'security',
+
+    // 财务相关
+    'payment': 'wallet',
+    'billing': 'wallet',
+    'finance': 'wallet',
+    'money': 'wallet',
+    'wallet': 'wallet',
+
+    // 操作相关
+    'edit': 'edit',
+    'delete': 'delete',
+    'remove': 'delete',
+    'save': 'save',
+    'download': 'download',
+    'upload': 'upload',
+    'refresh': 'refresh',
+
+    // 工具和实用程序
+    'clipboard': 'clipboard',
+    'link': 'link',
+    'menu': 'menu',
+    'close': 'close',
+    'check': 'check',
+};
+
+/**
+ * 根据 href 自动推断图标名称
+ * @param href 链接地址
+ * @param fallbackIcon 如果匹配失败时使用的默认图标
+ * @returns 图标名称
+ */
+export function getIconFromHref(href: string, fallbackIcon: string = 'folder'): string {
+    // 将 href 转换为小写并移除路径分隔符
+    const normalizedHref = href.toLowerCase().replace(/[\/\-_]/g, '');
+
+    // 遍历映射表，找到匹配的关键词
+    for (const [keyword, iconName] of Object.entries(hrefToIconMap)) {
+        if (normalizedHref.includes(keyword)) {
+            return iconName;
+        }
+    }
+
+    return fallbackIcon;
+}
+
+/**
+ * 根据 NavItem 获取完整的图标信息
+ * @param item 导航项
+ * @returns 图标名称
+ */
+export function getNavItemIcon(item: NavItem): string {
+    // 如果显式指定了图标，优先使用
+    if (item.icon) {
+        return item.icon;
+    }
+
+    // 否则根据 href 自动推断
+    return getIconFromHref(item.href);
+} 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.7",
+  "version": "0.8.11",
   "description": "An astro component library",
   "author": {
     "name": "nookery",
@@ -22,9 +22,9 @@
     "access": "public"
   },
   "sideEffects": false,
-  "main": "./dist/index.ts",
-  "module": "./dist/index.ts",
-  "types": "./dist/index.ts",
+  "main": "./dist/index-astro.ts",
+  "module": "./dist/index-astro.ts",
+  "types": "./dist/index-astro.ts",
   "exports": {
     ".": {
       "import": "./dist/index-astro.ts",