@coffic/cosy-ui 0.3.39 → 0.3.45

package/dist/components/display/Banner.astro

@@ -1,40 +1,40 @@
 ---
 /**
  * @component Banner
- * 
+ *
  * @description
  * Banner 组件用于在页面中展示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
  * 组件设计简洁大方，具有平滑的动画效果，能够吸引用户注意力。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 视觉冲击力 - 使用大号字体和醒目的背景，确保信息能够被用户注意到
  * 2. 简洁明了 - 简单的布局和充足的留白，让信息更容易被理解
  * 3. 动态效果 - 使用淡入和上滑动画，增强用户体验
  * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可读性
- * 
+ *
  * 视觉特点：
  * - 圆角设计：柔和的视觉效果
  * - 悬停效果：轻微放大和阴影增强，提供交互反馈
  * - 动画效果：淡入和上滑动画，增强视觉吸引力
  * - 模糊背景：半透明背景配合模糊效果，现代感强
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <Banner>欢迎使用我们的服务</Banner>
  * ```
- * 
+ *
  * 在页脚中使用：
  * ```astro
  * <footer>
  *   <Banner>构建美好的数字体验</Banner>
  * </footer>
  * ```
- * 
+ *
  * @slots
  * @slot default - Banner 中显示的文本内容
- * 
+ *
  * @accessibility
  * - 使用适当的字体大小和行高，确保文本可读性
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
@@ -42,16 +42,104 @@
 
 // 导入样式
 import '../../app.css';
+
+interface Props {
+	/**
+	 * 自定义CSS类，可用于覆盖默认样式
+	 */
+	class?: string;
+
+	/**
+	 * 背景颜色，默认为primary
+	 */
+	bgColor?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+
+	/**
+	 * 文本颜色，默认根据背景色自动设置
+	 */
+	textColor?: string;
+
+	/**
+	 * 是否启用动画效果，默认为true
+	 */
+	animated?: boolean;
+}
+
+const { class: className = '', bgColor = 'primary', textColor = '', animated = true } = Astro.props;
+
+// 根据背景色自动设置文本颜色
+const getTextColorClass = () => {
+	if (textColor) return `cosy:text-${textColor}`;
+
+	// 对于深色背景，使用白色文本
+	const darkBgColors = ['primary', 'secondary', 'accent', 'error'];
+	return darkBgColors.includes(bgColor) ? 'cosy:text-white' : 'cosy:text-gray-800';
+};
+
+// 组合CSS类
+const bannerClasses = [
+	'cosy:w-full',
+	'cosy:py-8',
+	'cosy:px-4',
+	'cosy:rounded-lg',
+	'cosy:text-center',
+	'cosy:text-2xl',
+	'cosy:md:text-3xl',
+	'cosy:font-bold',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:ease-in-out',
+	'cosy:backdrop-blur-sm',
+	'cosy:bg-opacity-90',
+	'cosy:shadow-md',
+	'cosy:hover:shadow-lg',
+	'cosy:hover:scale-[1.01]',
+	`cosy:bg-${bgColor}`,
+	getTextColorClass(),
+	className,
+].join(' ');
+
+// 动画类
+const animationClasses = animated ? 'cosy:animate-fadeIn cosy:animate-slideUp' : '';
 ---
 
