@coffic/cosy-ui 0.1.25 → 0.1.28

package/src/components/Image.astro

@@ -0,0 +1,251 @@
+---
+import { Image as AstroImage } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+
+interface Props {
+  /**
+   * 图片源，可以是本地图片或远程URL
+   */
+  src: ImageMetadata | string;
+  /**
+   * 图片的替代文本
+   */
+  alt: string;
+  /**
+   * 图片的宽度
+   */
+  width?: number;
+  /**
+   * 图片的高度
+   */
+  height?: number;
+  /**
+   * 图片的加载方式
+   * @default "lazy"
+   */
+  loading?: 'lazy' | 'eager';
+  /**
+   * 图片的填充方式
+   * @default "cover"
+   */
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /**
+   * 图片的位置
+   * @default "center"
+   */
+  objectPosition?: string;
+  /**
+   * 是否显示加载中的占位图
+   * @default true
+   */
+  showPlaceholder?: boolean;
+  /**
+   * 是否显示加载失败的错误图
+   * @default true
+   */
+  showError?: boolean;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+  /**
+   * 是否启用图片懒加载
+   * @default true
+   */
+  lazy?: boolean;
+  /**
+   * 图片的圆角大小
+   * @default "none"
+   */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+  /**
+   * 图片的阴影效果
+   * @default "none"
+   */
+  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * 图片的悬停效果
+   * @default "none"
+   */
+  hover?: 'none' | 'scale' | 'brightness' | 'blur';
+  /**
+   * 图片的过渡动画
+   * @default "none"
+   */
+  transition?: 'none' | 'fade' | 'slide' | 'zoom';
+}
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  loading = 'lazy',
+  objectFit = 'cover',
+  objectPosition = 'center',
+  showPlaceholder = true,
+  showError = true,
+  class: className = '',
+  lazy = true,
+  rounded = 'none',
+  shadow = 'none',
+  hover = 'none',
+  transition = 'none',
+} = Astro.props;
+
+// 处理类名
+const classes = [
+  'relative',
+  // 圆角
+  rounded !== 'none' && `rounded-${rounded}`,
+  // 阴影
+  shadow !== 'none' && `shadow-${shadow}`,
+  // 悬停效果
+  hover !== 'none' && {
+    'scale': 'hover:scale-105',
+    'brightness': 'hover:brightness-110',
+    'blur': 'hover:blur-sm',
+  }[hover],
+  // 过渡动画
+  transition !== 'none' && {
+    'fade': 'transition-opacity duration-300',
+    'slide': 'transition-transform duration-300',
+    'zoom': 'transition-all duration-300',
+  }[transition],
+  className,
+].filter(Boolean).join(' ');
+
+// 处理图片样式
+const imageStyles = {
+  objectFit,
+  objectPosition,
+};
+
+// 判断是否为本地图片
+const isLocalImage = typeof src !== 'string' && 'src' in src;
+---
+
+<div class={classes}>
+  <div class="relative w-full h-full">
+    {isLocalImage ? (
+      <AstroImage
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={loading}
+        class="w-full h-full opacity-0 transition-opacity duration-300"
+        style={imageStyles}
+      />
+    ) : (
+      <img
+        src={src}
+        alt={alt}
+        width={width}
+        height={height}
+        loading={loading}
+        class="w-full h-full opacity-0 transition-opacity duration-300"
+        style={imageStyles}
+      />
+    )}
+
+    {/* 加载占位图 */}
+    {showPlaceholder && (
+      <div class="absolute inset-0 bg-base-200 animate-pulse" />
+    )}
+
+    {/* 错误占位图 */}
+    {showError && (
+      <div class="absolute inset-0 bg-error/10 flex items-center justify-center hidden">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>
+      </div>
+    )}
+  </div>
+</div>
+
+<script>
+  // 处理图片加载状态
+  function handleImageLoad(img) {
+    // 移除加载占位图
+    const placeholder = img.parentElement?.querySelector('.animate-pulse');
+    if (placeholder) {
+      placeholder.classList.add('opacity-0');
+      setTimeout(() => {
+        placeholder.remove();
+      }, 300);
+    }
+
+    // 添加加载完成动画
+    img.classList.add('opacity-100');
+  }
+
+  // 处理图片加载错误
+  function handleImageError(img) {
+    // 移除加载占位图
+    const placeholder = img.parentElement?.querySelector('.animate-pulse');
+    if (placeholder) {
+      placeholder.classList.add('opacity-0');
+      setTimeout(() => {
+        placeholder.remove();
+      }, 300);
+    }
+
+    // 显示错误占位图
+    const errorPlaceholder = img.parentElement?.querySelector('.bg-error\\/10');
+    if (errorPlaceholder) {
+      errorPlaceholder.classList.remove('hidden');
+    }
+  }
+
+  // 初始化图片加载处理
+  function initializeImageHandlers() {
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+      if (img instanceof HTMLImageElement) {
+        // 如果图片已经加载完成
+        if (img.complete) {
+          handleImageLoad(img);
+        } else {
+          // 添加加载事件监听
+          img.addEventListener('load', () => handleImageLoad(img));
+          img.addEventListener('error', () => handleImageError(img));
+        }
+      }
+    });
+  }
+
+  // 页面加载时初始化
+  document.addEventListener('astro:page-load', initializeImageHandlers);
+  // 初始加载时也初始化
+  initializeImageHandlers();
+</script>
+
+<style>
+  /* 过渡动画 */
+  .transition-opacity {
+    transition-property: opacity;
+  }
+
+  .transition-transform {
+    transition-property: transform;
+  }
+
+  .transition-all {
+    transition-property: all;
+  }
+
+  /* 悬停效果 */
+  .hover\:scale-105:hover {
+    transform: scale(1.05);
+  }
+
+  .hover\:brightness-110:hover {
+    filter: brightness(1.1);
+  }
+
+  .hover\:blur-sm:hover {
+    filter: blur(4px);
+  }
+</style> 

