Skip to content

Commit ec93670

Browse files
honghuangdchonghuangdc
committed
feat(docs): enhance header navigation and search functionality with new components
1 parent 199bc04 commit ec93670

File tree

13 files changed

+181
-178
lines changed

13 files changed

+181
-178
lines changed

‎docs/locales/en.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,15 @@ layout:
2020
home: Home Layout
2121
about: About Layout
2222
header:
23-
search: Search documentation...
23+
search: Search documentation
24+
search-empty: No related documents found
2425
docs: Docs
2526
components: Components
2627
version: Version
2728
github: GitHub
28-
theme_language: Theme / Language
29+
theme: Theme
30+
language: Language
31+
others: Others
2932
components:
3033
common:
3134
demo: Demos

‎docs/locales/zh-CN.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,15 @@ layout:
2020
home: 首页布局
2121
about: 关于布局
2222
header:
23-
search: 搜索文档...
23+
search: 搜索文档
24+
search-empty: 没有找到相关文档
2425
docs: 文档
2526
components: 组件
2627
version: 版本
2728
github: GitHub
28-
theme_language: 主题 / 语言
29+
theme: 主题
30+
language: 语言
31+
others: 其他
2932
components:
3033
common:
3134
demo: 演示

‎docs/src/components/app-header.vue‎

Lines changed: 23 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,50 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
3-
import { useRouter } from 'vue-router';
4-
import { SButton, SDrawer, SIcon } from '@soybeanjs/ui';
2+
import { shallowRef } from 'vue';
53
import { useI18n } from 'vue-i18n';
64
import pkg from '../../package.json' with { type: 'json' };
75
import ToolBar from './tool-bar.vue';
86
9-
const router = useRouter();
107
const { t } = useI18n();
11-
const drawerVisible = ref(false);
128
13-
function goHome() {
14-
router.push('/');
15-
}
9+
const drawerVisible = shallowRef(false);
1610
</script>
1711

1812
<template>
1913
<header
2014
class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50 transition-all duration-300"
2115
>
2216
<div class="flex items-center justify-between px-6 py-3 max-w-[1440px] mx-auto h-full">
23-
<!-- Left Section: Logo, Title, Search -->
2417
<div class="flex items-center gap-8">
25-
<!-- Logo & Title -->
26-
<div class="flex items-center gap-3 cursor-pointer group" @click="goHome">
18+
<SLink to="/" class="group flex items-center gap-3">
2719
<img src="/logo.svg" alt="Logo" class="size-8 transition-transform duration-300 group-hover:scale-110" />
2820
<h1
29-
class="text-lg font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-primary dark:from-primary dark:to-primary-300 hidden sm:block"
21+
class="text-lg font-bold bg-clip-text text-transparent whitespace-nowrap bg-gradient-to-r from-primary-600 to-primary dark:from-primary dark:to-primary-300"
3022
>
3123
{{ t('components.home.title') }}
3224
</h1>
33-
</div>
34-
35-
<!-- Search Box (Placeholder) -->
36-
<div
37-
class="hidden md:flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-400 dark:text-gray-500 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors w-64"
38-
>
39-
<SIcon icon="lucide:search" class="text-base" />
40-
<span>{{ t('layout.header.search') }}</span>
41-
<span class="ml-auto text-xs border border-gray-300 dark:border-gray-600 rounded px-1">⌘K</span>
42-
</div>
43-
</div>
44-
45-
<!-- Right Section: Menu, Version, Tools -->
46-
<div class="flex items-center gap-6">
47-
<!-- Desktop Navigation -->
48-
<nav class="hidden md:flex items-center gap-6">
49-
<a
50-
href="#"
51-
class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
52-
>
53-
{{ t('layout.header.docs') }}
54-
</a>
55-
<RouterLink
56-
to="/components/button"
57-
class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
58-
active-class="text-primary dark:text-primary font-semibold"
59-
>
60-
{{ t('layout.header.components') }}
61-
</RouterLink>
62-
</nav>
63-
64-
<!-- Version -->
65-
<div
66-
class="hidden md:block text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
67-
>
68-
{{ pkg.version }}
69-
</div>
70-
71-
<!-- Tools -->
72-
<div class="hidden md:flex items-center gap-2 pl-2 border-l border-gray-200 dark:border-gray-800">
73-
<a
74-
href="https://github.com/soybeanjs/soybean-ui"
75-
target="_blank"
76-
rel="noopener noreferrer"
77-
class="p-2 text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
78-
>
79-
<SIcon icon="mdi:github" class="text-xl" />
80-
</a>
81-
<ToolBar />
82-
</div>
83-
84-
<!-- Mobile Menu Toggle -->
85-
<div class="md:!hidden flex items-center gap-2">
86-
<SButton variant="ghost" class="!p-2 size-9 rounded-full" @click="drawerVisible = true">
87-
<SIcon icon="lucide:menu" class="text-xl" />
88-
</SButton>
89-
</div>
25+
</SLink>
26+
<SearchDocument class="lt-md:!hidden [&_.placeholder]:lt-lg:hidden" />
9027
</div>
91-
</div>
92-
93-
<!-- Mobile Drawer -->
94-
<SDrawer v-model:open="drawerVisible" placement="right" class="w-64 p-4">
95-
<div class="flex flex-col gap-6 mt-6">
96-
<!-- Mobile Search -->
97-
<div
98-
class="flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-400 dark:text-gray-500 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
99-
>
100-
<SIcon icon="lucide:search" class="text-base" />
101-
<span>{{ t('layout.header.search') }}</span>
102-
</div>
103-
104-
<!-- Mobile Navigation -->
105-
<nav class="flex flex-col gap-4">
106-
<a
107-
href="#"
108-
class="text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
109-
>
110-
{{ t('layout.header.docs') }}
111-
</a>
112-
<RouterLink
113-
to="/components/button"
114-
class="text-base font-medium text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
115-
active-class="text-primary dark:text-primary font-semibold"
116-
@click="drawerVisible = false"
117-
>
118-
{{ t('layout.header.components') }}
119-
</RouterLink>
120-
</nav>
12128

