✨ Add i18n support

2025-04-28 11:49:58 +08:00
parent 618bae3afe
commit 0d3df25a94
8 changed files with 440 additions and 16 deletions
--- a/frontend/src/components/toolbar/Toolbar.vue
+++ b/frontend/src/components/toolbar/Toolbar.vue
@@ -1,35 +1,59 @@
 <script setup lang="ts">
 import {useEditorStore} from '@/stores/editorStore';
 import {useConfigStore} from '@/stores/configStore';
+import {useLogStore} from '@/stores/logStore';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import {SUPPORTED_LOCALES, setLocale, SupportedLocaleType} from '@/i18n';

 const editorStore = useEditorStore();
 const configStore = useConfigStore();
+const logStore = useLogStore();
+const { t, locale } = useI18n();
+
+// 语言下拉菜单
+const showLanguageMenu = ref(false);
+
+// 切换语言
+const changeLanguage = (localeCode: SupportedLocaleType) => {
+  setLocale(localeCode);
+  showLanguageMenu.value = false;
+};
+
+// 切换语言菜单显示
+const toggleLanguageMenu = () => {
+  showLanguageMenu.value = !showLanguageMenu.value;
+};
 </script>

 <template>
  <div class="toolbar-container">
    <div class="statistics">
-      <span class="stat-item" title="行数">Ln: <span class="stat-value">{{
+      <span class="stat-item" :title="t('toolbar.editor.lines')">{{ t('toolbar.editor.lines') }}: <span class="stat-value">{{
          editorStore.documentStats.lines
        }}</span></span>
-      <span class="stat-item" title="字符数">Ch: <span class="stat-value">{{
+      <span class="stat-item" :title="t('toolbar.editor.characters')">{{ t('toolbar.editor.characters') }}: <span class="stat-value">{{
          editorStore.documentStats.characters
        }}</span></span>
-      <span class="stat-item" title="选中字符数" v-if="editorStore.documentStats.selectedCharacters > 0">
-        Sel: <span class="stat-value">{{ editorStore.documentStats.selectedCharacters }}</span>
+      <span class="stat-item" :title="t('toolbar.editor.selected')" v-if="editorStore.documentStats.selectedCharacters > 0">
+        {{ t('toolbar.editor.selected') }}: <span class="stat-value">{{ editorStore.documentStats.selectedCharacters }}</span>
+      </span>
+      <span v-if="logStore.showLog && logStore.latestLog" class="log-item" :class="'log-' + logStore.latestLog.level"
+            @click="logStore.hideCurrentLog()">
+        {{ logStore.latestLog.message }}
      </span>
    </div>
    <div class="actions">
-      <span class="font-size" title="字体大小 (Ctrl+滚轮调整)" @click="configStore.resetFontSize">
+      <span class="font-size" :title="t('toolbar.fontSizeTooltip')" @click="configStore.resetFontSize">
        {{ configStore.config.fontSize }}px
      </span>
      <span class="tab-settings">
-        <label title="启用Tab键缩进" class="tab-toggle">
+        <label :title="t('toolbar.tabLabel')" class="tab-toggle">
          <input type="checkbox" :checked="configStore.config.enableTabIndent" @change="configStore.toggleTabIndent"/>
-          <span>Tab</span>
+          <span>{{ t('toolbar.tabLabel') }}</span>
        </label>
-        <span class="tab-type" title="Tab类型切换" @click="configStore.toggleTabType">
-          {{ configStore.config.tabType === 'spaces' ? '空格' : '制表符' }}
+        <span class="tab-type" :title="t('toolbar.tabType.' + (configStore.config.tabType === 'spaces' ? 'spaces' : 'tab'))" @click="configStore.toggleTabType">
+          {{ t('toolbar.tabType.' + (configStore.config.tabType === 'spaces' ? 'spaces' : 'tab')) }}
        </span>
        <span class="tab-size" title="Tab大小" v-if="configStore.config.tabType === 'spaces'">
          <button class="tab-btn" @click="configStore.decreaseTabSize" :disabled="configStore.config.tabSize <= configStore.MIN_TAB_SIZE">-</button>
@@ -37,8 +61,28 @@ const configStore = useConfigStore();
          <button class="tab-btn" @click="configStore.increaseTabSize" :disabled="configStore.config.tabSize >= configStore.MAX_TAB_SIZE">+</button>
        </span>
      </span>
-      <span class="encoding">{{ configStore.config.encoding }}</span>
-      <button class="settings-btn">
+      <span class="encoding">{{ t('toolbar.encoding') }}</span>
+      
+      <!-- 语言切换按钮 -->
+      <div class="language-selector">
+        <button class="language-btn" @click="toggleLanguageMenu">
+          {{ locale }}
+          <span class="arrow-up">▲</span>
+        </button>
+        <div class="language-menu" v-if="showLanguageMenu">
+          <div 
+            v-for="lang in SUPPORTED_LOCALES" 
+            :key="lang.code" 
+            class="language-option"
+            :class="{ active: locale === lang.code }"
+            @click="changeLanguage(lang.code)"
+          >
+            {{ t(`languages.${lang.code}`) }}
+          </div>
+        </div>
+      </div>
+      
+      <button class="settings-btn" :title="t('toolbar.settings')">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
@@ -61,6 +105,7 @@ const configStore = useConfigStore();
  height: 28px;
  font-size: 12px;
  border-top: 1px solid var(--border-color);
+  user-select: none;

  .statistics {
    display: flex;
@@ -73,6 +118,24 @@ const configStore = useConfigStore();
        color: #e0e0e0;
      }
    }
+    
+    .log-item {
+      cursor: default;
+      font-size: 12px;
+      transition: opacity 0.3s ease;
+      
+      &.log-info {
+        color: rgba(177, 176, 176, 0.8);
+      }
+      
+      &.log-warning {
+        color: rgba(240, 230, 140, 0.8);
+      }
+      
+      &.log-error {
+        color: rgba(255, 107, 107, 0.8);
+      }
+    }
  }

  .actions {
@@ -142,6 +205,61 @@ const configStore = useConfigStore();
      color: var(--text-muted);
      font-size: 11px;
    }
+    
+    /* 语言切换样式 */
+    .language-selector {
+      position: relative;
+      
+      .language-btn {
+        background: none;
+        border: none;
+        color: var(--text-muted);
+        cursor: pointer;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px 4px;
+        border-radius: 3px;
+        
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.05);
+        }
+        
+        .arrow-up {
+          font-size: 8px;
+          margin-left: 2px;
+        }
+      }
+      
+      .language-menu {
+        position: absolute;
+        bottom: 100%;
+        right: 0;
+        background-color: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 3px;
+        margin-bottom: 4px;
+        min-width: 100px;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        
+        .language-option {
+          padding: 4px 8px;
+          cursor: pointer;
+          font-size: 11px;
+          white-space: nowrap;
+          
+          &:hover {
+            background-color: var(--bg-hover);
+          }
+          
+          &.active {
+            color: #b5cea8;
+          }
+        }
+      }
+    }

    .settings-btn {
      background: none;
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -0,0 +1,55 @@
+import {createI18n} from 'vue-i18n';
+import {useStorage} from '@vueuse/core';
+import messages from './locales';
+
+// 定义支持的语言类型
+export type SupportedLocaleType = 'zh-CN' | 'en-US';
+
+// 支持的语言列表
+export const SUPPORTED_LOCALES = [
+    {
+        code: 'zh-CN' as SupportedLocaleType,
+        name: '简体中文'
+    },
+    {
+        code: 'en-US' as SupportedLocaleType,
+        name: 'English'
+    }
+];
+
+// 获取浏览器的默认语言
+const getBrowserLanguage = (): SupportedLocaleType => {
+    const browserLang = navigator.language;
+    const langCode = browserLang.split('-')[0];
+
+    // 检查是否支持此语言
+    const supportedLang = SUPPORTED_LOCALES.find(locale =>
+        locale.code.startsWith(langCode) || locale.code.split('-')[0] === langCode
+    );
+
+    return supportedLang?.code || 'zh-CN'; // 默认为中文
+};
+
+const storedLocale = useStorage<SupportedLocaleType>('voidraft-language', getBrowserLanguage());
+
+// 创建i18n实例
+const i18n = createI18n({
+    lobalInjection: true,
+    locale: storedLocale.value,
+    fallbackLocale: 'zh-CN' as SupportedLocaleType,
+    messages
+});
+
+// 切换语言的方法
+export const setLocale = (locale: SupportedLocaleType) => {
+    if (SUPPORTED_LOCALES.some(l => l.code === locale)) {
+        storedLocale.value = locale;
+        i18n.global.locale = locale;
+        document.documentElement.setAttribute('lang', locale);
+    }
+};
+
+// 初始设置html lang属性
+document.documentElement.setAttribute('lang', storedLocale.value);
+
+export default i18n; 
--- a/frontend/src/i18n/locales/en-US.ts
+++ b/frontend/src/i18n/locales/en-US.ts
@@ -0,0 +1,33 @@
+export default {
+  toolbar: {
+    editor: {
+      lines: 'Ln',
+      characters: 'Ch',
+      selected: 'Sel'
+    },
+    fontSize: 'Font Size',
+    fontSizeTooltip: 'Font Size (Ctrl+wheel to adjust)',
+    tabLabel: 'Tab',
+    tabType: {
+      spaces: 'Spaces',
+      tab: 'Tab'
+    },
+    encoding: 'UTF-8',
+    settings: 'Settings'
+  },
+  config: {
+    loadSuccess: 'Configuration loaded successfully',
+    loadFailed: 'Failed to load configuration',
+    saveSuccess: 'Configuration saved',
+    saveFailed: 'Failed to save configuration',
+    resetSuccess: 'Configuration reset to defaults',
+    resetFailed: 'Failed to reset configuration',
+    fontSizeFixed: 'Font size ({value}) has been corrected to {fixed}',
+    tabSizeFixed: 'Tab size ({value}) has been corrected to {fixed}',
+    tabTypeFixed: 'Tab type ({value}) is invalid, corrected to spaces'
+  },
+  languages: {
+    'zh-CN': '简体中文',
+    'en-US': 'English'
+  }
+}; 
--- a/frontend/src/i18n/locales/index.ts
+++ b/frontend/src/i18n/locales/index.ts
@@ -0,0 +1,7 @@
+import zhCN from './zh-CN';
+import enUS from './en-US';
+
+export default {
+  'zh-CN': zhCN,
+  'en-US': enUS
+}; 
--- a/frontend/src/i18n/locales/zh-CN.ts
+++ b/frontend/src/i18n/locales/zh-CN.ts
@@ -0,0 +1,33 @@
+export default {
+  toolbar: {
+    editor: {
+      lines: 'Ln',
+      characters: 'Ch',
+      selected: 'Sel'
+    },
+    fontSize: '字体大小',
+    fontSizeTooltip: '字体大小 (Ctrl+滚轮调整)',
+    tabLabel: 'Tab',
+    tabType: {
+      spaces: '空格',
+      tab: '制表符'
+    },
+    encoding: 'UTF-8',
+    settings: '设置'
+  },
+  config: {
+    loadSuccess: '配置加载成功',
+    loadFailed: '配置加载失败',
+    saveSuccess: '配置已保存',
+    saveFailed: '配置保存失败',
+    resetSuccess: '配置已重置为默认值',
+    resetFailed: '重置配置失败',
+    fontSizeFixed: '字体大小值({value})已被修正为{fixed}',
+    tabSizeFixed: 'Tab大小值({value})已被修正为{fixed}',
+    tabTypeFixed: 'Tab类型({value})不合法，已修正为空格'
+  },
+  languages: {
+    'zh-CN': '简体中文',
+    'en-US': 'English'
+  }
+}; 
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,6 +5,7 @@ import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
 import {createPinia} from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import i18n from './i18n';

 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -16,4 +17,5 @@ app.use(PrimeVue, {
        preset: Aura
    }
 });
