@coffic/cosy-ui 0.3.15 → 0.3.33

package/dist/components/layouts/DocumentationLayout.astro

@@ -1,11 +1,11 @@
 ---
 /**
  * DocumentationLayout组件
- * 
+ *
  * 适用于文档页面的布局，包含侧边栏导航和目录
- * 
+ *
  * 布局效果：
- * 
+ *
  * 移动端：
  * ```
  * +------------------+
@@ -21,7 +21,7 @@
  * |     Footer      |
  * +------------------+
  * ```
- * 
+ *
  * 桌面端：
  * ```
  * +------------------+
@@ -35,12 +35,12 @@
  * |      Footer     |
  * +------------------+
  * ```
- * 
+ *
  * @example
  * ```astro
  * ---
  * import DocumentationLayout from '../layouts/DocumentationLayout.astro';
- * 
+ *
  * const sidebarItems = [
  *   { title: "入门", items: [
  *     { href: "/docs/getting-started", text: "快速开始" },
@@ -52,9 +52,9 @@
  *   ]}
  * ];
  * ---
- * 
- * <DocumentationLayout 
- *   title="文档标题" 
+ *
+ * <DocumentationLayout
+ *   title="文档标题"
  *   description="文档描述"
  *   sidebarItems={sidebarItems}
  * >
@@ -62,11 +62,11 @@
  *   <p>这是文档的主要内容</p>
  * </DocumentationLayout>
  * ```
- * 
+ *
  * 自定义页脚示例：
  * ```astro
- * <DocumentationLayout 
- *   title="文档标题" 
+ * <DocumentationLayout
+ *   title="文档标题"
  *   description="文档描述"
  *   sidebarItems={sidebarItems}
  *   footerSlogan="简单而强大的组件库"
@@ -84,14 +84,14 @@
  *   <p>这是文档的主要内容</p>
  * </DocumentationLayout>
  * ```
- * 
+ *
  * 组件支持多种页脚相关的配置参数，可以通过以 `footer` 为前缀的属性来自定义页脚的内容和链接。
  * 所有这些参数都是可选的，组件会为常用参数提供默认值。
- * 
+ *
  * 调试模式示例：
  * ```astro
- * <DocumentationLayout 
- *   title="文档标题" 
+ * <DocumentationLayout
+ *   title="文档标题"
  *   description="文档描述"
  *   sidebarItems={sidebarItems}
  *   debug={true}
@@ -117,289 +117,289 @@ import { getText } from '../../utils/i18n';
 import { getValidLanguage } from '../../utils/language';
 
 export interface SidebarItem {
-  href: string;
-  text: string;
-  items?: SidebarItem[];
+	href: string;
+	text: string;
+	items?: SidebarItem[];
 }
 
 export interface SidebarSection {
-  title: string;
-  items: SidebarItem[];
+	title: string;
+	items: SidebarItem[];
 }
 
 export interface Props {
-  /**
-   * 页面标题
-   */
-  title: string;
-  
-  /**
-   * 页面描述
-   */
-  description?: string;
-  
-  /**
-   * 页面关键词
-   */
-  keywords?: string;
-  
-  /**
-   * 网站名称
-   * @default "文档中心"
-   */
-  siteName?: string;
-  
-  /**
-   * Logo图片
-   * @default "/logo.svg"
-   */
-  logo?: ImageMetadata;
-  
-  /**
-   * Logo链接地址
-   * @default "/"
-   */
-  logoHref?: string;
-  
-  /**
-   * 侧边栏项目
-   */
-  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;
-  
-  /**
-   * 基础路径，用于处理网站部署在二级目录的情况
-   * @default ""
-   */
-  basePath?: 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;
-
-  /**
-   * 首页链接
-   */
-  footerHomeLink?: string;
-
-  /**
-   * 是否默认展开侧边栏（移动端）
-   * @default false
-   */
-  defaultSidebarOpen?: boolean;
+	/**
+	 * 页面标题
+	 */
+	title: string;
+
+	/**
+	 * 页面描述
+	 */
+	description?: string;
+
+	/**
+	 * 页面关键词
+	 */
+	keywords?: string;
+
+	/**
+	 * 网站名称
+	 * @default "文档中心"
+	 */
+	siteName?: string;
+
+	/**
+	 * Logo图片
+	 * @default "/logo.svg"
+	 */
+	logo?: ImageMetadata;
+
+	/**
+	 * Logo链接地址
+	 * @default "/"
+	 */
+	logoHref?: string;
+
+	/**
+	 * 侧边栏项目
+	 */
+	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;
+
+	/**
+	 * 基础路径，用于处理网站部署在二级目录的情况
+	 * @default ""
+	 */
+	basePath?: 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;
+
+	/**
+	 * 首页链接
+	 */
+	footerHomeLink?: string;
+
+	/**
+	 * 是否默认展开侧边栏（移动端）
+	 * @default false
+	 */
+	defaultSidebarOpen?: boolean;
 }
 
 const {
-  title,
-  description,
-  keywords,
-  siteName = "文档中心",
-  logo = DefaultLogo,
-  logoHref = "/",
-  sidebarItems,
-  showTableOfContents = true,
-  showHeader = true,
-  showFooter = true,
-  head,
-  class: className,
-  'class:list': classList,
-  debug = true,
-  navItems,
-  languages,
-  currentLocale,
-  basePath = "",
-  footerHomeLink,
-  footerSlogan,
-  footerCompany,
-  footerCopyright,
-  footerInspirationalSlogan,
-  footerIcp,
-  footerLogo,
-  footerProducts,
-  footerAboutLink,
-  footerContactLink,
-  footerTermsLink,
-  footerPrivacyLink,
-  footerSocialLinks,
-  footerTeamLink,
-  footerCareersLink,
-  footerNewsLink,
-  footerHistoryLink,
-  footerPartnersLink,
-  footerBlogLink,
-  footerFaqLink,
-  footerMediaLink,
-  footerTechStackLink,
-  defaultSidebarOpen = false,
-  ...rest
+	title,
+	description,
+	keywords,
+	siteName = '文档中心',
+	logo = DefaultLogo,
+	logoHref = '/',
+	sidebarItems,
+	showTableOfContents = true,
+	showHeader = true,
+	showFooter = true,
+	head,
+	class: className,
+	'class:list': classList,
+	debug = true,
+	navItems,
+	languages,
+	currentLocale,
+	basePath = '',
+	footerHomeLink,
+	footerSlogan,
+	footerCompany,
+	footerCopyright,
+	footerInspirationalSlogan,
+	footerIcp,
+	footerLogo,
+	footerProducts,
+	footerAboutLink,
+	footerContactLink,
+	footerTermsLink,
+	footerPrivacyLink,
+	footerSocialLinks,
+	footerTeamLink,
+	footerCareersLink,
+	footerNewsLink,
+	footerHistoryLink,
+	footerPartnersLink,
+	footerBlogLink,
+	footerFaqLink,
+	footerMediaLink,
+	footerTechStackLink,
+	defaultSidebarOpen = false,
+	...rest
 } = Astro.props;
 
 const currentPath = Astro.url.pathname;