122-
<div class="h-px bg-gray-200 dark:bg-gray-800 my-2"></div>
123-
124-
<!-- Mobile Tools -->
125-
<div class="flex flex-col gap-4">
126-
<div class="flex items-center justify-between">
127-
<span class="text-sm text-gray-500">{{ t('layout.header.version') }}</span>
128-
<span
129-
class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-full"
130-
>
131-
v0.0.1
132-
</span>
133-
</div>
134-
<div class="flex items-center justify-between">
135-
<span class="text-sm text-gray-500">{{ t('layout.header.github') }}</span>
136-
<a
137-
href="https://github.com/soybeanjs/soybean-ui"
138-
target="_blank"
139-
rel="noopener noreferrer"
140-
class="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary transition-colors"
141-
>
142-
<SIcon icon="mdi:github" class="text-xl" />
143-
</a>
144-
</div>
145-
<div class="flex items-center justify-between">
146-
<span class="text-sm text-gray-500">{{ t('layout.header.theme_language') }}</span>
29+
<div class="flex items-center gap-4">
30+
<HeaderNav class="lt-md:!hidden" />
31+
<STag size="lg" variant="soft" color="carbon" shape="rounded" class="lt-md:!hidden">v{{ pkg.version }}</STag>
32+
<SSeparator orientation="vertical" class="h-8 lt-md:!hidden" />
33+
<ToolBar class="lt-md:!hidden" />
34+
35+
<!-- Mobile Drawer -->
36+
<SDrawer v-model:open="drawerVisible" placement="right">
37+
<template #trigger>
38+
<SButtonIcon icon="lucide:menu" class="md:!hidden text-xl" />
39+
</template>
40+
<div class="flex flex-col gap-4 pt-4">
41+
<SearchDocument data-mobile class="w-full" />
42+
<HeaderNav orientation="vertical" />
43+
<SSeparator />
14744
<ToolBar />
14845
</div>
149-
</div>
46+
</SDrawer>
15047
</div>
151-
</SDrawer>
48+
</div>
15249
</header>
15350
</template>

‎docs/src/components/header-nav.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue';
3+
import type { DataOrientation, NavigationMenuOptionData } from '@soybeanjs/ui';
4+
5+
interface Props {
6+
orientation?: DataOrientation;
7+
}
8+
9+
const props = withDefaults(defineProps<Props>(), {
10+
orientation: 'horizontal'
11+
});
12+
13+
const { t } = useI18n();
14+
15+
const menus = computed<NavigationMenuOptionData[]>(() => [
16+
{
17+
value: 'docs',
18+
label: t('layout.header.docs'),
19+
icon: 'lucide:book-open',
20+
linkProps: {
21+
href: '#',
22+
target: '_self',
23+
activeClass: 'text-primary font-semibold dark:text-primary'
24+
}
25+
},
26+
{
27+
value: 'components',
28+
label: t('layout.header.components'),
29+
icon: 'lucide:layout-grid',
30+
linkProps: {
31+
to: '/components/button',
32+
activeClass: 'text-primary font-semibold dark:text-primary'
33+
}
34+
}
35+
]);
36+
</script>
37+
38+
<template>
39+
<SNavigationMenu
40+
:items="menus"
41+
:ui="{ list: props.orientation === 'vertical' ? 'flex-col items-start' : 'flex-row' }"
42+
/>
43+
</template>

