From ae9b954c57b6096149438acee90c3c6bbb7224b6 Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Sun, 16 Aug 2026 10:32:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=AB=99=E7=82=B9=E7=9B=AE=E5=BD=95?=
 =?UTF-8?q?=E4=B8=8E=E5=8A=9F=E8=83=BD=E7=B4=A2=E5=BC=95=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/index.vue | 1053 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 694 insertions(+), 359 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index f028beb..1a9257e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,7 +6,8 @@ definePageMeta({
 });
 
 const { loggedIn, user } = useAuthSession();
-const { siteName } = useGlobalConfig();
+
+// ── Agents（用于「开始对话」与 Agent 特性块）──
 
 interface AgentItem {
   id: number;
@@ -14,140 +15,302 @@ interface AgentItem {
   name: string;
   description: string | null;
   isDefault: number | null;
-  isCallable: number | null;
-  sortOrder: number | null;
 }
 
 const { data: agentsData } = await useFetch<{ code: number; data: { list: AgentItem[] } }>("/api/agents");
 const agents = computed<AgentItem[]>(() => agentsData.value?.data?.list ?? []);
 
 const defaultAgent = computed(() => agents.value.find((a) => a.isDefault === 1) ?? agents.value[0] ?? null);
-
-function enterChat(slug: string) {
-  navigateTo(`/chat/${slug}`);
+const defaultChatPath = computed(() => (defaultAgent.value ? `/chat/${defaultAgent.value.slug}` : "/chat/default"));
+
+// ── 站点目录 ──
+
+interface SiteEntry {
+  key: string;
+  num: string;
+  title: string;
+  desc: string;
+  to: string;
+  icon: string;
+  tags: string[];
+  featured?: boolean;
+}
+
+interface SiteGroup {
+  key: string;
+  label: string;
+  labelEn: string;
+  entries: SiteEntry[];
+}
+
+const groups = computed<SiteGroup[]>(() => [
+  {
+    key: "talk",
+    label: "对话",
+    labelEn: "Talk",
+    entries: [
+      {
+        key: "agent",
+        num: "01",
+        title: "AI Agent",
+        desc: "多轮对话、工具调用、推理过程，上下文持续记忆。登录后保存会话，随时继续。",
+        to: defaultChatPath.value,
+        icon: "lucide:bot",
+        tags: ["公开"],
+        featured: true,
+      },
+      {
+        key: "character",
+        num: "02",
+        title: "角色",
+        desc: "与有独立人设的角色对话，每个角色都有自己的世界观与语气。",
+        to: "/characters",
+        icon: "lucide:users",
+        tags: ["公开"],
+      },
+    ],
+  },
+  {
+    key: "create",
+    label: "创作",
+    labelEn: "Create",
+    entries: [
+      {
+        key: "idea",
+        num: "03",
+        title: "创意",
+        desc: "随手记录灵感，以瀑布流浏览、分类与整理。",
+        to: "/ideas",
+        icon: "lucide:lightbulb",
+        tags: ["需登录"],
+      },
+      {
+        key: "project",
+        num: "04",
+        title: "项目",
+        desc: "沉淀项目与作品，把成果展示出来。",
+        to: "/projects",
+        icon: "lucide:folder-kanban",
+        tags: ["公开"],
+      },
+      {
+        key: "article",
+        num: "05",
+        title: "文章",
+        desc: "长文阅读与写作，关联卡片素材，自由编排。",
+        to: "/articles",
+        icon: "lucide:file-text",
+        tags: ["公开"],
+      },
+    ],
+  },
+  {
+    key: "collect",
+    label: "积累",
+    labelEn: "Collect",
+    entries: [
+      {
+        key: "document",
+        num: "06",
+        title: "文档",
+        desc: "Agent 的知识库，可被检索、引用，喂给对话。",
+        to: "/agent-documents",
+        icon: "lucide:book-open",
+        tags: ["需登录"],
+      },
+      {
+        key: "favorite",
+        num: "07",
+        title: "收藏",
+        desc: "收藏喜欢的灵感与内容，随时回看。",
+        to: "/collect",
+        icon: "lucide:star",
+        tags: ["需登录"],
+      },
+    ],
+  },
+  {
+    key: "system",
+    label: "系统",
+    labelEn: "System",
+    entries: [
+      {
+        key: "settings",
+        num: "08",
+        title: "设置",
+        desc: "配置模型、偏好与账号信息。",
+        to: "/settings/llm-config",
+        icon: "lucide:settings-2",
+        tags: ["需登录"],
+      },
+      {
+        key: "admin",
+        num: "09",
+        title: "管理",
+        desc: "仪表盘、Agent、用户、角色与定时任务，统一管理。",
+        to: "/admin/dashboard",
+        icon: "lucide:shield",
+        tags: ["管理员"],
+      },
+    ],
+  },
+]);
+
+function tagIcon(tag: string) {
+  if (tag === "公开") return "lucide:globe";
+  if (tag === "需登录") return "lucide:lock";
+  return "lucide:shield";
+}
+
+function enterChat(path: string) {
+  navigateTo(path);
+}
+
+function scrollToIndex() {
+  document.getElementById("site-index")?.scrollIntoView({ behavior: "smooth", block: "start" });
 }
-
-const features = [
-  { icon: "lucide:message-square", title: "多轮对话", desc: "支持上下文记忆的连续对话，随时追问与深入探讨" },
-  { icon: "lucide:wrench", title: "工具调用", desc: "Agent 可调用外部工具，检索文档、执行任务" },
-  { icon: "lucide:history", title: "会话管理", desc: "登录后自动保存对话历史，随时回顾与继续" },
-];
 </script>
 
 <template>
   <div class="home-page">
+    <!-- ── 首屏：刊头 ── -->
     <section class="hero-band">
-      <div class="hero-content">
-        <div class="hero-badge">
-          <Icon name="lucide:sparkles" />
-          <span>AI Agent</span>
-        </div>
+      <div class="hero-copy">
+        <p class="hero-signature">Dash</p>
         <h1 class="hero-title">
-          遇见你的<br />
-          <span class="hero-accent">思考伙伴</span>
+          灵感、对话、作品，<br />
+          <span class="hero-accent">一处安放。</span>
         </h1>
         <p class="hero-subtitle">
-          {{ siteName }} 提供智能 Agent 对话服务，无需登录即可体验，登录后可保存对话记录与个性化配置。
+          一个个人数字空间。和 AI 对话、与角色聊天、策展灵感、发布项目与文章，把分散的创作收进同一个地方。
         </p>
         <div class="hero-actions">
-          <button
-            v-if="defaultAgent"
-            class="btn-primary"
-            @click="enterChat(defaultAgent.slug)"
-          >
-            <Icon name="lucide:arrow-right" />
+          <button v-if="defaultAgent" class="btn-primary" @click="enterChat(defaultChatPath)">
+            <Icon name="lucide:sparkles" />
             开始对话
           </button>
-          <NuxtLink v-if="!loggedIn" to="/auth/login" class="btn-secondary">
-            登录账号
-          </NuxtLink>
-          <NuxtLink v-else to="/agent-documents" class="btn-secondary">
-            我的文档
-          </NuxtLink>
+          <button class="btn-secondary" @click="scrollToIndex">
+            浏览目录
+            <Icon name="lucide:arrow-down" />
+          </button>
         </div>
       </div>
 
-      <div class="hero-illustration">
-        <div class="mockup-card">
-          <div class="mockup-header">
-            <span class="mockup-dot" />
-            <span class="mockup-dot" />
-            <span class="mockup-dot" />
-            <span class="mockup-title">agent-chat</span>
+      <div class="hero-map">
+        <div class="map-card">
+          <div class="map-head">
+            <span class="map-title">本站地图</span>
+            <span class="map-caption">一处空间，九种表达</span>
           </div>
-          <div class="mockup-body">
-            <div class="mockup-line user">
-              <span class="mockup-role">user</span>
-              <span class="mockup-text">帮我分析一下这段代码的性能瓶颈</span>
-            </div>
-            <div class="mockup-line assistant">
-              <span class="mockup-role">assistant</span>
-              <span class="mockup-text">好的，我来帮你分析。从代码结构来看，主要瓶颈在循环嵌套层...</span>
-            </div>
-            <div class="mockup-cursor">
-              <span class="cursor-blink" />
+          <div class="map-groups">
+            <div v-for="g in groups" :key="g.key" class="map-group">
+              <div class="map-group-head">
+                <span class="map-group-label">{{ g.label }}</span>
+              </div>
+              <div class="map-group-links">
+                <NuxtLink v-for="e in g.entries" :key="e.key" :to="e.to" class="map-link">
+                  {{ e.title }}
+                </NuxtLink>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </section>
 
-    <section v-if="agents.length > 0" class="agents-section">
-      <div class="section-head">
-        <h2 class="section-title">选择 Agent</h2>
-        <p class="section-desc">每个 Agent 拥有不同的能力与工具配置，选择适合你场景的 Agent 开始对话</p>
+    <!-- ── 目录：全站功能索引 ── -->
+    <section id="site-index" class="index-section">
+      <div class="index-head">
+        <p class="overline">Index</p>
+        <h2 class="index-title">这里有什么</h2>
+        <p class="index-desc">九个入口，覆盖对话、创作、积累与系统。</p>
       </div>
-      <div class="agents-grid">
-        <button
-          v-for="agent in agents"
-          :key="agent.id"
-          class="agent-card"
-          :class="{ 'is-default': agent.isDefault === 1 }"
-          @click="enterChat(agent.slug)"
-        >
-          <div class="agent-card-head">
-            <div class="agent-icon">
-              <Icon name="lucide:bot" />
-            </div>
-            <span v-if="agent.isDefault === 1" class="agent-badge">默认</span>
-          </div>
-          <h3 class="agent-name">{{ agent.name }}</h3>
-          <p class="agent-desc">{{ agent.description || "点击进入对话" }}</p>
-          <div class="agent-card-foot">
-            <span class="agent-enter">进入对话</span>
-            <Icon name="lucide:arrow-right" class="agent-arrow" />
+
+      <div class="index-list">
+        <template v-for="g in groups" :key="g.key">
+          <div class="group-label-row">
+            <span class="group-label">{{ g.label }}</span>
+            <span class="group-label-en">{{ g.labelEn }}</span>
           </div>
-        </button>
-      </div>
-    </section>
 
-    <section class="features-section">
-      <div class="section-head">
-        <h2 class="section-title">核心能力</h2>
-        <p class="section-desc">为每一次对话提供稳定、智能、可扩展的支撑</p>
-      </div>
-      <div class="features-grid">
-        <div v-for="f in features" :key="f.title" class="feature-card">
-          <div class="feature-icon">
-            <Icon :name="f.icon" />
+          <div
+            v-for="e in g.entries"
+            :key="e.key"
+            class="entry"
+            :class="{ 'is-featured': e.featured }"
+          >
+            <template v-if="e.featured">
+              <div class="featured-card">
+                <div class="featured-copy">
+                  <div class="featured-tags">
+                    <span v-for="t in e.tags" :key="t" class="tag">
+                      <Icon :name="tagIcon(t)" />
+                      {{ t }}
+                    </span>
+                  </div>
+                  <h3 class="featured-title">{{ e.title }}</h3>
+                  <p class="featured-desc">{{ e.desc }}</p>
+                  <NuxtLink :to="e.to" class="featured-link">
+                    进入对话
+                    <Icon name="lucide:arrow-right" />
+                  </NuxtLink>
+                </div>
+                <div class="featured-mockup">
+                  <div class="mockup">
+                    <div class="mockup-header">
+                      <span class="dot" />
+                      <span class="dot" />
+                      <span class="dot" />
+                      <span class="mockup-title">agent-chat</span>
+                    </div>
+                    <div class="mockup-body">
+                      <div class="mockup-line user">
+                        <span class="role">user</span>
+                        <span class="text">帮我整理一下今天的灵感</span>
+                      </div>
+                      <div class="mockup-line assistant">
+                        <span class="role">assistant</span>
+                        <span class="text">好的，我先梳理你的卡片，再按主题归类…</span>
+                      </div>
+                      <div class="mockup-cursor"><span class="cursor" /></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            <template v-else>
+              <NuxtLink :to="e.to" class="entry-row">
+                <span class="entry-num">{{ e.num }}</span>
+                <span class="entry-icon">
+                  <Icon :name="e.icon" />
+                </span>
+                <span class="entry-main">
+                  <span class="entry-title">{{ e.title }}</span>
+                  <span class="entry-desc">{{ e.desc }}</span>
+                </span>
+                <span class="entry-tags">
+                  <span v-for="t in e.tags" :key="t" class="tag">
+                    <Icon :name="tagIcon(t)" />
+                    {{ t }}
+                  </span>
+                </span>
+                <Icon name="lucide:arrow-up-right" class="entry-arrow" />
+              </NuxtLink>
+            </template>
           </div>
-          <h3 class="feature-title">{{ f.title }}</h3>
-          <p class="feature-desc">{{ f.desc }}</p>
-        </div>
+        </template>
       </div>
     </section>
 
+    <!-- ── 结尾 ── -->
     <section class="cta-band">
-      <div class="cta-content">
-        <h2 class="cta-title">准备好开始了吗？</h2>
+      <div class="cta-inner">
+        <h2 class="cta-title">从一个入口，进入你的空间。</h2>
         <p class="cta-subtitle">
-          {{ loggedIn ? `欢迎回来，${user?.username}` : '无需注册，即刻体验智能对话' }}
+          {{ loggedIn ? `欢迎回来，${user?.username}。继续你的创作。` : '无需注册即可体验对话，登录后解锁完整功能。' }}
         </p>
-        <button
-          v-if="defaultAgent"
-          class="btn-primary-on-coral"
-          @click="enterChat(defaultAgent.slug)"
-        >
+        <button v-if="defaultAgent" class="btn-on-coral" @click="enterChat(defaultChatPath)">
           <Icon name="lucide:sparkles" />
           立即对话
         </button>
@@ -159,54 +322,44 @@ const features = [
 <style scoped>
 .home-page {
   flex: 1;
+  width: 100%;
 }
 
-/* ── Hero ── */
+/* ── 首屏 ── */
 
 .hero-band {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 48px;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 72px;
   align-items: center;
-  padding: 96px 0;
-  max-width: 1200px;
+  padding: 96px 0 72px;
+  max-width: 1160px;
   margin: 0 auto;
 }
 
-.hero-content {
+.hero-copy {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-}
-
-.hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  align-self: flex-start;
-  padding: 4px 12px;
-  background: var(--color-surface-card);
-  color: var(--color-ink);
-  border-radius: 9999px;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+  gap: 24px;
 }
 
-.hero-badge :deep(svg) {
-  font-size: 14px;
+.hero-signature {
+  margin: 0;
+  font-family: "Liu Jian Mao Cao", cursive;
+  font-size: 40px;
+  font-weight: 400;
+  line-height: 1;
   color: var(--color-primary);
 }
 
 .hero-title {
+  margin: 0;
   font-family: var(--font-display);
   font-size: 64px;
   font-weight: 400;
-  line-height: 1.05;
+  line-height: 1.08;
   letter-spacing: -1.5px;
   color: var(--color-ink);
-  margin: 0;
 }
 
 .hero-accent {
@@ -214,11 +367,11 @@ const features = [
 }
 
 .hero-subtitle {
-  font-size: 16px;
-  line-height: 1.55;
-  color: var(--color-body);
   margin: 0;
-  max-width: 480px;
+  max-width: 44ch;
+  font-size: 17px;
+  line-height: 1.7;
+  color: var(--color-body);
 }
 
 .hero-actions {
@@ -228,14 +381,14 @@ const features = [
   flex-wrap: wrap;
 }
 
-/* ── Buttons ── */
+/* ── 按钮 ── */
 
 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 40px;
-  padding: 0 20px;
+  height: 44px;
+  padding: 0 22px;
   background: var(--color-primary);
   color: var(--color-on-primary);
   border: none;
@@ -244,8 +397,7 @@ const features = [
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: background 0.2s ease;
-  text-decoration: none;
+  transition: background 0.2s ease, transform 0.15s ease;
 }
 
 .btn-primary:hover {
@@ -259,8 +411,9 @@ const features = [
 .btn-secondary {
   display: inline-flex;
   align-items: center;
-  height: 40px;
-  padding: 0 20px;
+  gap: 8px;
+  height: 44px;
+  padding: 0 22px;
   background: var(--color-canvas);
   color: var(--color-ink);
   border: 1px solid var(--color-hairline);
@@ -269,351 +422,490 @@ const features = [
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
-  transition: border-color 0.2s ease;
-  text-decoration: none;
+  transition: border-color 0.2s ease, color 0.2s ease;
 }
 
 .btn-secondary:hover {
   border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
-/* ── Hero Mockup ── */
+/* ── 地图卡 ── */
 
-.hero-illustration {
+.hero-map {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
-.mockup-card {
+.map-card {
   width: 100%;
-  max-width: 480px;
+  max-width: 440px;
   background: var(--color-surface-dark);
   border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 24px 60px rgba(20, 20, 19, 0.18);
+  padding: 28px;
+  color: var(--color-on-dark);
 }
 
-.mockup-header {
+.map-head {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 14px 18px;
-  background: var(--color-surface-dark-elevated);
-}
-
-.mockup-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--color-on-dark-soft);
-  opacity: 0.4;
-}
-
-.mockup-dot:nth-child(1) {
-  background: #e05555;
-  opacity: 0.7;
-}
-
-.mockup-dot:nth-child(2) {
-  background: #e0a955;
-  opacity: 0.7;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--color-surface-dark-elevated);
+  margin-bottom: 20px;
 }
 
-.mockup-dot:nth-child(3) {
-  background: #6bb36b;
-  opacity: 0.7;
+.map-title {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 1px;
 }
 
-.mockup-title {
-  margin-left: 8px;
-  font-family: "JetBrains Mono", ui-monospace, monospace;
+.map-caption {
   font-size: 12px;
   color: var(--color-on-dark-soft);
 }
 
-.mockup-body {
-  padding: 24px 20px;
+.map-groups {
   display: flex;
   flex-direction: column;
-  gap: 18px;
-  min-height: 280px;
+  gap: 20px;
 }
 
-.mockup-line {
+.map-group-head {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
 }
 
-.mockup-role {
-  font-family: "JetBrains Mono", ui-monospace, monospace;
-  font-size: 11px;
-  color: var(--color-on-dark-soft);
+.map-group-label {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 2px;
   text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.mockup-text {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--color-on-dark);
-}
-
-.mockup-line.user .mockup-text {
   color: var(--color-on-dark-soft);
 }
 
-.mockup-cursor {
+.map-group-links {
   display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.map-link {
+  display: inline-flex;
   align-items: center;
-  gap: 2px;
+  padding: 6px 14px;
+  border: 1px solid var(--color-surface-dark-elevated);
+  border-radius: 9999px;
+  font-size: 13px;
+  color: var(--color-on-dark);
+  text-decoration: none;
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
 }
 
-.cursor-blink {
-  width: 8px;
-  height: 16px;
-  background: var(--color-primary);
-  animation: blink 1s step-end infinite;
+.map-link:hover {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
 }
 
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
+/* ── 目录 ── */
+
+.index-section {
+  padding: 24px 0 96px;
+  max-width: 1160px;
+  margin: 0 auto;
+  scroll-margin-top: 80px;
 }
 
-/* ── Section common ── */
+.index-head {
+  max-width: 560px;
+  margin-bottom: 56px;
+}
 
-.section-head {
-  text-align: center;
-  margin-bottom: 48px;
+.overline {
+  margin: 0 0 12px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--color-primary);
 }
 
-.section-title {
+.index-title {
+  margin: 0 0 12px;
   font-family: var(--font-display);
-  font-size: 36px;
+  font-size: 44px;
   font-weight: 400;
-  line-height: 1.15;
+  line-height: 1.1;
   letter-spacing: -0.5px;
   color: var(--color-ink);
-  margin: 0 0 12px;
 }
 
-.section-desc {
+.index-desc {
+  margin: 0;
   font-size: 16px;
-  line-height: 1.55;
+  line-height: 1.6;
   color: var(--color-muted);
-  margin: 0;
-  max-width: 560px;
-  margin: 0 auto;
 }
 
-/* ── Agents section ── */
+.index-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
 
-.agents-section {
-  padding: 96px 0;
-  max-width: 1200px;
-  margin: 0 auto;
+.group-label-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding-top: 24px;
+  margin-top: 24px;
+  border-top: 1px solid var(--color-hairline);
+}
+
+.group-label-row:first-child {
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.group-label {
+  font-family: var(--font-body);
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-ink);
+}
+
+.group-label-en {
+  font-size: 12px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--color-muted-soft);
 }
 
-.agents-grid {
+/* ── 特性块（Agent）── */
+
+.featured-card {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  grid-template-columns: 1fr 1fr;
+  gap: 48px;
+  align-items: center;
+  background: var(--color-surface-dark);
+  border-radius: 16px;
+  padding: 48px;
+  color: var(--color-on-dark);
 }
 
-.agent-card {
+.featured-copy {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 32px;
-  background: var(--color-surface-card);
-  border: 1px solid transparent;
-  border-radius: 12px;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: inherit;
+  align-items: flex-start;
+  gap: 16px;
 }
 
-.agent-card:hover {
-  border-color: var(--color-primary);
-  transform: translateY(-2px);
+.featured-tags {
+  display: flex;
+  gap: 8px;
 }
 
-.agent-card.is-default {
-  background: var(--color-surface-dark);
+.featured-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 32px;
+  font-weight: 400;
+  letter-spacing: -0.3px;
+  color: var(--color-on-dark);
+}
+
+.featured-desc {
+  margin: 0;
+  max-width: 40ch;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--color-on-dark-soft);
 }
 
-.agent-card.is-default .agent-name,
-.agent-card.is-default .agent-desc,
-.agent-card.is-default .agent-enter {
+.featured-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 12px 22px;
+  background: var(--color-surface-dark-elevated);
   color: var(--color-on-dark);
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: background 0.2s ease, transform 0.15s ease;
 }
 
-.agent-card.is-default .agent-desc {
-  color: var(--color-on-dark-soft);
+.featured-link:hover {
+  background: var(--color-primary);
+  color: var(--color-on-primary);
 }
 
-.agent-card-head {
+.featured-link:active {
+  transform: scale(0.98);
+}
+
+/* ── Mockup ── */
+
+.featured-mockup {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
-.agent-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: var(--color-canvas);
+.mockup {
+  width: 100%;
+  max-width: 360px;
+  background: var(--color-surface-dark-soft);
+  border: 1px solid var(--color-surface-dark-elevated);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.mockup-header {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  color: var(--color-primary);
+  gap: 7px;
+  padding: 12px 16px;
+  background: var(--color-surface-dark-elevated);
 }
 
-.agent-card.is-default .agent-icon {
-  background: var(--color-surface-dark-elevated);
+.dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--color-on-dark-soft);
+  opacity: 0.45;
 }
 
-.agent-badge {
-  padding: 2px 10px;
-  background: var(--color-primary);
-  color: var(--color-on-primary);
-  border-radius: 9999px;
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 1px;
-  text-transform: uppercase;
+.dot:nth-child(1) {
+  background: #e05555;
+  opacity: 0.8;
 }
 
-.agent-name {
-  font-family: var(--font-body);
-  font-size: 18px;
-  font-weight: 500;
-  color: var(--color-ink);
-  margin: 0;
+.dot:nth-child(2) {
+  background: #e0a955;
+  opacity: 0.8;
 }
 
-.agent-desc {
-  font-size: 14px;
-  line-height: 1.55;
-  color: var(--color-muted);
-  margin: 0;
-  flex: 1;
+.dot:nth-child(3) {
+  background: #6bb36b;
+  opacity: 0.8;
 }
 
-.agent-card-foot {
+.mockup-title {
+  margin-left: 6px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  color: var(--color-on-dark-soft);
+}
+
+.mockup-body {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 4px;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px 18px;
+}
+
+.mockup-line {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.role {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--color-on-dark-soft);
 }
 
-.agent-enter {
+.text {
   font-size: 13px;
-  font-weight: 500;
-  color: var(--color-primary);
+  line-height: 1.6;
+  color: var(--color-on-dark);
 }
 
-.agent-arrow {
-  font-size: 16px;
-  color: var(--color-primary);
-  transition: transform 0.2s ease;
+.mockup-line.user .text {
+  color: var(--color-on-dark-soft);
 }
 
-.agent-card:hover .agent-arrow {
-  transform: translateX(4px);
+.mockup-cursor {
+  display: flex;
 }
 
-/* ── Features ── */
+.cursor {
+  width: 7px;
+  height: 14px;
+  background: var(--color-primary);
+  animation: blink 1s step-end infinite;
+}
 
-.features-section {
-  padding: 96px 0;
-  background: var(--color-surface-soft);
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
 }
 
-.features-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 24px;
+/* ── 目录行 ── */
+
+.entry-row {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 22px 4px;
+  border-bottom: 1px solid var(--color-hairline);
+  text-decoration: none;
+  transition: background 0.2s ease;
 }
 
-.feature-card {
-  padding: 32px;
-  background: var(--color-canvas);
-  border: 1px solid var(--color-hairline);
-  border-radius: 12px;
+.entry-row:hover {
+  background: var(--color-surface-soft);
 }
 
-.feature-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
-  background: var(--color-surface-card);
+.entry-num {
+  font-family: var(--font-display);
+  font-size: 15px;
+  color: var(--color-muted-soft);
+  flex-shrink: 0;
+  width: 28px;
+}
+
+.entry-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 22px;
+  width: 42px;
+  height: 42px;
+  border-radius: 10px;
+  background: var(--color-surface-card);
   color: var(--color-primary);
-  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+
+.entry-icon :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.entry-main {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
 }
 
-.feature-title {
+.entry-title {
   font-family: var(--font-body);
-  font-size: 18px;
-  font-weight: 500;
+  font-size: 17px;
+  font-weight: 600;
   color: var(--color-ink);
-  margin: 0 0 8px;
+  transition: color 0.2s ease;
 }
 
-.feature-desc {
+.entry-row:hover .entry-title {
+  color: var(--color-primary);
+}
+
+.entry-desc {
   font-size: 14px;
-  line-height: 1.55;
+  line-height: 1.6;
   color: var(--color-muted);
-  margin: 0;
 }
 
-/* ── CTA band ── */
+.entry-tags {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.entry-arrow {
+  flex-shrink: 0;
+  color: var(--color-muted-soft);
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.entry-arrow :deep(svg) {
+  width: 18px;
+  height: 18px;
+}
+
+.entry-row:hover .entry-arrow {
+  transform: translate(3px, -3px);
+  color: var(--color-primary);
+}
+
+/* ── 标签 ── */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  background: var(--color-surface-soft);
+  color: var(--color-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.tag :deep(svg) {
+  width: 12px;
+  height: 12px;
+}
+
+.featured-card .tag {
+  background: var(--color-surface-dark-elevated);
+  color: var(--color-on-dark-soft);
+}
+
+/* ── 结尾 ── */
 
 .cta-band {
-  padding: 96px 24px;
-  max-width: 1200px;
+  max-width: 1160px;
   margin: 0 auto;
+  padding: 24px 0 96px;
 }
 
-.cta-content {
+.cta-inner {
   background: var(--color-primary);
-  border-radius: 12px;
-  padding: 64px;
+  border-radius: 16px;
+  padding: 72px 48px;
   text-align: center;
   color: var(--color-on-primary);
 }
 
 .cta-title {
+  margin: 0 0 14px;
   font-family: var(--font-display);
-  font-size: 28px;
+  font-size: 36px;
   font-weight: 400;
   letter-spacing: -0.3px;
-  margin: 0 0 12px;
 }
 
 .cta-subtitle {
+  margin: 0 auto 32px;
+  max-width: 40ch;
   font-size: 16px;
-  line-height: 1.55;
-  opacity: 0.85;
-  margin: 0 0 32px;
+  line-height: 1.7;
+  opacity: 0.9;
 }
 
-.btn-primary-on-coral {
+.btn-on-coral {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 44px;
+  height: 46px;
   padding: 0 28px;
   background: var(--color-canvas);
   color: var(--color-ink);
@@ -626,70 +918,113 @@ const features = [
   transition: transform 0.15s ease;
 }
 
-.btn-primary-on-coral:hover {
+.btn-on-coral:hover {
   transform: scale(1.02);
 }
 
-.btn-primary-on-coral:active {
+.btn-on-coral:active {
   transform: scale(0.98);
 }
 
-/* ── Responsive ── */
+/* ── 响应式 ── */
 
 @media (max-width: 1024px) {
   .hero-band {
     grid-template-columns: 1fr;
-    gap: 40px;
-    padding: 64px 24px;
+    gap: 48px;
+    padding: 64px 0 48px;
   }
 
   .hero-title {
-    font-size: 48px;
+    font-size: 52px;
   }
 
-  .agents-grid,
-  .features-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .hero-map {
+    justify-content: flex-start;
+  }
+
+  .map-card {
+    max-width: 100%;
+  }
+
+  .featured-card {
+    grid-template-columns: 1fr;
+    gap: 32px;
+    padding: 36px;
+  }
+
+  .featured-mockup {
+    justify-content: flex-start;
+  }
+
+  .mockup {
+    max-width: 100%;
   }
 }
 
 @media (max-width: 768px) {
   .hero-band {
-    padding: 48px 16px;
+    padding: 40px 0 32px;
+  }
+
+  .hero-signature {
+    font-size: 34px;
   }
 
   .hero-title {
-    font-size: 36px;
+    font-size: 38px;
+    letter-spacing: -0.8px;
   }
 
   .hero-subtitle {
     font-size: 15px;
   }
 
-  .agents-section,
-  .features-section {
-    padding: 64px 16px;
+  .map-head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
   }
 
-  .agents-grid,
-  .features-grid {
-    grid-template-columns: 1fr;
+  .index-section {
+    padding-bottom: 64px;
   }
 
-  .section-title {
-    font-size: 28px;
+  .index-title {
+    font-size: 34px;
   }
 
-  .cta-content {
-    padding: 40px 24px;
+  .entry-row {
+    gap: 14px;
+    padding: 18px 2px;
   }
 
-  .cta-title {
-    font-size: 22px;
+  .entry-tags {
+    display: none;
   }
 
-  .features-grid {
-    padding: 0 16px;
+  .entry-desc {
+    font-size: 13px;
+  }
+
+  .featured-card {
+    padding: 28px 22px;
+  }
+
+  .featured-title {
+    font-size: 27px;
+  }
+
+  .cta-band {
+    padding-bottom: 64px;
+  }
+
+  .cta-inner {
+    padding: 48px 24px;
+  }
+
+  .cta-title {
+    font-size: 27px;
   }
 }
 </style>