@coffic/cosy-ui 0.4.9 → 0.5.2

package/dist/components/layouts/Header.astro

@@ -30,12 +30,7 @@
  * ```astro
  * <Header
  *   logo={import("../assets/logo.png")}
- *   languages={[
- *     { code: "zh-cn", name: "简体中文" },
- *     { code: "en", name: "English" },
- *     { code: "ja", name: "日本語" }
- *   ]}
- *   currentLocale="zh-cn"
+ *   languages={["zh-cn", "en", "ja"]}
  * />
  * ```
  *
@@ -57,54 +52,20 @@
 import '../../app.css';
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
-import type { HeaderProps } from '../../index';
+import { LanguageSwitcher, LinkUtil, type HeaderProps, type NavItem } from '../../index';
 import Logo from '../../assets/logo-rounded.png';
 
-interface Props extends HeaderProps {}
+export interface Props extends HeaderProps {}
 
 const {
-	basePath = '',
-	currentLocale = 'zh-cn',
 	height = 'md',
-	languages = [
-		{ code: 'zh-cn', name: '中文' },
-		{ code: 'en', name: 'English' },
-	],
+	languages = ['zh-cn', 'en'],
 	logo = Logo,
 	logoHref = '/',
 	navItems = [],
 	sticky = true,
 } = Astro.props;
 
-type NavItem = { href: string; label: string; match: (path: string) => boolean };
-
-// 获取当前路径
-const currentPath = Astro.url.pathname;
-
-// 处理基础路径
-const basePathPattern = basePath ? new RegExp(`^${basePath}`) : null;
-const pathWithoutBase = basePathPattern ? currentPath.replace(basePathPattern, '') : currentPath;
-
-// 提取路径部分，排除语言代码
-const pathWithoutLocale = pathWithoutBase.replace(/^\/(zh-cn|en)/, '');
-
-// 生成语言切换链接
-function getLanguageUrl(langCode: string) {
-	// 如果有基础路径，需要加上
-	return `${basePath}/${langCode}${pathWithoutLocale}`;
-}
-
-// 获取初始高度（优先使用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',
@@ -116,7 +77,16 @@ const headerHeightClasses = {
 	xl: 'cosy:h-20',
 };
 
-const headerHeightClass = headerHeightClasses[initialHeight];
+const headerHeightClass = headerHeightClasses[height];
+const linkHeightClasses = {
+	'3xs': 'cosy:py-0',
+	'2xs': 'cosy:py-0',
+	xs: 'cosy:py-0',
+	sm: 'cosy:py-1',
+	md: 'cosy:py-1',
+	lg: 'cosy:py-2',
+	xl: 'cosy:py-3',
+};
 
 // 设置logo大小
 const logoSizeClasses = {
@@ -129,7 +99,13 @@ const logoSizeClasses = {
 	xl: 'cosy:w-12 cosy:h-12',
 };
 
-const logoSizeClass = logoSizeClasses[initialHeight];
+const logoSizeClass = logoSizeClasses[height];
+const linkHeightClass = linkHeightClasses[height];
+const currentPath = Astro.url.pathname;
+const activeLink = LinkUtil.getActiveLink(
+	currentPath,
+	navItems.map((item: NavItem) => item.href)
+);
 ---
 
 <header
@@ -140,42 +116,30 @@ const logoSizeClass = logoSizeClasses[initialHeight];
 	]}>
 	<div class="cosy:navbar-start">
 		<Link
+			animation="none"
 			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 transition="none" src={logo} alt="logo" class={logoSizeClass} />
+			class:list={['cosy:btn cosy:btn-ghost', linkHeightClass]}>
+			<Image
+				showPlaceholder={false}
+				transition="none"
+				lazy={false}
+				src={logo}
+				alt="logo"
+				class={logoSizeClass}
+			/>
 		</Link>
 	</div>
 
 	<!-- 导航 -->
 	<div class="cosy:hidden cosy:lg:flex cosy:navbar-center">
-		<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'
-						: '',
-			]}>
+		<ul class:list={['cosy:px-1 cosy:menu cosy:menu-horizontal', linkHeightClass]}>
 			{
 				navItems.map((item: NavItem) => (
 					<li>
 						<Link
+							variant={activeLink == item.href ? 'primary' : 'default'}
 							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'
-										: '',
-							]}>
+							class:list={[linkHeightClass]}>
 							{item.label}
 						</Link>
 					</li>
@@ -185,45 +149,6 @@ const logoSizeClass = logoSizeClasses[initialHeight];
 	</div>
 
 	<div class="cosy:navbar-end">
-		<!-- 语言切换按钮 -->
-		<div class="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',
-				]}>
-				<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"
-					></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>
-		</div>
+		<LanguageSwitcher languages={languages} />
 	</div>
 </header>

