feat(website): 展示 Mpider 已完成功能

website/src/pages/index.astro

@@ -3,6 +3,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 import faqs from '../config/faqs.json';
 import { product, siteUrl, plainText } from '../lib/site';
 
+const capabilities = [
+  { title: '监测本地微信推送', description: '后台发现并保存本机微信中的文章链接，开启处理后按公众号范围和发布时间筛选、去重入库。扫描与处理独立控制，停止扫描后仍可处理已保存链接。' },
+  { title: '同步公众号最新文章', description: '开启主页识别，在微信中手动打开目标公众号主页完成登记，再按需同步首页文章。自动去重，不影响历史采集进度。' },
+  { title: '按需采集历史文章', description: '按追加篇数或截止日期采集历史，支持暂停和检查点续采。会话过期时，按提示重新打开公众号主页，更新后继续原任务。' },
+  { title: '下载正文与图片', description: '单篇、勾选或整号批量下载，自动跳过已有正文。正文与图片保存在自己的电脑里，可在文章库筛选和离线阅读。' },
+  { title: '导出自己的文章资料库', description: '同时导出 Markdown 和保留正文排版的 HTML，附可搜索目录、共享图片与 CSV 清单。下载完成后，单篇、批量或整号都能导出。' },
+  { title: '掌握任务进度与请求节奏', description: '分别管理首页同步、历史采集与正文下载，查看进度、请求记录和日志。可配置各类请求间隔、正文与图片并发，以及列表与文章请求预算。' },
+];
+
 const schema = [
   { '@type': 'SoftwareApplication', name: product.name, url: siteUrl(), applicationCategory: 'UtilitiesApplication', operatingSystem: 'Windows', downloadUrl: product.download, license: `${product.repository}/blob/main/LICENSE`, description: product.description, offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' } },
   { '@type': 'FAQPage', mainEntity: faqs.map((faq) => ({ '@type': 'Question', name: faq.question, acceptedAnswer: { '@type': 'Answer', text: plainText(faq.answerHtml) } })) },
@@ -24,6 +33,20 @@ const schema = [
           <p class="kp-source"><a href={product.repository} target="_blank" rel="noopener noreferrer">开源项目地址 ↗</a></p>
         </div>
       </section>
+      <section class="kp-capabilities" id="mpider-capabilities" aria-labelledby="mpider-capabilities-title">
+        <p class="kp-faq-label">功能一览 / v2.0.1</p>
+        <h2 id="mpider-capabilities-title">Mpider 可以做什么</h2>
+        <p class="kp-capabilities-intro">从发现文章到离线归档，把想留下的公众号内容留在自己手里。</p>
+        <ul class="kp-capabilities-grid">
+          {capabilities.map((capability, index) => (
+            <li>
+              <span class="kp-capability-number" aria-hidden="true">{String(index + 1).padStart(2, '0')}</span>
+              <h3>{capability.title}</h3>
+              <p>{capability.description}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
       <section class="kp-faq" id="mpider-risk-faq" aria-labelledby="mpider-faq-title">
         <p class="kp-faq-label">FAQ / 风险与透明</p>
         <h2 id="mpider-faq-title">使用之前，先了解这些。</h2>

website/src/styles/site.css

@@ -26,6 +26,14 @@
   #mpider-landing .kp-link-main { background: var(--kp-yellow); color: #192219; border-color: var(--kp-yellow); }
   #mpider-landing .kp-source { margin: 0.875rem 0 0; }
   #mpider-landing .kp-source a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--kp-muted); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 0.3125rem; }
+  #mpider-landing .kp-capabilities { position: relative; z-index: 1; max-width: 46.5rem; margin: 0 auto; padding: 0 2rem 4rem; scroll-margin-top: 1.5rem; }
+  #mpider-landing .kp-capabilities h2 { margin-bottom: 0.75rem; }
+  #mpider-landing .kp-capabilities-intro { margin: 0 0 1.75rem; color: var(--kp-muted); font-size: 0.875rem; line-height: 1.9; }
+  #mpider-landing .kp-capabilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; padding: 0; list-style: none; }
+  #mpider-landing .kp-capabilities-grid li { padding-top: 1.25rem; }
+  #mpider-landing .kp-capability-number { display: inline-block; padding: 0.1875rem 0.375rem; background: var(--kp-yellow); color: #192219; font-size: 0.6875rem; font-weight: 700; }
+  #mpider-landing .kp-capabilities-grid h3 { margin: 0.75rem 0 0.5rem; font-size: 1rem; line-height: 1.6; }
+  #mpider-landing .kp-capabilities-grid p { margin: 0; color: var(--kp-muted); font-size: 0.875rem; line-height: 1.9; }
   #mpider-landing .kp-faq { position: relative; z-index: 1; max-width: 46.5rem; margin: 0 auto; padding: 0 2rem 4rem; scroll-margin-top: 1.5rem; }
   #mpider-landing .kp-faq-label { margin: 0 0 0.5625rem; color: var(--kp-muted); font-size: 0.6875rem; letter-spacing: .12em; }
   #mpider-landing h2 { margin: 0 0 1.625rem; color: var(--kp-ink); font-size: clamp(1.5625rem,4.2cqw,2rem); line-height: 1.4; font-weight: 800; letter-spacing: -.04em; }
@@ -41,13 +49,15 @@
   #mpider-landing .kp-answer li { padding-left: 0.125rem; margin-bottom: 0.3125rem; }
   @media (max-width:40rem) {
     #mpider-landing .kp-links { grid-template-columns: 1fr; gap: 0.5625rem; }
+    #mpider-landing .kp-capabilities-grid { grid-template-columns: 1fr; }
   }
   @media (max-width:30rem) {
     #mpider-landing .kp-header { padding: 1.25rem 1.25rem 0; gap: 0.75rem; }
     #mpider-landing .kp-logo { font-size: 1.25rem; }
     #mpider-landing .kp-hero { min-height: 36.875rem; padding: 2.5rem 1.25rem 3.875rem; }
     #mpider-landing .kp-description { margin: 1.375rem 0; font-size: 0.8125rem; }
     #mpider-landing .kp-faq { padding: 0 1.25rem 2.5rem; }
+    #mpider-landing .kp-capabilities { padding: 0 1.25rem 2.5rem; }
     #mpider-landing .kp-answer { padding-right: 0; font-size: 0.8125rem; }
     #mpider-landing summary { gap: 0.75rem; font-size: 0.875rem; }
   }