@coffic/cosy-ui 0.4.3 → 0.4.5

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

@@ -172,7 +172,8 @@ 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 '@/types/layout';
+import type { AppLayoutProps } from '../../index';
+import Container from '../containers/Container.astro';
 
 interface Props extends AppLayoutProps {}
 
@@ -199,10 +200,7 @@ const {
 	author={metaConfig.author}
 	robots={metaConfig.robots}
 	head={metaConfig.head}
-	class:list={[
-		'cosy:min-h-screen cosy:flex cosy:flex-col',
-		{ 'cosy:border cosy:border-base-300': debug },
-	]}
+	debug={debug}
 	{...rest}>
 	{
 		showHeader && (
@@ -222,7 +220,7 @@ const {
 		)
 	}
 
-	<div class="cosy:flex cosy:flex-row cosy:flex-1 cosy:pb-0 cosy:min-h-screen">
+	<Container flex="row" gap="md" size="full" padding="none">
 		<!-- 侧边栏容器 -->
 		{showSidebar && <Sidebar {...sidebarConfig} />}
 
@@ -231,10 +229,16 @@ const {
 			<slot />
 			<ClientRouter />
 		</Main>
-	</div>
+	</Container>
 
 	<!-- Footer -->
-	{showFooter && <Footer {...footerConfig} />}
+	{
+		showFooter && (
+			<Container size="full" padding="none">
+				<Footer {...footerConfig} />
+			</Container>
+		)
+	}
 
 	<script>
 		// Handle sidebar toggle

package/dist/components/layouts/BaseLayout.astro

@@ -1,25 +1,25 @@
 ---
 /**
  * @component BaseLayout
- * 
+ *
  * @description
  * BaseLayout 组件是最基础的 HTML 结构布局，提供完整的 HTML 骨架和元数据设置。
  * 它是所有页面布局的基础，处理了基本的 HTML 结构、元数据和全局样式。
- * 
+ *
  * @design
  * 设计理念：
  * 1. 基础结构 - 提供标准的 HTML5 文档结构
  * 2. 元数据管理 - 集中管理页面的标题、描述和关键词等元数据
  * 3. 全局样式 - 应用基础的重置样式和全局变量
  * 4. 灵活扩展 - 支持自定义头部内容和样式
- * 
+ *
  * @usage
  * 基本用法：
  * ```astro
  * ---
  * import { BaseLayout } from '@coffic/cosy-ui';
  * ---
- * 
+ *
  * <BaseLayout title="页面标题" description="页面描述">
  *   <main>
  *     <h1>页面内容</h1>
@@ -27,21 +27,21 @@
  *   </main>
  * </BaseLayout>
  * ```
- * 
+ *
  * 添加自定义头部内容：
  * ```astro
- * <BaseLayout 
- *   title="页面标题" 
+ * <BaseLayout
+ *   title="页面标题"
  *   head={`<link rel="canonical" href="https://example.com" />`}
  * >
  *   <p>页面内容</p>
  * </BaseLayout>
  * ```
- * 
+ *
  * 自定义样式：
  * ```astro
- * <BaseLayout 
- *   title="页面标题" 
+ * <BaseLayout
+ *   title="页面标题"
  *   customStyles={`body { background-color: #f5f5f5; }`}
  * >
  *   <p>页面内容</p>
@@ -50,46 +50,49 @@
  */
 
 import '../../app.css';
-import type { MetaProps } from '@/types/meta';
+import type { MetaProps } from '../../index';
 
-export interface Props extends MetaProps {}
+export interface Props extends MetaProps {
+	debug?: boolean;
+}
 
 const {
-  title,
-  description = "",
-  keywords = "",
-  lang = "zh-CN",
-  viewport = true,
-  customStyles = "",
-  head,
-  class: className,
-  'class:list': classList,
+	title,
+	description = '',
+	keywords = '',
+	lang = 'zh-CN',
+	viewport = true,
+	customStyles = '',
+	head,
+	debug = true,
+	class: className,
+	'class:list': classList,
 } = Astro.props;
 
 // 处理类名
-let bodyClasses = className || "";
+let bodyClasses = debug ? 'cosy:border cosy:border-red-500' : className || '';
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang={lang}>
-  <head>
-    <meta charset="UTF-8" />
-    {viewport && <meta name="viewport" content="width=device-width, initial-scale=1.0" />}
-    <title>{title}</title>
-    {description && <meta name="description" content={description} />}
-    {keywords && <meta name="keywords" content={keywords} />}
-    <meta name="generator" content={Astro.generator} />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    
-    <!-- 自定义样式 -->
-    {customStyles && <style set:html={customStyles}></style>}
-    
-    <!-- 自定义头部内容 -->
-    {head && <div set:html={head} />}
-    
-    <slot name="head" />
-  </head>
-  <body class:list={[bodyClasses, classList]}>
-    <slot />
-  </body>
-</html> 
+	<head>
+		<meta charset="UTF-8" />
+		{viewport && <meta name="viewport" content="width=device-width, initial-scale=1.0" />}
+		<title>{title}</title>
+		{description && <meta name="description" content={description} />}
+		{keywords && <meta name="keywords" content={keywords} />}
+		<meta name="generator" content={Astro.generator} />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+		<!-- 自定义样式 -->
+		{customStyles && <style set:html={customStyles} />}
+
+		<!-- 自定义头部内容 -->
+		{head && <div set:html={head} />}
+
+		<slot name="head" />
+	</head>
+	<body class:list={[bodyClasses, classList, 'min-h-screen']}>
+		<slot />
+	</body>
+</html>