@coffic/cosy-ui 0.3.10-beta.1 → 0.3.15

package/dist/components/containers/Section.astro

@@ -11,15 +11,16 @@
  *   <p>内容将被包裹在一个合适的区块中</p>
  * </Section>
  * 
- * <Section padding="lg" background="gray" centered={true}>
+ * <Section padding="lg" background="gray" centered={true} border={true}>
  *   <h2>自定义区块</h2>
- *   <p>大内边距，灰色背景，内容居中</p>
+ *   <p>大内边距，灰色背景，内容居中，带边框</p>
  * </Section>
  * ```
  */
 
 import type { HTMLAttributes } from 'astro/types';
 import Container from './Container.astro';
+import "../../app.css"
 
 interface Props extends HTMLAttributes<'section'> {
   /**
@@ -51,6 +52,12 @@ interface Props extends HTMLAttributes<'section'> {
    * @default false
    */
   centered?: boolean;
+
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  border?: boolean;
   
   /**
    * 自定义类名
@@ -79,6 +86,7 @@ const {
   container = true,
   containerSize = 'md',
   centered = false,
+  border = false,
   class: className = '',
   'class:list': classList,
   id,
@@ -88,32 +96,33 @@ const {
 
 // 内边距映射
 const paddingClasses = {
-  'none': 'py-0',
-  'sm': 'py-6',
-  'md': 'py-12',
-  'lg': 'py-16',
-  'xl': 'py-24'
+  'none': 'cosy:py-0',
+  'sm': 'cosy:py-6',
+  'md': 'cosy:py-12',
+  'lg': 'cosy:py-16',
+  'xl': 'cosy:py-24'
 };
 
 // 背景颜色映射
 const backgroundClasses = {
-  'transparent': 'bg-transparent',
-  'white': 'bg-white',
-  'gray': 'bg-gray-100',
-  'primary': 'bg-blue-50',
-  'secondary': 'bg-gray-50',
-  'dark': 'bg-gray-900 text-white'
+  'transparent': 'cosy:bg-transparent',
+  'white': 'cosy:bg-base-100',
+  'gray': 'cosy:bg-base-200',
+  'primary': 'cosy:bg-primary/10',
+  'secondary': 'cosy:bg-secondary/10',
+  'dark': 'cosy:bg-neutral cosy:text-neutral-content'
 };
 
 // 构建最终类名
 const sectionClasses = [
   paddingClasses[padding as keyof typeof paddingClasses],
   backgroundClasses[background as keyof typeof backgroundClasses],
+  border ? 'cosy:border cosy:rounded-lg' : '',
   className
 ].join(' ');
 
 // 内容类名
-const contentClasses = centered ? 'text-center' : '';
+const contentClasses = centered ? 'cosy:text-center' : '';
 ---
 
 <section id={id} class:list={[sectionClasses, classList]} style={style} {...rest}>
@@ -127,19 +136,3 @@ const contentClasses = centered ? 'text-center' : '';
     </div>
   )}
 </section>
-
-<style>
-  /* 背景颜色 */
-  .bg-transparent { background-color: transparent; }
-  .bg-white { background-color: #ffffff; }
-  .bg-gray-50 { background-color: #f9fafb; }
-  .bg-gray-100 { background-color: #f3f4f6; }
-  .bg-blue-50 { background-color: #eff6ff; }
-  .bg-gray-900 { background-color: #111827; }
-  
-  /* 文字颜色 */
-  .text-white { color: #ffffff; }
-  
-  /* 文本对齐 */
-  .text-center { text-align: center; }
-</style> 

package/dist/components/display/Modal.astro

@@ -46,6 +46,7 @@
 
 // 导入样式
 import '../../app.css';
+import Button from '../base/Button.astro';
 
 interface Props {
     /**
@@ -75,26 +76,32 @@ const {
 } = Astro.props;
 ---
 
-<dialog id={id} class="modal">
-    <div class:list={["modal-box", className]}>
+<dialog id={id} class="cosy:modal">
+    <div class:list={["cosy:modal-box", className]}>
         {showCloseButton && (
             <form method="dialog">
-                <button class="modal-close-button">✕</button>
+                <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    shape="circle" 
+                    formmethod="dialog"
+                    class="cosy:modal-close-button"
+                >✕</Button>
             </form>
         )}
         
-        {title && <h3 class="modal-title">{title}</h3>}
+        {title && <h3 class="cosy:modal-title">{title}</h3>}
         
-        <div class="modal-content">
+        <div class="cosy:modal-content">
             <slot />
         </div>
 
-        <div class="modal-action">
+        <div class="cosy:modal-action">
             <slot name="actions" />
         </div>
     </div>
 
-    <form method="dialog" class="modal-backdrop">
+    <form method="dialog" class="cosy:modal-backdrop">
         <button>关闭</button>
     </form>
 </dialog>

package/dist/components/icons/MenuIcon.astro

@@ -1,4 +1,7 @@
 ---
+/**
+ * 菜单图标组件
+ */
 interface Props {
   /**
    * 图标的大小
@@ -14,13 +17,9 @@ interface Props {
    * 自定义类名
    */
   class?: string;
-  /**
-   * 插槽名称
-   */
-  slot?: string;
 }
 
-const { size = '24px', color = 'currentColor', class: className = '', slot } = Astro.props;
+const { size = '24px', color = 'currentColor', class: className = '' } = Astro.props;
 ---
 
 <svg 
@@ -35,7 +34,5 @@ const { size = '24px', color = 'currentColor', class: className = '', slot } = A
   stroke-linejoin="round"
   class={className}
 >
-  <line x1="3" y1="12" x2="21" y2="12" />
-  <line x1="3" y1="6" x2="21" y2="6" />
-  <line x1="3" y1="18" x2="21" y2="18" />
+  <path d="M4 6h16M4 12h16M4 18h16" />
 </svg> 

package/dist/components/layouts/DocumentationLayout.astro

@@ -4,6 +4,38 @@
  * 
  * 适用于文档页面的布局，包含侧边栏导航和目录
  * 
+ * 布局效果：
+ * 
+ * 移动端：
+ * ```
+ * +------------------+
+ * |     Header      |
+ * +------------------+
+ * | Sidebar (1 line) |
+ * +------------------+
+ * |                  |
+ * |   Main Content   |
+ * |                  |
+ * |                  |
+ * +------------------+
+ * |     Footer      |
+ * +------------------+
+ * ```
+ * 
+ * 桌面端：
+ * ```
+ * +------------------+
+ * |      Header     |
+ * +--------+---------+
+ * |        |         |
+ * |Sidebar | Content |
+ * |        |         |
+ * |        |         |
+ * +--------+---------+
+ * |      Footer     |
+ * +------------------+
+ * ```
+ * 
  * @example
  * ```astro
  * ---
