From 711f39dbd1cc73d7bd2b62debe76a60e4462784b Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Thu, 4 Jun 2026 21:07:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E8=AE=BE=E8=AE=A1=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=AA=81=E5=87=BA=20Harness=20=E4=B8=8E=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=BA=93=E5=8D=8F=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hero 区改版：氛围背景光晕+渐隐网格，右侧玻璃卡片可视化
- 右侧改为 Harness → RAG 引擎 → 知识库 横向数据流，中间枢纽带脉冲环、双向光点对流
- 统计改用实时 GitHub 数据（Stars/Forks/Issues），不再依赖 branding 配置
- 移除 info.template.yaml 的 features/actions 及 store 中对应 getter
- 「查看文档」升级为次按钮，左侧内容顶部对齐微调
---
 .../yuxi/config/static/info.template.yaml     |   34 -
 web/src/stores/info.js                        |    7 -
 web/src/views/HomeView.vue                    | 1183 +++++++++--------
 3 files changed, 622 insertions(+), 602 deletions(-)

diff --git a/backend/package/yuxi/config/static/info.template.yaml b/backend/package/yuxi/config/static/info.template.yaml
index 191a945b..65665e01 100644
--- a/backend/package/yuxi/config/static/info.template.yaml
+++ b/backend/package/yuxi/config/static/info.template.yaml
@@ -20,40 +20,6 @@ branding:
     - "让智能体可落地，让流程可编排，让协作可扩展"
     - "让数据可沉淀，让能力可复用，让系统可进化"
 
-features:
-  - label: "GitHub Stars"
-    value: "4800+"
-    description: "开发者社区的认可与支持"
-    icon: "stars"
-  - label: "已解决 Issues"
-    value: "300+"
-    description: "持续改进和问题解决能力"
-    icon: "issues"
-  - label: "累计 Commits"
-    value: "1600+"
-    description: "活跃的开发迭代和功能更新"
-    icon: "commits"
-  - label: "开源协议"
-    value: "MIT License"
-    description: "完全免费，支持商业使用"
-    icon: "license"
-
-actions:
-  - name: "演示视频"
-    icon: "video"
-    url: "https://www.bilibili.com/video/BV1DF14BTETq"
-  - name: "文档中心"
-    icon: "docs"
-    url: "https://xerrors.github.io/Yuxi/"
-  - name: "提交 Issue"
-    icon: "issue"
-    url: "https://github.com/xerrors/Yuxi/issues/new/choose"
-  - name: "开发路线图"
-    icon: "roadmap"
-    url: "https://xerrors.github.io/Yuxi/develop-guides/roadmap.html"
-
-
-
 # 页脚信息
 footer:
   copyright: "© 江南语析 2026 v{{YUXI_VERSION}}"
diff --git a/web/src/stores/info.js b/web/src/stores/info.js
index df048ab3..c8c6df0d 100644
--- a/web/src/stores/info.js
+++ b/web/src/stores/info.js
@@ -30,11 +30,6 @@ export const useInfoStore = defineStore('info', () => {
       }
   )
 
