LunariaJS 本地化仪表板：一眼看懂翻译进度

在前面的文章中，我们学习了如何安装、配置和运行 LunariaJS。今天，让我们深入了解 LunariaJS 最强大的功能 —— 本地化仪表板，学会用它来高效管理多语言项目。

💡 官方文档：LunariaJS 中文文档 - 仪表板

仪表板概述

什么是本地化仪表板？

本地化仪表板是一个可视化界面，用于展示项目的翻译状态。它回答了维护者最关心的几个问题：

整体进度如何？ 每种语言的翻译完成度是多少？
哪些文件需要关注？ 哪些翻译过时了？哪些还缺失？
翻译质量如何？ 翻译是否与源文档保持同步？

为什么需要仪表板？

在传统的本地化管理中，追踪翻译状态通常需要：

手动维护一个电子表格
在文件中添加各种 TODO 注释
依赖贡献者自行报告进度

这些方法都有明显的问题：信息分散、更新不及时、难以维护。

LunariaJS 仪表板通过自动化解决了这些问题：

自动更新：每次构建时自动分析翻译状态
集中展示：所有语言、所有文件的状态一目了然
实时同步：与 Git 仓库状态完全同步

仪表板界面解析

主界面布局

访问仪表板后，你会看到一个清晰的界面：

┌─────────────────────────────────────────────────────────────┐
│  🌙 My Project - Localization Status                        │
├─────────────────────────────────────────────────────────────┤
│  [语言选择器]  [状态筛选器]                                   │
├─────────────────────────────────────────────────────────────┤
│  总体进度                                                    │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source) ████████████████████ 100%         ││
│  │  🇨🇳 中文              ██████████████░░░░░░  85%         ││
│  │  🇯🇵 日本語            ████████████░░░░░░░░░░ 70%         ││
│  │  🇰🇷 한국어            ████████░░░░░░░░░░░░░░ 55%         ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  文件列表                                                    │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  📄 index.md                    🟢 🟢 🟢 🟢             ││
│  │  📄 getting-started.md          🟢 🟢 🟡 🟢             ││
│  │  📄 configuration.md            🟢 🟢 🟢 🔴             ││
│  │  📄 api/overview.md             🟢 🔴 🔴 🔴             ││
│  └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘

区域说明

1. 顶部导航栏

项目标题
语言切换器（如果支持多语言界面）
主题切换（明/暗模式）

2. 语言选择器

允许你按语言筛选显示内容：

[全部语言 ▼]  [English]  [中文]  [日本語]  [한국어]

3. 状态筛选器

按翻译状态筛选文件：

[全部状态 ▼]  [✅ 完成]  [⚠️ 过时]  [❌ 缺失]

4. 总体进度区域

显示每种语言的整体翻译完成度：

元素	说明
语言旗帜/图标	语言标识
语言名称	语言全名
进度条	可视化完成度
百分比	具体完成比例

5. 文件列表区域

列出所有被追踪的文件及其翻译状态。

翻译状态详解

LunariaJS 使用三种状态来标识每个翻译文件的状态。

🟢 Done（完成）

含义：翻译已完成且与源文件同步。

判定条件：

翻译文件存在
翻译文件的最后修改时间 ≥ 源文件的最后修改时间

示例：

📄 getting-started.md
├── 源文件: en/getting-started.md (修改于 2026-02-28)
├── 翻译: zh-cn/getting-started.md (修改于 2026-02-28) ✅
└── 状态: 🟢 完成

行动建议：无需操作，翻译已是最新。

🟡 Outdated（过时）

含义：翻译存在，但源文件已更新，翻译需要同步。

判定条件：

翻译文件存在
翻译文件的最后修改时间 < 源文件的最后修改时间

示例：

📄 configuration.md
├── 源文件: en/configuration.md (修改于 2026-02-28)
├── 翻译: ja/configuration.md (修改于 2026-02-20) ⚠️
└── 状态: 🟡 过时（落后 8 天）

行动建议：

查看源文件的最新变更
更新翻译文件
提交更新后的翻译

