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 { 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">
    <div class="form-space-y-6">
      <!-- 平台选择 -->
      <div class="form-field">
        <Label class="form-label">平台</Label>
        <RadioGroup v-model="form.platform" class="radio-group">
          <div class="radio-item active">
            <RadioGroupItem value="抖音" id="douyin" class="hidden" />
            <label for="douyin" class="radio-label">抖音</label>
          </div>
        </RadioGroup>
      </div>

      <!-- 链接输入 -->
      <div class="form-field">
        <Label class="form-label">主页/视频链接</Label>
        <Input
          v-model="form.url"
          placeholder="粘贴抖音主页或视频链接"
          class="form-input h-11"
        />
      </div>

      <!-- 分析数量 -->
      <div class="form-field">
        <Label class="form-label">分析数量</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>
      </div>

      <!-- 操作按钮 -->
      <div class="button-row">
        <GradientButton
          text="开始分析"
          :loading="loading"
          loading-text="分析中…"
          size="middle"
          @click="handleAnalyze"
        />
        <Button variant="outline" @click="handleReset">重置</Button>
      </div>
      <p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
    </div>
  </section>
</template>

<style scoped>
.form-container {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-gray-200);
}

.form-space-y-6 {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-700);
}

.form-input {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
}

.radio-group {
  display: flex;
  gap: var(--space-2);
}

.radio-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  height: 36px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.radio-item.active {
  color: #fff;
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

.radio-label {
  cursor: pointer;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

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

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

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

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

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

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

.form-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.button-row {
  display: flex;
  gap: var(--space-3);
}

.points-hint {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  text-align: center;
}
</style>