From 73976bc37aaba9354bc02c3efdd0fa68e10c31f5 Mon Sep 17 00:00:00 2001
From: Jokul <wangshengshan011@163.com>
Date: Sun, 12 Jul 2026 12:21:47 +0800
Subject: [PATCH] fix(settings): dropdown hover color, editor layout alignment,
 add about card

---
 .../src/components/views/SettingsView.vue     | 265 +++++++++++++-----
 src/renderer/src/i18n/locales/de.ts           |   8 +
 src/renderer/src/i18n/locales/en.ts           |   8 +
 src/renderer/src/i18n/locales/ja.ts           |   8 +
 src/renderer/src/i18n/locales/ko.ts           |   8 +
 src/renderer/src/i18n/locales/zh-CN.ts        |   8 +
 src/renderer/src/styles/global.css            |   6 +
 7 files changed, 245 insertions(+), 66 deletions(-)

diff --git a/src/renderer/src/components/views/SettingsView.vue b/src/renderer/src/components/views/SettingsView.vue
index 4d43ca6..9dac273 100644
--- a/src/renderer/src/components/views/SettingsView.vue
+++ b/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,65 +35,122 @@ const fontOptions = [
   <div class="settings-view">
     <h2 class="settings-title">{{ t('settings.title') }}</h2>
 
-    <div class="settings-group">
-      <label class="settings-label">{{ t('settings.theme') }}</label>
-      <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 class="settings-cards">
+      <!-- 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-row">
+            <div class="row-label">{{ t('settings.language') }}</div>
+            <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">
-      <label class="settings-label">{{ t('settings.language') }}</label>
-      <el-select :model-value="locale" @change="locale = $event" size="small" style="width: 140px">
-        <el-option v-for="l in locales" :key="l.value" :label="l.label" :value="l.value" />
-      </el-select>
-    </div>
+      <!-- Editor Card -->
+      <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)"
+                :min="10"
+                :max="20"
+                size="small"
+              />
+            </div>
+          </div>
+          <div class="settings-row">
+            <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"
+                size="small"
+                style="width: 160px"
+              />
+              <span class="zoom-value">{{ Math.round(appStore.zoom * 100) }}%</span>
+            </div>
+          </div>
+          <div class="settings-row">
+            <div class="row-label">{{ t('settings.fontFamily') }}</div>
+            <div class="row-control">
+              <el-select
+                :model-value="appStore.fontFamily"
+                @change="appStore.setFontFamily($event)"
+                size="small"
+                style="width: 180px"
+                allow-create
+                filterable
+              >
+                <el-option
+                  v-for="font in fontOptions"
+                  :key="font"
+                  :label="font"
+                  :value="font"
+                />
+              </el-select>
+            </div>
+          </div>
+        </div>
+      </div>
 
-    <div class="settings-group">
-      <label class="settings-label">{{ t('settings.fontSize') }}</label>
-      <el-input-number
-        :model-value="appStore.fontSize"
-        @change="appStore.setFontSize($event || 13)"
-        :min="10"
-        :max="20"
-        size="small"
-      />
-    </div>
-
-    <div class="settings-group">
-      <label class="settings-label">{{ t('settings.zoom') }}</label>
-      <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"
-      />
-      <span class="zoom-value">{{ Math.round(appStore.zoom * 100) }}%</span>
-    </div>
-
-    <div class="settings-group">
-      <label class="settings-label">{{ t('settings.fontFamily') }}</label>
-      <el-select
-        :model-value="appStore.fontFamily"
-        @change="appStore.setFontFamily($event)"
-        size="small"
-        style="width: 180px"
-        allow-create
-        filterable
-      >
-        <el-option
-          v-for="font in fontOptions"
-          :key="font"
-          :label="font"
-          :value="font"
-        />
-      </el-select>
+      <!-- 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>
@@ -100,32 +158,107 @@ const fontOptions = [
 <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>
diff --git a/src/renderer/src/i18n/locales/de.ts b/src/renderer/src/i18n/locales/de.ts
index 40bbd28..baf9d06 100644
--- a/src/renderer/src/i18n/locales/de.ts
+++ b/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',
   },
 }
diff --git a/src/renderer/src/i18n/locales/en.ts b/src/renderer/src/i18n/locales/en.ts
index a1bd599..9cf020f 100644
--- a/src/renderer/src/i18n/locales/en.ts
+++ b/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',
   },
 }
diff --git a/src/renderer/src/i18n/locales/ja.ts b/src/renderer/src/i18n/locales/ja.ts
index 02baa1e..027a528 100644
--- a/src/renderer/src/i18n/locales/ja.ts
+++ b/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: 'リポジトリ',
   },
 }
diff --git a/src/renderer/src/i18n/locales/ko.ts b/src/renderer/src/i18n/locales/ko.ts
index b2c2371..709c287 100644
--- a/src/renderer/src/i18n/locales/ko.ts
+++ b/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: '저장소',
   },
 }
diff --git a/src/renderer/src/i18n/locales/zh-CN.ts b/src/renderer/src/i18n/locales/zh-CN.ts
index 12f2918..2cc38fd 100644
--- a/src/renderer/src/i18n/locales/zh-CN.ts
+++ b/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: '仓库',
   },
 }
diff --git a/src/renderer/src/styles/global.css b/src/renderer/src/styles/global.css
index ecdc3c5..712c25e 100644
--- a/src/renderer/src/styles/global.css
+++ b/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 {