@coffic/cosy-ui 0.1.28 → 0.2.0

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

package/dist/components/display/Hero.astro

@@ -0,0 +1,119 @@
+---
+/**
+ * @component Hero
+ * 
+ * @description
+ * Hero 组件是一个全屏的展示区域，通常用于网站的首页或重要页面的顶部。
+ * 它提供了一个引人注目的视觉区域，可以包含标题、描述、图片和行动按钮。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 视觉冲击力 - 全屏展示，吸引用户注意
+ * 2. 内容聚焦 - 清晰地传达核心信息
+ * 3. 引导行动 - 通过链接按钮引导用户进行下一步操作
+ * 4. 灵活布局 - 支持图片、标题、描述和自定义内容
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Hero
+ *   title="欢迎使用我们的产品"
+ *   description="这是一个简短的描述，介绍产品的主要特点和价值。"
+ *   links={[
+ *     { text: "开始使用", href: "/getting-started" },
+ *     { text: "了解更多", href: "/about" }
+ *   ]}
+ * />
+ * ```
+ * 
+ * 带图片的用法：
+ * ```astro
+ * <Hero
+ *   title="产品展示"
+ *   description="查看我们的最新产品。"
+ *   image={{ src: "/images/product.png", alt: "产品图片" }}
+ *   links={[
+ *     { text: "立即购买", href: "/buy" }
+ *   ]}
+ * />
+ * ```
+ * 
+ * 带自定义内容的用法：
+ * ```astro
+ * <Hero
+ *   title="交互式演示"
+ *   description="尝试我们的交互式演示。"
+ *   links={[
+ *     { text: "查看文档", href: "/docs" }
+ *   ]}
+ * >
+ *   <div slot="app">
+ *     <InteractiveDemo />
+ *   </div>
+ * </Hero>
+ * ```
+ * 
+ * @props
+ * @prop {string} title - Hero 区域的主标题
+ * @prop {string} description - 标题下方的描述文本
+ * @prop {Object} [image] - 可选的图片配置
+ * @prop {string} image.src - 图片的源地址
+ * @prop {string} image.alt - 图片的替代文本
+ * @prop {Array<Link>} links - 链接按钮数组
+ * @prop {string} links[].text - 链接按钮的文本
+ * @prop {string} links[].href - 链接按钮的目标地址
+ */
+
+// 导入样式
+import '../../app.css';
+
+import Link from '../base/Link.astro';
+
+interface Link {
+	text: string;
+	href: string;
+}
+
+interface Props {
+	title: string;
+	description: string;
+	image?: {
+		src: string;
+		alt: string;
+	};
+	links: Link[];
+}
+
+const { title, description, image, links = [] } = Astro.props;
+---
+
+<div class="hero-container">
+	<div class="hero-content">
+		{image && <img src={image.src} alt={image.alt} class="hero-image" />}
+
+		<h2 class="hero-title">{title}</h2>
+		<p class="hero-description">
+			{description}
+		</p>
+
+		<div class="hero-app">
+			<slot name="app" />
+		</div>
+
+		<div class="hero-links">
+			{
+				links.map((link: Link) => (
+					<Link
+						href={link.href}
+						external
+						variant="cta"
+						animation="hover-lift"
+						size="lg"
+					>
+						{link.text}
+					</Link>
+				))
+			}
+		</div>
+	</div>
+</div>

package/dist/components/display/Modal.astro

