@coffic/cosy-ui 0.1.27 → 0.1.28

package/index.ts

@@ -9,6 +9,7 @@ export { default as CodeBlock } from './src/components/CodeBlock.astro';
 export { default as Footer } from './src/components/Footer.astro';
 export { default as Header } from './src/components/Header.astro';
 export { default as Hero } from './src/components/Hero.astro';
+export { default as Image } from './src/components/Image.astro';
 export { default as Link } from './src/components/Link.astro';
 export { default as Modal } from './src/components/Modal.astro';
 export { default as SocialIcon } from './src/components/SocialIcon.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffic/cosy-ui",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "description": "A astro component library",
   "repository": {
     "url": "https://github.com/CofficLab/cosy-ui"

package/src/components/Alert.astro

@@ -40,7 +40,7 @@ const icons = {
 
 <div class={`alert ${alertClass} ${className}`} role="alert">
   <div class="flex items-center gap-2">
-    <Fragment set:html={icons[type]} />
+    <div set:html={icons[type]} />
     <div class="flex-1">
       {title && <h3 class="font-bold">{title}</h3>}
       <div><slot /></div>

package/src/components/Footer.astro

@@ -3,6 +3,9 @@ import { processSocialLink } from '../utils/social';
 import Link from './Link.astro';
 import Banner from './Banner.astro';
 import SocialIcon from './SocialIcon.astro';
+import type { FooterProps } from '../types/footer';
+
+interface Props extends FooterProps {}
 
 const {
 	siteName,
@@ -19,7 +22,7 @@ const {
 	termsLink,
 	privacyLink,
 	socialLinks = [],
-} = Astro.props;
+}: Props = Astro.props;
 
 const currentYear = new Date().getFullYear();
 

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/env.d.ts

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

package/src/types/footer.ts

@@ -0,0 +1,33 @@
+export interface Logo {
+    src: string;
+    alt: string;
+}
+
+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,
 	};