145 lines
3.3 KiB
Vue
145 lines
3.3 KiB
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="card">
|
||
<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
|
||
class="search-input"
|
||
v-model:value="form.url"
|
||
placeholder="粘贴抖音主页或视频链接，或点击下方示例试一试"
|
||
allow-clear
|
||
size="large"
|
||
/>
|
||
</a-form-item>
|
||
<a-form-item label="最大数量（建议保持默认值20）">
|
||
<div class="slider-row">
|
||
<a-slider v-model:value="form.count" :min="1" :max="100" :tooltip-open="true" style="flex:1" />
|
||
<a-input-number v-model:value="form.count" :min="1" :max="100" 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>
|
||
.card {
|
||
background: var(--color-surface);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
box-shadow: var(--shadow-inset-card);
|
||
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);
|
||
}
|
||
.search-input {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
color: var(--color-text);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: var(--color-primary);
|
||
box-shadow: 0 0 0 3px rgba(0, 176, 48, 0.1);
|
||
}
|
||
|
||
.search-input:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.search-input::placeholder {
|
||
color: var(--color-text-secondary);
|
||
opacity: 0.6;
|
||
}
|
||
</style>
|
||
|