@coffic/cosy-ui 0.1.28 → 0.2.0

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/data-display/index.ts

@@ -0,0 +1,3 @@
+export { default as TeamMember } from './TeamMember.astro';
+export { default as TeamMembers } from './TeamMembers.astro';
+export { default as Blog } from './Blog.astro'; 

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>

package/dist/components/display/Card.astro

@@ -0,0 +1,135 @@
+---
+/**
+ * @component Card
+ * 
+ * @description
+ * Card 组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。
+ * 组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 视觉层次感 - 通过阴影、悬停效果和微妙的动画创造深度感
+ * 2. 内容聚焦 - 简洁的布局让用户关注卡片内容
+ * 3. 交互反馈 - 悬停和点击时提供明确的视觉反馈
+ * 4. 适应性强 - 响应式设计，适应不同屏幕尺寸
+ * 
+ * 视觉特点：
+ * - 半透明背景：现代感强，适合叠加在各种背景上
+ * - 模糊效果：背景模糊增强内容可读性
+ * - 光效设计：顶部有微妙的光晕效果，增强立体感
+ * - 悬停动画：轻微放大和阴影增强，提供交互反馈
+ * - 图片缩放：图片在悬停时轻微放大，增强视觉吸引力
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Card 
+ *   title="卡片标题" 
+ *   subtitle="卡片描述文本"
+ * >
+ *   卡片内容
+ * </Card>
+ * ```
+ * 
+ * 带图片的卡片：
+ * ```astro
+ * <Card 
+ *   title="产品名称" 
+ *   subtitle="产品描述" 
+ *   imageUrl="/path/to/image.jpg"
+ * >
+ *   其他产品信息
+ * </Card>
+ * ```
+ * 
+ * 可点击的卡片（链接）：
+ * ```astro
+ * <Card 
+ *   title="文章标题" 
+ *   subtitle="文章摘要" 
+ *   imageUrl="/path/to/image.jpg"
+ *   href="/articles/article-slug"
+ * />
+ * ```
+ * 
+ * @props
+ * @prop {string} [title] - 卡片标题
+ * @prop {string} [subtitle] - 卡片副标题或描述
+ * @prop {string} [imageUrl] - 卡片顶部图片的URL
+ * @prop {string} [href] - 如果提供，卡片将变成可点击的链接
+ * 
+ * @slots
+ * @slot default - 卡片的主要内容区域
+ * 
+ * @accessibility
+ * - 使用语义化HTML结构
+ * - 当作为链接使用时，确保提供有意义的文本内容
+ * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
+ */
+
+// 导入样式
+import '../../app.css';
+
+interface Props {
+    title?: string;
+    subtitle?: string;
+    imageUrl?: string;
+    href?: string;
+}
+
+const { title, subtitle, imageUrl, href } = Astro.props;
+---
+
+<div class="group perspective-1000">
+    <div class:list={[
+        "card",
+        href && "cursor-pointer",
+        "motion-safe:animate-fadeIn"
+    ]}>
+        {href ? (
+            <a href={href} class="card-body">
+                {imageUrl && (
+                    <figure>
+                        <img
+                            src={imageUrl}
+                            alt={title}
+                        />
+                    </figure>
+                )}
+                {title && (
+                    <h2 class="card-title">
+                        {title}
+                    </h2>
+                )}
+                {subtitle && (
+                    <p>
+                        {subtitle}
+                    </p>
+                )}
+                <slot />
+            </a>
+        ) : (
+            <div class="card-body">
+                {imageUrl && (
+                    <figure>
+                        <img
+                            src={imageUrl}
+                            alt={title}
+                        />
+                    </figure>
+                )}
+                {title && (
+                    <h2 class="card-title">
+                        {title}
+                    </h2>
+                )}
+                {subtitle && (
+                    <p>
+                        {subtitle}
+                    </p>
+                )}
+                <slot />
+            </div>
+        )}
+    </div>
+</div> 

package/dist/components/display/CodeBlock.astro

