@coffic/cosy-ui 0.3.69 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/app.css +1 -1
  2. package/dist/components/base/Alert.astro +3 -3
  3. package/dist/components/containers/Container.astro +80 -4
  4. package/dist/components/containers/Main.astro +41 -54
  5. package/dist/components/data-display/Blog.astro +1 -0
  6. package/dist/components/data-display/ProductCard.astro +0 -2
  7. package/dist/components/data-display/Products.astro +0 -2
  8. package/dist/components/data-display/TeamMember.astro +0 -2
  9. package/dist/components/data-display/TeamMembers.astro +0 -2
  10. package/dist/components/display/Banner.astro +0 -1
  11. package/dist/components/display/Card.astro +0 -1
  12. package/dist/components/display/CodeBlock.astro +0 -1
  13. package/dist/components/display/CodeExample.astro +0 -1
  14. package/dist/components/display/Modal.astro +65 -67
  15. package/dist/components/layouts/AppLayout.astro +258 -0
  16. package/dist/components/layouts/BaseLayout.astro +46 -92
  17. package/dist/components/layouts/DashboardLayout.astro +615 -604
  18. package/dist/components/layouts/Footer.astro +141 -113
  19. package/dist/components/layouts/Header.astro +11 -292
  20. package/dist/components/layouts/Sidebar.astro +54 -31
  21. package/dist/components/layouts/SidebarNav.astro +1 -11
  22. package/dist/components/typography/Article.astro +8 -30
  23. package/dist/index.ts +7 -4
  24. package/dist/types/article.ts +22 -0
  25. package/dist/types/footer.ts +119 -22
  26. package/dist/types/header.ts +70 -0
  27. package/dist/types/layout.ts +71 -10
  28. package/dist/types/main.ts +69 -0
  29. package/dist/types/meta.ts +50 -0
  30. package/dist/types/sidebar.ts +38 -0
  31. package/package.json +2 -2
  32. package/dist/components/layouts/DefaultLayout.astro +0 -170
  33. package/dist/components/layouts/DocumentationLayout.astro +0 -624
  34. package/dist/components/layouts/LandingLayout.astro +0 -388
package/dist/components/layouts/BaseLayout.astro CHANGED
@@ -1,25 +1,25 @@
1
1
  ---
2
2
  /**
3
3
  * @component BaseLayout
4
- *
4
+ *
5
5
  * @description
6
6
  * BaseLayout 组件是最基础的 HTML 结构布局，提供完整的 HTML 骨架和元数据设置。
7
7
  * 它是所有页面布局的基础，处理了基本的 HTML 结构、元数据和全局样式。
8
- *
8
+ *
9
9
  * @design
10
10
  * 设计理念：
11
11
  * 1. 基础结构 - 提供标准的 HTML5 文档结构
12
12
  * 2. 元数据管理 - 集中管理页面的标题、描述和关键词等元数据
13
13
  * 3. 全局样式 - 应用基础的重置样式和全局变量
14
14
  * 4. 灵活扩展 - 支持自定义头部内容和样式
15
- *
15
+ *
16
16
  * @usage
17
17
  * 基本用法：
18
18
  * ```astro
19
19
  * ---
20
20
  * import { BaseLayout } from '@coffic/cosy-ui';
21
21
  * ---
22
- *
22
+ *
23
23
  * <BaseLayout title="页面标题" description="页面描述">
24
24
  * <main>
25
25
  * <h1>页面内容</h1>
@@ -27,21 +27,21 @@
27
27
  * </main>
28
28
  * </BaseLayout>
29
29
  * ```
30
- *
30
+ *
31
31
  * 添加自定义头部内容：
32
32
  * ```astro
33
- * <BaseLayout
34
- * title="页面标题"
33
+ * <BaseLayout
34
+ * title="页面标题"
35
35
  * head={`<link rel="canonical" href="https://example.com" />`}
36
36
  * >
37
37
  * <p>页面内容</p>
38
38
  * </BaseLayout>
39
39
  * ```
40
- *
40
+ *
41
41
  * 自定义样式：
42
42
  * ```astro
43
- * <BaseLayout
44
- * title="页面标题"
43
+ * <BaseLayout
44
+ * title="页面标题"
45
45
  * customStyles={`body { background-color: #f5f5f5; }`}
46
46
  * >
47
47
  * <p>页面内容</p>
@@ -49,96 +49,50 @@
49
49
  * ```
50
50
  */
