@coffic/cosy-ui 0.3.69 → 0.4.3

package/dist/components/layouts/Header.astro

@@ -54,82 +54,25 @@
  *   height="lg"
  * />
  */
+import '../../app.css';
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
-import '../../app.css';
+import type { HeaderProps } from '@/types/header';
 
-// 自定义图片元数据接口
-interface ImageMetadata {
-	src: string;
-	width: number;
-	height: number;
-	format: string;
-}
-
-interface Props {
-	logo: ImageMetadata;
-	/**
-	 * Logo 链接地址
-	 * @default "/"
-	 */
-	logoHref?: string;
-	languages?: Array<{ code: string; name: string }>;
-	currentLocale?: string;
-	navItems?: Array<{
-		href: string;
-		label: string;
-		match: (path: string) => boolean;
-	}>;
-	socialLinks?: Array<{
-		name: string;
-		url: string;
-		icon: any;
-	}>;
-	/**
-	 * 是否固定在顶部
-	 * @default true
-	 */
-	sticky?: boolean;
-	/**
-	 * 基础路径，用于处理网站部署在二级目录的情况
-	 * @default ""
-	 */
-	basePath?: string;
-	/**
-	 * 是否显示侧边栏切换按钮
-	 * @default false
-	 */
-	showSidebarToggle?: boolean;
-	/**
-	 * 侧边栏是否默认展开
-	 * @default false
-	 */
-	defaultSidebarOpen?: boolean;
-	/**
-	 * 导航栏高度
-	 * @default "md"
-	 */
-	height?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	/**
-	 * 是否显示高度设置菜单
-	 * @default true
-	 */
-	showHeightSetting?: boolean;
-}
+interface Props extends HeaderProps {}
 
 const {
-	logo,
-	logoHref = '/',
-	navItems = [],
-	sticky = true,
+	basePath = '',
+	currentLocale = 'zh-cn',
+	height = 'md',
 	languages = [
 		{ code: 'zh-cn', name: '中文' },
 		{ code: 'en', name: 'English' },
 	],
-	currentLocale = 'zh-cn',
-	basePath = '',
-	height = 'md',
-	showHeightSetting = true,
+	logo,
+	logoHref = '/',
+	navItems = [],
+	sticky = true,
 } = Astro.props;
 
 type NavItem = { href: string; label: string; match: (path: string) => boolean };
@@ -150,17 +93,6 @@ 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';
 
@@ -197,19 +129,6 @@ const logoSizeClasses = {
 };
 
 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
@@ -265,50 +184,6 @@ const spacerHeightClass = spacerHeightClasses[initialHeight];
 	</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
@@ -351,160 +226,3 @@ const spacerHeightClass = spacerHeightClasses[initialHeight];
 		</div>
 	</div>
 </header>
-
-{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();
-			});
-		});
-
-		// 滚动时添加阴影
-		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

@@ -17,44 +17,60 @@
  * ];
  * ---
  *
