@coffic/cosy-ui 0.1.29 → 0.2.2

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> 

package/dist/components/display/CodeExample.astro

@@ -0,0 +1,330 @@
+---
+/**
+ * @component CodeExample
+ * 
+ * @description
+ * 用于展示组件示例及其源代码的组件。
+ * 采用标签形式，默认显示预览，用户可以点击标签切换到源代码视图。
+ * 支持亮色和暗黑模式，会根据系统设置自动切换主题。
+ * 
+ * @usage
+ * ```astro
+ * <CodeExample 
+ *   title="示例标题" 
+ *   description="示例描述"
+ *   code={`<Alert type="info">这是一个示例</Alert>`}
+ * >
+ *   <Alert type="info">这是一个示例</Alert>
+ * </CodeExample>
+ * ```
+ * 
+ * @props
+ * @prop {string} [title] - 示例标题
+ * @prop {string} [description] - 示例描述
+ * @prop {string} code - 要展示的源代码
+ * 
+ * @slots
+ * @slot default - 组件的实际渲染内容
+ */
+
+// 导入图标
+import { ClipboardIcon, CheckIcon } from '../../index';
+
+interface Props {
+  title?: string;
+  description?: string;
+  code: string;
+}
+
+const { title, description, code } = Astro.props;
+---
+
+<div class="code-example">
+  {title && <h3 class="code-example-title">{title}</h3>}
+  {description && <p class="code-example-description">{description}</p>}
+  
+  <div class="code-example-tabs">
+    <button class="code-example-tab active" data-tab="preview">预览</button>
+    <button class="code-example-tab" data-tab="code">代码</button>
+  </div>
+  
+  <div class="code-example-content">
+    <div class="code-example-panel active" data-panel="preview">
+      <div class="code-example-preview">
+        <slot />
+      </div>
+    </div>
+    
+    <div class="code-example-panel" data-panel="code">
+      <div class="code-example-code">
+        <div class="code-example-header">
+          <button class="copy-button" aria-label="复制代码">
+            <span class="copy-icon"><ClipboardIcon /></span>
+            <span class="check-icon"><CheckIcon /></span>
+            <span class="copy-text">复制代码</span>
+          </button>
+        </div>
+        <pre><code class="language-astro">{code}</code></pre>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* 颜色变量 - 支持亮色和暗黑模式 */
+  :root {
+    /* 亮色模式变量 */
+    --code-example-border: #e2e8f0;
+    --code-example-bg: #ffffff;
+    --code-example-text: #333333;
+    --code-example-title-border: #e2e8f0;
+    --code-example-description-color: #64748b;
+    --code-example-tabs-bg: #f8fafc;
+    --code-example-tab-color: #64748b;
+    --code-example-tab-hover-color: #0f172a;
+    --code-example-tab-active-color: #3b82f6;
+    --code-example-tab-active-border: #3b82f6;
+    --code-example-preview-bg: #ffffff;
+    --code-example-code-bg: #1e293b;
+    --code-example-code-text: #e2e8f0;
+    --code-example-header-bg: #334155;
+    --code-example-copy-button-color: #e2e8f0;
+    --code-example-copy-button-hover-bg: rgba(255, 255, 255, 0.1);
+    --code-example-copy-success-color: #4ade80;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      /* 暗黑模式变量 */
+      --code-example-border: #2d3748;
+      --code-example-bg: #1a202c;
+      --code-example-text: #e2e8f0;
+      --code-example-title-border: #2d3748;
+      --code-example-description-color: #a0aec0;
+      --code-example-tabs-bg: #171e2e;
+      --code-example-tab-color: #a0aec0;
+      --code-example-tab-hover-color: #e2e8f0;
+      --code-example-tab-active-color: #60a5fa;
+      --code-example-tab-active-border: #60a5fa;
+      --code-example-preview-bg: #1a202c;
+      --code-example-code-bg: #0f172a;
+      --code-example-code-text: #e2e8f0;
+      --code-example-header-bg: #1e293b;
+      --code-example-copy-button-color: #e2e8f0;
+      --code-example-copy-button-hover-bg: rgba(255, 255, 255, 0.1);
+      --code-example-copy-success-color: #4ade80;
+    }
+  }
+  
+  .code-example {
+    margin-bottom: 2rem;
+    border: 1px solid var(--code-example-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background-color: var(--code-example-bg);
+    color: var(--code-example-text);
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  }
+  
+  .code-example-title {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: 0;
+    padding: 1rem;
+    border-bottom: 1px solid var(--code-example-title-border);
+  }
+  
+  .code-example-description {
+    padding: 0 1rem;
+    color: var(--code-example-description-color);
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .code-example-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--code-example-title-border);
+    background-color: var(--code-example-tabs-bg);
+  }
+  
+  .code-example-tab {
+    padding: 0.75rem 1.5rem;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--code-example-tab-color);
+    transition: all 0.2s ease;
+  }
+  
+  .code-example-tab:hover {
+    color: var(--code-example-tab-hover-color);
+  }
+  
+  .code-example-tab.active {
+    color: var(--code-example-tab-active-color);
+    border-bottom-color: var(--code-example-tab-active-border);
+  }
+  
+  .code-example-content {
+    position: relative;
+  }
+  
+  .code-example-panel {
+    display: none;
+  }
+  
+  .code-example-panel.active {
+    display: block;
+  }
+  
+  .code-example-preview {
+    padding: 1.5rem;
+    background-color: var(--code-example-preview-bg);
+  }
+  
+  .code-example-code {
+    position: relative;
+    background-color: var(--code-example-code-bg);
+    color: var(--code-example-code-text);
+    overflow: auto;
+  }
+  
+  .code-example-header {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--code-example-header-bg);
+  }
+  
+  .copy-button {
+    background: transparent;
+    border: none;
+    color: var(--code-example-copy-button-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    transition: background-color 0.2s;
+    font-size: 0.875rem;
+  }
+  
+  .copy-button:hover {
+    background-color: var(--code-example-copy-button-hover-bg);
+  }
+  
+  .copy-icon, .check-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+  }
+  
+  .check-icon {
+    display: none;
+    color: var(--code-example-copy-success-color);
+  }
+  
+  .copy-button.copied .copy-icon {
+    display: none;
+  }
+  
+  .copy-button.copied .check-icon {
+    display: flex;
+  }
+  
+  .copy-button.copied .copy-text {
+    color: var(--code-example-copy-success-color);
+  }
+  
+  pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+  }
+  
+  code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    white-space: pre;
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+</style>
+
+<script>
+  function initializeCodeExample() {
+    // 标签切换功能
+    const tabs = document.querySelectorAll('.code-example-tab');
+    
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        // 获取当前标签组
+        const tabGroup = tab.closest('.code-example-tabs');
+        if (!tabGroup) return;
+        
+        const codeExample = tab.closest('.code-example');
+        if (!codeExample) return;
+        
+        const contentContainer = codeExample.querySelector('.code-example-content');
+        if (!contentContainer) return;
+        
+        // 获取目标面板
+        const targetTab = tab.getAttribute('data-tab');
+        if (!targetTab) return;
+        
+        // 更新标签状态
+        tabGroup.querySelectorAll('.code-example-tab').forEach(t => {
+          t.classList.remove('active');
+        });
+        tab.classList.add('active');
+        
+        // 更新面板状态
+        contentContainer.querySelectorAll('.code-example-panel').forEach(panel => {
+          panel.classList.remove('active');
+        });
+        
+        const targetPanel = contentContainer.querySelector(`[data-panel="${targetTab}"]`);
+        if (targetPanel) {
+          targetPanel.classList.add('active');
+        }
+      });
+    });
+    
+    // 复制代码功能
+    const copyButtons = document.querySelectorAll('.copy-button');
+    
+    copyButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        const codeBlock = button.closest('.code-example-code');
+        if (!codeBlock) return;
+        
+        const codeElement = codeBlock.querySelector('code');
+        if (!codeElement) return;
+        
+        const code = codeElement.textContent || '';
+        
+        // 复制到剪贴板
+        navigator.clipboard.writeText(code).then(() => {
+          // 显示复制成功状态
+          button.classList.add('copied');
+          
+          // 3秒后恢复原状
+          setTimeout(() => {
+            button.classList.remove('copied');
+          }, 3000);
+        });
+      });
+    });
+  }
+  
+  // 初始化
+  initializeCodeExample();
+  
+  // Astro 页面切换时重新初始化
+  document.addEventListener('astro:page-load', initializeCodeExample);
+</script>