package/src/components/Link.astro

@@ -1,16 +1,82 @@
 ---
-interface Props {
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {
 	href: string;
 	external?: boolean;
 	class?: string;
+	'class:list'?: any;
+	variant?: 'default' | 'primary' | 'secondary' | 'text' | 'cta' | 'ghost';
+	animation?: 'none' | 'hover-lift' | 'hover-glow' | 'hover-scale';
+	size?: 'sm' | 'md' | 'lg';
 }
 
-const { href, external = false, class: className = '' } = Astro.props;
+const {
+	href,
+	external = false,
+	variant = 'default',
+	animation = 'none',
+	size = 'md',
+	class: className = '',
+	'class:list': classList,
+	...rest
+} = Astro.props;
+
+// 基础样式
+const baseStyles = "link no-underline hover:no-underline transition-all duration-200 ease-in-out";
+
+// 尺寸变体
+const sizeStyles = {
+	sm: "px-4 py-2 text-sm",
+	md: "px-6 py-3 text-base",
+	lg: "px-8 py-4 text-lg"
+};
+
+// 主题变体
+const variantStyles = {
+	default: "link-hover text-current hover:text-primary",
+	primary: "rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-blue-800",
+	secondary: "rounded-lg bg-gray-100 text-gray-800 font-medium hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:bg-gray-300",
+	text: "text-current hover:text-primary underline hover:no-underline",
+	cta: "rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:from-blue-800 active:to-indigo-800",
+	ghost: "text-current hover:text-primary bg-transparent hover:bg-base-200/50 rounded-lg"
+};
+
+// 动画效果
+const animationStyles = {
+	none: "",
+	"hover-lift": "hover:-translate-y-0.5 hover:shadow-lg",
+	"hover-glow": "hover:shadow-[0_0_15px_rgba(59,130,246,0.5)]",
+	"hover-scale": "hover:scale-105"
+};
+
+// 合并所有样式
+const finalClassName = [
+	baseStyles,
+	sizeStyles[size],
+	variantStyles[variant],
+	animationStyles[animation],
+	className
+].join(' ');
 ---
 
 <a
 	href={href}
-	class={`link link-hover ${className} no-underline hover:no-underline`}
-	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}>
+	class:list={[finalClassName, classList]}
+	{...external ? { target: '_blank', rel: 'noopener noreferrer' } : {}}
+	{...rest}
+>
 	<slot />
 </a>
