@coffic/cosy-ui 0.9.40 → 0.9.41

package/dist/index-astro.ts

@@ -3,8 +3,9 @@ export * from './src-astro/alert';
 export * from './src-astro/alert-dialog';
 export * from './src-astro/api-test';
 export * from './src-astro/article';
-export * from './src-astro/banner';
+export * from './src-astro/avatar';
 export * from './src-astro/badge';
+export * from './src-astro/banner';
 export * from './src-astro/button/index_astro';
 export * from './src-astro/card';
 export * from './src-astro/card-book';
@@ -14,11 +15,11 @@ export * from './src-astro/code-container';
 export * from './src-astro/code-example';
 export * from './src-astro/code-panel';
 export * from './src-astro/confirm-dialog';
-export * from './src-astro/install-tabs';
 export * from './src-astro/contact';
 export * from './src-astro/container';
 export * from './src-astro/empty-state';
 export * from './src-astro/errors';
+export * from './src-astro/features';
 export * from './src-astro/flex';
 export * from './src-astro/footer';
 export * from './src-astro/grid';
@@ -27,30 +28,34 @@ export * from './src-astro/heading';
 export * from './src-astro/hero';
 export * from './src-astro/icons';
 export * from './src-astro/image';
-export * from './src-astro/smart-icon';
-export * from './src-astro/social-icon';
+export * from './src-astro/install-tabs';
 export * from './src-astro/language-switcher';
 export * from './src-astro/layout-app';
 export * from './src-astro/layout-basic';
 export * from './src-astro/layout-basic/BaseLayout.astro';
 export * from './src-astro/layout-dashboard';
-export * from './src-astro/link'; export * from './src-astro/list';
+export * from './src-astro/link';
+export * from './src-astro/list';
 export * from './src-astro/loading-overlay';
 export * from './src-astro/login';
 export * from './src-astro/logout';
-export * from './src-astro/main';
 export * from './src-astro/mac-window';
+export * from './src-astro/main';
 export * from './src-astro/modal';
 export * from './src-astro/module';
 export * from './src-astro/nav-section';
+export * from './src-astro/picture-book';
 export * from './src-astro/placeholder';
 export * from './src-astro/products';
 export * from './src-astro/register';
+export * from './src-astro/review';
 export * from './src-astro/sidebar';
 export * from './src-astro/smart-bg';
+export * from './src-astro/smart-icon';
+export * from './src-astro/social-icon';
 export * from './src-astro/speak';
 export * from './src-astro/stack';
-export * from './src-astro/picture-book';
+export * from './src-astro/stats-display';
 export * from './src-astro/team-member';
 export * from './src-astro/text';
 export * from './src-astro/theme-switcher';
@@ -70,17 +75,17 @@ export * from './src-astro/types/product';
 export * from './src-astro/types/sidebar';
 export * from './src-astro/types/static-path';
 
-// 工具类型
+// 工具类型 (按字母顺序)
 export type { ImageProvider, ImageOptions } from './src/utils/image';
-export * from './src/utils/image';
 export * from './src/utils/i18n';
-export * from './src/utils/path';
-export * from './src/utils/url';
-export * from './src/utils/language';
+export * from './src/utils/image';
 export * from './src/utils/lang_package';
-export * from './src/utils/logger';
+export * from './src/utils/language';
 export * from './src/utils/link';
+export * from './src/utils/logger';
 export * from './src/utils/mac-window-bg';
+export * from './src/utils/path';
+export * from './src/utils/url';
 
 // 图标组件
 export * from './src-astro/icons';

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

