@coffic/cosy-ui 0.3.69 → 0.4.5

package/dist/components/containers/Main.astro

@@ -47,58 +47,12 @@
  * </Main>
  * ```
  */
-
-import Container from './Container.astro';
-
-// 导入样式
 import '../../app.css';
+import type { MainContentProps } from '../../index';
+import Article from '../typography/Article.astro';
+import TableOfContents from '../navigation/TableOfContents.astro';
 
-export interface Props {
-	/**
-	 * 容器大小
-	 * @default "md"
-	 */
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-
-	/**
-	 * 水平内边距（通过 Container 组件的 padding 属性设置）
-	 * @default "md"
-	 */
-	padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-
-	/**
-	 * 垂直内边距
-	 * @default "md"
-	 */
-	verticalPadding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
-
-	/**
-	 * 是否居中显示内容
-	 * @default true
-	 */
-	centered?: boolean;
-
-	/**
-	 * 背景颜色
-	 * @default undefined
-	 */
-	backgroundColor?: 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | string;
-
-	/**
-	 * HTML id 属性
-	 */
-	id?: string;
-
-	/**
-	 * 类名
-	 */
-	class?: string;
-
-	/**
-	 * 类名列表
-	 */
-	'class:list'?: any;
-}
+export interface Props extends MainContentProps {}
 
 const {
 	size = 'md',
@@ -106,19 +60,37 @@ const {
 	verticalPadding = 'md',
 	centered = true,
 	backgroundColor,
+	layout = 'row',
+	isArticle = false,
 	id,
+	showTableOfContents = false,
 	class: className,
 	'class:list': classList,
+	currentLocale,
 	...rest
 } = Astro.props;
 
+// 新增获取布局类的函数
+function getLayoutClasses(layout: string) {
+	if (layout === 'row') return 'cosy:flex cosy:flex-row';
+	if (layout === 'column') return 'cosy:flex cosy:flex-col';
+	return 'cosy:flex cosy:flex-col'; // 默认列布局
+}
+
+const layoutClass = getLayoutClasses(layout as string);
+
 // 获取垂直内边距的Tailwind类
 function getVerticalPaddingClasses(padding: string) {
 	if (padding === 'none') return 'cosy:py-0';
+	if (padding === 'xs') return 'cosy:py-1';
 	if (padding === 'sm') return 'cosy:py-2';
 	if (padding === 'md') return 'cosy:py-4';
 	if (padding === 'lg') return 'cosy:py-6';
 	if (padding === 'xl') return 'cosy:py-8';
+	if (padding === '2xl') return 'cosy:py-10';
+	if (padding === '3xl') return 'cosy:py-12';
+	if (padding === '4xl') return 'cosy:py-16';
+	if (padding === '5xl') return 'cosy:py-20';
 	return ''; // 对于自定义padding，使用内联样式
 }
 
@@ -153,10 +125,25 @@ const inlineStyle = customStyle.length > 0 ? customStyle.join(' ') : undefined;
 
 <main
 	id={id}
-	class:list={['cosy:w-full', verticalPaddingClass, bgColorClass, className, classList]}
+	class:list={[
+		'cosy:w-full',
+		layoutClass,
+		verticalPaddingClass,
+		bgColorClass,
+		className,
+		classList,
+	]}
 	style={inlineStyle}
 	{...rest}>
-	<Container size={size} padding={padding} centered={centered}>
-		<slot />
-	</Container>
+	{
+		isArticle ? (
+			<Article>
+				<slot />
+			</Article>
+		) : (
+			<slot />
+		)
+	}
+
+	{showTableOfContents && <TableOfContents lang={currentLocale} />}
 </main>

package/dist/components/data-display/Blog.astro

@@ -39,6 +39,7 @@
  * ```
  */
 
