jc/jc-video-recognize
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): 重构前端UI主题为深色科技风

Browse Source 
1.  整体替换网站配色为深色深蓝主题，使用#0F172A作为主背景色
2.  引入Fira Code和Fira Sans字体提升排版质感
3.  重写头部、卡片、表单等组件的样式，适配深色主题
4.  添加全局滚动条样式优化和选中文字样式
5.  移除不再需要的setup-paddlepaddle.sh脚本文件
6.  优化Home页面的标签页样式和交互逻辑
This commit is contained in:
wwh
2026-05-22 17:57:39 +08:00
parent a16e684e46
commit d01698dfcb
35 changed files with 4129 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

450
apps/web/src/components/DetectionConfig.vue Normal file
View File

@@ -0,0 +1,450 @@
<template>
<div class="detection-config-container">
<el-card class="config-card" shadow="hover">
<template #header>
<div class="card-header">
<el-icon class="header-icon"><Setting /></el-icon>
<span>{{ configType === 'image' ? '图片检测配置' : '视频检测配置' }}</span>
</div>
</template>
<!-- 检测类型切换 -->
<div class="type-switcher">
<el-select
v-model="configType"
placeholder="选择检测类型"
class="type-select"
size="large"
>
<el-option
v-for="type in detectionTypes"
:key="type.value"
:label="type.label"
:value="type.value"
>
<div class="select-option">
<el-icon class="option-icon">
<component :is="type.icon" />
</el-icon>
<span class="option-label">{{ type.label }}</span>
</div>
</el-option>
</el-select>
</div>
<el-divider />
<el-form label-position="top" class="config-form">
<el-form-item label="选择模型">
<el-select
v-model="config.model"
placeholder="选择检测模型"
class="full-width"
>
<el-option
v-for="model in models"
:key="model.id"
:label="model.name"
:value="model.id"
>
<span>{{ model.name }}</span>
<span class="model-size">{{ model.size }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<template #label>
<span>置信度阈值</span>
<el-tooltip placement="top" :show-after="200">
<template #content>
<div style="max-width: 300px; line-height: 1.6;">
<p><strong>置信度是什么？</strong></p>
<p>表示模型对检测结果的"确定程度"，范围 0-1</p>
<ul style="margin: 8px 0; padding-left: 16px;">
<li>≥0.8：高置信度（绿色）- 模型非常确定</li>
<li>0.6-0.8：中等置信度（黄色）- 模型比较确定</li>
<li>&lt;0.6：低置信度（红色）- 模型不太确定</li>
</ul>
<p><strong>阈值作用：</strong></p>
<p>低于此值的检测结果会被过滤掉</p>
<p>建议：0.3-0.5（火灾检测可适当降低）</p>
</div>
</template>
<el-icon class="help-icon"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-slider
v-model="config.confidence"
:min="0.1"
:max="1.0"
:step="0.05"
:format-tooltip="formatConfidence"
/>
<div class="slider-value">{{ config.confidence.toFixed(2) }}</div>
</el-form-item>
<el-form-item>
<template #label>
<span>IOU阈值</span>
<el-tooltip placement="top" :show-after="200">
<template #content>
<div style="max-width: 320px; line-height: 1.6;">
<p><strong>IOU是什么？</strong></p>
<p>交并比(Intersection Over Union)，衡量两个检测框的重叠程度</p>
<p style="margin: 8px 0;"><strong>计算公式：</strong></p>
<p style="background: #f5f5f5; padding: 4px 8px; border-radius: 4px; font-family: monospace;">IOU = 交集面积 / 并集面积</p>
<p style="margin: 8px 0;"><strong>阈值作用：</strong></p>
<p>用于NMS去重，IOU超过此值的框被认为是重复检测</p>
<ul style="margin: 8px 0; padding-left: 16px;">
<li>高阈值(0.7-0.9)：保留更多框，适合密集场景</li>
<li>中阈值(0.45-0.6)：平衡，适合一般场景</li>
<li>低阈值(0.1-0.3)：结果更精简，适合稀疏场景</li>
</ul>
<p><strong>建议：0.45-0.6</strong></p>
</div>
</template>
<el-icon class="help-icon"><QuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-slider
v-model="config.iou"
:min="0.1"
:max="0.9"
:step="0.05"
:format-tooltip="formatIOU"
/>
<div class="slider-value">{{ config.iou.toFixed(2) }}</div>
</el-form-item>
<!-- 算法配置（仅对人员检测模型显示） -->
<AlgorithmConfig
v-model="config.algorithmConfig"
@change="onAlgorithmChange"
:model-id="config.model"
/>
</el-form>
</el-card>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import {
Setting,
Picture,
VideoCamera,
QuestionFilled
} from '@element-plus/icons-vue'
import AlgorithmConfig from './AlgorithmConfig.vue'
const props = defineProps({
models: {
type: Array,
default: () => []
},
defaultType: {
type: String,
default: 'image'
},
defaultModel: {
type: String,
default: ''
}
})
const emit = defineEmits(['type-change', 'config-change'])
const configType = ref(props.defaultType)
const detectionTypes = [
{ value: 'image', label: '图片检测', icon: Picture },
{ value: 'video', label: '视频检测', icon: VideoCamera }
]
const config = ref({
type: props.defaultType,
model: props.defaultModel || (props.models.length > 0 ? props.models[0].id : ''),
confidence: 0.5,
iou: 0.45,
algorithmConfig: {}
})
const formatConfidence = (value) => {
return `置信度: ${value.toFixed(2)}`
}
const formatIOU = (value) => {
return `IOU: ${value.toFixed(2)}`
}
const onAlgorithmChange = (algoConfig) => {
config.value.algorithmConfig = algoConfig
emit('config-change', config.value)
}
// 监听类型变化
watch(configType, (newType) => {
config.value.type = newType
emit('type-change', newType)
emit('config-change', config.value)
})
// 监听配置变化
watch(() => [config.value.model, config.value.confidence, config.value.iou], () => {
emit('config-change', config.value)
}, { deep: true })
</script>
<style scoped>
.detection-config-container {
display: flex;
flex-direction: column;
gap: 0;
}
.config-card {
height: auto;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.config-card :deep(.el-card__body) {
padding: 24px;
}
.card-header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 16px;
color: #F8FAFC;
font-family: 'Fira Sans', sans-serif;
}
.header-icon {
font-size: 18px;
color: #22C55E;
}
/* 类型切换 */
.type-switcher {
margin-bottom: 24px;
}
.type-select {
width: 100%;
}
.type-select :deep(.el-input__wrapper) {
background: rgba(30, 41, 59, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.type-select :deep(.el-input__wrapper:hover) {
border-color: rgba(34, 197, 94, 0.4);
background: rgba(30, 41, 59, 0.8);
}
.type-select :deep(.el-input__wrapper.is-focus) {
border-color: #22C55E;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.type-select :deep(.el-input__inner) {
color: #E2E8F0;
font-weight: 600;
font-size: 15px;
font-family: 'Fira Sans', sans-serif;
}
.type-select :deep(.el-select__caret) {
color: #64748B;
transition: all 0.3s ease;
}
.type-select:hover :deep(.el-select__caret) {
color: #22C55E;
}
.type-select :deep(.el-select__placeholder) {
color: #343637;
}
.type-select :deep(.el-select-dropdown__item) {
background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.05);
margin: 4px 8px;
border-radius: 8px;
padding: 0;
transition: all 0.3s ease;
}
.type-select :deep(.el-select-dropdown__item:hover) {
background: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
transform: translateX(4px);
}
.type-select :deep(.el-select-dropdown__item.is-selected) {
background: rgba(34, 197, 94, 0.15);
border-color: #22C55E;
}
.type-select :deep(.el-select-dropdown__item.is-selected:hover) {
background: rgba(34, 197, 94, 0.2);
}
.type-select :deep(.el-select-dropdown) {
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
padding: 8px;
}
.type-select :deep(.el-popper__arrow) {
display: none;
}
.select-option {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 100%;
padding: 12px 16px;
}
.option-icon {
font-size: 20px;
color: #3a3c3f;
transition: all 0.3s ease;
}
.type-select :deep(.el-select-dropdown__item:hover) .option-icon,
.type-select :deep(.el-select-dropdown__item.is-selected) .option-icon {
color: #22C55E;
transform: scale(1.1);
}
.option-label {
font-size: 14px;
font-weight: 600;
color: #3a3c3f;
}
:deep(.el-divider) {
border-color: rgba(255, 255, 255, 0.1);
margin: 20px 0;
}
.config-form :deep(.el-form-item) {
margin-bottom: 20px;
}
.config-form :deep(.el-form-item__label) {
font-weight: 500;
font-size: 14px;
color: #E2E8F0;
padding-bottom: 8px;
font-family: 'Fira Sans', sans-serif;
}
.full-width {
width: 100%;
}
.model-size {
float: right;
color: #64748B;
font-size: 12px;
}
.slider-value {
text-align: center;
font-size: 14px;
font-weight: 600;
color: #22C55E;
margin-top: 8px;
padding: 6px 12px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
border-radius: 20px;
display: inline-block;
min-width: 60px;
font-family: 'Fira Code', monospace;
}
.help-icon {
margin-left: 6px;
font-size: 14px;
color: #64748B;
cursor: pointer;
transition: color 0.2s;
}
.help-icon:hover {
color: #22C55E;
}
/* 卡片通用样式 */
:deep(.el-card) {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
:deep(.el-card:hover) {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
border-color: rgba(34, 197, 94, 0.2);
}
:deep(.el-card__header) {
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
border-radius: 16px 16px 0 0;
}
/* 响应式 */
@media (max-width: 768px) {
.type-select :deep(.el-select) {
width: 100%;
}
.type-select :deep(.el-select__selected-item) {
font-size: 14px;
}
.option-icon {
font-size: 18px;
}
.option-label {
font-size: 13px;
}
}
@media (max-width: 480px) {
.type-select :deep(.el-select__selected-item) {
font-size: 13px;
}
.option-icon {
font-size: 16px;
}
.option-label {
font-size: 12px;
}
}
</style>