admin/012-kaopeilian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化陪练记录页面UI设计
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 统计卡片改用 el-statistic 组件，与错题分析保持一致
- 搜索框改为圆角胶囊形状，添加 hover 聚焦效果
- 下拉选择框使用统一的圆角灰底设计，添加 emoji 图标前缀
- 筛选标签改为胶囊形状
- 重置按钮仅在有筛选条件时显示
- 添加表格行悬浮效果和操作按钮悬浮样式
- 优化响应式布局

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
yuliang_guo
2026-02-03 16:38:45 +08:00
parent 4c1b70e9d6
commit ed47286955
1 changed files with 280 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

390
frontend/src/views/trainee/practice-records.vue
View File

@@ -2,118 +2,134 @@
<div class="practice-records-container">
<div class="page-header">
<h1 class="page-title">陪练记录</h1>
<div class="header-actions">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleDateChange"
/>
<el-button type="primary" @click="refreshData">
<el-icon class="el-icon--left"><Refresh /></el-icon>
刷新数据
</el-button>
</div>
</div>
<!-- 陪练统计概览 -->
<div class="stats-overview">
<div class="stat-card card" v-for="stat in practiceStats" :key="stat.label">
<div class="stat-icon" :style="{ backgroundColor: stat.bgColor }">
<el-icon :size="32" :color="stat.color">
<component :is="stat.icon" />
</el-icon>
<div class="stats-section">
<div class="stat-card card">
<el-statistic title="总陪练次数" :value="practiceStatsData.totalCount">
<template #suffix>
<span style="font-size: 14px">次</span>
</template>
</el-statistic>
</div>
<div class="stat-content">
<div class="stat-value">{{ stat.value }}</div>
<div class="stat-label">{{ stat.label }}</div>
<div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'" v-if="stat.trend !== 0">
<el-icon><component :is="stat.trend > 0 ? 'Top' : 'Bottom'" /></el-icon>
{{ Math.abs(stat.trend) }}%
<div class="stat-card card">
<el-statistic title="平均评分" :value="practiceStatsData.avgScore" :precision="1">
<template #suffix>
<span style="font-size: 14px">分</span>
</template>
</el-statistic>
</div>
<div class="stat-card card">
<el-statistic title="总陪练时长" :value="practiceStatsData.totalHours" :precision="1">
<template #suffix>
<span style="font-size: 14px">小时</span>
</template>
</el-statistic>
</div>
<div class="stat-card card">
<el-statistic title="本月进步" :value="practiceStatsData.monthImprovement">
<template #prefix>+</template>
<template #suffix>%</template>
</el-statistic>
</div>
</div>
<!-- 筛选区域 -->
<!-- 搜索和筛选 -->
<div class="filter-section card">
<el-form :inline="true" :model="filterForm" class="filter-form">
<el-form-item label="关键词">
<div class="filter-toolbar">
<!-- 搜索框 -->
<div class="search-box">
<el-input
v-model="filterForm.keyword"
placeholder="搜索陪练内容或场景"
placeholder="搜索陪练内容或场景..."
clearable
@input="handleRealTimeSearch"
style="width: 200px"
class="search-input"
>
<template #prefix>
<el-icon><Search /></el-icon>
<el-icon class="search-icon"><Search /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item label="陪练场景">
</div>
<!-- 筛选项 -->
<div class="filter-items">
<el-select
v-model="filterForm.scene"
placeholder="全部场景"
placeholder="陪练场景"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">🎯</span>
</template>
<el-option label="客户咨询" value="customer_consultation" />
<el-option label="美容护理" value="beauty_care" />
<el-option label="产品介绍" value="product_introduction" />
<el-option label="问题处理" value="problem_handling" />
<el-option label="服务礼仪" value="service_etiquette" />
</el-select>
</el-form-item>
<el-form-item label="陪练结果">
<el-select
v-model="filterForm.result"
placeholder="全部结果"
placeholder="陪练结果"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">⭐</span>
</template>
<el-option label="优秀" value="excellent" />
<el-option label="良好" value="good" />
<el-option label="一般" value="average" />
<el-option label="需改进" value="needs_improvement" />
</el-select>
</el-form-item>
<el-form-item label="时间周期">
<el-select
v-model="filterForm.timePeriod"
placeholder="全部时间"
placeholder="时间周期"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">📅</span>
</template>
<el-option label="最近一周" value="week" />
<el-option label="最近一月" value="month" />
<el-option label="最近三月" value="quarter" />
<el-option label="自定义" value="custom" />
</el-select>
</el-form-item>
<el-form-item v-if="filterForm.timePeriod === 'custom'" label="自定义时间">
<el-date-picker
v-if="filterForm.timePeriod === 'custom'"
v-model="customDateRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
range-separator="~"
start-placeholder="开始"
end-placeholder="结束"
@change="handleRealTimeSearch"
style="width: 240px"
class="date-picker"
format="MM/DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleReset">
<el-icon class="el-icon--left"><Refresh /></el-icon>
</div>
<!-- 重置按钮 -->
<el-button
v-if="hasActiveFilters"
@click="handleReset"
class="reset-btn"
type="info"
plain
>
<el-icon><Refresh /></el-icon>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 当前筛选条件显示 -->
<div v-if="hasActiveFilters" class="filter-tags">
@@ -123,6 +139,7 @@
closable
@close="clearKeyword"
type="primary"
effect="light"
>
关键词：{{ filterForm.keyword }}
</el-tag>
@@ -381,6 +398,17 @@ interface PracticeStat {
// 陪练统计数据
const practiceStats = ref<PracticeStat[]>([])
// 简化的统计数据（用于 el-statistic 组件）
const practiceStatsData = computed(() => {
const stats = practiceStats.value
return {
totalCount: parseInt(stats.find(s => s.label === '总陪练次数')?.value || '0'),
avgScore: parseFloat(stats.find(s => s.label === '平均评分')?.value || '0'),
totalHours: parseFloat(stats.find(s => s.label === '总陪练时长')?.value?.replace('h', '') || '0'),
monthImprovement: parseInt(stats.find(s => s.label === '本月进步')?.value?.replace('+', '').replace('%', '') || '0')
}
})
// 陪练记录数据（直接使用后端返回的已筛选、已分页的数据）
const recordsList = ref([])
@@ -769,95 +797,143 @@ const loadRecords = async () => {
max-width: 1400px;
margin: 0 auto;
.card {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
.page-title {
font-size: 24px;
font-weight: 600;
color: #333;
}
.header-actions {
display: flex;
gap: 12px;
color: #1f2937;
}
}
.stats-overview {
// 统计区域 - 参考错题分析风格
.stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 24px;
.stat-card {
padding: 24px;
display: flex;
align-items: center;
gap: 20px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
.stat-icon {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
}
}
.stat-content {
// 筛选区域 - 参考错题分析现代风格
.filter-section {
padding: 16px 20px;
.filter-toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
.search-box {
flex: 0 0 280px;
.search-input {
:deep(.el-input__wrapper) {
border-radius: 20px;
background: #f5f7fa;
box-shadow: none;
border: 1px solid transparent;
padding: 4px 16px;
transition: all 0.3s ease;
&:hover, &:focus-within {
background: #fff;
border-color: #409eff;
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
}
}
.search-icon {
color: #909399;
font-size: 16px;
}
}
}
.filter-items {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
flex: 1;
.stat-value {
font-size: 32px;
font-weight: 700;
color: #333;
line-height: 1;
margin-bottom: 8px;
.filter-select {
width: 130px;
:deep(.el-select__wrapper) {
border-radius: 8px;
background: #f5f7fa;
box-shadow: none;
border: 1px solid transparent;
transition: all 0.2s ease;
min-height: 36px;
&:hover {
background: #fff;
border-color: #dcdfe6;
}
.stat-label {
&.is-focused {
background: #fff;
border-color: #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}
}
.select-prefix-icon {
font-size: 14px;
color: #666;
margin-bottom: 8px;
margin-right: 4px;
}
}
.stat-trend {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 500;
.date-picker {
:deep(.el-input__wrapper) {
border-radius: 8px;
background: #f5f7fa;
box-shadow: none;
border: 1px solid transparent;
&.up {
color: #67c23a;
}
&.down {
color: #f56c6c;
}
&:hover {
background: #fff;
border-color: #dcdfe6;
}
}
}
}
.filter-section {
padding: 20px;
margin-bottom: 20px;
.reset-btn {
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
.filter-form {
.el-form-item {
margin-bottom: 0;
.el-icon {
margin-right: 4px;
}
}
}
.filter-tags {
margin-top: 16px;
padding-top: 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f0f0f0;
display: flex;
align-items: center;
@@ -865,34 +941,54 @@ const loadRecords = async () => {
gap: 8px;
.filter-label {
color: #666;
font-size: 14px;
margin-right: 8px;
color: #606266;
font-size: 13px;
font-weight: 500;
}
.el-tag {
border-radius: 16px;
padding: 0 12px;
height: 28px;
line-height: 26px;
font-size: 12px;
}
.clear-all-btn {
margin-left: 8px;
margin-left: auto;
font-size: 12px;
}
}
.search-result-info {
margin-top: 12px;
padding-top: 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
.result-count {
color: #666;
color: #606266;
font-size: 14px;
display: flex;
align-items: center;
gap: 4px;
strong {
color: #409eff;
font-weight: 600;
font-size: 18px;
}
}
.filter-hint {
color: #e6a23c;
font-size: 12px;
background: #fdf6ec;
padding: 2px 8px;
border-radius: 10px;
margin-left: 8px;
}
}
}
@@ -922,6 +1018,26 @@ const loadRecords = async () => {
justify-content: center;
margin-top: 24px;
}
// 表格行悬浮效果
:deep(.el-table__row) {
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background-color: #f5f7fa;
}
}
// 操作按钮样式优化
:deep(.el-button--link) {
padding: 4px 8px;
&:hover {
background-color: rgba(64, 158, 255, 0.1);
border-radius: 4px;
}
}
}
.replay-content {
@@ -1032,25 +1148,33 @@ const loadRecords = async () => {
// 响应式设计
@media (max-width: 768px) {
.practice-records-container {
.page-header {
.stats-section {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.filter-section {
.filter-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-items: stretch;
.header-actions {
.search-box {
flex: 1;
width: 100%;
.search-input {
width: 100%;
justify-content: flex-end;
}
}
.stats-overview {
grid-template-columns: 1fr;
}
.filter-items {
width: 100%;
.filter-form {
.el-form-item {
display: block;
margin-bottom: 16px !important;
.filter-select {
flex: 1;
min-width: 100px;
}
}
}
}
@@ -1063,4 +1187,12 @@ const loadRecords = async () => {
}
}
}
@media (max-width: 480px) {
.practice-records-container {
.stats-section {
grid-template-columns: 1fr;
}
}
}
</style>