Feature/add multilingual support (#384)

* feat: add multilingual support (English and Russian)

- Add i18n infrastructure with vue-i18n
- Implement language switcher component
- Add Russian (ru-RU) and English (en-US) translations
- Configure TDesign locale for proper UI component translation
- Replace hardcoded Chinese strings with i18n keys
- Support dynamic language switching in all components
- Add translations for all UI elements including:
  - Menu items and navigation
  - Knowledge base management
  - Chat interface
  - Settings and initialization
  - Authentication pages
  - Separator options in document splitting

This enables users to use the application in Chinese, English, or Russian.

* chore: add vue-i18n dependency and fix Input-field i18n integration

- Add vue-i18n package to frontend dependencies
- Fix Input-field component i18n integration for multilingual support

* chore: add PROGRESS_RU.md to .gitignore

- Exclude personal progress tracking file from git

* rearrange the order of the multilingual languages: Chinese, English, Russian

* Delete docker-compose.yml

* Replaced hardcoded messages with the t() function in the following files:  all error messages, 14 console.error ,messages session creation messages
, login/registration errors

* fix: restore docker-compose.yml and update .gitignore

* restore docker-compose.yml latest

* add multilingual support

Author: seoeaa

.gitignore

@@ -24,6 +24,9 @@ node_modules/
 tmp/
 temp/
 
+# Docker compose файл (локальные настройки)
+# docker-compose.yml
+
 WeKnora
 /models/
 services/docreader/src/proto/__pycache__
@@ -36,3 +39,4 @@ data/files/
 ### macOS
 # General
 .DS_Store
+PROGRESS_RU.md

frontend/package.json

@@ -22,6 +22,7 @@
     "tdesign-icons-vue-next": "^0.4.1",
     "tdesign-vue-next": "^1.11.5",
     "vue": "^3.5.13",
+    "vue-i18n": "^9.9.0",
     "vue-router": "^4.5.0",
     "webpack": "^5.94.0"
   },

frontend/src/App.vue

@@ -1,9 +1,31 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ConfigProvider } from 'tdesign-vue-next'
+import enUS from 'tdesign-vue-next/es/locale/en_US'
+import zhCN from 'tdesign-vue-next/es/locale/zh_CN'
+import ruRU from 'tdesign-vue-next/es/locale/ru_RU'
+
+const { locale } = useI18n()
+
+const tdesignLocale = computed(() => {
+  switch (locale.value) {
+    case 'en-US':
+      return enUS
+    case 'ru-RU':
+      return ruRU
+    case 'zh-CN':
+    default:
+      return zhCN
+  }
+})
 </script>
 <template>
-  <div id="app">
-    <RouterView />
-  </div>
+  <ConfigProvider :global-config="tdesignLocale">
+    <div id="app">
+      <RouterView />
+    </div>
+  </ConfigProvider>
 </template>
 <style>
 body,

frontend/src/components/Input-field.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, defineEmits, onMounted, defineProps, defineExpose } from "vue";
+import { useI18n } from 'vue-i18n';
 import useKnowledgeBase from '@/hooks/useKnowledgeBase';
 import { onBeforeRouteUpdate } from 'vue-router';
 import { MessagePlugin } from "tdesign-vue-next";
