@coffic/cosy-ui 0.9.84 → 0.9.85

package/dist/src/components/avatar/avatarPropsBase.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Avatar 组件的基础属性接口（与框架无关）
+ */
+export interface IAvatarPropsBase {
+    /**
+     * 用户名称
+     */
+    userName?: string;
+    /**
+     * 用户头像URL
+     */
+    avatar?: string;
+    /**
+     * 头像尺寸
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+}
+//# sourceMappingURL=avatarPropsBase.d.ts.map

package/dist/src/components/avatar/avatarPropsBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarPropsBase.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/avatarPropsBase.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC"}

package/dist/src/components/avatar/avatarPropsBase.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=avatarPropsBase.js.map

package/dist/src/components/avatar/avatarPropsBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarPropsBase.js","sourceRoot":"","sources":["../../../../src/components/avatar/avatarPropsBase.ts"],"names":[],"mappings":""}

package/dist/src/components/avatar/avatarUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Avatar 组件的共用工具函数
+ */
+/**
+ * 尺寸映射类型
+ */
+export declare const avatarSizeClasses: {
+    readonly sm: "cosy:w-8 cosy:h-8 cosy:text-sm";
+    readonly md: "cosy:w-12 cosy:h-12 cosy:text-lg";
+    readonly lg: "cosy:w-16 cosy:h-16 cosy:text-xl";
+    readonly xl: "cosy:w-20 cosy:h-20 cosy:text-2xl";
+};
+/**
+ * 头像背景色数组
+ */
+export declare const avatarColors: readonly ["cosy:bg-primary", "cosy:bg-secondary", "cosy:bg-accent", "cosy:bg-info", "cosy:bg-success", "cosy:bg-warning", "cosy:bg-error"];
+/**
+ * 生成头像背景色
+ * @param userName 用户名称
+ * @returns 背景色类名
+ */
+export declare const getAvatarColor: (userName?: string) => string;
+/**
+ * 获取用户名首字母（大写）
+ * @param userName 用户名称
+ * @returns 首字母或默认占位符
+ */
+export declare const getAvatarInitial: (userName?: string) => string;
+/**
+ * 获取尺寸类名
+ * @param size 尺寸
+ * @returns 尺寸类名
+ */
+export declare const getAvatarSizeClass: (size?: keyof typeof avatarSizeClasses) => string;
+//# sourceMappingURL=avatarUtils.d.ts.map

package/dist/src/components/avatar/avatarUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/avatarUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;CAKpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,YAAY,4IAQf,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,KAAG,MAIlD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,WAAW,MAAM,KAAG,MAEpD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC9B,OAAM,MAAM,OAAO,iBAAwB,KACzC,MAEF,CAAC"}

package/dist/src/components/avatar/avatarUtils.js

@@ -0,0 +1,52 @@
+/**
+ * Avatar 组件的共用工具函数
+ */
+/**
+ * 尺寸映射类型
+ */
+export const avatarSizeClasses = {
+    sm: "cosy:w-8 cosy:h-8 cosy:text-sm",
+    md: "cosy:w-12 cosy:h-12 cosy:text-lg",
+    lg: "cosy:w-16 cosy:h-16 cosy:text-xl",
+    xl: "cosy:w-20 cosy:h-20 cosy:text-2xl",
+};
+/**
+ * 头像背景色数组
+ */
+export const avatarColors = [
+    "cosy:bg-primary",
+    "cosy:bg-secondary",
+    "cosy:bg-accent",
+    "cosy:bg-info",
+    "cosy:bg-success",
+    "cosy:bg-warning",
+    "cosy:bg-error",
+];
+/**
+ * 生成头像背景色
+ * @param userName 用户名称
+ * @returns 背景色类名
+ */
+export const getAvatarColor = (userName) => {
+    if (!userName)
+        return avatarColors[0]; // 默认使用第一个颜色
+    const index = userName.charCodeAt(0) % avatarColors.length;
+    return avatarColors[index];
+};
+/**
+ * 获取用户名首字母（大写）
+ * @param userName 用户名称
+ * @returns 首字母或默认占位符
+ */
+export const getAvatarInitial = (userName) => {
+    return userName ? userName.charAt(0).toUpperCase() : "?";
+};
+/**
+ * 获取尺寸类名
+ * @param size 尺寸
+ * @returns 尺寸类名
+ */
+export const getAvatarSizeClass = (size = "md") => {
+    return avatarSizeClasses[size];
+};
+//# sourceMappingURL=avatarUtils.js.map

package/dist/src/components/avatar/avatarUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarUtils.js","sourceRoot":"","sources":["../../../../src/components/avatar/avatarUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAChC,EAAE,EAAE,gCAAgC;IACpC,EAAE,EAAE,kCAAkC;IACtC,EAAE,EAAE,kCAAkC;IACtC,EAAE,EAAE,mCAAmC;CAC9B,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iBAAiB;IACjB,mBAAmB;IACnB,gBAAgB;IAChB,cAAc;IACd,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;CACN,CAAC;AAEX;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAiB,EAAU,EAAE;IAC3D,IAAI,CAAC,QAAQ;QAAE,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY;IACnD,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC;IAC3D,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,QAAiB,EAAU,EAAE;IAC7D,OAAO,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AAC1D,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CACjC,OAAuC,IAAI,EAClC,EAAE;IACX,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC,CAAC"}

package/dist/src/components/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export type { IAvatarPropsBase } from "./avatarPropsBase";
+export { avatarColors, avatarSizeClasses, getAvatarColor, getAvatarInitial, getAvatarSizeClass, } from "./avatarUtils";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EACN,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,eAAe,CAAC"}

package/dist/src/components/avatar/index.js

@@ -0,0 +1,2 @@
+export { avatarColors, avatarSizeClasses, getAvatarColor, getAvatarInitial, getAvatarSizeClass, } from "./avatarUtils";
+//# sourceMappingURL=index.js.map

package/dist/src/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/avatar/index.ts"],"names":[],"mappings":"AACA,OAAO,EACN,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GAClB,MAAM,eAAe,CAAC"}

package/dist/src/components/card/cardPropsBase.d.ts

@@ -36,6 +36,6 @@ export interface ICardPropsBase {
     /**
      * 卡片标题
      */
-    title: string;
+    title?: string;
 }
 //# sourceMappingURL=cardPropsBase.d.ts.map

package/dist/src/components/card/cardPropsBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cardPropsBase.d.ts","sourceRoot":"","sources":["../../../../src/components/card/cardPropsBase.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"cardPropsBase.d.ts","sourceRoot":"","sources":["../../../../src/components/card/cardPropsBase.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,cAAc;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/src-astro/avatar/Avatar.astro

@@ -1,9 +1,4 @@
 ---
-
-
-
-
-
 /**
  * @component Avatar
  *
@@ -33,7 +28,7 @@
  * ```
  *
  * @props
- * @prop {string} userName - 用户名称
+ * @prop {string} [userName] - 用户名称
  * @prop {string} [avatar] - 用户头像URL
  * @prop {'sm'|'md'|'lg'|'xl'} [size='md'] - 头像尺寸
  * @prop {string} [class] - 自定义类名
@@ -41,6 +36,11 @@
  */
 
 import { cn } from '../../src/class';
+import {
+	getAvatarColor,
+	getAvatarInitial,
+	getAvatarSizeClass,
+} from '../../src/components/avatar/avatarUtils';
 import type { AvatarProps } from './types';
 
 type Props = AvatarProps;
@@ -54,33 +54,7 @@ const {
     ...rest
 } = Astro.props;
 
-// 尺寸映射 - 使用 class builder
-const getSizeClasses = (size: 'sm' | 'md' | 'lg' | 'xl') => {
-    const sizeMap = {
-        sm: cn().add('cosy:w-8', 'cosy:h-8', 'cosy:text-sm').build(),
-        md: cn().add('cosy:w-12', 'cosy:h-12', 'cosy:text-lg').build(),
-        lg: cn().add('cosy:w-16', 'cosy:h-16', 'cosy:text-xl').build(),
-        xl: cn().add('cosy:w-20', 'cosy:h-20', 'cosy:text-2xl').build(),
-    };
-    return sizeMap[size];
-};
-
-// 生成头像背景色 - 使用 class builder
-const getAvatarColor = (userName: string) => {
-    const colors = [
-        cn().add('cosy:bg-primary').build(),
-        cn().add('cosy:bg-secondary').build(),
-        cn().add('cosy:bg-accent').build(),
-        cn().add('cosy:bg-info').build(),
-        cn().add('cosy:bg-success').build(),
-        cn().add('cosy:bg-warning').build(),
-        cn().add('cosy:bg-error').build(),
-    ];
-    const index = userName.charCodeAt(0) % colors.length;
-    return colors[index];
-};
-
-const sizeClass = getSizeClasses(size as 'sm' | 'md' | 'lg' | 'xl');
+const sizeClass = getAvatarSizeClass(size as 'sm' | 'md' | 'lg' | 'xl');
 
 // 使用 classBuilder 构建各个部分的类名
 const avatarContainerClass = cn()
@@ -88,7 +62,7 @@ const avatarContainerClass = cn()
         'cosy:avatar',
         'cosy:rounded-full',
         'cosy:overflow-hidden',
-        'cosy:flex-shrink-0',
+        'cosy:shrink-0',
         'cosy:bg-base-200',
     )
     .flex('row')
@@ -128,6 +102,6 @@ const avatarFallbackClass = cn()
     <div
         class={avatarFallbackClass}
         style={avatar ? 'display: none;' : 'display: flex;'}>
-        {userName ? userName.charAt(0).toUpperCase() : '?'}
+        {getAvatarInitial(userName)}
     </div>
 </div>

package/dist/src-astro/avatar/types.ts

@@ -1,22 +1,12 @@
 import type { HTMLAttributes } from "astro/types";
+import type { IAvatarPropsBase } from "../../src/components/avatar/avatarPropsBase";
 
-export interface AvatarProps extends HTMLAttributes<"div"> {
-	/**
-	 * 用户名称
-	 */
-	userName: string;
-
-	/**
-	 * 用户头像URL
-	 */
-	avatar?: string;
-
-	/**
-	 * 头像尺寸
-	 * @default 'md'
-	 */
-	size?: "sm" | "md" | "lg" | "xl";
-
+/**
+ * Avatar 组件的 Astro 版本属性接口（继承基础接口并扩展 Astro 特定属性）
+ */
+export interface AvatarProps
+	extends IAvatarPropsBase,
+		Omit<HTMLAttributes<"div">, keyof IAvatarPropsBase> {
 	/**
 	 * 自定义类名
 	 */

package/dist/src-astro/card/Card.astro

@@ -1,7 +1,4 @@
 ---
-
-
-
 /**
  * @component Card
  *
@@ -203,15 +200,17 @@ const Tag = href ? 'a' : 'article';
         {
             imageUrl && (
                 <figure class={figureClass}>
-                    <Image src={imageUrl} alt={title} class={imageClass} />
+                    <Image src={imageUrl} alt={title || ''} class={imageClass} />
                 </figure>
             )
         }
 
         <div class={cardBodyClass}>
-            <h2 class={cardTitleClass}>
-                {title}
-            </h2>
+            {title && (
+                <h2 class={cardTitleClass}>
+                    {title}
+                </h2>
+            )}
 
             {subtitle && <p class={subtitleClass}>{subtitle}</p>}
 

package/dist/src-astro/card/props.ts

@@ -9,7 +9,7 @@ import type { ImageSource } from "../image/types";
 export interface ICardProps
 	extends ICardPropsBase,
 		Omit<IContainerProps, "class" | "backgroundImage" | "title">,
-		Omit<HTMLAttributes<"article">, "title"> {
+		Omit<HTMLAttributes<"article">, "title" | keyof ICardPropsBase> {
 	/**
 	 * 自定义类名
 	 */

package/dist/src-vue/avatar/Avatar.vue

@@ -1,75 +1,55 @@
 <script setup lang="ts">
-import { computed } from "vue";
+  import { computed } from 'vue';
+  import type { IAvatarPropsBase } from '../../src/components/avatar/avatarPropsBase';
+  import {
+    avatarSizeClasses,
+    getAvatarColor,
+    getAvatarInitial,
+  } from '../../src/components/avatar/avatarUtils';
 
-/**
- * @component Avatar
- *
- * @description
- * Avatar 组件用于显示用户头像，支持真实头像和默认头像生成。
- * 当没有提供头像URL或头像加载失败时，自动生成带用户首字母的彩色圆形头像。
- *
- * @usage
- * 基本用法：
- * ```vue
- * <Avatar userName="张先生" />
- * ```
- *
- * 带真实头像：
- * ```vue
- * <Avatar userName="李女士" avatar="https://example.com/avatar.jpg" />
- * ```
- *
- * 不同尺寸：
- * ```vue
- * <Avatar userName="王先生" size="lg" />
- * ```
- *
- * @props
- * @prop {string} userName - 用户名称
- * @prop {string} [avatar] - 用户头像URL
- * @prop {'sm'|'md'|'lg'|'xl'} [size='md'] - 头像尺寸
- * @prop {string} [class] - 自定义类名
- * @prop {any} [class:list] - 类名列表
- */
+  /**
+   * @component Avatar
+   *
+   * @description
+   * Avatar 组件用于显示用户头像，支持真实头像和默认头像生成。
+   * 当没有提供头像URL或头像加载失败时，自动生成带用户首字母的彩色圆形头像。
+   *
+   * @usage
+   * 基本用法：
+   * ```vue
+   * <Avatar userName="张先生" />
+   * ```
+   *
+   * 带真实头像：
+   * ```vue
+   * <Avatar userName="李女士" avatar="https://example.com/avatar.jpg" />
+   * ```
+   *
+   * 不同尺寸：
+   * ```vue
+   * <Avatar userName="王先生" size="lg" />
+   * ```
+   *
+   * @props
+   * @prop {string} [userName] - 用户名称
+   * @prop {string} [avatar] - 用户头像URL
+   * @prop {'sm'|'md'|'lg'|'xl'} [size='md'] - 头像尺寸
+   * @prop {string} [class] - 自定义类名
+   * @prop {any} [class:list] - 类名列表
+   */
 
-export interface IAvatarProps {
-	userName: string;
-	avatar?: string;
-	size?: "sm" | "md" | "lg" | "xl";
-	class?: string;
-	"class:list"?: any;
-}
+  export interface IAvatarProps extends IAvatarPropsBase {
+    class?: string;
+    'class:list'?: any;
+  }
 
-const props = withDefaults(defineProps<IAvatarProps>(), {
-	size: "md",
-	class: "",
-});
+  const props = withDefaults(defineProps<IAvatarProps>(), {
+    size: 'md',
+    class: '',
+  });
 
-// 尺寸映射
-const sizeClasses = {
-	sm: "cosy:w-8 cosy:h-8 cosy:text-sm",
-	md: "cosy:w-12 cosy:h-12 cosy:text-lg",
-	lg: "cosy:w-16 cosy:h-16 cosy:text-xl",
-	xl: "cosy:w-20 cosy:h-20 cosy:text-2xl",
-};
-
-// 生成头像背景色
-const getAvatarColor = (userName: string) => {
-	const colors = [
-		"cosy:bg-primary",
-		"cosy:bg-secondary",
-		"cosy:bg-accent",
-		"cosy:bg-info",
-		"cosy:bg-success",
-		"cosy:bg-warning",
-		"cosy:bg-error",
-	];
-	const index = userName.charCodeAt(0) % colors.length;
-	return colors[index];
-};
-
-const sizeClass = computed(() => sizeClasses[props.size]);
-const avatarColor = computed(() => getAvatarColor(props.userName));
+  const sizeClass = computed(() => avatarSizeClasses[props.size || 'md']);
+  const avatarColor = computed(() => getAvatarColor(props.userName));
 </script>
 
 <template>
@@ -78,7 +58,7 @@ const avatarColor = computed(() => getAvatarColor(props.userName));
       'cosy:avatar',
       'cosy:rounded-full',
       'cosy:overflow-hidden',
-      'cosy:flex-shrink-0',
+      'cosy:shrink-0',
       'cosy:bg-base-200',
       'cosy:flex',
       'cosy:items-center',
@@ -87,15 +67,13 @@ const avatarColor = computed(() => getAvatarColor(props.userName));
       props.class,
       props['class:list'],
     ]"
-    v-bind="$attrs"
-  >
+    v-bind="$attrs">
     <img
       v-if="avatar"
       :src="avatar"
       :alt="userName"
       class="cosy:w-full cosy:h-full cosy:object-cover"
-      @error="handleImageError"
-    />
+      @error="handleImageError" />
     <!-- 默认头像 -->
     <div
       :class="[
@@ -103,19 +81,18 @@ const avatarColor = computed(() => getAvatarColor(props.userName));
         avatarColor,
         'cosy:text-white cosy:flex cosy:items-center cosy:justify-center cosy:font-semibold',
       ]"
-      :style="avatar ? 'display: none;' : 'display: flex;'"
-    >
-      {{ userName ? userName.charAt(0).toUpperCase() : '?' }}
+      :style="avatar ? 'display: none;' : 'display: flex;'">
+      {{ getAvatarInitial(userName) }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
-// 处理图片加载错误
-const handleImageError = (event: Event) => {
-  const img = event.target as HTMLImageElement;
-  const nextElement = img.nextElementSibling as HTMLElement;
-  if (img) img.style.display = 'none';
-  if (nextElement) nextElement.style.display = 'flex';
-};
+  // 处理图片加载错误
+  const handleImageError = (event: Event) => {
+    const img = event.target as HTMLImageElement;
+    const nextElement = img.nextElementSibling as HTMLElement;
+    if (img) img.style.display = 'none';
+    if (nextElement) nextElement.style.display = 'flex';
+  };
 </script>

package/dist/src-vue/card/Card.vue

@@ -1,160 +1,164 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import Container from "../container/Container.vue";
-import { getCardCombinedClassesVue, getCardPaddingClassVue } from "./class";
-import type { ICardProps } from "./props";
+  import { computed } from 'vue';
+  import Container from '../container/Container.vue';
+  import { getCardCombinedClassesVue, getCardPaddingClassVue } from './class';
+  import type { ICardProps } from './props';
 
-/**
- * @component Card
- * @description Vue 版本的 Card 组件，用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片
- * @props {string} title - 卡片标题（必填）
- * @props {string} [subtitle] - 卡片副标题或描述
- * @props {string} [imageUrl] - 卡片顶部图片的URL
- * @props {string} [href] - 如果提供，卡片将变成可点击的链接
- * @props {boolean} [compact=false] - 是否使用紧凑模式
- * @props {boolean} [muted=false] - 是否使用柔和色样式（未激活状态）
- * @props {ShadowSize} [shadow=xl] - 阴影大小
- * @props {string} [class] - 自定义CSS类，可用于覆盖默认样式
- */
+  /**
+   * @component Card
+   * @description Vue 版本的 Card 组件，用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片
+   * @props {string} title - 卡片标题（必填）
+   * @props {string} [subtitle] - 卡片副标题或描述
+   * @props {string} [imageUrl] - 卡片顶部图片的URL
+   * @props {string} [href] - 如果提供，卡片将变成可点击的链接
+   * @props {boolean} [compact=false] - 是否使用紧凑模式
+   * @props {boolean} [muted=false] - 是否使用柔和色样式（未激活状态）
+   * @props {ShadowSize} [shadow=xl] - 阴影大小
+   * @props {string} [class] - 自定义CSS类，可用于覆盖默认样式
+   */
 
-defineOptions({
-	name: "Card",
-});
+  defineOptions({
+    name: 'Card',
+  });
 
-const props = withDefaults(defineProps<ICardProps>(), {
-	class: "",
-	compact: false,
-	muted: false,
-	shadow: "xl",
-});
+  const props = withDefaults(defineProps<ICardProps>(), {
+    class: '',
+    compact: false,
+    muted: false,
+    shadow: 'xl',
+  });
 
-// 从props中分离Container相关的属性和Card自身的属性
-const containerProps = computed(() => {
-	const {
-		// Container属性
-		aspectRatio,
-		centered,
-		contentCentered,
-		flex,
-		fit,
-		gap,
-		height,
-		items,
-		justify,
-		margin,
-		muted,
-		padding,
-		py,
-		pt,
-		pb,
-		px,
-		pl,
-		pr,
-		width,
-		rounded,
-		background,
-		border,
-		borderColor,
-		shadow,
-		// Card属性
-		class: className,
-		compact,
-		href,
-		imageUrl,
-		subtitle,
-		title,
-		...rest
-	} = props;
+  // 从props中分离Container相关的属性和Card自身的属性
+  const containerProps = computed(() => {
+    const {
+      // Container属性
+      aspectRatio,
+      centered,
+      contentCentered,
+      flex,
+      fit,
+      gap,
+      height,
+      items,
+      justify,
+      margin,
+      muted,
+      padding,
+      py,
+      pt,
+      pb,
+      px,
+      pl,
+      pr,
+      width,
+      rounded,
+      background,
+      border,
+      borderColor,
+      shadow,
+      // Card属性
+      class: className,
+      compact,
+      href,
+      imageUrl,
+      subtitle,
+      title,
+      ...rest
+    } = props;
 
-	return {
-		aspectRatio,
-		centered,
-		contentCentered,
-		flex,
-		fit,
-		gap,
-		height,
-		items,
-		justify,
-		margin,
-		muted,
-		padding,
-		py,
-		pt,
-		pb,
-		px,
-		pl,
-		pr,
-		width,
-		rounded,
-		background,
-		border,
-		borderColor,
-		shadow,
-		class: className,
-		...rest,
-	};
-});
+    return {
+      aspectRatio,
+      centered,
+      contentCentered,
+      flex,
+      fit,
+      gap,
+      height,
+      items,
+      justify,
+      margin,
+      muted,
+      padding,
+      py,
+      pt,
+      pb,
+      px,
+      pl,
+      pr,
+      width,
+      rounded,
+      background,
+      border,
+      borderColor,
+      shadow,
+      class: className,
+      ...rest,
+    };
+  });
 
-// Card自身的属性
-const cardProps = computed(() => {
-	const {
-		// Container属性
-		aspectRatio,
-		centered,
-		contentCentered,
-		flex,
-		fit,
-		gap,
-		height,
-		items,
-		justify,
-		margin,
-		muted,
-		padding,
-		py,
-		pt,
-		pb,
-		px,
-		pl,
-		pr,
-		width,
-		rounded,
-		background,
-		border,
-		borderColor,
-		shadow,
-		// Card属性
-		class: className,
-		compact,
-		href,
-		imageUrl,
-		subtitle,
-		title,
-		...rest
-	} = props;
+  // Card自身的属性
+  const cardProps = computed(() => {
+    const {
+      // Container属性
+      aspectRatio,
+      centered,
+      contentCentered,
+      flex,
+      fit,
+      gap,
+      height,
+      items,
+      justify,
+      margin,
+      muted,
+      padding,
+      py,
+      pt,
+      pb,
+      px,
+      pl,
+      pr,
+      width,
+      rounded,
+      background,
+      border,
+      borderColor,
+      shadow,
+      // Card属性
+      class: className,
+      compact,
+      href,
+      imageUrl,
+      subtitle,
+      title,
+      ...rest
+    } = props;
 
-	return {
-		class: className,
-		compact,
-		href,
-		imageUrl,
-		subtitle,
-		title,
-		...rest,
-	};
-});
+    return {
+      class: className,
+      compact,
+      href,
+      imageUrl,
+      subtitle,
+      title,
+      ...rest,
+    };
+  });
 
-// 使用共用的工具函数计算组合类名（不包括Container的类名）
-const cardClasses = computed(() => getCardCombinedClassesVue(cardProps.value));
+  // 使用共用的工具函数计算组合类名（不包括Container的类名）
+  const cardClasses = computed(() =>
+    getCardCombinedClassesVue(cardProps.value)
+  );
 
-// 内容区域的padding类
-const contentPadding = computed(() =>
-	getCardPaddingClassVue(cardProps.value.compact),
-);
+  // 内容区域的padding类
+  const contentPadding = computed(() =>
+    getCardPaddingClassVue(cardProps.value.compact)
+  );
 
-// 链接的目标属性
-const linkTarget = computed(() => (cardProps.value.href ? "_self" : undefined));
+  // 链接的目标属性
+  const linkTarget = computed(() =>
+    cardProps.value.href ? '_self' : undefined
+  );
 </script>
 
 <template>
@@ -168,12 +172,14 @@ const linkTarget = computed(() => (cardProps.value.href ? "_self" : undefined));
         <figure class="not-prose cosy:m-0 cosy:p-0">
           <img
             :src="cardProps.imageUrl"
-            :alt="cardProps.title"
+            :alt="cardProps.title || ''"
             class="cosy:w-full cosy:h-48 cosy:object-cover cosy:rounded-t-lg" />
         </figure>
       </template>
       <div :class="['cosy:card-body', contentPadding]">
-        <h2 class="cosy:card-title cosy:text-xl cosy:font-bold">
+        <h2
+          v-if="cardProps.title"
+          class="cosy:card-title cosy:text-xl cosy:font-bold">
           {{ cardProps.title }}
         </h2>
         <p

package/dist/src-vue/review/Review.vue

@@ -1,85 +1,80 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import Avatar from "../avatar/Avatar.vue";
-import Badge from "../badge/Badge.vue";
-import Card from "../card/Card.vue";
-import SmartIcon from "../smart-icon/SmartIcon.vue";
-import Text from "../text/Text.vue";
-import type { IReviewProps } from "./props";
+  import { computed } from 'vue';
+  import Avatar from '../avatar/Avatar.vue';
+  import Badge from '../badge/Badge.vue';
+  import Card from '../card/Card.vue';
+  import SmartIcon from '../smart-icon/SmartIcon.vue';
+  import Text from '../text/Text.vue';
+  import type { IReviewProps } from './props';
 
-interface Props extends /* @vue-ignore */ IReviewProps {
-	class?: string;
-	"class:list"?: any;
-}
+  interface Props extends /* @vue-ignore */ IReviewProps {
+    class?: string;
+    'class:list'?: any;
+  }
 
-const props = withDefaults(defineProps<Props>(), {
-	verified: false,
-	class: "",
-});
+  const props = withDefaults(defineProps<Props>(), {
+    verified: false,
+    class: '',
+  });
 
-// 从props中分离Card相关的属性和Review自身的属性
-const {
-	userName,
-	rating,
-	comment,
-	date,
-	verified,
-	avatar,
-	class: className,
-	"class:list": classList,
-	// Card属性
-	aspectRatio,
-	centered,
-	contentCentered,
-	flex,
-	fit,
-	gap,
-	height,
-	items,
-	justify,
-	margin,
-	muted,
-	padding,
-	py,
-	pt,
-	pb,
-	px,
-	pl,
-	pr,
-	shadow, // 添加 shadow 属性
-	width,
-	rounded,
-	background,
-	border,
-	borderColor,
-	subtitle,
-	title,
-	imageUrl,
-	href,
-	compact,
-} = props;
+  // 从props中分离Card相关的属性和Review自身的属性
+  const {
+    userName,
+    rating,
+    comment,
+    date,
+    verified,
+    avatar,
+    class: className,
+    'class:list': classList,
+    // Card属性
+    aspectRatio,
+    centered,
+    contentCentered,
+    flex,
+    fit,
+    gap,
+    height,
+    items,
+    justify,
+    margin,
+    muted,
+    padding,
+    py,
+    pt,
+    pb,
+    px,
+    pl,
+    pr,
+    shadow,
+    width,
+    rounded,
+    background,
+    border,
+    borderColor,
+  } = props;
 
-// 生成星级评分
-const starArray = computed(() => {
-	return Array.from({ length: 5 }, (_, i) => ({
-		filled: i < Math.floor(props.rating),
-		half: i === Math.floor(props.rating) && props.rating % 1 !== 0,
-	}));
-});
+  // 生成星级评分
+  const starArray = computed(() => {
+    return Array.from({ length: 5 }, (_, i) => ({
+      filled: i < Math.floor(props.rating),
+      half: i === Math.floor(props.rating) && props.rating % 1 !== 0,
+    }));
+  });
 
-// 格式化日期
-const formattedDate = computed(() => {
-	if (!props.date) return "";
-	try {
-		return new Date(props.date).toLocaleDateString("zh-CN", {
-			year: "numeric",
-			month: "2-digit",
-			day: "2-digit",
-		});
-	} catch {
-		return props.date;
-	}
-});
+  // 格式化日期
+  const formattedDate = computed(() => {
+    if (!props.date) return '';
+    try {
+      return new Date(props.date).toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      });
+    } catch {
+      return props.date;
+    }
+  });
 </script>
 
 <template>
