feat: add some translate

frontend/src/components/v-charts/components/Line.vue

@@ -9,7 +9,9 @@ import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/util
 import i18n from '@/lang';
 const { themeConfig } = useGlobalStore();
 const isDarkTheme = ref(false);
+const LineChartRef = ref<HTMLElement>();
 let mediaQuery: MediaQueryList;
+let resizeObserver: ResizeObserver | undefined;
 const props = defineProps({
     id: {
         type: String,
@@ -99,16 +101,20 @@ const seriesStyle = [
 ];
 
 function initChart() {
+    const chartDom = LineChartRef.value;
+    if (!chartDom) {
+        return;
+    }
     if (themeConfig.value.theme === 'auto') {
         isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
     } else {
         isDarkTheme.value = themeConfig.value.theme === 'dark';
     }
-    let itemChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
+    let itemChart = echarts?.getInstanceByDom(chartDom);
     const optionItem = itemChart?.getOption();
     const itemSelect = optionItem?.legend;
     if (itemChart == null) {
-        itemChart = echarts.init(document.getElementById(props.id) as HTMLElement);
+        itemChart = echarts.init(chartDom);
     }
 
     const series = [];
@@ -243,7 +249,11 @@ function initChart() {
 }
 
 function changeChartSize() {
-    echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)?.resize();
+    const chartDom = LineChartRef.value;
+    if (!chartDom) {
+        return;
+    }
+    echarts.getInstanceByDom(chartDom)?.resize();
 }
 
 watch(
@@ -267,13 +277,20 @@ onMounted(() => {
         mediaQuery.addEventListener('change', handleThemeChange);
         initChart();
         window.addEventListener('resize', changeChartSize);
+        if (LineChartRef.value) {
+            resizeObserver = new ResizeObserver(changeChartSize);
+            resizeObserver.observe(LineChartRef.value);
+        }
     });
 });
 
 onBeforeUnmount(() => {
-    echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose();
+    if (LineChartRef.value) {
+        echarts.getInstanceByDom(LineChartRef.value)?.dispose();
+    }
     window.removeEventListener('resize', changeChartSize);
-    mediaQuery.removeEventListener('change', handleThemeChange);
+    mediaQuery?.removeEventListener('change', handleThemeChange);
+    resizeObserver?.disconnect();
 });
 </script>
 <style lang="scss" scoped></style>

frontend/src/lang/modules/en.ts

@@ -994,10 +994,14 @@ const message = {
             requestModelPlaceholder: 'e.g. qwen2.5-coder',
             upstreamModelPlaceholder: 'e.g. Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Add Mapping',
+            overview: 'Overview',
+            distribution: 'Distribution',
             usageTrend: 'Usage Trend',
             providerDistribution: 'Provider Distribution',
             unmatched: 'Unmatched',
             modelDistribution: 'Model Distribution',
+            accountDistribution: 'Model Account Distribution',
+            modelAccount: 'Model Account',
             serviceProvider: 'Provider',
             tokenUsage: 'Token Usage',
             percent: 'Percent',

frontend/src/lang/modules/es-es.ts

@@ -1008,10 +1008,14 @@ const message = {
             requestModelPlaceholder: 'p. ej. qwen2.5-coder',
             upstreamModelPlaceholder: 'p. ej. Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Agregar mapeo',
+            overview: 'Resumen',
+            distribution: 'Distribución',
             usageTrend: 'Tendencia de uso',
             providerDistribution: 'Distribución por proveedor',
             unmatched: 'Sin coincidencia',
             modelDistribution: 'Distribución por modelo',
+            accountDistribution: 'Distribución por cuenta de modelo',
+            modelAccount: 'Cuenta de modelo',
             serviceProvider: 'Proveedor',
             tokenUsage: 'Uso de tokens',
             percent: 'Porcentaje',

frontend/src/lang/modules/ja.ts

@@ -998,10 +998,14 @@ const message = {
             requestModelPlaceholder: '例: qwen2.5-coder',
             upstreamModelPlaceholder: '例: Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'マッピングを追加',
+            overview: '概要',
+            distribution: '分布',
             usageTrend: '使用傾向',
             providerDistribution: 'プロバイダー別分布',
             unmatched: '未一致',
             modelDistribution: 'モデル別分布',
+            accountDistribution: 'モデルアカウント別分布',
+            modelAccount: 'モデルアカウント',
             serviceProvider: 'プロバイダー',
             tokenUsage: 'Token 使用量',
             percent: '割合',

frontend/src/lang/modules/ko.ts

@@ -982,10 +982,14 @@ const message = {
             requestModelPlaceholder: '예: qwen2.5-coder',
             upstreamModelPlaceholder: '예: Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: '매핑 추가',
+            overview: '개요',
+            distribution: '분포',
             usageTrend: '사용 추세',
             providerDistribution: '제공자별 분포',
             unmatched: '미일치',
             modelDistribution: '모델별 분포',
+            accountDistribution: '모델 계정별 분포',
+            modelAccount: '모델 계정',
             serviceProvider: '제공자',
             tokenUsage: 'Token 사용량',
             percent: '비율',

frontend/src/lang/modules/ms.ts

@@ -1007,10 +1007,14 @@ const message = {
             requestModelPlaceholder: 'cth. qwen2.5-coder',
             upstreamModelPlaceholder: 'cth. Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Tambah pemetaan',
+            overview: 'Gambaran keseluruhan',
+            distribution: 'Taburan',
             usageTrend: 'Trend penggunaan',
             providerDistribution: 'Taburan mengikut penyedia',
             unmatched: 'Tidak sepadan',
             modelDistribution: 'Taburan mengikut model',
+            accountDistribution: 'Taburan mengikut akaun model',
+            modelAccount: 'Akaun model',
             serviceProvider: 'Penyedia',
             tokenUsage: 'Penggunaan Token',
             percent: 'Peratus',

frontend/src/lang/modules/pt-br.ts

@@ -1003,10 +1003,14 @@ const message = {
             requestModelPlaceholder: 'ex.: qwen2.5-coder',
             upstreamModelPlaceholder: 'ex.: Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Adicionar mapeamento',
+            overview: 'Visão geral',
+            distribution: 'Distribuição',
             usageTrend: 'Tendência de uso',
             providerDistribution: 'Distribuição por provedor',
             unmatched: 'Sem correspondência',
             modelDistribution: 'Distribuição por modelo',
+            accountDistribution: 'Distribuição por conta de modelo',
+            modelAccount: 'Conta de modelo',
             serviceProvider: 'Provedor',
             tokenUsage: 'Uso de Token',
             percent: 'Percentual',

frontend/src/lang/modules/ru.ts

@@ -997,10 +997,14 @@ const message = {
             requestModelPlaceholder: 'например: qwen2.5-coder',
             upstreamModelPlaceholder: 'например: Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Добавить сопоставление',
+            overview: 'Обзор',
+            distribution: 'Распределение',
             usageTrend: 'Тренд использования',
             providerDistribution: 'Распределение по провайдерам',
             unmatched: 'Не сопоставлено',
             modelDistribution: 'Распределение по моделям',
+            accountDistribution: 'Распределение по аккаунтам моделей',
+            modelAccount: 'Аккаунт модели',
             serviceProvider: 'Провайдер',
             tokenUsage: 'Использование Token',
             percent: 'Доля',

frontend/src/lang/modules/tr.ts

@@ -1005,10 +1005,14 @@ const message = {
             requestModelPlaceholder: 'örn. qwen2.5-coder',
             upstreamModelPlaceholder: 'örn. Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: 'Eşleme ekle',
+            overview: 'Genel bakış',
+            distribution: 'Dağılım',
             usageTrend: 'Kullanım eğilimi',
             providerDistribution: 'Sağlayıcı dağılımı',
             unmatched: 'Eşleşmedi',
             modelDistribution: 'Model dağılımı',
+            accountDistribution: 'Model hesabı dağılımı',
+            modelAccount: 'Model hesabı',
             serviceProvider: 'Sağlayıcı',
             tokenUsage: 'Token kullanımı',
             percent: 'Yüzde',

frontend/src/lang/modules/zh-Hant.ts

@@ -944,10 +944,14 @@ const message = {
             requestModelPlaceholder: '如 qwen2.5-coder',
             upstreamModelPlaceholder: '如 Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: '新增映射',
+            overview: '概覽',
+            distribution: '分佈',
             usageTrend: '使用趨勢',
             providerDistribution: '按服務商分佈',
             unmatched: '未匹配',
             modelDistribution: '按模型分佈',
+            accountDistribution: '按模型帳號分佈',
+            modelAccount: '模型帳號',
             serviceProvider: '服務商',
             tokenUsage: 'Token 用量',
             percent: '佔比',

frontend/src/lang/modules/zh.ts

@@ -936,10 +936,14 @@ const message = {
             requestModelPlaceholder: '如 qwen2.5-coder',
             upstreamModelPlaceholder: '如 Qwen/Qwen2.5-Coder-32B-Instruct',
             addMapping: '添加映射',
+            overview: '概览',
+            distribution: '分布',
             usageTrend: '使用趋势',
             providerDistribution: '按服务商分布',
             unmatched: '未匹配',
             modelDistribution: '按模型分布',
+            accountDistribution: '按模型账号分布',
+            modelAccount: '模型账号',
             serviceProvider: '服务商',
             tokenUsage: 'Token 用量',
             percent: '占比',