@coffic/cosy-ui 0.1.29 → 0.2.2

package/dist/components/layouts/Header.astro

@@ -0,0 +1,114 @@
+---
+import SearchIcon from '../icons/SearchIcon.astro';
+import Link from '../base/Link.astro';
+import Button from '../base/Button.astro';
+import Image from '../base/Image.astro';
+import '../../app.css';
+
+// 自定义图片元数据接口
+interface ImageMetadata {
+	src: string;
+	width: number;
+	height: number;
+	format: string;
+}
+
+interface Props {
+	logo: ImageMetadata;
+	languages?: Array<{ code: string; name: string }>;
+	currentLocale?: string;
+	navItems?: Array<{
+		href: string;
+		label: string;
+		match: (path: string) => boolean;
+	}>;
+	socialLinks?: Array<{
+		name: string;
+		url: string;
+		icon: any;
+	}>;
+	/**
+	 * 是否固定在顶部
+	 * @default true
+	 */
+	sticky?: boolean;
+}
+
+const {
+	logo,
+	navItems = [],
+	sticky = true,
+} = Astro.props;
+
+type NavItem = { href: string; label: string; match: (path: string) => boolean };
+---
+
+<header class:list={[
+	"navbar bg-accent/80 backdrop-blur border-b border-base-200 z-50 w-full",
+	{ "fixed top-0": sticky }
+]}>
+	<div class="navbar-start">
+		<!-- 移动端菜单 -->
+		<div class="dropdown lg:hidden">
+			<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+				</svg>
+			</div>
+			<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+				{navItems.map((item: NavItem) => (
+					<li>
+						<Link href={item.href}>
+							{item.label}
+						</Link>
+					</li>
+				))}
+			</ul>
+		</div>
+
+		<Link href="/" class="btn btn-ghost">
+			<Image src={logo} alt="logo" class="w-10 h-10" />
+		</Link>
+	</div>
+
+	<!-- 桌面端导航 -->
+	<div class="navbar-center hidden lg:flex">
+		<ul class="menu menu-horizontal px-1">
+			{navItems.map((item: NavItem) => (
+				<li>
+					<Link href={item.href}>
+						{item.label}
+					</Link>
+				</li>
+			))}
+		</ul>
+	</div>
+
+	<div class="navbar-end">
+		<Button 
+			variant="ghost" 
+			size="sm" 
+			class="btn-circle"
+			onClick="my_modal_1.showModal()"
+		>
+			<SearchIcon class="w-5 h-5" />
+		</Button>
+	</div>
+</header>
+
+{sticky && (
+	<div class="h-16"></div>
+)}
+
+<script define:vars={{ sticky }}>
+	if (sticky) {
+		const header = document.querySelector('header');
+		window.addEventListener('scroll', () => {
+			if (window.pageYOffset > 0) {
+				header?.classList.add('shadow-lg');
+			} else {
+				header?.classList.remove('shadow-lg');
+			}
+		});
+	}
+</script>

package/dist/components/layouts/LandingLayout.astro