+
+<style>
+	/* 添加渐变动画 */
+	.bg-gradient-to-r {
+		background-size: 200% auto;
+		transition: background-position 0.3s ease-in-out;
+	}
+	
+	.bg-gradient-to-r:hover {
+		background-position: right center;
+	}
+</style>

package/src/components/Modal.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+    /**
+     * Modal 的唯一标识符
+     */
+    id: string;
+    /**
+     * 模态框的标题
+     */
+    title?: string;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const {
+    id,
+    title,
+    showCloseButton = true,
+    class: className = '',
+} = Astro.props;
+---
+
+<dialog id={id} class="modal">
+    <div class:list={["modal-box relative", className]}>
+        {showCloseButton && (
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+        )}
+        
+        {title && <h3 class="font-bold text-lg mb-4">{title}</h3>}
+        
+        <div class="modal-content">
+            <slot />
+        </div>
+
+        <div class="modal-action">
+            <slot name="actions" />
+        </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+        <button>关闭</button>
+    </form>
+</dialog>
+
+<script define:vars={{ id }}>
+// 为了方便使用，我们提供一些辅助方法
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById(id);
+    if (!modal) return;
+
+    // 为所有触发这个模态框的按钮添加点击事件
+    document.querySelectorAll(`[data-modal-target="${id}"]`).forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            modal.showModal();
+        });
+    });
+});
+</script> 

package/src/components/TeamMember.astro

@@ -0,0 +1,68 @@
+---
+import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
+import Link from './Link.astro';
+
+interface SocialLink {
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
+}
+
+export interface Props {
+  name: string;
+  role: string;
+  avatar: ImageMetadata | string;
+  bio: string;
+  socialLinks?: SocialLink[];
+  class?: string;
+}
+
+const { name, role, avatar, bio, socialLinks, class: className = '' } = Astro.props;
+
+const socialIcons = {
+  github: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>`,
+  twitter: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`,
+  linkedin: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>`,
+  website: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1 16.057v-3.05c.959-.69 2-1.367 2-3.007 0-2.233-1.5-3-2-3s-2 .767-2 3c0 1.64 1.041 2.317 2 3.007v3.05c-6.497 1.199-10 3.777-10 6.443h20c0-2.666-3.503-5.244-10-6.443z"/></svg>`,
+  email: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"/><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"/></svg>`
+} as const;
+---
+
+<div class:list={["card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow duration-300", className]}>
+  <figure class="px-6 pt-6">
+    {typeof avatar === 'string' ? (
+      <img
+        src={avatar}
+        alt={`${name}'s avatar`}
+        class="rounded-xl w-48 h-48 object-cover"
+      />
+    ) : (
+      <Image
+        src={avatar}
+        alt={`${name}'s avatar`}
+        class="rounded-xl w-48 h-48 object-cover"
+      />
+    )}
+  </figure>
+  <div class="card-body items-center text-center">
+    <h2 class="card-title text-2xl font-bold">{name}</h2>
+    <p class="text-primary font-medium">{role}</p>
+    <p class="text-base-content/80">{bio}</p>
+    
+    {socialLinks && socialLinks.length > 0 && (
+      <div class="flex gap-4 mt-4">
+        {socialLinks.map(link => (
+          <Link
+            href={link.url}
+            external
+            variant="ghost"
+            class="p-2 hover:text-primary"
+            aria-label={`Visit ${name}'s ${link.platform} profile`}
+          >
+            <Fragment set:html={socialIcons[link.platform]} />
+          </Link>
+        ))}
+      </div>
+    )}
+  </div>
+</div> 

package/src/components/TeamMembers.astro

