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 { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { Label } from '@/components/ui/label'
import { Card, CardContent } from '@/components/ui/card'
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>
  <Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
    <CardContent class="p-5 space-y-5">
      <!-- 平台选择 -->
      <div class="space-y-2">
        <Label class="text-sm font-medium text-gray-700">平台</Label>
        <RadioGroup v-model="form.platform" class="flex gap-2">
          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium text-white bg-primary-500 border border-primary-500 rounded-md cursor-pointer">
            <RadioGroupItem value="抖音" id="douyin" class="hidden" />
            <label for="douyin" class="cursor-pointer">抖音</label>
          </div>
        </RadioGroup>
      </div>

      <!-- 链接输入 -->
      <div class="space-y-2">
        <Label class="text-sm font-medium text-gray-700">主页/视频链接</Label>
        <Input
          v-model="form.url"
          placeholder="粘贴抖音主页或视频链接"
          class="h-11 bg-gray-50 border-gray-300"
        />
      </div>

      <!-- 排序方式 -->
      <div class="space-y-2">
        <Label class="text-sm font-medium text-gray-700">排序方式</Label>
        <RadioGroup v-model="form.sort_type" class="flex gap-2">
          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
               :class="form.sort_type === 0 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
            <RadioGroupItem :value="0" id="sort-default" class="hidden" />
            <label for="sort-default" class="cursor-pointer">综合排序</label>
          </div>
          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
               :class="form.sort_type === 1 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
            <RadioGroupItem :value="1" id="sort-likes" class="hidden" />
            <label for="sort-likes" class="cursor-pointer">最多点赞</label>
          </div>
          <div class="inline-flex items-center justify-center px-4 h-9 text-sm font-medium rounded-lg cursor-pointer transition-all"
               :class="form.sort_type === 2 ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground hover:bg-muted/80'">
            <RadioGroupItem :value="2" id="sort-latest" class="hidden" />
            <label for="sort-latest" class="cursor-pointer">最新发布</label>
          </div>
        </RadioGroup>
      </div>

      <!-- 分析数量 -->
      <div class="space-y-2">
        <Label class="text-sm font-medium text-gray-700">分析数量</Label>
        <div class="flex items-center gap-3">
          <span class="min-w-[32px] text-sm font-semibold text-primary-500 text-center">{{ form.count }}</span>
          <input
            type="range"
            v-model.number="form.count"
            min="1"
            max="40"
            class="flex-1 h-1 bg-gray-200 rounded-full appearance-none cursor-pointer
              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4
              [&::-webkit-slider-thumb]:bg-primary-500 [&::-webkit-slider-thumb]:rounded-full
              [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:transition-transform
              [&::-webkit-slider-thumb]:hover:scale-110 [&::-webkit-slider-thumb]:hover:shadow-[0_0_0_4px_rgba(59,130,246,0.15)]
              [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-primary-500
              [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:cursor-pointer"
          />
        </div>
        <p class="text-sm text-gray-500 mt-1">建议 20-30 个内容</p>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-3">
        <GradientButton
          text="开始分析"
          :loading="loading"
          loading-text="分析中…"
          size="middle"
          @click="handleAnalyze"
        />
        <Button variant="outline" @click="handleReset">重置</Button>
      </div>
      <p class="text-xs text-gray-500 text-center">每次分析将消耗积分，消耗量与分析数量相关</p>
    </CardContent>
  </Card>
</template>

<style scoped>
</style>