左侧导航栏修复正常
This commit is contained in:
@@ -3,6 +3,9 @@ export default defineAppConfig({
|
|||||||
colors: {
|
colors: {
|
||||||
primary: 'blue',
|
primary: 'blue',
|
||||||
neutral: 'zinc'
|
neutral: 'zinc'
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
base: 'w-full h-full mx-auto px-2 sm:px-6 lg:px-8'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
uiPro: {
|
uiPro: {
|
||||||
|
@@ -37,8 +37,8 @@
|
|||||||
|
|
||||||
<!-- 可滚动的导航区域 -->
|
<!-- 可滚动的导航区域 -->
|
||||||
<div
|
<div
|
||||||
class="flex-1 scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
|
class=" h-full overflow-y-auto "
|
||||||
style="max-height: calc(100vh - 200px)"
|
|
||||||
>
|
>
|
||||||
|
|
||||||
<!-- 导航 Section -->
|
<!-- 导航 Section -->
|
||||||
@@ -68,18 +68,34 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 文档目录导航 -->
|
<!-- 文档目录导航 -->
|
||||||
<div class="overflow-y-auto" style="max-height: 80%">
|
<div class="mt-6 flex justify-center items-center">
|
||||||
<UContainer>
|
|
||||||
<UPageAside>
|
|
||||||
<UContentNavigation
|
<UContentNavigation
|
||||||
highlight
|
highlight
|
||||||
:navigation="navigation"
|
:navigation="navigation"
|
||||||
color="primary"
|
color="primary"
|
||||||
variant="pill"
|
variant="pill"
|
||||||
:ui="{}"
|
:ui="{
|
||||||
|
root: '',
|
||||||
|
content: '',
|
||||||
|
list: 'group relative -mx-5 -mt-3',
|
||||||
|
item: '',
|
||||||
|
listWithChildren: 'ms-3 border-s border-default',
|
||||||
|
itemWithChildren: 'flex flex-col',
|
||||||
|
trigger: 'font-semibold',
|
||||||
|
link: '',
|
||||||
|
linkLeadingIcon: 'shrink-0 size-5',
|
||||||
|
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||||
|
linkTrailingBadge: 'shrink-0',
|
||||||
|
linkTrailingBadgeSize: 'sm',
|
||||||
|
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
|
||||||
|
linkTitle: '',
|
||||||
|
linkTitleExternalIcon: 'size- align-top text-dimmed'
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
</UPageAside>
|
|
||||||
</UContainer>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@@ -1,12 +1,28 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<UContentNavigation
|
<UContentNavigation
|
||||||
:navigation="directoryNavigation"
|
:navigation="directoryNavigation"
|
||||||
highlight
|
highlight
|
||||||
|
color="primary"
|
||||||
color="primary"
|
variant="pill"
|
||||||
variant="pill"
|
:ui="{
|
||||||
/>
|
root: '',
|
||||||
|
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
|
||||||
|
list: 'isolate -mx-2.5 -mt-1.5',
|
||||||
|
item: '',
|
||||||
|
listWithChildren: 'ms-5 border-s border-default',
|
||||||
|
itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
|
||||||
|
trigger: 'font-semibold',
|
||||||
|
link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
|
||||||
|
linkLeadingIcon: 'shrink-0 size-5',
|
||||||
|
linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
|
||||||
|
linkTrailingBadge: 'shrink-0',
|
||||||
|
linkTrailingBadgeSize: 'sm',
|
||||||
|
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
|
||||||
|
linkTitle: 'truncate',
|
||||||
|
linkTitleExternalIcon: 'size-3 align-top text-dimmed'
|
||||||
|
}"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
22
app/components/content/ButtonLink.vue
Normal file
22
app/components/content/ButtonLink.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<NuxtLink :to="to || href" :target="(blank && '_blank') || target">
|
||||||
|
<UButton :variant="variant" :size="size">
|
||||||
|
<Icon v-if="leftIcon" :name="leftIcon" class="mr-1" />
|
||||||
|
<ContentSlot unwrap="p" />
|
||||||
|
<Icon v-if="rightIcon" :name="rightIcon" class="ml-1" />
|
||||||
|
</UButton>
|
||||||
|
</NuxtLink>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
|
||||||
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
||||||
|
leftIcon?: string;
|
||||||
|
rightIcon?: string;
|
||||||
|
to?: string;
|
||||||
|
href?: string;
|
||||||
|
target?: string;
|
||||||
|
blank?: boolean;
|
||||||
|
}>();
|
||||||
|
</script>
|
38
app/components/content/SmartIcon.vue
Normal file
38
app/components/content/SmartIcon.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<!-- Iconify Icons -->
|
||||||
|
<Icon v-if="isIconName(name)" :name="name" :size="size" />
|
||||||
|
<!-- Emojis -->
|
||||||
|
<span
|
||||||
|
v-else-if="isEmoji(name)"
|
||||||
|
:style="`font-size: ${size}px;`"
|
||||||
|
>{{ name }}</span>
|
||||||
|
<!-- Link -->
|
||||||
|
<NuxtImg
|
||||||
|
v-else
|
||||||
|
:src="name"
|
||||||
|
:style="`width: ${size}px; height: ${size}px;`"
|
||||||
|
class="inline"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { size = 16 } = defineProps<{
|
||||||
|
name: string;
|
||||||
|
size?: number;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
function isIconName(name: string): boolean {
|
||||||
|
if (name.includes('http'))
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// 简单的图标名称检查,以 i- 开头或包含常见图标集
|
||||||
|
return name.startsWith('i-') ||
|
||||||
|
name.includes('lucide') ||
|
||||||
|
name.includes('heroicons') ||
|
||||||
|
name.includes('simple-icons');
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEmoji(name: string): boolean {
|
||||||
|
return /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name);
|
||||||
|
}
|
||||||
|
</script>
|
@@ -9,6 +9,31 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
|
|||||||
|
|
||||||
There are already many websites based on this template:
|
There are already many websites based on this template:
|
||||||
|
|
||||||
|
::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
|
||||||
|
Get Started
|
||||||
|
::
|
||||||
|
::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
||||||
|
GitHub
|
||||||
|
::
|
||||||
|
::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
|
||||||
|
Ghost
|
||||||
|
::
|
||||||
|
|
||||||
|
::steps{level="4"}
|
||||||
|
#### Start a fresh new project
|
||||||
|
|
||||||
|
```bash [Terminal]
|
||||||
|
npx nuxi init -t github:nuxt-ui-pro/docus
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Run docus CLI to run your dev server
|
||||||
|
|
||||||
|
```bash [Terminal]
|
||||||
|
docus dev
|
||||||
|
```
|
||||||
|
::
|
||||||
|
|
||||||
|
|
||||||
::card-group
|
::card-group
|
||||||
:::card
|
:::card
|
||||||
---
|
---
|
||||||
|
Reference in New Issue
Block a user