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

<script setup>
import { ref, onMounted } from 'vue'
import GradientButton from '@/components/GradientButton.vue'
import { usePointsConfigStore } from '@/stores/pointsConfig'

const pointsConfigStore = usePointsConfigStore()

// 加载积分配置
onMounted(() => {
  pointsConfigStore.loadConfig()
})

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">
          <span class="slider-num">{{ form.count }}</span>
          <input
            type="range"
            v-model.number="form.count"
            min="1"
            max="40"
            class="level-slider"
          />
        </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>
      <p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
    </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;
  gap: 12px;
}

.slider-num {
  min-width: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: center;
}

.level-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-slate-200);
  border-radius: 2px;
  outline: none;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;

    &:hover {
      transform: scale(1.15);
      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
    }
  }

  &::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, box-shadow 0.15s;

    &:hover {
      transform: scale(1.15);
      box-shadow: 0 0 0 4px rgba(0, 176, 48, 0.15);
    }
  }
}

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

.points-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
}

</style>