@coffic/cosy-ui 0.1.28 → 0.2.0

package/dist/components/layouts/DefaultLayout.astro

@@ -0,0 +1,170 @@
+---
+/**
+ * DefaultLayout组件
+ * 
+ * 包含常用页面结构的默认布局，包括简单的页眉和页脚
+ * 
+ * @example
+ * ```astro
+ * ---
+ * import DefaultLayout from '../layouts/DefaultLayout.astro';
+ * ---
+ * 
+ * <DefaultLayout title="页面标题" description="页面描述">
+ *   <h1>页面内容</h1>
+ *   <p>这是页面的主要内容</p>
+ * </DefaultLayout>
+ * ```
+ */
+
+import BaseLayout from './BaseLayout.astro';
+import Link from '../base/Link.astro';
+
+// 导入样式
+import '../../app.css';
+
+export interface NavLink {
+  href: string;
+  label: string;
+}
+
+export interface Props {
+  /**
+   * 页面标题
+   */
+  title: string;
+  
+  /**
+   * 页面描述
+   */
+  description?: string;
+  
+  /**
+   * 页面关键词
+   */
+  keywords?: string;
+  
+  /**
+   * 是否显示页眉
+   * @default true
+   */
+  showHeader?: boolean;
+  
+  /**
+   * 是否显示页脚
+   * @default true
+   */
+  showFooter?: boolean;
+  
+  /**
+   * 网站名称
+   * @default "网站名称"
+   */
+  siteName?: string;
+  
+  /**
+   * 导航链接
+   */
+  navLinks?: NavLink[];
+  
+  /**
+   * 页面容器类名
+   */
+  containerClass?: string;
+  
+  /**
+   * 自定义头部内容
+   */
+  head?: astroHTML.JSX.Element;
+  
+  /**
+   * 页面类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+}
+
+const {
+  title,
+  description,
+  keywords,
+  showHeader = true,
+  showFooter = true,
+  siteName = "网站名称",
+  navLinks = [
+    { href: "/", label: "首页" },
+    { href: "/about", label: "关于" },
+    { href: "/contact", label: "联系我们" }
+  ],
+  containerClass = "container mx-auto px-4 py-8",
+  head,
+  class: className,
+  'class:list': classList,
+  ...rest
+} = Astro.props;
+
+const year = new Date().getFullYear();
+---
+
+<BaseLayout 
+  title={title} 
+  description={description} 
+  keywords={keywords}
+  head={head}
+  class={className}
+  {...rest}
+>
+  {showHeader && (
+    <header class="site-header">
+      <div class="container px-4 py-4">
+        <div class="header-content">
+          <div class="logo">
+            <a href="/" class="site-name">{siteName}</a>
+          </div>
+          
+          <nav class="main-nav">
+            <ul class="nav-list">
+              {navLinks.map((link: NavLink) => (
+                <li class="nav-item">
+                  <Link href={link.href} variant="text">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )}
+  
+  <main class={containerClass}>
+    <slot />
+  </main>
+  
+  {showFooter && (
+    <footer class="site-footer">
+      <div class="container px-4 py-8">
+        <div class="footer-content">
+          <div class="footer-info">
+            <p class="copyright">&copy; {year} {siteName}. 保留所有权利。</p>
+          </div>
+          
+          <nav class="footer-nav">
+            <ul class="nav-list">
+              {navLinks.map((link: NavLink) => (
+                <li class="nav-item">
+                  <Link href={link.href} variant="text" size="sm">{link.label}</Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </footer>
+  )}
+  
+  <slot name="after-footer" />
+</BaseLayout> 

package/dist/components/layouts/DocumentationLayout.astro

@@ -0,0 +1,469 @@
+---
+/**
+ * DocumentationLayout组件
+ * 
+ * 适用于文档页面的布局，包含侧边栏导航和目录
+ * 
+ * @example
+ * ```astro
+ * ---
+ * import DocumentationLayout from '../layouts/DocumentationLayout.astro';
+ * 
+ * const sidebarItems = [
+ *   { title: "入门", items: [
+ *     { href: "/docs/getting-started", text: "快速开始" },
+ *     { href: "/docs/installation", text: "安装" }
+ *   ]},
+ *   { title: "组件", items: [
+ *     { href: "/docs/components/button", text: "Button 按钮" },
+ *     { href: "/docs/components/card", text: "Card 卡片" }
+ *   ]}
+ * ];
+ * ---
+ * 
+ * <DocumentationLayout 
+ *   title="文档标题" 
+ *   description="文档描述"
+ *   sidebarItems={sidebarItems}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </DocumentationLayout>
+ * ```
+ * 
+ * 自定义页脚示例：
+ * ```astro
+ * <DocumentationLayout 
+ *   title="文档标题" 
+ *   description="文档描述"
+ *   sidebarItems={sidebarItems}
+ *   footerSlogan="简单而强大的组件库"
+ *   footerInspirationalSlogan="让开发更加愉悦"
+ *   footerSocialLinks={[
+ *     "https://github.com/myorg/myrepo",
+ *     "https://twitter.com/myorg"
+ *   ]}
+ *   footerProducts={[
+ *     { name: "组件库", href: "/components" },
+ *     { name: "模板", href: "/templates" }
+ *   ]}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </DocumentationLayout>
+ * ```
+ * 
+ * 组件支持多种页脚相关的配置参数，可以通过以 `footer` 为前缀的属性来自定义页脚的内容和链接。
+ * 所有这些参数都是可选的，组件会为常用参数提供默认值。
+ * 
+ * 调试模式示例：
+ * ```astro
+ * <DocumentationLayout 
+ *   title="文档标题" 
+ *   description="文档描述"
+ *   sidebarItems={sidebarItems}
+ *   debug={true}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </DocumentationLayout>
+ * ```
+ */
+
+// 导入样式
+import '../../app.css';
+
+import BaseLayout from './BaseLayout.astro';
+import TableOfContents from '../navigation/TableOfContents.astro';
+import Article from '../typography/Article.astro';
+import Footer from './Footer.astro';
+import Main from '../containers/Main.astro';
+import Header from './Header.astro';
+import DefaultLogo from '../../assets/logo.png';
+
+export interface SidebarItem {
+  href: string;
+  text: string;
+  items?: SidebarItem[];
+}
+
+export interface SidebarSection {
+  title: string;
+  items: SidebarItem[];
+}
+
+export interface Props {
+  /**
+   * 页面标题
+   */
+  title: string;
+  
+  /**
+   * 页面描述
+   */
+  description?: string;
+  
+  /**
+   * 页面关键词
+   */
+  keywords?: string;
+  
+  /**
+   * 网站名称
+   * @default "文档中心"
+   */
+  siteName?: string;
+  
+  /**
+   * Logo图片
+   * @default "/logo.svg"
+   */
+  logo?: ImageMetadata;
+  
+  /**
+   * 侧边栏项目
+   */
+  sidebarItems: SidebarSection[];
+  
+  /**
+   * 是否显示目录
+   * @default true
+   */
+  showTableOfContents?: boolean;
+  
+  /**
+   * 是否显示页眉
+   * @default true
+   */
+  showHeader?: boolean;
+  
+  /**
+   * 是否显示页脚
+   * @default true
+   */
+  showFooter?: boolean;
+  
+  /**
+   * 自定义头部内容
+   */
+  head?: astroHTML.JSX.Element;
+  
+  /**
+   * 页面类名
+   */
+  class?: string;
+  
+  /**
+   * 类名列表
+   */
+  'class:list'?: any;
+
+  /**
+   * 调试模式，显示各个部分的边框
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * 导航项目
+   */
+  navItems?: Array<{
+    href: string;
+    label: string;
+    match: (path: string) => boolean;
+  }>;
+
+  /**
+   * 语言列表
+   */
+  languages?: Array<{ code: string; name: string }>;
+
+  /**
+   * 当前语言
+   */
+  currentLocale?: string;
+
+  /**
+   * 页脚相关配置
+   */
+  // Footer 相关参数
+  /**
+   * 页脚标语
+   * @default "优雅、高效的组件库"
+   */
+  footerSlogan?: string;
+  
+  /**
+   * 公司名称
+   * @default 与siteName相同
+   */
+  footerCompany?: string;
+  
+  /**
+   * 版权信息
+   * @default "保留所有权利"
+   */
+  footerCopyright?: string;
+  
+  /**
+   * 页脚横幅标语
+   * @default "构建美好的数字体验"
+   */
+  footerInspirationalSlogan?: string;
+  
+  /**
+   * ICP备案号
+   */
+  footerIcp?: string;
+  
+  /**
+   * 网站Logo
+   */
+  footerLogo?: { src: string; alt: string };
+  
+  /**
+   * 产品链接列表
+   */
+  footerProducts?: Array<{ name: string; href: string; external?: boolean }>;
+  
+  /**
+   * 关于我们链接
+   * @default "/about"
+   */
+  footerAboutLink?: string;
+  
+  /**
+   * 联系我们链接
+   * @default "/contact"
+   */
+  footerContactLink?: string;
+  
+  /**
+   * 服务条款链接
+   */
+  footerTermsLink?: string;
+  
+  /**
+   * 隐私政策链接
+   */
+  footerPrivacyLink?: string;
+  
+  /**
+   * 社交媒体链接列表
+   */
+  footerSocialLinks?: string[];
+  
+  /**
+   * 团队介绍链接
+   */
+  footerTeamLink?: string;
+  
+  /**
+   * 加入我们链接
+   */
+  footerCareersLink?: string;
+  
+  /**
+   * 新闻动态链接
+   */
+  footerNewsLink?: string;
+  
+  /**
+   * 发展历程链接
+   */
+  footerHistoryLink?: string;
+  
+  /**
+   * 合作伙伴链接
+   */
+  footerPartnersLink?: string;
+  
+  /**
+   * 技术博客链接
+   */
+  footerBlogLink?: string;
+  
+  /**
+   * 常见问题链接
+   */
+  footerFaqLink?: string;
+  
+  /**
+   * 媒体报道链接
+   */
+  footerMediaLink?: string;
+  
+  /**
+   * 技术栈链接
+   */
+  footerTechStackLink?: string;
+}
+
+const {
+  title,
+  description,
+  keywords,
+  siteName = "文档中心",
+  logo = DefaultLogo,
+  sidebarItems,
+  showTableOfContents = true,
+  showHeader = true,
+  showFooter = true,
+  head,
+  class: className,
+  'class:list': classList,
+  debug = false,
+  navItems,
+  languages,
+  currentLocale,
+  footerSlogan,
+  footerCompany,
+  footerCopyright,
+  footerInspirationalSlogan,
+  footerIcp,
+  footerLogo,
+  footerProducts,
+  footerAboutLink,
+  footerContactLink,
+  footerTermsLink,
+  footerPrivacyLink,
+  footerSocialLinks,
+  footerTeamLink,
+  footerCareersLink,
+  footerNewsLink,
+  footerHistoryLink,
+  footerPartnersLink,
+  footerBlogLink,
+  footerFaqLink,
+  footerMediaLink,
+  footerTechStackLink,
+  ...rest
+} = Astro.props;
+
+const currentPath = Astro.url.pathname;
+---
+
+<BaseLayout 
+  title={title} 
+  description={description} 
+  keywords={keywords}
+  head={head}
+  class:list={["min-h-screen flex flex-col", { "border border-base-300": debug }]}
+  {...rest}
+>
+  {showHeader && (
+    <Header
+      logo={logo}
+      navItems={navItems}
+      languages={languages}
+      currentLocale={currentLocale}
+      sticky={true}
+    />
+  )}
+  
+  {debug && (
+    <div class="fixed top-2 right-2 badge badge-warning">
+      调试模式已启用
+    </div>
+  )}
+  
+  <div class="flex-1 flex">
+    <aside class="w-64 border-r border-base-300 shrink-0">
+      <nav class="p-4 sticky top-16">
+        {sidebarItems.map((section: SidebarSection) => (
+          <div class="mb-6">
+            <h3 class="font-bold mb-2 text-base-content/70">{section.title}</h3>
+            <ul class="menu menu-sm">
+              {section.items.map((item: SidebarItem) => {
+                const isActive = currentPath === item.href;
+                return (
+                  <li>
+                    <a 
+                      href={item.href} 
+                      class:list={[
+                        "hover:bg-base-200",
+                        { "active": isActive }
+                      ]}
+                    >
+                      {item.text}
+                    </a>
+                    {item.items && (
+                      <ul class="menu menu-sm pl-4">
+                        {item.items.map((subitem: SidebarItem) => {
+                          const isSubActive = currentPath === subitem.href;
+                          return (
+                            <li>
+                              <a 
+                                href={subitem.href} 
+                                class:list={[
+                                  "hover:bg-base-200",
+                                  { "active": isSubActive }
+                                ]}
+                              >
+                                {subitem.text}
+                              </a>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ))}
+      </nav>
+    </aside>
+    
+    <Main 
+      class="flex-1 py-8" 
+    >
+      <div class="container mx-auto px-4 flex gap-8">
+        <Article 
+          class="prose max-w-3xl" 
+        >
+          <slot />
+        </Article>
+        
+        {showTableOfContents && (
+          <div class="w-64 shrink-0">
+            <div class="sticky top-16">
+              <slot name="toc">
+                <TableOfContents />
+              </slot>
+            </div>
+          </div>
+        )}
+      </div>
+    </Main>
+  </div>
+  
+  {showFooter && (
+    <Footer 
+      siteName={siteName}
+      homeLink="/"
+      slogan={footerSlogan || "优雅、高效的组件库"}
+      company={footerCompany || siteName}
+      copyright={footerCopyright || "保留所有权利"}
+      inspirationalSlogan={footerInspirationalSlogan || "构建美好的数字体验"}
+      aboutLink={footerAboutLink || "/about"}
+      contactLink={footerContactLink || "/contact"}
+      icp={footerIcp}
+      logo={footerLogo}
+      products={footerProducts}
+      termsLink={footerTermsLink}
+      privacyLink={footerPrivacyLink}
+      socialLinks={footerSocialLinks}
+      teamLink={footerTeamLink}
+      careersLink={footerCareersLink}
+      newsLink={footerNewsLink}
+      historyLink={footerHistoryLink}
+      partnersLink={footerPartnersLink}
+      blogLink={footerBlogLink}
+      faqLink={footerFaqLink}
+      mediaLink={footerMediaLink}
+      techStackLink={footerTechStackLink}
+    />
+  )}
+</BaseLayout>