fix(docs): many style issues & link missing
Co-authored-by: 藍+85CD <50108258+kwaa@users.noreply.github.com>
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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: 本页大纲
|
||||
|
||||
Reference in New Issue
Block a user