Jokul
bdcf4fe299
- Move main process to electron/main/ - Move preload to electron/preload/ - Add shared types in electron/shared/ - Split redis-service into modular redis/ directory - Flatten renderer to src/ (remove src/renderer/ nesting) - Update electron.vite.config.ts paths - Update tsconfig paths - Output to electron-dist/
93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
// src/renderer/src/components/SettingsView.vue
|
|
import { useAppStore } from '@renderer/stores/app'
|
|
import { useI18n } from '@renderer/i18n'
|
|
import { ref } from 'vue'
|
|
|
|
const appStore = useAppStore()
|
|
const { t, locale } = useI18n()
|
|
|
|
const themes = [
|
|
{ value: 'dark', labelKey: 'settings.themeDark' },
|
|
{ value: 'light', labelKey: 'settings.themeLight' },
|
|
{ value: 'system', labelKey: 'settings.themeSystem' },
|
|
]
|
|
|
|
const locales = [
|
|
{ value: 'en', label: 'English' },
|
|
{ value: 'zh-CN', label: '中文' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<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-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>
|
|
|
|
<div class="settings-group">
|
|
<label class="settings-label">{{ t('settings.scanCount') }}</label>
|
|
<el-input-number
|
|
:model-value="appStore.scanCount"
|
|
@change="appStore.setScanCount($event || 100)"
|
|
:min="10"
|
|
:max="10000"
|
|
:step="10"
|
|
size="small"
|
|
/>
|
|
</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>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.settings-view {
|
|
padding: 24px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.settings-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.settings-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.settings-label {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
min-width: 140px;
|
|
}
|
|
</style>
|