♻️ Refactor code

frontend/src/views/settings/components/SettingItem.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+}>();
+</script>
+
+<template>
+  <div class="setting-item">
+    <div class="setting-info">
+      <div class="setting-title">{{ title }}</div>
+      <div v-if="description" class="setting-description">{{ description }}</div>
+    </div>
+    <div class="setting-control">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.setting-item {
+  display: flex;
+  padding: 14px 0;
+  border-bottom: 1px solid #444444;
+  transition: background-color 0.15s ease;
+  
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  .setting-info {
+    flex: 1;
+    padding-right: 20px;
+    
+    .setting-title {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: #e0e0e0;
+    }
+    
+    .setting-description {
+      font-size: 12px;
+      color: #a0a0a0;
+      line-height: 1.5;
+    }
+  }
+  
+  .setting-control {
+    width: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}
+</style> 

frontend/src/views/settings/components/SettingSection.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <div class="setting-section">
+    <h2 class="section-title">{{ title }}</h2>
+    <div class="section-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.setting-section {
+  margin-bottom: 30px;
+  background-color: #333333;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    padding: 12px 16px;
+    background-color: #3d3d3d;
+    color: #ffffff;
+    border-bottom: 1px solid #444444;
+  }
+  
+  .section-content {
+    padding: 8px 16px;
+  }
+}
+</style> 

frontend/src/views/settings/components/ToggleSwitch.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>();
+
+const toggle = () => {
+  emit('update:modelValue', !props.modelValue);
+};
+</script>
+
+<template>
+  <div class="toggle-switch" :class="{ active: modelValue }" @click="toggle">
+    <div class="toggle-handle"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.toggle-switch {
+  width: 40px;
+  height: 20px;
+  background-color: #555555;
+  border-radius: 10px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  
+  &.active {
+    background-color: #4a9eff;
+    
+    .toggle-handle {
+      transform: translateX(20px);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+  }
+  
+  .toggle-handle {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background-color: #f0f0f0;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+</style>