<template>
  <div class="settings-panel">
    <!-- 其他设置项 -->
    
    <!-- 语音输入设置 -->
    <div class="settings-section">
      <h3 class="section-title">语音输入设置</h3>
      <div class="settings-item">
        <span class="settings-label">语音转文字后直接发送</span>
        <el-switch
          v-model="sendDirectly"
          @change="updateVoiceInputSettings"
        />
      </div>
    </div>
    
    <!-- 其他设置项 -->
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useSpeakStore } from '@/store/speak'

const speakStore = useSpeakStore()

const sendDirectly = computed({
  get: () => speakStore.sendDirectly,
  set: (val) => speakStore.setSendDirectly(val)
})
const autoTTS = computed({
  get: () => speakStore.autoTTS,
  set: (val) => speakStore.setAutoTTS(val)
})

// ... 其他代码 ...
</script>

<style lang="scss" scoped>
.settings-section {
  margin-bottom: 24px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }
  
  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--el-border-color-light);
    
    .settings-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
  }
}
</style> 