+import '../../app.css';
 import { UserIcon, CalendarIcon } from '../../index';
 
 interface Props {

package/dist/components/data-display/ProductCard.astro

@@ -69,8 +69,6 @@
 import Link from '../base/Link.astro';
 import Image from '../base/Image.astro';
 import SocialIcon from '../icons/SocialIcon.astro';
-
-// 导入样式
 import '../../app.css';
 
 // 自定义图片元数据接口，替代 astro 的 ImageMetadata

package/dist/components/data-display/Products.astro

@@ -64,8 +64,6 @@
 
 import ProductCard from './ProductCard.astro';
 import '../../app.css';
-
-// 导入ProductCard的类型定义
 import type { Props as ProductCardProps } from './ProductCard.astro';
 
 // 定义产品项类型

package/dist/components/data-display/TeamMember.astro

@@ -43,8 +43,6 @@
 import Link from '../base/Link.astro';
 import SocialIcon from '../icons/SocialIcon.astro';
 import Image from '../base/Image.astro';
-
-// 导入样式
 import '../../app.css';
 
 interface SocialLink {

package/dist/components/data-display/TeamMembers.astro

@@ -30,8 +30,6 @@
  */
 
 import TeamMember from './TeamMember.astro';
-
-// 导入样式
 import '../../app.css';
 
 // 自定义图片元数据接口

package/dist/components/display/Banner.astro

@@ -40,7 +40,6 @@
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
  */
 
-// 导入样式
 import '../../app.css';
 
 interface Props {

package/dist/components/display/Card.astro

@@ -68,7 +68,6 @@
  * - 动画遵循 prefers-reduced-motion 媒体查询，尊重用户的动画偏好设置
  */
 
-// 导入样式
 import '../../app.css';
 
 interface Props {

package/dist/components/display/CodeBlock.astro

@@ -47,7 +47,6 @@
  * - 代码使用等宽字体，确保对齐和可读性
  */
 
-// 导入样式
 import '../../app.css';
 
 interface Props {

package/dist/components/display/CodeExample.astro

@@ -27,7 +27,6 @@
  * @slot default - 组件的实际渲染内容
  */
 
-// 导入图标
 import { ClipboardIcon, CheckIcon } from '../../index';
 import '../../app.css';
 

package/dist/components/display/Modal.astro

@@ -1,18 +1,18 @@
 ---
 /**
  * @component Modal
- * 
+ *
  * @description
  * Modal 组件是一个模态对话框，用于在不离开当前页面的情况下显示内容、通知或请求用户输入。
  * 它会覆盖在页面内容上方，并提供一个聚焦的交互环境。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 聚焦交互 - 通过遮罩层和动画效果引导用户注意力
  * 2. 灵活布局 - 支持标题、内容和操作按钮的灵活组合
  * 3. 可访问性 - 支持键盘导航和屏幕阅读器
  * 4. 响应式设计 - 在不同屏幕尺寸下保持良好的用户体验
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
@@ -20,11 +20,11 @@
  *   <p>这是一个模态对话框的内容。</p>
  *   <button slot="actions" data-modal-target="my-modal">关闭</button>
  * </Modal>
- * 
+ *
  * <!-- 触发按钮 -->
  * <button data-modal-target="my-modal">打开模态框</button>
  * ```
- * 
+ *
  * 自定义操作按钮：
  * ```astro
  * <Modal id="confirm-modal" title="确认操作">
@@ -35,7 +35,7 @@
  *   </div>
  * </Modal>
  * ```
- * 
+ *
  * 不带标题的模态框：
  * ```astro
  * <Modal id="image-modal">
@@ -44,79 +44,77 @@
  * ```
  */
 
-// 导入样式
 import '../../app.css';
 import Button from '../base/Button.astro';
 
 interface Props {
-    /**
-     * Modal 的唯一标识符
-     */
-    id: string;
-    /**
-     * 模态框的标题
-     */
-    title?: string;
-    /**
-     * 是否显示关闭按钮
-     * @default true
-     */
-    showCloseButton?: boolean;
-    /**
-     * 自定义类名
-     */
-    class?: string;
+	/**
+	 * Modal 的唯一标识符
+	 */
+	id: string;
+	/**
+	 * 模态框的标题
+	 */
+	title?: string;
+	/**
+	 * 是否显示关闭按钮
+	 * @default true
+	 */
+	showCloseButton?: boolean;
+	/**
+	 * 自定义类名
+	 */
+	class?: string;
 }
 
-const {
-    id,
-    title,
-    showCloseButton = true,
-    class: className = '',
-} = Astro.props;
+const { id, title, showCloseButton = true, class: className = '' } = Astro.props;
 ---
 
 <dialog id={id} class="cosy:modal">
-    <div class:list={["cosy:modal-box", className]}>
-        {showCloseButton && (
-            <form method="dialog">
-                <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    shape="circle" 
-                    formmethod="dialog"
-                    class="cosy:modal-close-button"
-                >✕</Button>
-            </form>
-        )}
-        
-        {title && <h3 class="cosy:modal-title">{title}</h3>}
-        
-        <div class="cosy:modal-content">
-            <slot />
-        </div>
+	<div class:list={['cosy:modal-box', className]}>
+		{
+			showCloseButton && (
+				<form method="dialog">
+					<Button
+						variant="ghost"
+						size="sm"
+						shape="circle"
+						formmethod="dialog"
+						class="cosy:modal-close-button">
+						✕
+					</Button>
+				</form>
+			)
+		}
 
-        <div class="cosy:modal-action">
-            <slot name="actions" />
-        </div>
-    </div>
+		{title && <h3 class="cosy:modal-title">{title}</h3>}
 
-    <form method="dialog" class="cosy:modal-backdrop">
-        <button>关闭</button>
-    </form>
+		<div class="cosy:modal-content">
+			<slot />
+		</div>
+
+		<div class="cosy:modal-action">
+			<slot name="actions" />
+		</div>
+	</div>
+
+	<form method="dialog" class="cosy:modal-backdrop">
+		<button>关闭</button>
+	</form>
 </dialog>
 
 <script define:vars={{ id }}>
-// 为了方便使用，我们提供一些辅助方法
-document.addEventListener('DOMContentLoaded', () => {
-    const modal = document.getElementById(id);
-    if (!modal) return;
+	// 为了方便使用，我们提供一些辅助方法
+	document.addEventListener('DOMContentLoaded', () => {
+		const modal = document.getElementById(id);
+		if (!modal) return;
+
+		// 为所有触发这个模态框的按钮添加点击事件
+		document.querySelectorAll(`[data-modal-target="${id}"]`).forEach((trigger) => {
+			trigger.addEventListener('click', () => {
+				modal.showModal();
+			});
+		});
+	});
+</script>
 
-    // 为所有触发这个模态框的按钮添加点击事件
-    document.querySelectorAll(`[data-modal-target="${id}"]`).forEach(trigger => {
-        trigger.addEventListener('click', () => {
-            modal.showModal();
-        });
-    });
-});
-</script> 

package/dist/components/layouts/AppLayout.astro

@@ -0,0 +1,258 @@
+---
+/**
+ * AppLayout组件
+ *
+ * 适用于页面布局，包含侧边栏导航和目录
+ *
+ * 布局效果：
+ *
+ * 移动端：
+ * ```
+ * +------------------+
+ * |     Header      |
+ * +------------------+
+ * | Sidebar (1 line) |
+ * +------------------+
+ * |                  |
+ * |   Main Content   |
+ * |                  |
+ * |                  |
+ * +------------------+
+ * |     Footer      |
+ * +------------------+
+ * ```
+ *
+ * 桌面端：
+ * ```
+ * +------------------+
+ * |      Header     |
+ * +--------+---------+
+ * |        |         |
+ * |Sidebar | Content |
+ * |        |         |
+ * |        |         |
+ * +--------+---------+
+ * |      Footer     |
+ * +------------------+
+ * ```
+ *
+ * @param {Object} sidebarConfig - 侧边栏配置
+ * @param {boolean} [showHeader=true] - 是否显示头部
+ * @param {boolean} [showFooter=true] - 是否显示页脚
+ * @param {boolean} [showSidebar=true] - 是否显示侧边栏
+ * @param {string} [className] - 自定义类名
+ * @param {Array} [classList] - 自定义类名列表
+ * @param {boolean} [debug=true] - 是否启用调试模式
+ * @param {Object} mainContentConfig - 主内容区域配置
+ * @param {Object} footerConfig - 页脚配置
+ * @param {Object} headerConfig - 头部配置
+ * @param {Object} metaConfig - 元数据配置
+ * @param {Object} rest - 其他属性
+ *
+ * @example
+ * ```astro
+ * ---
+ * import AppLayout from '../layouts/AppLayout.astro';
+ *
+ * const sidebarItems = [
+ *   { title: "入门", items: [
+ *     { href: "/docs/getting-started", text: "快速开始" },
+ *     { href: "/docs/installation", text: "安装" }
+ *   ]},
+ *   { title: "组件", items: [
+ *     { href: "/docs/components/button", text: "Button 按钮" },
+ *     { href: "/docs/components/card", text: "Card 卡片" }
+ *   ]}
+ * ];
+ * ---
+ *
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </AppLayout>
+ * ```
+ *
+ * 自定义页脚示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ *   footerConfig={{
+ *     slogan: "简单而强大的组件库",
+ *     inspirationalSlogan: "让开发更加愉悦",
+ *     socialLinks: [
+ *       "https://github.com/myorg/myrepo",
+ *       "https://twitter.com/myorg"
+ *     ],
+ *     products: [
+ *       { name: "组件库", href: "/components" },
+ *       { name: "模板", href: "/templates" }
+ *     ]
+ *   }}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </AppLayout>
+ * ```
+ *
+ * 组件支持多种页脚相关的配置参数，可以通过以 `footer` 为前缀的属性来自定义页脚的内容和链接。
+ * 所有这些参数都是可选的，组件会为常用参数提供默认值。
+ *
+ * 全宽内容区域示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ *   mainContentConfig={{
+ *     fullWidth: true
+ *   }}
+ * >
+ *   <!-- 全宽Hero部分，无需容器限制 -->
+ *   <div class="cosy:bg-primary cosy:p-10 cosy:text-white cosy:text-center">
+ *     <h1 class="cosy:text-3xl">全宽Hero部分</h1>
+ *     <p class="cosy:mt-4">没有容器限制，宽度可以100%占满</p>
+ *   </div>
+ *
+ *   <!-- 自定义容器部分 -->
+ *   <div class="cosy:mx-auto cosy:p-6 cosy:container">
+ *     <p>在全宽模式下，您可以自行控制内容的容器和间距</p>
+ *     <p>这使得创建全宽背景的同时，保持内容在合适的宽度内</p>
+ *   </div>
+ *
+ *   <!-- 另一个全宽部分 -->
+ *   <div class="cosy:bg-accent cosy:mt-8 cosy:p-10">
+ *     <div class="cosy:mx-auto cosy:container">
+ *       <h2 class="cosy:text-2xl">灵活的布局</h2>
+ *       <p>您可以自由组合全宽区域和容器限制区域</p>
+ *     </div>
+ *   </div>
+ * </AppLayout>
+ * ```
+ *
+ * 调试模式示例：
+ * ```astro
+ * <AppLayout
+ *   metaConfig={{
+ *     title: "文档标题",
+ *     description: "文档描述"
+ *   }}
+ *   sidebarConfig={{
+ *     sidebarItems: sidebarItems
+ *   }}
+ *   debug={true}
+ * >
+ *   <h1>文档内容</h1>
+ *   <p>这是文档的主要内容</p>
+ * </AppLayout>
+ * ```
+ */
+
+import '../../app.css';
+import BaseLayout from './BaseLayout.astro';
+import Footer from './Footer.astro';
+import Main from '../containers/Main.astro';
+import Header from './Header.astro';
+import Sidebar from './Sidebar.astro';
+import { ClientRouter } from 'astro:transitions';
+import type { AppLayoutProps } from '../../index';
+import Container from '../containers/Container.astro';
+
+interface Props extends AppLayoutProps {}
+
+const {
+	sidebarConfig,
+	showHeader = true,
+	showFooter = true,
+	showSidebar = true,
+	class: className,
+	'class:list': classList,
+	debug = true,
+	mainContentConfig,
+	footerConfig,
+	headerConfig,
+	metaConfig,
+	...rest
+}: Props = Astro.props;
+---
+
+<BaseLayout
+	title={metaConfig.title}
+	description={metaConfig.description}
+	keywords={metaConfig.keywords}
+	author={metaConfig.author}
+	robots={metaConfig.robots}
+	head={metaConfig.head}
+	debug={debug}
+	{...rest}>
+	{
+		showHeader && (
+			<Header
+				logo={headerConfig.logo}
+				logoHref={headerConfig.logoHref}
+				navItems={headerConfig.navItems}
+				languages={headerConfig.languages}
+				currentLocale={headerConfig.currentLocale}
+				sticky={headerConfig.sticky}
+				basePath={headerConfig.basePath}
+				showSidebarToggle={headerConfig.showSidebarToggle}
+				defaultSidebarOpen={headerConfig.defaultSidebarOpen}
+				height={headerConfig.height}
+				transition:persist
+			/>
+		)
+	}
+
+	<Container flex="row" gap="md" size="full" padding="none">
+		<!-- 侧边栏容器 -->
+		{showSidebar && <Sidebar {...sidebarConfig} />}
+
+		<!-- 主内容区域 -->
+		<Main {...mainContentConfig}>
+			<slot />
+			<ClientRouter />
+		</Main>
+	</Container>
+
+	<!-- Footer -->
+	{
+		showFooter && (
+			<Container size="full" padding="none">
+				<Footer {...footerConfig} />
+			</Container>
+		)
+	}
+
+	<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>