From 4476d847413cc4afcae97bee7aa6f24a330a12c5 Mon Sep 17 00:00:00 2001
From: tangwuhong <tangwuhong@intra.nsfocus.com>
Date: Thu, 19 Dec 2024 15:44:14 +0800
Subject: [PATCH] add: translate

---
 app/frontend/src/components/Header.vue  |  5 ++---
 app/frontend/src/components/Monitor.vue | 26 ++++++++++++++++---------
 app/frontend/src/i18n/en-US.js          |  5 ++++-
 app/frontend/src/i18n/ja-JP.js          |  5 ++++-
 app/frontend/src/i18n/ko-KR.js          |  7 +++++--
 app/frontend/src/i18n/ru-RU.js          |  5 ++++-
 app/frontend/src/i18n/zh-CN.js          |  5 ++++-
 7 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/app/frontend/src/components/Header.vue b/app/frontend/src/components/Header.vue
index c6da63f..1dea2ed 100644
--- a/app/frontend/src/components/Header.vue
+++ b/app/frontend/src/components/Header.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import {NAvatar, NButton, NFlex, useMessage, useNotification} from 'naive-ui'
+import {NAvatar, NButton, NFlex, useNotification} from 'naive-ui'
 import {
   CloseFilled,
   CodeFilled,
@@ -85,7 +85,6 @@ let version = ref({
 const subtitle = ref("")
 
 const notification = useNotification()
-const message = useMessage()
 
 onMounted(async () => {
   emitter.on('selectNode', selectNode)
@@ -97,7 +96,7 @@ onMounted(async () => {
   // MoonOrSunnyOutline.value = config.theme === lightTheme.name ? WbSunnyOutlined : NightlightRoundFilled
   const v = await GetVersion()
   version.value.tag_name = v
-  subtitle.value = t('header.desc') + v
+  subtitle.value = t('header.desc') + " " + v
   await checkForUpdates()
 })
 
diff --git a/app/frontend/src/components/Monitor.vue b/app/frontend/src/components/Monitor.vue
index bec8f54..7f6391e 100644
--- a/app/frontend/src/components/Monitor.vue
+++ b/app/frontend/src/components/Monitor.vue
@@ -55,12 +55,13 @@ import {LineChart} from 'echarts/charts';
 import {UniversalTransition} from 'echarts/features';
 import {CanvasRenderer} from 'echarts/renderers';
 
-import {NButton, NFlex, useMessage} from "naive-ui";
+import {lightTheme, NButton, NFlex, useMessage} from "naive-ui";
 import {GetGroups, GetTopicOffsets, GetTopics} from "../../wailsjs/go/service/Service";
 import emitter from "../utils/eventBus";
 import {renderIcon} from "../utils/common";
 import {MessageOutlined} from "@vicons/material";
 import {useI18n} from "vue-i18n";
+import {GetConfig} from "../../wailsjs/go/config/AppConfig";
 
 const {t} = useI18n()
 
@@ -109,14 +110,22 @@ const selectNode = async (node) => {
   await getData()
 }
 
+let echarts_theme = 'dark'
+
 onMounted(async () => {
   emitter.on('selectNode', selectNode)
   emitter.on('refreshTopic', refreshTopic)
 
+  const loadedConfig = await GetConfig()
+  if (loadedConfig) {
+    echarts_theme = loadedConfig.theme === lightTheme.name ? 'light': 'dark'
+  }
+
   await getData()
+
   initChart()
   // await fetchData()
-  timer = setInterval(fetchData, 5 * 60 * 1000) // 定时更新一次
+  setInterval(fetchData, 5 * 60 * 1000) // 定时更新一次
 
   // 监听窗口大小变化
   window.addEventListener('resize', handleResize)
@@ -174,18 +183,18 @@ const initChart = () => {
   }
 
   const lag_option = {...option}
-  lag_option.title.text = '积压量'
-  lag_chart.value = echarts.init(lag_chartRef.value, 'dark')
+  lag_option.title.text = t('inspection.lag')
+  lag_chart.value = echarts.init(lag_chartRef.value, echarts_theme)
   lag_chart.value.setOption({...lag_option})
 
   const commit_option = {...option}
-  commit_option.title.text = '提交 offset'
-  commit_chart.value = echarts.init(commit_chartRef.value, 'dark')
+  commit_option.title.text = t('inspection.commit')
+  commit_chart.value = echarts.init(commit_chartRef.value, echarts_theme)
   commit_chart.value.setOption({...commit_option})
 
   const end_option = {...option}
-  end_option.title.text = '终末 offset'
-  end_chart.value = echarts.init(end_chartRef.value, 'dark')
+  end_option.title.text = t('inspection.end')
+  end_chart.value = echarts.init(end_chartRef.value, echarts_theme)
   end_chart.value.setOption({...end_option})
 
 }
@@ -241,7 +250,6 @@ const updateChart = () => {
 }
 
 // 定时获取数据
-let timer = null
 const fetchData = async () => {
   if (selectedTopics.value.length === 0 || !selectedGroup.value) {
     message.warning(t('message.selectTopicGroup'))
diff --git a/app/frontend/src/i18n/en-US.js b/app/frontend/src/i18n/en-US.js
index f46bed9..9b31767 100644
--- a/app/frontend/src/i18n/en-US.js
+++ b/app/frontend/src/i18n/en-US.js
@@ -124,7 +124,10 @@ export default {
         groupPlaceholder: "Select or create Consumer Group",
         startInspection: "Start Inspection",
         autoFetch: "Automatically fetch data every 5 minutes",
-        lagFormula: "Lag = End offset - Committed offset."
+        lagFormula: "Lag = End offset - Committed offset.",
+        lag: 'Lag',
+        commit: 'Committed offset',
+        end: 'End offset',
     },
     settings: {
         title: "Settings",
diff --git a/app/frontend/src/i18n/ja-JP.js b/app/frontend/src/i18n/ja-JP.js
index efb3ad5..16486ae 100644
--- a/app/frontend/src/i18n/ja-JP.js
+++ b/app/frontend/src/i18n/ja-JP.js
@@ -124,7 +124,10 @@ export default {
         groupPlaceholder: "コンシューマグループを選択または作成",
         startInspection: "巡回を開始",
         autoFetch: "5分ごとにデータを自動取得",
-        lagFormula: "遅延 = 終端オフセット - 提出オフセット。"
+        lagFormula: "遅延 = 終端オフセット - 提出オフセット。",
+        lag: 'ラグ',
+        commit: 'コミットされたオフセット',
+        end: '終了オフセット',
     },
     settings: {
         title: "設定",
diff --git a/app/frontend/src/i18n/ko-KR.js b/app/frontend/src/i18n/ko-KR.js
index adf0b63..2298747 100644
--- a/app/frontend/src/i18n/ko-KR.js
+++ b/app/frontend/src/i18n/ko-KR.js
@@ -124,7 +124,10 @@ export default {
         groupPlaceholder: "컨슈머 그룹 선택 또는 생성",
         startInspection: "점검 시작",
         autoFetch: "데이터를 5분마다 자동으로 가져오기",
-        lagFormula: "지연 = 최종 오프셋 - 제출된 오프셋."
+        lagFormula: "지연 = 최종 오프셋 - 제출된 오프셋.",
+        lag: '지연',
+        commit: '커밋된 오프셋',
+        end: '종료 오프셋',
     },
     settings: {
         title: "설정",
@@ -147,7 +150,7 @@ export default {
         editOk: "편집 완료, 설정 새로 고침",
         mustFill: "모든 필수 필드를 채워주세요",
         saveErr: "저장 실패",
-        pleaseInput: "메시지 내용을 입력해 주세요"
+        pleaseInput: "메시지 내용을 입력해 주세요",
     },
     about: {
         title: "정보",
diff --git a/app/frontend/src/i18n/ru-RU.js b/app/frontend/src/i18n/ru-RU.js
index fc95e86..9e5932e 100644
--- a/app/frontend/src/i18n/ru-RU.js
+++ b/app/frontend/src/i18n/ru-RU.js
@@ -124,7 +124,10 @@ export default {
         groupPlaceholder: "Выберите или создайте группу потребителей",
         startInspection: "Начать мониторинг",
         autoFetch: "Автоматическое получение данных каждые 5 минут",
-        lagFormula: "Задержка = Конечное смещение - Закоммиченное смещение."
+        lagFormula: "Задержка = Конечное смещение - Закоммиченное смещение.",
+        lag: 'Задержка',
+        commit: 'Здзейснены зрух',
+        end: 'Канцавое зрушэнне',
     },
     settings: {
         title: "Настройки",
diff --git a/app/frontend/src/i18n/zh-CN.js b/app/frontend/src/i18n/zh-CN.js
index fb0df20..d57d863 100644
--- a/app/frontend/src/i18n/zh-CN.js
+++ b/app/frontend/src/i18n/zh-CN.js
@@ -124,7 +124,10 @@ export default {
         groupPlaceholder: "选择或创建Consumer Group",
         startInspection: "开始巡检",
         autoFetch: "每5分钟自动抓取一次数据",
-        lagFormula: "积压 = 终末offset - 提交offset。"
+        lagFormula: "积压 = 终末offset - 提交offset。",
+        lag: '积压量',
+        commit: '提交 offset',
+        end: '终末 offset',
     },
     settings:{
         title: '设置',