127 lines
3.2 KiB
Vue
127 lines
3.2 KiB
Vue
|
<script setup>
|
|||
|
|
import { ref } from '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
|
|||
|
|
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>
|
|||
|
|
<a-button type="primary" :loading="loading" @click="handleAnalyze">
|
|||
|
|
{{ loading ? '分析中…' : '开始分析' }}
|
|||
|
|
</a-button>
|
|||
|
|
<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: 6px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--color-text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-input), :deep(.ant-input-affix-wrapper), :deep(textarea) {
|
|||
|
|
background: #0f0f0f;
|
|||
|
|
border-color: var(--color-border);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-input:hover), :deep(.ant-input-affix-wrapper:hover), :deep(textarea:hover) {
|
|||
|
|
border-color: color-mix(in oklab, var(--color-primary) 60%, var(--color-border));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-input:focus), :deep(.ant-input-affix-wrapper-focused), :deep(textarea:focus) {
|
|||
|
|
border-color: var(--color-primary);
|
|||
|
|
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-slider) {
|
|||
|
|
padding: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.ant-slider-rail) {
|
|||
|
|
background-color: #252525;
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|