@coffic/cosy-ui 0.3.39 → 0.3.45

package/dist/components/layouts/Header.astro

@@ -1,4 +1,59 @@
 ---
+/**
+ * @component Header
+ *
+ * @description
+ * Header 组件是一个用于网站顶部导航的布局组件，提供了logo、导航菜单、语言切换等功能。
+ * 组件支持响应式设计，在不同屏幕尺寸下有良好的显示效果，并可选择固定在页面顶部。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁实用 - 提供清晰的导航和品牌展示，不过度占用视觉空间
+ * 2. 响应式适配 - 在移动端和桌面端都有合适的展现形式
+ * 3. 可定制性 - 支持多种配置选项，适应不同网站的风格和需求
+ * 4. 多语言支持 - 内置语言切换功能，便于构建国际化网站
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <Header
+ *   logo={import("../assets/logo.png")}
+ *   logoHref="/"
+ *   navItems={[
+ *     { href: "/docs", label: "文档", match: (path) => path.startsWith("/docs") },
+ *     { href: "/components", label: "组件", match: (path) => path.startsWith("/components") }
+ *   ]}
+ * />
+ * ```
+ *
+ * 自定义语言选项：
+ * ```astro
+ * <Header
+ *   logo={import("../assets/logo.png")}
+ *   languages={[
+ *     { code: "zh-cn", name: "简体中文" },
+ *     { code: "en", name: "English" },
+ *     { code: "ja", name: "日本語" }
+ *   ]}
+ *   currentLocale="zh-cn"
+ * />
+ * ```
+ *
+ * 带有基础路径：
+ * ```astro
+ * <Header
+ *   logo={import("../assets/logo.png")}
+ *   basePath="/my-site"
+ * />
+ * ```
+ *
+ * 自定义高度：
+ * ```astro
+ * <Header
+ *   logo={import("../assets/logo.png")}
+ *   height="lg"
+ * />
+ */
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
 import '../../app.css';
@@ -50,19 +105,31 @@ interface Props {
 	 * @default false
 	 */
 	defaultSidebarOpen?: boolean;
+	/**
+	 * 导航栏高度
+	 * @default "md"
+	 */
+	height?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	/**
+	 * 是否显示高度设置菜单
+	 * @default true
+	 */
+	showHeightSetting?: boolean;
 }
 
 const {
 	logo,
-	logoHref = "/",
+	logoHref = '/',
 	navItems = [],
 	sticky = true,
 	languages = [
 		{ code: 'zh-cn', name: '中文' },
-		{ code: 'en', name: 'English' }
+		{ code: 'en', name: 'English' },
 	],
 	currentLocale = 'zh-cn',
 	basePath = '',
+	height = 'md',
+	showHeightSetting = true,
 } = Astro.props;
 
 type NavItem = { href: string; label: string; match: (path: string) => boolean };
@@ -82,66 +149,362 @@ function getLanguageUrl(langCode: string) {
 	// 如果有基础路径，需要加上
 	return `${basePath}/${langCode}${pathWithoutLocale}`;
 }
+
+// 定义可用的高度选项
+const heightOptions = [
+	{ value: '3xs', label: '超超小' },
+	{ value: '2xs', label: '超小' },
+	{ value: 'xs', label: '小' },
+	{ value: 'sm', label: '较小' },
+	{ value: 'md', label: '中等' },
+	{ value: 'lg', label: '大' },
+	{ value: 'xl', label: '超大' },
+];
+
+// 获取初始高度（优先使用localStorage中的值）
+type HeightType = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+let initialHeight: HeightType;
+if (typeof window !== 'undefined') {
+	const storedHeight = localStorage.getItem('cosy-header-height');
+	initialHeight = (storedHeight as HeightType) || height;
+} else {
+	initialHeight = height;
+}
+
+// 根据高度设置样式
+const headerHeightClasses = {
+	'3xs': 'cosy:h-4',
+	'2xs': 'cosy:h-6',
+	xs: 'cosy:h-8',
+	sm: 'cosy:h-10',
+	md: 'cosy:h-12',
+	lg: 'cosy:h-16',
+	xl: 'cosy:h-20',
+};
+
+const headerHeightClass = headerHeightClasses[initialHeight];
+
+// 设置logo大小
+const logoSizeClasses = {
+	'3xs': 'cosy:w-3 cosy:h-3',
+	'2xs': 'cosy:w-4 cosy:h-4',
+	xs: 'cosy:w-5 cosy:h-5',
+	sm: 'cosy:w-6 cosy:h-6',
+	md: 'cosy:w-8 cosy:h-8',
+	lg: 'cosy:w-10 cosy:h-10',
+	xl: 'cosy:w-12 cosy:h-12',
+};
+
+const logoSizeClass = logoSizeClasses[initialHeight];
+
+// 设置占位空间高度
+const spacerHeightClasses = {
+	'3xs': 'cosy:h-4',
+	'2xs': 'cosy:h-6',
+	xs: 'cosy:h-8',
+	sm: 'cosy:h-10',
+	md: 'cosy:h-12',
+	lg: 'cosy:h-16',
+	xl: 'cosy:h-20',
+};
+
+const spacerHeightClass = spacerHeightClasses[initialHeight];
 ---
 
