@coffic/cosy-ui 0.3.69 → 0.4.5

package/dist/components/layouts/LandingLayout.astro

@@ -1,388 +0,0 @@
----
-/**
- * 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>