@coffic/cosy-ui 0.3.69 → 0.4.5

package/dist/components/layouts/Footer.astro

@@ -1,11 +1,11 @@
 ---
 /**
  * @component Footer
- * 
+ *
  * @description
  * Footer 组件用于创建网站的页脚部分，提供版权信息、导航链接和社交媒体链接等内容。
  * 该组件支持高度自定义，可以根据需要显示或隐藏不同的部分。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 清晰的信息层次 - 通过视觉层次和分组展示不同类别的页脚信息
@@ -13,17 +13,17 @@
  * 3. 可定制性 - 支持多种配置选项，适应不同网站的需求
  * 4. 品牌一致性 - 与网站整体设计风格保持一致
  * 5. 多语言支持 - 支持多种语言显示，自动检测当前语言环境
- * 
+ *
  * 视觉特点：
  * - 分区布局：清晰区分不同类别的信息
  * - 简洁设计：使用适当的间距和字体大小确保可读性
  * - 品牌展示：突出显示网站名称和标语
  * - 社交媒体整合：提供社交媒体链接的展示
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="我的网站"
  *   homeLink="/"
  *   slogan="简单而强大"
@@ -32,10 +32,10 @@
  *   inspirationalSlogan="构建美好的数字体验"
  * />
  * ```
- * 
+ *
  * 添加社交媒体链接：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="我的网站"
  *   homeLink="/"
  *   slogan="简单而强大"
@@ -48,10 +48,10 @@
  *   ]}
  * />
  * ```
- * 
+ *
  * 添加产品链接：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="我的网站"
  *   homeLink="/"
  *   slogan="简单而强大"
@@ -64,10 +64,10 @@
  *   ]}
  * />
  * ```
- * 
+ *
  * 完整示例：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="我的网站"
  *   homeLink="/"
  *   slogan="简单而强大"
@@ -89,10 +89,10 @@
  *   privacyLink="/privacy"
  * />
  * ```
- * 
+ *
  * 指定语言：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="My Website"
  *   homeLink="/"
  *   slogan="Simple and Powerful"
@@ -101,16 +101,16 @@
  *   lang="en"
  * />
  * ```
- * 
+ *
  * 启用日志：
  * ```astro
- * <Footer 
+ * <Footer
  *   siteName="我的网站"
  *   homeLink="/"
  *   enableLogging={true}
  * />
  * ```
- * 
+ *
  * @props
  * @prop {string} siteName - 网站名称
  * @prop {string} homeLink - 首页链接
@@ -138,7 +138,7 @@
  * @prop {boolean} [debug=false] - 调试模式
  * @prop {string} [lang] - 语言代码，默认自动检测
  * @prop {boolean} [enableLogging=false] - 是否启用日志输出
- * 
+ *
  * @accessibility
  * - 使用语义化HTML结构，确保屏幕阅读器可以正确解析
  * - 所有链接都有明确的文本描述
@@ -151,23 +151,8 @@ import type { FooterProps } from '../../types/footer';
 import { getCurrentLanguage } from '../../utils/language';
 import { createTextGetter } from '../../utils/i18n';
 import NavSection from './NavSection.astro';
-
-// 导入样式
 import '../../app.css';
 
-interface Props extends FooterProps {
-	/**
-	 * 语言代码
-	 * @default 自动检测
-	 */
-	lang?: string;
-	/**
-	 * 是否启用日志输出
-	 * @default false
-	 */
-	enableLogging?: boolean;
-}
-
 const {
 	siteName,
 	homeLink,
@@ -194,7 +179,7 @@ const {
 	techStackLink,
 	debug = false,
 	lang: userLang,
-}: Props = Astro.props;
+} = Astro.props as FooterProps;
 
 // 获取当前语言
 const langInfo = getCurrentLanguage(userLang);
@@ -207,113 +192,156 @@ const currentYear = new Date().getFullYear();
 const processedSocialLinks = socialLinks.map((url) => processSocialLink(url));
 
 // 调试模式的样式类
