1

app/components/SettingsDialog.vue

@@ -0,0 +1,141 @@
+<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>
+