@coffic/cosy-ui 0.9.24 → 0.9.25

package/dist/src-astro/sidebar/DesktopSidebar.astro

@@ -0,0 +1,123 @@
+---
+/**
+ * DesktopSidebar组件
+ *
+ * 桌面端固定侧边栏组件
+ *
+ * @example
+ * ```astro
+ * ---
+ * import DesktopSidebar from './DesktopSidebar.astro';
+ *
+ * const sidebarItems = [
+ *   { title: "入门", items: [
+ *     { href: "/docs/getting-started", text: "快速开始" },
+ *     { href: "/docs/installation", text: "安装" }
+ *   ]}
+ * ];
+ * ---
+ *
+ * <DesktopSidebar sidebarItems={sidebarItems} />
+ * ```
+ */
+
+import '../../style.ts';
+import { SidebarNav } from '../../index-astro';
+import { getMarginTopClass, getMarginBottomClass } from './utils.ts';
+import type { ISidebarProps } from '../../index-astro';
+
+export interface Props extends ISidebarProps {
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * 顶部外边距
+   * @default 'none'
+   */
+  marginTop?: string;
+
+  /**
+   * 底部外边距
+   * @default 'none'
+   */
+  marginBottom?: string;
+
+  /**
+   * 顶部定位类名
+   * @default 'cosy:top-12'
+   */
+  topClass?: string;
+
+  /**
+   * 高度类名
+   * @default 'cosy:h-[calc(100vh-3rem)]'
+   */
+  heightClass?: string;
+}
+
+const {
+  sidebarItems,
+  class: className,
+  debug = false,
+  marginTop = 'none',
+  marginBottom = 'none',
+  topClass = 'cosy:top-12',
+  heightClass = 'cosy:h-[calc(100vh-3rem)]',
+} = Astro.props;
+
+// 自动获取当前路径
+const currentPath = Astro.url.pathname;
+
+const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
+---
+
+{/* 桌面端侧边栏 */}
+<aside
+  data-desktop-sidebar
+  data-current-path={currentPath}
+  data-margin-top={marginTop}
+  data-margin-bottom={marginBottom}
+  class:list={[
+    className,
+    debugClass,
+    'cosy:hidden cosy:w-60 cosy:lg:block cosy:bg-base-200 cosy:px-4 cosy:overflow-y-auto cosy:sticky',
+    topClass,
+    heightClass,
+    getMarginTopClass(marginTop),
+    getMarginBottomClass(marginBottom),
+  ]}>
+  <SidebarNav
+    sidebarItems={sidebarItems}
+    currentPath={currentPath}
+    debug={debug}
+  />
+</aside>
+
+<script>
+  import { saveScrollPosition, restoreScrollPosition } from './utils.ts';
+
+  // 处理桌面端侧边栏滚动位置保存和恢复
+  document.addEventListener('astro:before-preparation', () => {
+    // 保存桌面端滚动位置
+    const desktopContent = document.querySelector('[data-desktop-sidebar]');
+    if (desktopContent) {
+      saveScrollPosition(desktopContent, 'sidebarScrollPosition');
+    }
+  });
+
+  document.addEventListener('astro:page-load', () => {
+    // 恢复桌面端滚动位置
+    const desktopContent = document.querySelector('[data-desktop-sidebar]');
+    if (desktopContent) {
+      restoreScrollPosition(desktopContent, 'sidebarScrollPosition');
+    }
+  });
+</script>