-const debugClasses = debug ? {
-	footer: "cosy:border-2 cosy:border-blue-500",
-	section: "cosy:border-2 cosy:border-green-500",
-	nav: "cosy:border-2 cosy:border-yellow-500",
-	aside: "cosy:border-2 cosy:border-purple-500"
-} : {
-	footer: "",
-	section: "",
-	nav: "",
-	aside: ""
-};
+const debugClasses = debug
+	? {
+			footer: 'cosy:border-2 cosy:border-blue-500',
+			section: 'cosy:border-2 cosy:border-green-500',
+			nav: 'cosy:border-2 cosy:border-yellow-500',
+			aside: 'cosy:border-2 cosy:border-purple-500',
+		}
+	: {
+			footer: '',
+			section: '',
+			nav: '',
+			aside: '',
+		};
 ---
 
-<footer class:list={["cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10", debugClasses.footer]}>
-	<div class:list={["cosy:flex cosy:flex-col cosy:md:h-56 cosy:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between", debugClasses.section]}>
+<footer
+	class:list={[
+		'cosy:footer cosy:z-50 cosy:sm:footer-horizontal cosy:bg-base-200 cosy:text-base-content cosy:p-10',
+		debugClasses.footer,
+	]}>
+	<div
+		class:list={[
+			'cosy:flex cosy:flex-col cosy:md:h-56 cosy:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between',
+			debugClasses.section,
+		]}>
 		{/* 品牌区域 */}
-		<aside class:list={["cosy:max-w-xs cosy:text-center", debugClasses.aside]}>
+		<aside class:list={['cosy:max-w-xs cosy:text-center', debugClasses.aside]}>
 			<a href={homeLink} class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4 cosy:no-underline">
-				{logo && (
-					<img
-						src={logo.src}
-						alt={logo.alt}
-						class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
-						width="48"
-						height="48"
-					/>
-				)}
+				{
+					logo && (
+						<img
+							src={logo.src}
+							alt={logo.alt}
+							class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
+							width="48"
+							height="48"
+						/>
+					)
+				}
 				<div>
 					<h2 class="cosy:font-bold cosy:text-xl">{siteName}</h2>
 					<p class="cosy:text-base-content/70">{slogan}</p>
 				</div>
 			</a>
-			
+
 			{/* 社交媒体链接 */}
-			{processedSocialLinks.length > 0 && (
-				<div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
-					{processedSocialLinks.map((link) => (
-						<a 
-							href={link.url} 
-							class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
-							target="_blank" 
-							rel="noopener noreferrer"
-							aria-label={link.name}
-						>
-							<SocialIcon platform={link.platform} />
-						</a>
-					))}
-				</div>
-			)}
+			{
+				processedSocialLinks.length > 0 && (
+					<div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
+						{processedSocialLinks.map((link) => (
+							<a
+								href={link.url}
+								class="cosy:btn cosy:btn-circle cosy:btn-ghost cosy:btn-sm"
+								target="_blank"
+								rel="noopener noreferrer"
+								aria-label={link.name}>
+								<SocialIcon platform={link.platform} />
+							</a>
+						))}
+					</div>
+				)
+			}
 		</aside>
 
 		{/* 导航区域 */}
-		<div class:list={["cosy:flex cosy:h-full cosy:flex-col cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:max-w-xl cosy:text-center cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between cosy:md:items-start", debugClasses.section]}>
+		<div
+			class:list={[
+				'cosy:flex cosy:h-full cosy:flex-col cosy:justify-center cosy:gap-8 cosy:mx-auto cosy:max-w-xl cosy:text-center cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between cosy:md:items-start',
+				debugClasses.section,
+			]}>
 			{/* 产品导航 */}
-			{products.length > 0 && (
-				<NavSection title={t('products')} links={products} />
-			)}
+			{products.length > 0 && <NavSection title={t('products')} links={products} />}
 
 			{/* 关于导航 */}
