Jokul/JRedisDesktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

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

Browse Source
This commit is contained in:
No.1
2026-07-12 12:21:47 +08:00
parent bf46cb160a
commit 73976bc37a
7 changed files with 245 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/views/SettingsView.vue
+158 -25
View File
@@ -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">
<label class="settings-label">{{ t('settings.theme') }}</label>
<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 class="settings-group">
<label class="settings-label">{{ t('settings.language') }}</label>
<el-select :model-value="locale" @change="locale = $event" size="small" style="width: 140px">
</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.fontSize') }}</label>
<!-- 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)"
@@ -60,24 +88,25 @@ const fontOptions = [
size="small"
/>
</div>
<div class="settings-group">
<label class="settings-label">{{ t('settings.zoom') }}</label>
</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"
show-input
size="small"
style="width: 200px"
style="width: 160px"
/>
<span class="zoom-value">{{ Math.round(appStore.zoom * 100) }}%</span>
</div>
<div class="settings-group">
<label class="settings-label">{{ t('settings.fontFamily') }}</label>
</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)"
@@ -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
+8
View File
@@ -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
+8
View File
@@ -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
+8
View File
@@ -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
+8
View File
@@ -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
+8
View File
@@ -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
+6
View File
@@ -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 {