- * <Sidebar sidebarItems={sidebarItems} currentPath="/docs/getting-started" />
+ * <Sidebar sidebarItems={sidebarItems} />
  * ```
  */
 
+import '../../app.css';
 import { isPathMatch } from '../../utils/path';
 import Modal from '../display/Modal.astro';
 import SidebarNav from './SidebarNav.astro';
 import MenuIcon from '../icons/MenuIcon.astro';
-import '../../app.css';
 
-import type { SidebarSection } from '../../types/layout';
+import type { SidebarProps } from '../../types/sidebar';
 
-export interface Props {
-	/**
-	 * 侧边栏项目
-	 */
-	sidebarItems: SidebarSection[];
+export interface Props extends SidebarProps{}
 
-	/**
-	 * 当前路径
-	 */
-	currentPath: string;
+const {
+	sidebarItems,
+	class: className,
+	debug = false,
+	marginTop = 'md',
+	marginBottom = 'md',
+} = Astro.props;
 
-	/**
-	 * 桌面端类名
-	 */
-	class?: string;
+// 自动获取当前路径
+const currentPath = Astro.url.pathname;
 
-	/**
-	 * 是否开启调试模式，显示边框
-	 * @default false
-	 */
-	debug?: boolean;
-}
+const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
 
-const { sidebarItems, currentPath, class: className, debug = false } = Astro.props;
+function getVerticalMarginTopClasses(marginTop: string) {
+	if (marginTop === 'none') return 'cosy:mt-0';
+	if (marginTop === 'xs') return 'cosy:mt-1';
+	if (marginTop === 'sm') return 'cosy:mt-2';
+	if (marginTop === 'md') return 'cosy:mt-4';
+	if (marginTop === 'lg') return 'cosy:mt-6';
+	if (marginTop === 'xl') return 'cosy:mt-8';
+	if (marginTop === '2xl') return 'cosy:mt-10';
+	if (marginTop === '3xl') return 'cosy:mt-12';
+	if (marginTop === '4xl') return 'cosy:mt-16';
+	if (marginTop === '5xl') return 'cosy:mt-20';
+	return '';
+}
 
-const debugClass = debug ? 'cosy:border cosy:border-red-500' : '';
+function getVerticalMarginBottomClasses(marginBottom: string) {
+	if (marginBottom === 'none') return 'cosy:mb-0';
+	if (marginBottom === 'xs') return 'cosy:mb-1';
+	if (marginBottom === 'sm') return 'cosy:mb-2';
+	if (marginBottom === 'md') return 'cosy:mb-4';
+	if (marginBottom === 'lg') return 'cosy:mb-6';
+	if (marginBottom === 'xl') return 'cosy:mb-8';
+	if (marginBottom === '2xl') return 'cosy:mb-10';
+	if (marginBottom === '3xl') return 'cosy:mb-12';
+	if (marginBottom === '4xl') return 'cosy:mb-16';
+	if (marginBottom === '5xl') return 'cosy:mb-20';
+	return '';
+}
 
 // 获取当前活动的一级导航项
 const currentSection = sidebarItems.find((section) =>
@@ -75,22 +91,30 @@ 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?.title || '导航'}</span>
 	</div>
-</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>
+</Modal>;
 
 {/* 桌面端侧边栏 */}
-<aside class:list={[className, debugClass, 'cosy:hidden cosy:lg:block']}>
+<aside
+	data-sidebar
+	data-margin-top={marginTop}
+	data-margin-bottom={marginBottom}
+	class:list={[
+		className,
+		debugClass,
+		'cosy:hidden cosy:lg:block',
+		getVerticalMarginTopClasses(marginTop),
+		getVerticalMarginBottomClasses(marginBottom),
+	]}>
 	<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>
+</aside>; ---

package/dist/components/layouts/SidebarNav.astro

@@ -7,17 +7,7 @@
 
 import { isPathMatch } from '../../utils/path';
 import '../../app.css';
-
-export interface SidebarItem {
-	href: string;
-	text: string;
-	items?: SidebarItem[];
-}
-
-export interface SidebarSection {
-	title: string;
-	items: SidebarItem[];
-}
+import type { SidebarSection, SidebarItem } from '../../types/sidebar';
 
 interface Props {
 	/**

package/dist/components/typography/Article.astro

@@ -37,7 +37,7 @@
  *   <p>这是一段文章内容...</p>
  * </Article>
  * ```
- * 
+ *
  * 设置文章宽度：
  * ```astro
  * <Article width="narrow">
@@ -105,42 +105,18 @@
 
 // 导入样式
 import '../../app.css';
+import type { ArticleProps } from '@/types/article';
 
-export interface Props {
-	/**
-	 * 文章的类名
-	 */
-	class?: string;
-	
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-	
-	/**
-	 * 内联样式
-	 */
-	style?: string;
-	
-	/**
-	 * 文章宽度
-	 * @default "medium"
-	 */
-	width?: "narrow" | "medium" | "wide" | "full";
-}
+export interface Props extends ArticleProps {}
 
-const { 
-	class: className = '',
-	width = "medium",
-	style = ""
-} = Astro.props;
+const { class: className = '', width = 'medium', style = '' } = Astro.props;
 
 // 根据宽度设置对应的 Tailwind 类名
 const widthClasses = {
 	narrow: 'cosy:max-w-2xl',
 	medium: 'cosy:max-w-4xl',
 	wide: 'cosy:max-w-6xl',
-	full: 'cosy:w-full'
+	full: 'cosy:w-full',
 }[width];
 
 // 基础样式类
@@ -150,8 +126,10 @@ const baseClasses = [
 	'cosy:w-full',
 	'cosy:mx-auto',
 	'cosy:dark:prose-invert', // 暗黑模式支持,
+	'cosy:m-0',
+	'cosy:p-0',
 	widthClasses,
-	className
+	className,
 ];
 ---
 

package/dist/index.ts

@@ -28,7 +28,7 @@ export { default as Blog } from './components/data-display/Blog.astro';
 // Layouts
 export { default as Footer } from './components/layouts/Footer.astro';
 export { default as Header } from './components/layouts/Header.astro';
-export { default as DocumentationLayout } from './components/layouts/DocumentationLayout.astro';
+export { default as AppLayout } from './components/layouts/AppLayout.astro';
 export { default as DefaultLayout } from './components/layouts/DefaultLayout.astro';
 export { default as Stack } from './components/layouts/Stack.astro';
 export { default as Grid } from './components/layouts/Grid.astro';
@@ -78,5 +78,5 @@ export * from './utils/url';
 export * from './utils/language';
 
 // Types
-export type { SidebarSection } from './types/layout';
+export type { SidebarSection } from './types/sidebar';
 export type { ImageProvider, ImageOptions } from './utils/image';

package/dist/types/article.ts

@@ -0,0 +1,22 @@
+export interface ArticleProps {
+    /**
+     * 文章的类名
+     */
+    class?: string;
+
+    /**
+     * 类名列表
+     */
+    'class:list'?: any;
+
+    /**
+     * 内联样式
+     */
+    style?: string;
+
+    /**
+     * 文章宽度
+     * @default "medium"
+     */
+    width?: 'narrow' | 'medium' | 'wide' | 'full';
+}