package/dist/components/layouts/Sidebar.astro

@@ -73,7 +73,7 @@ function getVerticalMarginBottomClasses(marginBottom: string) {
 
 // 获取当前活动的一级导航项
 const currentSection = sidebarItems.find((section) =>
-	section.items.some((item) => isPathMatch(currentPath, item.href))
+	section.items?.some((item) => isPathMatch(currentPath, item.href))
 );
 ---
 
@@ -90,7 +90,7 @@ const currentSection = sidebarItems.find((section) =>
 			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>
+		<span class="cosy:font-medium cosy:text-sm">{currentSection?.text || '导航'}</span>
 	</div>
 </div>;
 

package/dist/components/layouts/SidebarNav.astro

@@ -7,13 +7,13 @@
 
 import { isPathMatch } from '../../utils/path';
 import '../../app.css';
-import type { SidebarSection, SidebarItem } from '../../types/sidebar';
+import type { SidebarItem } from '../../types/sidebar';
 
 interface Props {
 	/**
 	 * 侧边栏项目
 	 */
-	sidebarItems: SidebarSection[];
+	sidebarItems: SidebarItem[];
 
 	/**
 	 * 当前路径
@@ -39,13 +39,13 @@ const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 
 <nav class:list={['cosy:p-4', debugClass, className]}>
 	{
-		sidebarItems.map((section: SidebarSection) => (
+		sidebarItems.map((section: SidebarItem) => (
 			<div class:list={['cosy:mb-6', debugClass]}>
 				<h3 class:list={['cosy:font-bold cosy:mb-2 cosy:text-base-content/70', debugClass]}>
-					{section.title}
+					{section.text}
 				</h3>
 				<ul class:list={['cosy:menu cosy:bg-base-200 cosy:rounded-box cosy:w-56', debugClass]}>
-					{section.items.map((item: SidebarItem) => {
+					{section.items?.map((item: SidebarItem) => {
 						const isActive = isPathMatch(currentPath, item.href);
 						return (
 							<li class:list={[debugClass]}>

package/dist/components/navigation/LanguageSwitcher.astro

@@ -22,88 +22,42 @@
  * 自定义语言列表：
  * ```astro
  * <LanguageSwitcher
- *   languages={[
- *     { code: 'zh-cn', name: '简体中文' },
- *     { code: 'en', name: 'English' },
- *     { code: 'ja', name: '日本語' }
- *   ]}
- *   currentLocale="en"
+ *   languages={['zh-cn', 'en']}
  * />
  * ```
  */
 
-import Button from '../base/Button.astro';
-import Link from '../base/Link.astro';
+import ChevronDownIcon from '../icons/ChevronDownIcon.astro';
 import '../../app.css';
-
-interface Language {
-	code: string;
-	name: string;
-}
+import { LanguageUtil } from '../../utils/language';
 
 interface Props {
-	/**
-	 * 自定义类名
-	 */
-	class?: string;
-
-	/**
-	 * 语言列表
-	 * @default [{ code: 'zh-cn', name: '简体中文' }, { code: 'en', name: 'English' }]
-	 */
-	languages?: Language[];
-
-	/**
-	 * 当前语言
-	 * @default 'zh-cn'
-	 */
-	currentLocale?: string;
+	languages: string[];
 }
 
-const {
-	class: className,
-	languages = [
-		{ code: 'zh-cn', name: '简体中文' },
-		{ code: 'en', name: 'English' },
-	],
-	currentLocale = 'zh-cn',
-} = Astro.props;
+const { languages = ['zh-cn', 'en'] } = Astro.props;
 
-const currentLanguageName =
-	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);
-
-	if (isFirstPartLang) {
-		pathParts[0] = langCode;
-		return '/' + pathParts.join('/');
-	} else {
-		return '/' + langCode + (currentPath === '/' ? '' : currentPath);
-	}
-}
+const currentLocale = Astro.currentLocale;
+const currentLanguageName = LanguageUtil.getLanguageName(currentLocale);
 ---
 
-<div class:list={['cosy:dropdown cosy:dropdown-end', className]}>
-	<Button variant="ghost" size="sm" class="cosy:p-1">
-		{currentLanguageName}
-	</Button>
+<!-- 语言切换按钮 -->
+<div class="cosy:dropdown cosy:dropdown-end">
+	<div tabindex="0" role="button" class:list={['cosy:btn cosy:btn-ghost']}>
+		<span class="cosy:mr-1">{currentLanguageName}</span>
+		<ChevronDownIcon size="16px" class="cosy:w-4 cosy:h-4" />
+	</div>
 	<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">
+		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: Language) => (
-				<li>
-					<Link
-						href={generateLanguageUrl(lang.code)}
-						class:list={[{ 'cosy:active': lang.code === currentLocale }]}>
-						{lang.name}
-					</Link>
+			languages.map((lang) => (
+				<li class={currentLocale === lang ? 'cosy:disabled' : ''}>
+					<a
+						href={LanguageUtil.getRelativeLink(lang, Astro)}
+						class={currentLocale === lang ? 'cosy:active' : ''}>
+						{LanguageUtil.getLanguageName(lang)}
+					</a>
 				</li>
 			))
 		}

