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 
- 重新设计筛选工具栏布局，采用flex横向排列
- 搜索框改为圆角胶囊形状，添加hover聚焦效果
- 下拉选择框使用统一的圆角灰底设计
- 添加emoji图标前缀增加辨识度
- 筛选标签改为胶囊形状
- 重置按钮仅在有筛选条件时显示
- 整体视觉更加现代简洁

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
yuliang_guo
2026-02-03 11:16:46 +08:00
parent 078117807d
commit c66b355a5a
1 changed files with 179 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
frontend/src/views/analysis/mistakes.vue
View File

@@ -58,93 +58,113 @@
<!-- 搜索和筛选 -->
<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.type"
placeholder="全部类型"
placeholder="题目类型"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">📝</span>
</template>
<el-option label="单选题" value="single" />
<el-option label="多选题" value="multiple" />
<el-option label="判断题" value="judge" />
<el-option label="填空题" value="fill" />
<el-option label="简答题" value="essay" />
</el-select>
</el-form-item>
<el-form-item label="难度等级">
<el-select
v-model="filterForm.difficulty"
placeholder="全部难度"
placeholder="难度等级"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">⭐</span>
</template>
<el-option label="简单" value="easy" />
<el-option label="中等" value="medium" />
<el-option label="困难" value="hard" />
</el-select>
</el-form-item>
<el-form-item label="掌握状态">
<el-select
v-model="filterForm.status"
placeholder="全部状态"
placeholder="掌握状态"
clearable
@change="handleRealTimeSearch"
style="width: 120px"
class="filter-select"
>
<template #prefix>
<span class="select-prefix-icon">📊</span>
</template>
<el-option label="未掌握" value="unmastered" />
<el-option label="已掌握" value="mastered" />
<el-option label="需巩固" value="review" />
</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>
重置
</el-button>
</el-form-item>
</el-form>
</div>
<!-- 重置按钮 -->
<el-button
v-if="hasActiveFilters"
@click="handleReset"
class="reset-btn"
type="info"
plain
>
<el-icon><Refresh /></el-icon>
重置
</el-button>
</div>
<!-- 当前筛选条件显示 -->
<div v-if="hasActiveFilters" class="filter-tags">
@@ -882,15 +902,105 @@ console.log('错题分析页面已加载')
}
.filter-section {
.filter-form {
.el-form-item {
margin-bottom: 0;
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;
.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;
}
&.is-focused {
background: #fff;
border-color: #409eff;
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}
}
.select-prefix-icon {
font-size: 14px;
margin-right: 4px;
}
}
.date-picker {
:deep(.el-input__wrapper) {
border-radius: 8px;
background: #f5f7fa;
box-shadow: none;
border: 1px solid transparent;
&:hover {
background: #fff;
border-color: #dcdfe6;
}
}
}
}
.reset-btn {
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
.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;
@@ -898,42 +1008,62 @@ console.log('错题分析页面已加载')
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;
}
.category-info {
color: #666;
font-size: 14px;
color: #606266;
font-size: 13px;
background: #f0f9eb;
padding: 4px 12px;
border-radius: 16px;
strong {
color: #67c23a;