@coffic/cosy-ui 0.3.48 → 0.3.53

package/dist/components/containers/Main.astro

@@ -1,45 +1,45 @@
 ---
 /**
  * @component Main
- * 
+ *
  * @description
  * Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。
  * 它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 结构清晰 - 明确表示页面的主要内容区域，提高语义化
  * 2. 响应式布局 - 在不同屏幕尺寸下自动调整内边距和宽度
  * 3. 灵活配置 - 支持自定义容器尺寸、内边距和背景颜色
  * 4. 与容器集成 - 无缝集成 Container 组件，保持布局一致性
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * ---
  * import { Main } from '@coffic/cosy-ui';
  * ---
- * 
+ *
  * <Main>
  *   <h1>页面标题</h1>
  *   <p>页面内容</p>
  * </Main>
  * ```
- * 
+ *
  * 自定义容器尺寸：
  * ```astro
  * <Main size="lg">
  *   <p>这是一个较宽的主内容区域</p>
  * </Main>
  * ```
- * 
+ *
  * 自定义内边距：
  * ```astro
  * <Main verticalPadding="lg" padding="xl">
  *   <p>这个主内容区域有更大的内边距</p>
  * </Main>
  * ```
- * 
+ *
  * 自定义背景颜色：
  * ```astro
  * <Main backgroundColor="primary">
@@ -54,114 +54,109 @@ import Container from './Container.astro';
 import '../../app.css';
 
 export interface Props {
-  /**
-   * 容器大小
-   * @default "md"
-   */
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
-  
-  /**
-   * 水平内边距（通过 Container 组件的 padding 属性设置）
-   * @default "md"
-   */
-  padding?: "none" | "sm" | "md" | "lg" | "xl";
-  
-  /**
-   * 垂直内边距
-   * @default "md"
-   */
-  verticalPadding?: "none" | "sm" | "md" | "lg" | "xl" | string;
-  
-  /**
-   * 是否居中显示内容
-   * @default true
-   */
-  centered?: boolean;
-  
-  /**
-   * 背景颜色
-   * @default undefined
-   */
-  backgroundColor?: "primary" | "secondary" | "tertiary" | "light" | "dark" | string;
-  
-  /**
-   * HTML id 属性
-   */
-  id?: string;
-  
-  /**
-   * 类名
-   */
-  class?: string;
-  
-  /**
-   * 类名列表
-   */
-  'class:list'?: any;
+	/**
+	 * 容器大小
+	 * @default "md"
+	 */
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+	/**
+	 * 水平内边距（通过 Container 组件的 padding 属性设置）
+	 * @default "md"
+	 */
+	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+	/**
+	 * 垂直内边距
+	 * @default "md"
+	 */
+	verticalPadding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+
+	/**
+	 * 是否居中显示内容
+	 * @default true
+	 */
+	centered?: boolean;
+
+	/**
+	 * 背景颜色
+	 * @default undefined
+	 */
+	backgroundColor?: 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | string;
+
+	/**
+	 * HTML id 属性
+	 */
+	id?: string;
+
+	/**
+	 * 类名
+	 */
+	class?: string;
+
+	/**
+	 * 类名列表
+	 */
+	'class:list'?: any;
 }
 
 const {
-  size = 'md',
-  padding = 'md',
-  verticalPadding = "md",
-  centered = true,
-  backgroundColor,
-  id,
-  class: className,
-  'class:list': classList,
-  ...rest
+	size = 'md',
+	padding = 'md',
+	verticalPadding = 'md',
+	centered = true,
+	backgroundColor,
+	id,
+	class: className,
+	'class:list': classList,
+	...rest
 } = Astro.props;
 