-<header class:list={[
-	"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 }
-]}>
+<header
+	class:list={[
+		'cosy:navbar cosy:bg-accent/70 cosy:backdrop-blur cosy:border-base-200 cosy:z-50 cosy:w-full cosy:m-0 cosy:p-0 cosy:min-h-1',
+		headerHeightClass,
+		{ 'cosy:fixed cosy:top-0': sticky },
+	]}>
 	<div class="cosy:navbar-start">
-		<Link href={logoHref} class="cosy:btn cosy:btn-ghost">
-			<Image src={logo} alt="logo" class="cosy:w-10 cosy:h-10" />
+		<Link
+			href={logoHref}
+			class:list={[
+				'cosy:btn cosy:btn-ghost',
+				initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
+					? 'cosy:btn-xs cosy:h-auto cosy:min-h-0 cosy:p-1'
+					: initialHeight === 'sm'
+						? 'cosy:btn-sm'
+						: '',
+			]}>
+			<Image src={logo} alt="logo" class={logoSizeClass} />
 		</Link>
 	</div>
 
 	<!-- 导航 -->
 	<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}>
-						{item.label}
-					</Link>
-				</li>
-			))}
+		<ul
+			class:list={[
+				'cosy:px-1 cosy:menu cosy:menu-horizontal',
+				initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
+					? 'cosy:menu-xs'
+					: initialHeight === 'sm'
+						? 'cosy:menu-sm'
+						: '',
+			]}>
+			{
+				navItems.map((item: NavItem) => (
+					<li>
+						<Link
+							href={item.href}
+							class:list={[
+								initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
+									? 'cosy:py-0 cosy:px-2 cosy:min-h-0'
+									: initialHeight === 'sm'
+										? 'cosy:py-1 cosy:min-h-6'
+										: '',
+							]}>
+							{item.label}
+						</Link>
+					</li>
+				))
+			}
 		</ul>
 	</div>
 
 	<div class="cosy:navbar-end">
+		{
+			showHeightSetting && (
+				<div class="cosy:mr-2 cosy:dropdown cosy:dropdown-end">
+					<div
+						tabindex="0"
+						role="button"
+						class:list={[
+							'cosy:btn cosy:btn-ghost',
+							initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
+								? 'cosy:btn-xs cosy:h-auto cosy:min-h-0 cosy:p-1'
+								: initialHeight === 'sm'
+									? 'cosy:btn-sm'
+									: 'cosy:btn-sm',
+						]}
+						id="height-dropdown-btn">
+						<span class="cosy:mr-1">高度</span>
+						<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:z-[1] cosy:bg-base-100 cosy:shadow cosy:p-2 cosy:rounded-box cosy:w-40 cosy:dropdown-content cosy:menu"
+						id="height-dropdown-content">
+						{heightOptions.map((option) => (
+							<li data-height={option.value} class="height-option" id={`height-${option.value}`}>
+								<a class={initialHeight === option.value ? 'cosy:active' : ''}>{option.label}</a>
+							</li>
+						))}
+					</ul>
+				</div>
+			)
+		}
+
 		<!-- 语言切换按钮 -->
 		<div class="cosy:dropdown cosy:dropdown-end">
-			<div tabindex="0" role="button" class="cosy:btn cosy:btn-ghost cosy:btn-sm">
+			<div
+				tabindex="0"
+				role="button"
+				class:list={[
+					'cosy:btn cosy:btn-ghost',
+					initialHeight === 'xs' || initialHeight === '2xs' || initialHeight === '3xs'
+						? 'cosy:btn-xs cosy:h-auto cosy:min-h-0 cosy:p-1'
+						: initialHeight === 'sm'
+							? 'cosy:btn-sm'
+							: 'cosy:btn-sm',
+				]}>
 				<span class="cosy:mr-1">{currentLocale === 'zh-cn' ? '中文' : 'English'}</span>
