@coffic/cosy-ui 0.9.95 → 0.9.96

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 (7) hide show
  1. package/dist/src/common/meta.d.ts +0 -4
  2. package/dist/src-astro/alert-dialog/AlertDialog.astro +0 -3
  3. package/dist/src-astro/layout-app/AppLayout.astro +3 -0
  4. package/dist/src-astro/layout-basic/BaseLayout.astro +3 -51
  5. package/dist/src-astro/layout-basic/BaseLayoutHtml.astro +71 -74
  6. package/dist/src-astro/layout-basic/Head.astro +80 -69
  7. package/package.json +1 -1
package/dist/src/common/meta.d.ts CHANGED
@@ -33,10 +33,6 @@ export interface IMetaProps {
33
33
  * 自定义CSS
34
34
  */
35
35
  customStyles?: string;
36
- /**
37
- * 自定义头部内容
38
- */
39
- head?: any;
40
36
  /**
41
37
  * 页面类名
42
38
  */
package/dist/src-astro/alert-dialog/AlertDialog.astro CHANGED
@@ -1,7 +1,4 @@
1
1
  ---
2
-
3
-
4
-
5
2
  /**
6
3
  * @component AlertDialog
7
4
  *
package/dist/src-astro/layout-app/AppLayout.astro CHANGED
@@ -407,6 +407,9 @@ const sidebarHeightClass = getSidebarHeightClass(
407
407
  bodyOnly={bodyOnly}
408
408
  theme={theme}
409
409
  enableClientRouter={enableClientRouter}>
410
+ <!-- 自定义头部内容 -->
411
+ <slot name="head" slot="head" />
412
+
410
413
  <!-- 背景层（最底层，z-index: 0），优先使用 slot -->
411
414
  {
412
415
  Astro.slots.has('background') && (
package/dist/src-astro/layout-basic/BaseLayout.astro CHANGED
@@ -1,58 +1,10 @@
1
1
  ---
2
-
3
-
4
-
5
2
  /**
6
3
  * @component BaseLayout
7
4
  *
8
5
  * @description
9
6
  * BaseLayout 组件是最基础的 HTML 结构布局，提供完整的 HTML 骨架和元数据设置。
10
7
  * 它是所有页面布局的基础，处理了基本的 HTML 结构、元数据和全局样式。
11
- *
12
- * @usage
13
- * 基本用法：
14
- * ```astro
15
- * ---
16
- * import { BaseLayout } from '@coffic/cosy-ui';
17
- * ---
18
- *
19
- * <BaseLayout title="页面标题" description="页面描述">
20
- * <main>
21
- * <h1>页面内容</h1>
22
- * <p>这是页面的主要内容</p>
23
- * </main>
24
- * </BaseLayout>
25
- * ```
26
- *
27
- * 添加自定义头部内容：
28
- * ```astro
29
- * <BaseLayout
30
- * title="页面标题"
31
- * head={`<link rel="canonical" href="https://example.com" />`}
32
- * >
33
- * <p>页面内容</p>
34
- * </BaseLayout>
35
- * ```
36
- *
37
- * 自定义样式：
38
- * ```astro
39
- * <BaseLayout
40
- * title="页面标题"
41
- * customStyles={`body { background-color: #f5f5f5; }`}
42
- * >
43
- * <p>页面内容</p>
44
- * </BaseLayout>
45
- * ```
46
- *
47
- * 只渲染 body 部分（用于文档展示）：
48
- * ```astro
49
- * <BaseLayout
50
- * title="页面标题"
51
- * bodyOnly={true}
52
- * >
53
- * <p>页面内容</p>
54
- * </BaseLayout>
55
- * ```
56
8
  */
57
9
 
58
10
  import type { IMetaProps } from '../../src/common/meta';
@@ -86,7 +38,6 @@ const {
86
38
  lang = 'zh-CN',
87
39
  viewport = true,
88
40
  customStyles = '',
89
- head,
90
41
  favicon,
91
42
  background = 'base-100',
92
43
  theme = 'default',
@@ -108,11 +59,12 @@ const bodyClasses = [backgroundClass].filter(Boolean).join(' ');
108
59
  theme={theme}
109
60
  viewport={viewport}
110
61
  customStyles={customStyles}
111
- head={head}
112
62
  favicon={favicon}
113
63
  bodyClasses={bodyClasses}
114
64
  bodyOnly={bodyOnly}
115
65
  enableClientRouter={enableClientRouter}>
116
- <slot name="head" />
66
+ <!-- 自定义头部内容 -->
67
+ <slot name="head" slot="head" />
68
+
117
69
  <slot />
118
70
  </BaseLayoutHtml>
package/dist/src-astro/layout-basic/BaseLayoutHtml.astro CHANGED
@@ -5,87 +5,84 @@
5
5
  * @internal 仅内部使用，不对外导出
6
6
  */
7
7
 
8
- import BaseLayoutBody from "./Body.astro";
9
- import BaseLayoutHead from "./Head.astro";
8
+ import BaseLayoutBody from './Body.astro';
9
+ import BaseLayoutHead from './Head.astro';
10
10
 
11
11
  export interface Props {
12
- /** 页面标题 */
13
- title: string;
14
- /** 页面描述 */
15
- description?: string;
16
- /** 页面关键词 */
17
- keywords?: string;
18
- /** 页面作者 */
19
- author?: string;
20
- /** 页面语言 */
21
- lang?: string;
22
- /** 主题 */
23
- theme?: string;
24
- /** 是否包含 viewport meta 标签 */
25
- viewport?: boolean;
26
- /** 自定义样式 */
27
- customStyles?: string;
28
- /** 自定义头部内容 */
29
- head?: any;
30
- /** 网站图标 */
31
- favicon?: any;
32
- /** body 的 CSS 类名 */
33
- bodyClasses?: string;
34
- /** 类名列表 */
35
- classList?: any;
36
- /** 是否只渲染 body 部分 */
37
- bodyOnly?: boolean;
38
- /** 是否启用 Astro ClientRouter */
39
- enableClientRouter?: boolean;
12
+ /** 页面标题 */
13
+ title: string;
14
+ /** 页面描述 */
15
+ description?: string;
16
+ /** 页面关键词 */
17
+ keywords?: string;
18
+ /** 页面作者 */
19
+ author?: string;
20
+ /** 页面语言 */
21
+ lang?: string;
22
+ /** 主题 */
23
+ theme?: string;
24
+ /** 是否包含 viewport meta 标签 */
25
+ viewport?: boolean;
26
+ /** 自定义样式 */
27
+ customStyles?: string;
28
+ /** 自定义头部内容 */
29
+ /** 网站图标 */
30
+ favicon?: any;
31
+ /** body 的 CSS 类名 */
32
+ bodyClasses?: string;
33
+ /** 类名列表 */
34
+ classList?: any;
35
+ /** 是否只渲染 body 部分 */
36
+ bodyOnly?: boolean;
37
+ /** 是否启用 Astro ClientRouter */
38
+ enableClientRouter?: boolean;
40
39
  }
41
40
 
42
41
  const {
43
- title,
44
- description = "",
45
- keywords = "",
46
- author = "",
47
- lang = "zh-CN",
48
- theme,
49
- viewport = true,
50
- customStyles = "",
51
- head,
52
- favicon,
53
- bodyClasses = "",
54
- classList,
55
- bodyOnly = false,
56
- enableClientRouter = true,
42
+ title,
43
+ description = '',
44
+ keywords = '',
45
+ author = '',
46
+ lang = 'zh-CN',
47
+ theme,
48
+ viewport = true,
49
+ customStyles = '',
50
+ favicon,
51
+ bodyClasses = '',
52
+ classList,
53
+ bodyOnly = false,
54
+ enableClientRouter = true,
57
55
  } = Astro.props;
58
56
  ---
59
57
 
60
58
  {
61
- bodyOnly ? (
62
- <BaseLayoutBody
63
- bodyClasses={bodyClasses}
64
- classList={classList}
65
- bodyOnly={bodyOnly}>
66
- <slot />
67
- </BaseLayoutBody>
68
- ) : (
69
- <html lang={lang} data-theme={theme || undefined}>
70
- <BaseLayoutHead
71
- title={title}
72
- description={description}
73
- keywords={keywords}
74
- author={author}
75
- lang={lang}
76
- viewport={viewport}
77
- customStyles={customStyles}
78
- head={head}
79
- favicon={favicon}
80
- enableClientRouter={enableClientRouter}>
81
- <slot name="head" />
82
- </BaseLayoutHead>
83
- <BaseLayoutBody
84
- bodyClasses={bodyClasses}
85
- classList={classList}
86
- bodyOnly={bodyOnly}>
87
- <slot />
88
- </BaseLayoutBody>
89
- </html>
90
- )
59
+ bodyOnly ? (
60
+ <BaseLayoutBody
61
+ bodyClasses={bodyClasses}
62
+ classList={classList}
63
+ bodyOnly={bodyOnly}>
64
+ <slot />
65
+ </BaseLayoutBody>
66
+ ) : (
67
+ <html lang={lang} data-theme={theme || undefined}>
68
+ <BaseLayoutHead
69
+ title={title}
70
+ description={description}
71
+ keywords={keywords}
72
+ author={author}
73
+ lang={lang}
74
+ viewport={viewport}
75
+ customStyles={customStyles}
76
+ favicon={favicon}
77
+ enableClientRouter={enableClientRouter}>
78
+ <slot name="head" slot="head" />
79
+ </BaseLayoutHead>
80
+ <BaseLayoutBody
81
+ bodyClasses={bodyClasses}
82
+ classList={classList}
83
+ bodyOnly={bodyOnly}>
84
+ <slot />
85
+ </BaseLayoutBody>
86
+ </html>
87
+ )
91
88
  }
package/dist/src-astro/layout-basic/Head.astro CHANGED
@@ -5,87 +5,98 @@
5
5
  * @internal 仅内部使用，不对外导出
6
6
  */
7
7
 
8
- import { ClientRouter } from "astro:transitions";
9
- import { THEME_DEFAULT, THEME_PREFERS_DARK } from "../../src/config/themes.config";
8
+ import { ClientRouter } from 'astro:transitions';
9
+ import {
10
+ THEME_DEFAULT,
11
+ THEME_PREFERS_DARK,
12
+ } from '../../src/config/themes.config';
10
13
 
11
14
  export interface Props {
12
- /** 页面标题 */
13
- title: string;
14
- /** 页面描述 */
15
- description?: string;
16
- /** 页面关键词 */
17
- keywords?: string;
18
- /** 页面作者 */
19
- author?: string;
20
- /** 页面语言 */
21
- lang?: string;
22
- /** 是否包含 viewport meta 标签 */
23
- viewport?: boolean;
24
- /** 自定义样式 */
25
- customStyles?: string;
26
- /** 自定义头部内容 */
27
- head?: any;
28
- /** 网站图标 */
29
- favicon?: {
30
- src: string;
31
- format: string;
32
- };
33
- /** 是否启用 Astro ClientRouter */
34
- enableClientRouter?: boolean;
15
+ /** 页面标题 */
16
+ title: string;
17
+ /** 页面描述 */
18
+ description?: string;
19
+ /** 页面关键词 */
20
+ keywords?: string;
21
+ /** 页面作者 */
22
+ author?: string;
23
+ /** 页面语言 */
24
+ lang?: string;
25
+ /** 是否包含 viewport meta 标签 */
26
+ viewport?: boolean;
27
+ /** 自定义样式 */
28
+ customStyles?: string;
29
+ /** 网站图标 */
30
+ favicon?: {
31
+ src: string;
32
+ format: string;
33
+ };
34
+ /** 是否启用 Astro ClientRouter */
35
+ enableClientRouter?: boolean;
35
36
  }
36
37
 
37
38
  const {
38
- title,
39
- description = "",
40
- keywords = "",
41
- author = "",
42
- viewport = true,
43
- customStyles = "",
44
- head,
45
- favicon,
46
- enableClientRouter = true,
39
+ title,
40
+ description = '',
41
+ keywords = '',
42
+ author = '',
43
+ viewport = true,
44
+ customStyles = '',
45
+ favicon,
46
+ enableClientRouter = true,
47
47
  } = Astro.props;
48
48
  ---
49
49
 
50
50
  <head>
51
- <meta charset="UTF-8" />
52
- {
53
- viewport && (
54
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
55
- )
56
- }
57
- <title>{title}</title>
58
- {description && <meta name="description" content={description} />}
59
- {keywords && <meta name="keywords" content={keywords} />}
60
- {author && <meta name="author" content={author} />}
61
- {favicon && <link rel="icon" type={favicon.format} href={favicon.src} />}
62
- <meta name="generator" content={Astro.generator} />
51
+ <meta charset="UTF-8" />
52
+ {
53
+ viewport && (
54
+ <meta
55
+ name="viewport"
56
+ content="width=device-width, initial-scale=1.0"
57
+ />
58
+ )
59
+ }
60
+ <title>{title}</title>
61
+ {description && <meta name="description" content={description} />}
62
+ {keywords && <meta name="keywords" content={keywords} />}
63
+ {author && <meta name="author" content={author} />}
64
+ {favicon && <link rel="icon" type={favicon.format} href={favicon.src} />}
65
+ <meta name="generator" content={Astro.generator} />
63
66
 
64
- {enableClientRouter && <ClientRouter />}
67
+ <slot name="head" />
65
68
 
66
- <!-- 主题初始化脚本：在页面渲染前根据系统主题设置 data-theme -->
67
- <!-- 从 TypeScript 配置文件读取主题配置，实现单一数据源 -->
68
- <script is:inline define:vars={{ defaultTheme: THEME_DEFAULT, prefersDarkTheme: THEME_PREFERS_DARK }}>
69
- (function() {
70
- // 检查 localStorage 中是否有保存的主题
71
- const savedTheme = localStorage.getItem('theme');
72
-
73
- // 如果没有保存的主题，或者保存的是 "default"，则根据系统主题设置
74
- if (!savedTheme || savedTheme === 'default') {
75
- const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
76
- document.documentElement.setAttribute('data-theme', isDark ? prefersDarkTheme : defaultTheme);
77
- } else {
78
- // 如果有保存的主题，直接使用
79
- document.documentElement.setAttribute('data-theme', savedTheme);
80
- }
81
- })();
82
- </script>
69
+ {enableClientRouter && <ClientRouter />}
83
70
 
84
- <!-- 自定义样式 -->
85
- {customStyles && <style set:html={customStyles} />}
71
+ <!-- 主题初始化脚本：在页面渲染前根据系统主题设置 data-theme -->
72
+ <!-- 从 TypeScript 配置文件读取主题配置，实现单一数据源 -->
73
+ <script
74
+ is:inline
75
+ define:vars={{
76
+ defaultTheme: THEME_DEFAULT,
77
+ prefersDarkTheme: THEME_PREFERS_DARK,
78
+ }}
79
+ >
80
+ (function () {
81
+ // 检查 localStorage 中是否有保存的主题
82
+ const savedTheme = localStorage.getItem('theme');
86
83
 
87
- <!-- 自定义头部内容 -->
88
- {head && <div set:html={head} />}
84
+ // 如果没有保存的主题，或者保存的是 "default"，则根据系统主题设置
85
+ if (!savedTheme || savedTheme === 'default') {
86
+ const isDark = window.matchMedia(
87
+ '(prefers-color-scheme: dark)'
88
+ ).matches;
89
+ document.documentElement.setAttribute(
90
+ 'data-theme',
91
+ isDark ? prefersDarkTheme : defaultTheme
92
+ );
93
+ } else {
94
+ // 如果有保存的主题，直接使用
95
+ document.documentElement.setAttribute('data-theme', savedTheme);
96
+ }
97
+ })();
98
+ </script>
89
99
 
90
- <slot name="head" />
100
+ <!-- 自定义样式 -->
101
+ {customStyles && <style set:html={customStyles} />}
91
102
  </head>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coffic/cosy-ui",
3
- "version": "0.9.95",
3
+ "version": "0.9.96",
4
4
  "description": "An astro component library",
5
5
  "author": {
6
6
  "name": "nookery",