@@ -0,0 +1,118 @@
+---
+/**
+ * @component Avatar
+ *
+ * @description
+ * Avatar 组件用于显示用户头像，支持真实头像和默认头像生成。
+ * 当没有提供头像URL或头像加载失败时，自动生成带用户首字母的彩色圆形头像。
+ *
+ * @design
+ * 设计理念：
+ * 1. 优雅降级 - 真实头像优先，失败时自动切换到默认头像
+ * 2. 个性化 - 根据用户名生成不同的背景颜色
+ * 3. 一致性 - 统一的圆形样式和尺寸
+ * 4. 可定制性 - 支持不同尺寸和样式
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Avatar userName="张先生" />
+ * ```
+ *
+ * 带真实头像：
+ * ```astro
+ * <Avatar userName="李女士" avatar="https://example.com/avatar.jpg" />
+ * ```
+ *
+ * 不同尺寸：
+ * ```astro
+ * <Avatar userName="王先生" size="lg" />
+ * ```
+ *
+ * 自定义样式：
+ * ```astro
+ * <Avatar userName="赵先生" class="cosy:border-2 cosy:border-primary" />
+ * ```
+ *
+ * @props
+ * @prop {string} userName - 用户名称
+ * @prop {string} [avatar] - 用户头像URL
+ * @prop {'sm'|'md'|'lg'|'xl'} [size='md'] - 头像尺寸
+ * @prop {string} [class] - 自定义类名
+ * @prop {any} [class:list] - 类名列表
+ */
+
+// 导入样式
+import '../../style.ts';
+
+import type { AvatarProps } from './types';
+
+type Props = AvatarProps;
+
+const {
+  userName,
+  avatar,
+  size = 'md',
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 尺寸映射
+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 = sizeClasses[size as keyof typeof sizeClasses];
+---
+
+<div
+  class:list={[
+    'cosy:avatar',
+    'cosy:rounded-full',
+    'cosy:overflow-hidden',
+    'cosy:flex-shrink-0',
+    'cosy:bg-base-200',
+    'cosy:flex',
+    'cosy:items-center',
+    'cosy:justify-center',
+    sizeClass,
+    className,
+    classList,
+  ]}
+  {...rest}>
+  {
+    avatar ? (
+      <img
+        src={avatar}
+        alt={userName}
+        class="cosy:w-full cosy:h-full cosy:object-cover"
+        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+      />
+    ) : null
+  }
+  <!-- 默认头像 -->
+  <div
+    class={`cosy:w-full cosy:h-full ${getAvatarColor(userName)} 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() : '?'}
+  </div>
+</div>

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar.astro';
+export type { AvatarProps } from './types';

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes } from 'astro/types';
+
+export interface AvatarProps extends HTMLAttributes<'div'> {
+    /**
+     * 用户名称
+     */
+    userName: string;
+
+    /**
+     * 用户头像URL
+     */
+    avatar?: string;
+
+    /**
+     * 头像尺寸
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+
+    /**
+     * 自定义类名
+     */
+    class?: string;
+
+    /**
+     * 类名列表
+     */
+    'class:list'?: any;
+}

package/dist/src-astro/contact/Contact.astro

@@ -5,6 +5,7 @@
  * @description
  * Contact 组件用于展示企业或个人的联系信息，支持多种联系方式（邮件、电话、地址）和社交媒体链接。
  * 组件设计简洁专业，适合在企业网站的联系页面、页脚或关于我们页面中使用。
+ * 现在基于 Card 组件重构，提供更好的动画效果和一致性。
  *
  * @usage
  * 基本用法：
@@ -66,6 +67,7 @@
  */
 
 import '../../style.ts';
+import Card from '../card/Card.astro';
 import {
   FacebookIcon,
   GithubIcon,
@@ -107,25 +109,21 @@ const {
   website,
 } = Astro.props;
 
-// 构建联系信息容器样式
-const contactClasses = [
-  'cosy:card',
-  'cosy:w-full',
-  'cosy:bg-base-100',
+// 构建自定义样式类（用于覆盖Card组件的默认样式）
+const customClasses = [
   'cosy:shadow-lg',
-  compact ? 'cosy:card-compact' : '',
+  'hover:cosy:shadow-xl',
+  'hover:cosy:bg-base-200',
   className,
 ]
   .filter(Boolean)
   .join(' ');
 
-// 内容区域的padding
-const contentPadding = compact ? 'cosy:p-4' : 'cosy:p-6';
-
 // 联系信息项的样式
 const contactItemClass =
-  'cosy:flex cosy:items-center cosy:gap-3 cosy:mb-4 last:cosy:mb-0';
-const iconClass = 'cosy:w-5 cosy:h-5 cosy:text-primary cosy:flex-shrink-0';
+  'cosy:flex cosy:items-center cosy:gap-3 cosy:mb-4 last:cosy:mb-0 cosy:transition-all cosy:duration-200 cosy:ease-in-out hover:cosy:bg-base-200/50 hover:cosy:rounded-lg hover:cosy:p-2 hover:cosy:-mx-2';
+const iconClass =
+  'cosy:w-5 cosy:h-5 cosy:text-primary cosy:flex-shrink-0 cosy:transition-all cosy:duration-200 hover:cosy:scale-110 hover:cosy:text-primary/80';
 const linkClass =
   'cosy:link cosy:link-hover cosy:text-base-content cosy:no-underline hover:cosy:text-primary cosy:transition-colors';
 
@@ -136,186 +134,171 @@ const socialLinkClass =
   'cosy:btn cosy:btn-ghost cosy:btn-circle cosy:btn-sm cosy:text-base-content hover:cosy:text-primary hover:cosy:bg-primary/10';
 ---
 
-<div class={contactClasses}>
-  <div class={`cosy:card-body ${contentPadding}`}>
+<Card
+  title={title}
+  subtitle={description}
+  compact={compact}
+  class={customClasses}>
+  <div class="cosy:space-y-0">
     {
-      title && (
-        <h2 class="cosy:card-title cosy:text-2xl cosy:font-bold cosy:mb-2">
-          {title}
-        </h2>
+      address && (
+        <div class={contactItemClass}>
+          <MapPinIcon class={iconClass} />
+          <span class="cosy:text-base-content">{address}</span>
+        </div>
       )
     }
 
     {
-      description && (
-        <p class="cosy:text-base-content/70 cosy:mb-6">{description}</p>
+      email && (
+        <div class={contactItemClass}>
+          <MailIcon class={iconClass} />
+          <a href={`mailto:${email}`} class={linkClass}>
+            {email}
+          </a>
+        </div>
       )
     }
 
-    <div class="cosy:space-y-0">
-      {
-        address && (
-          <div class={contactItemClass}>
-            <MapPinIcon class={iconClass} />
-            <span class="cosy:text-base-content">{address}</span>
-          </div>
-        )
-      }
-
-      {
-        email && (
-          <div class={contactItemClass}>
-            <MailIcon class={iconClass} />
-            <a href={`mailto:${email}`} class={linkClass}>
-              {email}
-            </a>
-          </div>
-        )
-      }
-
-      {
-        facebook && (
-          <div class={contactItemClass}>
-            <FacebookIcon class={iconClass} />
-            <a
-              href={facebook}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={linkClass}>
-              Facebook
-            </a>
-          </div>
-        )
-      }
-
-      {
-        github && (
-          <div class={contactItemClass}>
-            <GithubIcon class={iconClass} />
-            <a
-              href={github}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={linkClass}>
-              GitHub
-            </a>
-          </div>
-        )
-      }
-
-      {
-        linkedin && (
-          <div class={contactItemClass}>
-            <LinkedinIcon class={iconClass} />
-            <a
-              href={linkedin}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={linkClass}>
-              LinkedIn
-            </a>
-          </div>
-        )
-      }
-
-      {
-        phone && (
-          <div class={contactItemClass}>
-            <PhoneIcon class={iconClass} />
-            <a href={`tel:${phone}`} class={linkClass}>
-              {phone}
-            </a>
-          </div>
-        )
-      }
-
-      {
-        twitter && (
-          <div class={contactItemClass}>
-            <TwitterIcon class={iconClass} />
-            <a
-              href={twitter}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={linkClass}>
-              Twitter
-            </a>
-          </div>
-        )
-      }
-
-      {
-        website && (
-          <div class={contactItemClass}>
-            <WebsiteIcon class={iconClass} />
-            <a
-              href={website}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={linkClass}>
-              {website.replace(/^https?:\/\//, '')}
-            </a>
-          </div>
-        )
-      }
-    </div>
+    {
+      facebook && (
+        <div class={contactItemClass}>
+          <FacebookIcon class={iconClass} />
+          <a
+            href={facebook}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={linkClass}>
+            Facebook
+          </a>
+        </div>
+      )
+    }
 
     {
-      Astro.slots.has('default') && (
-        <div class="cosy:mt-4">
-          <slot />
+      github && (
+        <div class={contactItemClass}>
+          <GithubIcon class={iconClass} />
+          <a
+            href={github}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={linkClass}>
+            GitHub
+          </a>
         </div>
       )
     }
 
     {
-      (github || twitter || facebook || linkedin) && (
-        <div class={socialLinksClass}>
-          {github && (
-            <a
-              href={github}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={socialLinkClass}
-              title="GitHub">
-              <GithubIcon class="cosy:w-5 cosy:h-5" />
-            </a>
-          )}
+      linkedin && (
+        <div class={contactItemClass}>
+          <LinkedinIcon class={iconClass} />
+          <a
+            href={linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={linkClass}>
+            LinkedIn
+          </a>
+        </div>
+      )
+    }
 
-          {twitter && (
-            <a
-              href={twitter}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={socialLinkClass}
-              title="Twitter">
-              <TwitterIcon class="cosy:w-5 cosy:h-5" />
-            </a>
-          )}
+    {
+      phone && (
+        <div class={contactItemClass}>
+          <PhoneIcon class={iconClass} />
+          <a href={`tel:${phone}`} class={linkClass}>
+            {phone}
+          </a>
+        </div>
+      )
+    }
 
-          {facebook && (
-            <a
-              href={facebook}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={socialLinkClass}
-              title="Facebook">
-              <FacebookIcon class="cosy:w-5 cosy:h-5" />
-            </a>
-          )}
+    {
+      twitter && (
+        <div class={contactItemClass}>
+          <TwitterIcon class={iconClass} />
+          <a
+            href={twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={linkClass}>
+            Twitter
+          </a>
+        </div>
+      )
+    }
 
-          {linkedin && (
-            <a
-              href={linkedin}
-              target="_blank"
-              rel="noopener noreferrer"
-              class={socialLinkClass}
-              title="LinkedIn">
-              <LinkedinIcon class="cosy:w-5 cosy:h-5" />
-            </a>
-          )}
+    {
+      website && (
+        <div class={contactItemClass}>
+          <WebsiteIcon class={iconClass} />
+          <a
+            href={website}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={linkClass}>
+            {website.replace(/^https?:\/\//, '')}
+          </a>
         </div>
       )
     }
   </div>
-</div>
+
+  {
+    Astro.slots.has('default') && (
+      <div class="cosy:mt-4">
+        <slot />
+      </div>
+    )
+  }
+
+  {
+    (github || twitter || facebook || linkedin) && (
+      <div class={socialLinksClass}>
+        {github && (
+          <a
+            href={github}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={socialLinkClass}
+            aria-label="GitHub">
+            <GithubIcon class="cosy:w-4 cosy:h-4" />
+          </a>
+        )}
+        {twitter && (
+          <a
+            href={twitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={socialLinkClass}
+            aria-label="Twitter">
+            <TwitterIcon class="cosy:w-4 cosy:h-4" />
+          </a>
+        )}
+        {facebook && (
+          <a
+            href={facebook}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={socialLinkClass}
+            aria-label="Facebook">
+            <FacebookIcon class="cosy:w-4 cosy:h-4" />
+          </a>
+        )}
+        {linkedin && (
+          <a
+            href={linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            class={socialLinkClass}
+            aria-label="LinkedIn">
+            <LinkedinIcon class="cosy:w-4 cosy:h-4" />
+          </a>
+        )}
+      </div>
+    )
+  }
+</Card>

package/dist/src-astro/container/Container.astro

@@ -44,6 +44,13 @@
  * </Container>
  * ```
  *
+ * 内容居中的容器：
+ * ```astro
+ * <Container contentCentered>
+ *   <Button>居中显示的按钮</Button>
+ * </Container>
+ * ```
+ *
  * 带背景色的容器：
  * ```astro
  * <Container background="primary/10">
@@ -157,6 +164,7 @@
  * @prop {boolean} [border=false] - 是否显示边框，启用后会在容器周围添加边框
  * @prop {boolean|string} [contentBorder=false] - 是否给内容比例盒加边框（仅在 fit 模式下生效）。可设置为 true（使用默认黑色边框）或具体的颜色值（如 "primary/50"、"success"、"gray-300" 等）
  * @prop {boolean} [centered=true] - 是否居中显示，设置为false时容器将靠左对齐
+ * @prop {boolean} [contentCentered=false] - 是否让内部内容居中显示，启用后会在容器内使用flex布局居中内容
  * @prop {string} [class] - 自定义CSS类名，用于添加额外的样式
  * @prop {string} [fit='none'] - 内容适配模式：none（默认）、contain（保持比例，尽量占满且不溢出）、cover（保持比例，铺满并可能裁剪）
  * @prop {string} [flex] - flex布局方向，可选值：row、col、row-reverse、col-reverse，不设置则不启用flex布局
@@ -213,6 +221,12 @@ interface Props extends HTMLAttributes<'div'> {
    */
   centered?: boolean;
 
+  /**
+   * 是否让内部内容居中显示
+   * @default false
+   */
+  contentCentered?: boolean;
+
   /**
    * 自定义类名
    */
@@ -299,6 +313,7 @@ const {
   padding = 'md',
   margin = 'none',
   centered = true,
+  contentCentered = false,
   border = false,
   fit = 'none',
   contentBorder = false,
@@ -439,6 +454,7 @@ const containerClasses = [
     ? 'cosy:overflow-hidden cosy:min-w-0 cosy:max-w-full'
     : '',
   centered ? 'cosy:mx-auto' : '',
+  contentCentered ? 'cosy:flex cosy:justify-center cosy:items-center' : '',
   widthClasses[width],
   paddingClasses[padding],
   marginClasses[margin],