51
51
 
52
- // 导入样式
53
52
  import '../../app.css';
53
+ import type { MetaProps } from '../../index';
54
54
 
55
- export interface Props {
56
- /**
57
- * 页面标题
58
- */
59
- title: string;
60
-
61
- /**
62
- * 页面描述
63
- * @default ""
64
- */
65
- description?: string;
66
-
67
- /**
68
- * 页面关键词
69
- * @default ""
70
- */
71
- keywords?: string;
72
-
73
- /**
74
- * 页面语言
75
- * @default "zh-CN"
76
- */
77
- lang?: string;
78
-
79
- /**
80
- * 是否包含视口元标签
81
- * @default true
82
- */
83
- viewport?: boolean;
84
-
85
- /**
86
- * 自定义CSS
87
- */
88
- customStyles?: string;
89
-
90
- /**
91
- * 自定义头部内容
92
- */
93
- head?: astroHTML.JSX.Element;
94
-
95
- /**
96
- * 页面类名
97
- */
98
- class?: string;
99
-
100
- /**
101
- * 类名列表
102
- */
103
- 'class:list'?: any;
55
+ export interface Props extends MetaProps {
56
+ debug?: boolean;
104
57
  }
105
58
 
106
59
  const {
107
- title,
108
- description = "",
109
- keywords = "",
110
- lang = "zh-CN",
111
- viewport = true,
112
- customStyles = "",
113
- head,
114
- class: className,
115
- 'class:list': classList,
60
+ title,
61
+ description = '',
62
+ keywords = '',
63
+ lang = 'zh-CN',
64
+ viewport = true,
65
+ customStyles = '',
66
+ head,
67
+ debug = true,
68
+ class: className,
69
+ 'class:list': classList,
116
70
  } = Astro.props;
117
71
 
118
72
  // 处理类名
119
- let bodyClasses = className || "";
73
+ let bodyClasses = debug ? 'cosy:border cosy:border-red-500' : className || '';
120
74
  ---
121
75
 
122
- <!DOCTYPE html>
76
+ <!doctype html>
123
77
  <html lang={lang}>
124
- <head>
125
- <meta charset="UTF-8" />
126
- {viewport && <meta name="viewport" content="width=device-width, initial-scale=1.0" />}
127
- <title>{title}</title>
128
- {description && <meta name="description" content={description} />}
129
- {keywords && <meta name="keywords" content={keywords} />}
130
- <meta name="generator" content={Astro.generator} />
131
- <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
132
-
133
- <!-- 自定义样式 -->
134
- {customStyles && <style set:html={customStyles}></style>}
135
-
136
- <!-- 自定义头部内容 -->
137
- {head && <div set:html={head} />}
138
-
139
- <slot name="head" />
140
- </head>
141
- <body class:list={[bodyClasses, classList]}>
142
- <slot />
143
- </body>
144
- </html>
78
+ <head>
79
+ <meta charset="UTF-8" />
80
+ {viewport && <meta name="viewport" content="width=device-width, initial-scale=1.0" />}
81
+ <title>{title}</title>
82
+ {description && <meta name="description" content={description} />}
83
+ {keywords && <meta name="keywords" content={keywords} />}
84
+ <meta name="generator" content={Astro.generator} />
85
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
86
+
87
+ <!-- 自定义样式 -->
88
+ {customStyles && <style set:html={customStyles} />}
89
+
90
+ <!-- 自定义头部内容 -->
91
+ {head && <div set:html={head} />}
92
+
93
+ <slot name="head" />
94
+ </head>
95
+ <body class:list={[bodyClasses, classList, 'min-h-screen']}>
96
+ <slot />
97
+ </body>
98
+ </html>