+app.use(i18n);
 app.mount('#app');
--- a/frontend/src/stores/configStore.ts
+++ b/frontend/src/stores/configStore.ts
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia';
-import {ref, watch} from 'vue';
+import {ref, watch, inject} from 'vue';
 import {useDebounceFn} from '@vueuse/core';
 import {
    GetEditorConfig,
@@ -7,6 +7,8 @@ import {
    UpdateEditorConfig
 } from '@/../bindings/voidraft/internal/services/configservice';
 import {EditorConfig, TabType} from '@/../bindings/voidraft/internal/models/models';
+import {useLogStore} from './logStore';
+import { useI18n } from 'vue-i18n';

 // 字体大小范围
 const MIN_FONT_SIZE = 12;
@@ -19,6 +21,10 @@ const MIN_TAB_SIZE = 2;
 const MAX_TAB_SIZE = 8;

 export const useConfigStore = defineStore('config', () => {
+    // 获取日志store
+    const logStore = useLogStore();
+    const { t } = useI18n();
+    
    // 配置状态
    const config = ref<EditorConfig>(new EditorConfig({
        fontSize: DEFAULT_FONT_SIZE,
@@ -34,11 +40,66 @@ export const useConfigStore = defineStore('config', () => {
    // 从后端加载配置
    async function loadConfigFromBackend() {
        try {
-            const editorConfig = await GetEditorConfig();
-            config.value = editorConfig;
+            config.value = await GetEditorConfig();
+            
+            // 验证并纠正配置
+            validateAndFixConfig();
+            
            configLoaded.value = true;
+            logStore.info(t('config.loadSuccess'));
        } catch (error) {
            console.error('Failed to load configuration:', error);
+            logStore.error(t('config.loadFailed'));
+        }
+    }
+    
+    // 验证配置是否在合理范围内，并修正无效值
+    function validateAndFixConfig() {
+        let hasChanges = false;
+        
+        // 验证字体大小
+        if (config.value.fontSize < MIN_FONT_SIZE || config.value.fontSize > MAX_FONT_SIZE) {
+            const oldValue = config.value.fontSize;
+            config.value.fontSize = oldValue < MIN_FONT_SIZE ? MIN_FONT_SIZE : 
+                                   oldValue > MAX_FONT_SIZE ? MAX_FONT_SIZE : 
+                                   DEFAULT_FONT_SIZE;
+            
+            logStore.warning(t('config.fontSizeFixed', {
+                value: oldValue,
+                fixed: config.value.fontSize
+            }));
+            
+            hasChanges = true;
+        }
+        
+        // 验证Tab大小
+        if (config.value.tabSize < MIN_TAB_SIZE || config.value.tabSize > MAX_TAB_SIZE) {
+            const oldValue = config.value.tabSize;
+            config.value.tabSize = oldValue < MIN_TAB_SIZE ? MIN_TAB_SIZE : 
+                                  oldValue > MAX_TAB_SIZE ? MAX_TAB_SIZE : 
+                                  DEFAULT_TAB_SIZE;
+            
+            logStore.warning(t('config.tabSizeFixed', {
+                value: oldValue,
+                fixed: config.value.tabSize
+            }));
+            
+            hasChanges = true;
+        }
+        
+        // 验证TabType是否合法
+        const validTabTypes = [TabType.TabTypeSpaces, TabType.TabTypeTab];
+        if (!validTabTypes.includes(config.value.tabType)) {
+            const oldValue = config.value.tabType;
+            config.value.tabType = TabType.TabTypeSpaces;
+            
+            logStore.warning(t('config.tabTypeFixed', { value: oldValue }));
+            hasChanges = true;
+        }
+        
+        // 如果配置被修正，保存回后端
+        if (hasChanges && configLoaded.value) {
+            saveConfigToBackend();
        }
    }

@@ -46,8 +107,10 @@ export const useConfigStore = defineStore('config', () => {
    const saveConfigToBackend = useDebounceFn(async () => {
        try {
            await UpdateEditorConfig(config.value);
+            logStore.info(t('config.saveSuccess'));
        } catch (error) {
            console.error('Failed to save configuration:', error);
+            logStore.error(t('config.saveFailed'));
        }
    }, 500); // 500ms防抖

@@ -110,8 +173,14 @@ export const useConfigStore = defineStore('config', () => {

    // 重置为默认配置
    async function resetToDefaults() {
-        await ResetToDefault();
-        await loadConfigFromBackend();
+        try {
+            await ResetToDefault();
+            await loadConfigFromBackend();
+            logStore.info(t('config.resetSuccess'));
+        } catch (error) {
+            console.error('Failed to reset configuration:', error);
+            logStore.error(t('config.resetFailed'));
+        }
    }
    return {
        // 状态
--- a/frontend/src/stores/logStore.ts
+++ b/frontend/src/stores/logStore.ts
@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+// 日志级别定义
+export enum LogLevel {
+  INFO = 'info',
+  WARNING = 'warning',
+  ERROR = 'error'
+}
+
+// 日志项结构
+export interface LogItem {
+  id: number;
+  level: LogLevel;
+  message: string;
+  timestamp: Date;
+}
+
+export const useLogStore = defineStore('log', () => {
+  // 日志列表
+  const logs = ref<LogItem[]>([]);
+  
+  // 最近一条日志，用于在工具栏显示
+  const latestLog = ref<LogItem | null>(null);
+  
+  // 是否显示日志
+  const showLog = ref(true);
+  
+  // 自动隐藏计时器
+  let hideTimer: number | null = null;
+  
+  // 添加日志
+  function addLog(level: LogLevel, message: string, autoHideDelay = 5000) {
+    const id = Date.now();
+    const logItem: LogItem = {
+      id,
+      level,
+      message,
+      timestamp: new Date()
+    };
+    
+    // 添加到日志列表
+    logs.value.push(logItem);
+    
+    // 保持日志列表在合理大小
+    if (logs.value.length > 100) {
+      logs.value = logs.value.slice(-100);
+    }
+    
+    // 设置最新日志
+    latestLog.value = logItem;
+    showLog.value = true;
+    
+    // 设置自动隐藏
+    if (hideTimer) {
+      window.clearTimeout(hideTimer);
+    }
+    
+    if (autoHideDelay > 0) {
+      hideTimer = window.setTimeout(() => {
+        showLog.value = false;
+      }, autoHideDelay);
+    }
+    
+    return id;
+  }
+  
+  // 添加不同级别的日志的便捷方法
+  function info(message: string, autoHideDelay = 5000) {
+    return addLog(LogLevel.INFO, message, autoHideDelay);
+  }
+  
+  function warning(message: string, autoHideDelay = 5000) {
+    return addLog(LogLevel.WARNING, message, autoHideDelay);
+  }
+  
+  function error(message: string, autoHideDelay = 5000) {
+    return addLog(LogLevel.ERROR, message, autoHideDelay);
+  }
+  
+  // 清除日志
+  function clearLogs() {
+    logs.value = [];
+    latestLog.value = null;
+    showLog.value = false;
+  }
+  
+  // 手动隐藏当前日志
+  function hideCurrentLog() {
+    showLog.value = false;
+  }
+  
+  return {
+    // 状态
+    logs,
+    latestLog,
+    showLog,
+    
+    // 方法
+    addLog,
+    info,
+    warning,
+    error,
+    clearLogs,
+    hideCurrentLog
+  };
+});