@coffic/cosy-ui 0.3.39 → 0.3.45

package/dist/components/display/CodeExample.astro

@@ -1,163 +1,160 @@
 ---
 /**
  * @component CodeExample
- * 
+ *
  * @description
  * 用于展示组件示例及其源代码的组件。
  * 采用标签形式，默认显示预览，用户可以点击标签切换到源代码视图。
  * 支持亮色和暗黑模式，会根据系统设置自动切换主题。
- * 
+ *
  * @usage
  * ```astro
- * <CodeExample 
- *   title="示例标题" 
+ * <CodeExample
+ *   title="示例标题"
  *   description="示例描述"
  *   code={`<Alert type="info">这是一个示例</Alert>`}
  * >
  *   <Alert type="info">这是一个示例</Alert>
  * </CodeExample>
  * ```
- * 
+ *
  * @props
  * @prop {string} [title] - 示例标题
  * @prop {string} [description] - 示例描述
  * @prop {string} code - 要展示的源代码
- * 
+ *
  * @slots
  * @slot default - 组件的实际渲染内容
  */
 
 // 导入图标
-import { ClipboardIcon, CheckIcon } from '../../index'
-import "../../app.css"
+import { ClipboardIcon, CheckIcon } from '../../index';
+import '../../app.css';
 
 interface Props {
-  title?: string;
-  description?: string;
-  code: string;
+	title?: string;
+	description?: string;
+	code: string;
 }
 
 const { title, description, code } = Astro.props;
 ---
 
-<div class="cosy:card cosy:bg-base-100 cosy:shadow-lg cosy:mb-8 cosy:rounded-none code-example">
-  {title && <h3 class="cosy:card-title cosy:p-4 cosy:border-b cosy:border-base-300">{title}</h3>}
-  {description && <p class="cosy:px-4 cosy:pt-4 cosy:text-base-content/70">{description}</p>}
-  
-  <div class="cosy:flex cosy:justify-between cosy:items-center cosy:px-4 cosy:bg-base-200 cosy:rounded-none">
-    <div role="tablist" class="cosy:tabs cosy:tabs-box">
-      <button role="tab" class="cosy:tab cosy:tab-active" data-tab="preview">预览</button>
-      <button role="tab" class="cosy:tab" data-tab="code">代码</button>
-    </div>
-    <div class="cosy:flex cosy:items-center cosy:gap-2">
-      <button class="cosy:btn cosy:btn-ghost cosy:btn-sm cosy:gap-2" aria-label="复制代码">
-        <span class="copy-icon"><ClipboardIcon /></span>
-        <span class="check-icon cosy:hidden cosy:text-success"><CheckIcon /></span>
-        <span class="copy-text">复制代码</span>
-      </button>
-    </div>
-  </div>
-  
-  <div class="cosy:relative cosy:p-0">
-    <div class="code-example-panel active" data-panel="preview">
-      <div class="cosy:p-6 cosy:bg-base-100">
-        <slot />
-      </div>
-    </div>
-    
-    <div class="code-example-panel" data-panel="code">
-      <div class="cosy:bg-base-300 cosy:px-6 cosy:py-2">
-        <pre class="cosy:overflow-x-auto"><code class="language-astro">{code}</code></pre>
-      </div>
-    </div>
-  </div>
-</div>
+<div
+	class="cosy:bg-base-100 cosy:shadow-lg cosy:mb-8 cosy:rounded-none cosy:card cosy:code-example">
+	{title && <h3 class="cosy:p-4 cosy:border-b cosy:border-base-300 cosy:card-title">{title}</h3>}
+	{description && <p class="cosy:px-4 cosy:pt-4 cosy:text-base-content/70">{description}</p>}
+
+	<div
+		class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:rounded-none">
+		<div role="tablist" class="cosy:tabs cosy:tabs-box">
+			<button role="tab" class="cosy:tab cosy:tab-active" data-tab="preview">预览</button>
+			<button role="tab" class="cosy:tab" data-tab="code">代码</button>
+		</div>
+		<div class="cosy:flex cosy:items-center cosy:gap-2">
+			<button class="cosy:gap-2 cosy:btn cosy:btn-ghost cosy:btn-sm" aria-label="复制代码">
+				<span class="cosy:copy-icon"><ClipboardIcon /></span>
+				<span class="cosy:hidden cosy:text-success cosy:check-icon"><CheckIcon /></span>
+				<span class="cosy:copy-text">复制代码</span>
+			</button>
+		</div>
+	</div>
 
