✨ Added key binding service

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

@@ -20,7 +20,7 @@ defineProps<{
 <style scoped lang="scss">
 .setting-item {
   display: flex;
-  padding: 14px 0;
+  padding: 12px 0;
   border-bottom: 1px solid var(--settings-border);
   transition: background-color 0.15s ease;
   
@@ -35,24 +35,24 @@ defineProps<{
   
   .setting-info {
     flex: 1;
-    padding-right: 20px;
+    padding-right: 16px;
     
     .setting-title {
-      font-size: 14px;
+      font-size: 13px;
       font-weight: 500;
-      margin-bottom: 6px;
+      margin-bottom: 4px;
       color: var(--settings-text);
     }
     
     .setting-description {
-      font-size: 12px;
+      font-size: 11px;
       color: var(--settings-text-secondary);
-      line-height: 1.5;
+      line-height: 1.4;
     }
   }
   
   .setting-control {
-    width: 200px;
+    width: 180px;
     display: flex;
     align-items: center;
     justify-content: flex-end;

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

@@ -15,7 +15,7 @@ defineProps<{
 
 <style scoped lang="scss">
 .setting-section {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
   background-color: var(--settings-card-bg);
   border-radius: 6px;
   overflow: hidden;
@@ -23,17 +23,17 @@ defineProps<{
   border: 1px solid var(--settings-border);
   
   .section-title {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 600;
     margin: 0;
-    padding: 12px 16px;
+    padding: 10px 14px;
     background-color: var(--settings-hover);
     color: var(--settings-text);
     border-bottom: 1px solid var(--settings-border);
   }
   
   .section-content {
-    padding: 8px 16px;
+    padding: 6px 14px;
   }
 }
 </style> 

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

@@ -1,29 +1,45 @@
 <script setup lang="ts">
+import { nextTick } from 'vue';
+
 const props = defineProps<{
   modelValue: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
 }>();
 
-const toggle = () => {
-  emit('update:modelValue', !props.modelValue);
+const toggle = async () => {
+  if (props.disabled) return;
+  
+  const newValue = !props.modelValue;
+  emit('update:modelValue', newValue);
+  
+  // 确保DOM更新
+  await nextTick();
 };
 </script>
 
 <template>
-  <div class="toggle-switch" :class="{ active: modelValue }" @click="toggle">
+  <div 
+    class="toggle-switch" 
+    :class="{ 
+      active: modelValue, 
+      disabled: disabled 
+    }" 
+    @click="toggle"
+  >
     <div class="toggle-handle"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .toggle-switch {
-  width: 40px;
-  height: 20px;
+  width: 36px;
+  height: 18px;
   background-color: var(--settings-input-border);
-  border-radius: 10px;
+  border-radius: 9px;
   position: relative;
   cursor: pointer;
   transition: background-color 0.2s;
@@ -33,17 +49,30 @@ const toggle = () => {
     background-color: #4a9eff;
     
     .toggle-handle {
-      transform: translateX(20px);
+      transform: translateX(18px);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }
   }
   
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      background-color: var(--settings-input-border);
+    }
+    
+    &.active:hover {
+      background-color: #4a9eff;
+    }
+  }
+  
   .toggle-handle {
     position: absolute;
     top: 2px;
     left: 2px;
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     background-color: var(--settings-text);
     border-radius: 50%;
     transition: all 0.2s ease;