@coffic/cosy-ui 0.9.24 → 0.9.25

package/dist/index-astro.ts

@@ -35,7 +35,6 @@ export * from './src-astro/logout';
 export * from './src-astro/main';
 export * from './src-astro/modal';
 export * from './src-astro/module';
-export * from './src-astro/nav-item';
 export * from './src-astro/nav-section';
 export * from './src-astro/placeholder';
 export * from './src-astro/products';

package/dist/src/assets/iconData.ts

@@ -239,4 +239,9 @@ export const iconData: Record<string, IconData> = {
     website: {
         path: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
     },
+
+    // 地球图标
+    globe: {
+        path: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z',
+    },
 };

package/dist/src/utils/link.ts

@@ -32,7 +32,7 @@ export class LinkUtil {
     }
 
     static getHomeLink(lang: string): string {
-        return `${this.getBaseUrl}/${lang}`;
+        return `${this.getBaseUrl()}/${lang}`;
     }
 
     static getLessonsLink(lang: string): string {

package/dist/src/utils/theme.ts

@@ -1,9 +1,9 @@
 interface ThemeManager {
-  updateActiveTheme: (currentTheme: string) => void;
-  handleThemeClick: (this: HTMLElement) => void;
-  initialize: () => void;
-  setTheme: (theme: string) => void;
-  detectSystemTheme: () => string;
+    updateActiveTheme: (currentTheme: string) => void;
+    handleThemeClick: (this: HTMLElement) => void;
+    initialize: () => void;
+    setTheme: (theme: string) => void;
+    detectSystemTheme: () => string;
 }
 
 /**
@@ -14,109 +14,112 @@ interface ThemeManager {
  * @returns ThemeManager 主题管理器对象
  */
 export function createThemeManager(): ThemeManager {
-  const getThemeItems = () =>
-    document.querySelectorAll<HTMLElement>('[data-theme]');
+    const getThemeItems = () =>
+        document.querySelectorAll<HTMLElement>('[data-theme-id], .cosy\\:theme-item');
 
-  const updateActiveTheme = (currentTheme: string) => {
-    const themeItems = getThemeItems();
-    themeItems.forEach((item) => {
-      const themeId = item.getAttribute('data-theme');
-      const isActive = themeId === currentTheme;
+    const updateActiveTheme = (currentTheme: string) => {
+        const themeItems = getThemeItems();
+        themeItems.forEach((item) => {
+            const themeId = item.getAttribute('data-theme-id');
+            const isActive = themeId === currentTheme;
 
-      // 设置元素的 data-active 属性
-      item.setAttribute('data-active', String(isActive));
+            // 设置元素的 data-active 属性
+            item.setAttribute('data-active', String(isActive));
 
-      // 仅对于旧式主题按钮（data-set-theme 属性），保留旧的类切换行为
-      if (item.hasAttribute('data-set-theme')) {
-        item.classList.toggle('cosy:bg-primary', isActive);
-        item.classList.toggle('cosy:text-primary-content', isActive);
-      }
-    });
-  };
+            // 更新 CheckIcon 显示状态
+            if (item.classList.contains('cosy:theme-item')) {
+                const checkmark = item.querySelector('.cosy\\:theme-check');
+                if (checkmark) {
+                    if (isActive) {
+                        checkmark.classList.remove('cosy:hidden');
+                        item.classList.add('cosy:bg-base-200', 'cosy:font-medium');
+                    } else {
+                        checkmark.classList.add('cosy:hidden');
+                        item.classList.remove('cosy:bg-base-200', 'cosy:font-medium');
+                    }
+                }
+            }
+        });
+    };
 
-  function handleThemeClick(this: HTMLElement) {
-    const theme =
-      this.getAttribute('data-set-theme') || this.getAttribute('data-theme');
-    if (theme) {
-      setTheme(theme);
+    function handleThemeClick(this: HTMLElement) {
+        const theme = this.getAttribute('data-theme-id');
+        if (theme) {
+            setTheme(theme);
+        }
     }
-  }
 
-  /**
-   * 设置主题
-   *
-   * @param theme 主题ID
-   */
-  const setTheme = (theme: string) => {
-    document.documentElement.setAttribute('data-theme', theme);
-    localStorage.setItem('theme', theme);
-    updateActiveTheme(theme);
-  };
+    /**
+     * 设置主题
+     *
+     * @param theme 主题ID
+     */
+    const setTheme = (theme: string) => {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        updateActiveTheme(theme);
+    };
 
-  /**
-   * 检测系统主题偏好（亮色/暗色）
-   *
-   * @returns 'dark' 或 'light'
-   */
-  const detectSystemTheme = (): string => {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light';
-  };
+    /**
+     * 检测系统主题偏好（亮色/暗色）
+     *
+     * @returns 'dark' 或 'light'
+     */
+    const detectSystemTheme = (): string => {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    };
 
-  /**
-   * 初始化主题管理器
-   *
-   * 从本地存储中获取主题设置，如果没有则尝试使用系统主题，最后使用默认主题
-   */
-  const initialize = () => {
-    // 从本地存储中获取主题
-    let savedTheme = localStorage.getItem('theme');
+    /**
+     * 初始化主题管理器
+     *
+     * 从本地存储中获取主题设置，如果没有则尝试使用系统主题，最后使用默认主题
+     */
+    const initialize = () => {
+        // 从本地存储中获取主题
+        let savedTheme = localStorage.getItem('theme');
 
-    // 如果没有保存的主题，则尝试使用系统主题
-    if (!savedTheme) {
-      const systemTheme = detectSystemTheme();
-      if (systemTheme === 'dark') {
-        savedTheme = 'dark';
-      } else {
-        savedTheme = 'default'; // 默认使用默认主题
-      }
-    }
+        // 如果没有保存的主题，则尝试使用系统主题
+        if (!savedTheme) {
+            const systemTheme = detectSystemTheme();
+            if (systemTheme === 'dark') {
+                savedTheme = 'dark';
+            } else {
+                savedTheme = 'default'; // 默认使用默认主题
+            }
+        }
 
-    // 设置主题
-    document.documentElement.setAttribute('data-theme', savedTheme);
-    updateActiveTheme(savedTheme);
+        // 设置主题
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        updateActiveTheme(savedTheme);
 
-    // 添加主题切换事件监听器
-    // 支持新旧两种类型的主题切换按钮
-    const themeItems = [
-      ...Array.from(document.querySelectorAll<HTMLElement>('[data-set-theme]')),
-      ...Array.from(
-        document.querySelectorAll<HTMLElement>('.cosy\\:theme-item')
-      ),
-    ];
+        // 添加主题切换事件监听器
+        const themeItems = Array.from(
+            document.querySelectorAll<HTMLElement>('[data-theme-id]')
+        );
 
-    themeItems.forEach((item) => {
-      item.removeEventListener('click', handleThemeClick);
-      item.addEventListener('click', handleThemeClick);
-    });
+        themeItems.forEach((item) => {
+            item.removeEventListener('click', handleThemeClick);
+            item.addEventListener('click', handleThemeClick);
+        });
 
-    // 监听系统主题变化
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', (e) => {
-        // 只有当用户没有手动设置过主题时，才跟随系统主题变化
-        if (!localStorage.getItem('theme')) {
-          setTheme(e.matches ? 'dark' : 'default');
-        }
-      });
-  };
+        // 监听系统主题变化
+        window
+            .matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change', (e) => {
+                // 只有当用户没有手动设置过主题时，才跟随系统主题变化
+                if (!localStorage.getItem('theme')) {
+                    setTheme(e.matches ? 'dark' : 'default');
+                }
+            });
+    };
 
