feat: add i18n to connection list and dialog

src/components/ConnectionList.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
-// src/renderer/src/components/ConnectionList.vue
+// src/components/ConnectionList.vue
 import { ref, computed } from 'vue'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import ConnectionCard from './ConnectionCard.vue'
 import { useConnectionStore } from '@renderer/stores/connection'
+import { useI18n } from '@renderer/i18n'
 import type { ConnectionConfig } from '@renderer/stores/connection'
 
 const connStore = useConnectionStore()
+const { t } = useI18n()
 const searchQuery = ref('')
 const emit = defineEmits<{ edit: [conn: ConnectionConfig | null] }>()
 
@@ -76,7 +78,7 @@ async function handleImport() {
         v-model="searchQuery"
         class="search-input"
         type="text"
-        placeholder="Search connections..."
+        :placeholder="t('connection.search')"
       />
     </div>
     <div class="list-items">
@@ -88,20 +90,20 @@ async function handleImport() {
         @delete="handleDelete"
       />
       <div v-if="filteredConnections.length === 0" class="list-empty">
-        <p v-if="searchQuery">No connections match</p>
+        <p v-if="searchQuery">{{ t('connection.noMatch') }}</p>
-        <p v-else>No connections yet</p>
+        <p v-else>{{ t('connection.noConnections') }}</p>
       </div>
     </div>
     <div class="list-footer">
       <button class="list-add-btn" @click="handleNew">
-        + New Connection
+        + {{ t('connection.new') }}
       </button>
       <div class="list-actions">
         <el-button size="small" text @click="handleImport">
-          <el-icon><Upload /></el-icon> Import
+          <el-icon><Upload /></el-icon> {{ t('connection.import') }}
         </el-button>
         <el-button size="small" text @click="handleExport">
-          <el-icon><Download /></el-icon> Export
+          <el-icon><Download /></el-icon> {{ t('connection.export') }}
         </el-button>
       </div>
     </div>

src/components/NewConnectionDialog.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-// src/renderer/src/components/NewConnectionDialog.vue
+// src/components/NewConnectionDialog.vue
 import { reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useConnectionStore } from '@renderer/stores/connection'
+import { useI18n } from '@renderer/i18n'
 import type { ConnectionConfig } from '@renderer/stores/connection'
 
 const props = defineProps<{ visible: boolean; connection: ConnectionConfig | null }>()
 const emit = defineEmits<{ 'update:visible': [v: boolean] }>()
 const connStore = useConnectionStore()
+const { t } = useI18n()
 
 const form = reactive({
   name: '',
@@ -119,47 +121,47 @@ async function handleSave() {
 <template>
   <el-dialog
     :model-value="visible"
-    :title="isEdit ? 'Edit Connection' : 'New Connection'"
+    :title="isEdit ? t('connection.edit') : t('connection.new')"
     width="480px"
     :close-on-click-modal="false"
     @update:model-value="close"
   >
     <el-form label-position="top" size="small">
-      <el-form-item label="Name" required>
+      <el-form-item :label="t('connection.name')" required>
         <el-input v-model="form.name" placeholder="My Redis" />
       </el-form-item>
       <el-row :gutter="12">
         <el-col :span="16">
-          <el-form-item label="Host" required>
+          <el-form-item :label="t('connection.host')" required>
             <el-input v-model="form.host" placeholder="127.0.0.1" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="Port">
+          <el-form-item :label="t('connection.port')">
             <el-input-number v-model="form.port" :min="1" :max="65535" controls-position="right" style="width:100%" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-form-item label="Password">
+      <el-form-item :label="t('connection.password')">
-        <el-input v-model="form.auth" type="password" show-password placeholder="Redis password" />
+        <el-input v-model="form.auth" type="password" show-password :placeholder="t('connection.password')" />
       </el-form-item>
-      <el-form-item label="Username (Redis 6+ ACL)">
+      <el-form-item :label="t('connection.username')">
         <el-input v-model="form.username" placeholder="default" />
       </el-form-item>
       <el-form-item label="Key Separator">
         <el-input v-model="form.separator" placeholder=":" />
       </el-form-item>
       <el-form-item>
-        <el-checkbox v-model="form.tls">Enable TLS/SSL</el-checkbox>
+        <el-checkbox v-model="form.tls">{{ t('connection.tls') }}</el-checkbox>
       </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleTest" :loading="testing">Test Connection</el-button>
+        <el-button @click="handleTest" :loading="testing">{{ t('connection.testConnection') }}</el-button>
         <div class="footer-right">
-          <el-button @click="close">Cancel</el-button>
+          <el-button @click="close">{{ t('common.cancel') }}</el-button>
           <el-button type="primary" :loading="saving" @click="handleSave">
-            {{ isEdit ? 'Save' : 'Create' }}
+            {{ isEdit ? t('common.save') : t('connection.create') }}
           </el-button>
         </div>
       </div>

src/i18n/locales/en.ts

@@ -38,6 +38,14 @@ export default {
     testFailed: 'Connection failed',
     connected: 'Connected',
     disconnected: 'Disconnected',
+    search: 'Search connections...',
+    noMatch: 'No connections match',
+    noConnections: 'No connections yet',
+    import: 'Import',
+    export: 'Export',
+    testConnection: 'Test Connection',
+    create: 'Create',
+    save: 'Save',
   },
   key: {
     title: 'Keys',

src/i18n/locales/zh-CN.ts

@@ -38,6 +38,14 @@ export default {
     testFailed: '连接失败',
     connected: '已连接',
     disconnected: '未连接',
+    search: '搜索连接...',
+    noMatch: '无匹配连接',
+    noConnections: '暂无连接',
+    import: '导入',
+    export: '导出',
+    testConnection: '测试连接',
+    create: '创建',
+    save: '保存',
   },
   key: {
     title: '键',