‎docs/src/components/search-document.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script setup lang="ts">
2+
import { computed, shallowRef, useAttrs, watch } from 'vue';
3+
import { useMagicKeys } from '@vueuse/core';
4+
import type { CommandOptionData } from '@soybeanjs/ui';
5+
6+
defineOptions({
7+
name: 'SearchDocument',
8+
inheritAttrs: false
9+
});
10+
11+
const attrs = useAttrs();
12+
const { t } = useI18n();
13+
const keys = useMagicKeys();
14+
15+
const search = shallowRef('');
16+
17+
const searched = shallowRef<CommandOptionData[]>([]);
18+
19+
const searchOpen = shallowRef(false);
20+
21+
const CmdK = computed(() => keys['Cmd+K']?.value);
22+
23+
function handleOpenChange() {
24+
searchOpen.value = !searchOpen.value;
25+
}
26+
27+
watch(CmdK, v => {
28+
if (v) {
29+
handleOpenChange();
30+
}
31+
});
32+
</script>
33+
34+
<template>
35+
<SDialogPure v-model:open="searchOpen">
36+
<template #trigger>
37+
<div
38+
v-bind="attrs"
39+
class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-800 rounded-lg text-gray-400 dark:text-gray-500 text-sm cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
40+
>
41+
<SIcon icon="lucide:search" class="text-base" />
42+
<span class="placeholder">{{ t('layout.header.search') }}</span>
43+
<SKbd :value="['command', 'k']" class="ml-auto" />
44+
</div>
45+
</template>
46+
47+
<SCommand
48+
v-model:search-term="search"
49+
class="border rounded-lg shadow-md"
50+
:items="searched"
51+
:input-props="{ placeholder: t('layout.header.search') }"
52+
:empty-label="t('layout.header.search-empty')"
53+
/>
54+
</SDialogPure>
55+
</template>

‎docs/src/components/tool-bar.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
1-
<script setup lang="ts"></script>
1+
<script setup lang="ts">
2+
const { t } = useI18n();
3+
</script>
24

35
<template>
4-
<div class="flex items-center gap-2">
5-
<LocaleToggler />
6-
<ThemeSchemaToggler />
6+
<div class="flex gap-4 lt-md:flex-col">
7+
<div class="flex-y-center lt-md:justify-between">
8+
<span class="md:hidden text-sm text-gray-500">{{ t('layout.header.github') }}</span>
9+
<SLink href="https://github.com/soybeanjs/soybean-ui">
10+
<SButtonIcon icon="mdi:github" size="lg" />
11+
</SLink>
12+
</div>
13+
<div class="flex-y-center lt-md:justify-between">
14+
<span class="md:hidden text-sm text-gray-500">{{ t('layout.header.language') }}</span>
15+
<LocaleToggler />
16+
</div>
17+
<div class="flex-y-center lt-md:justify-between">
18+
<span class="md:hidden text-sm text-gray-500">{{ t('layout.header.theme') }}</span>
19+
<ThemeSchemaToggler />
20+
</div>
721
</div>
822
</template>

‎docs/src/layouts/404.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ useHead({
1515
</script>
1616

1717
<template>
18-
<div class="h-full p-4">
18+
<div class="h-full p-4 text-sm">
1919
<SCard :title="t('not-found')" class="h-full">
2020
<template #extra>
2121
<ToolBar />

‎docs/src/layouts/blank.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="h-full w-full">
2+
<div class="h-full w-full text-sm">
33
<RouterView />
44
</div>
55
</template>

‎docs/src/layouts/default.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ useHead({
88
</script>
99

1010
<template>
11-
<div class="h-full pt-16 p-4">
11+
<div class="h-full pt-16 p-4 text-sm">
1212
<AppHeader />
1313
<SCard :title="t('layout.default')" class="h-full">
1414
<RouterView />

‎docs/src/pages/home.vue‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)