fix: UI improvements

- Remove auto-open devtools
- Settings as right drawer
- DB selector in title bar
- Sidebar expand/collapse
- Fix dark mode colors for key detail

src/components/Sidebar.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-// src/renderer/src/components/Sidebar.vue
+// src/components/Sidebar.vue
 import { ref } from 'vue'
 import ConnectionList from './ConnectionList.vue'
 import NewConnectionDialog from './NewConnectionDialog.vue'
 import { useConnectionStore } from '@renderer/stores/connection'
 import { useKeyStore } from '@renderer/stores/key'
+import { useI18n } from '@renderer/i18n'
 import type { ConnectionConfig } from '@renderer/stores/connection'
 import { useKeyboard } from '@renderer/composables/useKeyboard'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const connStore = useConnectionStore()
 const keyStore = useKeyStore()
+const { t } = useI18n()
 const dialogVisible = ref(false)
 const editingConnection = ref<ConnectionConfig | null>(null)
+const collapsed = ref(false)
 
 function handleEdit(conn: ConnectionConfig | null) {
   editingConnection.value = conn
@@ -27,9 +30,9 @@ function handleNew() {
 async function deleteSelectedKey() {
   if (!connStore.activeId || !keyStore.selectedKey) return
   try {
-    await ElMessageBox.confirm(`Delete key "${keyStore.selectedKey}"?`, 'Confirm')
+    await ElMessageBox.confirm(t('key.deleteConfirm', { key: keyStore.selectedKey }), t('common.confirm'))
     await window.electronAPI.redis.deleteKey(connStore.activeId, keyStore.selectedKey)
-    ElMessage.success('Deleted')
+    ElMessage.success(t('key.deleted'))
     keyStore.selectedKey = null
     keyStore.keyData = null
     await keyStore.scanKeys(connStore.activeId, '0', true)
@@ -57,8 +60,15 @@ useKeyboard({
 </script>
 
 <template>
-  <aside class="sidebar">
-    <ConnectionList @edit="handleEdit" />
+  <aside class="sidebar" :class="{ collapsed }">
+    <div class="sidebar-header" v-if="!collapsed">
+      <ConnectionList @edit="handleEdit" />
+    </div>
+    <button class="collapse-btn" @click="collapsed = !collapsed" :title="collapsed ? '展开' : '收缩'">
+      <el-icon>
+        <component :is="collapsed ? 'ArrowRight' : 'ArrowLeft'" />
+      </el-icon>
+    </button>
     <NewConnectionDialog
       v-model:visible="dialogVisible"
       :connection="editingConnection"
@@ -75,5 +85,46 @@ useKeyboard({
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
+  transition: width 0.2s ease;
+}
+
+.sidebar.collapsed {
+  width: 36px;
+}
+
+.sidebar-header {
+  flex: 1;
+  overflow: hidden;
+}
+
+.collapse-btn {
+  position: absolute;
+  top: 50%;
+  right: -12px;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  z-index: 10;
+  transition: all 0.2s;
+}
+
+.collapse-btn:hover {
+  background: var(--bg-card-hover);
+  color: var(--text-primary);
+  border-color: var(--border-accent);
+}
+
+.sidebar.collapsed .collapse-btn {
+  right: -12px;
 }
 </style>