@coffic/cosy-ui 0.8.28 → 0.9.1

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

@@ -5,71 +5,73 @@ import { type ISidebarItem } from '../types/sidebar';
  * 用于构建网站的侧边栏导航
  */
 export class SidebarItemEntity implements ISidebarItem {
-  text: string;
-  href: string;
-  items: ISidebarItem[];
+    text: string;
+    href: string;
+    items: ISidebarItem[];
+    badge?: string | number;
 
-  constructor(props: { text: string; link?: string; items?: ISidebarItem[] }) {
-    this.text = props.text;
-    this.href = props.link || '';
-    this.items = props.items || [];
-  }
+    constructor(props: { text: string; link?: string; items?: ISidebarItem[]; badge?: string | number }) {
+        this.text = props.text;
+        this.href = props.link || '';
+        this.items = props.items || [];
+        this.badge = props.badge;
+    }
 
-  /**
-   * 添加子项目
-   * @param item 要添加的子项目
-   */
-  addItem(item: SidebarItemEntity): void {
-    this.items.push(item);
-  }
+    /**
+     * 添加子项目
+     * @param item 要添加的子项目
+     */
+    addItem(item: SidebarItemEntity): void {
+        this.items.push(item);
+    }
 
-  /**
-   * 获取所有子项目
-   * @returns 子项目数组
-   */
-  getItems(): SidebarItemEntity[] {
-    return this.items.map((item) => new SidebarItemEntity(item));
-  }
+    /**
+     * 获取所有子项目
+     * @returns 子项目数组
+     */
+    getItems(): SidebarItemEntity[] {
+        return this.items.map((item) => new SidebarItemEntity(item));
+    }
 
-  /**
-   * 获取项目标签
-   * @returns 项目标签
-   */
-  getLabel(): string {
-    return this.text;
-  }
+    /**
+     * 获取项目标签
+     * @returns 项目标签
+     */
+    getLabel(): string {
+        return this.text;
+    }
 
-  /**
-   * 获取项目链接
-   * @returns 项目链接
-   */
-  getLink(): string {
-    return this.href;
-  }
+    /**
+     * 获取项目链接
+     * @returns 项目链接
+     */
+    getLink(): string {
+        return this.href;
+    }
 
-  /**
-   * 获取包括自身在内的所有项目
-   * @returns 包括自身在内的所有项目
-   */
-  getItemsIncludingSelf(): SidebarItemEntity[] {
-    return [this, ...this.getItems()];
-  }
+    /**
+     * 获取包括自身在内的所有项目
+     * @returns 包括自身在内的所有项目
+     */
+    getItemsIncludingSelf(): SidebarItemEntity[] {
+        return [this, ...this.getItems()];
+    }
 
-  /**
-   * 判断是否是分组（有子项目）
-   * @returns 是否是分组
-   */
-  isGroup(): boolean {
-    return this.items.length > 0;
-  }
+    /**
+     * 判断是否是分组（有子项目）
+     * @returns 是否是分组
+     */
+    isGroup(): boolean {
+        return this.items.length > 0;
+    }
 
-  /**
-   * 判断是否不是分组
-   * @returns 是否不是分组
-   */
-  isNotGroup(): boolean {
-    return !this.isGroup();
-  }
+    /**
+     * 判断是否不是分组
+     * @returns 是否不是分组
+     */
+    isNotGroup(): boolean {
+        return !this.isGroup();
+    }
 }
 
 /**
@@ -77,13 +79,13 @@ export class SidebarItemEntity implements ISidebarItem {
  * 实现此接口的类可以提供侧边栏项目
  */
 export interface SidebarProvider {
-  /**
-   * 转换为侧边栏项目
-   */
-  toSidebarItem(): Promise<SidebarItemEntity>;
+    /**
+     * 转换为侧边栏项目
+     */
+    toSidebarItem(): Promise<SidebarItemEntity>;
 
-  /**
-   * 获取顶级侧边栏项目
-   */
-  getTopSidebarItem?(): Promise<SidebarItemEntity>;
+    /**
+     * 获取顶级侧边栏项目
+     */
+    getTopSidebarItem?(): Promise<SidebarItemEntity>;
 }

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

