refactor(docs/home): 重构首页导航和文档结构

- README 新增架构图(明暗主题 SVG),更新 Proxy 描述
- 首页导航栏将"文档"链接从底部按钮区移至顶部导航
- 删除独立的 body-rules-spec 文档
- GuideLayout 路由切换时自动滚动到顶部
- 架构图组件移除网格背景
This commit is contained in:
fawney19
2026-02-24 12:15:14 +08:00
parent 837bed3d47
commit 39b036abd5
7 changed files with 270 additions and 277 deletions

View File

@@ -111,11 +111,11 @@
</div>
<!-- Navigation -->
<nav class="flex items-center gap-2 mx-16 lg:mx-28">
<nav class="flex items-center gap-2 mx-8 lg:mx-16">
<button
v-for="(section, index) in sections"
v-for="(section, index) in sections.slice(0, -1)"
:key="index"
class="group relative px-3 py-2 text-sm font-medium transition"
class="group relative px-3 py-2 text-sm font-medium transition whitespace-nowrap"
:class="currentSection === index
? 'text-[#cc785c] dark:text-[#d4a27f]'
: 'text-[#666663] dark:text-muted-foreground hover:text-[#191919] dark:hover:text-white'"
@@ -127,6 +127,25 @@
:class="currentSection === index ? 'bg-[#cc785c] dark:bg-[#d4a27f] scale-x-100' : 'bg-transparent scale-x-0'"
/>
</button>
<RouterLink
to="/guide"
class="group relative px-3 py-2 text-sm font-medium transition whitespace-nowrap text-[#666663] dark:text-muted-foreground hover:text-[#191919] dark:hover:text-white"
>
文档
</RouterLink>
<button
class="group relative px-3 py-2 text-sm font-medium transition whitespace-nowrap"
:class="currentSection === SECTIONS.FEATURES
? 'text-[#cc785c] dark:text-[#d4a27f]'
: 'text-[#666663] dark:text-muted-foreground hover:text-[#191919] dark:hover:text-white'"
@click="scrollToSection(SECTIONS.FEATURES)"
>
{{ sections[SECTIONS.FEATURES].name }}
<div
class="absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-300"
:class="currentSection === SECTIONS.FEATURES ? 'bg-[#cc785c] dark:bg-[#d4a27f] scale-x-100' : 'bg-transparent scale-x-0'"
/>
</button>
</nav>
<!-- Login/Dashboard Button -->
@@ -408,13 +427,6 @@
class="mt-6 md:mt-12 transition-all duration-700 flex items-center justify-center gap-4 relative z-30"
:style="getButtonsStyle(SECTIONS.FEATURES)"
>
<RouterLink
to="/guide"
class="inline-flex items-center justify-center gap-2 rounded-xl bg-transparent border-2 border-[#cc785c] px-6 py-3 text-base font-semibold text-[#cc785c] dark:text-[#d4a27f] dark:border-[#d4a27f] transition hover:bg-[#cc785c]/10 dark:hover:bg-[#d4a27f]/10 hover:scale-105 w-[160px]"
>
<BookOpen class="h-5 w-5" />
配置教程
</RouterLink>
<RouterLink
v-if="authStore.isAuthenticated"
:to="dashboardPath"
@@ -444,7 +456,6 @@
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { RouterLink } from 'vue-router'
import {
BookOpen,
ChevronDown,
Code2,
Moon,

View File

@@ -409,6 +409,10 @@ watch(
() => {
mobileMenuOpen.value = false
activeHash.value = ''
const container = getScrollContainer()
if (container) {
container.scrollTo({ top: 0 })
}
nextTick(() => {
setupIntersectionObserver()
const firstSection = document.querySelector('article section[id]')

View File

@@ -34,7 +34,6 @@ const colors = computed(() => {
const brand = '#cc7154'
return {
bg: isDark.value ? '#121212' : '#fcfcfc',
grid: isDark.value ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)',
cardBg: isDark.value ? '#1a1a1c' : '#ffffff',
cardBorder: isDark.value ? '#2a2a2c' : '#e8e8ec',
track: isDark.value ? 'rgba(255,255,255,0.08)' : '#e5e7eb',
@@ -98,8 +97,6 @@ const shadows = computed(() => {
:style="{
backgroundColor: colors.bg,
borderColor: colors.cardBorder,
backgroundImage: `radial-gradient(${colors.grid} 1px, transparent 1px)`,
backgroundSize: '20px 20px',
transform: `scale(${scale})`,
transformOrigin: 'top left',
marginLeft: `${offsetLeft}px`,