@coffic/cosy-ui 0.1.29 → 0.2.0

package/dist/components/containers/Main.astro

@@ -0,0 +1,167 @@
+---
+/**
+ * @component Main
+ * 
+ * @description
+ * Main 组件是页面的主要内容区域，使用 Container 组件提供响应式布局。
+ * 它适合作为页面的主体部分，自动处理不同屏幕尺寸下的布局和内边距。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 结构清晰 - 明确表示页面的主要内容区域，提高语义化
+ * 2. 响应式布局 - 在不同屏幕尺寸下自动调整内边距和宽度
+ * 3. 灵活配置 - 支持自定义容器尺寸、内边距和背景颜色
+ * 4. 与容器集成 - 无缝集成 Container 组件，保持布局一致性
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * ---
+ * import { Main } from '@coffic/cosy-ui';
+ * ---
+ * 
+ * <Main>
+ *   <h1>页面标题</h1>
+ *   <p>页面内容</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义容器尺寸：
+ * ```astro
+ * <Main size="lg">
+ *   <p>这是一个较宽的主内容区域</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义内边距：
+ * ```astro
+ * <Main verticalPadding="lg" padding="xl">
+ *   <p>这个主内容区域有更大的内边距</p>
+ * </Main>
+ * ```
+ * 
+ * 自定义背景颜色：
+ * ```astro
+ * <Main backgroundColor="primary">
+ *   <p>这个主内容区域有主题色背景</p>
+ * </Main>
+ * ```
+ */
+
+import Container from './Container.astro';
+
+// 导入样式
+import '../../app.css';
+
+export interface Props {
+  /**
+   * 容器大小
+   * @default "md"
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+  
+  /**
+   * 水平内边距（通过 Container 组件的 padding 属性设置）
+   * @default "md"
+   */
+  padding?: "none" | "sm" | "md" | "lg" | "xl";
+  
+  /**
+   * 垂直内边距
+   * @default "md"
+   */
+  verticalPadding?: "none" | "sm" | "md" | "lg" | "xl" | string;
+  
+  /**
+   * 是否居中显示内容
+   * @default true
+   */
+  centered?: boolean;
+  
+  /**
+   * 背景颜色
+   * @default undefined
+   */
+  backgroundColor?: "primary" | "secondary" | "tertiary" | "light" | "dark" | string;
+  
+  /**
+   * HTML id 属性
+   */
+  id?: string;
+  
+  /**
+   * 类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  size = 'md',
+  padding = 'md',
+  verticalPadding = "md",
+  centered = true,
+  backgroundColor,
+  id,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 处理垂直内边距
+const verticalPaddingClass = 
+  verticalPadding === "none" || verticalPadding === "sm" || 
+  verticalPadding === "md" || verticalPadding === "lg" || 
+  verticalPadding === "xl" 
+    ? `main-padding-${verticalPadding}` 
+    : "main-padding-custom";
+
+// 处理背景颜色
+const bgColorClass = backgroundColor && 
+  (backgroundColor === "primary" || backgroundColor === "secondary" || 
+   backgroundColor === "tertiary" || backgroundColor === "light" || 
+   backgroundColor === "dark")
+    ? `main-bg-${backgroundColor}`
+    : "";
+
+// 构建自定义样式
+const customStyle = 
+  (verticalPadding && verticalPaddingClass === "main-padding-custom") 
+    ? `padding-top: ${verticalPadding}; padding-bottom: ${verticalPadding};` 
+    : "";
+
+const customBgColor = 
+  (backgroundColor && !bgColorClass) 
+    ? `background-color: ${backgroundColor};` 
+    : "";
+
+const inlineStyle = (customStyle || customBgColor) 
+  ? `${customStyle} ${customBgColor}`.trim() 
+  : undefined;
+---
+
+<main
+  id={id}
+  class:list={[
+    "main-content",
+    verticalPaddingClass,
+    bgColorClass,
+    className,
+    classList
+  ]}
+  style={inlineStyle}
+  {...rest}
+>
+  <Container
+    size={size}
+    padding={padding}
+    centered={centered}
+    class="main-container"
+  >
+    <slot />
+  </Container>
+</main> 

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 '../icons';
+
+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/README.md

@@ -0,0 +1,37 @@
+# 数据展示组件 (Data Display Components)
+
+这个目录包含了专门用于数据展示的组件，主要用于展示结构化的数据内容。
+
+## 设计原则
+
+1. **数据优先**：以数据的展示和可读性为首要考虑
+2. **结构清晰**：保持数据结构的清晰和层次感
+3. **交互友好**：提供必要的数据交互功能
+
+## 包含的组件
+
+- `TeamMember.astro`: 团队成员展示组件
+- `TeamMembers.astro`: 团队成员列表组件
+- `Blog.astro`: 博客文章展示组件
+
+## 使用指南
+
+数据展示组件通常需要传入结构化的数据：
+
+```astro
+<TeamMembers>
+  <TeamMember
+    name="张三"
+    role="开发者"
+    avatar="/avatars/zhangsan.jpg"
+  />
+</TeamMembers>
+
+<Blog
+  title="文章标题"
+  author="作者"
+  date="2024-03-16"
+>
+  文章内容
+</Blog>
+``` 

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>
+