@@ -0,0 +1,115 @@
+---
+/**
+ * @component Modal
+ * 
+ * @description
+ * Modal 组件是一个模态对话框，用于在不离开当前页面的情况下显示内容、通知或请求用户输入。
+ * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
+ * 2. 灵活布局 - 支持标题、内容和操作按钮的灵活组合
+ * 3. 可访问性 - 支持键盘导航和屏幕阅读器
+ * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Modal id="my-modal" title="提示">
+ *   <p>这是一个模态对话框的内容。</p>
+ *   <button slot="actions" data-modal-target="my-modal">关闭</button>
+ * </Modal>
+ * 
+ * <!-- 触发按钮 -->
+ * <button data-modal-target="my-modal">打开模态框</button>
+ * ```
+ * 
+ * 自定义操作按钮：
+ * ```astro
+ * <Modal id="confirm-modal" title="确认操作">
+ *   <p>您确定要执行此操作吗？</p>
+ *   <div slot="actions">
+ *     <button class="btn btn-primary">确认</button>
+ *     <button class="btn" data-modal-target="confirm-modal">取消</button>
+ *   </div>
+ * </Modal>
+ * ```
+ * 
+ * 不带标题的模态框：
+ * ```astro
+ * <Modal id="image-modal">
+ *   <img src="/images/large-image.jpg" alt="大图预览" />
+ * </Modal>
+ * ```
+ */
+
+// 导入样式
+import '../../app.css';
+
+interface Props {
+    /**
+     * Modal 的唯一标识符
+     */
+    id: string;
+    /**
+     * 模态框的标题
+     */
+    title?: string;
+    /**
+     * 是否显示关闭按钮
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * 自定义类名
+     */
+    class?: string;
+}
+
+const {
+    id,
+    title,
+    showCloseButton = true,
+    class: className = '',
+} = Astro.props;
+---
+
+<dialog id={id} class="modal">
+    <div class:list={["modal-box", className]}>
+        {showCloseButton && (
+            <form method="dialog">
+                <button class="modal-close-button">✕</button>
+            </form>
+        )}
+        
+        {title && <h3 class="modal-title">{title}</h3>}
+        
+        <div class="modal-content">
+            <slot />
+        </div>
+
+        <div class="modal-action">
+            <slot name="actions" />
+        </div>
+    </div>
+
+    <form method="dialog" class="modal-backdrop">
+        <button>关闭</button>
+    </form>
+</dialog>
+
+<script define:vars={{ id }}>
+// 为了方便使用，我们提供一些辅助方法
+document.addEventListener('DOMContentLoaded', () => {
+    const modal = document.getElementById(id);
+    if (!modal) return;
+
+    // 为所有触发这个模态框的按钮添加点击事件
+    document.querySelectorAll(`[data-modal-target="${id}"]`).forEach(trigger => {
+        trigger.addEventListener('click', () => {
+            modal.showModal();
+        });
+    });
+});
+</script> 

package/dist/components/display/README.md

@@ -0,0 +1,32 @@
+# 展示组件 (Display Components)
+
+这个目录包含了用于内容展示的组件，主要用于展示信息和内容的呈现。
+
+## 设计原则
+
+1. **视觉层次**：合理使用视觉层次来突出重要信息
+2. **一致的美学**：保持组件风格的一致性
+3. **灵活布局**：适应不同的内容长度和类型
+
+## 包含的组件
+
+- `Card.astro`: 卡片组件，用于信息分组展示
+- `Banner.astro`: 横幅组件，用于重要信息展示
+- `Hero.astro`: 英雄区组件，用于页面主要内容展示
+- `Modal.astro`: 模态框组件，用于弹出式内容展示
+- `CodeBlock.astro`: 代码块组件，用于代码展示
+- `CodeExample.astro`: 代码示例组件，用于展示可运行的代码示例
+
+## 使用指南
+
+展示组件通常需要传入具体的内容和配置：
+
+```astro
+<Card title="标题">
+  这是卡片内容
+</Card>
+
+<Modal isOpen={true} onClose={handleClose}>
+  这是模态框内容
+</Modal>
+``` 

package/dist/components/display/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.astro';
+export { default as Banner } from './Banner.astro';
+export { default as Hero } from './Hero.astro';
+export { default as Modal } from './Modal.astro';
+export { default as CodeBlock } from './CodeBlock.astro';
+export { default as CodeExample } from './CodeExample.astro'; 

package/dist/components/icons/AlertTriangle.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={size} 
+  height={size} 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  stroke={color} 
+  stroke-width="2" 
+  stroke-linecap="round" 
+  stroke-linejoin="round"
+  class={className}
+>
+  <path 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> 

package/dist/components/icons/CalendarIcon.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  /**
+   * 图标的大小
+   * @default "24px"
+   */
+  size?: string;
+  /**
+   * 图标的颜色
+   * @default "currentColor"
+   */
+  color?: string;
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
+---
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width={size} 
+  height={size} 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  stroke={color} 
+  stroke-width="2" 
+  stroke-linecap="round" 
+  stroke-linejoin="round"
+  class={className}
+>
+  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+  <line x1="16" y1="2" x2="16" y2="6"></line>
+  <line x1="8" y1="2" x2="8" y2="6"></line>
+  <line x1="3" y1="10" x2="21" y2="10"></line>
+</svg>