@coffic/cosy-ui 0.9.72 → 0.9.73

package/dist/src-astro/apple-phone/ApplePhone.astro

@@ -82,6 +82,10 @@ const scaleRatio = currentHeight / 500;
 
 // 生成唯一的ID
 const uniqueId = `apple-phone-${Math.random().toString(36).substr(2, 9)}`;
+
+// 响应式数据
+let showAlertDialog = false;
+let alertMessage = "";
 ---
 
 <div
@@ -105,16 +109,14 @@ const uniqueId = `apple-phone-${Math.random().toString(36).substr(2, 9)}`;
         <Container
             rounded="lg"
             height="full"
+            class="cosy:h-full cosy:overflow-y-auto cosy:overscroll-y-contain"
             background={backgroundColor || 'accent/90'}>
-            <div
-                class="cosy:h-full cosy:overflow-y-auto cosy:overscroll-y-contain">
-                <slot />
-            </div>
+            <slot />
         </Container>
     </div>
 </div>
 
-<AlertDialog id={`${uniqueId}-alert`} message="" />
+<AlertDialog id={`${uniqueId}-alert`} message={alertMessage} />
 
 <script>
     // 全局函数，用于处理状态栏时间更新

package/dist/src-astro/apple-phone/PhoneFrame.astro

@@ -15,7 +15,8 @@ import iphoneFrame from "../../src/components/apple-phone/assets/iPhone14ProDeep
 		position: absolute;
 		top: 0;
 		left: 0;
-		z-index: 100;
+		z-index: 10;
+        pointer-events: none;
 	">
     <Image src={iphoneFrame} alt="iPhone frame" />
 </div>

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

@@ -6,13 +6,6 @@
  * Card 组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。
  * 组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
  *
- * @design
- * 设计理念：
- * 1. 视觉层次感 - 通过阴影、悬停效果和微妙的动画创造深度感
- * 2. 内容聚焦 - 简洁的布局让用户关注卡片内容
- * 3. 交互反馈 - 悬停和点击时提供明确的视觉反馈
- * 4. 适应性强 - 响应式设计，适应不同屏幕尺寸
- *
  * @usage
  * 基本用法：
  * ```astro

package/dist/src-astro/code-container/CodeContainer.astro

@@ -7,19 +7,6 @@
  * 支持样式重置模式。
  * 使用时只需在默认slot中传入内容，并为每个示例设置对应的id (tab-1, tab-2等)
  *
- * @design
- * 设计理念：
- * 1. 样式隔离 - 防止外部样式影响内部组件展示
- * 2. 代码预览 - 支持预览和代码视图切换
- * 3. 多标签页 - 支持多个示例的标签页展示
- * 4. 样式重置 - 重置内部样式，避免样式冲突
- *
- * 视觉特点：
- * - 卡片式设计：清晰的视觉层次
- * - 渐变背景：美观的预览区域
- * - 标签页切换：直观的示例切换
- * - 代码高亮：清晰的代码展示
- *
  * @usage
  * 基础用法：
  * ```astro