-<style>
-  .code-example-panel {
-    display: none;
-  }
-  
-  .code-example-panel.active {
-    display: block;
-  }
-</style>
+	<div class="cosy:relative cosy:p-0">
+		<div class="cosy:block cosy:code-example-panel" data-panel="preview">
+			<div class="cosy:bg-base-100 cosy:p-6">
+				<slot />
+			</div>
+		</div>
+
+		<div class="cosy:hidden cosy:code-example-panel" data-panel="code">
+			<div class="cosy:bg-base-300 cosy:px-6 cosy:py-2">
+				<pre class="cosy:overflow-x-auto"><code class="cosy:language-astro">{code}</code></pre>
+			</div>
+		</div>
+	</div>
+</div>
 
 <script>
-  function initializeCodeExample() {
-    // 标签切换功能
-    const tabs = document.querySelectorAll('.cosy\\:tab');
-    
-    tabs.forEach(tab => {
-      tab.addEventListener('click', () => {
-        // 获取当前标签组
-        const tabGroup = tab.closest('.cosy\\:tabs');
-        if (!tabGroup) return;
-        
-        const codeExample = tab.closest('.cosy\\:card');
-        if (!codeExample) return;
-        
-        const contentContainer = codeExample.querySelector('.cosy\\:relative');
-        if (!contentContainer) return;
-        
-        // 获取目标面板
-        const targetTab = tab.getAttribute('data-tab');
-        if (!targetTab) return;
-        
-        // 更新标签状态
-        tabGroup.querySelectorAll('.cosy\\:tab').forEach(t => {
-          t.classList.remove('cosy:tab-active');
-        });
-        tab.classList.add('cosy:tab-active');
-        
-        // 更新面板状态
-        contentContainer.querySelectorAll('.code-example-panel').forEach(panel => {
-          panel.classList.remove('active');
-        });
-        
-        const targetPanel = contentContainer.querySelector(`[data-panel="${targetTab}"]`);
-        if (targetPanel) {
-          targetPanel.classList.add('active');
-        }
-      });
-    });
-    
-    // 复制代码功能
-    const copyButtons = document.querySelectorAll('.cosy\\:btn-ghost');
-    
-    copyButtons.forEach(button => {
-      button.addEventListener('click', () => {
-        const codeBlock = button.closest('.cosy\\:bg-base-300');
-        if (!codeBlock) return;
-        
-        const codeElement = codeBlock.querySelector('code');
-        if (!codeElement) return;
-        
-        const code = codeElement.textContent || '';
-        
-        // 复制到剪贴板
-        navigator.clipboard.writeText(code).then(() => {
-          // 显示复制成功状态
-          button.classList.add('cosy:btn-success');
-          button.querySelector('.copy-icon')?.classList.add('cosy:hidden');
-          button.querySelector('.check-icon')?.classList.remove('cosy:hidden');
-          button.querySelector('.copy-text')?.classList.add('cosy:text-success');
-          
-          // 3秒后恢复原状
-          setTimeout(() => {
-            button.classList.remove('cosy:btn-success');
-            button.querySelector('.copy-icon')?.classList.remove('cosy:hidden');
-            button.querySelector('.check-icon')?.classList.add('cosy:hidden');
-            button.querySelector('.copy-text')?.classList.remove('cosy:text-success');
-          }, 3000);
-        });
-      });
-    });
-  }
-  
-  // 初始化
-  initializeCodeExample();
-  
-  // Astro 页面切换时重新初始化
-  document.addEventListener('astro:page-load', initializeCodeExample);
-</script> 
+	function initializeCodeExample() {
+		// 标签切换功能
+		const tabs = document.querySelectorAll('.cosy\\:tab');
+
+		tabs.forEach((tab) => {
+			tab.addEventListener('click', () => {
+				// 获取当前标签组
+				const tabGroup = tab.closest('.cosy\\:tabs');
+				if (!tabGroup) return;
+
+				const codeExample = tab.closest('.cosy\\:card');
+				if (!codeExample) return;
+
+				const contentContainer = codeExample.querySelector('.cosy\\:relative');
+				if (!contentContainer) return;
+
+				// 获取目标面板
+				const targetTab = tab.getAttribute('data-tab');
+				if (!targetTab) return;
+
+				// 更新标签状态
+				tabGroup.querySelectorAll('.cosy\\:tab').forEach((t) => {
+					t.classList.remove('cosy:tab-active');
+				});
+				tab.classList.add('cosy:tab-active');
+
+				// 更新面板状态
+				const panels = contentContainer.querySelectorAll('[data-panel]');
+				panels.forEach((panel) => {
+					if (panel.getAttribute('data-panel') === targetTab) {
+						panel.classList.remove('cosy:hidden');
+						panel.classList.add('cosy:block');
+					} else {
+						panel.classList.add('cosy:hidden');
+						panel.classList.remove('cosy:block');
+					}
+				});
+			});
+		});
+
+		// 复制代码功能
+		const copyButtons = document.querySelectorAll('.cosy\\:btn-ghost');
+
+		copyButtons.forEach((button) => {
+			button.addEventListener('click', () => {
+				const codeExample = button.closest('.cosy\\:card');
+				if (!codeExample) return;
+
+				const codePanel = codeExample.querySelector('[data-panel="code"]');
+				if (!codePanel) return;
+
+				const codeElement = codePanel.querySelector('code');
+				if (!codeElement) return;
+
+				const code = codeElement.textContent || '';
+
+				// 复制到剪贴板
+				navigator.clipboard.writeText(code).then(() => {
+					// 显示复制成功状态
+					button.classList.add('cosy:btn-success');
+					button.querySelector('.cosy\\:copy-icon')?.classList.add('cosy:hidden');
+					button.querySelector('.cosy\\:check-icon')?.classList.remove('cosy:hidden');
+					button.querySelector('.cosy\\:copy-text')?.classList.add('cosy:text-success');
+
+					// 3秒后恢复原状
+					setTimeout(() => {
+						button.classList.remove('cosy:btn-success');
+						button.querySelector('.cosy\\:copy-icon')?.classList.remove('cosy:hidden');
+						button.querySelector('.cosy\\:check-icon')?.classList.add('cosy:hidden');
+						button.querySelector('.cosy\\:copy-text')?.classList.remove('cosy:text-success');
+					}, 3000);
+				});
+			});
+		});
+	}
+
+	// 初始化
+	initializeCodeExample();
+
+	// Astro 页面切换时重新初始化
+	document.addEventListener('astro:page-load', initializeCodeExample);
+</script>

