<template>
  <div>
    <h4>界面设置</h4>
    <div class="setting-item">
      <span>启用动画效果</span>
      <el-switch
        v-model="animationsEnabled"
        @change="toggleAnimationsSetting"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useSettingsStore } from '@/store/settings';
import { ElSwitch } from 'element-plus';

const settingsStore = useSettingsStore();
const animationsEnabled = ref(settingsStore.animationsEnabled);

const toggleAnimationsSetting = (value) => {
  settingsStore.toggleAnimations(value);
  animationsEnabled.value = value;
};
</script>

<style lang="scss" scoped>
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--el-text-color-regular);
}
</style> 