@coffic/cosy-ui 0.1.27 → 0.1.29

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.29",
   "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,12 +22,21 @@ const {
 	termsLink,
 	privacyLink,
 	socialLinks = [],
-} = Astro.props;
+	teamLink,
+	careersLink,
+	newsLink,
+	historyLink,
+	partnersLink,
+	blogLink,
+	faqLink,
+	mediaLink,
+	techStackLink,
+}: Props = Astro.props;
 
 const currentYear = new Date().getFullYear();
 
 // 处理社交链接
-const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
+const processedSocialLinks = socialLinks.map((url) => processSocialLink(url));
 ---
 
 <footer class="bg-base-200/50 dark:bg-base-300/50 z-50 backdrop-blur-md">
@@ -66,11 +78,11 @@ const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
 
 		{
 			products.length > 0 && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+				<nav class="place-self-start text-center flex flex-col items-center min-h-[200px]">
 					<h6 class="footer-title">产品</h6>
-					<div class="flex flex-col gap-2">
+					<div class="flex flex-col">
 						{products.map((product) => (
-							<Link href={product.href} external={product.external}>
+							<Link href={product.href} external={product.external} size="sm">
 								{product.name}
 							</Link>
 						))}
@@ -80,12 +92,21 @@ const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
 		}
 
 		{
-			(aboutLink || contactLink) && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+			(aboutLink || contactLink || teamLink || careersLink || newsLink || historyLink || partnersLink || blogLink || faqLink || mediaLink || techStackLink) && (
+				<nav class="place-self-start text-center flex flex-col items-center min-h-[200px]">
 					<h6 class="footer-title">关于</h6>
-					<div class="flex flex-col gap-2">
-						{aboutLink && <Link href={aboutLink}>关于我们</Link>}
-						{contactLink && <Link href={contactLink}>联系我们</Link>}
+					<div class="flex flex-col">
+						{aboutLink && <Link href={aboutLink} size="sm">关于我们</Link>}
+						{teamLink && <Link href={teamLink} size="sm">团队介绍</Link>}
+						{careersLink && <Link href={careersLink} size="sm">加入我们</Link>}
+						{newsLink && <Link href={newsLink} size="sm">新闻动态</Link>}
+						{historyLink && <Link href={historyLink} size="sm">发展历程</Link>}
+						{partnersLink && <Link href={partnersLink} size="sm">合作伙伴</Link>}
+						{blogLink && <Link href={blogLink} size="sm">技术博客</Link>}
+						{techStackLink && <Link href={techStackLink} size="sm">技术栈</Link>}
+						{faqLink && <Link href={faqLink} size="sm">常见问题</Link>}
+						{mediaLink && <Link href={mediaLink} size="sm">媒体报道</Link>}
+						{contactLink && <Link href={contactLink} size="sm">联系我们</Link>}
 					</div>
 				</nav>
 			)
@@ -93,11 +114,11 @@ const processedSocialLinks = socialLinks.map((link) => processSocialLink(link));
 
 		{
 			(termsLink || privacyLink) && (
-				<nav class="place-self-center text-center flex flex-col items-center min-h-[200px]">
+				<nav class="place-self-start text-center flex flex-col items-center min-h-[200px]">
 					<h6 class="footer-title">法律</h6>
-					<div class="flex flex-col gap-2">
-						{termsLink && <Link href={termsLink}>服务条款</Link>}
-						{privacyLink && <Link href={privacyLink}>隐私政策</Link>}
+					<div class="flex flex-col">
+						{termsLink && <Link href={termsLink} size="sm">服务条款</Link>}
+						{privacyLink && <Link href={privacyLink} size="sm">隐私政策</Link>}
 					</div>
 				</nav>
 			)

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,36 @@
+export interface Logo {
+    src: string;
+    alt: string;
+}
+
+export interface Product {
+    name: string;
+    href: string;
+    external?: boolean;
+}
+
+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?: string[];
+    teamLink?: string;
+    careersLink?: string;
+    newsLink?: string;
+    historyLink?: string;
+    partnersLink?: string;
+    blogLink?: string;
+    faqLink?: string;
+    mediaLink?: string;
+    techStackLink?: string;
+} 

package/src/utils/social.ts

@@ -75,15 +75,15 @@ export function processSocialLink(url: string): ProcessedSocialLink {
 	if (!platformInfo) {
 		// 如果无法识别平台，返回默认值
 		return {
-			url,
-			name: new URL(url).hostname,
+			url: url,
+			name: '社交链接',
 			platform: 'default',
 		};
 	}
 
 	const [platform, config] = platformInfo;
 	return {
-		url,
+		url: url,
 		name: config.name,
 		platform,
 	};