@@ -114,7 +101,7 @@ const {
                 <Description text={descriptions[index]} />
 
                 <Container background="dot-grid" width="full">
-                    <div class="cosy:relative cosy:p-4 cosy:bg-gradient-to-br cosy:from-primary/10 cosy:to-secondary/10 cosy:dark:from-primary/20 cosy:dark:to-secondary/20 cosy:rounded-b">
+                    <div class="cosy:relative cosy:p-4 cosy:rounded-b">
                         <Preview>
                             <div
                                 class={`cosy:code-preview-area ${resetStyles ? 'cosy:reset-styles' : ''}`}

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

@@ -0,0 +1,26 @@
+---
+/**
+ * AddressItem 组件用于显示地址信息
+ */
+
+import "../../style.ts";
+import ContactItem from "./ContactItem.astro";
+import { MapPinIcon } from "../icons";
+import { getContactItemClass, getIconClass } from "./class";
+
+export interface AddressItemProps {
+	address: string;
+}
+
+const { address } = Astro.props as AddressItemProps;
+
+const contactItemClass = getContactItemClass();
+const iconClass = getIconClass();
+---
+
+<ContactItem
+    icon={MapPinIcon}
+    text={address}
+    contactItemClass={contactItemClass}
+    iconClass={iconClass}
+/>

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

@@ -107,43 +107,16 @@
 
 import "../../style.ts";
 import Card from "../card/Card.astro";
-import Link from "../link/Link.astro";
-import type { BackgroundColor } from "../../src/common/backgrounds";
-import {
-	FacebookIcon,
-	GithubIcon,
-	LinkedinIcon,
-	MailIcon,
-	MapPinIcon,
-	PhoneIcon,
-	TwitterIcon,
-	WebsiteIcon,
-	WechatIcon,
-	WhatsappIcon,
-} from "../icons";
-
-export interface ContactProps {
-	address?: string;
-	background?: BackgroundColor;
-	class?: string;
-	compact?: boolean;
-	description?: string;
-	email?: string;
-	facebook?: string;
-	github?: string;
-	linkedin?: string;
-	phone?: string;
-	title?: string;
-	twitter?: string;
-	website?: string;
-	wechatQR?: any; // ImageSource 类型
-	whatsappQR?: any; // ImageSource 类型
-}
+import type { ContactProps } from "./props";
+import { getContactCombinedClasses } from "./class";
+import AddressItem from "./AddressItem.astro";
+import EmailItem from "./EmailItem.astro";
+import PhoneItem from "./PhoneItem.astro";
+import SocialMediaItem from "./SocialMediaItem.astro";
 
 const {
 	address,
-	background,
-	class: className = "",
+	background = "base-100",
 	compact,
 	description,
 	email,
@@ -158,209 +131,48 @@ const {
 	whatsappQR,
 } = Astro.props as ContactProps;
 
-// 构建自定义样式类（用于覆盖Card组件的默认样式）
-const customClasses = [
-	"cosy:shadow-lg",
-	"hover:cosy:shadow-xl",
-	"hover:cosy:bg-base-200",
-	className,
-]
-	.filter(Boolean)
-	.join(" ");
-
-// 联系信息项的样式
-const contactItemClass =
-	"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 socialLinksClass =
-	"cosy:flex cosy:gap-4 cosy:mt-6 cosy:pt-4 cosy:border-t cosy:border-base-300";
-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";
+// 获取样式类
+const customClasses = getContactCombinedClasses(Astro.props as ContactProps);
 ---
 
 <Card
-  title={title}
-  subtitle={description}
-  compact={compact}
-  background={background}
-  class={customClasses}>
-  <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} />
-          <Link href={`mailto:${email}`} variant="text" noUnderline={false}>
-            {email}
-          </Link>
-        </div>
-      )
-    }
-
-    {
-      facebook && (
-        <div class={contactItemClass}>
-          <FacebookIcon class={iconClass} />
-          <Link href={facebook} external variant="text" noUnderline={false}>
-            Facebook
-          </Link>
-        </div>
-      )
-    }
+    title={title}
+    subtitle={description}
+    compact={compact}
+    background={background}
+    padding="none"
+    class={customClasses}>
+    <div class="cosy:space-y-0 cosy:flex cosy:flex-col">
+        {address && <AddressItem address={address} />}
 
-    {
-      github && (
-        <div class={contactItemClass}>
-          <GithubIcon class={iconClass} />
-          <Link href={github} external variant="text" noUnderline={false}>
-            GitHub
-          </Link>
-        </div>
-      )
-    }
-
-    {
-      linkedin && (
-        <div class={contactItemClass}>
-          <LinkedinIcon class={iconClass} />
-          <Link href={linkedin} external variant="text" noUnderline={false}>
-            LinkedIn
-          </Link>
-        </div>
-      )
-    }
+        {email && <EmailItem email={email} />}
 