@@ -176,6 +176,7 @@ import {
 } from '../../index-astro';
 import FooterSection from './FooterSection.astro';
 import '../../style.ts';
+import FooterCopyright from './FooterCopyright.astro';
 
 const {
   siteName,
@@ -367,17 +368,11 @@ const debugClasses = debug
 }
 
 {/* 底部版权信息 */}
-<div
-  class:list={[
-    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300',
-    debugClasses.footer,
-  ]}>
-  <aside
-    class:list={['cosy:items-center cosy:grid-flow-col', debugClasses.aside]}>
-    <p class="cosy:opacity-70 cosy:text-sm">
-      © {currentYear}
-      {company} - {copyright || t('allRightsReserved')}
-    </p>
-    {icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
-  </aside>
-</div>
+<FooterCopyright
+  company={company}
+  copyright={copyright}
+  icp={icp}
+  currentYear={currentYear}
+  t={t}
+  debugClasses={debugClasses}
+/>

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

@@ -0,0 +1,29 @@
+---
+/**
+ * @component FooterCopyright
+ * @description 页脚底部版权信息组件。
+ * @props
+ * @prop {string} company - 公司名称
+ * @prop {string} copyright - 版权信息
+ * @prop {string} icp - ICP备案号（可选）
+ * @prop {number} currentYear - 当前年份
+ * @prop {Function} t - 文本获取函数
+ * @prop {object} debugClasses - 调试样式类
+ */
+const { company, copyright, icp, currentYear, t, debugClasses } = Astro.props;
+---
+
+<div
+  class:list={[
+    'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300',
+    debugClasses?.footer,
+  ]}>
+  <aside
+    class:list={['cosy:items-center cosy:grid-flow-col', debugClasses?.aside]}>
+    <p class="cosy:opacity-70 cosy:text-sm">
+      © {currentYear}
+      {company} - {copyright || (t && t('allRightsReserved'))}
+    </p>
+    {icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
+  </aside>
+</div>

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

@@ -33,6 +33,9 @@ const { title, links } = Astro.props;
             <Link
               href={link.href}
               size="sm"
+              ghost
+              btn
+              color="primary"
               target={link.external ? '_blank' : '_self'}
               variant="text">
               {link.name}

package/dist/src-astro/header/Header.astro

@@ -22,8 +22,9 @@ import {
   Link,
   Image,
   ThemeSwitcher,
-} from '@coffic/cosy-ui';
+} from '../../index-astro';
 import Logo from '../../src/assets/logo-rounded.png';
+import { i18n } from 'astro:config/server';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;
@@ -31,7 +32,6 @@ export interface Props extends IHeaderProps {
 
 const {
   height = 'md',
-  languages = ['zh-cn', 'en'],
   logo = Logo,
   logoHref = '/',
   navItems = [],
@@ -200,7 +200,7 @@ const activeLink = LinkUtil.getActiveLink(
       }
 
       {showThemeSwitcher && <ThemeSwitcher />}
-      {languages.length > 1 && <LanguageSwitcher languages={languages} />}
+      {i18n !== undefined && <LanguageSwitcher />}
 
       <slot name="navbar-end" />
     </div>

package/dist/src-astro/language-switcher/LanguageSwitcher.astro

@@ -19,50 +19,59 @@
  * <LanguageSwitcher />
  * ```
  *
- * 自定义语言列表：
- * ```astro
- * <LanguageSwitcher
- *   languages={['zh-cn', 'en']}
- * />
- * ```
  */
 
-import { ChevronDownIcon, LanguageUtil } from '../../index-astro';
+import {
+  ChevronDownIcon,
+  LanguageUtil,
+  Link,
+  ListItem,
+} from '../../index-astro';
 import '../../style.ts';
+import { i18n } from 'astro:config/server';
 
 interface Props {
-  languages: string[];
   /**
    * 自定义类名
    */
   class?: string;
 }
 
-const { languages = ['zh-cn', 'en'], class: className = '' } = Astro.props;
+const { class: className = '' } = Astro.props;
+
+let links: any[] = [];
+let currentLocale: string | undefined = undefined;
+let currentLanguageName: string | undefined = undefined;
 
-const currentLocale = Astro.currentLocale;
-const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
+if (i18n !== undefined) {
+  const { getSwitcherLinks } = await import('./switcher_util.ts');
+  links = getSwitcherLinks(Astro);
+
+  currentLocale = Astro.currentLocale!;
+  currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
+} else {
+  throw new Error('can not use LanguageSwitcher when i18n is disabled');
+}
 ---
 
-<!-- 语言切换按钮 -->
-<div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
-  <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
-    <span class="cosy:mr-1">{currentLanguageName}</span>
-    <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
-  </div>
-  <ul
-    tabindex="0"
-    class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
-    {
-      languages.map((lang) => (
-        <li class={currentLocale === lang ? 'cosy:disabled' : ''}>
-          <a
-            href={LanguageUtil.getRelativeLink(lang, Astro)}
-            class={currentLocale === lang ? 'cosy:active' : ''}>
-            {LanguageUtil.getLanguageName(lang)}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</div>
+{
+  i18n !== undefined && (
+    <div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
+      <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+        <span class="cosy:mr-1">{currentLanguageName}</span>
+        <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
+      </div>
+      <ul
+        tabindex="0"
+        class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
+        {links.map((link) => (
+          <ListItem>
+            <Link href={link.url} active={currentLocale === link.locale}>
+              {link.name}
+            </Link>
+          </ListItem>
+        ))}
+      </ul>
+    </div>
+  )
+}

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

@@ -1,11 +1,3 @@
 import LanguageSwitcher from './LanguageSwitcher.astro';
-import LanguageSwitcherBasic from './LanguageSwitcherBasic.astro';
-import BasicSourceCode from './LanguageSwitcherBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
 
-export { LanguageSwitcher, LanguageSwitcherBasic };
-
-// 导出示例源代码
-export const LanguageSwitcherExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'LanguageSwitcher'),
-};
+export { LanguageSwitcher };

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

@@ -0,0 +1,40 @@
+import { getRelativeLocaleUrl, getRelativeLocaleUrlList } from 'astro:i18n';
+import type { AstroGlobal } from 'astro';
+import { LanguageUtil } from '../../index-astro';
+
+export interface SwitcherLink {
+    locale: string;
+    name: string;
+    url: string;
+}
+
+// 获取基础路径
+const getBaseUrl = (): string => {
+    return import.meta.env.BASE_URL;
+};
+
+const getLocaleFromUrl = (url: string): string => {
+    return url.replace(getBaseUrl(), '').split('/')[0];
+};
+
+export function getSwitcherLinks(astro: AstroGlobal): SwitcherLink[] {
+    const currentLocale = astro.currentLocale;
+
+    if (currentLocale === undefined) {
+        throw new Error('can not get switcher links when i18n is disabled');
+    }
+
+    const currentLocalURLPrefix = getRelativeLocaleUrl(currentLocale, '');
+    const pathname = astro.url.pathname + '/';
+    const slug = pathname.replace(
+        currentLocalURLPrefix,
+        ''
+    );
+    const urls = getRelativeLocaleUrlList(slug);
+
+    return urls.map((url) => ({
+        locale: getLocaleFromUrl(url),
+        name: LanguageUtil.getLanguageName(getLocaleFromUrl(url)),
+        url: url
+    }));
+}

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

@@ -260,6 +260,12 @@ export interface Props {
    * @default false
    */
   debug?: boolean;
+
+  /**
+   * 主内容区 padding 尺寸
+   * @default 'md'
+   */
+  mainPadding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const {
@@ -273,18 +279,27 @@ const {
   sidebarCollapsed = false,
   sidebarSize = 'md',
   sidebarTheme = 'default',
-  mainBackgroundTheme = 'transparent',
+  mainBackgroundTheme = 'base-100',
   enableToast = true,
   enableConfirmDialog = true,
   head,
   class: className,
   'class:list': classList,
   debug = false,
+  mainPadding = 'md',
   ...rest
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
 const mainBackgroundStyles = getMainBackgroundTheme(mainBackgroundTheme);
+
+const mainPaddingMap = {
+  none: '',
+  sm: 'cosy:p-2',
+  md: 'cosy:p-4',
+  lg: 'cosy:p-8',
+  xl: 'cosy:p-12',
+};
 ---
 
 <BaseLayout
@@ -328,7 +343,11 @@ const mainBackgroundStyles = getMainBackgroundTheme(mainBackgroundTheme);
 
       <!-- 页面内容 -->
       <main
-        class:list={['cosy:flex-1 cosy:p-4 cosy:lg:p-6', mainBackgroundStyles]}>
+        class:list={[
+          'cosy:flex-1',
+          mainPaddingMap[mainPadding],
+          mainBackgroundStyles,
+        ]}>
         <slot />
       </main>
     </div>

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

@@ -159,8 +159,8 @@ export const mainBackgroundThemeMap: Record<MainBackgroundTheme, string> = {
  * @param theme 主内容区域背景主题
  * @returns 对应的样式类名
  */
-export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'transparent'): string {
+export function getMainBackgroundTheme(theme: MainBackgroundTheme = 'base-100'): string {
     return mainBackgroundThemeMap[theme];
 }
 
-export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 
+export { getIconFromHref, getNavItemIcon, getUserMenuItemIcon } from './tools'; 

package/dist/src-astro/link/Link.astro

@@ -100,6 +100,7 @@ interface Props extends HTMLAttributes<'a'> {
     | 'warning'
     | 'error';
   align?: 'left' | 'center' | 'right';
+  active?: boolean;
 }
 
 const {
@@ -121,6 +122,7 @@ const {
   fullWidth = false,
   color,
   align,
+  active = false,
   ...rest
 } = Astro.props;
 
@@ -159,7 +161,10 @@ const classes = [
   animation === 'hover-scale' &&
     'cosy:hover:scale-105 cosy:transition-transform',
 
-  // 新增：按钮风格
+  // Active state
+  active && 'cosy:active',
+
+  // 按钮风格
   btn && 'cosy:btn',
   btn && size === 'sm' && 'cosy:btn-sm',
   btn && size === 'lg' && 'cosy:btn-lg',

package/dist/src-astro/list/ListItem.astro

@@ -1,10 +1,35 @@
 ---
 /**
  * @component ListItem
- * @description List item component with loading animations
- * @props loading?: boolean
- * @props duration?: number
- * @props animationType?: string
+ *
+ * @description
+ * ListItem 组件用于在列表中显示单个项目。它内置了多种加载动画效果，可以方便地通过 `loading` 属性来控制加载状态，并通过 `loadingAnimationType` 属性切换不同的加载Loading动画样式。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ListItem>这是一个列表项</ListItem>
+ * ```
+ *
+ * 加载状态：
+ * ```astro
+ * <ListItem loading={true}>加载中的列表项</ListItem>
+ * ```
+ *
+ * 指定加载动画类型：
+ * ```astro
+ * <ListItem loading={true} loadingAnimationType="pulse">使用脉冲动画加载</ListItem>
+ * <ListItem loading={true} loadingAnimationType="icon-left">使用左侧图标动画加载</ListItem>
+ * ```
+ *
+ * @props
+ * @prop {string} [class] - 自定义 CSS 类名。
+ * @prop {boolean} [loading=false] - 控制是否显示加载动画。
+ * @prop {number} [duration] - 动画的持续时间（单位：毫秒）。
+ * @prop {('none'|'ring'|'icon-left'|'icon-right'|'breath'|'pulse'|'glow')} [loadingAnimationType='none'] - 加载动画的类型。
+ *
+ * @slots
+ * @slot default - 列表项的内容。
  */
 import '../../style.ts';
 import ListItemRing from './ListItemRing.astro';
@@ -14,16 +39,38 @@ import ListItemBreath from './ListItemBreath.astro';
 import ListItemPulse from './ListItemPulse.astro';
 import ListItemGlow from './ListItemGlow.astro';
 
+interface Props {
+  class?: string;
+  loading?: boolean;
+  duration?: number;
+  loadingAnimationType?:
+    | 'none'
+    | 'ring'
+    | 'icon-left'
+    | 'icon-right'
+    | 'breath'
+    | 'pulse'
+    | 'glow';
+}
+
 const {
   loading = false,
   duration,
-  animationType = 'ring',
+  loadingAnimationType = 'none',
   ...restProps
 } = Astro.props;
 ---
 
 {
-  animationType === 'ring' && (
+  loadingAnimationType === 'none' && (
+    <li {...restProps}>
+      <slot />
+    </li>
+  )
+}
+
+{
+  loadingAnimationType === 'ring' && (
     <ListItemRing loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemRing>
@@ -31,7 +78,7 @@ const {
 }
 
 {
-  animationType === 'icon-left' && (
+  loadingAnimationType === 'icon-left' && (
     <ListItemIconLeft loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemIconLeft>
@@ -39,7 +86,7 @@ const {
 }
 
 {
-  animationType === 'icon-right' && (
+  loadingAnimationType === 'icon-right' && (
     <ListItemIconRight loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemIconRight>
@@ -47,7 +94,7 @@ const {
 }
 
 {
-  animationType === 'breath' && (
+  loadingAnimationType === 'breath' && (
     <ListItemBreath loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemBreath>
@@ -55,7 +102,7 @@ const {
 }
 
 {
-  animationType === 'pulse' && (
+  loadingAnimationType === 'pulse' && (
     <ListItemPulse loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemPulse>
@@ -63,7 +110,7 @@ const {
 }
 
 {
-  animationType === 'glow' && (
+  loadingAnimationType === 'glow' && (
     <ListItemGlow loading={loading} duration={duration} {...restProps}>
       <slot />
     </ListItemGlow>

package/dist/src-astro/{sidebar-nav → sidebar}/SidebarNav.astro

@@ -75,6 +75,11 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                     debugClass,
                   ]}>
                   {item.text}
+                  {item.badge !== undefined && item.badge !== null && (
+                    <span class="cosy:badge cosy:badge-sm cosy:ml-2">
+                      {item.badge}
+                    </span>
+                  )}
                 </a>
                 {item.items && (
                   <ul class:list={[debugClass]}>
@@ -95,6 +100,12 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                               debugClass,
                             ]}>
                             {subitem.text}
+                            {subitem.badge !== undefined &&
+                              subitem.badge !== null && (
+                                <span class="cosy:badge cosy:badge-xs cosy:ml-2">
+                                  {subitem.badge}
+                                </span>
+                              )}
                           </a>
                           {subitem.items && (
                             <ul class:list={[debugClass]}>
@@ -115,6 +126,12 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
                                         debugClass,
                                       ]}>
                                       {subsubitem.text}
+                                      {subsubitem.badge !== undefined &&
+                                        subsubitem.badge !== null && (
+                                          <span class="cosy:badge cosy:badge-xs cosy:ml-2">
+                                            {subsubitem.badge}
+                                          </span>
+                                        )}
                                     </a>
                                   </li>
                                 );

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

@@ -1,11 +1,4 @@
 import Sidebar from './Sidebar.astro';
-import SidebarBasic from './SidebarBasic.astro';
-import BasicSourceCode from './SidebarBasic.astro?raw';
-import { extractSimpleExample } from '../../src/utils/component';
+import SidebarNav from './SidebarNav.astro';
 
-export { Sidebar, SidebarBasic };
-
-// 导出示例源代码
-export const SidebarExampleCodes = {
-  Basic: extractSimpleExample(BasicSourceCode, 'Sidebar'),
-};
+export { Sidebar, SidebarNav };