@@ -0,0 +1,388 @@
+---
+/**
+ * LandingLayout组件
+ * 
+ * 适用于落地页的布局，包含页眉、页脚和多个区块
+ * 
+ * @example
+ * ```astro
+ * ---
+ * import LandingLayout from '../layouts/LandingLayout.astro';
+ * ---
+ * 
+ * <LandingLayout 
+ *   title="产品名称 - 简短的产品描述" 
+ *   description="详细的产品描述，包含关键词"
+ * >
+ *   <div slot="hero">
+ *     <h1>产品标题</h1>
+ *     <p>产品简介</p>
+ *     <button>立即开始</button>
+ *   </div>
+ *   
+ *   <section>
+ *     <h2>产品特点</h2>
+ *     <p>详细介绍产品特点...</p>
+ *   </section>
+ * </LandingLayout>
+ * ```
+ */
+
+import BaseLayout from './BaseLayout.astro';
+
+// 导入样式
+import '../../app.css';
+
+export interface NavItem {
+  href: string;
+  label: string;
+  isButton?: boolean;
+}
+
+export interface FooterLink {
+  href: string;
+  label: string;
+}
+
+export interface FooterSection {
+  title: string;
+  links: FooterLink[];
+}
+
+export interface SocialLink {
+  href: string;
+  icon: string;
+  label: string;
+}
+
+export interface Props {
+  /**
+   * 页面标题
+   */
+  title: string;
+  
+  /**
+   * 页面描述
+   */
+  description?: string;
+  
+  /**
+   * 页面关键词
+   */
+  keywords?: string;
+  
+  /**
+   * 品牌名称
+   * @default "品牌名称"
+   */
+  brandName?: string;
+  
+  /**
+   * 品牌Logo URL
+   */
+  logoUrl?: string;
+  
+  /**
+   * 导航链接
+   */
+  navItems?: NavItem[];
+  
+  /**
+   * 页脚链接分组
+   */
+  footerSections?: FooterSection[];
+  
+  /**
+   * 社交媒体链接
+   */
+  socialLinks?: SocialLink[];
+  
+  /**
+   * 版权信息
+   */
+  copyright?: string;
+  
+  /**
+   * 自定义头部内容
+   */
+  head?: astroHTML.JSX.Element;
+  
+  /**
+   * 页面类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  title,
+  description,
+  keywords,
+  brandName = "品牌名称",
+  logoUrl,
+  navItems = [
+    { href: "/", label: "首页" },
+    { href: "/features", label: "特性" },
+    { href: "/pricing", label: "价格" },
+    { href: "/about", label: "关于我们" },
+    { href: "/contact", label: "联系我们" },
+    { href: "/signup", label: "注册", isButton: true }
+  ],
+  footerSections = [
+    {
+      title: "产品",
+      links: [
+        { href: "/features", label: "特性" },
+        { href: "/pricing", label: "价格" },
+        { href: "/docs", label: "文档" },
+        { href: "/releases", label: "更新日志" }
+      ]
+    },
+    {
+      title: "公司",
+      links: [
+        { href: "/about", label: "关于我们" },
+        { href: "/team", label: "团队" },
+        { href: "/careers", label: "招聘" },
+        { href: "/contact", label: "联系我们" }
+      ]
+    },
+    {
+      title: "资源",
+      links: [
+        { href: "/blog", label: "博客" },
+        { href: "/community", label: "社区" },
+        { href: "/support", label: "支持" }
+      ]
+    },
+    {
+      title: "法律",
+      links: [
+        { href: "/privacy", label: "隐私政策" },
+        { href: "/terms", label: "服务条款" }
+      ]
+    }
+  ],
+  socialLinks = [
+    { href: "https://twitter.com", icon: "twitter", label: "Twitter" },
+    { href: "https://github.com", icon: "github", label: "GitHub" },
+    { href: "https://linkedin.com", icon: "linkedin", label: "LinkedIn" }
+  ],
+  copyright = `© ${new Date().getFullYear()} ${brandName}. 保留所有权利。`,
+  head,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 社交媒体图标映射
+const socialIconMap: Record<string, string> = {
+  twitter: "🐦",
+  github: "🐙",
+  linkedin: "🔗",
+  facebook: "👤",
+  instagram: "📷",
+  youtube: "📺",
+  discord: "💬",
+  slack: "🔶",
+  wechat: "💬",
+  weibo: "微"
+};
+---
+
+<BaseLayout 
+  title={title} 
+  description={description}
+  keywords={keywords}
+  head={head}
+  class="landing-layout"
+  {...rest}
+>
+  <!-- 页眉 -->
+  <header class="site-header">
+    <div class="container">
+      <div class="header-content">
+        <div class="brand">
+          <a href="/" class="brand-link">
+            {logoUrl ? (
+              <img src={logoUrl} alt={brandName} class="brand-logo" />
+            ) : (
+              <span class="brand-name">{brandName}</span>
+            )}
+          </a>
+        </div>
+        
+        <nav class="main-nav">
+          <ul class="nav-list">
+            {navItems.map((item: NavItem) => (
+              <li class="nav-item">
+                {item.isButton ? (
+                  <a href={item.href} class="btn btn-primary btn-sm">{item.label}</a>
+                ) : (
+                  <a href={item.href} class="nav-link">{item.label}</a>
+                )}
+              </li>
+            ))}
+          </ul>
+        </nav>
+        
+        <button class="mobile-menu-button" aria-label="菜单" id="mobile-menu-toggle">
+          <span class="menu-icon">☰</span>
+        </button>
+      </div>
+    </div>
+  </header>
+  
+  <!-- 移动端导航菜单 -->
+  <div class="mobile-menu" id="mobile-menu">
+    <div class="mobile-menu-container">
+      <div class="mobile-menu-header">
+        <div class="brand">
+          {logoUrl ? (
+            <img src={logoUrl} alt={brandName} class="brand-logo" />
+          ) : (
+            <span class="brand-name">{brandName}</span>
+          )}
+        </div>
+        <button class="close-menu-button" aria-label="关闭菜单" id="close-mobile-menu">
+          <span class="close-icon">✕</span>
+        </button>
+      </div>
+      
+      <nav class="mobile-nav">
+        <ul class="mobile-nav-list">
+          {navItems.map((item: NavItem) => (
+            <li class="mobile-nav-item">
+              <a href={item.href} class="mobile-nav-link">
+                {item.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  </div>
+  
+  <!-- 英雄区块 -->
+  <section class="hero-section">
+    <div class="container">
+      <slot name="hero" />
+    </div>
+  </section>
+  
+  <!-- 主要内容 -->
+  <main class="main-content">
+    <slot />
+  </main>
+  
+  <!-- 页脚 -->
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-brand">
+          <div class="brand">
+            {logoUrl ? (
+              <img src={logoUrl} alt={brandName} class="brand-logo" />
+            ) : (
+              <span class="brand-name">{brandName}</span>
+            )}
+          </div>
+          <p class="brand-tagline">
+            <slot name="footer-tagline">简短的品牌标语或描述</slot>
+          </p>
+          
+          <div class="social-links">
+            {socialLinks.map((link: SocialLink) => (
+              <a href={link.href} class="social-link" aria-label={link.label} target="_blank" rel="noopener noreferrer">
+                <span class="social-icon">{socialIconMap[link.icon] || "🔗"}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+        
+        <div class="footer-links">
+          {footerSections.map((section: FooterSection) => (
+            <div class="footer-section">
+              <h3 class="footer-title">{section.title}</h3>
+              <ul class="footer-list">
+                {section.links.map((link: FooterLink) => (
+                  <li class="footer-item">
+                    <a href={link.href} class="footer-link">{link.label}</a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+      
+      <div class="footer-bottom">
+        <p class="copyright">{copyright}</p>
+        <slot name="footer-extra" />
+      </div>
+    </div>
+  </footer>
+</BaseLayout>
+
+<script>
+  // 移动端菜单功能
+  document.addEventListener('DOMContentLoaded', () => {
+    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
+    const closeMobileMenu = document.getElementById('close-mobile-menu');
+    const mobileMenu = document.getElementById('mobile-menu');
+    const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
+    
+    if (mobileMenuToggle && mobileMenu) {
+      mobileMenuToggle.addEventListener('click', () => {
+        mobileMenu.classList.add('active');
+        document.body.style.overflow = 'hidden';
+      });
+    }
+    
+    if (closeMobileMenu && mobileMenu) {
+      closeMobileMenu.addEventListener('click', () => {
+        mobileMenu.classList.remove('active');
+        document.body.style.overflow = '';
+      });
+    }
+    
+    // 点击导航链接后关闭菜单
+    mobileNavLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        if (mobileMenu) {
+          mobileMenu.classList.remove('active');
+          document.body.style.overflow = '';
+        }
+      });
+    });
+    
+    // 页眉滚动效果
+    const header = document.querySelector('.site-header');
+    let lastScrollTop = 0;
+    
+    window.addEventListener('scroll', () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      
+      if (header) {
+        if (scrollTop > 100) {
+          header.classList.add('scrolled');
+          
+          if (scrollTop > lastScrollTop) {
+            header.classList.add('hidden');
+          } else {
+            header.classList.remove('hidden');
+          }
+        } else {
+          header.classList.remove('scrolled');
+          header.classList.remove('hidden');
+        }
+      }
+      
+      lastScrollTop = scrollTop;
+    });
+  });
+</script> 

package/dist/components/layouts/Stack.astro

@@ -0,0 +1,149 @@
+---
+/**
+ * @component Stack
+ * 
+ * @description
+ * Stack 组件是一个垂直堆叠布局组件，用于垂直排列元素并控制它们之间的间距。
+ * 它提供了灵活的间距控制、对齐方式和分隔线选项，使垂直布局更加简单。
+ * 
+ * @design
+ * 设计理念：
+ * 1. 简化布局 - 提供简单直观的方式创建垂直堆叠布局
+ * 2. 一致性 - 通过预设的间距选项确保布局一致性
+ * 3. 灵活性 - 支持多种对齐方式和分隔线选项
+ * 4. 可组合性 - 可以与其他布局组件组合使用
+ * 
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Stack>
+ *   <div>第一个元素</div>
+ *   <div>第二个元素</div>
+ *   <div>第三个元素</div>
+ * </Stack>
+ * ```
+ * 
+ * 自定义间距：
+ * ```astro
+ * <Stack gap="lg">
+ *   <div>大间距</div>
+ *   <div>垂直排列</div>
+ * </Stack>
+ * ```
+ * 
+ * 带分隔线：
+ * ```astro
+ * <Stack dividers={true} dividerColor="primary">
+ *   <div>带分隔线的堆叠</div>
+ *   <div>使用主题色</div>
+ * </Stack>
+ * ```
+ * 
+ * 自定义对齐：
+ * ```astro
+ * <Stack align="center">
+ *   <div>居中对齐</div>
+ *   <div>的元素</div>
+ * </Stack>
+ * ```
+ */
+
+// 导入样式
+import '../../app.css';
+
+// 定义间距类型
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+// 定义对齐方式类型
+type AlignType = 'start' | 'center' | 'end' | 'stretch';
+
+// 定义分隔线颜色类型
+type DividerColor = 'gray' | 'light' | 'dark' | 'primary';
+
+interface Props {
+  /**
+   * 元素间距
+   * @default "md"
+   */
+  gap?: GapSize;
+  
+  /**
+   * 是否显示分隔线
+   * @default false
+   */
+  dividers?: boolean;
+  
+  /**
+   * 分隔线颜色
+   * @default "gray"
+   */
+  dividerColor?: DividerColor;
+  
+  /**
+   * 对齐方式
+   * @default "stretch"
+   */
+  align?: AlignType;
+  
+  /**
+   * 自定义类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+  
+  [key: string]: any;
+}
+
+const {
+  gap = 'md',
+  dividers = false,
+  dividerColor = 'gray',
+  align = 'stretch',
+  class: className = '',
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+// 间距映射
+const gapClasses: Record<GapSize, string> = {
+  'none': 'stack-gap-none',
+  'xs': 'stack-gap-xs',
+  'sm': 'stack-gap-sm',
+  'md': 'stack-gap-md',
+  'lg': 'stack-gap-lg',
+  'xl': 'stack-gap-xl'
+};
+
+// 对齐方式映射
+const alignClasses: Record<AlignType, string> = {
+  'start': 'stack-align-start',
+  'center': 'stack-align-center',
+  'end': 'stack-align-end',
+  'stretch': 'stack-align-stretch'
+};
+
+// 分隔线颜色映射
+const dividerColorClasses: Record<DividerColor, string> = {
+  'gray': 'stack-divider-gray',
+  'light': 'stack-divider-light',
+  'dark': 'stack-divider-dark',
+  'primary': 'stack-divider-primary'
+};
+
+// 构建最终类名
+const stackClasses = [
+  'stack',
+  alignClasses[align as AlignType],
+  gapClasses[gap as GapSize],
+  dividers ? `stack-divider ${dividerColorClasses[dividerColor as DividerColor]}` : '',
+  className
+].filter(Boolean).join(' ');
+---
+
+<div class:list={[stackClasses, classList]} {...rest}>
+  <slot />
+</div>