文档: 按 Ant/Arco Design 风格重构官网首页，修正 API 参考，完善 i18n (#41)

重构：
- 首页 Hero 重设计：双列布局（标题+CTA+指标 / macOS 风代码窗口）
- 引入渐变文字、pulse 徽章、悬停带动画的主按钮
- 功能卡片加 SVG 图标、悬停提升效果、部分卡片变成可点击链接
- 新增 HomepageShowcase 截图轮播区：Tab 切换四个核心页面（仪表盘/任务/存储/多节点）
- 全站换 Arco 蓝 (#165dff) 作为主色，紫色 (#8f4bff) 作为辅助
- 导航栏加毛玻璃效果、表格加圆角与边框、菜单项圆角化
- 深色模式配色整体收敛

内容修正：
- API 参考补全遗漏的端点：auth logout/profile、records batch-delete、
  storage-targets star/usage/google-drive、notifications test、dashboard timeline、settings
- 把 API 表格改为"方法/端点/说明"三列，加响应结构说明
- 中英文 API 文档同步更新

i18n：
- code.json 补充 Hero、Features、Showcase 全部新翻译键
- 校对：16 个中英文档 frontmatter 完全对齐，无漏译

构建：双语 build 通过、产物 3.3MB

docs-site/src/pages/index.module.css

@@ -1,31 +1,273 @@
-.heroBanner {
-  padding: 5rem 0 4rem;
-  text-align: center;
+/* ── Hero ───────────────────────────────────────────── */
+.hero {
   position: relative;
+  padding: 7rem 0 6rem;
   overflow: hidden;
+  background: var(--bx-hero-bg);
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 3rem 1rem;
+.heroBg {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(104, 127, 255, 0.18) 0%, transparent 45%),
+    radial-gradient(circle at 85% 70%, rgba(22, 93, 255, 0.15) 0%, transparent 50%),
+    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
+  z-index: 0;
+}
+
+[data-theme='dark'] .heroBg {
+  background:
+    radial-gradient(circle at 15% 20%, rgba(96, 126, 255, 0.22) 0%, transparent 45%),
+    radial-gradient(circle at 85% 70%, rgba(118, 70, 255, 0.18) 0%, transparent 50%),
+    linear-gradient(180deg, #0f1115 0%, #0b0d10 100%);
+}
+
+.heroInner {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+@media (max-width: 996px) {
+  .hero {
+    padding: 4rem 0 3rem;
+  }
+  .heroInner {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+    text-align: left;
   }
 }
 
-.buttons {
+.heroContent {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.25rem;
+}
+
+.badge {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 1rem;
+  gap: 8px;
+  padding: 4px 14px;
+  background: rgba(22, 93, 255, 0.08);
+  border: 1px solid rgba(22, 93, 255, 0.15);
+  border-radius: 999px;
+  font-size: 13px;
+  color: var(--ifm-color-primary);
+  font-weight: 500;
+}
+
+[data-theme='dark'] .badge {
+  background: rgba(96, 126, 255, 0.15);
+  border-color: rgba(96, 126, 255, 0.3);
+  color: var(--ifm-color-primary-lighter);
+}
+
+.badgeDot {
+  width: 6px;
+  height: 6px;
+  background: var(--ifm-color-primary);
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.18);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.heroTitle {
+  font-size: clamp(2.25rem, 4vw, 3.4rem);
+  line-height: 1.15;
+  letter-spacing: -0.025em;
+  font-weight: 700;
+  margin: 0;
+  color: var(--ifm-heading-color);
+}
+
+.heroTitleAccent {
+  display: block;
+  background: linear-gradient(90deg, #4080ff 0%, #8f4bff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-top: 6px;
+}
+
+.heroSubtitle {
+  font-size: 1.15rem;
+  line-height: 1.65;
+  color: var(--ifm-color-content-secondary);
+  max-width: 540px;
+  margin: 0;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
   flex-wrap: wrap;
-  margin-top: 1.5rem;
+}
+
+.primaryBtn {
+  background: linear-gradient(90deg, #165dff 0%, #4080ff 100%);
+  border: none;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  box-shadow: 0 6px 20px rgba(22, 93, 255, 0.3);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.primaryBtn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 25px rgba(22, 93, 255, 0.4);
+  color: #fff;
+}
+
+.btnArrow {
+  transition: transform 0.2s ease;
+}
+
+.primaryBtn:hover .btnArrow {
+  transform: translateX(4px);
 }
 
 .secondaryBtn {
-  color: #fff !important;
-  border-color: #fff;
+  background: var(--ifm-background-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  color: var(--ifm-font-color-base);
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500;
+  transition: all 0.2s ease;
 }
 
 .secondaryBtn:hover {
-  background-color: rgba(255, 255, 255, 0.15);
-  color: #fff;
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+  background: var(--ifm-background-color);
+}
+
+.metrics {
+  display: flex;
+  align-items: center;
+  gap: 1.75rem;
+  padding-top: 1.5rem;
+  margin-top: 0.5rem;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.metricValue {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: var(--ifm-heading-color);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.metricLabel {
+  font-size: 12px;
+  color: var(--ifm-color-content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.metricDivider {
+  width: 1px;
+  height: 30px;
+  background: var(--ifm-color-emphasis-300);
+}
+
+/* ── Code window (macOS-style) ─────────────────────── */
+.heroCode {
+  position: relative;
+}
+
+.codeWindow {
+  background: #0f1622;
+  border-radius: 12px;
+  box-shadow:
+    0 20px 50px -10px rgba(15, 22, 34, 0.35),
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+[data-theme='light'] .codeWindow {
+  box-shadow: 0 20px 50px -10px rgba(22, 93, 255, 0.2), 0 0 0 1px rgba(22, 93, 255, 0.06);
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 14px;
+  background: #161f2e;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.codeDot {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+}
+
+.codeDotRed { background: #ff5f56; }
+.codeDotYellow { background: #ffbd2e; }
+.codeDotGreen { background: #27c93f; }
+
+.codeTitle {
+  margin-left: auto;
+  font-size: 11px;
+  color: #7b8696;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.codeBody {
+  margin: 0;
+  padding: 18px 20px;
+  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #e1e7ef;
+  background: transparent;
+  overflow-x: auto;
+}
+
+.codeBody code {
+  background: transparent;
+  padding: 0;
+  border: 0;
+  color: inherit;
+}
+
+.codePrompt {
+  color: #4080ff;
+  margin-right: 6px;
+  user-select: none;
+}
+
+.codeComment {
+  color: #6e7889;
+  font-style: italic;
+}
+
+.codeString {
+  color: #82d1ff;
 }

docs-site/src/pages/index.tsx

@@ -6,47 +6,106 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import Heading from '@theme/Heading';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HomepageShowcase from '@site/src/components/HomepageShowcase';
 
 import styles from './index.module.css';
 
 function HomepageHeader() {
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          BackupX
-        </Heading>
-        <p className="hero__subtitle">
-          <Translate id="home.tagline">
-            Self-hosted server backup management — one binary, one command, manage every backup
-          </Translate>
-        </p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/getting-started/quick-start">
-            <Translate id="home.getStarted">Get Started</Translate>
-          </Link>
-          <Link
-            className={clsx('button button--outline button--secondary button--lg', styles.secondaryBtn)}
-            to="https://github.com/Awuqing/BackupX">
-            GitHub
-          </Link>
+    <header className={styles.hero}>
+      <div className={styles.heroBg} aria-hidden="true" />
+      <div className={clsx('container', styles.heroInner)}>
+        <div className={styles.heroContent}>
+          <div className={styles.badge}>
+            <span className={styles.badgeDot} />
+            <Translate id="home.badge">Open-source · v1.6.0</Translate>
+          </div>
+          <Heading as="h1" className={styles.heroTitle}>
+            <Translate id="home.title.part1">Self-hosted backup management</Translate>
+            <span className={styles.heroTitleAccent}>
+              <Translate id="home.title.part2">for every server.</Translate>
+            </span>
+          </Heading>
+          <p className={styles.heroSubtitle}>
+            <Translate id="home.tagline">
+              One binary, one command. File / database / SAP HANA backups routed to 70+ storage backends.
+            </Translate>
+          </p>
+          <div className={styles.actions}>
+            <Link className={clsx('button button--primary button--lg', styles.primaryBtn)} to="/docs/getting-started/quick-start">
+              <Translate id="home.getStarted">Get Started</Translate>
+              <span className={styles.btnArrow} aria-hidden="true">→</span>
+            </Link>
+            <Link className={clsx('button button--lg', styles.secondaryBtn)} to="https://github.com/Awuqing/BackupX">
+              <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" style={{marginRight: 6}}>
+                <path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 005.47 7.59c.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-.27s1.36.09 2 .27c1.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" />
+              </svg>
+              GitHub
+            </Link>
+          </div>
+          <div className={styles.metrics}>
+            <MetricItem labelId="home.metric.backends" valueClass={styles.metricValue}>70+</MetricItem>
+            <div className={styles.metricDivider} />
+            <MetricItem labelId="home.metric.backupTypes" valueClass={styles.metricValue}>5</MetricItem>
+            <div className={styles.metricDivider} />
+            <MetricItem labelId="home.metric.license" valueClass={styles.metricValue}>Apache 2.0</MetricItem>
+          </div>
+        </div>
+        <div className={styles.heroCode}>
+          <div className={styles.codeWindow}>
+            <div className={styles.codeHeader}>
+              <span className={clsx(styles.codeDot, styles.codeDotRed)} />
+              <span className={clsx(styles.codeDot, styles.codeDotYellow)} />
+              <span className={clsx(styles.codeDot, styles.codeDotGreen)} />
+              <span className={styles.codeTitle}>bash</span>
+            </div>
+            <pre className={styles.codeBody}>
+              <code>
+                <span className={styles.codeComment}># Docker one-liner</span>{'\n'}
+                <span className={styles.codePrompt}>$</span> docker run -d --name backupx \{'\n'}
+                {'    '}-p 8340:8340 \{'\n'}
+                {'    '}-v backupx-data:/app/data \{'\n'}
+                {'    '}awuqing/backupx:latest{'\n'}
+                {'\n'}
+                <span className={styles.codeComment}># Open http://localhost:8340</span>{'\n'}
+                <span className={styles.codeComment}># Deploy an Agent on a remote host</span>{'\n'}
+                <span className={styles.codePrompt}>$</span> backupx agent \{'\n'}
+                {'    '}--master <span className={styles.codeString}>http://master:8340</span> \{'\n'}
+                {'    '}--token <span className={styles.codeString}>&lt;token&gt;</span>
+              </code>
+            </pre>
+          </div>
         </div>
       </div>
     </header>
   );
 }
 
+function MetricItem({children, labelId, valueClass}: {children: ReactNode; labelId: string; valueClass: string}) {
+  return (
+    <div className={styles.metric}>
+      <div className={valueClass}>{children}</div>
+      <div className={styles.metricLabel}>
+        <Translate id={labelId}>
+          {labelId === 'home.metric.backends' ? 'Storage backends'
+            : labelId === 'home.metric.backupTypes' ? 'Backup types'
+            : 'License'}
+        </Translate>
+      </div>
+    </div>
+  );
+}
+
 export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={translate({id: 'home.title', message: 'Self-hosted backup management'})}
+      title={translate({id: 'home.pageTitle', message: 'Self-hosted backup management'})}
       description={siteConfig.tagline}>
       <HomepageHeader />
       <main>
         <HomepageFeatures />
+        <HomepageShowcase />
       </main>
     </Layout>
   );