feat(Benchmark.vue): replace custom card with UI component and improve styling
- Import Card and CardContent components from UI library - Replace custom div-based card structure with Card component - Update empty state display using Card component with modern styling - Remove deprecated .stack class and related CSS rules - Add spacing utilities for better layout consistency - Apply glassmorphism effect with bg-white/80 and backdrop-blur-sm classes - Update
This commit is contained in:
@@ -5,6 +5,7 @@ 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()
|
||||
@@ -42,47 +43,53 @@ function handleReset() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="form-container">
|
||||
<div class="form-space-y-6">
|
||||
<Card class="border-0 shadow-sm bg-white/80 backdrop-blur-sm">
|
||||
<CardContent class="p-5 space-y-5">
|
||||
<!-- 平台选择 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">平台</Label>
|
||||
<RadioGroup v-model="form.platform" class="radio-group">
|
||||
<div class="radio-item active">
|
||||
<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="radio-label">抖音</label>
|
||||
<label for="douyin" class="cursor-pointer">抖音</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<!-- 链接输入 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">主页/视频链接</Label>
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium text-gray-700">主页/视频链接</Label>
|
||||
<Input
|
||||
v-model="form.url"
|
||||
placeholder="粘贴抖音主页或视频链接"
|
||||
class="form-input h-11"
|
||||
class="h-11 bg-gray-50 border-gray-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分析数量 -->
|
||||
<div class="form-field">
|
||||
<Label class="form-label">分析数量</Label>
|
||||
<div class="slider-row">
|
||||
<span class="slider-num">{{ form.count }}</span>
|
||||
<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="level-slider"
|
||||
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>
|
||||
<div class="form-hint">建议 20-30 个内容</div>
|
||||
<p class="text-sm text-gray-500 mt-1">建议 20-30 个内容</p>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="button-row">
|
||||
<div class="flex gap-3">
|
||||
<GradientButton
|
||||
text="开始分析"
|
||||
:loading="loading"
|
||||
@@ -92,142 +99,10 @@ function handleReset() {
|
||||
/>
|
||||
<Button variant="outline" @click="handleReset">重置</Button>
|
||||
</div>
|
||||
<p class="points-hint">每次分析将消耗积分，消耗量与分析数量相关</p>
|
||||
</div>
|
||||
</section>
|
||||
<p class="text-xs text-gray-500 text-center">每次分析将消耗积分，消耗量与分析数量相关</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user