@coffic/cosy-ui 0.3.12 → 0.3.33

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();
 
 // 处理社交链接
@@ -237,29 +220,29 @@ 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]}>
+<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", 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> 

package/dist/components/layouts/Sidebar.astro

@@ -1,14 +1,14 @@
 ---
 /**
  * Sidebar组件
- * 
+ *
  * 用于文档页面的侧边栏导航
- * 
+ *
  * @example
  * ```astro
  * ---
  * import Sidebar from './Sidebar.astro';
- * 
+ *
  * const sidebarItems = [
  *   { title: "入门", items: [
  *     { href: "/docs/getting-started", text: "快速开始" },
@@ -16,104 +16,81 @@
  *   ]}
  * ];
  * ---
- * 
+ *
  * <Sidebar sidebarItems={sidebarItems} currentPath="/docs/getting-started" />
  * ```
  */
 
 import { isPathMatch } from '../../utils/path';
-import "../../app.css"
+import Modal from '../display/Modal.astro';
+import SidebarNav from './SidebarNav.astro';
+import MenuIcon from '../icons/MenuIcon.astro';
+import '../../app.css';
 
-export interface SidebarItem {
-  href: string;
-  text: string;
-  items?: SidebarItem[];
-}
-
-export interface SidebarSection {
-  title: string;
-  items: SidebarItem[];
-}
+import type { SidebarSection } from '../../types/layout';
 
 export interface Props {
-  /**
-   * 侧边栏项目
-   */
-  sidebarItems: SidebarSection[];
-  
-  /**
-   * 当前路径
-   */
-  currentPath: string;
+	/**
+	 * 侧边栏项目
+	 */
+	sidebarItems: SidebarSection[];
+
+	/**
+	 * 当前路径
+	 */
+	currentPath: string;
+
+	/**
+	 * 桌面端类名
+	 */
+	class?: string;
+
+	/**
+	 * 是否开启调试模式，显示边框
+	 * @default false
+	 */
+	debug?: boolean;
 }
 
-const { sidebarItems, currentPath } = Astro.props;
+const { sidebarItems, currentPath, class: className, debug = false } = Astro.props;
+
+const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
+
+// 获取当前活动的一级导航项
+const currentSection = sidebarItems.find((section) =>
+	section.items.some((item) => isPathMatch(currentPath, item.href))
+);
 ---
 