🔴 Missing（缺失）

含义：翻译文件不存在。

判定条件：

翻译文件在预期路径不存在

示例：

📄 api/overview.md
├── 源文件: en/api/overview.md (存在)
├── 翻译: ko/api/overview.md (不存在) ❌
└── 状态: 🔴 缺失

行动建议：

创建翻译文件
翻译源文件内容
提交新翻译

文件状态追踪

单文件状态查看

点击文件名可以查看详细信息：

┌─────────────────────────────────────────────────────────────┐
│  📄 getting-started.md                                      │
├─────────────────────────────────────────────────────────────┤
│  源文件路径: docs/en/getting-started.md                      │
│  最后更新: 2026-02-28 14:30 (commit: abc1234)               │
│  文件大小: 4.2 KB                                            │
├─────────────────────────────────────────────────────────────┤
│  翻译状态                                                    │
│  ┌─────────────────────────────────────────────────────────┐│
│  │  🇺🇸 English (source)  ✅ 源文件                        ││
│  │  🇨🇳 中文              ✅ 完成 (2026-02-28)             ││
│  │  🇯🇵 日本語            ⚠️ 过时 8 天 (2026-02-20)        ││
│  │  🇰🇷 한국어            ❌ 缺失                          ││
│  └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│  [查看源文件]  [编辑翻译]                                    │
└─────────────────────────────────────────────────────────────┘

批量状态分析

仪表板提供批量分析视图，帮助你快速识别问题区域：

按语言分析：

语言状态汇总
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
语言      完成    过时    缺失    总计
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
中文      38      3       1       42
日本語    30      8       4       42
한국어    25      10      7       42
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

按目录分析：

目录状态汇总
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
目录              完成率    过时    缺失
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
docs/             85%       5       2
docs/api/         60%       8       4
docs/guide/       90%       2       1
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Git 提交关联

仪表板与 Git 历史深度集成，每个状态都关联到具体提交：

📄 configuration.md

变更历史:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 2026-02-28 abc1234 "Update configuration docs"
   修改者: @username
   变更: +15 -3 lines

📌 2026-02-20 def5678 "Add new config options"
   修改者: @another-user
   变更: +8 lines
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

此文件在 2026-02-28 更新，翻译落后 8 天。

筛选与搜索功能

按语言筛选

选择特定语言，只显示该语言相关的翻译状态：

// 筛选逻辑
filterByLanguage('zh-cn')  // 只显示中文翻译状态

使用场景：

中文翻译负责人只想查看中文翻译进度
快速定位特定语言的缺失翻译

按状态筛选

快速筛选出需要处理的文件：

筛选选项	显示内容	使用场景
全部状态	所有文件	查看整体情况
只看完成	🟢 绿色状态	庆祝成果，确认完成项
只看过时	🟡 黄色状态	最常用 - 找出需要更新的翻译
只看缺失	🔴 红色状态	找出完全未翻译的文件

按文件路径搜索

支持文件路径模糊搜索：

搜索: [api___________]

结果:
📄 api/overview.md
📄 api/authentication.md
📄 api/endpoints/users.md
📄 api/endpoints/posts.md

组合筛选

可以组合多种筛选条件：

语言: [中文 ▼]  状态: [过时 ▼]  搜索: [guide]

结果:
📄 guide/installation.md      🟡 过时 3 天
📄 guide/configuration.md     🟡 过时 8 天

仪表板定制

自定义主题

通过 CSS 变量自定义仪表板外观：

/* lunaria-theme.css */
:root {
  --lunaria-color-primary: #6366f1;
  --lunaria-color-success: #22c55e;
  --lunaria-color-warning: #eab308;
  --lunaria-color-danger: #ef4444;

  --lunaria-bg-primary: #ffffff;
  --lunaria-bg-secondary: #f8fafc;
  --lunaria-text-primary: #1e293b;
  --lunaria-text-secondary: #64748b;
}

.dark {
  --lunaria-bg-primary: #0f172a;
  --lunaria-bg-secondary: #1e293b;
  --lunaria-text-primary: #f8fafc;
  --lunaria-text-secondary: #94a3b8;
}

