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-else>No connections yet</p>
+        <p v-if="searchQuery">{{ t('connection.noMatch') }}</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>