feat: improve local demo and documentation

docs-site/i18n/zh-CN/code.json

@@ -83,14 +83,18 @@
   "showcase.tab.tasks": {"message": "备份任务"},
   "showcase.tab.storage": {"message": "存储目标"},
   "showcase.tab.nodes": {"message": "多节点"},
-  "showcase.dashboard.title": {"message": "一眼掌握全局"},
-  "showcase.dashboard.desc": {"message": "备份成功率、存储使用量、最近执行记录、即将触发的计划 — 一页实时数据。"},
-  "showcase.tasks.title": {"message": "可视化任务编辑器"},
-  "showcase.tasks.desc": {"message": "文件、MySQL、PostgreSQL、SQLite、SAP HANA — 三步完成。Cron 编辑器、多目标分发、保留策略、压缩、加密 — 点击即用。"},
-  "showcase.storage.title": {"message": "70+ 后端，统一体验"},
-  "showcase.storage.desc": {"message": "阿里云 OSS、腾讯云 COS、S3、Google Drive、WebDAV — 加上每一种 rclone 后端。测试连接、收藏、查看实时容量。"},
-  "showcase.nodes.title": {"message": "几分钟搭起 Master-Agent"},
-  "showcase.nodes.desc": {"message": "创建节点、复制令牌、在任意远程主机启动 Agent。路由到节点的任务在本地执行并直接上传到存储 — 无需反向连通性。"},
+  "showcase.dashboard.alt": {"message": "BackupX 仪表盘，展示 30 天备份趋势、存储分布、任务规模和集群健康度"},
+  "showcase.dashboard.title": {"message": "一眼掌握运行态"},
+  "showcase.dashboard.desc": {"message": "在一个实时运维视图中掌握 30 天成功/失败趋势、存储分布、任务数量、数据量和最近执行记录。"},
+  "showcase.tasks.alt": {"message": "BackupX 任务列表，展示调度、存储目标、保留策略、标签、RPO 目标和验证状态"},
+  "showcase.tasks.title": {"message": "策略状态清晰可扫"},
+  "showcase.tasks.desc": {"message": "集中查看调度、多目标策略、保留规则、标签、RPO 目标和验证状态，并可一键操作任意任务。"},
+  "showcase.storage.alt": {"message": "BackupX 存储目标，展示连接状态、实时容量、收藏和冗余角色"},
+  "showcase.storage.title": {"message": "每个目标，统一视图"},
+  "showcase.storage.desc": {"message": "统一比较本地磁盘与 70+ 远程后端的连接状态、实时容量、收藏及冗余角色。"},
+  "showcase.nodes.alt": {"message": "BackupX 节点列表，展示健康度、Agent 版本、队列深度、标签和心跳时间"},
+  "showcase.nodes.title": {"message": "集群健康一屏掌握"},
+  "showcase.nodes.desc": {"message": "集中监控本地 Master 与每个远程节点的健康度、Agent 版本、队列深度、标签和心跳时间。"},
   "showcase.cta": {"message": "开始阅读文档"},
 
   "community.tag": {"message": "社区"},

docs-site/src/components/HomepageShowcase/index.tsx

@@ -2,7 +2,7 @@ import type {ReactNode} from 'react';
 import {useState} from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
-import Translate from '@docusaurus/Translate';
+import Translate, {translate} from '@docusaurus/Translate';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
@@ -11,6 +11,7 @@ type Tab = {
   id: string;
   label: ReactNode;
   image: string;
+  imageAlt: string;
   title: ReactNode;
   description: ReactNode;
 };
