sionrui/frontend/app/web-gold/src/views/content-style/components/BenchmarkForm.vue

<script setup>
import { ref } from 'vue'
import GradientButton from '@/components/GradientButton.vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'analyze', 'reset'])

const form = ref({ ...props.modelValue })

function handleAnalyze() {
  emit('update:modelValue', { ...form.value })
  emit('analyze')
}

function handleReset() {
  form.value = { platform: '抖音', url: '', count: 20, sort_type: 0 }
  emit('update:modelValue', { ...form.value })
  emit('reset')
}
</script>

<template>
  <section class="form-container">
    <a-form :model="form" layout="vertical">
      <a-form-item label="平台">
        <a-radio-group v-model:value="form.platform" button-style="solid">
          <a-radio-button value="抖音">抖音</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="主页/视频链接">
        <a-input
          v-model:value="form.url"
          placeholder="粘贴抖音主页或视频链接"
          allow-clear
          size="large"
        />
      </a-form-item>

      <a-form-item label="分析数量">
        <div class="slider-row">
          <a-slider v-model:value="form.count" :min="1" :max="40" :tooltip-open="true" style="flex:1" />
          <a-input-number v-model:value="form.count" :min="1" :max="40" style="width:96px; margin-left:12px;" />
        </div>
        <div class="form-hint">建议 20-30 个内容</div>
      </a-form-item>

      <a-space>
        <GradientButton
          text="开始分析"
          :loading="loading"
          loading-text="分析中…"
          size="middle"
          @click="handleAnalyze"
        />
        <a-button @click="handleReset">重置</a-button>
      </a-space>
    </a-form>
  </section>
</template>

<style scoped>
.form-container {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--color-border);
}

.slider-row {
  display: flex;
  align-items: center;
}

.form-hint {
  margin-top: var(--space-1);
  font-size: 14px;
  color: var(--color-text-secondary);
}

:deep(.ant-slider) {
  padding: 10px 0;
}

:deep(.ant-slider-rail) {
  background-color: var(--color-slate-200);
  height: 4px;
}

:deep(.ant-slider-track) {
  background-color: var(--color-primary);
  height: 4px;
}

:deep(.ant-slider:hover .ant-slider-track) {
  background-color: var(--color-primary);
}

:deep(.ant-slider-handle::after) {
  box-shadow: 0 0 0 2px var(--color-primary);
}

:deep(.ant-slider-handle:focus-visible::after),
:deep(.ant-slider-handle:hover::after),
:deep(.ant-slider-handle:active::after) {
  box-shadow: 0 0 0 3px var(--color-primary);
}
</style>