package/dist/components/display/Hero.astro

@@ -1,18 +1,18 @@
 ---
 /**
  * @component Hero
- * 
+ *
  * @description
  * Hero 组件是一个全屏的展示区域，通常用于网站的首页或重要页面的顶部。
  * 它提供了一个引人注目的视觉区域，可以包含标题、描述、图片和行动按钮。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 视觉冲击力 - 全屏展示，吸引用户注意
  * 2. 内容聚焦 - 清晰地传达核心信息
  * 3. 引导行动 - 通过链接按钮引导用户进行下一步操作
  * 4. 灵活布局 - 支持图片、标题、描述和自定义内容
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -25,7 +25,7 @@
  *   ]}
  * />
  * ```
- * 
+ *
  * 带图片的用法：
  * ```astro
  * <Hero
@@ -37,7 +37,7 @@
  *   ]}
  * />
  * ```
- * 
+ *
  * 带自定义内容的用法：
  * ```astro
  * <Hero
@@ -52,7 +52,7 @@
  *   </div>
  * </Hero>
  * ```
- * 
+ *
  * @props
  * @prop {string} title - Hero 区域的主标题
  * @prop {string} description - 标题下方的描述文本
@@ -62,11 +62,11 @@
  * @prop {Array<Link>} links - 链接按钮数组
  * @prop {string} links[].text - 链接按钮的文本
  * @prop {string} links[].href - 链接按钮的目标地址
+ * @prop {string} [background="gradient"] - 背景样式，可选值："gradient", "plain"
+ * @prop {string} [align="center"] - 内容对齐方式，可选值："center", "left", "right"
  */
 