@@ -408,99 +408,109 @@ const currentPath = Astro.url.pathname;
 const validLang = getValidLanguage(currentLocale);
 ---
 
-<BaseLayout 
-  title={title} 
-  description={description} 
-  keywords={keywords}
-  head={head}
-  class:list={["cosy:min-h-screen cosy:flex cosy:flex-col", { "cosy:border cosy:border-base-300": debug }]}
-  {...rest}
->
-  {showHeader && (
-    <Header
-      logo={logo}
-      logoHref={logoHref}
-      navItems={navItems}
-      languages={languages}
-      currentLocale={currentLocale}
-      sticky={true}
-      basePath={basePath}
-      showSidebarToggle={true}
-      defaultSidebarOpen={defaultSidebarOpen}
-    />
-  )}
-  
-  <div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:flex-1">
-    <!-- 侧边栏容器 -->
-    <div class="cosy:top-16 cosy:z-10 cosy:sticky cosy:bg-base-100">
-      <Sidebar 
-        sidebarItems={sidebarItems} 
-        currentPath={currentPath}
-        debug={false}
-        class="cosy:lg:border-r cosy:border-b cosy:border-base-300 cosy:lg:border-b-0 cosy:lg:w-64 cosy:lg:shrink-0"
-      />
-    </div>
-    
-    <!-- 主内容区域 -->
-    <div class="cosy:flex cosy:flex-col cosy:flex-1 cosy:items-center cosy:min-h-screen">
-      <Main class="cosy:lg:py-8 cosy:py-4 cosy:w-full">
-        <div class="cosy:mx-auto cosy:px-4 lg:cosy:px-8 cosy:container">
-          <div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:justify-center cosy:gap-8">
-            <Article class="cosy:flex-1 xl:cosy:w-[calc(100%-16rem)]">
-              <slot />
-            </Article>
-            
-            {showTableOfContents && (
-              <TableOfContents lang={currentLocale} />
-            )}
-          </div>
-        </div>
-      </Main>
-    </div>
-  </div>
-  
-  {showFooter && (
-    <Footer 
-      siteName={siteName}
-      lang={currentLocale}
-      homeLink={footerHomeLink || "/"}
-      slogan={footerSlogan || getText(validLang, 'footer', 'slogan') || getText(validLang, 'footer', 'defaultSlogan')}
-      company={footerCompany || siteName}
-      copyright={footerCopyright || getText(validLang, 'footer', 'copyright')}
-      inspirationalSlogan={footerInspirationalSlogan || getText(validLang, 'footer', 'inspirationalSlogan')}
-      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}
-    />
-  )}
-
-  <script>
-    // Handle sidebar toggle
-    const sidebarToggle = document.getElementById('sidebar-toggle');
-    const sidebar = document.getElementById('sidebar-mobile');
-    const sidebarOverlay = document.getElementById('sidebar-overlay');
-
-    function toggleSidebar() {
-      sidebar?.classList.toggle('cosy:hidden');
-      sidebarOverlay?.classList.toggle('cosy:hidden');
-      document.body.classList.toggle('cosy:overflow-hidden');
-    }
-
-    sidebarToggle?.addEventListener('click', toggleSidebar);
-    sidebarOverlay?.addEventListener('click', toggleSidebar);
-  </script>
-</BaseLayout> 
+<BaseLayout
+	title={title}
+	description={description}
+	keywords={keywords}
+	head={head}
+	class:list={[
+		'cosy:min-h-screen cosy:flex cosy:flex-col',
+		{ 'cosy:border cosy:border-base-300': debug },
+	]}
+	{...rest}>
+	{
+		showHeader && (
+			<Header
+				logo={logo}
+				logoHref={logoHref}
+				navItems={navItems}
+				languages={languages}
+				currentLocale={currentLocale}
+				sticky={true}
+				basePath={basePath}
+				showSidebarToggle={true}
+				defaultSidebarOpen={defaultSidebarOpen}
+			/>
+		)
+	}
+
+	<div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:flex-1">
+		<div class="cosy:flex cosy:flex-row cosy:flex-1 cosy:min-h-screen cosy:pb-96">
+			<!-- 侧边栏容器 -->
+			<div class="cosy:top-16 cosy:z-10 cosy:sticky cosy:bg-base-100 cosy:h-screen">
+				<Sidebar
+					sidebarItems={sidebarItems}
+					currentPath={currentPath}
+					debug={false}
+					class="cosy:lg:border-r cosy:border-b cosy:border-base-300 cosy:lg:border-b-0 cosy:lg:w-64 cosy:lg:shrink-0"
+				/>
+			</div>
+
+			<!-- 主内容区域 -->
+			<Main class="cosy:lg:py-8 cosy:py-4 cosy:w-full">
+				<div class="cosy:mx-auto cosy:px-4 lg:cosy:px-8 cosy:container">
+					<div class="cosy:flex cosy:lg:flex-row cosy:flex-col cosy:justify-center cosy:gap-8">
+						<Article class="cosy:flex-1 xl:cosy:w-[calc(100%-16rem)]">
+							<slot />
+						</Article>
+
+						{showTableOfContents && <TableOfContents lang={currentLocale} />}
+					</div>
+				</div>
+			</Main>
+		</div>
+	</div>
+
+	{
+		showFooter && (
+			<Footer
+				siteName={siteName}
+				lang={currentLocale}
+				homeLink={footerHomeLink || '/'}
+				slogan={
+					footerSlogan ||
+					getText(validLang, 'footer', 'slogan') ||
+					getText(validLang, 'footer', 'defaultSlogan')
+				}
+				company={footerCompany || siteName}
+				copyright={footerCopyright || getText(validLang, 'footer', 'copyright')}
+				inspirationalSlogan={
+					footerInspirationalSlogan || getText(validLang, 'footer', 'inspirationalSlogan')
+				}
+				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}
+			/>
+		)
+	}
+
+	<script>
+		// Handle sidebar toggle
+		const sidebarToggle = document.getElementById('sidebar-toggle');
+		const sidebar = document.getElementById('sidebar-mobile');
+		const sidebarOverlay = document.getElementById('sidebar-overlay');
+
+		function toggleSidebar() {
+			sidebar?.classList.toggle('cosy:hidden');
+			sidebarOverlay?.classList.toggle('cosy:hidden');
+			document.body.classList.toggle('cosy:overflow-hidden');
+		}
+
+		sidebarToggle?.addEventListener('click', toggleSidebar);
+		sidebarOverlay?.addEventListener('click', toggleSidebar);
+	</script>
+</BaseLayout>