style: redesign product page layout, fix width and copy

Author: ouyyyyang

site-src/docs/.vitepress/config.mts

@@ -67,14 +67,10 @@ export default defineConfig({
       ]
     },
     footer: {
-      message: "基于 MIT License 发布。",
-      copyright: "(c) 2026 MathClaw"
+      message: "基于 MIT License 发布",
+      copyright: "© 2026 MathClaw"
     },
-    editLink: {
-      pattern: "https://github.com/MathClaw-ruc/MathClaw/edit/main/docs/:path",
-      text: "在 GitHub 上编辑此页"
-    },
-    outline: {
+outline: {
       label: "本页目录"
     },
     docFooter: {

site-src/docs/.vitepress/theme/custom.css

@@ -172,19 +172,25 @@
 }
 
 .vp-doc {
-  max-width: 1280px !important;
+  max-width: 100% !important;
 }
 
-.VPContent:not(.has-sidebar) .VPDoc .container {
-  max-width: 1320px;
+.VPDoc:not(.has-sidebar) .container {
+  max-width: 1400px !important;
 }
 
-.VPContent:not(.has-sidebar) .VPDoc .content {
-  padding: 0 24px 84px;
+.VPDoc:not(.has-sidebar) .content {
+  max-width: 100% !important;
+  padding: 0 48px 84px;
 }
 
-.VPContent:not(.has-sidebar) .VPDoc .content-container {
-  max-width: 1260px;
+.VPDoc:not(.has-sidebar) .content-container {
+  max-width: 1400px !important;
+  margin: 0 auto;
+}
+
+.VPDoc.has-aside .content-container {
+  max-width: 1400px !important;
 }
 
 .VPContent.has-sidebar .VPDoc .content-container {
@@ -400,6 +406,12 @@
   position: relative;
   padding: 22px;
   border-radius: 24px;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.timeline-card:hover {
+  box-shadow: var(--mathclaw-card-shadow-strong);
+  transform: translateY(-2px);
 }
 
 .timeline-card::after {
@@ -549,12 +561,23 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) 300px;
   gap: 24px;
-  align-items: stretch;
+  align-items: start;
   padding: 32px;
   border-radius: 32px;
   margin: 20px 0 0;
 }
 
+.product-header--stacked {
+  grid-template-columns: 1fr;
+  gap: 28px;
+}
+
+.product-header__stats--row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
 .product-header__copy h1 {
   margin: 10px 0 12px;
   font-size: clamp(30px, 3.4vw, 44px);
@@ -579,17 +602,30 @@
 }
 
 .product-stat strong {
-  display: block;
-  font-size: 36px;
+  display: inline;
+  font-size: 40px;
   line-height: 1;
   letter-spacing: -0.05em;
+  color: var(--vp-c-brand-1);
+  margin-right: 2px;
 }
 
-.product-stat span {
+.product-stat .product-stat__label {
+  display: inline;
+  margin-top: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.product-stat .product-stat__desc {
   display: block;
   margin-top: 8px;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .scenario-grid {
@@ -614,10 +650,16 @@
   align-items: center;
   padding: 26px;
   border-radius: 30px;
+  transition: box-shadow 0.3s ease, transform 0.3s ease;
+}
+
+.page-showcase:hover {
+  box-shadow: var(--mathclaw-card-shadow-strong);
+  transform: translateY(-2px);
 }
 
 .page-showcase + .page-showcase {
-  margin-top: 18px;
+  margin-top: 28px;
 }
 
 .page-showcase--reverse .page-showcase__body {
@@ -1216,6 +1258,10 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .timeline-card::after {
+    display: none;
+  }
+
   .VPHero .container,
   .surface-panel,
   .product-header,
@@ -1318,10 +1364,18 @@
     grid-column: auto;
   }
 
+  .page-showcase--reverse .page-showcase__body {
+    order: unset;
+  }
+
   .page-showcase__body h3 {
     font-size: 26px;
   }
 
+  .timeline-card::after {
+    display: none;
+  }
+
   .cta-panel {
     padding: 22px;
   }

site-src/docs/product.md

@@ -3,7 +3,7 @@ outline: false
 aside: false
 ---
 
-<div class="product-header">
+<div class="product-header product-header--stacked">
   <div class="product-header__copy">
     <span class="section-kicker">产品概览</span>
     <h1>一套产品，串起做题、计划、图谱与回看</h1>
@@ -14,21 +14,25 @@ aside: false
       <span>知识图谱</span>
       <span>错题图谱</span>
       <span>运行状态</span>
-      <span>附加输出</span>
+      <span>心跳调度</span>
+      <span>技能面板</span>
     </div>
   </div>
-  <div class="product-header__stats">
+  <div class="product-header__stats product-header__stats--row">
     <div class="product-stat">
       <strong>7</strong>
-      <span>核心界面，覆盖学生侧与管理侧</span>
+      <span class="product-stat__label">个核心界面</span>
+      <span class="product-stat__desc">覆盖学生工作区与管理控制台</span>
     </div>
     <div class="product-stat">
       <strong>4</strong>
-      <span>连续阶段，从输入到长期回看</span>
+      <span class="product-stat__label">个连续阶段</span>
+      <span class="product-stat__desc">输入 → 运行 → 沉淀 → 回看</span>
     </div>
     <div class="product-stat">
       <strong>3</strong>
-      <span>外部通道，可接入企业微信、QQ、飞书</span>
+      <span class="product-stat__label">个外部通道</span>
+      <span class="product-stat__desc">企业微信 · QQ · 飞书</span>
     </div>
   </div>
 </div>

site-src/docs/zh/product.md

@@ -3,7 +3,7 @@ outline: false
 aside: false
 ---
 
-<div class="product-header">
+<div class="product-header product-header--stacked">
   <div class="product-header__copy">
     <span class="section-kicker">产品概览</span>
     <h1>一套产品，串起做题、计划、图谱与回看</h1>
@@ -14,41 +14,45 @@ aside: false
       <span>知识图谱</span>
       <span>错题图谱</span>
       <span>运行状态</span>
-      <span>附加输出</span>
+      <span>定时任务</span>
+      <span>技能面板</span>
     </div>
   </div>
-  <div class="product-header__stats">
+  <div class="product-header__stats product-header__stats--row">
     <div class="product-stat">
       <strong>7</strong>
-      <span>核心界面，覆盖学生侧与管理侧</span>
+      <span class="product-stat__label">个核心界面</span>
+      <span class="product-stat__desc">覆盖学生工作区与管理控制台</span>
     </div>
     <div class="product-stat">
       <strong>4</strong>
-      <span>连续阶段，从输入到长期回看</span>
+      <span class="product-stat__label">个连续阶段</span>
+      <span class="product-stat__desc">输入 → 运行 → 沉淀 → 回看</span>
     </div>
     <div class="product-stat">
       <strong>3</strong>
-      <span>外部通道，可接入企业微信、QQ、飞书</span>
+      <span class="product-stat__label">个外部通道</span>
+      <span class="product-stat__desc">企业微信 · QQ · 飞书</span>
     </div>
   </div>
 </div>
 
 <section class="section-block">
   <div class="section-header">
     <span class="section-kicker">关键页面</span>
-    <h2>按页面分工来理解这套产品</h2>
-    <p>首页只负责概览；产品页应该把每个关键页面承担什么角色讲清楚，所以这里直接按页面展开，不再重复堆截图。</p>
+    <h2>每个界面各司其职</h2>
+    <p>从解题到复盘，每个页面承担一个明确的角色，下面按功能逐一展开。</p>
   </div>
 
   <div class="page-showcase">
     <div class="page-showcase__body">
       <span class="section-kicker">学生入口</span>
       <h3>解题工作台是整个学习体验的起点</h3>
-      <p>学生在这里上传图片和 PDF，查看诊断、讲解、批改和连续追问。它既是交互入口，也是后续记忆沉淀的来源。</p>
+      <p>学生在这里上传图片和 PDF，获得分步讲解、批改反馈，并可以连续追问。所有交互记录会自动沉淀为后续记忆的来源。</p>
       <ul class="page-checklist">
-        <li>统一承接题目输入和追问上下文</li>
-        <li>把做题、讲解和批改放在同一界面内</li>
-        <li>避免“聊天在一边、资料在另一边”的割裂感</li>
+        <li>支持文本、图片、截图和 PDF 多种输入方式</li>
+        <li>做题、讲解和批改集中在同一界面</li>
+        <li>对话上下文自动保持，支持连续追问</li>
       </ul>
     </div>
     <div class="page-showcase__media">
@@ -60,11 +64,11 @@ aside: false
     <div class="page-showcase__body">
       <span class="section-kicker">行动层</span>
       <h3>学习计划把记忆结果转成可执行动作</h3>
-      <p>优先复习点、重点纠错方向、明日建议和每周目标都从记忆层抽取出来，让学生知道下一步该做什么，而不是只得到一段回答。</p>
+      <p>优先复习点、重点纠错方向、明日建议和每周目标都从记忆层自动提取，让学生清楚下一步该做什么。</p>
       <ul class="page-checklist">
-        <li>从历史会话提炼优先级和任务顺序</li>
-        <li>让学习推进有明确节奏，而不是纯靠即时提问</li>
-        <li>把长期跟踪结果转成每天可执行的面板</li>
+        <li>从历史会话中自动提炼优先级和任务顺序</li>
+        <li>每天生成可执行的复习面板</li>
+        <li>学习推进有明确节奏，不再纯靠即时提问</li>
       </ul>
     </div>
     <div class="page-showcase__media">
@@ -75,12 +79,12 @@ aside: false
   <div class="page-showcase">
     <div class="page-showcase__body">
       <span class="section-kicker">结构化记忆</span>
-      <h3>知识图谱和错题图谱让复盘真正长期化</h3>
-      <p>知识图谱突出前置关系和掌握结构，错题图谱聚焦高频错误模式和建议动作。两者一起把“会不会”变成可见的结构状态。</p>
+      <h3>知识图谱将学习状态结构化沉淀</h3>
+      <p>通过图结构呈现知识点之间的前置依赖、掌握程度和高频错因，将零散的学习记录转化为可持续追踪的结构化资产。</p>
       <ul class="page-checklist">
-        <li>突出知识点之间的前置关系和掌握情况</li>
-        <li>沉淀高频错因，方便针对性复盘</li>
-        <li>让长期学习不再停留在零散对话记录里</li>
+        <li>可视化知识点之间的前置依赖与掌握情况</li>
+        <li>自动归纳高频错因，定位真正的薄弱环节</li>
+        <li>学习轨迹持续积累，支持长期针对性复盘</li>
       </ul>
     </div>
     <div class="page-showcase__media">
@@ -91,12 +95,12 @@ aside: false
   <div class="page-showcase page-showcase--reverse">
     <div class="page-showcase__body">
       <span class="section-kicker">管理侧</span>
-      <h3>运行状态、心跳和附加输出构成控制平面</h3>
-      <p>除了学生体验本身，MathClaw 也把系统是否健康、任务是否按节律运行、输出风格如何控制做成了明确页面，方便持续运营。</p>
+      <h3>运行状态与定时任务构成系统控制面</h3>
+      <p>MathClaw 将系统健康度、定时任务节律和技能配置做成独立页面，方便管理员监控和持续运营。</p>
       <ul class="page-checklist">
-        <li>监控 gateway、console 和自动任务的健康度</li>
-        <li>通过心跳和运行状态快速定位问题</li>
-        <li>用附加输出规则管理附件回复的风格表达</li>
+        <li>实时查看 Gateway、Console 和自动任务的运行状态</li>
+        <li>通过定时巡检快速发现异常并定位问题</li>
+        <li>技能面板集中管理 AI 助手的能力配置</li>
       </ul>
     </div>
     <div class="page-showcase__media">
@@ -108,29 +112,29 @@ aside: false
 <section class="section-block">
   <div class="section-header">
     <span class="section-kicker">产品链路</span>
-    <h2>这些页面前后相接，而不是平铺罗列</h2>
-    <p>从产品展示的角度，重点不是把页面列全，而是说明它们为什么会一起出现。MathClaw 的页面分别承担输入、运行、沉淀和回看四个阶段。</p>
+    <h2>四个阶段前后相接，形成完整闭环</h2>
+    <p>每个页面不是孤立存在，而是分别承担输入、运行、沉淀和回看四个阶段，数据在页面之间自然流转。</p>
   </div>
   <div class="timeline-grid">
     <article class="timeline-card">
       <span class="timeline-card__step">01</span>
       <h3>输入</h3>
-      <p>题目、附件和追问都从统一入口进入，产品链路从这里开始建立上下文。</p>
+      <p>题目、图片和追问从统一入口进入，建立完整的学习上下文。</p>
     </article>
     <article class="timeline-card">
       <span class="timeline-card__step">02</span>
       <h3>运行</h3>
-      <p>代理负责解题、讲解、批改和连续追问，并在需要时叠加更合适的输出风格。</p>
+      <p>AI 助手完成解题、讲解、批改和连续追问，实时输出学习反馈。</p>
     </article>
     <article class="timeline-card">
       <span class="timeline-card__step">03</span>
       <h3>沉淀</h3>
-      <p>学习会话被更新到计划、知识图谱、错题图谱和总结里，形成可持续的学习资产。</p>
+      <p>学习记录自动更新到计划、知识图谱和错题图谱，形成持续积累的学习资产。</p>
     </article>
     <article class="timeline-card">
       <span class="timeline-card__step">04</span>
       <h3>回看</h3>
-      <p>管理侧通过运行状态、心跳和控制页面判断系统是否稳定，并继续优化整体产品节律。</p>
+      <p>管理侧通过运行状态和定时巡检掌握系统健康度，持续优化整体运行节律。</p>
     </article>
   </div>
 </section>