-<aside class="cosy:w-64 cosy:border-r cosy:border-base-300 cosy:shrink-0">
-  <nav class="cosy:p-4 cosy:sticky cosy:top-16">
-    {sidebarItems.map((section: SidebarSection) => (
-      <div class="cosy:mb-6">
-        <h3 class="cosy:font-bold cosy:mb-2 cosy:text-base-content/70">{section.title}</h3>
-        <ul class="cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56">
-          {section.items.map((item: SidebarItem) => {
-            const isActive = isPathMatch(currentPath, item.href);
-            return (
-              <li>
-                <a 
-                  href={item.href} 
-                  class:list={[
-                    "cosy:hover:bg-base-300",
-                    { "cosy:menu-active": isActive }
-                  ]}
-                >
-                  {item.text}
-                </a>
-                {item.items && (
-                  <ul>
-                    {item.items.map((subitem: SidebarItem) => {
-                      const isSubActive = isPathMatch(currentPath, subitem.href);
-                      return (
-                        <li>
-                          <a 
-                            href={subitem.href} 
-                            class:list={[
-                              "cosy:hover:bg-base-300",
-                              { "cosy:active": isSubActive }
-                            ]}
-                          >
-                            {subitem.text}
-                          </a>
-                          {subitem.items && (
-                            <ul>
-                              {subitem.items.map((subsubitem: SidebarItem) => {
-                                const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
-                                return (
-                                  <li>
-                                    <a 
-                                      href={subsubitem.href} 
-                                      class:list={[
-                                        "cosy:hover:bg-base-300",
-                                        { "cosy:active": isSubSubActive }
-                                      ]}
-                                    >
-                                      {subsubitem.text}
-                                    </a>
-                                  </li>
-                                );
-                              })}
-                            </ul>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    ))}
-  </nav>
-</aside> 
+{/* 移动端导航栏 */}
+<div
+	class:list={[
+		'cosy:flex cosy:lg:hidden cosy:items-center cosy:justify-between cosy:px-4 cosy:py-2 cosy:border-b cosy:border-base-300 cosy:bg-base-100 cosy:relative cosy:z-10',
+		debugClass,
+	]}>
+	<div class="cosy:flex cosy:items-center cosy:gap-2">
+		<button
+			type="button"
+			class="cosy:p-2 cosy:btn cosy:btn-ghost cosy:btn-sm"
+			data-modal-target="mobile-sidebar">
+			<MenuIcon class="cosy:w-5 cosy:h-5" />
+		</button>
+		<span class="cosy:font-medium cosy:text-sm">
+			{currentSection?.title || '导航'}
+		</span>
+	</div>
+</div>
+
+{/* 移动端侧边栏弹出层 */}
+<Modal id="mobile-sidebar" class="cosy:mx-4 cosy:lg:w-80 cosy:w-[calc(100vw-2rem)] cosy:max-w-full">
+	<div class="cosy:h-[calc(100vh-8rem)] cosy:overflow-y-auto">
+		<SidebarNav sidebarItems={sidebarItems} currentPath={currentPath} debug={debug} />
+	</div>
+</Modal>
+
+{/* 桌面端侧边栏 */}
+<aside class:list={[className, debugClass, 'cosy:hidden cosy:lg:block']}>
+	<div class="cosy:top-16 cosy:sticky cosy:h-[calc(100vh-4rem)]">
+		<SidebarNav sidebarItems={sidebarItems} currentPath={currentPath} debug={debug} />
+	</div>
+</aside>

package/dist/components/layouts/SidebarNav.astro

@@ -0,0 +1,122 @@
+---
+/**
+ * SidebarNav组件
+ * 
+ * 用于渲染侧边栏的导航内容
+ */
+
+import { isPathMatch } from '../../utils/path';
+import "../../app.css"
+
+export interface SidebarItem {
+  href: string;
+  text: string;
+  items?: SidebarItem[];
+}
+
+export interface SidebarSection {
+  title: string;
+  items: SidebarItem[];
+}
+
+interface Props {
+  /**
+   * 侧边栏项目
+   */
+  sidebarItems: SidebarSection[];
+  
+  /**
+   * 当前路径
+   */
+  currentPath: string;
+
+  /**
+   * 是否开启调试模式，显示边框
+   * @default false
+   */
+  debug?: boolean;
+
+  /**
+   * 自定义类名
+   */
+  class?: string;
+}
+
+const { 
+  sidebarItems, 
+  currentPath, 
+  debug = false,
+  class: className
+} = Astro.props;
+
+const debugClass = debug ? "cosy:border cosy:border-red-500" : "";
+---
+
+<nav class:list={["cosy:p-4", debugClass, className]}>
+  {sidebarItems.map((section: SidebarSection) => (
+    <div class:list={["cosy:mb-6", debugClass]}>
+      <h3 class:list={["cosy:font-bold cosy:mb-2 cosy:text-base-content/70", debugClass]}>{section.title}</h3>
+      <ul class:list={["cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56", debugClass]}>
+        {section.items.map((item: SidebarItem) => {
+          const isActive = isPathMatch(currentPath, item.href);
+          return (
+            <li class:list={[debugClass]}>
+              <a 
+                href={item.href} 
+                class:list={[
+                  "cosy:hover:bg-base-300",
+                  { "cosy:menu-active": isActive },
+                  debugClass
+                ]}
+              >
+                {item.text}
+              </a>
+              {item.items && (
+                <ul class:list={[debugClass]}>
+                  {item.items.map((subitem: SidebarItem) => {
+                    const isSubActive = isPathMatch(currentPath, subitem.href);
+                    return (
+                      <li class:list={[debugClass]}>
+                        <a 
+                          href={subitem.href} 
+                          class:list={[
+                            "cosy:hover:bg-base-300",
+                            { "cosy:active": isSubActive },
+                            debugClass
+                          ]}
+                        >
+                          {subitem.text}
+                        </a>
+                        {subitem.items && (
+                          <ul class:list={[debugClass]}>
+                            {subitem.items.map((subsubitem: SidebarItem) => {
+                              const isSubSubActive = isPathMatch(currentPath, subsubitem.href);
+                              return (
+                                <li class:list={[debugClass]}>
+                                  <a 
+                                    href={subsubitem.href} 
+                                    class:list={[
+                                      "cosy:hover:bg-base-300",
+                                      { "cosy:active": isSubSubActive },
+                                      debugClass
+                                    ]}
+                                  >
+                                    {subsubitem.text}
+                                  </a>
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  ))}
+</nav>