xiaozhi-esp32-server/main/manager-mobile/src/pages/agent/speedPitch.vue

<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationBarTitleText": "语音设置",
    "navigationStyle": "custom"
  }
}
</route>

<script lang="ts" setup>
import { t } from '@/i18n'
import { useSpeedPitch } from '@/store'

defineOptions({
  name: 'SpeedPitch',
})

const speedPitchStore = useSpeedPitch()
const SPEED_PITCH_FIELDS = ['ttsVolume', 'ttsRate', 'ttsPitch'] as const

const localSettings = ref({
  ttsVolume: 0,
  ttsRate: 0,
  ttsPitch: 0,
})

function handleConfirm() {
  const changedFields = SPEED_PITCH_FIELDS.filter((field) => {
    return localSettings.value[field] !== speedPitchStore.speedPitch[field]
  })
  speedPitchStore.updateSpeedPitch(localSettings.value, { changedFields })
  goBack()
}

// 返回上一页并更新配置
function goBack() {
  uni.navigateBack()
}

onMounted(() => {
  localSettings.value = {
    ttsVolume: speedPitchStore.speedPitch.ttsVolume,
    ttsRate: speedPitchStore.speedPitch.ttsRate,
    ttsPitch: speedPitchStore.speedPitch.ttsPitch,
  }
})
</script>

<template>
  <view class="h-screen flex flex-col bg-[#f5f7fb]">
    <!-- 头部导航 -->
    <wd-navbar
      :title="t('agent.languageConfig')"
      safe-area-inset-top
      left-arrow
      :bordered="false"
      @click-left="goBack"
    >
      <template #left>
        <wd-icon name="arrow-left" size="18" />
      </template>
    </wd-navbar>
    <view class="flex flex-1 flex-col overflow-hidden">
      <view class="flex flex-1 flex-col gap-[50rpx] overflow-y-auto px-[40rpx] py-[50rpx]">
        <!-- 音量调节 -->
        <view class="flex flex-col gap-[20rpx]">
          <text class="text-[30rpx] text-[#232338] font-semibold">
            {{ t('agent.ttsVolume') }}
          </text>
          <view class="flex items-center gap-[20rpx]">
            <wd-slider
              v-model="localSettings.ttsVolume"
              :min="-100"
              :max="100"
              :step="1"
              :show-value="false"
              custom-class="voice-slider"
              class="flex-1"
            />
            <text class="min-w-[80rpx] text-right text-[28rpx] text-[#336cff] font-medium">
              {{ localSettings.ttsVolume }}
            </text>
          </view>
          <text class="mt-[10rpx] text-[24rpx] text-[#9d9ea3]">
            {{ t('agent.volumeHint') }}
          </text>
        </view>

        <!-- 语速调节 -->
        <view class="flex flex-col gap-[20rpx]">
          <text class="text-[30rpx] text-[#232338] font-semibold">
            {{ t('agent.ttsRate') }}
          </text>
          <view class="flex items-center gap-[20rpx]">
            <wd-slider
              v-model="localSettings.ttsRate"
              :min="-100"
              :max="100"
              :step="1"
              :show-value="false"
              custom-class="voice-slider"
              class="flex-1"
            />
            <text class="min-w-[80rpx] text-right text-[28rpx] text-[#336cff] font-medium">
              {{ localSettings.ttsRate }}
            </text>
          </view>
          <text class="mt-[10rpx] text-[24rpx] text-[#9d9ea3]">
            {{ t('agent.speedHint') }}
          </text>
        </view>

        <!-- 音调调节 -->
        <view class="flex flex-col gap-[20rpx]">
          <text class="text-[30rpx] text-[#232338] font-semibold">
            {{ t('agent.ttsPitch') }}
          </text>
          <view class="flex items-center gap-[20rpx]">
            <wd-slider
              v-model="localSettings.ttsPitch"
              :min="-100"
              :max="100"
              :step="1"
              :show-value="false"
              custom-class="voice-slider"
              class="flex-1"
            />
            <text class="min-w-[80rpx] text-right text-[28rpx] text-[#336cff] font-medium">
              {{ localSettings.ttsPitch }}
            </text>
          </view>
          <text class="mt-[10rpx] text-[24rpx] text-[#9d9ea3]">
            {{ t('agent.pitchHint') }}
          </text>
        </view>
      </view>

      <view class="flex gap-[20rpx] border-t border-[#eee] px-[30rpx] py-[30rpx]">
        <wd-button type="primary" class="h-[80rpx] flex-1 rounded-[12rpx] text-[28rpx] !bg-[#336cff]" @click="handleConfirm">
          {{ t('agent.save') }}
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
/* 自定义滑块样式 */
:deep(.wd-slider) {
  --wd-slider-bar-background: #e6ebff;
  --wd-slider-bar-active-background: #336cff;
  --wd-slider-thumb-border-color: #336cff;
  --wd-slider-thumb-background: #336cff;
  --wd-slider-thumb-size: 32rpx;
}
</style>