-				<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
+					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"
+					></path>
 				</svg>
 			</div>
-			<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" : ""}>
-							{lang.name}
-						</a>
-					</li>
-				))}
+			<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' : ''}>
+								{lang.name}
+							</a>
+						</li>
+					))
+				}
 			</ul>
 		</div>
 	</div>
 </header>
 
-{sticky && (
-	<div class="cosy:h-16"></div>
-)}
-
-<script define:vars={{ sticky }}>
-	if (sticky) {
-		const header = document.querySelector('header');
-		window.addEventListener('scroll', () => {
-			if (window.pageYOffset > 0) {
-				header?.classList.add('cosy:shadow-lg');
-			} else {
-				header?.classList.remove('cosy:shadow-lg');
+{sticky && <div class={spacerHeightClass} id="header-spacer" />}
+
+<script define:vars={{ sticky, height, headerHeightClasses, spacerHeightClasses }}>
+	// 等待DOM完全加载
+	document.addEventListener('DOMContentLoaded', () => {
+		// 获取存储的高度设置，如果没有则使用传入的默认高度
+		const storedHeight = localStorage.getItem('cosy-header-height');
+		let currentHeight = storedHeight || height;
+
+		// 更新DOM元素的高度类
+		function updateHeaderHeight(newHeight) {
+			const header = document.querySelector('header');
+			const spacer = document.getElementById('header-spacer');
+
+			if (!header) return;
+
+			// 先获取header当前的所有类名
+			const headerClasses = [...header.classList];
+
+			// 找出并移除当前的高度类
+			Object.values(headerHeightClasses).forEach((cls) => {
+				if (headerClasses.includes(cls)) {
+					header.classList.remove(cls);
+				}
+			});
+
+			// 添加新的高度类
+			const newHeaderClass = headerHeightClasses[newHeight];
+			header.classList.add(newHeaderClass);
+
+			// 更新占位元素高度
+			if (spacer) {
+				const spacerClasses = [...spacer.classList];
+
+				Object.values(spacerHeightClasses).forEach((cls) => {
+					const className = cls.replace('cosy:', '');
+					if (spacerClasses.includes(className)) {
+						spacer.classList.remove(className);
+					}
+				});
+
+				const newSpacerClass = spacerHeightClasses[newHeight].replace('cosy:', '');
+				spacer.classList.add(newSpacerClass);
+			}
+
+			// 更新样式类，需要处理:list中的类
+			// 1. 处理logo按钮
+			const logoBtn = document.querySelector('.cosy\\:navbar-start .cosy\\:btn');
+			if (logoBtn) {
+				// 清理之前的按钮大小类
+				['cosy:btn-xs', 'cosy:btn-sm', 'cosy:h-auto', 'cosy:min-h-0', 'cosy:p-1'].forEach((cls) => {
+					logoBtn.classList.remove(cls.replace('cosy:', ''));
+				});
+
+				// 根据新高度添加适当的类
+				if (newHeight === 'xs' || newHeight === '2xs' || newHeight === '3xs') {
+					['cosy:btn-xs', 'cosy:h-auto', 'cosy:min-h-0', 'cosy:p-1'].forEach((cls) => {
+						logoBtn.classList.add(cls.replace('cosy:', ''));
+					});
+				} else if (newHeight === 'sm') {
+					logoBtn.classList.add('btn-sm');
+				}
+			}
+
+			// 2. 处理导航菜单
+			const navMenu = document.querySelector('.cosy\\:navbar-center .cosy\\:menu');
+			if (navMenu) {
+				navMenu.classList.remove('menu-xs', 'menu-sm');
+
+				if (newHeight === 'xs' || newHeight === '2xs' || newHeight === '3xs') {
+					navMenu.classList.add('menu-xs');
+				} else if (newHeight === 'sm') {
+					navMenu.classList.add('menu-sm');
+				}
 			}
+
+			// 3. 处理菜单项
+			const navLinks = document.querySelectorAll('.cosy\\:navbar-center .cosy\\:menu li a');
+			navLinks.forEach((link) => {
+				['cosy:py-0', 'cosy:px-2', 'cosy:min-h-0', 'cosy:py-1', 'cosy:min-h-6'].forEach((cls) => {
+					link.classList.remove(cls.replace('cosy:', ''));
+				});
+
+				if (newHeight === 'xs' || newHeight === '2xs' || newHeight === '3xs') {
+					['cosy:py-0', 'cosy:px-2', 'cosy:min-h-0'].forEach((cls) => {
+						link.classList.add(cls.replace('cosy:', ''));
+					});
+				} else if (newHeight === 'sm') {
+					['cosy:py-1', 'cosy:min-h-6'].forEach((cls) => {
+						link.classList.add(cls.replace('cosy:', ''));
+					});
+				}
+			});
+
+			// 4. 处理下拉按钮
+			const dropdownBtns = document.querySelectorAll(
+				'.cosy\\:navbar-end .cosy\\:dropdown .cosy\\:btn'
+			);
+			dropdownBtns.forEach((btn) => {
+				['cosy:btn-xs', 'cosy:btn-sm', 'cosy:h-auto', 'cosy:min-h-0', 'cosy:p-1'].forEach((cls) => {
+					btn.classList.remove(cls.replace('cosy:', ''));
+				});
+
+				if (newHeight === 'xs' || newHeight === '2xs' || newHeight === '3xs') {
+					['cosy:btn-xs', 'cosy:h-auto', 'cosy:min-h-0', 'cosy:p-1'].forEach((cls) => {
+						btn.classList.add(cls.replace('cosy:', ''));
+					});
+				} else if (newHeight === 'sm' || newHeight === 'md') {
+					btn.classList.add('btn-sm');
+				}
+			});
+
+			// 标记当前选中的选项
+			document.querySelectorAll('.height-option a').forEach((item) => {
+				item.classList.remove('active');
+			});
+
+			const activeItem = document.querySelector(`#height-${newHeight} a`);
+			if (activeItem) {
+				activeItem.classList.add('active');
+			}
+
+			// 保存设置到本地存储
+			localStorage.setItem('cosy-header-height', newHeight);
+			currentHeight = newHeight;
+		}
+
+		// 如果有存储的高度设置，应用它
+		if (storedHeight) {
+			updateHeaderHeight(storedHeight);
+		}
+
+		// 绑定点击事件到高度选项
+		document.querySelectorAll('.height-option').forEach((item) => {
+			item.addEventListener('click', function () {
+				const newHeight = this.getAttribute('data-height');
+				updateHeaderHeight(newHeight);
+
+				// 关闭下拉菜单
+				document.activeElement.blur();
+			});
 		});
-	}
-</script>
+
+		// 滚动时添加阴影
+		if (sticky) {
+			const header = document.querySelector('header');
+			window.addEventListener('scroll', () => {
+				if (window.pageYOffset > 0) {
+					header?.classList.add('cosy:shadow-lg'.replace('cosy:', ''));
+				} else {
+					header?.classList.remove('cosy:shadow-lg'.replace('cosy:', ''));
+				}
+			});
+		}
+	});
+</script>

package/dist/components/layouts/Sidebar.astro

@@ -90,7 +90,7 @@ const currentSection = sidebarItems.find((section) =>
 
 {/* 桌面端侧边栏 */}
 <aside class:list={[className, debugClass, 'cosy:hidden cosy:lg:block']}>
-	<div class="cosy:top-16 cosy:sticky cosy:h-[calc(100vh-4rem)]">
+	<div class="cosy:top-16 cosy:sticky cosy:pb-48 cosy:h-[calc(100vh-0rem)] cosy:overflow-y-auto">
 		<SidebarNav sidebarItems={sidebarItems} currentPath={currentPath} debug={debug} />
 	</div>
 </aside>

package/dist/components/navigation/LanguageSwitcher.astro

@@ -1,81 +1,111 @@
 ---
+/**
+ * @component LanguageSwitcher
+ *
+ * @description
+ * LanguageSwitcher 组件提供一个语言切换下拉菜单，支持多语言网站的语言切换功能。
+ * 组件会自动处理 URL 路径，确保在切换语言时保留当前页面路径。
+ *
+ * @design
+ * 设计理念：
+ * 1. 简洁直观 - 清晰显示当前语言和可选语言
+ * 2. 无缝集成 - 自动处理 URL 路由，保持用户浏览上下文
+ * 3. 可定制性 - 支持自定义语言列表和当前语言设置
+ * 4. 一致的视觉风格 - 使用与整体设计系统一致的下拉菜单样式
+ *
+ * @usage
+ * 基本用法：
+ * ```astro
+ * <LanguageSwitcher />
+ * ```
+ *
+ * 自定义语言列表：
+ * ```astro
+ * <LanguageSwitcher
+ *   languages={[
+ *     { code: 'zh-cn', name: '简体中文' },
+ *     { code: 'en', name: 'English' },
+ *     { code: 'ja', name: '日本語' }
+ *   ]}
+ *   currentLocale="en"
+ * />
+ * ```
+ */
+
 import Button from '../base/Button.astro';
 import Link from '../base/Link.astro';
+import '../../app.css';
 
 interface Language {
-  code: string;
-  name: string;
+	code: string;
+	name: string;
 }
 
 interface Props {
-  /**
-   * 自定义类名
-   */
-  class?: string;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
 
-  /**
-   * 语言列表
-   * @default [{ code: 'zh-cn', name: '简体中文' }, { code: 'en', name: 'English' }]
-   */
-  languages?: Language[];
+	/**
+	 * 语言列表
+	 * @default [{ code: 'zh-cn', name: '简体中文' }, { code: 'en', name: 'English' }]
+	 */
+	languages?: Language[];
 
-  /**
-   * 当前语言
-   * @default 'zh-cn'
-   */
-  currentLocale?: string;
+	/**
+	 * 当前语言
+	 * @default 'zh-cn'
+	 */
+	currentLocale?: string;
 }
 
 const {
-  class: className,
-  languages = [
-    { code: 'zh-cn', name: '简体中文' },
-    { code: 'en', name: 'English' },
-  ],
-  currentLocale = 'zh-cn',
+	class: className,
+	languages = [
+		{ code: 'zh-cn', name: '简体中文' },
+		{ code: 'en', name: 'English' },
+	],
+	currentLocale = 'zh-cn',
 } = Astro.props;
 
 const currentLanguageName =
-  languages.find((lang: Language) => lang.code === currentLocale)?.name || '简体中文';
+	languages.find((lang: Language) => lang.code === currentLocale)?.name || '简体中文';
 
 // 为每个语言生成对应的URL
 function generateLanguageUrl(langCode: string): string {
-  const currentPath = Astro.url.pathname;
-  const pathParts = currentPath.split('/').filter(Boolean);
-  const firstPathPart = pathParts[0];
-  const supportedLanguages = languages.map((lang: Language) => lang.code);
-  const isFirstPartLang = supportedLanguages.includes(firstPathPart);
+	const currentPath = Astro.url.pathname;
+	const pathParts = currentPath.split('/').filter(Boolean);
+	const firstPathPart = pathParts[0];
+	const supportedLanguages = languages.map((lang: Language) => lang.code);
+	const isFirstPartLang = supportedLanguages.includes(firstPathPart);
 
-  if (isFirstPartLang) {
-    pathParts[0] = langCode;
-    return '/' + pathParts.join('/');
-  } else {
-    return '/' + langCode + (currentPath === '/' ? '' : currentPath);
-  }
+	if (isFirstPartLang) {
+		pathParts[0] = langCode;
+		return '/' + pathParts.join('/');
+	} else {
+		return '/' + langCode + (currentPath === '/' ? '' : currentPath);
+	}
 }
 ---
 
-<div class:list={["dropdown-end dropdown", className]}>
-  <Button variant="ghost" size="sm" class="p-1">
-    {currentLanguageName}
-  </Button>
-  <ul
-    tabindex={0}
-    class="dropdown-content menu w-40 rounded-box bg-slate-900 p-2 shadow-lg dark:bg-slate-800"
-  >
-    {
-      languages.map((lang: Language) => (
-        <li>
-          <Link 
-            href={generateLanguageUrl(lang.code)}
-            class:list={[
-              { active: lang.code === currentLocale }
-            ]}
-          >
-            {lang.name}
-          </Link>
-        </li>
-      ))
-    }
-  </ul>
-</div> 
+<div class:list={['cosy:dropdown cosy:dropdown-end', className]}>
+	<Button variant="ghost" size="sm" class="cosy:p-1">
+		{currentLanguageName}
+	</Button>
+	<ul
+		tabindex={0}
+		class="cosy:bg-slate-900 cosy:dark:bg-slate-800 cosy:shadow-lg cosy:p-2 cosy:rounded-box cosy:w-40 cosy:dropdown-content cosy:menu">
+		{
+			languages.map((lang: Language) => (
+				<li>
+					<Link
+						href={generateLanguageUrl(lang.code)}
+						class:list={[{ 'cosy:active': lang.code === currentLocale }]}>
+						{lang.name}
+					</Link>
+				</li>
+			))
+		}
+	</ul>
+</div>