package/dist/src-astro/sidebar/MobileSidebar.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * MobileSidebar组件
+ *
+ * 移动端侧边栏弹出层组件
+ *
+ * @example
+ * ```astro
+ * ---
+ * import MobileSidebar from './MobileSidebar.astro';
+ *
+ * const sidebarItems = [
+ *   { title: "入门", items: [
+ *     { href: "/docs/getting-started", text: "快速开始" },
+ *     { href: "/docs/installation", text: "安装" }
+ *   ]}
+ * ];
+ * ---
+ *
+ * <MobileSidebar sidebarItems={sidebarItems} />
+ * ```
+ */
+
+import '../../style.ts';
+import { SidebarNav, Modal } from '../../index-astro';
+import type { ISidebarProps } from '../../index-astro';
+
+export interface Props extends ISidebarProps {
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
+}
+
+const { sidebarItems, debug = false } = Astro.props;
+
+// 自动获取当前路径
+const currentPath = Astro.url.pathname;
+
+let title = '';
+let titleHref = '';
+if (sidebarItems.length > 0) {
+  const sidebarMainItem = sidebarItems[0];
+  title = sidebarMainItem.text;
+  titleHref = sidebarMainItem.href;
+}
+---
+
+{/* 移动端侧边栏弹出层 */}
+<Modal
+  id="mobile-sidebar"
+  title={title}
+  titleHref={titleHref}
+  class="cosy:mx-4 cosy:lg:w-80 cosy:w-[calc(100vw-2rem)] cosy:max-w-full">
+  <div
+    class="cosy:h-[calc(100vh-8rem)] cosy:overflow-y-auto"
+    data-mobile-sidebar-content>
+    <SidebarNav
+      sidebarItems={sidebarItems}
+      currentPath={currentPath}
+      debug={debug}
+      showHeading={false}
+    />
+  </div>
+</Modal>
+
+<script>
+  import { saveScrollPosition, restoreScrollPosition } from './utils.ts';
+
+  // 处理移动端侧边栏滚动位置保存和恢复
+  document.addEventListener('astro:before-preparation', () => {
+    // 保存移动端滚动位置
+    const mobileContent = document.querySelector(
+      '[data-mobile-sidebar-content]'
+    );
+    if (mobileContent) {
+      saveScrollPosition(mobileContent, 'mobileSidebarScrollPosition');
+    }
+  });
+
+  document.addEventListener('astro:page-load', () => {
+    // 恢复移动端滚动位置
+    const mobileContent = document.querySelector(
+      '[data-mobile-sidebar-content]'
+    );
+    if (mobileContent) {
+      restoreScrollPosition(mobileContent, 'mobileSidebarScrollPosition');
+    }
+  });
+</script>

package/dist/src-astro/sidebar/Sidebar.astro

@@ -2,7 +2,7 @@
 /**
  * Sidebar组件
  *
- * 用于文档页面的侧边栏导航
+ * 用于文档页面的侧边栏导航，自动适配移动端和桌面端
  *
  * @example
  * ```astro
@@ -22,13 +22,44 @@
  */
 
 import '../../style.ts';
-import { SidebarNav, Modal } from '../../index-astro';
-import { getMarginTopClass, getMarginBottomClass } from './utils.ts';
-import MobileNav from './MobileNav.astro';
+import MobileSidebar from './MobileSidebar.astro';
+import DesktopSidebar from './DesktopSidebar.astro';
 import type { ISidebarProps } from '../../index-astro';
 
 export interface Props extends ISidebarProps {
+  /**
+   * 自定义类名
+   */
+  class?: string;
+
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * 顶部外边距
+   * @default 'none'
+   */
+  marginTop?: string;
+
+  /**
+   * 底部外边距
+   * @default 'none'
+   */
+  marginBottom?: string;
+
+  /**
+   * 顶部定位类名
+   * @default 'cosy:top-12'
+   */
   topClass?: string;
+
+  /**
+   * 高度类名
+   * @default 'cosy:h-[calc(100vh-3rem)]'
+   */
   heightClass?: string;
 }
 
@@ -41,90 +72,18 @@ const {
   topClass = 'cosy:top-12',
   heightClass = 'cosy:h-[calc(100vh-3rem)]',
 } = Astro.props;
-
-// 自动获取当前路径
-const currentPath = Astro.url.pathname;
-
-const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 ---
 
-{/* 移动端导航栏 */}
-<MobileNav
+{/* 移动端侧边栏 */}
+<MobileSidebar sidebarItems={sidebarItems} debug={debug} />
+
+{/* 桌面端侧边栏 */}
+<DesktopSidebar
   sidebarItems={sidebarItems}
-  currentPath={currentPath}
+  class={className}
   debug={debug}
+  marginTop={marginTop}
+  marginBottom={marginBottom}
+  topClass={topClass}
+  heightClass={heightClass}
 />