-  // 计算属性 - 功能特性
-  const features = computed(() => infoConfig.value.features || [])
-
-  const actions = computed(() => infoConfig.value.actions || [])
-
   // 计算属性 - 页脚信息
   const footer = computed(() => ({
     copyright: '',
@@ -89,9 +84,7 @@ export const useInfoStore = defineStore('info', () => {
     // 计算属性
     organization,
     branding,
-    features,
     footer,
-    actions,
 
     // 方法
     toggleDebugMode,
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 4714d8b3..c313d0b1 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -18,34 +18,47 @@
 
     <!-- 正常内容 -->
     <template v-else>
-      <div class="hero-section">
-        <div class="glass-header">
-          <div class="logo">
-            <img
-              :src="infoStore.organization.logo"
-              :alt="infoStore.organization.name"
-              class="logo-img"
-            />
-            <span class="logo-text">{{ infoStore.organization.name }}</span>
-          </div>
-          <div class="header-actions">
-            <div class="github-link">
-              <a href="https://github.com/xerrors/Yuxi" target="_blank">
-                <svg height="20" width="20" viewBox="0 0 16 16" version="1.1">
-                  <path
-                    fill-rule="evenodd"
-                    d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
-                  ></path>
-                </svg>
-              </a>
-            </div>
-            <UserInfoComponent :show-button="true" />
-          </div>
-        </div>
+      <!-- 氛围装饰背景 -->
+      <div class="ambient" aria-hidden="true">
+        <span class="orb orb-1"></span>
+        <span class="orb orb-2"></span>
+        <span class="orb orb-3"></span>
+        <div class="grid-mesh"></div>
+      </div>
 
+      <header class="glass-header">
+        <div class="logo">
+          <img
+            :src="infoStore.organization.logo"
+            :alt="infoStore.organization.name"
+            class="logo-img"
+          />
+          <span class="logo-text">{{ infoStore.organization.name }}</span>
+        </div>
+        <div class="header-actions">
+          <a
+            class="github-link"
+            href="https://github.com/xerrors/Yuxi"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="GitHub"
+          >
+            <svg height="20" width="20" viewBox="0 0 16 16" version="1.1">
+              <path
+                fill-rule="evenodd"
+                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+              ></path>
+            </svg>
+          </a>
+          <UserInfoComponent :show-button="true" />
+        </div>
+      </header>
+
+      <main class="hero-section">
         <div class="hero-layout">
           <div class="hero-content reveal-up">
             <p v-if="typedBadge" class="hero-badge" :class="{ typing: isBadgeTyping }">
+              <span class="badge-dot"></span>
               <template v-if="badgeParts.number">
                 <span>{{ badgeParts.prefix }}</span>
                 <a
@@ -66,54 +79,120 @@
                 {{ currentSubtitle }}
               </p>
             </Transition>
-            <!-- <p class="description">{{ infoStore.branding.description }}</p> -->
-            <div class="hero-actions">
-              <button class="button-base primary" @click="goToChat">开始体验</button>
-              <a class="doc-text-link" href="https://xerrors.github.io/Yuxi/" target="_blank"
-                >查看文档</a
+            <div class="hero-actions reveal-up delay-2">
+              <button class="button-base primary" @click="goToChat">
+                <span>开始体验</span>
+                <ArrowRight :size="18" />
+              </button>
+              <a
+                class="button-base secondary"
+                href="https://xerrors.github.io/Yuxi/"
+                target="_blank"
+                rel="noopener noreferrer"
               >
+                <BookText :size="18" />
+                <span>查看文档</span>
+              </a>
             </div>
           </div>
-          <div class="insight-panel" v-if="featureCards.length">
-            <div
-              class="stat-card"
-              v-for="(card, index) in featureCards"
-              :key="card.label"
-              :style="{ '--card-stagger': `${index}` }"
-            >
-              <div class="stat-headline">
-                <span class="stat-icon" v-if="card.icon">
-                  <component :is="card.icon" />
-                </span>
-                <p class="stat-value">{{ card.value }}</p>
-              </div>
-              <p class="stat-label">{{ card.label }}</p>
-              <p class="stat-description">{{ card.description }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <div class="section action-section" v-if="actionLinks.length">
-        <div class="action-grid">
-          <a
-            v-for="action in actionLinks"
-            :key="action.name"
-            class="action-card"
-            :href="action.url"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span class="action-icon" v-if="action.icon">
-              <component :is="action.icon" />
-            </span>
-            <div class="action-meta">
-              <p class="action-title">{{ action.name }}</p>
-              <p class="action-url">{{ action.url }}</p>
+          <aside class="hero-visual reveal-up delay-1">
+            <div class="visual-card">
+              <div class="visual-glow" aria-hidden="true"></div>
+              <svg
+                class="graph-watermark"
+                viewBox="0 0 240 200"
+                fill="none"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g stroke="currentColor" stroke-width="2">
+                  <line x1="120" y1="100" x2="48" y2="44" />
+                  <line x1="120" y1="100" x2="200" y2="56" />
+                  <line x1="120" y1="100" x2="56" y2="156" />
+                  <line x1="120" y1="100" x2="180" y2="150" />
+                  <line x1="48" y1="44" x2="200" y2="56" />
+                </g>
+                <g fill="currentColor">
+                  <circle cx="120" cy="100" r="11" />
+                  <circle cx="48" cy="44" r="7" />
+                  <circle cx="200" cy="56" r="8" />
+                  <circle cx="56" cy="156" r="6" />
+                  <circle cx="180" cy="150" r="9" />
+                </g>
+              </svg>
+
+              <div class="flow-diagram">
+                <div class="flow-row">
+                  <div class="flow-node">
+                    <span class="flow-icon"><Workflow :size="22" /></span>
+                    <span class="flow-name">智能体 Harness</span>
+                  </div>
+
+                  <div class="flow-link" aria-hidden="true">
+                    <span class="flow-rail"></span>
+                    <span
+                      class="flow-dot flow-dot--fwd"
+                      v-for="n in 2"
+                      :key="`f1${n}`"
+                      :style="{ '--i': n - 1 }"
+                    ></span>
+                    <span
+                      class="flow-dot flow-dot--back"
+                      v-for="n in 2"
+                      :key="`b1${n}`"
+                      :style="{ '--i': n - 1 }"
+                    ></span>
+                  </div>
+
+                  <div class="flow-node flow-node--hub">
+                    <span class="flow-icon flow-icon--hub">
+                      <span class="hub-ring"></span>
+                      <Sparkles :size="24" />
+                    </span>
+                    <span class="flow-name">RAG 引擎</span>
+                  </div>
+
+                  <div class="flow-link" aria-hidden="true">
+                    <span class="flow-rail"></span>
+                    <span
+                      class="flow-dot flow-dot--fwd"
+                      v-for="n in 2"
+                      :key="`f2${n}`"
+                      :style="{ '--i': n - 1 }"
+                    ></span>
+                    <span
+                      class="flow-dot flow-dot--back"
+                      v-for="n in 2"
+                      :key="`b2${n}`"
+                      :style="{ '--i': n - 1 }"
+                    ></span>
+                  </div>
+
+                  <div class="flow-node">
+                    <span class="flow-icon"><Library :size="22" /></span>
+                    <span class="flow-name">知识库</span>
+                  </div>
+                </div>
+
+                <p class="flow-caption">
+                  智能体发起检索 · 引擎融合向量与图谱 · 召回知识增强生成
+                </p>
+              </div>
+
+              <div class="stat-row" v-if="realtimeStats.length">
+                <div class="stat-item" v-for="stat in realtimeStats" :key="stat.key">
+                  <span class="stat-item-value">
+                    <component :is="stat.icon" :size="15" />
+                    {{ stat.value }}
+                  </span>
+                  <span class="stat-item-label">{{ stat.label }}</span>
+                </div>
+              </div>
             </div>
-          </a>
+          </aside>
         </div>
-      </div>
+      </main>
 
       <footer class="footer">
         <div class="footer-content">
@@ -135,14 +214,13 @@ import { healthApi } from '@/apis/system_api'
 import UserInfoComponent from '@/components/UserInfoComponent.vue'
 import {
   BookText,
-  Bug,
-  Video,
-  Route,
-  Github,
   Star,
-  CheckCircle2,
-  GitCommit,
-  ShieldCheck
+  GitFork,
+  CircleDot,
+  ArrowRight,
+  Workflow,
+  Library,
+  Sparkles
 } from 'lucide-vue-next'
 
 const router = useRouter()
@@ -156,6 +234,7 @@ const isLoading = ref(true)
 const error = ref(null)
 const typedBadge = ref('')
 const isBadgeTyping = ref(false)
+const githubStats = ref(null)
 let badgeTimer = null
 let subtitleTimer = null
 let starsFetchController = null
@@ -233,7 +312,7 @@ const stopStarsFetch = () => {
   }
 }
 
-const fetchGithubStars = async () => {
+const fetchGithubRepo = async () => {
   stopStarsFetch()
   const controller = new AbortController()
   starsFetchController = controller
@@ -248,8 +327,11 @@ const fetchGithubStars = async () => {
     }
 
     const data = await response.json()
-    const stars = Number(data?.stargazers_count)
-    return Number.isFinite(stars) && stars > 0 ? stars : null
+    return {
+      stars: Number(data?.stargazers_count) || 0,
+      forks: Number(data?.forks_count) || 0,
+      issues: Number(data?.open_issues_count) || 0
+    }
   } catch {
     return null
   } finally {
@@ -262,27 +344,7 @@ const fetchGithubStars = async () => {
 
 const getHeroBadgeText = (starsCount = null) => {
   const realtimeStars = formatStars(starsCount)
-  if (realtimeStars) {
-    return `已获得 ${realtimeStars} GitHub Stars`
-  }
-
-  const features = Array.isArray(infoStore.features) ? infoStore.features : []
-  const starFeature = features.find((item) => {
-    if (typeof item === 'string') {
-      return /star/i.test(item)
-    }
-
-    return /star|github/i.test(item?.label || '') || /stars|github/i.test(item?.icon || '')
-  })
-
-  if (!starFeature) {
-    return ''
-  }
-
-  const starValue =
-    typeof starFeature === 'string' ? '' : (starFeature?.value || '').toString().trim()
-
-  return starValue ? `已获得 ${starValue} GitHub Stars` : '已获得 GitHub Stars'
+  return realtimeStars ? `已获得 ${realtimeStars} GitHub Stars` : ''
 }
 
 const stopBadgeTyping = () => {
@@ -338,8 +400,9 @@ const loadData = async () => {
     // 健康检查通过后加载配置
     await infoStore.loadInfoConfig()
     startSubtitleCarousel()
-    const starsCount = await fetchGithubStars()
-    startBadgeTyping(starsCount)
+    const repo = await fetchGithubRepo()
+    githubStats.value = repo
+    startBadgeTyping(repo?.stars ?? null)
   } catch (e) {
     console.error('加载失败:', e)
     stopBadgeTyping()
@@ -376,73 +439,21 @@ onUnmounted(() => {
   stopStarsFetch()
 })
 
-const iconKey = (value) => (typeof value === 'string' ? value.toLowerCase() : '')
+const formatCount = (count) =>
+  Number.isFinite(count) && count >= 0 ? count.toLocaleString('en-US') : ''
 
-// region icon_mapping
-const featureIconMap = {
-  stars: Star,
-  issues: CheckCircle2,
-  resolved: CheckCircle2,
-  commits: GitCommit,
-  license: ShieldCheck,
-  default: Star
-}
-
-const actionIconMap = {
-  doc: BookText,
-  docs: BookText,
-  document: BookText,
-  issue: Bug,
-  bug: Bug,
-  roadmap: Route,
-  plan: Route,
-  demo: Video,
-  video: Video,
-  github: Github,
-  default: Github
-}
-// endregion icon_mapping
-
-const featureCards = computed(() => {
-  const list = Array.isArray(infoStore.features) ? infoStore.features : []
-  return list
-    .map((item) => {
-      if (typeof item === 'string') {
-        return {
-          label: item,
-          value: '',
-          description: '',
-          icon: featureIconMap.default
-        }
-      }
-
-      const key = iconKey(item.icon || item.type)
-      return {
-        label: item.label || item.name || '',
-        value: item.value || '',
-        description: item.description || '',
-        icon: featureIconMap[key] || featureIconMap.default
-      }
-    })
-    .filter((item) => item.label || item.value || item.description)
-})
-
-const actionLinks = computed(() => {
-  const actions = infoStore.actions
-  if (!Array.isArray(actions)) {
+// 首页统计直接展示实时的 GitHub 仓库数据，不再依赖 branding 配置
+const realtimeStats = computed(() => {
+  const stats = githubStats.value
+  if (!stats) {
     return []
   }
 
-  return actions
-    .map((item) => {
-      const key = iconKey(item?.icon || item?.type)
-      return {
-        name: item?.name || item?.label || '',
-        url: item?.url || item?.link || '',
-        icon: actionIconMap[key] || actionIconMap.default
-      }
-    })
-    .filter((item) => item.name && item.url)
+  return [
+    { key: 'stars', label: 'Stars', value: formatCount(stats.stars), icon: Star },
+    { key: 'forks', label: 'Forks', value: formatCount(stats.forks), icon: GitFork },
+    { key: 'issues', label: 'Open Issues', value: formatCount(stats.issues), icon: CircleDot }
+  ]
 })
 </script>
 
@@ -452,7 +463,7 @@ const actionLinks = computed(() => {
   display: flex;
   flex-direction: column;
   color: var(--main-900);
-  background: radial-gradient(circle at top right, var(--main-50), transparent 60%), var(--main-5);
+  background: var(--main-5);
   position: relative;
   overflow-x: hidden;
 }
@@ -480,75 +491,91 @@ const actionLinks = computed(() => {
   min-height: 100vh;
   padding: 2rem;
 }
+
+// 氛围装饰背景
+.ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  will-change: transform;
+}
+
+.orb-1 {
+  width: 440px;
+  height: 440px;
+  top: -140px;
+  right: -90px;
+  background: var(--main-100);
+  opacity: 0.55;
+  animation: orbFloat 18s ease-in-out infinite;
+}
+
+.orb-2 {
+  width: 380px;
+  height: 380px;
+  bottom: -160px;
+  left: -120px;
+  background: var(--main-200);
+  opacity: 0.4;
+  animation: orbFloat 22s ease-in-out infinite reverse;
+}
+
+.orb-3 {
+  width: 300px;
+  height: 300px;
+  top: 32%;
+  left: 52%;
+  background: var(--main-50);
+  opacity: 0.6;
+  animation: orbFloat 26s ease-in-out infinite;
+}
+
+.grid-mesh {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, var(--main-40) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--main-40) 1px, transparent 1px);
+  background-size: 60px 60px;
+  opacity: 0.7;
+  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 8%, #000, transparent 72%);
+  mask-image: radial-gradient(ellipse 75% 55% at 50% 8%, #000, transparent 72%);
+}
+
+// 顶部导航
 .glass-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0.75rem 2.5rem;
+  padding: 0.85rem 2.5rem;
   background-color: var(--color-trans-light);
   backdrop-filter: blur(20px);
-  // border-bottom: 1px solid var(--main-30);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
-  box-shadow: 0 6px 25px rgba(3, 80, 101, 0.02);
-}
-
-.nav-links {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.6rem 1rem;
-  text-decoration: none;
-  color: var(--gray-800);
-  font-weight: 500;
-  font-size: 0.95rem;
-  transition: color 0.2s ease;
-  position: relative;
-  overflow: hidden;
-
-  &:hover {
-    color: var(--gray-900);
-
-    svg {
-      transform: scale(1.1);
-    }
-  }
-
-  &.router-link-active {
-    background: linear-gradient(135deg, var(--main-600), var(--main-500));
-    color: var(--gray-0);
-    border-radius: 1.5rem;
-
-    &:hover {
-      background: linear-gradient(135deg, var(--main-700), var(--main-600));
-    }
-  }
-
-  span {
-    white-space: nowrap;
-  }
+  border-bottom: 1px solid var(--main-40);
 }
 
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .logo {
   display: flex;
   align-items: center;
-  font-size: 1.4rem;
   font-weight: bold;
   color: var(--main-800);
 
@@ -563,85 +590,99 @@ const actionLinks = computed(() => {
   font-weight: 600;
 }
 
-.github-link a {
+.github-link {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
   text-decoration: none;
   color: var(--gray-600);
-  padding: 0.6rem 1rem;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 0.9rem;
-  font-weight: 500;
+  border: 1px solid transparent;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
 
   &:hover {
-    color: var(--gray-700);
-
-    svg {
-      transform: scale(1.1);
-    }
+    color: var(--main-700);
+    background: var(--main-30);
+    border-color: var(--main-40);
   }
 
   svg {
-    margin-right: 6px;
-    transition: transform 0.3s ease;
     fill: currentColor;
   }
-
-  .stars-count {
-    font-weight: 600;
-  }
-
-  // 暗色模式样式
-  :global(.dark) & {
-    color: var(--gray-400);
-
-    &:hover {
-      color: var(--gray-300);
-    }
-  }
 }
 
+// Hero
 .hero-section {
+  position: relative;
+  z-index: 1;
   flex: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 5rem 2rem 2rem;
+  padding: 7rem 2rem 3rem;
 }
 
 .hero-layout {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 2.5rem;
-  align-items: center;
-  max-width: 1200px;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 3rem;
+  align-items: start;
+  width: 100%;
+  max-width: 1180px;
   margin: 0 auto;
-  padding-top: 4rem;
 }
 
 .hero-content {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1.4rem;
+  padding-top: 0.5rem;
 }
 
 .reveal-up {
   opacity: 0;
-  transform: translateY(14px);
-  animation: revealUp 0.7s ease forwards;
+  transform: translateY(16px);
+  animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 
 .reveal-up.delay-1 {
-  animation-delay: 120ms;
+  animation-delay: 110ms;
+}
+
+.reveal-up.delay-2 {
+  animation-delay: 220ms;
 }
 
 .hero-badge {
-  color: var(--main-600);
-  font-size: 0.92rem;
-  letter-spacing: 0.04em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: flex-start;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  background: var(--main-0);
+  border: 1px solid var(--main-40);
+  color: var(--main-700);
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
   font-weight: 600;
   margin: 0;
+  box-shadow: 0 4px 14px -8px rgba(3, 80, 101, 0.4);
+}
+
+.badge-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--main-500);
+  box-shadow: 0 0 0 4px var(--main-50);
+  flex-shrink: 0;
 }
 
 .hero-badge-link {
@@ -651,19 +692,12 @@ const actionLinks = computed(() => {
 
 .hero-badge-number {
   color: var(--main-700);
-  text-decoration: underline;
-  text-decoration-color: var(--main-500);
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: 1.5px;
   font-weight: 700;
-  transition:
-    color 0.2s ease,
-    text-decoration-color 0.2s ease;
+  transition: color 0.2s ease;
 }
 
 .hero-badge-link:hover .hero-badge-number {
   color: var(--main-800);
-  text-decoration-color: var(--main-700);
 }
 
 .hero-badge.typing::after {
@@ -671,38 +705,31 @@ const actionLinks = computed(() => {
   display: inline-block;
   width: 1px;
   height: 1em;
-  margin-left: 6px;
+  margin-left: 2px;
   background: var(--main-600);
   vertical-align: -0.1em;
   animation: caretBlink 0.8s steps(1, end) infinite;
 }
 
 .title {
-  font-size: clamp(2.5rem, 4vw, 4rem);
+  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
   font-weight: 800;
   margin: 0;
-  background: linear-gradient(135deg, var(--main-900), var(--main-600));
+  background: linear-gradient(120deg, var(--main-900) 10%, var(--main-600) 60%, var(--main-500));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   letter-spacing: -0.02em;
-  line-height: 1.1;
-}
-
-.hero-eyebrow {
-  color: var(--main-600);
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.85rem;
+  line-height: 1.08;
 }
 
 .subtitle {
-  font-size: 1.5rem;
+  font-size: 1.45rem;
   font-weight: 600;
   color: var(--gray-700);
-  line-height: 1.4;
+  line-height: 1.45;
   margin: 0;
-  min-height: calc(1.4em * 1.3);
+  min-height: calc(1.45em * 1.3);
 }
 
 .subtitle-switch-enter-active,
@@ -718,307 +745,300 @@ const actionLinks = computed(() => {
   transform: translateY(7px);
 }
 
-.description {
-  color: var(--gray-600);
-  line-height: 1.6;
-}
-
 .hero-actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 1.25rem;
   align-items: center;
-}
-
-.doc-text-link {
-  color: var(--main-700);
-  font-weight: 600;
-  text-decoration: none;
-  border-bottom: 1px dashed var(--main-300);
-  padding-bottom: 0.15rem;
-  transition:
-    color 0.2s ease,
-    border-color 0.2s ease;
-
-  &:hover {
-    color: var(--main-800);
-    border-color: var(--main-500);
-  }
+  margin-top: 0.5rem;
 }
 
 .button-base {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
-  padding: 0.5rem 2.75rem;
+  gap: 0.5rem;
+  padding: 0.5rem 2rem;
   border-radius: 999px;
   font-size: 1.05rem;
   font-weight: 600;
   cursor: pointer;
   border: 1px solid transparent;
   text-decoration: none;
-  transition: all 0.25s ease;
+  transition:
+    background 0.25s ease,
+    box-shadow 0.25s ease;
   min-height: 52px;
 }
 
 .button-base.primary {
   background: linear-gradient(135deg, var(--main-600), var(--main-500));
   color: var(--gray-0);
-  border-color: transparent;
-  position: relative;
-  isolation: isolate;
+  box-shadow: 0 12px 28px -12px rgba(3, 80, 101, 0.55);
+
+  :deep(svg) {
+    transition: transform 0.25s ease;
+  }
 
   &:hover {
     background: linear-gradient(135deg, var(--main-700), var(--main-600));
-  }
+    box-shadow: 0 16px 34px -12px rgba(3, 80, 101, 0.6);
 
-  &::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border-radius: inherit;
-    background: radial-gradient(circle, rgba(36, 131, 154, 0.35), transparent 68%);
-    opacity: 0;
-    z-index: -1;
-    transition: opacity 0.25s ease;
-  }
-
-  &:hover::after {
-    opacity: 1;
+    :deep(svg) {
+      transform: translateX(3px);
+    }
   }
 }
 
 .button-base.secondary {
-  background: rgba(2, 57, 68, 0.06);
-  color: var(--main-700);
-  border-color: var(--gray-100);
-
-  &:hover {
-    border-color: var(--main-200);
-    background: var(--gray-50);
-  }
-}
-
-.insight-panel {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
   background: var(--main-0);
-  border-radius: 1.5rem;
-  padding: 1.5rem;
-  border: 1px solid var(--main-40);
-  box-shadow: 0 15px 35px rgba(3, 80, 101, 0.08);
-}
-
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  opacity: 0;
-  transform: translateY(12px);
-  animation: cardRise 0.55s ease forwards;
-  animation-delay: calc(var(--card-stagger, 0) * 90ms + 200ms);
-}
-
-.stat-headline {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-}
-
-.stat-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: var(--gray-25);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  color: var(--main-700);
+  border-color: var(--main-40);
+  padding: 0.5rem 1.6rem;
 
   :deep(svg) {
-    width: 24px;
-    height: 24px;
-    color: var(--main-700);
+    color: var(--main-600);
   }
-}
 
-.stat-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--main-800);
-  margin: 0;
-}
-
-.stat-label {
-  margin: 0;
-  color: var(--gray-700);
-  font-weight: 600;
-}
-
-.stat-description {
-  margin: 0;
-  color: var(--gray-600);
-  font-size: 0.9rem;
-}
-
-.section {
-  width: 100%;
-  max-width: 1200px;
-  margin: 50px auto 0px auto;
-  padding: 2rem 0;
-}
-
-.section-header {
-  margin-bottom: 1.5rem;
-
-  h2 {
-    margin: 0 0 0.5rem;
-    font-size: 1.8rem;
+  &:hover {
+    background: var(--main-30);
+    border-color: var(--main-200);
     color: var(--main-800);
   }
-
-  p {
-    margin: 0;
-    color: var(--gray-600);
-  }
 }
 
-.action-section {
-  padding-bottom: 3rem;
-}
-
-.action-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 1rem;
-}
-
-.action-card {
+// Hero 右侧可视化卡片
+.hero-visual {
   display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 1rem 1.25rem;
-  border-radius: 1rem;
-  text-decoration: none;
-  color: inherit;
-  border: 1px solid var(--gray-50);
-  background: var(--gray-0);
-  transition:
-    transform 0.2s ease,
-    background 0.2s ease;
-
-  &:hover {
-    background: var(--gray-0);
-    transform: translateY(-2px);
-  }
+  justify-content: center;
 }
 
-.action-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: var(--gray-50);
+.visual-card {
+  position: relative;
+  width: 100%;
+  max-width: 460px;
+  padding: 1.75rem;
+  border-radius: 24px;
+  background: linear-gradient(165deg, var(--main-0), var(--main-20));
+  border: 1px solid var(--main-40);
+  box-shadow: 0 30px 60px -34px rgba(3, 80, 101, 0.35);
+  overflow: hidden;
+}
+
+.visual-glow {
+  position: absolute;
+  top: -40%;
+  right: -20%;
+  width: 70%;
+  height: 70%;
+  background: radial-gradient(circle, var(--main-100), transparent 70%);
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.graph-watermark {
+  position: absolute;
+  top: -26px;
+  right: -26px;
+  width: 200px;
+  height: auto;
+  color: var(--main-500);
+  opacity: 0.09;
+  pointer-events: none;
+}
+
+// Harness → RAG 引擎 → 知识库 横向数据流
+.flow-diagram {
+  position: relative;
+  z-index: 1;
+}
+
+.flow-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.flow-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.55rem;
+  flex-shrink: 0;
+  width: 76px;
+  text-align: center;
+}
+
+.flow-icon {
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
+  background: var(--main-30);
+  border: 1px solid var(--main-40);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
 
   :deep(svg) {
-    width: 22px;
-    height: 22px;
     color: var(--main-700);
   }
 }
 
-.action-meta {
-  flex: 1;
-  overflow: hidden;
+.flow-node:hover .flow-icon {
+  background: var(--main-100);
+  border-color: var(--main-200);
 }
 
-.action-title {
-  margin: 0;
+.flow-name {
+  font-size: 0.8rem;
   font-weight: 600;
   color: var(--main-800);
+  line-height: 1.3;
 }
 
-.action-url {
-  margin: 0.25rem 0 0;
-  font-size: 0.9rem;
+// 中间枢纽：主色高亮 + 脉冲环
+.flow-icon--hub {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 18px;
+  background: linear-gradient(140deg, var(--main-500), var(--main-600));
+  border: none;
+  box-shadow: 0 10px 22px -10px rgba(3, 80, 101, 0.55);
+
+  :deep(svg) {
+    color: var(--gray-0);
+    position: relative;
+    z-index: 1;
+  }
+}
+
+.flow-node--hub:hover .flow-icon--hub {
+  background: linear-gradient(140deg, var(--main-500), var(--main-600));
+}
+
+.hub-ring {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 2px solid var(--main-400);
+  animation: hubPulse 2.4s ease-out infinite;
+}
+
+.flow-link {
+  position: relative;
+  flex: 1;
+  height: 54px;
+  min-width: 0;
+}
+
+.flow-rail {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  border-radius: 2px;
+  background: linear-gradient(
+    90deg,
+    var(--main-50),
+    var(--main-200) 25%,
+    var(--main-200) 75%,
+    var(--main-50)
+  );
+}
+
+.flow-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.flow-dot--fwd {
+  top: calc(50% - 5px);
+  background: var(--main-500);
+  box-shadow: 0 0 0 4px var(--main-50);
+  animation: flowRight 2.4s linear infinite;
+  animation-delay: calc(var(--i) * 1.2s);
+}
+
+.flow-dot--back {
+  top: calc(50% + 5px);
+  transform: translateY(-100%);
+  background: var(--main-300);
+  box-shadow: 0 0 0 4px var(--main-30);
+  animation: flowLeft 2.4s linear infinite;
+  animation-delay: calc(var(--i) * 1.2s + 0.6s);
+}
+
+.flow-caption {
+  margin: 1.25rem 0 0;
+  text-align: center;
+  font-size: 0.84rem;
   color: var(--gray-600);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.5;
 }
 
-.preview-section {
-  padding: 5rem 2rem;
+.stat-row {
+  position: relative;
   display: flex;
-  justify-content: center;
+  margin-top: 1.5rem;
+  padding-top: 1.35rem;
+  border-top: 1px solid var(--main-40);
 }
 
-.preview-container {
-  position: relative;
-  max-width: 1000px;
-  overflow: hidden;
-  border-radius: 1rem;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+.stat-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
 
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-
-    .preview-overlay {
-      opacity: 1;
-    }
+  &:not(:first-child) {
+    padding-left: 1.2rem;
   }
 
-  img {
-    width: 100%;
-    height: auto;
-    display: block;
-    transition: transform 0.5s ease;
-  }
-
-  .preview-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
-    padding: 2rem;
-    opacity: 0.8;
-    transition: opacity 0.3s ease;
-
-    .overlay-content {
-      color: var(--gray-0);
-
-      h3 {
-        font-size: 1.5rem;
-        margin-bottom: 0.5rem;
-      }
-
-      p {
-        font-size: 1rem;
-        opacity: 0.9;
-      }
-    }
+  &:not(:last-child) {
+    padding-right: 1.2rem;
+    border-right: 1px solid var(--main-40);
   }
 }
 
+.stat-item-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--main-800);
+  line-height: 1.1;
+
+  :deep(svg) {
+    color: var(--main-500);
+  }
+}
+
+.stat-item-label {
+  font-size: 0.8rem;
+  color: var(--gray-600);
+}
+
+// 页脚
 .footer {
-  margin-top: auto;
-  background: var(--main-0);
-  border-top: 1px solid var(--main-20);
   position: relative;
-  z-index: 10;
+  z-index: 1;
+  margin-top: auto;
+  border-top: 1px solid var(--main-40);
 }
 
 .footer-content {
   text-align: center;
-  padding: 2rem;
-  max-width: 1200px;
+  padding: 1.75rem 2rem;
+  max-width: 1180px;
   margin: 0 auto;
 }
 
@@ -1027,12 +1047,7 @@ const actionLinks = computed(() => {
   font-size: 0.9rem;
   font-weight: 500;
   margin: 0;
-  opacity: 0.8;
-  transition: opacity 0.3s ease;
-}
-
-.footer:hover .copyright {
-  opacity: 1;
+  opacity: 0.75;
 }
 
 @keyframes revealUp {
@@ -1042,120 +1057,166 @@ const actionLinks = computed(() => {
   }
 }
 
-@keyframes cardRise {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes caretBlink {
   50% {
     opacity: 0;
   }
 }
 
+@keyframes orbFloat {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(0, -26px) scale(1.04);
+  }
+}
+
+@keyframes flowRight {
+  0% {
+    left: -4px;
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    left: calc(100% - 4px);
+    opacity: 0;
+  }
+}
+
+@keyframes flowLeft {
+  0% {
+    left: calc(100% - 4px);
+    opacity: 0;
+  }
+  15% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 1;
+  }
+  100% {
+    left: -4px;
+    opacity: 0;
+  }
+}
+
+@keyframes hubPulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  70%,
+  100% {
+    opacity: 0;
+    transform: scale(1.4);
+  }
+}
+
+// 暗色模式
 :global(:root.dark) {
+  .home-container {
+    background: var(--main-5);
+  }
+
   .hero-badge-number {
     color: var(--main-200);
-    text-decoration-color: var(--main-300);
   }
 
   .hero-badge-link:hover .hero-badge-number {
     color: var(--main-100);
-    text-decoration-color: var(--main-100);
   }
 
-  .doc-text-link {
-    color: var(--main-300);
-    border-bottom-color: var(--main-500);
+  .button-base.secondary {
+    color: var(--main-200);
+
+    :deep(svg) {
+      color: var(--main-300);
+    }
 
     &:hover {
-      color: var(--main-200);
-      border-bottom-color: var(--main-300);
+      color: var(--main-100);
     }
   }
 
-  .button-base.primary::after {
-    background: radial-gradient(circle, rgba(130, 195, 214, 0.28), transparent 72%);
+  .github-link {
+    color: var(--gray-400);
+
+    &:hover {
+      color: var(--main-200);
+    }
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .reveal-up,
-  .stat-card,
+  .orb,
   .hero-badge.typing::after {
     animation: none;
   }
 
-  .reveal-up,
-  .stat-card {
+  .reveal-up {
     opacity: 1;
     transform: none;
   }
 
+  .flow-dot,
+  .hub-ring {
+    display: none;
+  }
+
   .subtitle-switch-enter-active,
   .subtitle-switch-leave-active {
     transition: none;
   }
 }
 
+@media (max-width: 960px) {
+  .hero-layout {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+
+  .hero-content {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .visual-card {
+    max-width: 520px;
+    margin: 0 auto;
+  }
+}
+
 @media (max-width: 768px) {
   .glass-header {
-    padding: 0.8rem 1.25rem;
-    flex-wrap: wrap;
-    gap: 1rem;
+    padding: 0.75rem 1.25rem;
   }
 
-  .nav-links {
-    order: 3;
-    width: 100%;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+  .logo-text {
+    font-size: 1.15rem;
   }
 
-  .nav-link {
-    padding: 0.5rem 0.8rem;
-    font-size: 0.85rem;
-
-    span {
-      display: none;
-    }
-  }
-
-  .logo {
-    font-size: 1.1rem;
+  .hero-section {
+    padding: 6rem 1.25rem 2.5rem;
   }
 
   .title {
-    font-size: 2.4rem;
+    font-size: clamp(2.2rem, 9vw, 3rem);
   }
 
   .subtitle {
     font-size: 1.2rem;
   }
 
-  .start-button {
+  .button-base {
     width: 100%;
-    text-align: center;
-  }
-
-  .hero-content {
-    padding: 0;
-  }
-
-  .github-link a {
-    padding: 0.5rem 0.8rem;
-    font-size: 0.85rem;
-
-    .stars-count {
-      display: none;
-    }
-  }
-
-  .hero-layout {
-    padding: 0 0.5rem;
   }
 }
 </style>