@@ -21,10 +22,14 @@ function useTabs(): Tab[] {
       id: 'dashboard',
       label: <Translate id="showcase.tab.dashboard">Dashboard</Translate>,
       image: useBaseUrl('/img/screenshots/dashboard.png'),
-      title: <Translate id="showcase.dashboard.title">Know at a glance</Translate>,
+      imageAlt: translate({
+        id: 'showcase.dashboard.alt',
+        message: 'BackupX dashboard showing 30-day backup trends, storage distribution, task volume and cluster health',
+      }),
+      title: <Translate id="showcase.dashboard.title">Operations at a glance</Translate>,
       description: (
         <Translate id="showcase.dashboard.desc">
-          Backup success rates, storage usage, recent runs and upcoming schedules — all on one page with live data.
+          Track 30-day success and failure trends, storage distribution, task counts, data volume and recent runs from one live operations view.
         </Translate>
       ),
     },
@@ -32,10 +37,14 @@ function useTabs(): Tab[] {
       id: 'tasks',
       label: <Translate id="showcase.tab.tasks">Backup Tasks</Translate>,
       image: useBaseUrl('/img/screenshots/backup-tasks.png'),
-      title: <Translate id="showcase.tasks.title">Visual task editor</Translate>,
+      imageAlt: translate({
+        id: 'showcase.tasks.alt',
+        message: 'BackupX task list showing schedules, storage targets, retention, tags, RPO goals and verification status',
+      }),
+      title: <Translate id="showcase.tasks.title">Policies you can scan</Translate>,
       description: (
         <Translate id="showcase.tasks.desc">
-          Files, MySQL, PostgreSQL, SQLite and SAP HANA with a three-step wizard. Cron editor, multi-target dispatch, retention, compression and encryption — point and click.
+          Review schedules, multi-target policies, retention, tags, RPO goals and verification status together, then act on any task in one click.
         </Translate>
       ),
     },
@@ -43,10 +52,14 @@ function useTabs(): Tab[] {
       id: 'storage',
       label: <Translate id="showcase.tab.storage">Storage Targets</Translate>,
       image: useBaseUrl('/img/screenshots/storage-targets.png'),
-      title: <Translate id="showcase.storage.title">70+ backends, one flow</Translate>,
+      imageAlt: translate({
+        id: 'showcase.storage.alt',
+        message: 'BackupX storage targets showing connection health, live capacity, favourites and redundancy roles',
+      }),
+      title: <Translate id="showcase.storage.title">Every target, one view</Translate>,
       description: (
         <Translate id="showcase.storage.desc">
-          Alibaba OSS, Tencent COS, S3, Google Drive, WebDAV — plus every rclone backend behind a uniform form. Test connection, favourite, and view live usage.
+          Compare connection health, live capacity, favourites and redundancy roles across local disks and 70+ remote backends.
         </Translate>
       ),
     },
@@ -54,10 +67,14 @@ function useTabs(): Tab[] {
       id: 'nodes',
       label: <Translate id="showcase.tab.nodes">Multi-Node</Translate>,
       image: useBaseUrl('/img/screenshots/nodes.png'),
-      title: <Translate id="showcase.nodes.title">Master-Agent in minutes</Translate>,
+      imageAlt: translate({
+        id: 'showcase.nodes.alt',
+        message: 'BackupX node list showing health, Agent versions, queue depth, labels and heartbeat times',
+      }),
+      title: <Translate id="showcase.nodes.title">Cluster health in one view</Translate>,
       description: (
         <Translate id="showcase.nodes.desc">
-          Create a node, copy the token, start the Agent on any remote host. Tasks routed to a node run locally there and upload directly to storage — no reverse connectivity required.
+          Monitor health, Agent versions, queue depth, labels and heartbeat time across the local Master and every remote node.
         </Translate>
       ),
     },
@@ -103,7 +120,7 @@ export default function HomepageShowcase(): ReactNode {
               <span className={clsx(styles.browserDot, styles.browserDotGreen)} />
               <div className={styles.browserUrl}>backupx.local</div>
             </div>
-            <img src={current.image} alt="" className={styles.screenshot} />
+            <img src={current.image} alt={current.imageAlt} className={styles.screenshot} />
           </div>
           <div className={styles.caption}>
             <Heading as="h3" className={styles.captionTitle}>{current.title}</Heading>