-// 导入样式
 import '../../app.css';
-
 import Link from '../base/Link.astro';
 
 interface Link {
@@ -82,38 +82,118 @@ interface Props {
 		alt: string;
 	};
 	links: Link[];
+	background?: 'gradient' | 'plain';
+	align?: 'center' | 'left' | 'right';
 }
 
-const { title, description, image, links = [] } = Astro.props;
----
+const {
+	title,
+	description,
+	image,
+	links = [],
+	background = 'gradient',
+	align = 'center',
+} = Astro.props;
 
-<div class="hero-container">
-	<div class="hero-content">
-		{image && <img src={image.src} alt={image.alt} class="hero-image" />}
+const containerClasses = [
+	'hero',
+	'cosy:min-h-screen',
+	'cosy:w-full',
+	background === 'gradient'
+		? 'cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/20'
+		: 'cosy:bg-base-100',
+	'cosy:py-16',
+	'cosy:px-4',
+	'cosy:sm:px-6',
+	'cosy:lg:px-8',
+].join(' ');
 
-		<h2 class="hero-title">{title}</h2>
-		<p class="hero-description">
-			{description}
-		</p>
+const contentClasses = [
+	'hero-content',
+	'cosy:flex',
+	'cosy:flex-col',
+	align === 'center' ? 'cosy:text-center cosy:items-center' : '',
+	align === 'left' ? 'cosy:text-left cosy:items-start' : '',
+	align === 'right' ? 'cosy:text-right cosy:items-end' : '',
+	'cosy:max-w-7xl',
+	'cosy:mx-auto',
+	'cosy:gap-10',
+	'cosy:lg:flex-row',
+	'cosy:lg:gap-16',
+].join(' ');
 
-		<div class="hero-app">
-			<slot name="app" />
-		</div>
+const titleClasses = [
+	'cosy:text-5xl',
+	'cosy:font-bold',
+	'cosy:mb-4',
+	'cosy:sm:text-6xl',
+	'cosy:lg:text-7xl',
+	'cosy:text-primary',
+].join(' ');
+
+const descriptionClasses = ['cosy:text-xl', 'cosy:opacity-80', 'cosy:max-w-3xl', 'cosy:mb-8'].join(
+	' '
+);
+
+const imageClasses = [
+	'cosy:max-w-sm',
+	'cosy:rounded-lg',
+	'cosy:shadow-2xl',
+	'cosy:lg:max-w-md',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:hover:scale-105',
+	'cosy:hover:shadow-primary/20',
+].join(' ');
+
+const linksContainerClasses = [
+	'cosy:flex',
+	'cosy:flex-wrap',
+	'cosy:gap-4',
+	align === 'center' ? 'cosy:justify-center' : '',
+	align === 'left' ? 'cosy:justify-start' : '',
+	align === 'right' ? 'cosy:justify-end' : '',
+	'cosy:mt-4',
+].join(' ');
+
+const appContainerClasses = ['cosy:w-full', 'cosy:max-w-3xl', 'cosy:mx-auto', 'cosy:my-8'].join(
+	' '
+);
+---
+
+<div class={containerClasses}>
+	<div class={contentClasses}>
+		{
+			image && (
+				<div class="cosy:order-1 cosy:lg:order-2">
+					<img class={imageClasses} src={image.src} alt={image.alt} />
+				</div>
+			)
+		}
+
+		<div class="cosy:order-2 cosy:lg:order-1 cosy:flex cosy:flex-col">
+			<h2 class={titleClasses}>{title}</h2>
+			<p class={descriptionClasses}>
+				{description}
+			</p>
 
