estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

准备修复一些控制台警告

Browse Source
This commit is contained in:
estel
2025-07-25 23:47:01 +08:00
parent c84992cf87
commit e6e27c8ccf
10 changed files with 180 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/AppHeader.vue
View File

@@ -27,7 +27,7 @@ const handleLoginRegister = (type: "login" | "register") => {
</script>
<template>
<Uheader
<Header
class="header bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50"
>
<div class="px-2 sm:px-4 lg:px-6">
@@ -67,7 +67,7 @@ const handleLoginRegister = (type: "login" | "register") => {
</svg>
</button>
<UContentSearchButton v-if="header?.search" class="lg:hidden" />
<UContentSearchButton class="lg:hidden" />
<div class="ml-auto flex items-center space-x-2">
<UColorModeSwitch />
@@ -117,7 +117,7 @@ const handleLoginRegister = (type: "login" | "register") => {
</div>
<!-- Theme Settings Panel -->
<ThemeSettings :is-open="isSettingsOpen" @close="isSettingsOpen = false" />
</Uheader>
</Header>
<!-- 登录模态框 -->
<UModal v-model:open="isLoginModalOpen" title="登录" :dismissible="false">

52
app/components/AppSidebar.vue
View File

@@ -1,20 +1,15 @@
<template>
<aside
class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden"
>
class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden">
<!-- Logo -->
<div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
<!-- Logo and Site Name -->
<div class="h-8">
<NuxtLink to="/" class="flex items-center space-x-3">
<div
class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md"
>
<div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
<span class="text-white font-bold text-lg">E</span>
</div>
<span class="text-lg font-bold text-gray-800 dark:text-white"
>简单文档</span
>
<span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
<TemplateMenu />
</NuxtLink>
</div>
@@ -23,35 +18,23 @@
<!-- Search Box -->
<div class="p-4 border-gray-200 dark:border-gray-700">
<ClientOnly>
<UContentSearchButton
v-if="header?.search"
:collapsed="false"
loading="true"
label="搜索文档"
description="请输入关键词"
class="w-full"
color="primary"
/>
<UContentSearchButton :collapsed="false" loading="true" label="搜索文档" description="请输入关键词" class="w-full"
color="primary" />
</ClientOnly>
</div>
<!-- 可滚动的导航区域 -->
<div
class=" h-full overflow-y-auto "
>
<div class=" h-full overflow-y-auto ">
<!-- 导航 Section -->
<div>
<NuxtLink
to="/"
<NuxtLink to="/"
class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
:class="{
'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
$route.path === '/',
}"
>
}">
<Icon name="lucide-home" class="text-primary mr-2" size="20" />
站点首页
</NuxtLink>
@@ -63,21 +46,13 @@
</div>
<!-- 分隔线 -->
<div
class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5"
/>
<div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
<!-- 文档目录导航 -->
<div class="mt-6 flex items-center justify-start pl-8 w-4/5">
<UContentNavigation
highlight
:navigation="navigation"
color="primary"
type="single"
variant="pill"
:ui="{
<NuxtLink>
<UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" :ui="{
root: '',
content: '',
list: 'group relative -mx-5 -mt-3',
@@ -93,9 +68,8 @@
linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-90',
linkTitle: '',
linkTitleExternalIcon: 'size- align-top text-dimmed'
}"
/>
}" />
</NuxtLink>
</div>

17
app/components/ContentDirectory.vue
View File

@@ -5,23 +5,6 @@
highlight
color="primary"
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>
</template>

18
app/components/content/ProseH1.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
<NuxtLink
v-if="generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h1>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)));
</script>

18
app/components/content/ProseH2.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
<NuxtLink
v-if="id && generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h2>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)));
</script>

18
app/components/content/ProseH3.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
<NuxtLink
v-if="id && generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h3>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)));
</script>

18
app/components/content/ProseH4.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
<NuxtLink
v-if="id && generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h4>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)));
</script>