@@ -109,49 +104,49 @@ const formattedDate = computed(() => {
       border,
       borderColor,
       shadow,
-      subtitle,
-      title: userName, // 将 userName 作为 title 传递给 Card 组件
-      imageUrl,
-      href,
-      compact,
     }"
-    :class="className"
+    :class="[className, 'cosy:review', 'cosy:p-6']"
     :class:list="classList">
-    <div class="cosy:flex cosy:items-start cosy:gap-4">
-      <Avatar
-        v-if="avatar"
-        :avatar="avatar"
-        :userName="userName"
-        size="md"
-        class="cosy:flex-shrink-0" />
+    <!-- 用户信息 -->
+    <div class="cosy:flex cosy:items-center cosy:gap-3 cosy:mb-3">
+      <!-- 用户头像 -->
+      <Avatar :userName="userName" :avatar="avatar" size="md" />
+
+      <!-- 用户名称和认证状态 -->
       <div class="cosy:flex-1">
-        <div class="cosy:flex cosy:items-center cosy:justify-between">
-          <Text variant="h3" class="cosy:text-lg cosy:font-semibold">
+        <div class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-1">
+          <Text class="cosy:font-medium cosy:text-base-content">
             {{ userName }}
           </Text>
-          <Badge v-if="verified" variant="success" size="sm">
-            <SmartIcon name="check-circle" class="cosy:w-4 cosy:h-4" />
-            已认证
-          </Badge>
-        </div>
-        <div class="cosy:flex cosy:items-center cosy:mt-1">
-          <div class="cosy:flex cosy:space-x-1">
-            <SmartIcon
-              v-for="(star, index) in starArray"
-              :key="index"
-              :name="
-                star.filled ? 'star-filled' : star.half ? 'star-half' : 'star'
-              "
-              class="cosy:w-5 cosy:h-5 cosy:text-yellow-400" />
-          </div>
-          <Text variant="small" class="cosy:ml-2 cosy:text-gray-500">
-            {{ formattedDate }}
-          </Text>
+          <Badge v-if="verified" variant="success" size="sm"> 已认证 </Badge>
         </div>
-        <Text variant="p" class="cosy:mt-3">
-          {{ comment }}
-        </Text>
       </div>
     </div>
+
+    <!-- 评分 -->
+    <div class="cosy:flex cosy:items-center cosy:gap-1 cosy:mb-3">
+      <SmartIcon
+        v-for="(star, index) in starArray"
+        :key="index"
+        keyword="star"
+        size="16px"
+        :class="
+          star.filled || star.half ? 'cosy:text-warning' : 'cosy:text-base-300'
+        " />
+    </div>
+
+    <!-- 评论内容 -->
+    <div class="cosy:mb-3">
+      <Text class="cosy:text-base-content/80 cosy:leading-relaxed">
+        {{ comment }}
+      </Text>
+    </div>
+
+    <!-- 评价日期 -->
+    <div v-if="date">
+      <Text size="sm" class="cosy:text-base-content/50">
+        {{ formattedDate }}
+      </Text>
+    </div>
   </Card>
 </template>

package/dist/src-vue/review/props.ts

@@ -10,7 +10,15 @@ import type { ICardProps } from "../card/props";
  */
 export interface IReviewProps
 	extends IReviewPropsBase,
-		Omit<ICardProps, keyof IReviewPropsBase> {
+		Omit<
+			ICardProps,
+			| keyof IReviewPropsBase
+			| "title"
+			| "subtitle"
+			| "imageUrl"
+			| "href"
+			| "compact"
+		> {
 	/**
 	 * 自定义类名
 	 */

package/package.json

@@ -1,89 +1,90 @@
 {
-  "name": "@coffic/cosy-ui",
-  "version": "0.9.84",
-  "description": "An astro component library",
-  "author": {
-    "name": "nookery",
-    "url": "https://github.com/nookery"
-  },
-  "repository": {
-    "url": "https://github.com/CosyZone/cosy-ui"
-  },
-  "license": "MIT",
-  "keywords": [
-    "astro-integration",
-    "astro-component",
-    "withastro",
-    "astro",
-    "cosy-ui"
-  ],
-  "homepage": "https://ui.coffic.cn/en",
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": [
-    "*.css",
-    "style.ts",
-    "dist/style.ts"
-  ],
-  "main": "./dist/index-astro.ts",
-  "module": "./dist/index-astro.ts",
-  "types": "./dist/index-astro.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index-astro.ts",
-      "types": "./dist/index-astro.ts"
-    },
-    "./vue": {
-      "import": "./dist/index-vue.ts",
-      "types": "./dist/index-vue.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "index.ts"
-  ],
-  "scripts": {
-    "build": "tsx scripts/build.ts",
-    "check": "astro check"
-  },
-  "type": "module",
-  "peerDependencies": {
-    "astro": "^5.1.3",
-    "vue": "^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "astro": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "@remixicon/vue": "^4.7.0",
-    "astro-integration-kit": "^0.19.1",
-    "fs-extra": "^11.3.2",
-    "html-to-image": "^1.11.13",
-    "shiki": "^3.14.0",
-    "typescript": "^5.9.3"
-  },
-  "devDependencies": {
-    "@astrojs/check": "^0.9.5",
-    "@astrojs/mdx": "^4.3.9",
-    "@astrojs/ts-plugin": "^1.10.5",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
-    "@tsconfig/node22": "^22.0.2",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^24.9.2",
-    "astro": "^5.15.2",
-    "daisyui": "^5.3.10",
-    "globals": "^16.4.0",
-    "rollup-plugin-copy": "^3.5.0",
-    "sharp": "^0.34.4",
-    "tailwindcss": "^4.1.16",
-    "tsx": "^4.20.6",
-    "vite": "^7.1.12"
-  }
+	"name": "@coffic/cosy-ui",
+	"version": "0.9.85",
+	"description": "An astro component library",
+	"author": {
+		"name": "nookery",
+		"url": "https://github.com/nookery"
+	},
+	"repository": {
+		"url": "https://github.com/CosyZone/cosy-ui"
+	},
+	"license": "MIT",
+	"keywords": [
+		"astro-integration",
+		"astro-component",
+		"withastro",
+		"astro",
+		"cosy-ui"
+	],
+	"homepage": "https://ui.coffic.cn/en",
+	"publishConfig": {
+		"access": "public"
+	},
+	"sideEffects": [
+		"*.css",
+		"style.ts",
+		"dist/style.ts"
+	],
+	"main": "./dist/index-astro.ts",
+	"module": "./dist/index-astro.ts",
+	"types": "./dist/index-astro.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index-astro.ts",
+			"types": "./dist/index-astro.ts"
+		},
+		"./vue": {
+			"import": "./dist/index-vue.ts",
+			"types": "./dist/index-vue.ts"
+		}
+	},
+	"files": [
+		"dist",
+		"index.ts"
+	],
+	"scripts": {
+		"build": "tsx scripts/build.ts",
+		"build:prod": "tsx scripts/build.ts --no-sourcemap",
+		"check": "astro check"
+	},
+	"type": "module",
+	"peerDependencies": {
+		"astro": "^5.1.3",
+		"vue": "^3.0.0"
+	},
+	"peerDependenciesMeta": {
+		"astro": {
+			"optional": true
+		},
+		"vue": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@remixicon/vue": "^4.7.0",
+		"astro-integration-kit": "^0.19.1",
+		"fs-extra": "^11.3.2",
+		"html-to-image": "^1.11.13",
+		"shiki": "^3.14.0",
+		"typescript": "^5.9.3"
+	},
+	"devDependencies": {
+		"@astrojs/check": "^0.9.5",
+		"@astrojs/mdx": "^4.3.9",
+		"@astrojs/ts-plugin": "^1.10.5",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.16",
+		"@tsconfig/node22": "^22.0.2",
+		"@types/fs-extra": "^11.0.4",
+		"@types/node": "^24.9.2",
+		"astro": "^5.15.2",
+		"daisyui": "^5.3.10",
+		"globals": "^16.4.0",
+		"rollup-plugin-copy": "^3.5.0",
+		"sharp": "^0.34.4",
+		"tailwindcss": "^4.1.16",
+		"tsx": "^4.20.6",
+		"vite": "^7.1.12"
+	}
 }