-			{(aboutLink || contactLink || teamLink || careersLink) && (
-				<NavSection title={t('about')} links={[
-					{ name: t('aboutUs'), href: aboutLink },
-					{ name: t('team'), href: teamLink },
-					{ name: t('careers'), href: careersLink },
-					{ name: t('contactUs'), href: contactLink }
-				].filter(link => link.href)} />
-			)}
+			{
+				(aboutLink || contactLink || teamLink || careersLink) && (
+					<NavSection
+						title={t('about')}
+						links={[
+							{ name: t('aboutUs'), href: aboutLink },
+							{ name: t('team'), href: teamLink },
+							{ name: t('careers'), href: careersLink },
+							{ name: t('contactUs'), href: contactLink },
+						].filter((link) => link.href)}
+					/>
+				)
+			}
 
 			{/* 资源导航 */}
-			{(newsLink || historyLink || partnersLink || blogLink || faqLink || mediaLink || techStackLink) && (
-				<NavSection title={t('resources')} links={[
-					{ name: t('news'), href: newsLink },
-					{ name: t('blog'), href: blogLink },
-					{ name: t('faq'), href: faqLink },
-					{ name: t('history'), href: historyLink },
-					{ name: t('techStack'), href: techStackLink }
-				].filter(link => link.href)} />
-			)}
+			{
+				(newsLink ||
+					historyLink ||
+					partnersLink ||
+					blogLink ||
+					faqLink ||
+					mediaLink ||
+					techStackLink) && (
+					<NavSection
+						title={t('resources')}
+						links={[
+							{ name: t('news'), href: newsLink },
+							{ name: t('blog'), href: blogLink },
+							{ name: t('faq'), href: faqLink },
+							{ name: t('history'), href: historyLink },
+							{ name: t('techStack'), href: techStackLink },
+						].filter((link) => link.href)}
+					/>
+				)
+			}
 
 			{/* 法律导航 */}
-			{(termsLink || privacyLink) && (
-				<NavSection title={t('legal')} links={[
-					{ name: t('terms'), href: termsLink },
-					{ name: t('privacy'), href: privacyLink }
-				].filter(link => link.href)} />
-			)}
+			{
+				(termsLink || privacyLink) && (
+					<NavSection
+						title={t('legal')}
+						links={[
+							{ name: t('terms'), href: termsLink },
+							{ name: t('privacy'), href: privacyLink },
+						].filter((link) => link.href)}
+					/>
+				)
+			}
 		</div>
 	</div>
 </footer>
 
 {/* 横幅 */}
-{inspirationalSlogan && (
-	<aside class:list={["cosy:p-4 cosy:bg-primary cosy:text-primary-content cosy:w-full", debugClasses.aside]}>
-		<p class="cosy:text-center">{inspirationalSlogan}</p>
-	</aside>
-)}
+{
+	inspirationalSlogan && (
+		<aside
+			class:list={[
+				'cosy:p-4 cosy:bg-primary cosy:text-primary-content cosy:w-full',
+				debugClasses.aside,
+			]}>
+			<p class="cosy:text-center">{inspirationalSlogan}</p>
+		</aside>
+	)
+}
 
 {/* 底部版权信息 */}
-<div class:list={["cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content", debugClasses.footer]}>
-	<aside class:list={["cosy:items-center cosy:grid-flow-col", debugClasses.aside]}>
+<div
+	class:list={[
+		'cosy:footer cosy:footer-center cosy:p-4 cosy:bg-base-300 cosy:text-base-content',
+		debugClasses.footer,
+	]}>
+	<aside class:list={['cosy:items-center cosy:grid-flow-col', debugClasses.aside]}>
 		<p class="cosy:opacity-70 cosy:text-sm">
-			© {currentYear} {company} - {copyright || t('allRightsReserved')}
+			© {currentYear}
+			{company} - {copyright || t('allRightsReserved')}
 		</p>
-		{icp && (
-			<p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">
-				{icp}
-			</p>
-		)}
+		{icp && <p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">{icp}</p>}
 	</aside>
-</div>
+</div>