fix(docs): many style issues & link missing

Co-authored-by: 藍+85CD <50108258+kwaa@users.noreply.github.com>
This commit is contained in:
Neko Ayaka
2025-07-15 23:51:25 +08:00
co-authored by 藍+85CD
parent c983de7f47
commit 17013d1b3f
8 changed files with 81 additions and 13 deletions
+6 -1
View File
@@ -13,6 +13,7 @@ defineProps<{
</script>
<template>
<!-- eslint-disable vue/prefer-separate-static-class -->
<DropdownMenuRoot>
<DropdownMenuTrigger class="text-muted-foreground hover:text-foreground data-[state=open]:text-foreground mx-0 h-full inline-flex items-center justify-between px-2 py-2 text-nowrap text-sm font-semibold md:mx-3 md:px-0">
<slot name="trigger">
@@ -36,7 +37,11 @@ defineProps<{
:initial="{ opacity: 0, y: -10 }"
:animate="{ opacity: 1, y: 0 }"
:exit="{ opacity: 0, y: -10 }"
class="border-muted z-10 border rounded-lg bg-white/60 p-2 shadow-sm backdrop-blur-md transition-shadow duration-200 ease-in-out dark:bg-neutral-800/30 focus:shadow-lg hover:shadow-lg"
class="z-20 border rounded-xl p-2 shadow-md backdrop-blur-md"
:class="[
'bg-white/20 dark:border-white/5 dark:bg-black/20',
'transition-colors duration-200 ease-in-out',
]"
>
<DropdownMenuItem
v-for="item in items"
+24 -3
View File
@@ -22,13 +22,34 @@ const { t } = useI18n()
<div class="relative z-10 w-full flex justify-center gap-4">
<a
href="https://github.com/moeru-ai/airi/releases/latest"
class="rounded-lg bg-primary/60 px-4 py-2 text-slate-100 font-extrabold outline-none backdrop-blur-md dark:bg-primary/30 dark:text-cyan-200 focus:outline-none"
:class="[
'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
'text-slate-700 dark:text-cyan-200',
]"
bg="primary/20 dark:primary/30 dark:hover:primary/40"
transition="colors,transform duration-200 ease-in-out"
>
{{ t('docs.theme.home.try-live.title') }}
</a>
<a
href="https://github.com/moeru-ai/airi/releases/latest"
:class="[
'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
'text-slate-700 dark:text-slate-100',
]"
bg="black/4 dark:white/20 dark:hover:white/30"
transition="colors,transform duration-200 ease-in-out"
>
{{ t('docs.theme.home.download.title') }}
</a>
<a
href="./overview/"
class="rounded-lg bg-white/60 px-4 py-2 text-slate-900 font-extrabold outline-none backdrop-blur-md dark:bg-white/20 dark:text-slate-100 focus:outline-none"
href="./docs/overview/"
:class="[
'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
'text-slate-700 dark:text-slate-100',
]"
bg="black/4 dark:white/20 dark:hover:white/30"
transition="colors,transform duration-200 ease-in-out"
>
{{ t('docs.theme.home.get-started.title') }}
</a>
+22 -4
View File
@@ -31,6 +31,7 @@ function isNavLinkActive(link: string, path: string) {
</script>
<template>
<!-- eslint-disable vue/prefer-separate-static-class -->
<nav class="items-center hidden lg:flex">
<template
v-for="nav in theme.nav"
@@ -92,7 +93,11 @@ function isNavLinkActive(link: string, path: string) {
side="bottom"
:side-offset="5"
align="end"
class="bg-card will-change-[transform,opacity] border-muted data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-sm focus:shadow-lg"
class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
:class="[
'bg-white/20 dark:border-white/5 dark:bg-black/20',
]"
transition="colors duration-200 ease-in-out"
>
<nav class="flex flex-col">
<template
@@ -110,19 +115,32 @@ function isNavLinkActive(link: string, path: string) {
</DropdownMenuItem>
<DropdownMenuSub v-else-if="nav.items">
<DropdownMenuSubTrigger class="text-muted-foreground h-full w-full inline-flex items-center justify-between rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary">
<DropdownMenuSubTrigger
class="text-muted-foreground h-full w-full inline-flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
:class="[
'transition-all duration-200 ease-in-out',
]"
>
<span>{{ nav.text }}</span>
<Icon icon="lucide:chevron-down" class="ml-1 text-lg" />
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent
class="border-muted will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl bg-white/60 p-2 shadow-sm backdrop-blur-md transition-shadow duration-200 ease-in-out dark:bg-neutral-800/30 focus:shadow-lg"
class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
:class="[
'bg-white/20 dark:border-white/5 dark:bg-black/70',
'transition-all duration-200 ease-in-out',
]"
>
<DropdownMenuItem
v-for="item in nav.items"
:key="item.text"
class="text-muted-foreground h-full w-full inline-flex items-center rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
class="text-muted-foreground h-full w-full inline-flex items-center rounded-lg p-2 text-sm font-semibold hover:text-primary"
:class="[
'hover:bg-primary/10',
'transition-all duration-200 ease-in-out',
]"
>
<a
v-if="item.link"
@@ -22,18 +22,34 @@ const languages = computed(() => {
</script>
<template>
<!-- eslint-disable vue/prefer-separate-static-class -->
<DropdownMenuSub>
<DropdownMenuSubTrigger class="text-muted-foreground h-full w-full inline-flex items-center justify-between rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary">
<DropdownMenuSubTrigger
class="text-muted-foreground h-full w-full inline-flex cursor-pointer items-center justify-between rounded-lg p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
:class="[
'transition-all duration-200 ease-in-out',
]"
>
<span>{{ t('docs.theme.navbar.language.title') }}</span>
<Icon icon="lucide:chevron-down" class="ml-1 text-lg" />
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent class="border-muted bg-card will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_green7]">
<DropdownMenuSubContent
class="will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-10 w-[180px] border rounded-xl p-2 shadow-md backdrop-blur-md"
:class="[
'bg-white/20 dark:border-white/5 dark:bg-black/70',
'transition-all duration-200 ease-in-out',
]"
>
<DropdownMenuItem
v-for="item in languages"
:key="item.text"
class="text-muted-foreground h-full w-full inline-flex items-center rounded p-2 text-sm font-semibold hover:bg-primary/10 hover:text-primary"
class="text-muted-foreground h-full w-full inline-flex items-center rounded-lg p-2 text-sm font-semibold hover:text-primary"
:class="[
'hover:bg-primary/10',
'transition-all duration-200 ease-in-out',
]"
>
<a
v-if="item.link"
+2 -2
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { useScroll } from '@vueuse/core'
import { TooltipProvider } from 'reka-ui'
import { useData } from 'vitepress'
import { useData, withBase } from 'vitepress'
import { computed, toRefs, watch } from 'vue'
import { useI18n } from 'vue-i18n'
@@ -36,7 +36,7 @@ watch(lang, () => locale.value = lang.value, { immediate: true })
<div class="mx-auto max-w-[1440px] flex items-center justify-between px-6">
<div class="w-full flex items-center justify-between gap-8 md:justify-normal">
<a
href="/"
:href="withBase(`/${lang}/`)"
class="flex items-center gap-2"
>
<img
+4
View File
@@ -30,6 +30,10 @@
--radius: 0.5rem;
}
[data-reka-popper-content-wrapper=""] {
z-index: 9999 !important;
}
.dark {
--background: 207 15% 5%;
--foreground: 0 0% 95%;
@@ -23,6 +23,8 @@ home:
title: Download
get-started:
title: Get Started
try-live:
title: Try Live
search:
title: Search
placeholder: Search documentation...
@@ -4,6 +4,8 @@ home:
title: 下载
get-started:
title: 教程
try-live:
title: 网页版
doc:
outline:
title: 本页大纲