From cfcdd988dbdc752422944fdb3bb71c858cad61f1 Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Sun, 19 Apr 2026 20:18:56 +0800
Subject: [PATCH] feat(landing): add Models wall + Features sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added Models section (② 模型墙) with 5 platform cards (Claude, GPT, Codex, Gemini, More)
- Added Features section (③ 三特性) with 3 feature cards (unified key, account pool failover, analytics dashboard)
- Implemented responsive grid layouts with scoped CSS rules
- Used existing design tokens and brand colors from puro.css

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/landing/LandingView.vue | 125 +++++++++++++++++++++
 1 file changed, 125 insertions(+)

diff --git a/frontend/src/views/landing/LandingView.vue b/frontend/src/views/landing/LandingView.vue
index f1e10ced..570a18aa 100644
--- a/frontend/src/views/landing/LandingView.vue
+++ b/frontend/src/views/landing/LandingView.vue
@@ -42,6 +42,67 @@
         已验证可用 Codex CLI · Claude Code · curl · 服务器出口新加坡
       </div>
     </section>
+
+    <!-- ② 模型墙 -->
+    <section class="block container" id="models">
+      <div class="section-header">
+        <div class="section-kicker">支持的 AI 平台</div>
+        <h2 class="section-title">通过 OAuth 直接复用你的订阅</h2>
+        <p class="section-sub">无需申请官方 API key，也无需切换账号</p>
+      </div>
+      <div class="model-wall">
+        <div class="model-card">
+          <div class="model-dot" style="background: var(--p-claude)"></div>
+          <div class="model-name">Claude Pro / Max</div>
+          <div class="model-meta">Anthropic OAuth</div>
+        </div>
+        <div class="model-card">
+          <div class="model-dot" style="background: var(--p-gpt)"></div>
+          <div class="model-name">ChatGPT Plus / Pro</div>
+          <div class="model-meta">OpenAI OAuth</div>
+        </div>
+        <div class="model-card">
+          <div class="model-dot" style="background: var(--p-codex)"></div>
+          <div class="model-name">Codex CLI</div>
+          <div class="model-meta">OpenAI OAuth</div>
+        </div>
+        <div class="model-card">
+          <div class="model-dot" style="background: var(--p-gemini)"></div>
+          <div class="model-name">Gemini Code Assist</div>
+          <div class="model-meta">Google OAuth</div>
+        </div>
+        <div class="model-card is-muted">
+          <div class="model-dot" style="background: var(--text-3)"></div>
+          <div class="model-name">更多</div>
+          <div class="model-meta">规划中</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ③ 三特性 -->
+    <section class="block container" id="features">
+      <div class="section-header">
+        <div class="section-kicker">核心特性</div>
+        <h2 class="section-title">一套 key，三件武器</h2>
+      </div>
+      <div class="features">
+        <div class="feature card">
+          <div class="feature-icon">⚡</div>
+          <h3>一个 key 接所有模型</h3>
+          <p>不再为每个 provider 申请 API key、配置 base_url。统一 <code class="mono">sk-</code> 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。</p>
+        </div>
+        <div class="feature card">
+          <div class="feature-icon">🔄</div>
+          <h3>账号池高可用</h3>
+          <p>支持多账号自动调度与 failover。某个上游触发限流 / 冷却时，流量切到下一个健康账号，token 刷新全自动。</p>
+        </div>
+        <div class="feature card">
+          <div class="feature-icon">📊</div>
+          <h3>用量看板</h3>
+          <p>每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。</p>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -93,4 +154,68 @@
   color: var(--text-3);
   font-family: var(--font-mono);
 }
+
+.container {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 24px;
+  position: relative;
+  z-index: 2;
+}
+.block { padding: 80px 24px; }
+.section-header { text-align: center; margin-bottom: 40px; }
+.section-kicker {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--cyan);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  margin-bottom: 12px;
+  font-family: var(--font-mono);
+}
+.section-title {
+  font-size: clamp(28px, 3.5vw, 40px);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 12px;
+}
+.section-sub { color: var(--text-2); font-size: 15px; }
+
+/* model wall */
+.model-wall {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+.model-card {
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--bg-1);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.model-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.model-name { font-weight: 600; font-size: 14px; }
+.model-meta { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }
+.model-card.is-muted { opacity: 0.5; }
+.model-card.is-muted .model-name { color: var(--text-2); }
+
+/* features */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+.feature {
+  padding: 28px 24px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--bg-1);
+}
+.feature-icon { font-size: 28px; margin-bottom: 14px; }
+.feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
+.feature p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
+.feature code { color: var(--cyan); font-size: 13px; }
 </style>