feat: add Chinese i18n support with vue-i18n

README.md

@@ -1,3 +1,5 @@
+[![en](https://img.shields.io/badge/lang-en-red.svg)](README.md) | [![zh](https://img.shields.io/badge/lang-zh--CN-yellow.svg)](README.zh.md)
+
 # aw-webui
 
 A web-based UI for ActivityWatch, built with Vue.js

README.zh.md

@@ -0,0 +1,32 @@
+[![en](https://img.shields.io/badge/lang-en-red.svg)](README.md) | [![zh](https://img.shields.io/badge/lang-zh--CN-yellow.svg)](README.zh.md)
+
+# aw-webui
+
+ActivityWatch 的 Web 界面，使用 Vue.js 构建
+
+[![构建状态](https://github.com/ActivityWatch/aw-webui/workflows/Build/badge.svg)](https://github.com/ActivityWatch/aw-webui/actions)
+[![覆盖率](https://codecov.io/gh/ActivityWatch/aw-webui/branch/master/graph/badge.svg)](https://codecov.io/gh/ActivityWatch/aw-webui)
+[![已知漏洞](https://snyk.io/test/github/ActivityWatch/aw-webui/badge.svg)](https://snyk.io/test/github/ActivityWatch/aw-webui)
+
+## 快速开始
+
+设置开发环境非常简单：
+
+```bash
+# 以测试模式启动 aw-server 实例（端口 5666，使用独立数据库）
+# 开发模式下 Web UI 默认连接到此实例
+aw-qt --testing
+# 或不带监控器运行：
+aw-server --testing
+
+# 安装依赖
+npm install
+
+# 以开发模式运行（带有热重载）
+npm run serve
+
+# 构建生产版本
+npm run build
+```
+
+更多详情，请参阅[官方文档](https://docs.activitywatch.net)。

package.json

@@ -69,6 +69,7 @@
     "vue-color": "^2.8.1",
     "vue-d3-sunburst": "git+https://github.com/ErikBjare/Vue.D3.sunburst.git#patch-1",
     "vue-datetime": "^1.0.0-beta.13",
+    "vue-i18n": "^8.28.2",
     "vuedraggable": "^2.24.3",
     "weekstart": "^1.0.1",
     "xss": "^1.0.14"

src/components/Footer.vue

@@ -1,30 +1,32 @@
 <template lang="pug">
 div.container(style="color: #555; font-size: 0.9em")
   div.mb-2
-    | Made with
-    a(href="https://activitywatch.net/donate/", target="_blank")
-      icon(name="heart" scale=0.75 style="fill: #E55")
-    | by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
+    i18n(path="footer.madeWith" tag="span")
+      template(v-slot:heart)
+        a(href="https://activitywatch.net/donate/", target="_blank")
+          icon(name="heart" scale=0.75 style="fill: #E55")
+      template(v-slot:developers)
+        a(href="http://activitywatch.net/contributors/") {{ $t('footer.developers') }}
     div
       span.mt-2(v-if="info", style="color: #888; font-size: 0.8em")
         span.mr-2
-          b Host:
+          b {{ $t('footer.host') }}
           | &nbsp; {{info.hostname}}
         span
-          b Version:
+          b {{ $t('footer.version') }}
           | &nbsp; {{info.version}}
 
   div(style="font-size: 0.9em; opacity: 0.8; fill: #88F")
     div.float-none.float-md-right.my-2
       a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose", target="_blank").mr-3
         icon(name="bug")
-        | Report a bug
+        | {{ $t('footer.reportBug') }}
       a(href="https://forum.activitywatch.net/c/support", target="_blank").mr-3
         icon(name="question-circle")
-        | Ask for help
+        | {{ $t('footer.askHelp') }}
       a(href="https://forum.activitywatch.net/c/features", target="_blank")
         icon(name="vote-yea")
-        | Vote on features
+        | {{ $t('footer.voteFeatures') }}
     div.float-none.float-md-left.my-2
       a(href="https://twitter.com/ActivityWatchIt", target="_blank")
         icon(name="brands/twitter")
@@ -34,7 +36,7 @@ div.container(style="color: #555; font-size: 0.9em")
         | GitHub
       a(href="https://activitywatch.net/donate/", target="_blank").ml-3
         icon(name="hand-holding-heart")
-        | Donate
+        | {{ $t('footer.donate') }}
 </template>
 
 <script lang="ts">