package/dist/components/navigation/TableOfContents.astro

@@ -54,8 +54,8 @@
 
 // 导入样式
 import '../../app.css';
-import { getCurrentLanguage } from '../../utils/language';
 import { createTextGetter } from '../../utils/i18n';
+import { LanguageUtil } from '../../utils/language';
 
 interface Props {
 	/**
@@ -111,7 +111,7 @@ const {
 } = Astro.props;
 
 // 获取当前语言
-const langInfo = getCurrentLanguage(userLang);
+const langInfo = LanguageUtil.getCurrentLanguage(userLang);
 // 创建文本获取函数
 const t = createTextGetter(langInfo, 'tableOfContents');
 // 获取标题文本，如果用户提供了标题则使用用户提供的标题

package/dist/entities/SidebarItem.ts

@@ -1,24 +1,21 @@
-/**
- * 侧边栏项目接口
- */
-export interface SidebarItemProps {
-    label: string;
-    link?: string;
-    items?: SidebarItem[];
-}
+import { type SidebarItem } from '../types/sidebar';
 
 /**
  * 侧边栏项目类
  * 用于构建网站的侧边栏导航
  */
-export class SidebarItem {
-    label: string;
-    link: string;
+export class SidebarItemEntity implements SidebarItem {
+    text: string;
+    href: string;
     items: SidebarItem[];
 
-    constructor(props: SidebarItemProps) {
-        this.label = props.label;
-        this.link = props.link || '';
+    constructor(props: {
+        text: string;
+        link?: string;
+        items?: SidebarItem[];
+    }) {
+        this.text = props.text;
+        this.href = props.link || '';
         this.items = props.items || [];
     }
 
@@ -26,7 +23,7 @@ export class SidebarItem {
      * 添加子项目
      * @param item 要添加的子项目
      */
-    addItem(item: SidebarItem): void {
+    addItem(item: SidebarItemEntity): void {
         this.items.push(item);
     }
 
@@ -34,8 +31,8 @@ export class SidebarItem {
      * 获取所有子项目
      * @returns 子项目数组
      */
-    getItems(): SidebarItem[] {
-        return this.items;
+    getItems(): SidebarItemEntity[] {
+        return this.items.map(item => new SidebarItemEntity(item));
     }
 
     /**
@@ -43,7 +40,7 @@ export class SidebarItem {
      * @returns 项目标签
      */
     getLabel(): string {
-        return this.label;
+        return this.text;
     }
 
     /**
@@ -51,14 +48,14 @@ export class SidebarItem {
      * @returns 项目链接
      */
     getLink(): string {
-        return this.link;
+        return this.href;
     }
 
     /**
      * 获取包括自身在内的所有项目
      * @returns 包括自身在内的所有项目
      */
-    getItemsIncludingSelf(): SidebarItem[] {
+    getItemsIncludingSelf(): SidebarItemEntity[] {
         return [this, ...this.getItems()];
     }
 
@@ -87,10 +84,10 @@ export interface SidebarProvider {
     /**
      * 转换为侧边栏项目
      */
-    toSidebarItem(): Promise<SidebarItem>;
+    toSidebarItem(): Promise<SidebarItemEntity>;
 
     /**
      * 获取顶级侧边栏项目
      */
-    getTopSidebarItem?(): Promise<SidebarItem>;
-} 
+    getTopSidebarItem?(): Promise<SidebarItemEntity>;
+} 

package/dist/index.ts

@@ -42,6 +42,9 @@ export { default as Article } from './components/typography/Article.astro';
 export { default as Text } from './components/typography/Text.astro';
 export { default as Heading } from './components/typography/Heading.astro';
 
+// Errors Page 
+export { default as ErrorPage404 } from './components/errors/404.astro';
+
 // Icons
 export { default as SocialIcon } from './components/icons/SocialIcon.astro';
 export { default as TwitterIcon } from './components/icons/TwitterIcon.astro';

package/dist/models/BaseDoc.ts

@@ -1,5 +1,5 @@
 import { render, type RenderResult, type CollectionEntry, type DataEntryMap } from "astro:content";
-import { SidebarItem, type SidebarProvider } from "../entities/SidebarItem";
+import { SidebarItemEntity, type SidebarProvider } from "../entities/SidebarItem";
 import { logger } from "../utils/logger";
 
 /**
@@ -72,9 +72,9 @@ export abstract class BaseDoc<Collection extends keyof DataEntryMap, T extends C
      * 转换为侧边栏项目
      * 基本实现，只包含当前文档
      */
-    async toSidebarItem(): Promise<SidebarItem> {
-        return new SidebarItem({
-            label: this.getTitle(),
+    async toSidebarItem(): Promise<SidebarItemEntity> {
+        return new SidebarItemEntity({
+            text: this.getTitle(),
             link: this.getLink(),
         });
     }
@@ -125,7 +125,7 @@ export abstract class HierarchicalDoc<Collection extends keyof DataEntryMap, T e
      * 转换为侧边栏项目
      * 如果文档有子文档，会包含子文档的侧边栏项目
      */
-    override async toSidebarItem(): Promise<SidebarItem> {
+    override async toSidebarItem(): Promise<SidebarItemEntity> {
         const debug = false;
 
         const children = await this.getChildren();
@@ -137,8 +137,8 @@ export abstract class HierarchicalDoc<Collection extends keyof DataEntryMap, T e
             console.log(childItems);
         }
 
-        return new SidebarItem({
-            label: this.getTitle(),
+        return new SidebarItemEntity({
+            text: this.getTitle(),
             items: childItems,
             link: this.getLink(),
         });
@@ -149,14 +149,14 @@ export abstract class HierarchicalDoc<Collection extends keyof DataEntryMap, T e
      * 如果有顶级文档，返回顶级文档的侧边栏项目
      * 否则返回当前文档的侧边栏项目
      */
-    async getTopSidebarItem(): Promise<SidebarItem> {
+    async getTopSidebarItem(): Promise<SidebarItemEntity> {
         const topDoc = await this.getTopDoc();
         if (topDoc) {
             return await topDoc.toSidebarItem();
         }
 
-        return new SidebarItem({
-            label: this.getTitle(),
+        return new SidebarItemEntity({
+            text: this.getTitle(),
             items: [],
             link: this.getLink(),
         });

package/dist/types/header.ts

@@ -25,7 +25,7 @@ export interface HeaderProps {
     /**
      * 语言选项列表
      */
-    languages?: Array<{ code: string; name: string }>;
+    languages?: string[];
 
     /**
      * Logo图片元数据
@@ -41,11 +41,7 @@ export interface HeaderProps {
     /**
      * 导航菜单项
      */
-    navItems?: Array<{
-        href: string;
-        label: string;
-        match: (path: string) => boolean;
-    }>;
+    navItems?: NavItem[];
 
     /**
      * 是否显示侧边栏切换按钮
@@ -68,3 +64,5 @@ export interface HeaderProps {
      */
     sticky?: boolean;
 }
+
+export type NavItem = { href: string; label: string; };

package/dist/types/sidebar.ts

@@ -1,19 +1,17 @@
+/**
+ * 侧边栏项目
+ */
 export interface SidebarItem {
     href: string;
     text: string;
     items?: SidebarItem[];
 }
 
-export interface SidebarSection {
-    title: string;
-    items: SidebarItem[];
-}
-
 export interface SidebarProps {
     /**
      * 侧边栏项目
      */
-    sidebarItems: SidebarSection[];
+    sidebarItems: SidebarItem[];
 
     /**
      * 桌面端类名