-// 处理垂直内边距
-const verticalPaddingClass = 
-  verticalPadding === "none" || verticalPadding === "sm" || 
-  verticalPadding === "md" || verticalPadding === "lg" || 
-  verticalPadding === "xl" 
-    ? `main-padding-${verticalPadding}` 
-    : "main-padding-custom";
-
-// 处理背景颜色
-const bgColorClass = backgroundColor && 
-  (backgroundColor === "primary" || backgroundColor === "secondary" || 
-   backgroundColor === "tertiary" || backgroundColor === "light" || 
-   backgroundColor === "dark")
-    ? `main-bg-${backgroundColor}`
-    : "";
+// 获取垂直内边距的Tailwind类
+function getVerticalPaddingClasses(padding: string) {
+	if (padding === 'none') return 'cosy:py-0';
+	if (padding === 'sm') return 'cosy:py-2';
+	if (padding === 'md') return 'cosy:py-4';
+	if (padding === 'lg') return 'cosy:py-6';
+	if (padding === 'xl') return 'cosy:py-8';
+	return ''; // 对于自定义padding，使用内联样式
+}
+
+// 获取背景颜色的Tailwind类
+function getBgColorClasses(color: string | undefined) {
+	if (!color) return '';
+	if (color === 'primary') return 'cosy:bg-primary';
+	if (color === 'secondary') return 'cosy:bg-secondary';
+	if (color === 'tertiary') return 'cosy:bg-accent';
+	if (color === 'light') return 'cosy:bg-base-100';
+	if (color === 'dark') return 'cosy:bg-base-300';
+	return ''; // 对于自定义颜色，使用内联样式
+}
+
+const verticalPaddingClass = getVerticalPaddingClasses(verticalPadding as string);
+const bgColorClass = getBgColorClasses(backgroundColor);
 
 // 构建自定义样式
-const customStyle = 
-  (verticalPadding && verticalPaddingClass === "main-padding-custom") 
-    ? `padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};` 
-    : "";
-
-const customBgColor = 
-  (backgroundColor && !bgColorClass) 
-    ? `background-color: ${backgroundColor};` 
-    : "";
-
-const inlineStyle = (customStyle || customBgColor) 
-  ? `${customStyle} ${customBgColor}`.trim() 
-  : undefined;
+const customStyle = [];
+
+// 只有当没有对应的Tailwind类时，才使用内联样式
+if (!verticalPaddingClass && verticalPadding && verticalPadding !== 'none') {
+	customStyle.push(`padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};`);
+}
+
+if (!bgColorClass && backgroundColor) {
+	customStyle.push(`background-color: ${backgroundColor};`);
+}
+
+const inlineStyle = customStyle.length > 0 ? customStyle.join(' ') : undefined;
 ---
 
 <main
-  id={id}
-  class:list={[
-    "main-content",
-    verticalPaddingClass,
-    bgColorClass,
-    className,
-    classList
-  ]}
-  style={inlineStyle}
-  {...rest}
->
-  <Container
-    size={size}
-    padding={padding}
-    centered={centered}
-    class="main-container"
-  >
-    <slot />
-  </Container>
-</main> 
+	id={id}
+	class:list={['cosy:w-full', verticalPaddingClass, bgColorClass, className, classList]}
+	style={inlineStyle}
+	{...rest}>
+	<Container size={size} padding={padding} centered={centered}>
+		<slot />
+	</Container>
+</main>

package/dist/components/data-display/ProductCard.astro