+
+const { t } = useI18n();
 let { cardList, total, getKnowled } = useKnowledgeBase()
 let query = ref("");
 const props = defineProps({
@@ -17,15 +20,15 @@ onMounted(() => {
 const emit = defineEmits(['send-msg']);
 const createSession = (val: string) => {
   if (!val.trim()) {
-    MessagePlugin.info("请先输入内容!");
+    MessagePlugin.info(t('chat.pleaseEnterContent'));
     return
   }
   if (!query.value && cardList.value.length == 0) {
-    MessagePlugin.info("请先上传知识库!");
+    MessagePlugin.info(t('chat.pleaseUploadKnowledgeBase'));
     return;
   }
   if (props.isReplying) {
-    return MessagePlugin.error("正在回复中，请稍后再试!");
+    return MessagePlugin.error(t('chat.replyingPleaseWait'));
   }
   emit('send-msg', val);
   clearvalue();
@@ -50,9 +53,9 @@ onBeforeRouteUpdate((to, from, next) => {
 </script>
 <template>
   <div class="answers-input">
-    <t-textarea v-model="query" placeholder="基于知识库提问" name="description" :autosize="true" @keydown="onKeydown" />
+    <t-textarea v-model="query" :placeholder="t('chat.askKnowledgeBase')" name="description" :autosize="true" @keydown="onKeydown" />
     <div class="answers-input-source">
-      <span>{{ total }}个来源</span>
+      <span>{{ t('chat.sourcesCount', { count: total }) }}</span>
     </div>
     <div @click="createSession(query)" class="answers-input-send"
       :class="[query.length && total ? '' : 'grey-out']">

frontend/src/components/LanguageSwitcher.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="language-switcher">
+    <t-select
+      v-model="selectedLanguage"
+      :options="languageOptions"
+      @change="handleLanguageChange"
+      :popup-props="{ overlayClassName: 'language-select-popup' }"
+      size="small"
+    >
+      <template #prefixIcon>
+        <t-icon name="translate" />
+      </template>
+    </t-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { locale } = useI18n()
+
+const languageOptions = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+  { label: 'Русский', value: 'ru-RU' }
+]
+
+const selectedLanguage = ref(localStorage.getItem('locale') || 'zh-CN')
+
+const handleLanguageChange = (value: string) => {
+  console.log('Язык изменен на:', value)
+  if (value && ['ru-RU', 'en-US', 'zh-CN'].includes(value)) {
+    locale.value = value
+    localStorage.setItem('locale', value)
+    // Перезагрузка страницы для применения нового языка
+    setTimeout(() => {
+      window.location.reload()
+    }, 100)
+  }
+}
+
+// Синхронизация с i18n при инициализации
+watch(() => locale.value, (newLocale) => {
+  if (selectedLanguage.value !== newLocale) {
+    selectedLanguage.value = newLocale
+  }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+.language-switcher {
+  .t-button {
+    color: #666;
+    font-size: 14px;
+
+    &:hover {
+      color: #333;
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .t-icon {
+    margin-right: 4px;
+  }
+}
+</style>

frontend/src/components/empty-knowledge.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 </script>
 <template>
     <div class="empty">
         <img class="empty-img" src="@/assets/img/upload.svg" alt="">
-        <span class="empty-txt">知识为空，拖放上传</span>
-        <span class="empty-type-txt">pdf、doc 格式文件，不超过10M</span>
-        <span class="empty-type-txt">text、markdown格式文件，不超过200K</span>
+        <span class="empty-txt">{{ t('knowledgeBase.emptyKnowledgeDragDrop') }}</span>
+        <span class="empty-type-txt">{{ t('knowledgeBase.pdfDocFormat') }}</span>
+        <span class="empty-type-txt">{{ t('knowledgeBase.textMarkdownFormat') }}</span>
     </div>
 </template>
 <style scoped lang="less">

frontend/src/components/menu.vue

@@ -14,7 +14,7 @@
                         <div class="menu_icon">
                             <img class="icon" :src="getImgSrc(item.icon == 'zhishiku' ? knowledgeIcon :  item.icon == 'logout' ? logoutIcon : item.icon == 'tenant' ? tenantIcon : prefixIcon)" alt="">
                         </div>
-                        <span class="menu_title" :title="item.path === 'knowledge-bases' && kbMenuItem ? kbMenuItem.title : item.title">{{ item.path === 'knowledge-bases' && kbMenuItem ? kbMenuItem.title : item.title }}</span>
+                        <span class="menu_title" :title="item.path === 'knowledge-bases' && kbMenuItem?.title ? kbMenuItem.title : t(item.titleKey)">{{ item.path === 'knowledge-bases' && kbMenuItem?.title ? kbMenuItem.title : t(item.titleKey) }}</span>
                         <!-- 知识库切换下拉箭头 -->
                         <div v-if="item.path === 'knowledge-bases' && isInKnowledgeBase" 
                              class="kb-dropdown-icon" 
@@ -39,7 +39,7 @@
                             {{ kb.name }}
                         </div>
                     </div>
-                    <t-popup overlayInnerClassName="upload-popup" class="placement top center" content="上传知识"
+                    <t-popup overlayInnerClassName="upload-popup" class="placement top center" :content="t('menu.uploadKnowledge')"
                         placement="top" show-arrow destroy-on-close>
                         <div class="upload-file-wrap" @click.stop="uploadFile" variant="outline"
                              v-if="item.path === 'knowledge-bases' && $route.name === 'knowledgeBaseDetail'">
@@ -66,21 +66,21 @@
                                     <t-icon name="ellipsis" class="menu-more" />
                                 </div>
                                 <template #content>
-                                    <span class="del_submenu">删除记录</span>
+                                    <span class="del_submenu">{{ t('menu.deleteRecord') }}</span>
                                 </template>
                             </t-popup>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        
+
         <!-- 下半部分：账户信息、系统设置、退出登录 -->
         <div class="menu_bottom">
             <div class="menu_box" v-for="(item, index) in bottomMenuItems" :key="'bottom-' + index">
                 <div v-if="item.path === 'logout'">
-                    <t-popconfirm 
-                        content="确定要退出登录吗？" 
+                    <t-popconfirm
+                        :content="t('menu.confirmLogout')"
                         @confirm="handleLogout"
                         placement="top"
                         :show-arrow="true"
@@ -91,7 +91,7 @@
                                 <div class="menu_icon">
                                     <img class="icon" :src="getImgSrc(logoutIcon)" alt="">
                                 </div>
-                                <span class="menu_title">{{ item.title }}</span>
+                                <span class="menu_title">{{ t(item.titleKey) }}</span>
                             </div>
                         </div>
                     </t-popconfirm>
@@ -103,7 +103,7 @@
                         <div class="menu_icon">
                             <img class="icon" :src="getImgSrc(item.icon == 'zhishiku' ? knowledgeIcon : item.icon == 'tenant' ? tenantIcon : prefixIcon)" alt="">
                         </div>
-                        <span class="menu_title">{{ item.path === 'knowledge-bases' && kbMenuItem ? kbMenuItem.title : item.title }}</span>
+                        <span class="menu_title">{{ item.path === 'knowledge-bases' && kbMenuItem?.title ? kbMenuItem.title : t(item.titleKey) }}</span>
                     </div>
                 </div>
             </div>
@@ -118,12 +118,14 @@
 import { storeToRefs } from 'pinia';
 import { onMounted, watch, computed, ref, reactive, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { getSessionsList, delSession } from "@/api/chat/index";
 import { getKnowledgeBaseById, listKnowledgeBases, uploadKnowledgeFile } from '@/api/knowledge-base';
 import { kbFileTypeVerification } from '@/utils/index';
 import { useMenuStore } from '@/stores/menu';
 import { useAuthStore } from '@/stores/auth';
 import { MessagePlugin } from "tdesign-vue-next";
+const { t } = useI18n();
 let uploadInput = ref();
 const usemenuStore = useMenuStore();
 const authStore = useAuthStore();
@@ -234,14 +236,14 @@ const uploadFile = async () => {
             const kb = kbResponse.data;
             
             // 检查知识库是否已初始化（有 EmbeddingModelID 和 SummaryModelID）
-            if (!kb.embedding_model_id || kb.embedding_model_id === '' || 
+            if (!kb.embedding_model_id || kb.embedding_model_id === '' ||
                 !kb.summary_model_id || kb.summary_model_id === '') {
-                MessagePlugin.warning("该知识库尚未完成初始化配置，请先前往设置页面配置模型信息后再上传文件");
+                MessagePlugin.warning(t('knowledgeBase.notInitialized'));
                 return;
             }
         } catch (error) {
             console.error('获取知识库信息失败:', error);
-            MessagePlugin.error("获取知识库信息失败，无法上传文件");
+            MessagePlugin.error(t('knowledgeBase.getInfoFailed'));
             return;
         }
     }
@@ -260,7 +262,7 @@ const upload = async (e: any) => {
     // 获取当前知识库ID
     const currentKbId = (route.params as any)?.kbId as string;
     if (!currentKbId) {
-        MessagePlugin.error("缺少知识库ID");
+        MessagePlugin.error(t('knowledgeBase.missingId'));
         return;
     }
     
@@ -280,24 +282,24 @@ const upload = async (e: any) => {
         const isSuccess = responseData.success || responseData.code === 200 || responseData.status === 'success' || (!responseData.error && responseData);
         
         if (isSuccess) {
-            MessagePlugin.info("上传成功！");
+            MessagePlugin.info(t('file.uploadSuccess'));
         } else {
             // 改进错误信息提取逻辑
-            let errorMessage = "上传失败！";
+            let errorMessage = t('file.uploadFailed');
             if (responseData.error && responseData.error.message) {
                 errorMessage = responseData.error.message;
             } else if (responseData.message) {
                 errorMessage = responseData.message;
             }
             if (responseData.code === 'duplicate_file' || (responseData.error && responseData.error.code === 'duplicate_file')) {
-                errorMessage = "文件已存在";
+                errorMessage = t('file.fileExists');
             }
             MessagePlugin.error(errorMessage);
         }
     } catch (err: any) {
-        let errorMessage = "上传失败！";
+        let errorMessage = t('file.uploadFailed');
         if (err.code === 'duplicate_file') {
-            errorMessage = "文件已存在";
+            errorMessage = t('file.fileExists');
         } else if (err.error && err.error.message) {
             errorMessage = err.error.message;
         } else if (err.message) {
@@ -331,7 +333,7 @@ const delCard = (index: number, item: any) => {
                 }
             }
         } else {
-            MessagePlugin.error("删除失败，请稍后再试!");
+            MessagePlugin.error(t('knowledgeBase.deleteFailed'));
         }
     })
 }
@@ -392,7 +394,7 @@ const getMessageList = async () => {
             // 过滤出当前知识库的会话
             const filtered = res.data.filter((s: any) => s.knowledge_base_id === kbId)
             filtered.forEach((item: any) => {
-                let obj = { title: item.title ? item.title : "新会话", path: `chat/${kbId}/${item.id}`, id: item.id, isMore: false, isNoTitle: item.title ? false : true }
+                let obj = { title: item.title ? item.title : t('menu.newSession'), path: `chat/${kbId}/${item.id}`, id: item.id, isMore: false, isNoTitle: item.title ? false : true }
                 usemenuStore.updatemenuArr(obj)
             });
             loading.value = false;

frontend/src/i18n/index.ts

@@ -0,0 +1,24 @@
+import { createI18n } from 'vue-i18n'
+import zhCN from './locales/zh-CN.ts'
+import ruRU from './locales/ru-RU.ts'
+import enUS from './locales/en-US.ts'
+
+const messages = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+  'ru-RU': ruRU
+}
+
+// Получаем сохраненный язык из localStorage или используем китайский по умолчанию
+const savedLocale = localStorage.getItem('locale') || 'zh-CN'
+console.log('i18n инициализация с языком:', savedLocale)
+
+const i18n = createI18n({
+  legacy: false,
+  locale: savedLocale,
+  fallbackLocale: 'zh-CN',
+  globalInjection: true,
+  messages
+})
+
+export default i18n