refactor: 班级列表 UI 优化

- 移除本月授课进度条
- 简化操作按钮:"学生"改为"详情",移除"记录"按钮

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
En 2026-03-24 14:50:57 +08:00
parent 37d821990f
commit 4376a4c238

View File

@ -85,21 +85,6 @@
</div> </div>
</div> </div>
<!-- 进度条 -->
<div class="class-progress">
<div class="progress-label">本月授课进度</div>
<div class="progress-bar">
<div
class="progress-fill"
:style="{
width: Math.min((cls.lessonCount / 20) * 100, 100) + '%',
background: getGradeGradient(cls.grade)
}"
></div>
</div>
<div class="progress-text">{{ Math.min(Math.round((cls.lessonCount / 20) * 100), 100) }}%</div>
</div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="class-actions"> <div class="class-actions">
<button class="action-btn primary" @click.stop="prepareLesson(cls)"> <button class="action-btn primary" @click.stop="prepareLesson(cls)">
@ -108,11 +93,7 @@
</button> </button>
<button class="action-btn" @click.stop="viewStudents(cls)"> <button class="action-btn" @click.stop="viewStudents(cls)">
<UsergroupAddOutlined /> <UsergroupAddOutlined />
学生 详情
</button>
<button class="action-btn" @click.stop="viewHistory(cls)">
<BarChartOutlined />
记录
</button> </button>
</div> </div>
</div> </div>
@ -237,9 +218,6 @@ const viewStudents = (cls: ClassInfo) => {
router.push(`/teacher/classes/${cls.id}/students`); router.push(`/teacher/classes/${cls.id}/students`);
}; };
const viewHistory = (cls: ClassInfo) => {
router.push(`/teacher/classes/${cls.id}/lessons`);
};
</script> </script>
<style scoped> <style scoped>
@ -561,38 +539,6 @@ const viewHistory = (cls: ClassInfo) => {
margin: 0 16px; margin: 0 16px;
} }
/* 进度条 */
.class-progress {
margin-bottom: 20px;
}
.progress-label {
font-size: 12px;
color: #888;
margin-bottom: 8px;
}
.progress-bar {
height: 8px;
background: #F0F0F0;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-text {
font-size: 12px;
color: #FF8C42;
font-weight: 500;
margin-top: 6px;
text-align: right;
}
/* 操作按钮 */ /* 操作按钮 */
.class-actions { .class-actions {
display: flex; display: flex;