@coffic/cosy-ui 0.9.18 → 0.9.20

package/dist/src-astro/code-container/ButtonCodeToggle.astro

@@ -14,7 +14,6 @@ const { isCodeView = false } = Astro.props;
 
 <script>
   function initializeCodeToggle() {
-    console.log('CodeContainer: 初始化代码/预览切换按钮');
     const codeToggles = document.querySelectorAll('[data-toggle="code"]');
     codeToggles.forEach((toggle) => {
       toggle.addEventListener('click', () => {

package/dist/src-astro/code-container/ButtonCopyCode.astro

@@ -34,8 +34,6 @@ import { ClipboardIcon } from '../icons/index';
 
 <script>
   function initializeCopyCode() {
-    console.log('CodeContainer: 初始化复制代码按钮');
-
     const copyButtons = document.querySelectorAll('[aria-label="复制代码"]');
     copyButtons.forEach((button) => {
       button.addEventListener('click', () => {

package/dist/src-astro/code-container/CodeContainer.astro

@@ -103,8 +103,6 @@ const {
 
 <script>
   function initializeCodeContainer() {
-    console.log('CodeContainer: 初始化代码容器');
-
     // 初始化时隐藏除第一个以外的所有内容
     document
       .querySelectorAll('[data-role="code-container"]')
@@ -119,7 +117,6 @@ const {
   }
 
   document.addEventListener('astro:page-load', () => {
-    console.log('CodeContainer: 页面加载完成，初始化代码容器');
     initializeCodeContainer();
   });
 </script>

package/dist/src-astro/code-container/CodeToolbar.astro

@@ -43,8 +43,6 @@ const {
 
 <script>
   function initializeTab() {
-    console.log('CodeContainer: 初始化标签切换按钮');
-
     const exampleTabs = document.querySelectorAll(
       '[role="tab"][data-tab^="tab-"]'
     );

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

@@ -233,6 +233,7 @@ const debugClasses = debug
 ---
 
 <footer
+  transition:persist
   class:list={[
     'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
     debugClasses.footer,

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

@@ -31,9 +31,7 @@
  * - astroI18n - 完整的 astro:i18n 模块（启用语言切换时需要）
  */
 import {
-  Image,
   LanguageSwitcher,
-  Link,
   LinkUtil,
   type IHeaderProps,
   type INavItem,
@@ -41,6 +39,7 @@ import {
   ThemeSwitcher,
 } from '../../index-astro';
 import Logo from '../../src/assets/logo-rounded.png';
+import LogoLink from './LogoLink.astro';
 
 export interface Props extends IHeaderProps {
   debug?: boolean;
@@ -83,18 +82,6 @@ const linkHeightClasses = {
   xl: 'cosy:py-3',
 };
 
-// 设置logo大小
-const logoSizeClasses = {
-  '3xs': 'cosy:w-3 cosy:h-3',
-  '2xs': 'cosy:w-4 cosy:h-4',
-  xs: 'cosy:w-5 cosy:h-5',
-  sm: 'cosy:w-6 cosy:h-6',
-  md: 'cosy:w-8 cosy:h-8',
-  lg: 'cosy:w-10 cosy:h-10',
-  xl: 'cosy:w-12 cosy:h-12',
-};
-
-const logoSizeClass = logoSizeClasses[height];
 const linkHeightClass = linkHeightClasses[height];
 
 // 检查 i18n 是否启用，通过 Astro.currentLocale 来判断
@@ -150,21 +137,7 @@ const activeLink = LinkUtil.getActiveLink(
       {
         navPosition === 'start' ? (
           <div class="cosy:flex cosy:items-center cosy:gap-4">
-            <Link
-              animation="none"
-              debug={debug}
-              href={logoHref}
-              class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
-              <Image
-                rounded="full"
-                showPlaceholder={false}
-                transition="none"
-                lazy={false}
-                src={logo}
-                alt="logo"
-                class={logoSizeClass}
-              />
-            </Link>
+            <LogoLink src={logo} href={logoHref} size={height} debug={debug} />
             <div class="cosy:hidden cosy:lg:flex">
               <NavItems
                 navItems={navItems}
@@ -174,21 +147,7 @@ const activeLink = LinkUtil.getActiveLink(
             </div>
           </div>
         ) : (
-          <Link
-            animation="none"
-            debug={debug}
-            href={logoHref}
-            class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
-            <Image
-              rounded="full"
-              showPlaceholder={false}
-              transition="none"
-              lazy={false}
-              src={logo}
-              alt="logo"
-              class={logoSizeClass}
-            />
-          </Link>
+          <LogoLink src={logo} href={logoHref} size={height} debug={debug} />
         )
       }
       <slot name="navbar-start" />

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

@@ -0,0 +1,87 @@
+---
+/**
+ * @component LogoLink
+ *
+ * @description
+ * LogoLink 组件是一个用于显示网站 logo 的链接组件，通常用于 Header 组件中。
+ * 组件支持自定义 logo 图片、链接地址、大小等属性，并提供统一的样式和交互效果。
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <LogoLink src="/logo.png" href="/" />
+ * ```
+ *
+ * 自定义大小：
+ * ```astro
+ * <LogoLink src="/logo.png" href="/" size="lg" />
+ * ```
+ *
+ * @props
+ * - src - logo 图片的路径
+ * - href - 点击 logo 时跳转的链接地址
+ * - alt - logo 的 alt 文本
+ * - size - logo 的大小，可选值：'3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl'
+ * - debug - 是否启用调试模式
+ */
+import { Image, Link } from '../../index-astro';
+
+export interface Props {
+  src: string | ImageMetadata;
+  href?: string;
+  alt?: string;
+  size?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  debug?: boolean;
+}
+
+const {
+  src,
+  href = '/',
+  alt = 'logo',
+  size = 'md',
+  debug = false,
+} = Astro.props;
+
+// 设置logo大小
+const logoSizeClasses = {
+  '3xs': 'cosy:w-3 cosy:h-3',
+  '2xs': 'cosy:w-4 cosy:h-4',
+  xs: 'cosy:w-5 cosy:h-5',
+  sm: 'cosy:w-6 cosy:h-6',
+  md: 'cosy:w-8 cosy:h-8',
+  lg: 'cosy:w-10 cosy:h-10',
+  xl: 'cosy:w-12 cosy:h-12',
+};
+
+const logoSizeClass = logoSizeClasses[size];
+
+// 设置链接高度
+const linkHeightClasses = {
+  '3xs': 'cosy:py-0',
+  '2xs': 'cosy:py-0',
+  xs: 'cosy:py-0',
+  sm: 'cosy:py-1',
+  md: 'cosy:py-1',
+  lg: 'cosy:py-2',
+  xl: 'cosy:py-3',
+};
+
+const linkHeightClass = linkHeightClasses[size];
+---
+
+<Link
+  transition:persist
+  animation="none"
+  debug={debug}
+  href={href}
+  class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+  <Image
+    rounded="full"
+    showPlaceholder={false}
+    transition="none"
+    lazy={false}
+    src={src}
+    alt={alt}
+    class={logoSizeClass}
+  />
+</Link>

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

@@ -76,7 +76,9 @@ if (renderState.shouldRender && Astro.currentLocale) {
 
 {
   renderState.shouldRender && (
-    <div class={`cosy:dropdown cosy:dropdown-end ${className}`}>
+    <div
+      transition:persist
+      class={`cosy:dropdown cosy:dropdown-end ${className}`}>
       <div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
         <span class="cosy:mr-1">{renderState.currentLanguageName}</span>
         <ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />

package/dist/src-astro/layout-app/AppLayout.astro

@@ -175,6 +175,7 @@ import {
   Main,
   Sidebar,
 } from '../../index-astro';
+import SkeletonLoader from './SkeletonLoader.astro';
 
 interface Props extends IAppLayoutProps {}
 
@@ -190,6 +191,7 @@ const {
   footerConfig,
   headerConfig,
   metaConfig,
+  loadingDelay = 100,
   ...rest
 }: Props = Astro.props;
 ---
@@ -197,7 +199,7 @@ const {
 <BaseLayout {...metaConfig} debug={debug}>
   {
     showHeader && (
-      <Header {...headerConfig} debug={debug} transition:persist>
+      <Header {...headerConfig} debug={debug}>
         <div slot="navbar-start">
           <slot name="navbar-start" />
         </div>
@@ -213,26 +215,24 @@ const {
 
   <Container flex="row" gap="md" size="full" padding="none">
     <!-- 侧边栏容器 -->
-    {
-      showSidebar && (
-        <Sidebar
-          {...sidebarConfig}
-          transition:name="sidebar"
-          transition:persist
-        />
-      )
-    }
+    {showSidebar && <Sidebar {...sidebarConfig} />}
 
     <!-- 主内容区域 -->
     <Main {...mainContentConfig}>
-      <slot />
+      <SkeletonLoader
+        showLoading={true}
+        loadingSize="xl"
+        loadingDelay={loadingDelay}
+        skeletonClass="cosy:w-full cosy:h-screen  cosy:flex cosy:items-center cosy:justify-center">
+        <slot />
+      </SkeletonLoader>
     </Main>
   </Container>
 
   <!-- Footer -->
   {
     showFooter && (
-      <Container size="full" padding="none" transition:persist>
+      <Container size="full" padding="none">
         <Footer {...footerConfig} />
       </Container>
     )

package/dist/src-astro/layout-app/SkeletonLoader.astro

@@ -0,0 +1,191 @@
+---
+/**
+ * @component SkeletonLoader
+ *
+ * @description
+ * SkeletonLoader 组件是一个智能的骨架屏加载器，用于在页面加载或路由切换时显示骨架屏。
+ * 它会监听 Astro 的页面过渡事件，在加载期间隐藏实际内容并显示骨架屏。
+ * 支持在骨架屏背景上显示 loading 动画元素。
+ *
+ * @design
+ * 设计理念：
+ * 1. 用户体验优先 - 通过骨架屏提供视觉反馈，避免空白页面
+ * 2. 智能切换 - 自动在加载状态和内容状态之间切换
+ * 3. 可定制性 - 支持自定义骨架屏样式和布局
+ * 4. 性能优化 - 使用 CSS 动画，避免阻塞主线程
+ * 5. 视觉层次 - 骨架屏提供内容结构，loading 动画提供动态反馈
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <SkeletonLoader>
+ *   <div>实际内容</div>
+ * </SkeletonLoader>
+ * ```
+ *
+ * 显示 loading 元素：
+ * ```astro
+ * <SkeletonLoader
+ *   showLoading={true}
+ *   loadingSize="lg"
+ *   loadingType="ring"
+ * >
+ *   <div>实际内容</div>
+ * </SkeletonLoader>
+ * ```
+ *
+ * 自定义骨架屏：
+ * ```astro
+ * <SkeletonLoader
+ *   skeletonClass="cosy:bg-gray-200 cosy:animate-pulse"
+ *   loadingDelay={500}
+ *   showLoading={false}
+ * >
+ *   <div>实际内容</div>
+ * </SkeletonLoader>
+ * ```
+ *
+ * @props
+ * - loadingDelay?: number - 延迟显示时间（毫秒），默认为 1000ms
+ * - skeletonClass?: string - 骨架屏的自定义 CSS 类名
+ * - showLoading?: boolean - 是否显示 loading 元素，默认为 false
+ * - loadingSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - loading 元素尺寸，默认为 'md'
+ * - loadingType?: 'ring' | 'dots' | 'spinner' | 'bars' | 'infinity' - loading 类型，默认为 'ring'
+ *
+ * @slots
+ * - default - 实际内容，在加载完成后显示
+ *
+ * @events
+ * 组件会自动监听以下 Astro 事件：
+ * - astro:page-load - 页面加载完成时显示内容
+ * - astro:before-preparation - 页面准备前显示骨架屏
+ * - astro:before-swap - 路由切换前显示骨架屏
+ * - astro:after-swap - 路由切换后显示内容
+ */
+
+import '../../style.ts';
+import {
+  getLoadingClass,
+  type LoadingType,
+  type LoadingSize,
+} from './loading-classes';
+
+export interface Props {
+  /** 延迟显示时间（毫秒），默认1000ms */
+  loadingDelay?: number;
+  /** 骨架屏的自定义 CSS 类名 */
+  skeletonClass?: string;
+  /** 是否显示 loading 元素，默认 false */
+  showLoading?: boolean;
+  /** loading 元素尺寸，默认 'md' */
+  loadingSize?: LoadingSize;
+  /** loading 类型，默认 'ring' */
+  loadingType?: LoadingType;
+}
+
+const {
+  loadingDelay = 1000,
+  skeletonClass = '',
+  showLoading = false,
+  loadingSize = 'md',
+  loadingType = 'ring',
+} = Astro.props;
+
+// 生成唯一的 ID
+const loaderId = `skeleton-loader-${Math.random().toString(36).substr(2, 9)}`;
+---
+
+<div id={loaderId} class="cosy:relative">
+  <!-- 骨架屏 -->
+  <div
+    id={`${loaderId}-skeleton`}
+    style="display: none;"
+    class={`cosy:relative cosy:flex cosy:items-center cosy:justify-center cosy:min-h-[200px] ${skeletonClass}`}>
+    <!-- 骨架屏背景 -->
+    <div class="cosy:skeleton cosy:h-24 cosy:w-24 cosy:rounded-md"></div>
+
+    <!-- Loading 前景元素 -->
+    {
+      showLoading && (
+        <div class="cosy:absolute cosy:inset-0 cosy:flex cosy:items-center cosy:justify-center">
+          <span class={getLoadingClass(loadingType, loadingSize)} />
+        </div>
+      )
+    }
+  </div>
+
+  <!-- 实际内容 -->
+  <div
+    id={`${loaderId}-content`}
+    class="cosy:relative cosy:z-20"
+    style="opacity: 1; transition: opacity 0.3s ease-in-out;">
+    <slot />
+  </div>
+</div>
+
+<script is:inline define:vars={{ loaderId, loadingDelay }}>
+  let showTimeout = null;
+  let hideTimeout = null;
+  let loaded = false;
+
+  const getSkeletonElement = () => {
+    return document.getElementById(`${loaderId}-skeleton`);
+  };
+
+  const getContentElement = () => {
+    return document.getElementById(`${loaderId}-content`);
+  };
+
+  const showSkeleton = () => {
+    const skeleton = getSkeletonElement();
+    const content = getContentElement();
+
+    if (!skeleton || !content || loaded) return;
+
+    // 隐藏内容
+    content.style.opacity = '0';
+    // 显示骨架屏
+    skeleton.style.display = 'flex';
+  };
+
+  // 显示骨架屏的函数
+  const showLoader = () => {
+    if (loaded) return;
+
+    // 设置延迟显示
+    showTimeout = setTimeout(() => {
+      if (loaded) return;
+      showSkeleton();
+    }, loadingDelay);
+  };
+
+  // 监听 Astro 页面过渡事件
+  document.addEventListener('astro:page-load', () => {
+    loaded = true;
+  });
+
+  document.addEventListener('astro:before-preparation', () => {
+    loaded = false;
+    showLoader('astro:before-preparation');
+  });
+
+  // 监听路由变化
+  document.addEventListener('astro:before-swap', () => {
+    loaded = false;
+    showLoader('astro:before-swap');
+  });
+
+  document.addEventListener('astro:after-swap', () => {
+    loaded = true;
+  });
+
+  // 页面卸载时清理定时器
+  window.addEventListener('beforeunload', () => {
+    if (showTimeout) {
+      clearTimeout(showTimeout);
+    }
+    if (hideTimeout) {
+      clearTimeout(hideTimeout);
+    }
+  });
+</script>

package/dist/src-astro/layout-app/loading-classes.ts

@@ -0,0 +1,55 @@
+/**
+ * Loading 类名工具函数
+ * 用于根据 loading 类型和尺寸生成对应的 CSS 类名
+ */
+
+export type LoadingType = 'ring' | 'dots' | 'spinner' | 'bars' | 'infinity';
+export type LoadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * 根据 loading 类型和尺寸获取对应的 CSS 类名
+ * @param type loading 类型
+ * @param size loading 尺寸
+ * @returns CSS 类名字符串
+ */
+export function getLoadingClass(type: LoadingType, size: LoadingSize): string {
+    const classMap: Record<LoadingType, Record<LoadingSize, string>> = {
+        ring: {
+            xs: 'cosy:loading cosy:loading-ring cosy:loading-xs',
+            sm: 'cosy:loading cosy:loading-ring cosy:loading-sm',
+            md: 'cosy:loading cosy:loading-ring cosy:loading-md',
+            lg: 'cosy:loading cosy:loading-ring cosy:loading-lg',
+            xl: 'cosy:loading cosy:loading-ring cosy:loading-xl',
+        },
+        dots: {
+            xs: 'cosy:loading cosy:loading-dots cosy:loading-xs',
+            sm: 'cosy:loading cosy:loading-dots cosy:loading-sm',
+            md: 'cosy:loading cosy:loading-dots cosy:loading-md',
+            lg: 'cosy:loading cosy:loading-dots cosy:loading-lg',
+            xl: 'cosy:loading cosy:loading-dots cosy:loading-xl',
+        },
+        spinner: {
+            xs: 'cosy:loading cosy:loading-spinner cosy:loading-xs',
+            sm: 'cosy:loading cosy:loading-spinner cosy:loading-sm',
+            md: 'cosy:loading cosy:loading-spinner cosy:loading-md',
+            lg: 'cosy:loading cosy:loading-spinner cosy:loading-lg',
+            xl: 'cosy:loading cosy:loading-spinner cosy:loading-xl',
+        },
+        bars: {
+            xs: 'cosy:loading cosy:loading-bars cosy:loading-xs',
+            sm: 'cosy:loading cosy:loading-bars cosy:loading-sm',
+            md: 'cosy:loading cosy:loading-bars cosy:loading-md',
+            lg: 'cosy:loading cosy:loading-bars cosy:loading-lg',
+            xl: 'cosy:loading cosy:loading-bars cosy:loading-xl',
+        },
+        infinity: {
+            xs: 'cosy:loading cosy:loading-infinity cosy:loading-xs',
+            sm: 'cosy:loading cosy:loading-infinity cosy:loading-sm',
+            md: 'cosy:loading cosy:loading-infinity cosy:loading-md',
+            lg: 'cosy:loading cosy:loading-infinity cosy:loading-lg',
+            xl: 'cosy:loading cosy:loading-infinity cosy:loading-xl',
+        },
+    };
+
+    return classMap[type][size];
+} 

package/dist/src-astro/layout-basic/BaseLayout.astro

@@ -52,9 +52,11 @@
 import '../../style.ts';
 import { type IMetaProps } from '../../index-astro';
 import { ClientRouter } from 'astro:transitions';
-import { LoadingOverlay } from '../loading-overlay';
 
-export interface Props extends IMetaProps {}
+export interface Props extends IMetaProps {
+  /** 最小显示时间（毫秒），默认300ms，确保用户能看到加载状态 */
+  loadingMinDisplayTime?: number;
+}
 
 const {
   title,
@@ -69,7 +71,6 @@ const {
   favicon,
   'class:list': classList,
   background = 'default',
-  loadingDelay = 1000,
 } = Astro.props;
 
 // 处理背景色 class
@@ -108,18 +109,17 @@ let bodyClasses = [
     <meta name="generator" content={Astro.generator} />
     {favicon && <link rel="icon" type={favicon.format} href={favicon.src} />}
 
+    <ClientRouter />
+
     <!-- 自定义样式 -->
     {customStyles && <style set:html={customStyles} />}
 
     <!-- 自定义头部内容 -->
     {head && <div set:html={head} />}
 
-    <ClientRouter />
-
     <slot name="head" />
   </head>
   <body class:list={[bodyClasses, classList, 'min-h-screen']}>
     <slot />
-    <LoadingOverlay loadingDelay={loadingDelay} />
   </body>
 </html>

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

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