-		<div class="hero-links">
 			{
-				links.map((link: Link) => (
-					<Link
-						href={link.href}
-						external
-						variant="cta"
-						animation="hover-lift"
-						size="lg"
-					>
-						{link.text}
-					</Link>
-				))
+				Astro.slots.has('app') && (
+					<div class={appContainerClasses}>
+						<slot name="app" />
+					</div>
+				)
 			}
+
+			<div class={linksContainerClasses}>
+				{
+					links.map((link: Link) => (
+						<Link href={link.href} external variant="cta" animation="hover-lift" size="lg">
+							{link.text}
+						</Link>
+					))
+				}
+			</div>
 		</div>
 	</div>
 </div>

package/dist/components/layouts/DocumentationLayout.astro

@@ -230,6 +230,12 @@ export interface Props {
 	 */
 	basePath?: string;
 
+	/**
+	 * Header 组件的高度
+	 * @default "md"
+	 */
+	headerHeight?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 	/**
 	 * 页脚相关配置
 	 */
@@ -376,6 +382,7 @@ const {
 	languages,
 	currentLocale,
 	basePath = '',
+	headerHeight = 'md',
 	footerHomeLink,
 	footerSlogan,
 	footerCompany,
@@ -406,6 +413,18 @@ const currentPath = Astro.url.pathname;
 
 // 获取有效的语言代码
 const validLang = getValidLanguage(currentLocale);
+
+// 根据header高度设置侧边栏top值
+const sidebarTopClasses = {
+	'3xs': 'cosy:top-4',
+	'2xs': 'cosy:top-6',
+	xs: 'cosy:top-8',
+	sm: 'cosy:top-10',
+	md: 'cosy:top-12',
+	lg: 'cosy:top-16',
+	xl: 'cosy:top-20',
+};
+const sidebarTopClass = sidebarTopClasses[headerHeight];
 ---
 
 <BaseLayout
@@ -430,14 +449,15 @@ const validLang = getValidLanguage(currentLocale);
 				basePath={basePath}
 				showSidebarToggle={true}
 				defaultSidebarOpen={defaultSidebarOpen}
+				height={headerHeight}
 			/>
 		)
 	}
 
 	<div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:flex-1">
-		<div class="cosy:flex cosy:flex-row cosy:flex-1 cosy:min-h-screen cosy:pb-96">
+		<div class="cosy:flex cosy:flex-row cosy:flex-1 cosy:pb-0 cosy:min-h-screen">
 			<!-- 侧边栏容器 -->
-			<div class="cosy:top-16 cosy:z-10 cosy:sticky cosy:bg-base-100 cosy:h-screen">
+			<div class={`${sidebarTopClass} cosy:z-10 cosy:sticky cosy:bg-base-100 cosy:h-screen`}>
 				<Sidebar
 					sidebarItems={sidebarItems}
 					currentPath={currentPath}
@@ -449,7 +469,8 @@ const validLang = getValidLanguage(currentLocale);
 			<!-- 主内容区域 -->
 			<Main class="cosy:lg:py-8 cosy:py-4 cosy:w-full">
 				<div class="cosy:mx-auto cosy:px-4 lg:cosy:px-8 cosy:container">
-					<div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:justify-center cosy:gap-8">
+					<div
+						class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:justify-center cosy:gap-8 cosy:pb-96">
 						<Article class="cosy:flex-1 xl:cosy:w-[calc(100%-16rem)]">
 							<slot />
 						</Article>