@@ -0,0 +1,318 @@
+---
+/**
+ * @component ProductCard
+ *
+ * @description
+ * ProductCard 组件用于展示产品信息，包括产品名称、图片、描述、App Store链接和产品官网链接。
+ * 组件采用卡片式设计，支持悬停效果，并提供链接到产品相关页面的功能。
+ * 支持多种尺寸选项：xs, sm, md, lg, xl
+ *
+ * @design
+ * 设计理念：
+ * 1. 产品展示 - 突出展示产品的关键信息和图片
+ * 2. 链接跳转 - 提供App Store和产品官网链接
+ * 3. 视觉一致性 - 使用卡片组件确保与整体设计风格一致
+ * 4. 交互反馈 - 悬停时提供视觉反馈，增强用户体验
+ * 5. 尺寸灵活 - 提供多种预设尺寸，适应不同场景需求
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <ProductCard
+ *   name="产品名称"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ *   productUrl="https://product-website.com"
+ * />
+ * ```
+ *
+ * 包含App Store链接：
+ * ```astro
+ * <ProductCard
+ *   name="产品名称"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ *   appStoreUrl="https://apps.apple.com/app/product"
+ *   productUrl="https://product-website.com"
+ * />
+ * ```
+ *
+ * 使用不同尺寸：
+ * ```astro
+ * <ProductCard
+ *   size="sm"
+ *   name="小尺寸产品卡片"
+ *   image="/images/products/product1.jpg"
+ *   description="产品简短描述文本"
+ * />
+ * ```
+ */
+
+import Link from '../base/Link.astro';
+import Image from '../base/Image.astro';
+import SocialIcon from '../icons/SocialIcon.astro';
+
+// 导入样式
+import '../../app.css';
+
+// 自定义图片元数据接口，替代 astro 的 ImageMetadata
+interface CustomImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: string;
+}
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface Props {
+	/**
+	 * 产品名称
+	 */
+	name: string;
+	/**
+	 * 产品图片
+	 */
+	image: CustomImageMetadata | string;
+	/**
+	 * 产品描述
+	 */
+	description: string;
+	/**
+	 * App Store链接
+	 */
+	appStoreUrl?: string;
+	/**
+	 * 产品官网链接
+	 */
+	productUrl?: string;
+	/**
+	 * GitHub仓库链接
+	 */
+	githubUrl?: string;
+	/**
+	 * 卡片尺寸
+	 * - xs: 超小尺寸，适合密集布局
+	 * - sm: 小尺寸，适合列表
+	 * - md: 中等尺寸，默认
+	 * - lg: 大尺寸，适合突出显示
+	 * - xl: 超大尺寸，适合特色产品
+	 */
+	size?: Size;
+	/**
+	 * 主按钮文本（产品官网按钮）
+	 */
+	primaryButtonText?: string;
+	/**
+	 * 次按钮文本（App Store按钮）
+	 */
+	secondaryButtonText?: string;
+	/**
+	 * GitHub按钮文本
+	 */
+	githubButtonText?: string;
+	/**
+	 * 按钮布局方向
+	 * - row: 水平布局（默认）
+	 * - column: 垂直布局
+	 */
+	buttonLayout?: 'row' | 'column';
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const {
+	name,
+	image,
+	description,
+	appStoreUrl,
+	productUrl,
+	githubUrl,
+	size = 'md',
+	primaryButtonText = '访问官网',
+	secondaryButtonText = 'App Store',
+	githubButtonText = 'GitHub',
+	buttonLayout = 'row',
+	class: className = '',
+} = Astro.props;
+
+// 尺寸样式映射
+const sizeStyles = {
+	xs: {
+		card: 'cosy:max-w-[200px]',
+		figure: 'cosy:p-2',
+		image: {
+			width: 150,
+			height: 100,
+		},
+		title: 'cosy:text-sm',
+		description: 'cosy:text-xs cosy:line-clamp-2',
+		buttons: 'cosy:text-xs cosy:btn-xs',
+		padding: 'cosy:px-3 cosy:py-2',
+	},
+	sm: {
+		card: 'cosy:max-w-[250px]',
+		figure: 'cosy:p-3',
+		image: {
+			width: 200,
+			height: 133,
+		},
+		title: 'cosy:text-base',
+		description: 'cosy:text-sm cosy:line-clamp-3',
+		buttons: 'cosy:text-sm cosy:btn-sm',
+		padding: 'cosy:px-4 cosy:py-3',
+	},
+	md: {
+		card: 'cosy:max-w-[320px]',
+		figure: 'cosy:p-4',
+		image: {
+			width: 300,
+			height: 200,
+		},
+		title: 'cosy:text-xl',
+		description: 'cosy:text-base',
+		buttons: '',
+		padding: 'cosy:px-6 cosy:py-4',
+	},
+	lg: {
+		card: 'cosy:max-w-[400px]',
+		figure: 'cosy:p-5',
+		image: {
+			width: 380,
+			height: 253,
+		},
+		title: 'cosy:text-2xl',
+		description: 'cosy:text-lg',
+		buttons: 'cosy:text-base cosy:btn-lg',
+		padding: 'cosy:px-7 cosy:py-5',
+	},
+	xl: {
+		card: 'cosy:max-w-[500px]',
+		figure: 'cosy:p-6',
+		image: {
+			width: 480,
+			height: 320,
+		},
+		title: 'cosy:text-3xl',
+		description: 'cosy:text-xl',
+		buttons: 'cosy:text-lg cosy:btn-lg',
+		padding: 'cosy:px-8 cosy:py-6',
+	},
+};
+
+const currentSize = sizeStyles[size];
+
+// 计算按钮布局类名，根据按钮数量和布局方向调整
+const getButtonLayoutClass = () => {
+	let count = 0;
+	if (productUrl) count++;
+	if (appStoreUrl) count++;
+	if (githubUrl) count++;
+
+	// 垂直布局时所有按钮都是全宽
+	if (buttonLayout === 'column') {
+		return 'cosy:w-full';
+	}
+
+	// 水平布局时根据按钮数量选择合适的布局类
+	switch (count) {
+		case 1:
+			return 'cosy:w-full'; // 单个按钮占满一行
+		case 2:
+			return 'cosy:flex-1'; // 两个按钮平分
+		case 3:
+			return 'cosy:flex-1'; // 三个按钮平分
+		default:
+			return '';
+	}
+};
+
+const buttonLayoutClass = getButtonLayoutClass();
+const buttonsContainerClass =
+	buttonLayout === 'column'
+		? 'cosy:flex cosy:flex-col cosy:gap-2 cosy:mt-auto'
+		: 'cosy:flex cosy:flex-wrap cosy:gap-2 cosy:mt-auto';
+---
+
+<div
+	class:list={[
+		'cosy:card cosy:bg-base-100 cosy:shadow-md cosy:hover:shadow-lg cosy:transition-shadow cosy:duration-300',
+		currentSize.card,
+		className,
+	]}>
+	<figure class:list={[currentSize.figure]}>
+		<Image
+			src={image}
+			alt={`${name} product image`}
+			width={currentSize.image.width}
+			height={currentSize.image.height}
+			rounded="lg"
+			transition="fade"
+			hover="brightness"
+			class="cosy:object-cover cosy:w-full"
+			loading="lazy"
+			showError={true}
+		/>
+	</figure>
+	<div class:list={[currentSize.padding, 'cosy:card-body']}>
+		<h2 class:list={['cosy:mb-2 cosy:font-bold cosy:card-title', currentSize.title]}>{name}</h2>
+		<p class:list={['cosy:mb-4', currentSize.description]}>{description}</p>
+
+		<div class={buttonsContainerClass}>
+			{
+				productUrl && (
+					<Link
+						href={productUrl}
+						external
+						variant="primary"
+						class:list={[
+							'cosy:btn cosy:bg-[#4468e3] cosy:hover:bg-[#3857cc] cosy:border-0',
+							'cosy:text-white cosy:font-bold cosy:shadow-sm',
+							buttonLayoutClass,
+							currentSize.buttons,
+						]}
+						aria-label={`Visit ${name}'s website`}>
+						{primaryButtonText}
+					</Link>
+				)
+			}
+			{
+				appStoreUrl && (
+					<Link
+						href={appStoreUrl}
+						external
+						variant="secondary"
+						class:list={[
+							'cosy:btn cosy:bg-[#161616] cosy:hover:bg-black cosy:border-0',
+							'cosy:text-white cosy:font-bold cosy:shadow-sm',
+							buttonLayoutClass,
+							currentSize.buttons,
+						]}
+						aria-label={`Download ${name} on App Store`}>
+						{secondaryButtonText}
+					</Link>
+				)
+			}
+			{
+				githubUrl && (
+					<Link
+						href={githubUrl}
+						external
+						variant="ghost"
+						class:list={[
+							'cosy:btn cosy:bg-[#f0f0f0] cosy:hover:bg-[#e0e0e0] cosy:border-0',
+							'cosy:text-[#24292f] cosy:font-bold cosy:shadow-sm',
+							buttonLayoutClass,
+							currentSize.buttons,
+						]}
+						aria-label={`View ${name}'s GitHub repository`}>
+						<SocialIcon platform="github" class="cosy:w-4 cosy:h-4 cosy:mr-1.5 cosy:inline-block" />
+						<span class="cosy:inline-block">{githubButtonText}</span>
+					</Link>
+				)
+			}
+		</div>
+	</div>
+</div>

package/dist/components/layouts/DocumentationLayout.astro

@@ -416,6 +416,7 @@ const {
 	...rest
 } = Astro.props;
 
+// 获取当前路径，并处理基础路径
 const currentPath = Astro.url.pathname;
 
 // 获取有效的语言代码