-
-{/* 移动端侧边栏弹出层 */}
-<Modal
-  id="mobile-sidebar"
-  class="cosy:mx-4 cosy:lg:w-80 cosy:w-[calc(100vw-2rem)] cosy:max-w-full">
-  <div
-    class="cosy:h-[calc(100vh-8rem)] cosy:overflow-y-auto"
-    data-mobile-sidebar-content>
-    <SidebarNav
-      sidebarItems={sidebarItems}
-      currentPath={currentPath}
-      debug={debug}
-    />
-  </div>
-</Modal>
-
-{/* 桌面端侧边栏 */}
-<aside
-  data-desktop-sidebar
-  data-current-path={currentPath}
-  data-margin-top={marginTop}
-  data-margin-bottom={marginBottom}
-  class:list={[
-    className,
-    debugClass,
-    'cosy:hidden cosy:w-60 cosy:lg:block cosy:bg-base-200 cosy:px-4 cosy:overflow-y-auto cosy:sticky',
-    topClass,
-    heightClass,
-    getMarginTopClass(marginTop),
-    getMarginBottomClass(marginBottom),
-  ]}>
-  <SidebarNav
-    sidebarItems={sidebarItems}
-    currentPath={currentPath}
-    debug={debug}
-  />
-</aside>
-
-<script>
-  import { saveScrollPosition, restoreScrollPosition } from './utils.ts';
-
-  // 处理侧边栏滚动位置保存和恢复
-  document.addEventListener('astro:before-preparation', () => {
-    // 保存桌面端滚动位置
-    const desktopContent = document.querySelector('[data-desktop-sidebar]');
-    if (desktopContent) {
-      saveScrollPosition(desktopContent, 'sidebarScrollPosition');
-    }
-
-    // 保存移动端滚动位置
-    const mobileContent = document.querySelector(
-      '[data-mobile-sidebar-content]'
-    );
-    if (mobileContent) {
-      saveScrollPosition(mobileContent, 'mobileSidebarScrollPosition');
-    }
-  });
-
-  document.addEventListener('astro:page-load', () => {
-    // 恢复桌面端滚动位置
-    const desktopContent = document.querySelector('[data-desktop-sidebar]');
-    if (desktopContent) {
-      restoreScrollPosition(desktopContent, 'sidebarScrollPosition');
-    }
-
-    // 恢复移动端滚动位置
-    const mobileContent = document.querySelector(
-      '[data-mobile-sidebar-content]'
-    );
-    if (mobileContent) {
-      restoreScrollPosition(mobileContent, 'mobileSidebarScrollPosition');
-    }
-  });
-</script>

package/dist/src-astro/sidebar/SidebarNav.astro

