fix(settings): dropdown hover color, editor layout alignment, add about card

src/renderer/src/components/views/SettingsView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useAppStore } from '@renderer/stores/app'
 import { useI18n } from '@renderer/i18n'
-import { ref } from 'vue'
 
 const appStore = useAppStore()
 const { t, locale } = useI18n()
 
+const appVersion = __APP_VERSION__
+
 const themes = [
   { value: 'dark', labelKey: 'settings.themeDark' },
   { value: 'light', labelKey: 'settings.themeLight' },
@@ -34,24 +35,51 @@ const fontOptions = [
   <div class="settings-view">
     <h2 class="settings-title">{{ t('settings.title') }}</h2>
 
-    <div class="settings-group">
+    <div class="settings-cards">
-      <label class="settings-label">{{ t('settings.theme') }}</label>
+      <!-- Appearance Card -->
+      <div class="settings-card">
+        <div class="card-header">
+          <el-icon class="card-icon"><Monitor /></el-icon>
+          <div>
+            <div class="card-title">{{ t('settings.appearanceSection') }}</div>
+            <div class="card-desc">{{ t('settings.appearanceSectionDesc') }}</div>
+          </div>
+        </div>
+        <div class="card-content">
+          <div class="settings-row">
+            <div class="row-label">{{ t('settings.theme') }}</div>
+            <div class="row-control">
               <el-radio-group :model-value="appStore.theme" @change="appStore.setTheme($event)">
                 <el-radio-button v-for="item in themes" :key="item.value" :value="item.value">
                   {{ t(item.labelKey) }}
                 </el-radio-button>
               </el-radio-group>
             </div>
-
+          </div>
-    <div class="settings-group">
+          <div class="settings-row">
-      <label class="settings-label">{{ t('settings.language') }}</label>
+            <div class="row-label">{{ t('settings.language') }}</div>
-      <el-select :model-value="locale" @change="locale = $event" size="small" style="width: 140px">
+            <div class="row-control">
+              <el-select :model-value="locale" @change="locale = $event" size="small" style="width: 150px">
                 <el-option v-for="l in locales" :key="l.value" :label="l.label" :value="l.value" />
               </el-select>
             </div>
+          </div>
+        </div>
+      </div>
 
-    <div class="settings-group">
+      <!-- Editor Card -->
-      <label class="settings-label">{{ t('settings.fontSize') }}</label>
+      <div class="settings-card">
+        <div class="card-header">
+          <el-icon class="card-icon"><Edit /></el-icon>
+          <div>
+            <div class="card-title">{{ t('settings.editorSection') }}</div>
+            <div class="card-desc">{{ t('settings.editorSectionDesc') }}</div>
+          </div>
+        </div>
+        <div class="card-content">
+          <div class="settings-row">
+            <div class="row-label">{{ t('settings.fontSize') }}</div>
+            <div class="row-control">
               <el-input-number
                 :model-value="appStore.fontSize"
                 @change="appStore.setFontSize($event || 13)"
@@ -60,24 +88,25 @@ const fontOptions = [
                 size="small"
               />
             </div>
-
+          </div>
-    <div class="settings-group">
+          <div class="settings-row">
-      <label class="settings-label">{{ t('settings.zoom') }}</label>
+            <div class="row-label">{{ t('settings.zoom') }}</div>
+            <div class="row-control">
               <el-slider
                 :model-value="appStore.zoom"
                 @update:model-value="appStore.setZoom($event)"
                 :min="0.5"
                 :max="2.0"
                 :step="0.1"
-        show-input
                 size="small"
-        style="width: 200px"
+                style="width: 160px"
               />
               <span class="zoom-value">{{ Math.round(appStore.zoom * 100) }}%</span>
             </div>
-
+          </div>
-    <div class="settings-group">
+          <div class="settings-row">
-      <label class="settings-label">{{ t('settings.fontFamily') }}</label>
+            <div class="row-label">{{ t('settings.fontFamily') }}</div>
+            <div class="row-control">
               <el-select
                 :model-value="appStore.fontFamily"
                 @change="appStore.setFontFamily($event)"
@@ -95,37 +124,141 @@ const fontOptions = [
               </el-select>
             </div>
           </div>
+        </div>
+      </div>
+
+      <!-- About Card -->
+      <div class="settings-card about-card">
+        <div class="card-header">
+          <el-icon class="card-icon"><InfoFilled /></el-icon>
+          <div>
+            <div class="card-title">{{ t('settings.aboutSection') }}</div>
+            <div class="card-desc">{{ t('settings.aboutSectionDesc') }}</div>
+          </div>
+        </div>
+        <div class="card-content">
+          <div class="settings-row">
+            <div class="row-label">{{ t('settings.version') }}</div>
+            <div class="row-control version-value">v{{ appVersion }}</div>
+          </div>
+          <div class="settings-row">
+            <div class="row-label">{{ t('settings.repo') }}</div>
+            <div class="row-control">
+              <a href="https://github.com/Jokul/JRedisDesktop" class="repo-link" @click.prevent>
+                github.com/Jokul/JRedisDesktop
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .settings-view {
   padding: 24px;
-  max-width: 500px;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .settings-title {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 700;
   color: var(--text-primary);
   margin-bottom: 24px;
 }
 
-.settings-group {
+.settings-cards {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 16px;
-  margin-bottom: 20px;
+  max-width: 560px;
 }
 
-.settings-label {
+.settings-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 18px 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.card-icon {
+  font-size: 20px;
+  color: var(--accent);
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.card-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.settings-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.row-label {
   font-size: 13px;
   color: var(--text-secondary);
-  min-width: 140px;
+  flex-shrink: 0;
+}
+
+.row-control {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
 .zoom-value {
   font-size: 12px;
   color: var(--text-muted);
-  min-width: 40px;
+  min-width: 36px;
+  text-align: right;
+}
+
+.version-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent-light);
+  font-family: 'Cascadia Code', 'Fira Code', monospace;
+}
+
+.repo-link {
+  font-size: 12px;
+  color: var(--accent-light);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.repo-link:hover {
+  text-decoration: underline;
 }
 </style>

src/renderer/src/i18n/locales/de.ts

@@ -322,6 +322,10 @@ export default {
   },
   settings: {
     title: 'Einstellungen',
+    appearanceSection: 'Aussehen',
+    appearanceSectionDesc: 'Passen Sie die Oberfläche an',
+    editorSection: 'Editor',
+    editorSectionDesc: 'Textanzeigeeinstellungen anpassen',
     theme: 'Design',
     themeDark: 'Dunkel',
     themeLight: 'Hell',
@@ -331,5 +335,9 @@ export default {
     fontSize: 'Schriftgröße',
     zoom: 'Seitenzoom',
     fontFamily: 'Monospace-Schriftart',
+    aboutSection: 'Über',
+    aboutSectionDesc: 'Anwendungsinformationen',
+    version: 'Version',
+    repo: 'Repository',
   },
 }

src/renderer/src/i18n/locales/en.ts

@@ -322,6 +322,10 @@ export default {
   },
   settings: {
     title: 'Settings',
+    appearanceSection: 'Appearance',
+    appearanceSectionDesc: 'Customize your interface look',
+    editorSection: 'Editor',
+    editorSectionDesc: 'Adjust text display preferences',
     theme: 'Theme',
     themeDark: 'Dark',
     themeLight: 'Light',
@@ -331,5 +335,9 @@ export default {
     fontSize: 'Font Size',
     zoom: 'Page Zoom',
     fontFamily: 'Monospace Font',
+    aboutSection: 'About',
+    aboutSectionDesc: 'Application information',
+    version: 'Version',
+    repo: 'Repository',
   },
 }

src/renderer/src/i18n/locales/ja.ts

@@ -322,6 +322,10 @@ export default {
   },
   settings: {
     title: '設定',
+    appearanceSection: '外観',
+    appearanceSectionDesc: 'インターフェースの外観をカスタマイズ',
+    editorSection: 'エディタ',
+    editorSectionDesc: 'テキスト表示の設定を調整',
     theme: 'テーマ',
     themeDark: 'ダーク',
     themeLight: 'ライト',
@@ -331,5 +335,9 @@ export default {
     fontSize: 'フォントサイズ',
     zoom: 'ページズーム',
     fontFamily: '等幅フォント',
+    aboutSection: '情報',
+    aboutSectionDesc: 'アプリケーション情報',
+    version: 'バージョン',
+    repo: 'リポジトリ',
   },
 }

src/renderer/src/i18n/locales/ko.ts

@@ -322,6 +322,10 @@ export default {
   },
   settings: {
     title: '설정',
+    appearanceSection: '외관',
+    appearanceSectionDesc: '인터페이스 모양 사용자 지정',
+    editorSection: '에디터',
+    editorSectionDesc: '텍스트 표시 기본 설정 조정',
     theme: '테마',
     themeDark: '다크',
     themeLight: '라이트',
@@ -331,5 +335,9 @@ export default {
     fontSize: '글꼴 크기',
     zoom: '페이지 확대/축소',
     fontFamily: '고정폭 글꼴',
+    aboutSection: '정보',
+    aboutSectionDesc: '애플리케이션 정보',
+    version: '버전',
+    repo: '저장소',
   },
 }

src/renderer/src/i18n/locales/zh-CN.ts

@@ -322,6 +322,10 @@ export default {
   },
   settings: {
     title: '设置',
+    appearanceSection: '外观',
+    appearanceSectionDesc: '自定义界面外观',
+    editorSection: '编辑器',
+    editorSectionDesc: '调整文本显示偏好',
     theme: '主题',
     themeDark: '深色',
     themeLight: '浅色',
@@ -331,5 +335,9 @@ export default {
     fontSize: '字体大小',
     zoom: '页面缩放',
     fontFamily: '等宽字体',
+    aboutSection: '关于',
+    aboutSectionDesc: '应用信息',
+    version: '版本',
+    repo: '仓库',
   },
 }

src/renderer/src/styles/global.css

@@ -90,6 +90,12 @@ body {
 .el-select-dropdown {
   background: var(--bg-secondary) !important;
   border-color: var(--border-color) !important;
+  --el-fill-color: var(--bg-hover);
+  --el-fill-color-light: var(--bg-hover);
+  --el-fill-color-light-hover: var(--bg-hover);
+  --el-fill-color-hover: var(--bg-hover);
+  --el-fill-color-blank: transparent;
+  --el-color-primary-light-9: var(--bg-hover);
 }
 
 .el-select-dropdown__item {