From d2fd07161c85395b8b4abe88ae2f689de0d3e5c2 Mon Sep 17 00:00:00 2001
From: Jokul <wangshengshan011@163.com>
Date: Sat, 4 Jul 2026 23:38:09 +0800
Subject: [PATCH] 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
---
 electron/main/index.ts        |   1 -
 src/App.vue                   |   9 +--
 src/components/DbSelector.vue |  22 +++++--
 src/components/MainArea.vue   | 107 +++++++++++++++++++---------------
 src/components/Sidebar.vue    |  61 +++++++++++++++++--
 src/components/TitleBar.vue   |  21 ++++++-
 src/styles/global.css         |  57 ++++++++++++++++++
 7 files changed, 216 insertions(+), 62 deletions(-)

diff --git a/electron/main/index.ts b/electron/main/index.ts
index ec762f8..dd7286d 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -41,7 +41,6 @@ function createWindow(): void {
 
   if (process.env.ELECTRON_RENDERER_URL) {
     mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
-    mainWindow.webContents.openDevTools()
   } else {
     mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
   }
diff --git a/src/App.vue b/src/App.vue
index 3b9df40..7f8141d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// src/renderer/src/App.vue
-import { onMounted } from 'vue'
+// src/App.vue
+import { ref, onMounted } from 'vue'
 import TitleBar from './components/TitleBar.vue'
 import Sidebar from './components/Sidebar.vue'
 import MainArea from './components/MainArea.vue'
@@ -8,6 +8,7 @@ import StatusBar from './components/StatusBar.vue'
 import { useConnectionStore } from '@renderer/stores/connection'
 
 const connStore = useConnectionStore()
+const showSettings = ref(false)
 
 onMounted(() => {
   connStore.loadConnections()
@@ -16,10 +17,10 @@ onMounted(() => {
 
 <template>
   <div class="app-shell">
-    <TitleBar />
+    <TitleBar v-model:showSettings="showSettings" />
     <div class="app-body">
       <Sidebar />
-      <MainArea />
+      <MainArea v-model:showSettings="showSettings" />
     </div>
     <StatusBar />
   </div>
diff --git a/src/components/DbSelector.vue b/src/components/DbSelector.vue
index 5fb9317..3e93b6c 100644
--- a/src/components/DbSelector.vue
+++ b/src/components/DbSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// src/renderer/src/components/DbSelector.vue
+// src/components/DbSelector.vue
 import { ref, watch } from 'vue'
 import { useConnectionStore } from '@renderer/stores/connection'
 import { useKeyStore } from '@renderer/stores/key'
@@ -34,7 +34,7 @@ async function switchDb(db: number) {
       :model-value="selectedDb"
       size="small"
       @change="switchDb"
-      style="width: 70px"
+      style="width: 60px"
     >
       <el-option
         v-for="db in dbs"
@@ -50,13 +50,27 @@ async function switchDb(db: number) {
 .db-selector {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   padding: 0 8px;
 }
 
 .db-label {
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-muted);
   font-weight: 600;
 }
+
+:deep(.el-select .el-input__wrapper) {
+  background: var(--bg-card);
+  border-color: var(--border-color);
+  box-shadow: none;
+}
+
+:deep(.el-select .el-input__wrapper:hover) {
+  border-color: var(--border-accent);
+}
+
+:deep(.el-select .el-input__wrapper.is-focus) {
+  border-color: var(--accent);
+}
 </style>
diff --git a/src/components/MainArea.vue b/src/components/MainArea.vue
index 7c904aa..d88202d 100644
--- a/src/components/MainArea.vue
+++ b/src/components/MainArea.vue
@@ -12,7 +12,10 @@ import SettingsView from './SettingsView.vue'
 const connStore = useConnectionStore()
 const { t } = useI18n()
 
-type Tab = 'status' | 'keys' | 'cli' | 'slowlog' | 'settings'
+const props = defineProps<{ showSettings: boolean }>()
+const emit = defineEmits<{ 'update:showSettings': [v: boolean] }>()
+
+type Tab = 'status' | 'keys' | 'cli' | 'slowlog'
 const activeTab = ref<Tab>('status')
 
 watch(
@@ -27,49 +30,38 @@ watch(
 
 <template>
   <div class="main-area">
-    <div class="tab-bar">
-      <template v-if="connStore.isConnected">
-        <button
-          class="tab-item"
-          :class="{ active: activeTab === 'status' }"
-          @click="activeTab = 'status'"
-        >
-          <el-icon><Monitor /></el-icon>
-          {{ t('status.title') }}
-        </button>
-        <button
-          class="tab-item"
-          :class="{ active: activeTab === 'keys' }"
-          @click="activeTab = 'keys'"
-        >
-          <el-icon><Document /></el-icon>
-          {{ t('key.title') }}
-        </button>
-        <button
-          class="tab-item"
-          :class="{ active: activeTab === 'cli' }"
-          @click="activeTab = 'cli'"
-        >
-          <el-icon><Monitor /></el-icon>
-          {{ t('cli.title') }}
-        </button>
-        <button
-          class="tab-item"
-          :class="{ active: activeTab === 'slowlog' }"
-          @click="activeTab = 'slowlog'"
-        >
-          <el-icon><Clock /></el-icon>
-          {{ t('slowlog.title') }}
-        </button>
-      </template>
-      <div class="tab-spacer" v-if="connStore.isConnected"></div>
+    <div class="tab-bar" v-if="connStore.isConnected">
       <button
         class="tab-item"
-        :class="{ active: activeTab === 'settings' }"
-        @click="activeTab = 'settings'"
+        :class="{ active: activeTab === 'status' }"
+        @click="activeTab = 'status'"
       >
-        <el-icon><Setting /></el-icon>
-        {{ t('settings.title') }}
+        <el-icon><Monitor /></el-icon>
+        {{ t('status.title') }}
+      </button>
+      <button
+        class="tab-item"
+        :class="{ active: activeTab === 'keys' }"
+        @click="activeTab = 'keys'"
+      >
+        <el-icon><Document /></el-icon>
+        {{ t('key.title') }}
+      </button>
+      <button
+        class="tab-item"
+        :class="{ active: activeTab === 'cli' }"
+        @click="activeTab = 'cli'"
+      >
+        <el-icon><Monitor /></el-icon>
+        {{ t('cli.title') }}
+      </button>
+      <button
+        class="tab-item"
+        :class="{ active: activeTab === 'slowlog' }"
+        @click="activeTab = 'slowlog'"
+      >
+        <el-icon><Clock /></el-icon>
+        {{ t('slowlog.title') }}
       </button>
     </div>
     <div class="tab-content">
@@ -79,13 +71,23 @@ watch(
         <CliView v-else-if="activeTab === 'cli'" />
         <SlowLogView v-else-if="activeTab === 'slowlog'" />
       </template>
-      <SettingsView v-if="activeTab === 'settings'" />
-      <div v-if="!connStore.isConnected && activeTab !== 'settings'" class="no-connection">
+      <div v-if="!connStore.isConnected" class="no-connection">
         <div class="placeholder-icon">JRD</div>
         <h2>JRedisDesktop</h2>
         <p>{{ t('app.placeholder') }}</p>
       </div>
     </div>
+
+    <!-- Settings Drawer -->
+    <el-drawer
+      :model-value="showSettings"
+      :title="t('settings.title')"
+      direction="rtl"
+      size="360px"
+      @update:model-value="emit('update:showSettings', $event)"
+    >
+      <SettingsView />
+    </el-drawer>
   </div>
 </template>
 
@@ -130,10 +132,6 @@ watch(
   border-bottom-color: var(--accent-light);
 }
 
-.tab-spacer {
-  flex: 1;
-}
-
 .tab-content {
   flex: 1;
   overflow: hidden;
@@ -174,4 +172,19 @@ watch(
 .no-connection p {
   font-size: 13px;
 }
+
+:deep(.el-drawer) {
+  background: var(--bg-secondary) !important;
+}
+
+:deep(.el-drawer__header) {
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0;
+  padding: 16px 20px;
+}
+
+:deep(.el-drawer__body) {
+  padding: 0;
+}
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 6c38bec..7d4e366 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
index 61d7204..989282b 100644
--- a/src/components/TitleBar.vue
+++ b/src/components/TitleBar.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
-// src/renderer/src/components/TitleBar.vue
+// src/components/TitleBar.vue
 import { useAppStore } from '@renderer/stores/app'
+import { useConnectionStore } from '@renderer/stores/connection'
+import { useI18n } from '@renderer/i18n'
+import DbSelector from './DbSelector.vue'
 
 const appStore = useAppStore()
+const connStore = useConnectionStore()
+const { t } = useI18n()
+
+const props = defineProps<{ showSettings: boolean }>()
+const emit = defineEmits<{ 'update:showSettings': [v: boolean] }>()
 
 function minimize() { window.electronAPI?.window.minimize() }
 function maximize() { window.electronAPI?.window.maximize() }
@@ -10,6 +18,9 @@ function close() { window.electronAPI?.window.close() }
 function toggleTheme() {
   appStore.setTheme(appStore.isDark ? 'light' : 'dark')
 }
+function openSettings() {
+  emit('update:showSettings', true)
+}
 </script>
 
 <template>
@@ -17,8 +28,12 @@ function toggleTheme() {
     <div class="titlebar-drag">
       <span class="titlebar-logo">JRD</span>
       <span class="titlebar-title">JRedisDesktop</span>
+      <DbSelector v-if="connStore.isConnected" class="titlebar-db" />
     </div>
     <div class="titlebar-actions">
+      <button class="titlebar-btn" :title="t('settings.title')" @click="openSettings">
+        <el-icon><Setting /></el-icon>
+      </button>
       <button class="titlebar-btn" title="Toggle theme" @click="toggleTheme">
         {{ appStore.isDark ? '☀' : '☾' }}
       </button>
@@ -69,6 +84,10 @@ function toggleTheme() {
   color: var(--text-secondary);
 }
 
+.titlebar-db {
+  -webkit-app-region: no-drag;
+}
+
 .titlebar-actions {
   display: flex;
   -webkit-app-region: no-drag;
diff --git a/src/styles/global.css b/src/styles/global.css
index 0d2f6e4..702b100 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -33,3 +33,60 @@ body {
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+
+/* Element Plus Dark Mode Fixes */
+.el-textarea__inner,
+.el-input__wrapper {
+  background: var(--bg-primary) !important;
+  border-color: var(--border-color) !important;
+  color: var(--text-primary) !important;
+  box-shadow: none !important;
+}
+
+.el-textarea__inner:focus,
+.el-input__wrapper.is-focus {
+  border-color: var(--accent) !important;
+}
+
+.el-textarea.is-disabled .el-textarea__inner {
+  background: var(--bg-secondary) !important;
+  color: var(--text-secondary) !important;
+}
+
+.el-table {
+  --el-table-bg-color: var(--bg-primary);
+  --el-table-tr-bg-color: var(--bg-primary);
+  --el-table-header-bg-color: var(--bg-secondary);
+  --el-table-row-hover-bg-color: var(--bg-hover);
+  --el-table-text-color: var(--text-primary);
+  --el-table-header-text-color: var(--text-secondary);
+  --el-table-border-color: var(--border-color);
+}
+
+.el-dialog {
+  --el-dialog-bg-color: var(--bg-secondary);
+  --el-dialog-title-font-size: 16px;
+}
+
+.el-dialog__title {
+  color: var(--text-primary) !important;
+}
+
+.el-form-item__label {
+  color: var(--text-secondary) !important;
+}
+
+.el-drawer {
+  background: var(--bg-secondary) !important;
+}
+
+.el-drawer__header {
+  color: var(--text-primary) !important;
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 0;
+  padding: 16px 20px;
+}
+
+.el-drawer__body {
+  padding: 0;
+}