@coffic/cosy-ui 0.8.11 → 0.8.13

package/dist/src-astro/entities/BlogDoc.ts

@@ -1,5 +1,5 @@
 import type { BlogEntry } from '../database/BlogDB';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 import Tag from './Tag';
 import { BaseDoc } from './BaseDoc';
 import { COLLECTION_BLOG } from '../database/BlogDB';

package/dist/src-astro/entities/CourseDoc.ts

@@ -2,7 +2,7 @@ import { cosyLogger } from '../cosy';
 import { SidebarItemEntity } from './SidebarItem';
 import type { CourseEntry } from '../database/CourseDB';
 import { courseDB } from '../database/CourseDB';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 import { COLLECTION_COURSE } from '../database/CourseDB';
 import { BaseDoc } from './BaseDoc';
 

package/dist/src-astro/entities/ExperimentDoc.ts

@@ -2,7 +2,7 @@ import type { ExperimentEntry } from '../database/ExperimentDB';
 import { experimentDB } from '../database/ExperimentDB';
 import { cosyLogger } from '../cosy';
 import { SidebarItemEntity } from './SidebarItem';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 import { COLLECTION_EXPERIMENT } from '../database/ExperimentDB';
 import { BaseDoc } from './BaseDoc';
 import type { IHeadingType } from '../types/heading';

package/dist/src-astro/entities/LessonDoc.ts

@@ -2,7 +2,7 @@ import type { LessonEntry } from '../database/LessonDB';
 import { lessonDB } from '../database/LessonDB';
 import { cosyLogger } from '../cosy';
 import { SidebarItemEntity } from './SidebarItem';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 import { COLLECTION_LESSON } from '../database/LessonDB';
 import { BaseDoc } from './BaseDoc';
 import type { IHeadingType } from '../types/heading';

package/dist/src-astro/entities/MetaDoc.ts

@@ -1,6 +1,6 @@
 import { SidebarItemEntity } from './SidebarItem';
 import type { MetaEntry } from '../database/MetaDB';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 import { BaseDoc } from './BaseDoc';
 import { metaDB } from '../database/MetaDB';
 import { COLLECTION_META } from '../database/MetaDB';

package/dist/src-astro/entities/Tag.ts

@@ -1,7 +1,7 @@
 import { blogDB } from '../database/BlogDB';
 import { SidebarItemEntity } from './SidebarItem';
 import { type ITagStaticPath } from '../types/static-path';