-    {
-      phone && (
-        <div class={contactItemClass}>
-          <PhoneIcon class={iconClass} />
-          <Link href={`tel:${phone}`} variant="text" noUnderline={false}>
-            {phone}
-          </Link>
-        </div>
-      )
-    }
+        {phone && <PhoneItem phone={phone} />}
+    </div>
 
     {
-      twitter && (
-        <div class={contactItemClass}>
-          <TwitterIcon class={iconClass} />
-          <Link href={twitter} external variant="text" noUnderline={false}>
-            Twitter
-          </Link>
-        </div>
-      )
+        Astro.slots.has('default') && (
+            <div class="cosy:mt-4">
+                <slot />
+            </div>
+        )
     }
 
     {
-      website && (
-        <div class={contactItemClass}>
-          <WebsiteIcon class={iconClass} />
-          <Link href={website} external variant="text" noUnderline={false}>
-            {website.replace(/^https?:\/\//, '')}
-          </Link>
-        </div>
-      )
+        (github ||
+            twitter ||
+            facebook ||
+            linkedin ||
+            wechatQR ||
+            whatsappQR) && (
+            <SocialMediaItem
+                github={github}
+                twitter={twitter}
+                facebook={facebook}
+                linkedin={linkedin}
+                wechatQR={wechatQR}
+                whatsappQR={whatsappQR}
+            />
+        )
     }
-  </div>
-
-  {
-    Astro.slots.has('default') && (
-      <div class="cosy:mt-4">
-        <slot />
-      </div>
-    )
-  }
-
-  {
-    (github || twitter || facebook || linkedin || wechatQR || whatsappQR) && (
-      <div class={socialLinksClass}>
-        {github && (
-          <Link
-            href={github}
-            external
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            aria-label="GitHub">
-            <GithubIcon />
-          </Link>
-        )}
-        {twitter && (
-          <Link
-            href={twitter}
-            external
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            aria-label="Twitter">
-            <TwitterIcon />
-          </Link>
-        )}
-        {facebook && (
-          <Link
-            href={facebook}
-            external
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            aria-label="Facebook">
-            <FacebookIcon />
-          </Link>
-        )}
-        {linkedin && (
-          <Link
-            href={linkedin}
-            external
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            aria-label="LinkedIn">
-            <LinkedinIcon />
-          </Link>
-        )}
-        {wechatQR && (
-          <Link
-            href="#"
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            hoverImage={wechatQR}
-            hoverImageAlt="微信二维码"
-            aria-label="微信">
-            <WechatIcon />
-          </Link>
-        )}
-        {whatsappQR && (
-          <Link
-            href="#"
-            btn
-            circle
-            size="sm"
-            class={socialLinkClass}
-            hoverImage={whatsappQR}
-            hoverImageAlt="WhatsApp 二维码"
-            aria-label="WhatsApp">
-            <WhatsappIcon />
-          </Link>
-        )}
-      </div>
-    )
-  }
 </Card>

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

@@ -0,0 +1,45 @@
+---
+/**
+ * ContactItem 组件用于显示单个联系信息项
+ */
+
+import "../../style.ts";
+import Link from "../link/Link.astro";
+import type { HTMLAttributes } from "astro/types";
+
+export interface ContactItemProps extends HTMLAttributes<"div"> {
+	icon: any; // 图标组件
+	text: string;
+	href?: string;
+	isExternal?: boolean;
+	contactItemClass: string;
+	iconClass: string;
+}
+
+const {
+	icon: IconComponent,
+	text,
+	href,
+	isExternal = false,
+	contactItemClass,
+	iconClass,
+	...rest
+} = Astro.props as ContactItemProps;
+---
+
+<div class={contactItemClass} {...rest}>
+    <IconComponent class={iconClass} />
+    {
+        href ? (
+            <Link
+                href={href}
+                external={isExternal}
+                variant="text"
+                noUnderline={false}>
+                {text}
+            </Link>
+        ) : (
+            <span class="cosy:text-base-content">{text}</span>
+        )
+    }
+</div>

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

@@ -0,0 +1,27 @@
+---
+/**
+ * EmailItem 组件用于显示邮箱信息
+ */
+
+import "../../style.ts";
+import ContactItem from "./ContactItem.astro";
+import { MailIcon } from "../icons";
+import { getContactItemClass, getIconClass } from "./class";
+
+export interface EmailItemProps {
+	email: string;
+}
+
+const { email } = Astro.props as EmailItemProps;
+
+const contactItemClass = getContactItemClass();
+const iconClass = getIconClass();
+---
+
+<ContactItem
+    icon={MailIcon}
+    text={email}
+    href={`mailto:${email}`}
+    contactItemClass={contactItemClass}
+    iconClass={iconClass}
+/>

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

@@ -0,0 +1,27 @@
+---
+/**
+ * PhoneItem 组件用于显示电话信息
+ */
+
+import "../../style.ts";
+import ContactItem from "./ContactItem.astro";
+import { PhoneIcon } from "../icons";
+import { getContactItemClass, getIconClass } from "./class";
+
+export interface PhoneItemProps {
+	phone: string;
+}
+
+const { phone } = Astro.props as PhoneItemProps;
+
+const contactItemClass = getContactItemClass();
+const iconClass = getIconClass();
+---
+
+<ContactItem
+    icon={PhoneIcon}
+    text={phone}
+    href={`tel:${phone}`}
+    contactItemClass={contactItemClass}
+    iconClass={iconClass}
+/>

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

@@ -0,0 +1,44 @@
+---
+/**
+ * SocialLink 组件用于显示单个社交媒体链接
+ */
+
+import "../../style.ts";
+import Link from "../link/Link.astro";
+import type { HTMLAttributes } from "astro/types";
+
+export interface SocialLinkProps extends HTMLAttributes<"a"> {
+	icon: any; // 图标组件
+	href: string;
+	ariaLabel: string;
+	isExternal?: boolean;
+	hoverImage?: any;
+	hoverImageAlt?: string;
+	socialLinkClass: string;
+}
+
+const {
+	icon: IconComponent,
+	href,
+	ariaLabel,
+	isExternal = true,
+	hoverImage,
+	hoverImageAlt,
+	socialLinkClass,
+	...rest
+} = Astro.props as SocialLinkProps;
+---
+
+<Link
+    href={href}
+    external={isExternal}
+    btn
+    circle
+    size="sm"
+    class={socialLinkClass}
+    aria-label={ariaLabel}
+    hoverImage={hoverImage}
+    hoverImageAlt={hoverImageAlt}
+    {...rest}>
+    <IconComponent />
+</Link>

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

@@ -0,0 +1,81 @@
+---
+/**
+ * SocialMediaItem 组件用于显示社交媒体链接
+ */
+
+import "../../style.ts";
+import SocialLink from "./SocialLink.astro";
+import {
+	FacebookIcon,
+	GithubIcon,
+	LinkedinIcon,
+	TwitterIcon,
+	WechatIcon,
+	WhatsappIcon,
+} from "../icons";
+
+export interface SocialMediaItemProps {
+	github?: string;
+	twitter?: string;
+	facebook?: string;
+	linkedin?: string;
+	wechatQR?: any;
+	whatsappQR?: any;
+}
+
+const { github, twitter, facebook, linkedin, wechatQR, whatsappQR } =
+	Astro.props as SocialMediaItemProps;
+---
+
+<div class="cosy:flex cosy:flex-row cosy:gap-2">
+    {
+        github && (
+            <SocialLink icon={GithubIcon} href={github} ariaLabel="GitHub" />
+        )
+    }
+    {
+        twitter && (
+            <SocialLink icon={TwitterIcon} href={twitter} ariaLabel="Twitter" />
+        )
+    }
+    {
+        facebook && (
+            <SocialLink
+                icon={FacebookIcon}
+                href={facebook}
+                ariaLabel="Facebook"
+            />
+        )
+    }
+    {
+        linkedin && (
+            <SocialLink
+                icon={LinkedinIcon}
+                href={linkedin}
+                ariaLabel="LinkedIn"
+            />
+        )
+    }
+    {
+        wechatQR && (
+            <SocialLink
+                icon={WechatIcon}
+                href="#"
+                ariaLabel="微信"
+                hoverImage={wechatQR}
+                hoverImageAlt="微信二维码"
+            />
+        )
+    }
+    {
+        whatsappQR && (
+            <SocialLink
+                icon={WhatsappIcon}
+                href="#"
+                ariaLabel="WhatsApp"
+                hoverImage={whatsappQR}
+                hoverImageAlt="WhatsApp 二维码"
+            />
+        )
+    }
+</div>

package/dist/src-astro/contact/class.ts

@@ -0,0 +1,38 @@
+import type { ContactProps } from "./props";
+
+/**
+ * 计算 Contact 组件的组合类名
+ * @param props Contact 组件的 props
+ * @returns 组合后的类名字符串
+ */
+export function getContactCombinedClasses(props: ContactProps): string {
+	const { class: className = "" } = props;
+
+	// 构建自定义样式类（用于覆盖Card组件的默认样式）
+	const customClasses = [
+		"cosy:shadow-lg",
+		"hover:cosy:shadow-xl",
+		"hover:cosy:bg-base-200",
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
+
+	return customClasses;
+}
+
+/**
+ * 获取联系信息项的样式类
+ * @returns 联系信息项的样式类
+ */
+export function getContactItemClass(): string {
+	return "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";
+}
+
+/**
+ * 获取图标样式类
+ * @returns 图标样式类
+ */
+export function getIconClass(): string {
+	return "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";
+}

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

@@ -1,2 +1,4 @@
 export { default as Contact } from "./Contact.astro";
-export type { ContactProps } from "./Contact.astro";
+export { default as ContactItem } from "./ContactItem.astro";
+export { default as SocialLink } from "./SocialLink.astro";
+export type { ContactProps } from "./props";