@coffic/cosy-ui 0.8.11 → 0.8.13

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

@@ -10,12 +10,20 @@
  * ```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}
  * />
  * ```
  *
@@ -23,10 +31,13 @@
  * - 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 {
   /**
@@ -43,9 +54,23 @@ export interface Props {
    * 用户头像
    */
   userAvatar?: string;
+
+  /**
+   * 用户菜单项
+   */
+  userMenuItems?: UserMenuItem[];
 }
 
-const { title, userName, userAvatar } = Astro.props;
+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">
@@ -53,13 +78,12 @@ const { title, userName, userAvatar } = Astro.props;
     <label
       for="dashboard-drawer"
       class="cosy:btn cosy:btn-square cosy:btn-ghost cosy:lg:hidden">
-      <AstroIcon name="menu" size="18px" stroke="currentColor" />
+      <AstroIcon name="menu" size="16px" 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
+      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>
 
@@ -115,15 +139,23 @@ const { title, userName, userAvatar } = Astro.props;
           <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>
+            {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>
       )

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

@@ -0,0 +1,158 @@
+/**
+ * Dashboard Layout 组件的工具函数
+ */
+
+/**
+ * 基于 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',
+    'logout': 'logout',
+    'signin': 'login',
+    'signout': 'logout',
+    'exit': 'logout',
+
+    // 工具和实用程序
+    'clipboard': 'clipboard',
+    'link': 'link',
+    'menu': 'menu',
+    'close': 'close',
+    'check': 'check',
+    'help': 'help',
+    'support': 'help',
+};
+
+/**
+ * 根据 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: { href: string; icon?: string }): string {
+    // 如果显式指定了图标，优先使用
+    if (item.icon) {
+        return item.icon;
+    }
+
+    // 否则根据 href 自动推断
+    return getIconFromHref(item.href);
+}
+
+/**
+ * 根据 UserMenuItem 获取完整的图标信息
+ * @param item 用户菜单项
+ * @returns 图标名称
+ */
+export function getUserMenuItemIcon(item: { href: string; text: string; icon?: string }): string {
+    // 如果显式指定了图标，优先使用
+    if (item.icon) {
+        return item.icon;
+    }
+
+    // 否则根据 href 自动推断，用户菜单默认图标为 'user'
+    return getIconFromHref(item.href, 'user');
+}

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

@@ -10,6 +10,15 @@ export interface NavItem {
     items?: NavItem[];
 }
 
+/**
+ * 用户菜单项接口
+ */
+export interface UserMenuItem {
+    href: string;
+    text: string;
+    icon?: string;
+}
+
 /**
  * 侧边栏尺寸类型
  */
@@ -115,199 +124,43 @@ export function getSidebarTheme(theme: SidebarTheme = 'default') {
 }
 
 /**
- * 内容区域背景色主题类型
+ * 主内容区域背景主题类型
  */
-export type ContentTheme = 'card' | 'transparent' | 'base' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+export type MainBackgroundTheme = 'transparent' | 'base-100' | 'base-200' | 'base-300' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'gradient-warm' | 'gradient-cool' | 'gradient-rainbow' | 'gradient-sunset' | 'gradient-ocean' | 'gradient-forest';
 
-/**
- * 内容区域背景色主题配置映射
- */
-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',
+export const mainBackgroundThemeMap: Record<MainBackgroundTheme, string> = {
+    'transparent': '',
+    'base-100': 'cosy:bg-base-100',
+    'base-200': 'cosy:bg-base-200',
+    'base-300': 'cosy:bg-base-300',
+    'neutral': 'cosy:bg-neutral',
+    'primary': 'cosy:bg-primary',
+    'secondary': 'cosy:bg-secondary',
+    'accent': 'cosy:bg-accent',
+    'info': 'cosy:bg-info',
+    'success': 'cosy:bg-success',
+    'warning': 'cosy:bg-warning',
+    'error': 'cosy:bg-error',
+    'gradient-warm': 'cosy:bg-gradient-to-br cosy:from-orange-100 cosy:via-red-50 cosy:to-pink-100',
+    'gradient-cool': 'cosy:bg-gradient-to-br cosy:from-blue-100 cosy:via-cyan-50 cosy:to-green-100',
+    'gradient-rainbow': 'cosy:bg-gradient-to-br cosy:from-purple-100 cosy:via-pink-50 cosy:to-blue-100',
+    'gradient-sunset': 'cosy:bg-gradient-to-br cosy:from-yellow-100 cosy:via-orange-50 cosy:to-red-100',
+    'gradient-ocean': 'cosy:bg-gradient-to-br cosy:from-blue-100 cosy:via-teal-50 cosy:to-cyan-100',
+    'gradient-forest': 'cosy:bg-gradient-to-br cosy:from-green-100 cosy:via-emerald-50 cosy:to-teal-100'
 };
 
 /**
- * 根据 href 自动推断图标名称
- * @param href 链接地址
- * @param fallbackIcon 如果匹配失败时使用的默认图标
- * @returns 图标名称
+ * 获取主内容区域背景主题样式类
+ * @param theme 主内容区域背景主题
+ * @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;
+export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'transparent'): string {
+    return mainBackgroundThemeMap[theme];
 }
 
-/**
- * 根据 NavItem 获取完整的图标信息
- * @param item 导航项
- * @returns 图标名称
- */
-export function getNavItemIcon(item: NavItem): string {
-    // 如果显式指定了图标，优先使用
-    if (item.icon) {
-        return item.icon;
-    }
-
-    // 否则根据 href 自动推断
-    return getIconFromHref(item.href);
-} 
+export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 

package/dist/src-astro/link/index.ts

@@ -5,7 +5,7 @@ import LinkAnimations from './LinkAnimations.astro';
 import BasicSourceCode from './LinkBasic.astro?raw';
 import VariantsSourceCode from './LinkVariants.astro?raw';
 import AnimationsSourceCode from './LinkAnimations.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Link, LinkBasic, LinkVariants, LinkAnimations };