@@ -0,0 +1,147 @@
+---
+/**
+ * @component CodeBlock
+ * 
+ * @description
+ * CodeBlock 组件用于在页面中展示格式化的代码片段，支持语法高亮、行号显示和代码复制功能。
+ * 组件设计简洁美观，提供良好的代码可读性和用户交互体验。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 可读性优先 - 清晰的字体、合适的间距和语法高亮，确保代码易于阅读
+ * 2. 功能完备 - 支持行号显示、代码复制等实用功能
+ * 3. 视觉一致性 - 与整体设计系统保持一致的视觉风格
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的可用性
+ * 
+ * 视觉特点：
+ * - 语法高亮：使用北欧风格的配色方案，柔和且易于阅读
+ * - 行号显示：可选的行号显示，帮助定位代码位置
+ * - 标题栏：可选的标题栏，显示文件名或代码类型
+ * - 复制按钮：便捷的代码复制功能，带有状态反馈
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <CodeBlock code={`console.log('Hello, world!');`} lang="js" />
+ * ```
+ * 
+ * 带标题和行号：
+ * ```astro
+ * <CodeBlock 
+ *   code={`function greet(name) {\n  return 'Hello, ' + name + '!';\n}`}
+ *   lang="js"
+ *   title="greeting.js"
+ *   showLineNumbers={true}
+ * />
+ * ```
+ * 
+ * @props
+ * @prop {string} code - 要显示的代码字符串
+ * @prop {string} [lang="plaintext"] - 代码语言，用于语法高亮
+ * @prop {string} [title] - 代码块的标题，通常是文件名
+ * @prop {boolean} [showLineNumbers=true] - 是否显示行号
+ * 
+ * @accessibility
+ * - 使用语义化HTML结构
+ * - 复制按钮提供清晰的视觉反馈
+ * - 代码使用等宽字体，确保对齐和可读性
+ */
+
+// 导入样式
+import '../../app.css';
+
+interface Props {
+  code: string;
+  lang?: string;
+  title?: string;
+  showLineNumbers?: boolean;
+}
+
+const {
+  code,
+  lang = 'plaintext',
+  title,
+  showLineNumbers = true,
+} = Astro.props;
+
+// 移除代码字符串开头和结尾的空行
+const trimmedCode = code.trim();
+
+// 生成行号
+const lines = trimmedCode.split('\n');
+const lineNumbers = Array.from({ length: lines.length }, (_, i) => i + 1);
+---
+
+<div class="code-block not-prose">
+  {/* 标题栏 */}
+  {title && (
+    <div class="code-block-header">
+      <span class="code-block-title">{title}</span>
+      <button
+        class="copy-button"
+        data-code={trimmedCode}
+        title="复制代码"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        <span class="copy-text">复制</span>
+      </button>
+    </div>
+  )}
+
+  {/* 代码区域 */}
+  <div class="code-content">
+    {/* 行号 */}
+    {showLineNumbers && (
+      <div class="line-numbers">
+        {lineNumbers.map(num => (
+          <div class="line-number">{num}</div>
+        ))}
+      </div>
+    )}
+
+    {/* 代码内容 */}
+    <pre class:list={["language-" + lang, { "with-line-numbers": showLineNumbers }]}>
+      <code class={"language-" + lang} set:html={trimmedCode} />
+    </pre>
+  </div>
+</div>
+
+<script>
+  function initializeCopyButtons() {
+    const copyButtons = document.querySelectorAll('.copy-button');
+    
+    copyButtons.forEach(button => {
+      button.addEventListener('click', async () => {
+        const code = button.getAttribute('data-code') || '';
+        const copyText = button.querySelector('.copy-text');
+        
+        try {
+          await navigator.clipboard.writeText(code);
+          if (copyText) {
+            copyText.textContent = '已复制！';
+            setTimeout(() => {
+              copyText.textContent = '复制';
+            }, 2000);
+          }
+        } catch (err) {
+          console.error('复制失败:', err);
+          if (copyText) {
+            copyText.textContent = '复制失败';
+            setTimeout(() => {
+              copyText.textContent = '复制';
+            }, 2000);
+          }
+        }
+      });
+    });
+  }
+
+  // 在页面加载时初始化
+  initializeCopyButtons();
+
+  // 在 Astro 页面切换时重新初始化
+  document.addEventListener('astro:page-load', initializeCopyButtons);
+</script>