配置定制

在 lunaria.config.json 中自定义仪表板：

{
  "dashboard": {
    "outputDir": "public/i18n-status",
    "title": "My Project Localization Status",
    "description": "Track the translation progress of our documentation",
    "uiLanguage": "zh-cn",
    "customCss": "./lunaria-theme.css",
    "favicon": "./public/favicon.ico"
  }
}

集成到现有站点

将仪表板嵌入到现有文档站点：

方式 1：作为子路径

// astro.config.mjs
export default defineConfig({
  integrations: [
    starlight({
      title: 'My Docs',
      // 仪表板在 /i18n-status 路径下
    }),
  ],
});

方式 2：导航链接

// 在文档站点导航中添加链接
{
  label: '翻译状态',
  link: '/i18n-status/',
  icon: 'translate',
}

添加自定义徽章

在仪表板中添加自定义徽章显示：

{
  "dashboard": {
    "badges": [
      {
        "label": "中文翻译",
        "status": "85%",
        "color": "green"
      },
      {
        "label": "日语翻译",
        "status": "70%",
        "color": "yellow"
      }
    ]
  }
}

实用技巧

1. 定期检查仪表板

建议在以下时机检查仪表板：

每周团队会议前
发布新版本前
新增源文档后
翻译贡献者提交 PR 后

2. 使用仪表板分配任务

将仪表板截图或链接分享给翻译团队：

## 本周翻译任务

请查看 [LunariaJS 仪表板](/i18n-status/)

优先级：
1. 🟡 过时的翻译（8 个文件）
2. 🔴 缺失的翻译（4 个文件）

目标：本周完成所有过时翻译的更新。

3. 设置进度目标

在仪表板标题中显示目标：

{
  "dashboard": {
    "title": "翻译进度 (目标: 3月底前达到 90%)"
  }
}

4. 使用仪表板数据

仪表板生成的 JSON 数据可用于其他用途：

// data/status.json
{
  "summary": {
    "total": 42,
    "zh-cn": { "done": 38, "outdated": 3, "missing": 1 },
    "ja": { "done": 30, "outdated": 8, "missing": 4 }
  }
}

可以用这些数据：

生成自动化报告
在 README 中显示徽章
触发 CI/CD 条件

仪表板最佳实践

1. 保持仪表板更新

// package.json
{
  "scripts": {
    "build": "astro build && lunaria build",
    "dev": "concurrently \"astro dev\" \"lunaria build --watch\""
  }
}

2. 团队共享访问

将仪表板部署到公开 URL
在贡献指南中添加仪表板链接
定期在社区渠道分享进度

3. 设置质量目标

指标	目标	检查频率
整体完成度	≥ 90%	每周
过时翻译	≤ 5 个	每次 PR
缺失翻译	0	发布前

4. 仪表板与 Issue 集成

在 GitHub Issue 中引用仪表板：

## 翻译任务

请翻译 `getting-started.md` 为中文。

参考：[仪表板状态](/i18n-status/#getting-started.md)

总结

LunariaJS 本地化仪表板的核心价值：

功能	价值
可视化进度	一眼看懂翻译完成度
状态追踪	自动识别过时和缺失翻译
Git 集成	翻译状态与代码历史同步
筛选搜索	快速定位需要处理的文件
可定制	适配项目品牌和工作流

关键要点：

三种状态：🟢 完成、🟡 过时、🔴 缺失
利用筛选功能快速定位问题
定期检查仪表板保持翻译同步
与团队共享仪表板提高协作效率

下一步

下一篇文章，我们将深入探讨 LunariaJS 与 Git 的深度集成，学习如何：

利用 Git 追踪本地化变更
理解过时翻译检测原理
设计高效的团队协作工作流
解决分支策略中的翻译问题

敬请期待！

💡 推荐阅读：

LunariaJS 中文文档

LunariaJS 仪表板配置

LunariaJS 英文文档

LunariaJS 日文文档

LunariaJS 韩文文档