@@ -317,6 +349,12 @@ export interface Props {
    * 首页链接
    */
   footerHomeLink?: string;
+
+  /**
+   * 是否默认展开侧边栏（移动端）
+   * @default false
+   */
+  defaultSidebarOpen?: boolean;
 }
 
 const {
@@ -360,6 +398,7 @@ const {
   footerFaqLink,
   footerMediaLink,
   footerTechStackLink,
+  defaultSidebarOpen = false,
   ...rest
 } = Astro.props;
 
@@ -386,37 +425,38 @@ const validLang = getValidLanguage(currentLocale);
       currentLocale={currentLocale}
       sticky={true}
       basePath={basePath}
+      showSidebarToggle={true}
+      defaultSidebarOpen={defaultSidebarOpen}
     />
   )}
   
-  {debug && (
-    <div class="cosy:fixed cosy:top-2 cosy:right-2 cosy:badge cosy:badge-warning">
-      调试模式已启用
+  <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-1 cosy:flex">
-    <Sidebar sidebarItems={sidebarItems} currentPath={currentPath} />
     
-    <Main 
-      class="cosy:flex-1 cosy:py-8 cosy:min-h-screen" 
-    >
-      <div class="cosy:container cosy:mx-auto cosy:px-4 cosy:flex cosy:gap-8">
-        <Article >
-          <slot />
-        </Article>
-        
-        {showTableOfContents && (
-          <div class="cosy:w-64 cosy:shrink-0">
-            <div class="cosy:sticky cosy:top-16">
-              <slot name="toc">
-                <TableOfContents lang={currentLocale} />
-              </slot>
-            </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>
+      </Main>
+    </div>
   </div>
   
   {showFooter && (
@@ -447,4 +487,20 @@ const validLang = getValidLanguage(currentLocale);
       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> 

package/dist/components/layouts/Footer.astro

@@ -146,11 +146,11 @@
  */
 
 import { processSocialLink } from '../../utils/social';
-import Link from '../base/Link.astro';
 import SocialIcon from '../icons/SocialIcon.astro';
 import type { FooterProps } from '../../types/footer';
-import { getCurrentLanguage, LanguageSource } from '../../utils/language';
+import { getCurrentLanguage } from '../../utils/language';
 import { createTextGetter } from '../../utils/i18n';
+import NavSection from './NavSection.astro';
 
 // 导入样式
 import '../../app.css';
@@ -194,7 +194,6 @@ const {
 	techStackLink,
 	debug = false,
 	lang: userLang,
-	enableLogging = false,
 }: Props = Astro.props;
 
 // 获取当前语言
@@ -202,22 +201,6 @@ const langInfo = getCurrentLanguage(userLang);
 // 创建文本获取函数
 const t = createTextGetter(langInfo, 'footer');
 
-// 获取语言来源的描述
-function getLanguageSourceDescription(source: LanguageSource): string {
-  switch (source) {
-    case LanguageSource.USER:
-      return '用户指定';
-    case LanguageSource.URL:
-      return 'URL参数';
-    case LanguageSource.BROWSER:
-      return '浏览器设置';
-    case LanguageSource.DEFAULT:
-      return '默认语言';
-    default:
-      return '未知来源';
-  }
-}
-
 const currentYear = new Date().getFullYear();
 
 // 处理社交链接
@@ -238,28 +221,28 @@ const debugClasses = debug ? {
 ---
 
 <footer class:list={["cosy:footer 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:gap-8 cosy:container cosy:mx-auto cosy:items-center cosy:w-full cosy:md:flex-row cosy:md:justify-between", debugClasses.section]}>
+	<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", debugClasses.aside]}>
-			<a href={homeLink} class="cosy:flex cosy:items-center cosy:gap-2 cosy:mb-4">
+		<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:mask cosy:mask-squircle cosy:w-12 cosy:h-12"
+						class="cosy:w-12 cosy:h-12 cosy:mask cosy:mask-squircle"
 						width="48"
 						height="48"
 					/>
 				)}
 				<div>
-					<h2 class="cosy:text-xl cosy:font-bold">{siteName}</h2>
+					<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:gap-2 cosy:mt-4">
+				<div class="cosy:flex cosy:justify-center cosy:gap-2 cosy:mt-4">
 					{processedSocialLinks.map((link) => (
 						<a 
 							href={link.url} 
@@ -276,49 +259,39 @@ const debugClasses = debug ? {
 		</aside>
 
 		{/* 导航区域 */}
-		<div class:list={["cosy:flex cosy:flex-col 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 && (
-				<nav class:list={["cosy:flex cosy:flex-col cosy:gap-3 cosy:h-full cosy:self-start", debugClasses.nav]}>
-					<h6 class="cosy:footer-title">{t('products')}</h6>
-					{products.map((product) => (
-						<Link href={product.href} external={product.external} size='sm' block animation='hover-lift'>
-							{product.name}
-						</Link>
-					))}
-				</nav>
+				<NavSection title={t('products')} links={products} />
 			)}
 
 			{/* 关于导航 */}
 			{(aboutLink || contactLink || teamLink || careersLink) && (
-				<nav class:list={["cosy:flex cosy:flex-col cosy:gap-3 cosy:h-full cosy:self-start", debugClasses.nav]}>
-					<h6 class="cosy:footer-title">{t('about')}</h6>
-					{aboutLink && <Link href={aboutLink} block animation='hover-lift' size='sm'>{t('aboutUs')}</Link>}
-					{teamLink && <Link href={teamLink} block animation='hover-lift' size='sm'>{t('team')}</Link>}
-					{careersLink && <Link href={careersLink} block animation='hover-lift' size='sm'>{t('careers')}</Link>}
-					{contactLink && <Link href={contactLink} block animation='hover-lift' size='sm'>{t('contactUs')}</Link>}
-				</nav>
+				<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) && (
-				<nav class:list={["cosy:flex cosy:flex-col cosy:gap-3 cosy:h-full cosy:self-start", debugClasses.nav]}>
-					<h6 class="cosy:footer-title">{t('resources')}</h6>
-					{newsLink && <Link href={newsLink} block animation='hover-lift' size='sm'>{t('news')}</Link>}
-					{blogLink && <Link href={blogLink} block animation='hover-lift' size='sm'>{t('blog')}</Link>}
-					{faqLink && <Link href={faqLink} block animation='hover-lift' size='sm'>{t('faq')}</Link>}
-					{historyLink && <Link href={historyLink} block animation='hover-lift' size='sm'>{t('history')}</Link>}
-					{techStackLink && <Link href={techStackLink} block animation='hover-lift' size='sm'>{t('techStack')}</Link>}
-				</nav>
+				<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) && (
-				<nav class:list={["cosy:flex cosy:flex-col cosy:gap-3 cosy:h-full cosy:self-start", debugClasses.nav]}>
-					<h6 class="cosy:footer-title">{t('legal')}</h6>
-					{termsLink && <Link href={termsLink} block animation='hover-lift' size='sm'>{t('terms')}</Link>}
-					{privacyLink && <Link href={privacyLink} block animation='hover-lift' size='sm'>{t('privacy')}</Link>}
-				</nav>
+				<NavSection title={t('legal')} links={[
+					{ name: t('terms'), href: termsLink },
+					{ name: t('privacy'), href: privacyLink }
+				].filter(link => link.href)} />
 			)}
 		</div>
 	</div>
@@ -334,32 +307,13 @@ const debugClasses = debug ? {
 {/* 底部版权信息 */}
 <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:text-sm cosy:opacity-70">
+		<p class="cosy:opacity-70 cosy:text-sm">
 			© {currentYear} {company} - {copyright || t('allRightsReserved')}
 		</p>
 		{icp && (
-			<p class="cosy:text-sm cosy:opacity-70 cosy:ml-4">
+			<p class="cosy:opacity-70 cosy:ml-4 cosy:text-sm">
 				{icp}
 			</p>
 		)}
 	</aside>
-</div>
-
-<script define:vars={{ langInfo, enableLogging }}>
-  // 输出语言信息到控制台
-  if (enableLogging) {
-    console.log(`[Footer] 语言信息:`, {
-      语言代码: langInfo.code,
-      语言来源: langInfo.source,
-      来源描述: (() => {
-        switch (langInfo.source) {
-          case 'user': return '用户指定';
-          case 'url': return 'URL参数';
-          case 'browser': return '浏览器设置';
-          case 'default': return '默认语言';
-          default: return '未知来源';
-        }
-      })()
-    });
-  }
-</script>
+</div>

package/dist/components/layouts/Header.astro

@@ -1,7 +1,5 @@
 ---
-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';
 
@@ -42,6 +40,16 @@ interface Props {
 	 * @default ""
 	 */
 	basePath?: string;
+	/**
+	 * 是否显示侧边栏切换按钮
+	 * @default false
+	 */
+	showSidebarToggle?: boolean;
+	/**
+	 * 侧边栏是否默认展开
+	 * @default false
+	 */
+	defaultSidebarOpen?: boolean;
 }
 
 const {
@@ -54,7 +62,7 @@ const {
 		{ code: 'en', name: 'English' }
 	],
 	currentLocale = 'zh-cn',
-	basePath = ''
+	basePath = '',
 } = Astro.props;
 
 type NavItem = { href: string; label: string; match: (path: string) => boolean };
@@ -77,36 +85,18 @@ function getLanguageUrl(langCode: string) {
 ---
 
 <header class:list={[
-	"cosy:navbar cosy:bg-accent/30 cosy:backdrop-blur cosy:border-base-200 cosy:z-50 cosy:w-full",
+	"cosy:navbar cosy:bg-accent/70 cosy:backdrop-blur cosy:border-base-200 cosy:z-50 cosy:w-full",
 	{ "cosy:fixed cosy:top-0": sticky }
 ]}>
 	<div class="cosy:navbar-start">
-		<!-- 移动端菜单 -->
-		<div class="cosy:dropdown cosy:lg:hidden">
-			<div tabindex="0" role="button" class="cosy:btn cosy:btn-ghost cosy:btn-circle">
-				<svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-5 cosy: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="cosy:menu cosy:menu-sm cosy:dropdown-content cosy:mt-3 cosy:z-[1] cosy:p-2 cosy:shadow cosy:bg-base-100 cosy:rounded-box cosy:w-52">
-				{navItems.map((item: NavItem) => (
-					<li>
-						<Link href={item.href}>
-							{item.label}
-						</Link>
-					</li>
-				))}
-			</ul>
-		</div>
-
 		<Link href={logoHref} class="cosy:btn cosy:btn-ghost">
 			<Image src={logo} alt="logo" class="cosy:w-10 cosy:h-10" />
 		</Link>
 	</div>
 
-	<!-- 桌面端导航 -->
-	<div class="cosy:navbar-center cosy:hidden cosy:lg:flex">
-		<ul class="cosy:menu cosy:menu-horizontal cosy:px-1">
+	<!-- 导航 -->
+	<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
+		<ul class="cosy:px-1 cosy:menu cosy:menu-horizontal">
 			{navItems.map((item: NavItem) => (
 				<li>
 					<Link href={item.href}>
@@ -122,11 +112,11 @@ function getLanguageUrl(langCode: string) {
 		<div class="cosy:dropdown cosy:dropdown-end">
 			<div tabindex="0" role="button" class="cosy:btn cosy:btn-ghost cosy:btn-sm">
 				<span class="cosy:mr-1">{currentLocale === 'zh-cn' ? '中文' : 'English'}</span>
-				<svg xmlns="http://www.w3.org/2000/svg" class="cosy:h-4 cosy:w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<svg xmlns="http://www.w3.org/2000/svg" class="cosy:w-4 cosy:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
 				</svg>
 			</div>
-			<ul tabindex="0" class="cosy:dropdown-content cosy:z-[1] cosy:menu cosy:p-2 cosy:shadow cosy:bg-base-100 cosy:rounded-box cosy:w-32">
+			<ul tabindex="0" class="cosy:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-32 cosy:dropdown-content cosy:menu">
 				{languages.map((lang) => (
 					<li class={currentLocale === lang.code ? "cosy:disabled" : ""}>
 						<a href={getLanguageUrl(lang.code)} class={currentLocale === lang.code ? "cosy:active" : ""}>

package/dist/components/layouts/NavSection.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * @component NavSection
+ * 
+ * @description
+ * NavSection 组件用于在页脚中创建一个导航部分。
+ * 
+ * @props
+ * @prop {string} title - 导航部分的标题
+ * @prop {Array<Object>} links - 链接数组，每个对象包含name、href和可选的external属性
+ * 
+ */
+
+import Link from '../base/Link.astro';
+
+interface NavSectionProps {
+  title: string;
+  links: Array<{ name: string; href: string; external?: boolean }>;
+}
+
+const props = Astro.props as NavSectionProps;
+const { title, links } = props;
+---
+
+<nav class="cosy:flex cosy:flex-col cosy:items-center cosy:gap-3 cosy:hover:bg-base-300 cosy:hover:shadow-lg cosy:p-4 cosy:rounded cosy:h-full! cosy:hover:scale-105 cosy:transition-transform cosy:duration-300">
+  <h6 class="cosy:footer-title">{title}</h6>
+  {links.map((link) => (
+    <Link href={link.href} external={link.external} size='sm' block animation='hover-lift' centerText>
+      {link.name}
+    </Link>
+  ))}
+</nav>