Implement select to changue language

electron/main/index.ts

@@ -39,7 +39,7 @@ const indexHtml = join(ROOT_PATH.dist, "index.html");
 
 async function createWindow() {
   win = new BrowserWindow({
-    width: 900,
+    width: 1200,
     minWidth: 900,
     minHeight: 650,
     height: 650,

src/assets/i18n/i18n.ts

@@ -30,7 +30,8 @@ const messages = {
       retryInterval: 'Retry Interval (s)',
       speechKey: 'SpeechKey',
       serviceRegion: 'ServiceRegion',
-      autoplay: 'Autoplay',
+      autoplay: 'Autoplay',      
+      language: 'Language',
       updateNotification: 'Update Notification',
       titleStyle: 'Title Bar Style',
       auditionText: 'Audition Text',
@@ -46,7 +47,6 @@ const messages = {
       no: 'No',
       serviceRegionPlaceHolder: "Fill in the service region, such as: westus",
       confirm: 'OK',
-      language: 'Language',
       voice: 'Voice',
       style: 'Style',
       role: 'Role',
@@ -373,6 +373,7 @@ const messages = {
       retryInterval: 'Intervalo de Reintentos (s)',
       speechKey: 'Clave de Voz',
       serviceRegion: 'Región del Servicio',
+      language: 'Idioma',
       autoplay: 'Reproducción Automática',
       updateNotification: 'Notificación de Actualización',
       titleStyle: 'Estilo de la Barra de Título',
@@ -389,7 +390,6 @@ const messages = {
       no: 'No',
       serviceRegionPlaceHolder: "Complete la región de servicio, como por ejemplo: westus",
       confirm: 'OK',
-      language: 'Idioma',
       voice: 'Voz',
       style: 'Estilo',
       role: 'Rol',
@@ -689,7 +689,8 @@ const messages = {
       retryInterval: '重试间隔(s)',
       speechKey: 'SpeechKey',
       serviceRegion: 'ServiceRegion',
-      autoplay: '自动播放',
+      autoplay: '自动播放',      
+      language: '语言',
       updateNotification: '新版本提醒',
       titleStyle: '标题栏样式',
       auditionText: '试听文本',
@@ -705,7 +706,6 @@ const messages = {
       no: '否',
       serviceRegionPlaceHolder: "请填写ServiceRegion，如：westus",
       confirm: '确认',
-      language: '语言',
       voice: '语音',
       style: '风格',
       role: '角色',

src/components/configpage/ConfigPage.vue

@@ -2,6 +2,21 @@
   <div class="config-page">
     <div class="config-side" label-position="right">
       <el-form :model="config" >
+        <el-form-item :label="t('configPage.language')">
+          <el-select
+            v-model="config.language"
+            size="small"
+            class="input-path"
+            @change="saveLanguageConfig"
+          >
+            <el-option
+              v-for="lang in languages"
+              :key="lang.value"
+              :label="lang.label"
+              :value="lang.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item :label="t('configPage.downloadPath')">
           <el-input
             v-model="config.savePath"
@@ -163,6 +178,7 @@ import { useTtsStore } from "@/store/store";
 import { storeToRefs } from "pinia";
 import Donate from "./Donate.vue";
 import { useI18n } from 'vue-i18n';
+import i18n from "@/assets/i18n/i18n";
 const { t } = useI18n();  
 
 const { ipcRenderer, shell } = require("electron");
@@ -173,6 +189,23 @@ const store = new Store();
 const ttsStore = useTtsStore();
 const { config } = storeToRefs(ttsStore);
 
+
+const languages = [
+  // Agrega más idiomas según sea necesario  
+  { label: 'English', value: 'en' },
+  { label: 'Español', value: 'es' },
+  { label: '中文', value: 'zh' },
+];
+
+const saveLanguageConfig = () => {
+  // Actualiza el idioma en i18n y guarda la configuración
+  i18n.global.locale.value = config.value.language;
+  // Llama a cualquier método necesario para guardar la configuración
+  // Por ejemplo, puedes llamar a 'savePathConfig' si también guarda el idioma, o crear un nuevo método.
+  savePathConfig(); // o tu método personalizado para guardar la configuración del idioma
+};
+
+
 const openFolderSelector = async () => {
   const path = await ipcRenderer.invoke("openFolderSelector");
   if (path) {

src/global/initLocalStore.ts

@@ -38,6 +38,9 @@ export default async function initStore() {
       t("initialLocalStore.audition")
     );
   }
+  if (!store.has("language")) {
+    store.set("language", "en");
+  }
   if (!store.has("autoplay")) {
     store.set("autoplay", true);
   }

src/store/store.ts

@@ -27,6 +27,7 @@ export const useTtsStore = defineStore("ttsStore", {
       tableData: <any>[], // 文件列表的数据
       currConfigName: "默认", // 当前配置的名字
       config: {
+        language: store.get("language"),
         formConfigJson: store.get("FormConfig"),
         formConfigList: <any>[],
         configLabel: <any>[],