@coffic/cosy-ui 0.1.28 → 0.2.0

package/dist/components/icons/UserIcon.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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+</svg> 

package/dist/components/icons/WarningIcon.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}
+>
+  <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/XCircle.astro

@@ -0,0 +1,37 @@
+---
+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}
+>
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="15" y1="9" x2="9" y2="15"></line>
+  <line x1="9" y1="9" x2="15" y2="15"></line>
+</svg> 

package/dist/components/icons/index.ts

@@ -0,0 +1,23 @@
+// 导出所有图标组件
+export { default as AlertTriangle } from './AlertTriangle.astro';
+export { default as CheckCircle } from './CheckCircle.astro';
+export { default as XCircle } from './XCircle.astro';
+export { default as InfoCircle } from './InfoCircle.astro';
+export { default as InfoIcon } from './InfoIcon.astro';
+export { default as SuccessIcon } from './SuccessIcon.astro';
+export { default as WarningIcon } from './WarningIcon.astro';
+export { default as ErrorIcon } from './ErrorIcon.astro';
+export { default as CloseIcon } from './CloseIcon.astro';
+export { default as ClipboardIcon } from './ClipboardIcon.astro';
+export { default as CheckIcon } from './CheckIcon.astro';
+export { default as LinkIcon } from './LinkIcon.astro';
+export { default as UserIcon } from './UserIcon.astro';
+export { default as CalendarIcon } from './CalendarIcon.astro';
+
+// 社交媒体图标
+export { default as SocialIcon } from './SocialIcon.astro';
+export { default as GithubIcon } from './GithubIcon.astro';
+export { default as TwitterIcon } from './TwitterIcon.astro';
+export { default as LinkedinIcon } from './LinkedinIcon.astro';
+
+// 随着图标增加，可以在这里继续添加导出 

package/dist/components/layouts/BaseLayout.astro

@@ -0,0 +1,144 @@
+---
+/**
+ * @component BaseLayout
+ * 
+ * @description
+ * BaseLayout 组件是最基础的 HTML 结构布局，提供完整的 HTML 骨架和元数据设置。
+ * 它是所有页面布局的基础，处理了基本的 HTML 结构、元数据和全局样式。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 基础结构 - 提供标准的 HTML5 文档结构
+ * 2. 元数据管理 - 集中管理页面的标题、描述和关键词等元数据
+ * 3. 全局样式 - 应用基础的重置样式和全局变量
+ * 4. 灵活扩展 - 支持自定义头部内容和样式
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * ---
+ * import { BaseLayout } from '@coffic/cosy-ui';
+ * ---
+ * 
+ * <BaseLayout title="页面标题" description="页面描述">
+ *   <main>
+ *     <h1>页面内容</h1>
+ *     <p>这是页面的主要内容</p>
+ *   </main>
+ * </BaseLayout>
+ * ```
+ * 
+ * 添加自定义头部内容：
+ * ```astro
+ * <BaseLayout 
+ *   title="页面标题" 
+ *   head={`<link rel="canonical" href="https://example.com" />`}
+ * >
+ *   <p>页面内容</p>
+ * </BaseLayout>
+ * ```
+ * 
+ * 自定义样式：
+ * ```astro
+ * <BaseLayout 
+ *   title="页面标题" 
+ *   customStyles={`body { background-color: #f5f5f5; }`}
+ * >
+ *   <p>页面内容</p>
+ * </BaseLayout>
+ * ```
+ */
+
+// 导入样式
+import '../../app.css';
+
+export interface Props {
+  /**
+   * 页面标题
+   */
+  title: string;
+  
+  /**
+   * 页面描述
+   * @default ""
+   */
+  description?: string;
+  
+  /**
+   * 页面关键词
+   * @default ""
+   */
+  keywords?: string;
+  
+  /**
+   * 页面语言
+   * @default "zh-CN"
+   */
+  lang?: string;
+  
+  /**
+   * 是否包含视口元标签
+   * @default true
+   */
+  viewport?: boolean;
+  
+  /**
+   * 自定义CSS
+   */
+  customStyles?: string;
+  
+  /**
+   * 自定义头部内容
+   */
+  head?: astroHTML.JSX.Element;
+  
+  /**
+   * 页面类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  title,
+  description = "",
+  keywords = "",
+  lang = "zh-CN",
+  viewport = true,
+  customStyles = "",
+  head,
+  class: className,
+  'class:list': classList,
+} = Astro.props;
+
+// 处理类名
+let bodyClasses = className || "";
+---
+
+<!DOCTYPE html>
+<html lang={lang}>
+  <head>
+    <meta charset="UTF-8" />
+    {viewport && <meta name="viewport" content="width=device-width, initial-scale=1.0" />}
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    {keywords && <meta name="keywords" content={keywords} />}
+    <meta name="generator" content={Astro.generator} />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    
+    <!-- 自定义样式 -->
+    {customStyles && <style set:html={customStyles}></style>}
+    
+    <!-- 自定义头部内容 -->
+    {head && <div set:html={head} />}
+    
+    <slot name="head" />
+  </head>
+  <body class:list={[bodyClasses, classList]}>
+    <slot />
+  </body>
+</html>