142 lines
3.2 KiB
Vue
142 lines
3.2 KiB
Vue
<template>
|
|
<Dialog
|
|
v-model:visible="dialogVisible"
|
|
modal
|
|
header="系统设置"
|
|
:style="{ width: '500px' }"
|
|
@hide="handleClose"
|
|
>
|
|
<div class="settings-content">
|
|
<div class="settings-section">
|
|
<h4 class="section-title">应用设置</h4>
|
|
<div class="setting-item">
|
|
<label>自动启动</label>
|
|
<InputSwitch v-model="settings.autoStart" @change="handleSettingChange('autoStart', $event)" />
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>开机自启</label>
|
|
<InputSwitch v-model="settings.startOnBoot" @change="handleSettingChange('startOnBoot', $event)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h4 class="section-title">通知设置</h4>
|
|
<div class="setting-item">
|
|
<label>启用通知</label>
|
|
<InputSwitch v-model="settings.enableNotifications" @change="handleSettingChange('enableNotifications', $event)" />
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>声音提醒</label>
|
|
<InputSwitch v-model="settings.soundAlert" @change="handleSettingChange('soundAlert', $event)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<Button label="取消" severity="secondary" @click="handleClose" />
|
|
<Button label="保存" @click="handleSave" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { Dialog, Button, InputSwitch } from '../components/PrimeVue';
|
|
import logMixin from '../mixins/logMixin.js';
|
|
|
|
export default {
|
|
name: 'SettingsDialog',
|
|
mixins: [logMixin],
|
|
components: {
|
|
Dialog,
|
|
Button,
|
|
InputSwitch
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
dialogVisible: {
|
|
get() {
|
|
return this.visible;
|
|
},
|
|
set(value) {
|
|
if (!value) {
|
|
this.handleClose();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
settings: {
|
|
get() {
|
|
return this.$store.state.config.appSettings;
|
|
},
|
|
set(value) {
|
|
this.$store.dispatch('config/updateAppSettings', value);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleSettingChange(key, value) {
|
|
// InputSwitch 的 change 事件传递的是布尔值
|
|
const boolValue = typeof value === 'boolean' ? value : value.value;
|
|
this.$store.dispatch('config/updateAppSetting', { key, value: boolValue });
|
|
},
|
|
handleSave() {
|
|
// 设置已保存在 store 中，不需要额外操作
|
|
this.addLog('success', '设置已保存');
|
|
this.$emit('save', this.settings);
|
|
this.handleClose();
|
|
},
|
|
handleClose() {
|
|
this.$emit('close');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.settings-content {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.settings-section {
|
|
margin-bottom: 25px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin: 0 0 15px 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
</style>
|
|
|