18
app/components/content/ProseH5.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
<NuxtLink
v-if="id && generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h5>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)));
</script>

18
app/components/content/ProseH6.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
<NuxtLink
v-if="id && generate"
:to="`#${id}`"
>
<slot />
</NuxtLink>
<slot v-else />
</h6>
</template>
<script setup lang="ts">
const { id } = defineProps<{ id?: string }>();
const { headings } = useRuntimeConfig().public.mdc;
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)));
</script>

138
content/1.简单文档/3.usage.md
View File

@@ -1,127 +1,35 @@
---
title: Usage
title: 进行测试
description: Learn how to write and customize your documentation.
navigation:
icon: i-lucide-sliders
---
This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
::tip
---
target: _blank
to: https://ui.nuxt.com/getting-started/installation/pro/nuxt
---
Learn more on how to take the most out of Nuxt UI Pro!
# 这是一个H1标签
## 这是一个H2标签
### 这是一个H3标签
#### 这是一个H4标签
##### 这是一个H5标签
###### 这是一个H6标签
::field{name="Field" type="string" defaultValue="'default'" required}
The _description_ can be set as prop or in the default slot with full **markdown** support.
::
## Writing content
You can just start writing `.md` or `.yml` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. The navigation will be automatically generated in the left aside and in the mobile menu. You will also be able to go through your content with full-text search.
## App Configuration
In addition to `@nuxt/ui-pro` configuration through the `app.config.ts`, this template lets you customize the `Header`, `Footer` and the `Table of contents` components.
### Header
```ts [app.config.ts]
export default defineAppConfig({
header: {
title: '',
to: '/',
// Logo configuration
logo: {
alt: '',
// Light mode
light: '',
// Dark mode
dark: ''
},
// Show or hide the search bar
search: true,
// Show or hide the color mode button
colorMode: true,
// Customize links
links: [{
'icon': 'i-simple-icons-github',
'to': 'https://github.com/nuxt-ui-pro/docs',
'target': '_blank',
'aria-label': 'GitHub'
}]
},
})
```
### Footer
```ts [app.config.ts]
export default defineAppConfig({
footer: {
// Update bottom left credits
credits: `Copyright © ${new Date().getFullYear()}`,
// Show or hide the color mode button
colorMode: false,
// Customize links
links: [{
'icon': 'i-simple-icons-nuxtdotjs',
'to': 'https://nuxt.com',
'target': '_blank',
'aria-label': 'Nuxt Website'
}, {
'icon': 'i-simple-icons-discord',
'to': 'https://discord.com/invite/ps2h6QT',
'target': '_blank',
'aria-label': 'Nuxt UI on Discord'
}, {
'icon': 'i-simple-icons-x',
'to': 'https://x.com/nuxt_js',
'target': '_blank',
'aria-label': 'Nuxt on X'
}, {
'icon': 'i-simple-icons-github',
'to': 'https://github.com/nuxt/ui',
'target': '_blank',
'aria-label': 'Nuxt UI on GitHub'
}]
},
})
```
### Table of contents
```ts [app.config.ts]
export default defineAppConfig({
toc: {
// Title of the main table of contents
title: 'Table of Contents',
// Customize links
bottom: {
// Title of the bottom table of contents
title: 'Community',
// URL of your repository content folder
edit: 'https://github.com/nuxt-ui-pro/docs/edit/main/content',
links: [{
icon: 'i-lucide-star',
label: 'Star on GitHub',
to: 'https://github.com/nuxt/ui',
target: '_blank'
}, {
icon: 'i-lucide-book-open',
label: 'Nuxt UI Pro docs',
to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
target: '_blank'
}, {
icon: 'i-simple-icons-nuxtdotjs',
label: 'Purchase a license',
to: 'https://ui.nuxt.com/pro/purchase',
target: '_blank'
}]
}
}
})
```
::tip{target="_blank" to="https://content.nuxt.com/docs/studio/config"}
This template integrates with Nuxt Studio, providing a visual interface for editing your documentation - perfect for non-technical contributors.
::