@@ -27,6 +27,12 @@ interface Props {
    */
   debug?: boolean;
 
+  /**
+   * 是否显示标题
+   * @default true
+   */
+  showHeading?: boolean;
+
   /**
    * 自定义类名
    */
@@ -37,6 +43,7 @@ const {
   sidebarItems,
   currentPath,
   debug = false,
+  showHeading = true,
   class: className,
 } = Astro.props;
 
@@ -50,9 +57,11 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
   {
     sidebarItems.map((section: ISidebarItem) => (
       <div class:list={[debugClass]}>
-        <Heading level={5} align="center" href={section.href}>
-          {section.text}
-        </Heading>
+        {showHeading && (
+          <Heading level={5} align="center" href={section.href}>
+            {section.text}
+          </Heading>
+        )}
         <ul
           class:list={[
             'cosy:menu cosy:rounded-box cosy:w-full cosy:no-underline',

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

@@ -1,6 +1,5 @@
 import Sidebar from './Sidebar.astro';
 import SidebarNav from './SidebarNav.astro';
-import MobileNav from './MobileNav.astro';
 import NavItem from './NavItem.astro';
 
-export { Sidebar, SidebarNav, MobileNav, NavItem };
+export { Sidebar, SidebarNav, NavItem };

package/dist/src-astro/theme-switcher/ThemeItem.astro

@@ -14,7 +14,7 @@
  * ```
  */
 
-import { Button } from '../../index-astro';
+import { Button, CheckIcon } from '../../index-astro';
 import '../../style.ts';
 
 interface Props {
@@ -40,6 +40,46 @@ const { theme, label, class: className = '' } = Astro.props;
   size="sm"
   block
   class={`cosy:text-left cosy:justify-start ${className} cosy:theme-item`}
-  data-theme={theme}>
-  {label}
+  data-theme-id={theme}>
+  <div
+    class="cosy:flex cosy:items-center cosy:flex-row cosy:justify-between cosy:w-full">
+    <span>{label}</span>
+    <CheckIcon
+      size="16px"
+      class="cosy:theme-check cosy:hidden cosy:text-primary cosy:ml-2"
+    />
+  </div>
 </Button>
+
+<script>
+  import { createThemeManager } from '../../src/utils/theme';
+
+  const themeManager = createThemeManager();
+
+  // 初始化主题切换按钮
+  function initThemeSwitcher() {
+    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
+      item.addEventListener('click', () => {
+        const theme = item.getAttribute('data-theme-id');
+        if (theme) {
+          themeManager.setTheme(theme);
+        }
+      });
+    });
+  }
+
+  // 初始加载时初始化
+  function initialize() {
+    themeManager.initialize();
+    initThemeSwitcher();
+  }
+
+  // 初始化
+  document.addEventListener('DOMContentLoaded', initialize);
+
+  // Astro view transitions 后重新初始化
+  document.addEventListener('astro:after-swap', initialize);
+
+  // 确保脚本加载后立即初始化
+  initialize();
+</script>

package/dist/src-astro/theme-switcher/ThemeSwitcher.astro

@@ -25,7 +25,7 @@
  * ```
  */
 
-import { SunCloudyIcon } from '../../index-astro';
+import { Button, SunCloudyIcon } from '../../index-astro';
 import ThemeItem from './ThemeItem.astro';
 import '../../style.ts';
 
@@ -42,9 +42,7 @@ const themes = [
   { id: 'default', name: 'Default' },
   { id: 'light', name: 'Light' },
   { id: 'dark', name: 'Dark' },
-  { id: 'pastel', name: 'Pastel' },
   { id: 'lemonade', name: 'Lemonade' },
-  { id: 'cupcake', name: 'Cupcake' },
   { id: 'nord', name: 'Nord' },
   { id: 'business', name: 'Business' },
   { id: 'luxury', name: 'Luxury' },
@@ -52,72 +50,13 @@ const themes = [
 ---
 
 <!-- 主题切换按钮 -->
-<div
-  transition:persist
-  class:list={['cosy:dropdown-end cosy:dropdown', className]}>
-  <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
-    <SunCloudyIcon size="16px" class="cosy:w-4 cosy:h-4" />
-  </div>
+<div class:list={['cosy:dropdown-end cosy:dropdown', className]}>
+  <Button tabindex="0" variant="ghost">
+    <SunCloudyIcon size="16px" />
+  </Button>
   <ul
     tabindex={0}
-    class="cosy:dropdown-content cosy:menu cosy:bg-base-100 cosy:dark:bg-neutral-800 cosy:rounded-box cosy:z-[1] cosy:w-56 cosy:p-2 cosy:shadow-lg">
+    class="cosy:dropdown-content cosy:ring-1 cosy:ring-base-300 cosy:bg-base-200 cosy:menu cosy:rounded-box cosy:z-[1] cosy:w-56 cosy:p-2 cosy:shadow-lg">
     {themes.map((theme) => <ThemeItem theme={theme.id} label={theme.name} />)}
   </ul>
 </div>
-
-<script>
-  import { createThemeManager } from '../../src/utils/theme';
-
-  const themeManager = createThemeManager();
-
-  function updateActiveTheme() {
-    const currentTheme =
-      document.documentElement.getAttribute('data-theme') || 'default';
-    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
-      const isActive = item.getAttribute('data-theme') === currentTheme;
-      item.setAttribute('data-active', String(isActive));
-
-      // 更新视觉状态
-      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 initThemeSwitcher() {
-    document.querySelectorAll('.cosy\\:theme-item').forEach((item) => {
-      item.addEventListener('click', () => {
-        console.log('Theme item clicked:', item);
-        const theme = item.getAttribute('data-theme');
-        if (theme) {
-          themeManager.setTheme(theme);
-          updateActiveTheme();
-        }
-      });
-    });
-  }
-
-  // 初始加载时初始化
-  function initialize() {
-    themeManager.initialize();
-    initThemeSwitcher();
-    updateActiveTheme();
-  }
-
-  // 初始化
-  document.addEventListener('DOMContentLoaded', initialize);
-
-  // Astro view transitions 后重新初始化
-  document.addEventListener('astro:after-swap', initialize);
-
-  // 确保脚本加载后立即初始化
-  initialize();
-</script>

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

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

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

@@ -67,6 +67,11 @@ export interface IFooterProps {
      */
     icp?: string;
 
+    /**
+     * ICP备案链接
+     */
+    icpLink?: string;
+
     /**
      * 激励标语
      */

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

@@ -85,4 +85,10 @@ export interface IHeaderProps {
      * @default true
      */
     sticky?: boolean;
+
+    /**
+     * 导航项之间的间距
+     * @default 2
+     */
+    gap?: number;
 }

package/package.json

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

package/dist/src-astro/nav-item/NavItems.astro

@@ -1,44 +0,0 @@
----
-/**
- * @component NavItems
- *
- * @description
- * NavItems 组件用于渲染导航栏中的导航项目列表。
- *
- * @usage
- * ```astro
- * <NavItems
- *   navItems={navItems}
- *   activeLink={activeLink}
- *   linkHeightClass={linkHeightClass}
- * />
- * ```
- */
-import '../../style.ts';
-import { type INavItem, Link } from '../../index-astro';
-
-interface Props {
-  navItems: INavItem[];
-  activeLink: string;
-  linkHeightClass: string;
-}
-
-const { navItems, activeLink, linkHeightClass } = Astro.props;
----
-
-<ul
-  data-active-link={activeLink}
-  class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
-  {
-    navItems.map((item) => (
-      <li>
-        <Link
-          variant={activeLink === item.href ? 'primary' : 'default'}
-          href={item.href}
-          class:list={[linkHeightClass]}>
-          {item.title}
-        </Link>
-      </li>
-    ))
-  }
-</ul>

package/dist/src-astro/nav-item/index.ts

@@ -1,3 +0,0 @@
-import NavItems from './NavItems.astro';
-
-export { NavItems };