-<div class="banner-container">
-	<div class="banner">
-		<div class="banner-content">
-			<div class="banner-text">
-				<p class="banner-message">
-					<slot />
-				</p>
-			</div>
-		</div>
-	</div>
+<div class={`${bannerClasses} ${animationClasses}`}>
+	<slot />
 </div>
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			transform: translateY(20px);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
+
+	/* 动画类 */
+	.cosy\:animate-fadeIn {
+		animation: fadeIn 0.8s ease-in-out;
+	}
+
+	.cosy\:animate-slideUp {
+		animation: slideUp 0.5s ease-out;
+	}
+
+	/* 尊重用户的减少动画偏好 */
+	@media (prefers-reduced-motion: reduce) {
+		.cosy\:animate-fadeIn,
+		.cosy\:animate-slideUp {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/display/Card.astro

@@ -1,66 +1,67 @@
 ---
 /**
  * @component Card
- * 
+ *
  * @description
  * Card 组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。
  * 组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 视觉层次感 - 通过阴影、悬停效果和微妙的动画创造深度感
  * 2. 内容聚焦 - 简洁的布局让用户关注卡片内容
  * 3. 交互反馈 - 悬停和点击时提供明确的视觉反馈
  * 4. 适应性强 - 响应式设计，适应不同屏幕尺寸
- * 
+ *
  * 视觉特点：
  * - 半透明背景：现代感强，适合叠加在各种背景上
  * - 模糊效果：背景模糊增强内容可读性
  * - 光效设计：顶部有微妙的光晕效果，增强立体感
  * - 悬停动画：轻微放大和阴影增强，提供交互反馈
  * - 图片缩放：图片在悬停时轻微放大，增强视觉吸引力
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
- * <Card 
- *   title="卡片标题" 
+ * <Card
+ *   title="卡片标题"
  *   subtitle="卡片描述文本"
  * >
  *   卡片内容
  * </Card>
  * ```
- * 
+ *
  * 带图片的卡片：
  * ```astro
- * <Card 
- *   title="产品名称" 
- *   subtitle="产品描述" 
+ * <Card
+ *   title="产品名称"
+ *   subtitle="产品描述"
  *   imageUrl="/path/to/image.jpg"
  * >
  *   其他产品信息
  * </Card>
  * ```
- * 
+ *
  * 可点击的卡片（链接）：
  * ```astro
- * <Card 
- *   title="文章标题" 
- *   subtitle="文章摘要" 
+ * <Card
+ *   title="文章标题"
+ *   subtitle="文章摘要"
  *   imageUrl="/path/to/image.jpg"
  *   href="/articles/article-slug"
  * />
  * ```
- * 
+ *
  * @props
  * @prop {string} [title] - 卡片标题
  * @prop {string} [subtitle] - 卡片副标题或描述
  * @prop {string} [imageUrl] - 卡片顶部图片的URL
  * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
- * 
+ * @prop {string} [class] - 自定义CSS类，可用于覆盖默认样式
+ *
  * @slots
  * @slot default - 卡片的主要内容区域
- * 
+ *
  * @accessibility
  * - 使用语义化HTML结构
  * - 当作为链接使用时，确保提供有意义的文本内容
@@ -71,65 +72,95 @@
 import '../../app.css';
 
 interface Props {
-    title?: string;
-    subtitle?: string;
-    imageUrl?: string;
-    href?: string;
+	title?: string;
+	subtitle?: string;
+	imageUrl?: string;
+	href?: string;
+	class?: string;
 }
 
-const { title, subtitle, imageUrl, href } = Astro.props;
+const { title, subtitle, imageUrl, href, class: className = '' } = Astro.props;
+
+// 定义动画的CSS类
+const fadeInAnimation = 'cosy:animate-fadeIn';
+
+// 定义卡片的CSS类
+const cardClasses = [
+	'cosy:bg-base-100',
+	'cosy:bg-opacity-70',
+	'cosy:backdrop-blur-sm',
+	'cosy:rounded-xl',
+	'cosy:shadow-md',
+	'cosy:overflow-hidden',
+	'cosy:transition-all',
+	'cosy:duration-300',
+	'cosy:ease-in-out',
+	'cosy:hover:shadow-lg',
+	'cosy:hover:scale-[1.02]',
+	className,
+].join(' ');
+
+// 定义卡片内容的CSS类
+const cardBodyClasses = [
+	'cosy:p-6',
+	'cosy:flex',
+	'cosy:flex-col',
+	'cosy:gap-4',
+	href && 'cosy:cursor-pointer',
+]
+	.filter(Boolean)
+	.join(' ');
+
+// 定义图片容器的CSS类
+const figureClasses = 'cosy:overflow-hidden cosy:mb-4 cosy:-mx-6 cosy:-mt-6';
+
+// 定义图片的CSS类
+const imageClasses =
+	'cosy:w-full cosy:h-auto cosy:object-cover cosy:transition-transform cosy:duration-300 cosy:group-hover:scale-105';
+
+// 定义标题的CSS类
+const titleClasses = 'cosy:text-xl cosy:font-bold cosy:mb-2';
+
+// 定义描述的CSS类
+const subtitleClasses = 'cosy:text-base cosy:text-gray-600 cosy:dark:text-gray-300';
 ---
 
-<div class="group perspective-1000">
-    <div class:list={[
-        "card",
-        href && "cursor-pointer",
-        "motion-safe:animate-fadeIn"
-    ]}>
-        {href ? (
-            <a href={href} class="card-body">
-                {imageUrl && (
-                    <figure>
-                        <img
-                            src={imageUrl}
-                            alt={title}
-                        />
-                    </figure>
-                )}
-                {title && (
-                    <h2 class="card-title">
-                        {title}
-                    </h2>
-                )}
-                {subtitle && (
-                    <p>
-                        {subtitle}
-                    </p>
-                )}
-                <slot />
-            </a>
-        ) : (
-            <div class="card-body">
-                {imageUrl && (
-                    <figure>
-                        <img
-                            src={imageUrl}
-                            alt={title}
-                        />
-                    </figure>
-                )}
-                {title && (
-                    <h2 class="card-title">
-                        {title}
-                    </h2>
-                )}
-                {subtitle && (
-                    <p>
-                        {subtitle}
-                    </p>
-                )}
-                <slot />
-            </div>
-        )}
-    </div>
-</div> 
+<div class="cosy:group cosy:perspective-1000">
+	<div class={cardClasses}>
+		{
+			href ? (
+				<a href={href} class={cardBodyClasses}>
+					{imageUrl && (
+						<figure class={figureClasses}>
+							<img src={imageUrl} alt={title} class={imageClasses} />
+						</figure>
+					)}
+					{title && <h2 class={titleClasses}>{title}</h2>}
+					{subtitle && <p class={subtitleClasses}>{subtitle}</p>}
+					<slot />
+				</a>
+			) : (
+				<div class={cardBodyClasses}>
+					{imageUrl && (
+						<figure class={figureClasses}>
+							<img src={imageUrl} alt={title} class={imageClasses} />
+						</figure>
+					)}
+					{title && <h2 class={titleClasses}>{title}</h2>}
+					{subtitle && <p class={subtitleClasses}>{subtitle}</p>}
+					<slot />
+				</div>
+			)
+		}
+	</div>
+</div>
+
+<style>
+	/* 为了确保prefers-reduced-motion生效 */
+	@media (prefers-reduced-motion: reduce) {
+		.cosy\:hover\:scale-\[1\.02\]:hover,
+		.cosy\:group-hover\:scale-105 {
+			transform: none !important;
+		}
+	}
+</style>

package/dist/components/display/CodeBlock.astro

@@ -1,46 +1,46 @@
 ---
 /**
  * @component CodeBlock
- * 
+ *
  * @description
  * CodeBlock 组件用于在页面中展示格式化的代码片段，支持语法高亮、行号显示和代码复制功能。
  * 组件设计简洁美观，提供良好的代码可读性和用户交互体验。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 可读性优先 - 清晰的字体、合适的间距和语法高亮，确保代码易于阅读
  * 2. 功能完备 - 支持行号显示、代码复制等实用功能
  * 3. 视觉一致性 - 与整体设计系统保持一致的视觉风格
  * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可用性
- * 
+ *
  * 视觉特点：
  * - 语法高亮：使用北欧风格的配色方案，柔和且易于阅读
  * - 行号显示：可选的行号显示，帮助定位代码位置
  * - 标题栏：可选的标题栏，显示文件名或代码类型
  * - 复制按钮：便捷的代码复制功能，带有状态反馈
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * <CodeBlock code={`console.log('Hello, world!');`} lang="js" />
  * ```
- * 
+ *
  * 带标题和行号：
  * ```astro
- * <CodeBlock 
+ * <CodeBlock
  *   code={`function greet(name) {\n  return 'Hello, ' + name + '!';\n}`}
  *   lang="js"
  *   title="greeting.js"
  *   showLineNumbers={true}
  * />
  * ```
- * 
+ *
  * @props
  * @prop {string} code - 要显示的代码字符串
  * @prop {string} [lang="plaintext"] - 代码语言，用于语法高亮
  * @prop {string} [title] - 代码块的标题，通常是文件名
  * @prop {boolean} [showLineNumbers=true] - 是否显示行号
- * 
+ *
  * @accessibility
  * - 使用语义化HTML结构
  * - 复制按钮提供清晰的视觉反馈
@@ -51,18 +51,13 @@
 import '../../app.css';
 
 interface Props {
-  code: string;
-  lang?: string;
-  title?: string;
-  showLineNumbers?: boolean;
+	code: string;
+	lang?: string;
+	title?: string;
+	showLineNumbers?: boolean;
 }
 
-const {
-  code,
-  lang = 'plaintext',
-  title,
-  showLineNumbers = true,
-} = Astro.props;
+const { code, lang = 'plaintext', title, showLineNumbers = true } = Astro.props;
 
 // 移除代码字符串开头和结尾的空行
 const trimmedCode = code.trim();
@@ -72,76 +67,88 @@ const lines = trimmedCode.split('\n');
 const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
 ---
 
-<div class="code-block not-prose">
-  {/* 标题栏 */}
-  {title && (
-    <div class="code-block-header">
-      <span class="code-block-title">{title}</span>
-      <button
-        class="copy-button"
-        data-code={trimmedCode}
-        title="复制代码"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-        </svg>
-        <span class="copy-text">复制</span>
-      </button>
-    </div>
-  )}
+<div class="cosy:border cosy:border-base-300 cosy:rounded-lg cosy:overflow-hidden cosy:not-prose">
+	{/* 标题栏 */}
+	{
+		title && (
+			<div class="cosy:flex cosy:justify-between cosy:items-center cosy:bg-base-200 cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300">
+				<span class="cosy:font-medium cosy:text-base-content">{title}</span>
+				<button
+					class="cosy:flex cosy:items-center cosy:gap-1 cosy:hover:bg-base-300 cosy:px-2 cosy:py-1 cosy:rounded-md cosy:text-sm cosy:text-base-content cosy:transition-colors"
+					data-code={trimmedCode}
+					title="复制代码">
+					<svg
+						class="cosy:w-4 cosy:h-4"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor">
+						<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+					</svg>
+					<span class="cosy:copy-text">复制</span>
+				</button>
+			</div>
+		)
+	}
 
-  {/* 代码区域 */}
-  <div class="code-content">
-    {/* 行号 */}
-    {showLineNumbers && (
-      <div class="line-numbers">
-        {lineNumbers.map(num => (
-          <div class="line-number">{num}</div>
-        ))}
-      </div>
-    )}
+	{/* 代码区域 */}
+	<div class="cosy:flex cosy:overflow-auto">
+		{/* 行号 */}
+		{
+			showLineNumbers && (
+				<div class="cosy:flex cosy:flex-col cosy:bg-base-100 cosy:py-2 cosy:pr-2 cosy:pl-3 cosy:border-r cosy:border-base-300 cosy:text-base-content cosy:text-right cosy:text-opacity-50 cosy:select-none">
+					{lineNumbers.map((num) => (
+						<div class="cosy:font-mono cosy:text-xs cosy:leading-5">{num}</div>
+					))}
+				</div>
+			)
+		}
 
-    {/* 代码内容 */}
-    <pre class:list={["language-" + lang, { "with-line-numbers": showLineNumbers }]}>
-      <code class={"language-" + lang} set:html={trimmedCode} />
+		{/* 代码内容 */}
+		<pre
+			class:list={[
+				'cosy:p-2 cosy:overflow-auto cosy:font-mono cosy:text-sm cosy:bg-base-100 cosy:text-base-content cosy:w-full',
+				{ 'cosy:pl-0': showLineNumbers },
+			]}>
+      <code class="cosy:block cosy:font-mono" set:html={trimmedCode} />
     </pre>
-  </div>
+	</div>
 </div>
 
 <script>
-  function initializeCopyButtons() {
-    const copyButtons = document.querySelectorAll('.copy-button');
-    
-    copyButtons.forEach(button => {
-      button.addEventListener('click', async () => {
-        const code = button.getAttribute('data-code') || '';
-        const copyText = button.querySelector('.copy-text');
-        
-        try {
-          await navigator.clipboard.writeText(code);
-          if (copyText) {
-            copyText.textContent = '已复制！';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        } catch (err) {
-          console.error('复制失败:', err);
-          if (copyText) {
-            copyText.textContent = '复制失败';
-            setTimeout(() => {
-              copyText.textContent = '复制';
-            }, 2000);
-          }
-        }
-      });
-    });
-  }
+	function initializeCopyButtons() {
+		const copyButtons = document.querySelectorAll('.cosy\\:flex.cosy\\:items-center.cosy\\:gap-1');
 
-  // 在页面加载时初始化
-  initializeCopyButtons();
+		copyButtons.forEach((button) => {
+			button.addEventListener('click', async () => {
+				const code = button.getAttribute('data-code') || '';
+				const copyText = button.querySelector('.cosy\\:copy-text');
 
-  // 在 Astro 页面切换时重新初始化
-  document.addEventListener('astro:page-load', initializeCopyButtons);
-</script> 
+				try {
+					await navigator.clipboard.writeText(code);
+					if (copyText) {
+						copyText.textContent = '已复制！';
+						setTimeout(() => {
+							copyText.textContent = '复制';
+						}, 2000);
+					}
+				} catch (err) {
+					console.error('复制失败:', err);
+					if (copyText) {
+						copyText.textContent = '复制失败';
+						setTimeout(() => {
+							copyText.textContent = '复制';
+						}, 2000);
+					}
+				}
+			});
+		});
+	}
+
+	// 在页面加载时初始化
+	initializeCopyButtons();
+
+	// 在 Astro 页面切换时重新初始化
+	document.addEventListener('astro:page-load', initializeCopyButtons);
+</script>