@@ -0,0 +1,43 @@
+---
+import type { ImageMetadata } from 'astro';
+import TeamMember from './TeamMember.astro';
+
+interface SocialLink {
+  platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+  url: string;
+}
+
+interface TeamMemberData {
+  name: string;
+  role: string;
+  avatar: ImageMetadata | string;
+  bio: string;
+  socialLinks?: SocialLink[];
+}
+
+interface Props {
+  members: TeamMemberData[];
+  columns?: 2 | 3 | 4;
+  class?: string;
+}
+
+const { 
+  members,
+  columns = 3,
+  class: className = ''
+} = Astro.props;
+
+const gridCols = {
+  2: 'grid-cols-1 md:grid-cols-2',
+  3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+  4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+} as const;
+---
+
+<div class:list={["w-full", className]}>
+  <div class:list={["grid gap-8", gridCols[columns]]}>
+    {members.map(member => (
+      <TeamMember {...member} />
+    ))}
+  </div>
+</div> 

package/src/components/ThemeItem.astro

@@ -1,14 +1,21 @@
 ---
+import Button from './Button.astro';
+
 interface Props {
-  theme: string;
-  label: string;
+	theme: string;
+	label: string;
 }
 
 const { theme, label } = Astro.props;
 ---
 
-<button
-  class="btn btn-sm w-full text-left justify-start"
-  data-set-theme={theme}>
-  {label}
-</button> 
+<Button
+	variant="ghost"
+	size="sm"
+	block
+	class="text-left justify-start"
+	data-set-theme={theme}
+>
+	{label}
+</Button>
+

package/src/env.d.ts

@@ -1 +0,0 @@
-/// <reference types="astro/client" />

package/src/types/footer.ts

@@ -1,11 +1,33 @@
-export interface FooterLink {
-	key: string;
-	href: string;
-	external: boolean;
-	text: string;
+export interface Logo {
+    src: string;
+    alt: string;
 }
 
-export interface FooterNavGroup {
-	titleKey: string;
-	links: FooterLink[];
+export interface Product {
+    name: string;
+    href: string;
+    external?: boolean;
 }
+
+export interface SocialLink {
+    name: string;
+    url: string;
+    platform: string;
+}
+
+export interface FooterProps {
+    siteName: string;
+    homeLink: string;
+    slogan: string;
+    company: string;
+    copyright: string;
+    inspirationalSlogan: string;
+    icp?: string;
+    logo?: Logo;
+    products?: Product[];
+    aboutLink?: string;
+    contactLink?: string;
+    termsLink?: string;
+    privacyLink?: string;
+    socialLinks?: SocialLink[];
+} 

package/src/utils/social.ts

@@ -4,6 +4,13 @@ interface PlatformConfig {
 	domains: string[];
 }
 
+// 社交链接类型
+export interface SocialLink {
+	name: string;
+	url: string;
+	platform: string;
+}
+
 // 处理后的社交链接类型
 export interface ProcessedSocialLink {
 	url: string;
@@ -69,21 +76,21 @@ function detectPlatform(url: string): [string, PlatformConfig] | null {
 }
 
 // 处理社交链接
-export function processSocialLink(url: string): ProcessedSocialLink {
-	const platformInfo = detectPlatform(url);
+export function processSocialLink(link: SocialLink): ProcessedSocialLink {
+	const platformInfo = detectPlatform(link.url);
 
 	if (!platformInfo) {
 		// 如果无法识别平台，返回默认值
 		return {
-			url,
-			name: new URL(url).hostname,
+			url: link.url,
+			name: link.name,
 			platform: 'default',
 		};
 	}
 
 	const [platform, config] = platformInfo;
 	return {
-		url,
+		url: link.url,
 		name: config.name,
 		platform,
 	};

package/src/components/Component.astro

@@ -1,10 +0,0 @@
----
-// Write your component code in this file!
-type Props = {
-	message: string;
-};
-
-const { message } = Astro.props;
----
-
-<div>Hello {message}!</div>