-import { LinkUtil } from '../utils/link';
+import { LinkUtil } from '../../src/utils/link';
 
 export class Tag {
   name: string;

package/dist/src-astro/errors/403.astro

@@ -35,7 +35,7 @@
  */
 
 import '../../style.ts';
-import { LinkUtil } from '../utils/link.ts';
+import { LinkUtil } from '../../src/utils/link.ts';
 
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;

package/dist/src-astro/errors/404.astro

@@ -36,7 +36,7 @@
  */
 
 import '../../style.ts';
-import { LinkUtil } from '../utils/link.ts';
+import { LinkUtil } from '../../src/utils/link.ts';
 
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;

package/dist/src-astro/errors/500.astro

@@ -35,7 +35,7 @@
  */
 
 import '../../style.ts';
-import { LinkUtil } from '../utils/link.ts';
+import { LinkUtil } from '../../src/utils/link.ts';
 
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;

package/dist/src-astro/errors/503.astro

@@ -40,7 +40,7 @@
  */
 
 import '../../style.ts';
-import { LinkUtil } from '../utils/link.ts';
+import { LinkUtil } from '../../src/utils/link.ts';
 
 const baseUrl = LinkUtil.getBaseUrl();
 const path = Astro.url.pathname;

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

@@ -1,7 +1,7 @@
 import Flex from './Flex.astro';
 import FlexBasic from './FlexBasic.astro';
 import BasicSourceCode from './FlexBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Flex, FlexBasic };
 

package/dist/src-astro/footer/Footer.astro

@@ -145,7 +145,7 @@
  * - 社交媒体图标包含屏幕阅读器专用的文本说明
  */
 
-import { processSocialLink } from '../utils/social.ts';
+import { processSocialLink } from '../../src/utils/social.ts';
 import {
   SocialIcon,
   LanguageUtil,

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

@@ -1,7 +1,7 @@
 import Grid from './Grid.astro';
 import GridBasic from './GridBasic.astro';
 import BasicSourceCode from './GridBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Grid, GridBasic };
 

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

@@ -1,7 +1,7 @@
 import Heading from './Heading.astro';
 import HeadingBasic from './HeadingBasic.astro';
 import BasicSourceCode from './HeadingBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Heading, HeadingBasic };
 

package/dist/src-astro/icons/LogOut.astro

@@ -0,0 +1,28 @@
+---
+import AstroIcon from './AstroIcon.astro';
+
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const {
+  size = '24px',
+  color = 'currentColor',
+  class: className = '',
+} = Astro.props;
+---
+
+<AstroIcon name="logOut" size={size} stroke={color} class={className} />

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

@@ -43,4 +43,5 @@ export { default as ReportIcon } from './ReportIcon.astro';
 export { default as SecurityIcon } from './SecurityIcon.astro';
 export { default as UploadIcon } from './UploadIcon.astro';
 export { default as DownloadIcon } from './DownloadIcon.astro';
+export { default as LogOut } from './LogOut.astro';
 

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

@@ -5,7 +5,7 @@ import ImageLoading from './ImageLoading.astro';
 import BasicSourceCode from './ImageBasic.astro?raw';
 import EffectsSourceCode from './ImageEffects.astro?raw';
 import LoadingSourceCode from './ImageLoading.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { Image, ImageBasic, ImageEffects, ImageLoading };
 

package/dist/src-astro/language-switcher/index.ts

@@ -1,7 +1,7 @@
 import LanguageSwitcher from './LanguageSwitcher.astro';
 import LanguageSwitcherBasic from './LanguageSwitcherBasic.astro';
 import BasicSourceCode from './LanguageSwitcherBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { LanguageSwitcher, LanguageSwitcherBasic };
 

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

@@ -1,7 +1,7 @@
 import BaseLayout from './BaseLayout.astro';
 import BaseLayoutBasic from './BaseLayoutBasic.astro';
 import BasicSourceCode from './BaseLayoutBasic.astro?raw';
-import { extractSimpleExample } from '../utils/component';
+import { extractSimpleExample } from '../../src/utils/component';
 
 export { BaseLayout, BaseLayoutBasic };
 

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

@@ -4,7 +4,7 @@
  *
  * @description
  * DashboardLayout 组件适用于管理后台的布局，包含侧边栏导航和顶部导航栏。
- * 提供了完整的管理界面框架，包括响应式设计和暗色主题支持。
+ * 提供了完整的管理界面框架，包括响应式设计、暗色主题支持和内置 Toast 通知系统。
  *
  * @design
  * 设计理念：
@@ -12,8 +12,10 @@
  * 2. 响应式布局 - 在不同设备上提供良好的用户体验
  * 3. 可定制性 - 支持自定义导航项、系统名称和用户信息
  * 4. 状态保持 - 记住用户的侧边栏折叠状态
+ * 5. 统一通知 - 内置 Toast 系统，提供一致的消息提示体验
  *
  * @usage
+ * 基本用法：
  * ```astro
  * ---
  * import { DashboardLayout } from '@coffic/cosy-ui';
@@ -24,12 +26,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 +46,91 @@
  * </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>
+ *
+ *   <script>
+ *     // 在页面中使用 toast
+ *     function handleAction() {
+ *       // 简单用法
+ *       showToast('操作成功！');
+ *
+ *       // 带选项的用法
+ *       showToast({
+ *         message: '数据保存成功',
+ *         type: 'success',
+ *         duration: 2000
+ *       });
+ *     }
+ *   </script>
+ * </DashboardLayout>
+ * ```
+ *
+ * Toast 使用示例：
+ * ```javascript
+ * // 成功消息
+ * showToast({
+ *   message: '保存成功！',
+ *   type: 'success'
+ * });
+ *
+ * // 错误消息
+ * showToast({
+ *   message: '网络连接失败',
+ *   type: 'error',
+ *   duration: 5000
+ * });
+ *
+ * // 警告消息
+ * showToast({
+ *   message: '请注意数据安全',
+ *   type: 'warning'
+ * });
+ *
+ * // 信息消息
+ * showToast({
+ *   message: '系统将在 5 分钟后维护',
+ *   type: 'info'
+ * });
+ *
+ * // 简化用法
+ * showToast('这是一条简单的消息');
+ * ```
+ *
  * @props
  * - title: string - 页面标题
  * - description?: string - 页面描述
@@ -44,28 +138,33 @@
  * - 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';
 import DashboardSidebar from './DashboardSidebar.astro';
 import DashboardTopNavbar from './DashboardTopNavbar.astro';
+import { ToastContainer, ConfirmDialog } from '../../index-astro';
 import '../../style.ts';
 import {
   type NavItem,
   type SidebarSize,
   type SidebarTheme,
-  type ContentTheme,
-  getContentTheme,
+  type MainBackgroundTheme,
+  type UserMenuItem,
+  getMainBackgroundTheme,
 } from './types';
 
 export interface Props {
@@ -100,6 +199,11 @@ export interface Props {
    */
   userAvatar?: string;
 
+  /**
+   * 用户菜单项
+   */
+  userMenuItems?: UserMenuItem[];
+
   /**
    * 是否折叠侧边栏
    * @default false
@@ -119,10 +223,10 @@ export interface Props {
   sidebarTheme?: SidebarTheme;
 
   /**
-   * 内容区域主题
-   * @default "card"
+   * 主内容区域背景主题
+   * @default "transparent"
    */
-  contentTheme?: ContentTheme;
+  mainBackgroundTheme?: MainBackgroundTheme;
 
   /**
    * 自定义头部内容
@@ -138,6 +242,24 @@ export interface Props {
    * 类名列表
    */
   'class:list'?: any;
+
+  /**
+   * 是否启用 Toast 功能
+   * @default true
+   */
+  enableToast?: boolean;
+
+  /**
+   * 是否启用确认对话框功能
+   * @default true
+   */
+  enableConfirmDialog?: boolean;
+
+  /**
+   * 调试模式
+   * @default false
+   */
+  debug?: boolean;
 }
 
 const {
@@ -147,18 +269,22 @@ const {
   navItems,
   userName,
   userAvatar,
+  userMenuItems,
   sidebarCollapsed = false,
   sidebarSize = 'md',
   sidebarTheme = 'default',
-  contentTheme = 'card',
+  mainBackgroundTheme = 'transparent',
+  enableToast = true,
+  enableConfirmDialog = true,
   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 +294,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 +311,9 @@ const contentStyles = getContentTheme(contentTheme);
         navItems={navItems}
         currentPath={currentPath}
         size={sidebarSize}
-        theme={sidebarTheme}
-      />
+        theme={sidebarTheme}>
+        <slot name="sidebar-footer" slot="footer" />
+      </DashboardSidebar>
     </div>
 
     <!-- 主内容区 -->
@@ -195,24 +323,29 @@ 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>
+
+  <!-- Toast 容器 -->
+  {enableToast && <ToastContainer />}
+
+  {
+    enableConfirmDialog && (
+      <ConfirmDialog
+        id="dashboard-confirm"
+        title="确认操作"
+        message="您确定要执行此操作吗？"
+      />
+    )
+  }
 </BaseLayout>
 
 <script>

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>