-  return {
-    updateActiveTheme,
-    handleThemeClick,
-    initialize,
-    setTheme,
-    detectSystemTheme,
-  };
+    return {
+        updateActiveTheme,
+        handleThemeClick,
+        initialize,
+        setTheme,
+        detectSystemTheme,
+    };
 }

package/dist/src-astro/article/Article.astro

@@ -127,6 +127,7 @@ const baseClasses = [
   'cosy:mx-auto',
   'cosy:dark:prose-invert', // 暗黑模式支持,
   'cosy:m-0',
+  'cosy:px-2 cosy:lg:px-4',
   'cosy:min-h-screen',
   'cosy:pb-96',
   widthClasses,

package/dist/src-astro/container/Container.astro

@@ -71,6 +71,15 @@
  *   <div>第二项</div>
  * </Container>
  * ```
+ *
+ * @props
+ * @prop {string} size - 容器尺寸
+ * @prop {string} padding - 内边距大小
+ * @prop {string} margin - 外边距大小
+ * @prop {boolean} centered - 是否居中显示
+ * @prop {boolean} border - 是否显示边框
+ * @prop {string} flex - flex布局方向
+ * @prop {string} gap - flex项目间距
  */
 
 import type { HTMLAttributes } from 'astro/types';

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

@@ -139,6 +139,7 @@
  * @prop {string} copyright - 版权信息
  * @prop {string} inspirationalSlogan - 鼓舞人心的标语，显示在横幅中
  * @prop {string} [icp] - ICP备案号（中国网站需要）
+ * @prop {string} [icpLink] - ICP备案链接（可选）
  * @prop {Object} [logo] - 网站Logo对象，包含src和alt属性
  * @prop {Array<Object>} [products=[]] - 产品链接数组，每个对象包含name、href和可选的external属性
  * @prop {Array<Object>} [friendlyLinks=[]] - 友情链接数组，每个对象包含name、href和可选的external属性
@@ -173,10 +174,12 @@ import {
   type IFooterProps,
   createTextGetter,
   Link,
+  Container,
 } from '../../index-astro';
 import FooterSection from './FooterSection.astro';
 import '../../style.ts';
 import FooterCopyright from './FooterCopyright.astro';
+import FooterICP from './FooterICP.astro';
 
 const {
   siteName,
@@ -186,6 +189,7 @@ const {
   copyright,
   inspirationalSlogan,
   icp,
+  icpLink,
   logo,
   products = [],
   friendlyLinks = [],
@@ -234,7 +238,7 @@ const debugClasses = debug
 
 <footer
   class:list={[
-    'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
+    'cosy:footer cosy:flex cosy:flex-col cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
     debugClasses.footer,
   ]}>
   <div
@@ -356,23 +360,16 @@ const debugClasses = debug
       }
     </div>
   </div>
-</footer>
 
-{/* 横幅 */}
-{
-  inspirationalSlogan && (
-    <aside class:list={['cosy:p-4 cosy:w-full', debugClasses.aside]}>
-      <p class="cosy:text-center">{inspirationalSlogan}</p>
-    </aside>
-  )
-}
+  <div
+    class="cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:w-full cosy:opacity-70 cosy:lg:flex-row cosy:gap-4">
+    <FooterCopyright
+      company={company}
+      copyright={copyright}
+      currentYear={currentYear}
+      t={t}
+    />
 
-{/* 底部版权信息 */}
-<FooterCopyright
-  company={company}
-  copyright={copyright}
-  icp={icp}
-  currentYear={currentYear}
-  t={t}
-  debugClasses={debugClasses}
-/>
+    {icp && <FooterICP icp={icp} icpLink={icpLink} />}
+  </div>
+</footer>

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

@@ -5,25 +5,16 @@
  * @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;
+
+import '../../style.ts';
+
+const { company, copyright, currentYear, t } = 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>
+<p class="cosy:text-sm cosy:text-center">
+  © {currentYear}
+  {company} - {copyright || (t && t('allRightsReserved'))}
+</p>

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

@@ -0,0 +1,18 @@
+---
+/**
+ * @component FooterICP
+ * @description 页脚ICP备案信息组件。
+ * @props
+ * @prop {string} icp - ICP备案号
+ * @prop {string} icpLink - ICP备案链接（可选，默认为工信部备案查询网站）
+ */
+
+import '../../style.ts';
+import { Link } from '../../index-astro';
+
+const { icp, icpLink = 'https://beian.miit.gov.cn/' } = Astro.props;
+---
+
+<Link href={icpLink} external variant="text" size="sm" noUnderline={true}>
+  {icp}
+</Link>

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

@@ -1,2 +1,3 @@
 export { default as Footer } from './Footer.astro';
 export { default as FooterSection } from './FooterSection.astro';
+export { default as FooterICP } from './FooterICP.astro';

package/dist/src-astro/footer/types.ts

@@ -0,0 +1,27 @@
+export interface FooterICPProps {
+    icp: string;
+    icpLink?: string;
+    debugClasses?: {
+        icp?: string;
+    };
+}
+
+export interface FooterCopyrightProps {
+    company: string;
+    copyright?: string;
+    currentYear: number;
+    t?: (key: string) => string;
+    debugClasses?: {
+        footer?: string;
+        aside?: string;
+    };
+}
+
+export interface FooterSectionProps {
+    title: string;
+    links: Array<{
+        name: string;
+        href?: string;
+        external?: boolean;
+    }>;
+} 

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

@@ -27,19 +27,26 @@
  * <Header astroI18n={astroI18n} />
  * ```
  *
+ * 自定义导航项间距：
+ * ```astro
+ * <Header gap={4} />
+ * ```
+ *
  * @props
  * - astroI18n - 完整的 astro:i18n 模块（启用语言切换时需要）
+ * - gap - 导航项之间的间距，可选值：0, 1, 2, 3, 4, 6, 8, 10, 12，默认 2
  */
 import {
-  LanguageSwitcher,
   LinkUtil,
   type IHeaderProps,
   type INavItem,
-  NavItems,
-  ThemeSwitcher,
+  Modal,
 } from '../../index-astro';
 import Logo from '../../src/assets/logo-rounded.png';
-import LogoLink from './LogoLink.astro';
+import HeaderStart from './HeaderStart.astro';
+import HeaderCenter from './HeaderCenter.astro';
+import HeaderEnd from './HeaderEnd.astro';
+import MobileNav from './MobileNav.astro';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;
@@ -57,6 +64,7 @@ const {
   paddingVertical = 'none',
   navPosition = 'center',
   showThemeSwitcher = true,
+  gap = 2,
   astroI18n,
 } = Astro.props;
 
@@ -121,7 +129,7 @@ const activeLink = LinkUtil.getActiveLink(
   ]}>
   <div
     class:list={[
-      'cosy:bg-accent/70 cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:border-base-200',
+      'cosy:bg-base-300/90 cosy:text-base-content cosy:flex cosy:flex-grow cosy:backdrop-blur not-prose cosy:shadow-md',
       {
         'cosy:rounded-none': rounded === 'none',
         'cosy:rounded-sm': rounded === 'sm',
@@ -133,56 +141,47 @@ const activeLink = LinkUtil.getActiveLink(
       headerHeightClass,
       { 'cosy:border cosy:border-dashed cosy:border-red-500': debug },
     ]}>
-    <div class="cosy:navbar-start cosy:pl-1">
-      {
-        navPosition === 'start' ? (
-          <div class="cosy:flex cosy:items-center cosy:gap-4">
-            <LogoLink src={logo} href={logoHref} size={height} debug={debug} />
-            <div class="cosy:hidden cosy:lg:flex">
-              <NavItems
-                navItems={navItems}
-                activeLink={activeLink}
-                linkHeightClass={linkHeightClass}
-              />
-            </div>
-          </div>
-        ) : (
-          <LogoLink src={logo} href={logoHref} size={height} debug={debug} />
-        )
-      }
-      <slot name="navbar-start" />
-    </div>
-
-    <div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
-      {
-        navPosition === 'center' && (
-          <NavItems
-            navItems={navItems}
-            activeLink={activeLink}
-            linkHeightClass={linkHeightClass}
-          />
-        )
-      }
-      <slot name="navbar-center" />
-    </div>
-
-    <div class="cosy:navbar-end cosy:pr-1">
-      {
-        navPosition === 'end' && (
-          <div class="cosy:hidden cosy:lg:flex">
-            <NavItems
-              navItems={navItems}
-              activeLink={activeLink}
-              linkHeightClass={linkHeightClass}
-            />
-          </div>
-        )
-      }
+    <HeaderStart
+      logo={logo}
+      logoHref={logoHref}
+      height={height}
+      navPosition={navPosition}
+      navItems={navItems}
+      activeLink={activeLink}
+      linkHeightClass={linkHeightClass}
+      debug={debug}>
+      <slot name="navbar-start" slot="navbar-start" />
+    </HeaderStart>
 
-      {showThemeSwitcher && <ThemeSwitcher />}
-      {isI18nEnabled && <LanguageSwitcher astroI18n={astroI18n} />}
+    <HeaderCenter
+      navPosition={navPosition}
+      navItems={navItems}
+      activeLink={activeLink}
+      linkHeightClass={linkHeightClass}
+      gap={gap}
+    />
 
-      <slot name="navbar-end" />
-    </div>
+    <HeaderEnd
+      navPosition={navPosition}
+      navItems={navItems}
+      activeLink={activeLink}
+      linkHeightClass={linkHeightClass}
+      showThemeSwitcher={showThemeSwitcher}
+      isI18nEnabled={isI18nEnabled}
+      astroI18n={astroI18n}
+    />
   </div>
 </header>
+
+<!-- 移动端导航 Modal -->
+{
+  navItems.length > 0 && (
+    <Modal id="mobile-nav" title="导航菜单">
+      <MobileNav
+        navItems={navItems}
+        activeLink={activeLink}
+        linkHeightClass={linkHeightClass}
+      />
+    </Modal>
+  )
+}

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

@@ -0,0 +1,59 @@
+---
+/**
+ * @component HeaderCenter
+ *
+ * @description
+ * HeaderCenter 组件负责渲染 Header 的中央区域，包括中央导航项。
+ * 这是一个内部组件，通常由 Header 组件使用。
+ *
+ * @usage
+ * ```astro
+ * <HeaderCenter
+ *   navPosition={navPosition}
+ *   navItems={navItems}
+ *   activeLink={activeLink}
+ *   linkHeightClass={linkHeightClass}
+ *   gap={2}
+ * />
+ * ```
+ *
+ * @props
+ * - navPosition - 导航位置
+ * - navItems - 导航项数组
+ * - activeLink - 当前激活的链接
+ * - linkHeightClass - 链接高度类名
+ * - gap - 导航项之间的间距，可选值：0, 1, 2, 3, 4, 6, 8, 10, 12，默认 2
+ */
+import { type INavItem } from '../../index-astro';
+import NavItems from './NavItems.astro';
+
+export interface Props {
+  navPosition: string;
+  navItems: INavItem[];
+  activeLink: string;
+  linkHeightClass: string;
+  gap?: number;
+}
+
+const {
+  navPosition,
+  navItems,
+  activeLink,
+  linkHeightClass,
+  gap = 2,
+} = Astro.props;
+---
+
+<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+  {
+    navPosition === 'center' && (
+      <NavItems
+        navItems={navItems}
+        activeLink={activeLink}
+        linkHeightClass={linkHeightClass}
+        gap={gap}
+      />
+    )
+  }
+  <slot name="navbar-center" />
+</div>