@coffic/cosy-ui 0.9.44 → 0.9.45

package/dist/src-astro/env.d.ts

@@ -3,40 +3,46 @@
 
 // 确保 Astro 全局类型正确加载
 declare global {
-  namespace astroHTML.JSX {
-    interface IntrinsicElements {
-      [elemName: string]: any;
+    namespace astroHTML.JSX {
+        interface IntrinsicElements {
+            [elemName: string]: any;
+        }
     }
-  }
 }
 
 declare module '*.vue?raw' {
-  const content: string;
-  export default content;
+    const content: string;
+    export default content;
 }
 
 // 添加图片模块声明
 declare module '*.png' {
-  const value: string;
-  export default value;
+    const value: string;
+    export default value;
 }
 
 declare module '*.jpg' {
-  const value: string;
-  export default value;
+    const value: string;
+    export default value;
 }
 
 declare module '*.jpeg' {
-  const value: string;
-  export default value;
+    const value: string;
+    export default value;
 }
 
 declare module '*.svg' {
-  const value: string;
-  export default value;
+    const value: string;
+    export default value;
+}
+
+// 允许在 TS 中直接导入 .astro 组件
+declare module '*.astro' {
+    const Component: any;
+    export default Component;
 }
 
 declare module '*.gif' {
-  const value: string;
-  export default value;
+    const value: string;
+    export default value;
 }

package/dist/src-astro/images-circle/ImagesCircle.astro

@@ -6,19 +6,18 @@
  * ```astro
  * <ImagesCircle
  *   images={[
- *     { src: 'image1.jpg', alt: '图片1' },
- *     { src: 'image2.jpg', alt: '图片2' },
- *     { src: 'image3.jpg', alt: '图片3' },
- *     { src: 'image4.jpg', alt: '图片4' }
+ *     'image1.jpg',
+ *     'image2.jpg', 
+ *     'image3.jpg',
+ *     'image4.jpg'
  *   ]}
  *   size="md"
- *   style="apple"
  * />
  * ```
  * @props
  * @prop {BackgroundColor} [background] - 背景颜色
  * @prop {string} [class] - 自定义 CSS 类名
- * @prop {IImagesCircleItem[]} images - 图片数组，第一张为中心主图，其余环绕显示
+ * @prop {ImageSource[]} images - 图片源数组，可以是字符串URL或ImageMetadata对象，第一张为中心主图，其余环绕显示
  * @prop {string} [rounded='lg'] - 图片圆角，可选值：none、sm、md、lg、xl、2xl、3xl、full
  * @prop {string} [shadow='lg'] - 图片阴影，可选值：none、sm、md、lg、xl
  * @prop {string} [size='md'] - 组件大小，可选值：sm、md、lg、xl
@@ -154,7 +153,7 @@ const positions3D = get3DPositions(imageCount);
       style={`width: ${currentSize.container}px; height: ${currentSize.container}px; transform-style: preserve-3d;`}
     >
       <!-- 所有图片按3D位置排列 -->
-      {images.map((image, index) => {
+      {images.map((imageSrc, index) => {
         const position = positions3D[index];
         if (!position) return null;
         
@@ -178,19 +177,14 @@ const positions3D = get3DPositions(imageCount);
             `}
           >
             <img
-              src={image.src}
-              alt={image.alt}
-              width={image.width || imageSize}
-              height={image.height || imageSize}
-              loading={image.loading || 'lazy'}
+              src={typeof imageSrc === 'string' ? imageSrc : imageSrc.src}
+              alt={`图片 ${index + 1}`}
+              width={imageSize}
+              height={imageSize}
+              loading="lazy"
               class={`img-3d ${shadowClass} ${roundedClass}`}
               style={`width: ${imageSize}px; height: ${imageSize}px;`}
             />
-            {image.caption && (
-              <div class="image-caption">
-                <p>{image.caption}</p>
-              </div>
-            )}
           </div>
         );
       })}

package/dist/src-astro/images-circle/types.ts

@@ -1,16 +1,8 @@
 import type { BackgroundColor } from '../../src/common/backgrounds';
-
-export interface IImagesCircleItem {
-    src: string;
-    alt: string;
-    width?: number;
-    height?: number;
-    loading?: 'lazy' | 'eager';
-    caption?: string;
-}
+import type { ImageSource } from '../image/image';
 
 export interface IImagesCircleProps {
-    images: IImagesCircleItem[];
+    images: ImageSource[];
     background?: BackgroundColor;
     class?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';

package/dist/src-astro/products/ProductHero.astro

@@ -3,14 +3,14 @@
  * @component ProductHero
  *
  * @description
- * ProductHero 组件是 ProductHeroItem 的容器组件，用于展示多个产品的详细信息。
- * 采用苹果风格的大图展示设计，支持左右交替布局，提供优雅的产品展示体验。
- * 适用于产品展示页面、产品详情页等场景。
+ * ProductHero 组件用于展示单个产品的详细信息，采用苹果风格的大图展示设计。
+ * 支持左右交替布局、标签数组、价格显示和操作按钮。
+ * 适用于产品详情页、产品展示页面等场景。
  *
  * @design
  * 设计理念：
  * 1. 大图展示 - 突出产品图片，采用高质量大图展示
- * 2. 交替布局 - 自动左右交替布局，增加视觉层次
+ * 2. 交替布局 - 支持左右交替布局，增加视觉层次
  * 3. 信息层次 - 清晰的信息层次：标签、标题、描述、价格、按钮
  * 4. 苹果风格 - 采用苹果官网的简洁、优雅设计风格
  * 5. 响应式设计 - 在不同设备上都能良好展示
@@ -19,146 +19,176 @@
  * 基本用法：
  * ```astro
  * <ProductHero
- *   products={[
- *     {
- *       name: "极简手机",
- *       description: "纯净体验，回归本质",
- *       image: "/images/products/phone.jpg",
- *       price: "¥6,999",
- *       isNew: true
- *     },
- *     {
- *       name: "智能手表",
- *       description: "健康生活，简约开始",
- *       image: "/images/products/watch.jpg",
- *       price: "¥2,999",
- *       isNew: false
- *     }
- *   ]}
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
+ *   name="极简手机"
+ *   description="纯净体验，回归本质"
+ *   image="/images/products/phone.jpg"
+ *   highlight="¥6,999"
+ *   labels={["新品"]}
  * />
  * ```
  *
- * 自定义背景色：
+ * 右对齐布局：
  * ```astro
  * <ProductHero
- *   products={products}
- *   backgrounds={["gradient-sky", "primary/10"]}
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
+ *   name="智能手表"
+ *   description="健康生活，简约开始"
+ *   image="/images/products/watch.jpg"
+ *   highlight="¥2,999"
+ *   labels={["热卖", "直降 500"]}
+ *   align="right"
  * />
  * ```
  *
- * 自定义按钮文本：
+ * 自定义背景色：
  * ```astro
  * <ProductHero
- *   products={products}
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
- *   newLabelText="新品"
+ *   name="无线耳机"
+ *   description="纯净音质，无感佩戴"
+ *   image="/images/products/earbuds.jpg"
+ *   highlight="¥1,299"
+ *   background="gradient-sky"
  * />
  * ```
+ *
+ * 自定义操作区（使用 actions 插槽）：
+ * ```astro
+ * <ProductHero
+ *   name="极简手机"
+ *   description="纯净体验，回归本质"
+ *   image="/images/products/phone.jpg"
+ *   highlight="¥6,999">
+ *   <div slot="actions" style="display:flex; gap:1rem;">
+ *     <a href="#buy" class="btn btn-primary">立即购买</a>
+ *     <a href="#learn" class="btn btn-outline">了解更多</a>
+ *   </div>
+ * </ProductHero>
+ * ```
  */
 
-import { ProductHeroItem } from '../../index-astro';
+import { Badge, Heading, Text, Image, Container } from '../../index-astro';
 import '../../style.ts';
-import type { Props as ProductHeroItemProps } from './ProductHeroItem.astro';
+import type { ImageSource } from '../image/image.ts';
 import type { BackgroundColor } from '../../src/common/backgrounds';
 
-// 定义产品项类型
-type ProductItem = Omit<
-  ProductHeroItemProps,
-  | 'align'
-  | 'background'
-  | 'buyNowText'
-  | 'learnMoreText'
-  | 'newLabelText'
-  | 'onBuyNow'
-  | 'onLearnMore'
-  | 'class'
->;
-
+// Props 按字母顺序（A-Z）
 export interface Props {
   /**
-   * 产品数据数组
+   * 布局对齐方式
+   * - left: 左对齐（默认）
+   * - right: 右对齐
    */
-  products: ProductItem[];
+  align?: 'left' | 'right';
   /**
-   * 背景色类型数组
+   * 背景色类型
    * 使用预定义的背景色类型，如 'primary', 'base-200', 'gradient-sky' 等
-   * 组件会循环使用这些背景色，如果只有一个背景色则所有产品项都使用该背景色
    */
-  backgrounds?: BackgroundColor[];
+  background?: BackgroundColor;
   /**
-   * 购买按钮文本
+   * 自定义类名
    */
-  buyNowText?: string;
+  class?: string;
   /**
-   * 了解更多按钮文本
+   * 产品描述
    */
-  learnMoreText?: string;
+  description: string;
   /**
-   * 新品标签文本
+   * 产品图片
    */
-  newLabelText?: string;
+  image: ImageSource;
   /**
-   * 购买按钮点击事件
+   * 标签文案列表。可传多个，如 ["限时优惠", "热销"]
    */
-  onBuyNow?: (product: ProductItem, index: number) => void;
+  labels?: string[];
   /**
-   * 了解更多按钮点击事件
+   * 产品名称
    */
-  onLearnMore?: (product: ProductItem, index: number) => void;
+  name: string;
   /**
-   * 自定义类名
+   * 高亮文案（价格、宣传语等）
    */
-  class?: string;
+  highlight?: string;
 }
 
 const {
-  products,
-  backgrounds,
-  buyNowText = '立即购买',
-  learnMoreText = '了解更多',
-  newLabelText = '新品',
-  onBuyNow,
-  onLearnMore,
+  name,
+  description,
+  image,
+  highlight,
+  labels = [],
+  align = 'left',
+  background,
   class: className = '',
 } = Astro.props;
 
-// 默认背景色数组，用于交替显示
-const defaultBackgrounds: BackgroundColor[] = ['base-200', 'base-100'];
+// 根据对齐方式决定布局方向
+const isRightAlign = align === 'right';
+const gridDirection = isRightAlign ? 'direction: rtl;' : '';
+const contentDirection = isRightAlign ? 'direction: ltr;' : '';
 ---
 
-<div class={className}>
-  {
-    products.map((product, index) => {
-      // 计算当前产品的背景
-      const availableBackgrounds =
-        backgrounds && backgrounds.length > 0
-          ? backgrounds
-          : defaultBackgrounds;
-      const currentBackground =
-        availableBackgrounds[index % availableBackgrounds.length];
+<Container
+  width="full"
+  background={background || 'base-100'}
+  padding="xl"
+  class={className}>
+  <Container width="xl">
+    <div
+      style={`display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; ${gridDirection}`}>
+      <!-- 内容区域 -->
+      <div style={contentDirection}>
+        <!-- 标签列表 -->
+        {
+          labels && labels.length > 0 && (
+            <div class="cosy:flex cosy:flex-wrap cosy:gap-2 cosy:mb-4">
+              {labels.map((label) => (
+                <Badge variant="primary">{label}</Badge>
+              ))}
+            </div>
+          )
+        }
+
+        <!-- 产品标题 -->
+        <Heading level={2} size="4xl" class="cosy:mb-4 cosy:font-thin">
+          {name}
+        </Heading>
+
+        <!-- 产品描述 -->
+        <Text
+          size="xl"
+          class="cosy:text-base-content/70 cosy:mb-6 cosy:font-light">
+          {description}
+        </Text>
+
+        <!-- 高亮文案（价格/标语等） -->
+        {
+          highlight && (
+            <div style="display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem;">
+              <Text size="2xl" class="cosy:font-thin">
+                {highlight}
+              </Text>
+            </div>
+          )
+        }
 
-      // 计算布局对齐方式（左右交替）
-      const align = index % 2 === 0 ? 'left' : 'right';
+        <!-- 自定义操作区插槽 -->
+        <div style="display: flex; gap: 1rem;">
+          <slot name="actions" />
+        </div>
+      </div>
 
-      return (
-        <ProductHeroItem
-          {...product}
-          align={align}
-          background={currentBackground}
-          buyNowText={buyNowText}
-          learnMoreText={learnMoreText}
-          newLabelText={newLabelText}
-          onBuyNow={onBuyNow ? () => onBuyNow(product, index) : undefined}
-          onLearnMore={
-            onLearnMore ? () => onLearnMore(product, index) : undefined
-          }
-        />
-      );
-    })
-  }
-</div>
+      <!-- 图片区域 -->
+      <div>
+        <div
+          style="width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden;">
+          <Image
+            src={image}
+            alt={name}
+            width={800}
+            height={600}
+            class="cosy:w-full cosy:h-auto"
+          />
+        </div>
+      </div>
+    </div>
+  </Container>
+</Container>

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

@@ -1,8 +1,5 @@
 export { default as Products } from './Products.astro';
 export { default as ProductCard } from './ProductCard.astro';
 export { default as ProductHero } from './ProductHero.astro';
-export { default as ProductHeroItem } from './ProductHeroItem.astro';
 export type { Props as ProductsProps } from './Products.astro';
 export type { Props as ProductCardProps } from './ProductCard.astro';
-export type { Props as ProductHeroProps } from './ProductHero.astro';
-export type { Props as ProductHeroItemProps } from './ProductHeroItem.astro';

package/package.json

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

package/dist/src-astro/products/ProductHeroItem.astro

@@ -1,219 +0,0 @@
----
-/**
- * @component ProductHeroItem
- *
- * @description
- * ProductHeroItem 组件用于展示单个产品的详细信息，采用苹果风格的大图展示设计。
- * 支持左右交替布局、新品标签、价格显示和操作按钮。
- * 适用于产品详情页、产品展示页面等场景。
- *
- * @design
- * 设计理念：
- * 1. 大图展示 - 突出产品图片，采用高质量大图展示
- * 2. 交替布局 - 支持左右交替布局，增加视觉层次
- * 3. 信息层次 - 清晰的信息层次：标签、标题、描述、价格、按钮
- * 4. 苹果风格 - 采用苹果官网的简洁、优雅设计风格
- * 5. 响应式设计 - 在不同设备上都能良好展示
- *
- * @usage
- * 基本用法：
- * ```astro
- * <ProductHeroItem
- *   name="极简手机"
- *   description="纯净体验，回归本质"
- *   image="/images/products/phone.jpg"
- *   price="¥6,999"
- *   isNew={true}
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
- * />
- * ```
- *
- * 右对齐布局：
- * ```astro
- * <ProductHeroItem
- *   name="智能手表"
- *   description="健康生活，简约开始"
- *   image="/images/products/watch.jpg"
- *   price="¥2,999"
- *   isNew={false}
- *   align="right"
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
- * />
- * ```
- *
- * 自定义背景色：
- * ```astro
- * <ProductHeroItem
- *   name="无线耳机"
- *   description="纯净音质，无感佩戴"
- *   image="/images/products/earbuds.jpg"
- *   price="¥1,299"
- *   background="gradient-sky"
- *   buyNowText="立即购买"
- *   learnMoreText="了解更多"
- * />
- * ```
- */
-
-import {
-  Badge,
-  Button,
-  Heading,
-  Text,
-  Image,
-  Container,
-} from '../../index-astro';
-import '../../style.ts';
-import type { ImageSource } from '../image/image.ts';
-import type { BackgroundColor } from '../../src/common/backgrounds';
-
-export interface Props {
-  /**
-   * 产品名称
-   */
-  name: string;
-  /**
-   * 产品描述
-   */
-  description: string;
-  /**
-   * 产品图片
-   */
-  image: ImageSource;
-  /**
-   * 产品价格
-   */
-  price: string;
-  /**
-   * 是否为新品
-   */
-  isNew?: boolean;
-  /**
-   * 布局对齐方式
-   * - left: 左对齐（默认）
-   * - right: 右对齐
-   */
-  align?: 'left' | 'right';
-  /**
-   * 背景色类型
-   * 使用预定义的背景色类型，如 'primary', 'base-200', 'gradient-sky' 等
-   */
-  background?: BackgroundColor;
-  /**
-   * 购买按钮文本
-   */
-  buyNowText?: string;
-  /**
-   * 了解更多按钮文本
-   */
-  learnMoreText?: string;
-  /**
-   * 新品标签文本
-   */
-  newLabelText?: string;
-  /**
-   * 购买按钮点击事件
-   */
-  onBuyNow?: () => void;
-  /**
-   * 了解更多按钮点击事件
-   */
-  onLearnMore?: () => void;
-  /**
-   * 自定义类名
-   */
-  class?: string;
-}
-
-const {
-  name,
-  description,
-  image,
-  price,
-  isNew = false,
-  align = 'left',
-  background,
-  buyNowText = '立即购买',
-  learnMoreText = '了解更多',
-  newLabelText = '新品',
-  onBuyNow,
-  onLearnMore,
-  class: className = '',
-} = Astro.props;
-
-// 根据对齐方式决定布局方向
-const isRightAlign = align === 'right';
-const gridDirection = isRightAlign ? 'direction: rtl;' : '';
-const contentDirection = isRightAlign ? 'direction: ltr;' : '';
----
-
-<Container
-  width="full"
-  background={background || 'base-100'}
-  padding="xl"
-  class={className}>
-  <Container width="xl">
-    <div
-      style={`display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; ${gridDirection}`}>
-      <!-- 内容区域 -->
-      <div style={contentDirection}>
-        <!-- 新品标签 -->
-        {
-          isNew && (
-            <div style="margin-bottom: 1rem;">
-              <Badge variant="primary" class="cosy:mb-4">
-                {newLabelText}
-              </Badge>
-            </div>
-          )
-        }
-
-        <!-- 产品标题 -->
-        <Heading level={2} size="4xl" class="cosy:mb-4 cosy:font-thin">
-          {name}
-        </Heading>
-
-        <!-- 产品描述 -->
-        <Text
-          size="xl"
-          class="cosy:text-base-content/70 cosy:mb-6 cosy:font-light">
-          {description}
-        </Text>
-
-        <!-- 价格 -->
-        <div
-          style="display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem;">
-          <Text size="2xl" class="cosy:font-thin">
-            {price}
-          </Text>
-        </div>
-
-        <!-- 操作按钮 -->
-        <div style="display: flex; gap: 1rem;">
-          <Button variant="primary" size="lg" onclick={onBuyNow}>
-            {buyNowText}
-          </Button>
-          <Button variant="outline" size="lg" onclick={onLearnMore}>
-            {learnMoreText}
-          </Button>
-        </div>
-      </div>
-
-      <!-- 图片区域 -->
-      <div>
-        <div
-          style="width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden;">
-          <Image
-            src={image}
-            alt={name}
-            width={800}
-            height={600}
-            class="cosy:w-full cosy:h-auto"
-          />
-        </div>
-      </div>
-    </div>
-  </Container>
-</Container>