131 lines
5.3 KiB
Vue
131 lines
5.3 KiB
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>
|