@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/containers/Section.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * Section组件
+ * 
+ * 一个用于页面内容区块的组件，支持不同的内边距、背景和间距
+ * 
+ * @example
+ * ```astro
+ * <Section>
+ *   <h2>默认区块</h2>
+ *   <p>内容将被包裹在一个合适的区块中</p>
+ * </Section>
+ * 
+ * <Section padding="lg" background="gray" centered={true}>
+ *   <h2>自定义区块</h2>
+ *   <p>大内边距，灰色背景，内容居中</p>
+ * </Section>
+ * ```
+ */
+
+import type { HTMLAttributes } from 'astro/types';
+import Container from './Container.astro';
+
+interface Props extends HTMLAttributes<'section'> {
+  /**
+   * 内边距大小
+   * @default "md"
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * 背景颜色
+   * @default "transparent"
+   */
+  background?: 'transparent' | 'white' | 'gray' | 'primary' | 'secondary' | 'dark';
+  
+  /**
+   * 是否使用容器包裹内容
+   * @default true
+   */
+  container?: boolean;
+  
+  /**
+   * 容器尺寸，仅当container为true时有效
+   * @default "md"
+   */
+  containerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  
+  /**
+   * 内容是否居中
+   * @default false
+   */
+  centered?: boolean;
+  
+  /**
+   * 自定义类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+  
+  /**
+   * 自定义ID
+   */
+  id?: string;
+  
+  /**
+   * 自定义内联样式
+   */
+  style?: string;
+}
+
+const {
+  padding = 'md',
+  background = 'transparent',
+  container = true,
+  containerSize = 'md',
+  centered = false,
+  class: className = '',
+  'class:list': classList,
+  id,
+  style,
+  ...rest
+} = Astro.props;
+
+// 内边距映射
+const paddingClasses = {
+  'none': 'py-0',
+  'sm': 'py-6',
+  'md': 'py-12',
+  'lg': 'py-16',
+  'xl': 'py-24'
+};
+
+// 背景颜色映射
+const backgroundClasses = {
+  'transparent': 'bg-transparent',
+  'white': 'bg-white',
+  'gray': 'bg-gray-100',
+  'primary': 'bg-blue-50',
+  'secondary': 'bg-gray-50',
+  'dark': 'bg-gray-900 text-white'
+};
+
+// 构建最终类名
+const sectionClasses = [
+  paddingClasses[padding as keyof typeof paddingClasses],
+  backgroundClasses[background as keyof typeof backgroundClasses],
+  className
+].join(' ');
+
+// 内容类名
+const contentClasses = centered ? 'text-center' : '';
+---
+
+<section id={id} class:list={[sectionClasses, classList]} style={style} {...rest}>
+  {container ? (
+    <Container size={containerSize} class={contentClasses}>
+      <slot />
+    </Container>
+  ) : (
+    <div class={contentClasses}>
+      <slot />
+    </div>
+  )}
+</section>
+
+<style>
+  /* 背景颜色 */
+  .bg-transparent { background-color: transparent; }
+  .bg-white { background-color: #ffffff; }
+  .bg-gray-50 { background-color: #f9fafb; }
+  .bg-gray-100 { background-color: #f3f4f6; }
+  .bg-blue-50 { background-color: #eff6ff; }
+  .bg-gray-900 { background-color: #111827; }
+  
+  /* 文字颜色 */
+  .text-white { color: #ffffff; }
+  
+  /* 文本对齐 */
+  .text-center { text-align: center; }
+</style> 

package/dist/components/containers/index.ts

@@ -0,0 +1,3 @@
+export { default as Container } from './Container.astro';
+export { default as Section } from './Section.astro';
+export { default as Main } from './Main.astro';

package/dist/components/data-display/Blog.astro

@@ -0,0 +1,195 @@
+---
+import { UserIcon, CalendarIcon } from '../../index';
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  author?: string;
+  date?: Date;
+  cover?: {
+    src: string;
+    alt?: string;
+  };
+  tags?: string[];
+}
+
+const {
+  title,
+  subtitle,
+  author,
+  date,
+  cover,
+  tags = [],
+} = Astro.props;
+
+// 格式化日期
+const formatDate = (date?: Date) => {
+  if (!date) return '';
+  return new Intl.DateTimeFormat('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }).format(date);
+};
+---
+
+<article class="article">
+  <header class="article-header">
+    {cover && (
+      <div class="cover-container">
+        <img
+          src={cover.src}
+          alt={cover.alt || title}
+          class="cover-image"
+        />
+      </div>
+    )}
+    
+    <div class="header-content">
+      <h1 class="article-title">{title}</h1>
+      {subtitle && (
+        <p class="article-subtitle">{subtitle}</p>
+      )}
+      
+      <div class="article-meta">
+        {author && (
+          <div class="meta-item">
+            <UserIcon size="16px" />
+            <span>{author}</span>
+          </div>
+        )}
+        
+        {date && (
+          <div class="meta-item">
+            <CalendarIcon size="16px" />
+            <time datetime={date.toISOString()}>{formatDate(date)}</time>
+          </div>
+        )}
+      </div>
+
+      {tags.length > 0 && (
+        <div class="article-tags">
+          {tags.map((tag: string) => (
+            <span class="tag">{tag}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  </header>
+
+  <div class="article-content">
+    <slot />
+  </div>
+</article>
+
+<style>
+  /* 基础样式 */
+  .article {
+    container-type: inline-size;
+  }
+
+  /* 文章头部 */
+  .article-header {
+    margin-bottom: 2rem;
+  }
+
+  /* 封面图片 */
+  .cover-container {
+    position: relative;
+    width: 100%;
+    height: 300px;
+    margin-bottom: 1.5rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .cover-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* 标题和副标题 */
+  .header-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .article-title {
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.025em;
+  }
+
+  .article-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-secondary, rgba(0, 0, 0, 0.7));
+  }
+
+  /* 元数据 */
+  .article-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  /* 标签 */
+  .article-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .tag {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid var(--border-color, #e2e8f0);
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+
+  /* 文章内容 */
+  .article-content {
+    max-width: none;
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  /* 响应式调整 */
+  @media (min-width: 768px) {
+    .article-title {
+      font-size: 3rem;
+    }
+
+    .cover-container {
+      height: 400px;
+    }
+  }
+
+  /* 暗色主题适配 */
+  @media (prefers-color-scheme: dark) {
+    .article-subtitle {
+      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+    }
+
+    .article-meta {
+      color: var(--text-secondary, rgba(255, 255, 255, 0.6));
+    }
+
+    .tag {
+      border-color: var(--border-color, #2d3748);
+    }
+  }
+</style> 

package/dist/components/data-display/TeamMember.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * @component TeamMember
+ * 
+ * @description
+ * TeamMember 组件用于展示单个团队成员的信息，包括姓名、职位、头像、简介和社交媒体链接。
+ * 组件采用卡片式设计，支持悬停效果，并可以链接到成员的社交媒体账号。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 个人展示 - 突出展示团队成员的个人信息和形象
+ * 2. 社交连接 - 提供社交媒体链接，方便与团队成员建立联系
+ * 3. 视觉一致性 - 使用卡片组件确保与整体设计风格一致
+ * 4. 交互反馈 - 悬停时提供视觉反馈，增强用户体验
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <TeamMember
+ *   name="张三"
+ *   role="前端开发工程师"
+ *   avatar="/images/avatars/zhangsan.jpg"
+ *   bio="拥有5年前端开发经验，专注于React和Vue生态系统。"
+ * />
+ * ```
+ * 
+ * 包含社交媒体链接：
+ * ```astro
+ * <TeamMember
+ *   name="李四"
+ *   role="UI设计师"
+ *   avatar="/images/avatars/lisi.jpg"
+ *   bio="专注于用户体验和界面设计，热爱创造直观易用的产品。"
+ *   socialLinks={[
+ *     { platform: 'github', url: 'https://github.com/lisi' },
+ *     { platform: 'twitter', url: 'https://twitter.com/lisi' },
+ *     { platform: 'linkedin', url: 'https://linkedin.com/in/lisi' }
+ *   ]}
+ * />
+ * ```
+ */
+
+import Link from '../base/Link.astro';
+import SocialIcon from '../icons/SocialIcon.astro';
+import Image from '../base/Image.astro';
+
+// 导入样式
+import '../../app.css';
+
+interface SocialLink {
+	/**
+	 * 社交媒体平台
+	 */
+	platform: 'github' | 'twitter' | 'linkedin' | 'website' | 'email';
+	/**
+	 * 社交媒体链接URL
+	 */
+	url: string;
+}
+
+// 自定义图片元数据接口，替代 astro 的 ImageMetadata
+interface CustomImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: string;
+}
+
+export interface Props {
+	/**
+	 * 团队成员姓名
+	 */
+	name: string;
+	/**
+	 * 团队成员职位
+	 */
+	role: string;
+	/**
+	 * 团队成员头像
+	 */
+	avatar: CustomImageMetadata | string;
+	/**
+	 * 团队成员简介
+	 */
+	bio: string;
+	/**
+	 * 社交媒体链接
+	 */
+	socialLinks?: SocialLink[];
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
+}
+
+const { name, role, avatar, bio, socialLinks, class: className = '' } = Astro.props;
+---
+
+<div class:list={['team-member-card', className]}>
+	<figure class="team-member-avatar-container">
+		<Image 
+			src={avatar}
+			alt={`${name}'s avatar`}
+			width={192}
+			height={192}
+			rounded="xl"
+			transition="fade"
+			hover="brightness"
+			class="team-member-avatar"
+		/>
+	</figure>
+	<div class="team-member-content">
+		<h2 class="team-member-name">{name}</h2>
+		<p class="team-member-role">{role}</p>
+		<p class="team-member-bio">{bio}</p>
+
+		{
+			socialLinks && socialLinks.length > 0 && (
+				<div class="team-member-social">
+					{socialLinks.map((link: SocialLink) => (
+						<Link
+							href={link.url}
+							external
+							variant="ghost"
+							class="team-member-social-link"
+							aria-label={`Visit ${name}'s ${link.platform} profile`}>
+							<SocialIcon platform={link.platform} class="team-member-social-icon" />
+						</Link>
+					))}
+				</div>
+			)
+		}
+	</div>
+</div>
+

package/dist/components/data-display/TeamMembers.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * @component TeamMembers
+ * 
+ * @description
+ * TeamMembers 组件用于展示团队成员列表，以网格布局呈现多个 TeamMember 组件。
+ * 支持响应式布局，可以根据屏幕大小自动调整列数。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 一致性展示 - 以统一的卡片形式展示团队成员信息
+ * 2. 响应式布局 - 在不同屏幕尺寸下自动调整列数
+ * 3. 灵活配置 - 支持自定义列数和样式
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <TeamMembers members={teamData} />
+ * ```
+ * 
+ * 自定义列数：
+ * ```astro
+ * <TeamMembers members={teamData} columns={2} />
+ * ```
+ * 
+ * 添加自定义类名：
+ * ```astro
+ * <TeamMembers members={teamData} class="mt-8" />
+ * ```
+ */
+
+import TeamMember from './TeamMember.astro';
+
+// 导入样式
+import '../../app.css';
+
+// 自定义图片元数据接口
+interface ImageMetadata {
+  src: string;
+  width: number;
+  height: number;
+  format: string;
+}
+
+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[];
+  /**
+   * 网格列数
+   * @default 3
+   */
+  columns?: 2 | 3 | 4;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { 
+  members,
+  columns = 3,
+  class: className = ''
+} = Astro.props;
+
+// 使用类型断言确保 columns 是有效的键
+const columnsValue = columns as 2 | 3 | 4;
+
+// 根据列数生成对应的类名
+const getGridClasses = (cols: 2 | 3 | 4) => {
+  const baseClass = 'team-members-cols-1';
+  const mdClass = 'team-members-cols-md-2';
+  const lgClass = cols === 4 ? 'team-members-cols-lg-4' : 'team-members-cols-lg-3';
+  
+  return [baseClass, mdClass, lgClass];
+};
+---
+
+<div class:list={["team-members-container", className]}>
+  <div class:list={["team-members-grid", ...getGridClasses(columnsValue)]}>
+    {members.map((member: TeamMemberData, index: number) => (
+      <div class="team-members-animate">
+        <TeamMember {...member} />
+      </div>
+    ))}
+  </div>
+</div> 

package/dist/components/display/Banner.astro

@@ -0,0 +1,57 @@
+---
+/**
+ * @component Banner
+ * 
+ * @description
+ * Banner 组件用于在页面中展示醒目的横幅信息，通常用于展示重要的标语、公告或营销信息。
+ * 组件设计简洁大方，具有平滑的动画效果，能够吸引用户注意力。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 视觉冲击力 - 使用大号字体和醒目的背景，确保信息能够被用户注意到
+ * 2. 简洁明了 - 简单的布局和充足的留白，让信息更容易被理解
+ * 3. 动态效果 - 使用淡入和上滑动画，增强用户体验
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可读性
+ * 
+ * 视觉特点：
+ * - 圆角设计：柔和的视觉效果
+ * - 悬停效果：轻微放大和阴影增强，提供交互反馈
+ * - 动画效果：淡入和上滑动画，增强视觉吸引力
+ * - 模糊背景：半透明背景配合模糊效果，现代感强
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Banner>欢迎使用我们的服务</Banner>
+ * ```
+ * 
+ * 在页脚中使用：
+ * ```astro
+ * <footer>
+ *   <Banner>构建美好的数字体验</Banner>
+ * </footer>
+ * ```
+ * 
+ * @slots
+ * @slot default - Banner 中显示的文本内容
+ * 
+ * @accessibility
+ * - 使用适当的字体大小和行高，确保文本可读性
+ * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
+ */
+
+// 导入样式
+import '../../app.css';
+---
+
+<div class="banner-container">
+	<div class="banner">
+		<div class="banner-content">
+			<div class="banner-text">
+				<p class="banner-message">
+					<slot />
+				</p>
+			</div>
+		</div>
+	</div>
+</div>