@coffic/cosy-ui 0.8.11 → 0.8.12

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

@@ -14,6 +14,7 @@
  * 4. 状态保持 - 记住用户的侧边栏折叠状态
  *
  * @usage
+ * 基本用法：
  * ```astro
  * ---
  * import { DashboardLayout } from '@coffic/cosy-ui';
@@ -24,12 +25,19 @@
  *   { 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 图标
+ * ];
  * ---
  *
  * <DashboardLayout
  *   title="管理后台"
  *   navItems={navItems}
  *   userName="管理员"
+ *   userMenuItems={userMenuItems}
  *   sidebarSize="lg"
  * >
  *   <h1>仪表盘内容</h1>
@@ -37,6 +45,45 @@
  * </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 - 页面描述
@@ -44,16 +91,19 @@
  * - navItems: NavItem[] - 导航项目
  * - userName?: string - 用户名
  * - userAvatar?: string - 用户头像
+ * - userMenuItems?: UserMenuItem[] - 用户菜单项，默认包含个人资料、设置、退出登录，图标会自动匹配
  * - sidebarCollapsed?: boolean - 是否折叠侧边栏，默认为false
  * - sidebarSize?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
  * - sidebarTheme?: SidebarTheme - 侧边栏主题，默认为"default"
- * - contentTheme?: ContentTheme - 内容区域主题，默认为"card"
+ * - mainBackgroundTheme?: MainBackgroundTheme - 主内容区域背景主题，默认为"transparent"
  * - head?: astroHTML.JSX.Element - 自定义头部内容
  * - class?: string - 页面类名
  * - class:list?: any - 类名列表
+ * - debug?: boolean - 调试模式，默认为false
  *
  * @slots
  * - default - 主要内容区域
+ * - sidebar-footer - 侧边栏底部自定义内容，可用于展示用户信息、版权信息等
  */
 
 import { BaseLayout } from '../../index-astro';
@@ -64,8 +114,9 @@ import {
   type NavItem,
   type SidebarSize,
   type SidebarTheme,
-  type ContentTheme,
-  getContentTheme,
+  type MainBackgroundTheme,
+  type UserMenuItem,
+  getMainBackgroundTheme,
 } from './types';
 
 export interface Props {
@@ -100,6 +151,11 @@ export interface Props {
    */
   userAvatar?: string;
 
+  /**
+   * 用户菜单项
+   */
+  userMenuItems?: UserMenuItem[];
+
   /**
    * 是否折叠侧边栏
    * @default false
@@ -119,10 +175,10 @@ export interface Props {
   sidebarTheme?: SidebarTheme;
 
   /**
-   * 内容区域主题
-   * @default "card"
+   * 主内容区域背景主题
+   * @default "transparent"
    */
-  contentTheme?: ContentTheme;
+  mainBackgroundTheme?: MainBackgroundTheme;
 
   /**
    * 自定义头部内容
@@ -138,6 +194,12 @@ export interface Props {
    * 类名列表
    */
   'class:list'?: any;
+
+  /**
+   * 调试模式
+   * @default false
+   */
+  debug?: boolean;
 }
 
 const {
@@ -147,18 +209,20 @@ const {
   navItems,
   userName,
   userAvatar,
+  userMenuItems,
   sidebarCollapsed = false,
   sidebarSize = 'md',
   sidebarTheme = 'default',
-  contentTheme = 'card',
+  mainBackgroundTheme = 'transparent',
   head,
   class: className,
   'class:list': classList,
+  debug = false,
   ...rest
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
-const contentStyles = getContentTheme(contentTheme);
+const mainBackgroundStyles = getMainBackgroundTheme(mainBackgroundTheme);
 ---
 
 <BaseLayout
@@ -168,6 +232,7 @@ const contentStyles = getContentTheme(contentTheme);
   keywords=""
   author=""
   robots=""
+  debug={debug}
   class:list={['cosy:min-h-screen cosy:bg-base-200', className, classList]}
   {...rest}>
   <div class:list={['cosy:drawer', { 'cosy:drawer-open': !sidebarCollapsed }]}>
@@ -184,8 +249,9 @@ const contentStyles = getContentTheme(contentTheme);
         navItems={navItems}
         currentPath={currentPath}
         size={sidebarSize}
-        theme={sidebarTheme}
-      />
+        theme={sidebarTheme}>
+        <slot name="sidebar-footer" slot="footer" />
+      </DashboardSidebar>
     </div>
 
     <!-- 主内容区 -->
@@ -195,21 +261,13 @@ const contentStyles = getContentTheme(contentTheme);
         title={title}
         userName={userName}
         userAvatar={userAvatar}
+        userMenuItems={userMenuItems}
       />
 
       <!-- 页面内容 -->
-      <main class="cosy:flex-1 cosy:p-4 cosy:lg:p-6">
-        {
-          contentStyles.container ? (
-            <div class={`${contentStyles.container} ${contentStyles.shadow}`}>
-              <div class="cosy:card-body">
-                <slot />
-              </div>
-            </div>
-          ) : (
-            <slot />
-          )
-        }
+      <main
+        class:list={['cosy:flex-1 cosy:p-4 cosy:lg:p-6', mainBackgroundStyles]}>
+        <slot />
       </main>
     </div>
   </div>

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

@@ -29,6 +29,9 @@
  * - currentPath?: string - 当前路径，用于高亮当前页面
  * - size?: 'sm' | 'md' | 'lg' | 'xl' - 侧边栏尺寸，默认为"md"
  * - theme?: SidebarTheme - 侧边栏主题，默认为"default"
+ *
+ * @slots
+ * - footer - 侧边栏底部自定义内容，可用于展示用户信息等
  */
 
 import '../../style.ts';
@@ -86,7 +89,7 @@ const themeStyles = getSidebarTheme(theme);
 <aside
   class:list={[
     getSidebarWidth(size),
-    'cosy:min-h-full',
+    'cosy:min-h-full cosy:flex cosy:flex-col',
     themeStyles.bg,
     themeStyles.textColor,
   ]}>
@@ -113,69 +116,79 @@ const themeStyles = getSidebarTheme(theme);
   </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>
+  <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>
               )}
-            </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>
+            </li>
+          );
+        })
+      }
+    </ul>
+  </div>
+
+  <!-- 侧边栏底部自定义内容 -->
+  <div class:list={['cosy:mt-auto cosy:border-t', themeStyles.borderColor]}>
+    <slot name="footer" />
+  </div>
 </aside>
 
 <script>

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/types.ts

@@ -10,6 +10,15 @@ export interface NavItem {
     items?: NavItem[];
 }
 
+/**
+ * 用户菜单项接口
+ */
+export interface UserMenuItem {
+    href: string;
+    text: string;
+    icon?: string;
+}
+
 /**
  * 侧边栏尺寸类型
  */
@@ -115,67 +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'
-    }
+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'
 };
 
 /**
- * 获取内容区域主题样式类
- * @param theme 内容主题
- * @returns 对应的样式配置
+ * 获取主内容区域背景主题样式类
+ * @param theme 主内容区域背景主题
+ * @returns 对应的样式类名
  */
-export function getContentTheme(theme: ContentTheme = 'card') {
-    return contentThemeMap[theme];
+export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'transparent'): string {
+    return mainBackgroundThemeMap[theme];
 }
 
 /**
@@ -268,6 +253,10 @@ const hrefToIconMap: Record<string, string> = {
     'download': 'download',
     'upload': 'upload',
     'refresh': 'refresh',
+    'logout': 'logout',
+    'signin': 'login',
+    'signout': 'logout',
+    'exit': 'logout',
 
     // 工具和实用程序
     'clipboard': 'clipboard',
@@ -275,6 +264,8 @@ const hrefToIconMap: Record<string, string> = {
     'menu': 'menu',
     'close': 'close',
     'check': 'check',
+    'help': 'help',
+    'support': 'help',
 };
 
 /**
@@ -310,4 +301,19 @@ export function getNavItemIcon(item: NavItem): string {
 
     // 否则根据 href 自动推断
     return getIconFromHref(item.href);
+}
+
+/**
+ * 根据 UserMenuItem 获取完整的图标信息
+ * @param item 用户菜单项
+ * @returns 图标名称
+ */
+export function getUserMenuItemIcon(item: UserMenuItem): string {
+    // 如果显式指定了图标，优先使用
+    if (item.icon) {
+        return item.icon;
+    }
+
+    // 否则根据 href 自动推断，用户菜单默认图标为 'user'
+    return getIconFromHref(item.href, 'user');
 } 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "An astro component library",
   "author": {
     "name": "nookery",