@coffic/cosy-ui 0.9.77 → 0.9.78
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.
|
@@ -55,7 +55,6 @@ import {
|
|
|
55
55
|
getBackgroundClass,
|
|
56
56
|
type BackgroundColor,
|
|
57
57
|
} from "../../src/common/backgrounds";
|
|
58
|
-
import Logo from "../../src/assets/cosy-logo.png";
|
|
59
58
|
import HeaderStart from "./HeaderStart.astro";
|
|
60
59
|
import HeaderCenter from "./HeaderCenter.astro";
|
|
61
60
|
import HeaderEnd from "./HeaderEnd.astro";
|
|
@@ -65,7 +64,7 @@ export interface Props extends IHeaderProps {}
|
|
|
65
64
|
|
|
66
65
|
const {
|
|
67
66
|
height = "3xs",
|
|
68
|
-
logo
|
|
67
|
+
logo,
|
|
69
68
|
logoHref = LinkUtil.getBaseUrl(),
|
|
70
69
|
navItems = [],
|
|
71
70
|
sticky = true,
|
|
@@ -143,48 +142,48 @@ const containerClassList = [
|
|
|
143
142
|
---
|
|
144
143
|
|
|
145
144
|
<header class={headerClassList}>
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
145
|
+
<div class={containerClassList}>
|
|
146
|
+
<HeaderStart
|
|
147
|
+
logo={logo}
|
|
148
|
+
logoHref={logoHref}
|
|
149
|
+
navPosition={navPosition}
|
|
150
|
+
navItems={navItems}
|
|
151
|
+
activeLink={activeLink}
|
|
152
|
+
linkHeightClass={linkHeightClass}>
|
|
153
|
+
<slot name="navbar-start" />
|
|
154
|
+
</HeaderStart>
|
|
156
155
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
156
|
+
<HeaderCenter
|
|
157
|
+
navPosition={navPosition}
|
|
158
|
+
navItems={navItems}
|
|
159
|
+
activeLink={activeLink}
|
|
160
|
+
linkHeightClass={linkHeightClass}
|
|
161
|
+
gap={gap}>
|
|
162
|
+
<slot name="navbar-center" />
|
|
163
|
+
</HeaderCenter>
|
|
165
164
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
165
|
+
<HeaderEnd
|
|
166
|
+
navPosition={navPosition}
|
|
167
|
+
navItems={navItems}
|
|
168
|
+
activeLink={activeLink}
|
|
169
|
+
linkHeightClass={linkHeightClass}
|
|
170
|
+
showThemeSwitcher={showThemeSwitcher}
|
|
171
|
+
isI18nEnabled={isI18nEnabled}
|
|
172
|
+
astroI18n={astroI18n}>
|
|
173
|
+
<slot name="navbar-end" />
|
|
174
|
+
</HeaderEnd>
|
|
175
|
+
</div>
|
|
177
176
|
</header>
|
|
178
177
|
|
|
179
178
|
<!-- 移动端导航 Modal -->
|
|
180
179
|
{
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
180
|
+
navItems.length > 0 && (
|
|
181
|
+
<Modal id="mobile-nav" title="导航菜单">
|
|
182
|
+
<MobileNav
|
|
183
|
+
navItems={navItems}
|
|
184
|
+
activeLink={activeLink}
|
|
185
|
+
linkHeightClass={linkHeightClass}
|
|
186
|
+
/>
|
|
187
|
+
</Modal>
|
|
188
|
+
)
|
|
190
189
|
}
|
|
@@ -31,7 +31,7 @@ import type { ImageSource } from "index-astro";
|
|
|
31
31
|
import NavItems from "./NavItems.astro";
|
|
32
32
|
|
|
33
33
|
export interface Props {
|
|
34
|
-
logo
|
|
34
|
+
logo?: ImageSource;
|
|
35
35
|
logoHref?: string;
|
|
36
36
|
navPosition: "start" | "center" | "end";
|
|
37
37
|
navItems: INavItem[];
|
|
@@ -44,20 +44,20 @@ const { logo, logoHref, navPosition, navItems, activeLink, linkHeightClass } =
|
|
|
44
44
|
---
|
|
45
45
|
|
|
46
46
|
<div class="cosy:navbar-start">
|
|
47
|
-
|
|
47
|
+
{logo && <LogoLink src={logo} href={logoHref} />}
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
49
|
+
<!-- 桌面端左侧导航 -->
|
|
50
|
+
{
|
|
51
|
+
navPosition === 'start' && (
|
|
52
|
+
<div class="cosy:hidden cosy:lg:flex">
|
|
53
|
+
<NavItems
|
|
54
|
+
navItems={navItems}
|
|
55
|
+
activeLink={activeLink}
|
|
56
|
+
linkHeightClass={linkHeightClass}
|
|
57
|
+
gap={2}
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
<slot />
|
|
63
63
|
</div>
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
* @prop {...HTMLAttributes<'div'>} [rest] - 其他HTML div标签属性
|
|
18
18
|
* @slots
|
|
19
19
|
* @slot default - 主内容区域
|
|
20
|
+
* @slot footer - 自定义全局footer（优先级最高，会覆盖内置Footer）
|
|
20
21
|
* @slot header - 自定义全局header（优先级最高，会覆盖内置AppHeader）
|
|
21
22
|
* @slot navbar-start - 导航栏开始位置的内容（传递给AppHeader）
|
|
22
23
|
* @slot navbar-center - 导航栏中间位置的内容（传递给AppHeader）
|
|
@@ -262,6 +263,48 @@
|
|
|
262
263
|
* <p>自定义的 header 会横跨整个页面宽度，不受侧边栏限制</p>
|
|
263
264
|
* </AppLayout>
|
|
264
265
|
* ```
|
|
266
|
+
*
|
|
267
|
+
* 自定义Footer示例：
|
|
268
|
+
* ```astro
|
|
269
|
+
* <AppLayout
|
|
270
|
+
* metaConfig={{
|
|
271
|
+
* title: "文档标题",
|
|
272
|
+
* description: "文档描述"
|
|
273
|
+
* }}
|
|
274
|
+
* sidebarConfig={{
|
|
275
|
+
* sidebarItems: sidebarItems
|
|
276
|
+
* }}
|
|
277
|
+
* >
|
|
278
|
+
* <h1>文档内容</h1>
|
|
279
|
+
* <p>这是文档的主要内容</p>
|
|
280
|
+
*
|
|
281
|
+
* <!-- 使用自定义 footer slot，将横跨整个页面宽度 -->
|
|
282
|
+
* <footer slot="footer" class="cosy:bg-base-200 cosy:p-8">
|
|
283
|
+
* <div class="cosy:container cosy:mx-auto">
|
|
284
|
+
* <div class="cosy:grid cosy:grid-cols-1 cosy:md:grid-cols-3 cosy:gap-8">
|
|
285
|
+
* <div>
|
|
286
|
+
* <h3 class="cosy:font-bold cosy:text-lg cosy:mb-4">关于我们</h3>
|
|
287
|
+
* <p class="cosy:text-sm">我们致力于提供最好的产品和服务</p>
|
|
288
|
+
* </div>
|
|
289
|
+
* <div>
|
|
290
|
+
* <h3 class="cosy:font-bold cosy:text-lg cosy:mb-4">快速链接</h3>
|
|
291
|
+
* <ul class="cosy:space-y-2">
|
|
292
|
+
* <li><a href="/docs" class="cosy:link cosy:link-hover">文档</a></li>
|
|
293
|
+
* <li><a href="/blog" class="cosy:link cosy:link-hover">博客</a></li>
|
|
294
|
+
* </ul>
|
|
295
|
+
* </div>
|
|
296
|
+
* <div>
|
|
297
|
+
* <h3 class="cosy:font-bold cosy:text-lg cosy:mb-4">联系方式</h3>
|
|
298
|
+
* <p class="cosy:text-sm">email@example.com</p>
|
|
299
|
+
* </div>
|
|
300
|
+
* </div>
|
|
301
|
+
* <div class="cosy:mt-8 cosy:pt-8 cosy:border-t cosy:text-center cosy:text-sm">
|
|
302
|
+
* <p>© 2025 我的公司. All rights reserved.</p>
|
|
303
|
+
* </div>
|
|
304
|
+
* </div>
|
|
305
|
+
* </footer>
|
|
306
|
+
* </AppLayout>
|
|
307
|
+
* ```
|
|
265
308
|
*/
|
|
266
309
|
|
|
267
310
|
import "../../style.ts";
|
|
@@ -351,7 +394,7 @@ const sidebarHeightClass = getSidebarHeightClass(
|
|
|
351
394
|
sidebarTopClass,
|
|
352
395
|
sidebarHeightClass,
|
|
353
396
|
]}>
|
|
354
|
-
<Sidebar {...sidebarConfig} />
|
|
397
|
+
<Sidebar {...(sidebarConfig as any)} />
|
|
355
398
|
</div>
|
|
356
399
|
)
|
|
357
400
|
}
|
|
@@ -373,14 +416,17 @@ const sidebarHeightClass = getSidebarHeightClass(
|
|
|
373
416
|
|
|
374
417
|
<!-- Footer -->
|
|
375
418
|
{
|
|
376
|
-
|
|
419
|
+
// 优先级：自定义 footer slot > 内置 Footer > 不显示
|
|
420
|
+
Astro.slots.has('footer') ? (
|
|
421
|
+
<slot name="footer" />
|
|
422
|
+
) : showFooter ? (
|
|
377
423
|
<Container
|
|
378
424
|
aria-label="AppLayout-Footer-Container"
|
|
379
425
|
width="full"
|
|
380
426
|
padding="none">
|
|
381
427
|
<Footer {...footerConfig} />
|
|
382
428
|
</Container>
|
|
383
|
-
)
|
|
429
|
+
) : null
|
|
384
430
|
}
|
|
385
431
|
|
|
386
432
|
<!-- 搜索模态框 -->
|