LeiBoWen/en-edu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(layout): 为多页面添加侧边栏布局组件

Browse Source 
- 在admid页面和class页面包裹el-container，插入Sidebar侧边栏组件
- 在LearningPlan和PlanTTS页面同样新增侧边栏布局
- 重构Header组件样式，采用fluent风格透明卡片和按钮样式
- 增加main.css中panel-shell的样式定义以支持新布局视觉效果
- 优化部分按钮及菜单交互样式，提升整体一致性与视觉体验
This commit is contained in:
lbw
2026-01-04 11:10:29 +08:00
parent 1184ea7895
commit fe7128dd4e
9 changed files with 556 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
enlish-vue/src/pages/student.vue
View File

@@ -5,54 +5,62 @@
<Header></Header>
</el-header>
<el-main class="p-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">学生详情</div>
<template v-if="detail">
<el-descriptions :column="1" border>
<el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
<el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
<el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
<el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade }}</el-descriptions-item>
</el-descriptions>
</template>
<template v-else>
<el-empty description="请从班级页跳转" />
</template>
</div>
<el-container>
<el-aside width="200px" class="pt-4">
<Sidebar />
</el-aside>
<el-main class="p-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">学生详情</div>
<template v-if="detail">
<el-descriptions :column="1" border>
<el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
<el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
<el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
<el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
<el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade
}}</el-descriptions-item>
</el-descriptions>
</template>
<template v-else>
<el-empty description="请从班级页跳转" />
</template>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">学生词汇统计</div>
<template v-if="wordStat">
<el-descriptions :column="1" border>
<el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount }}</el-descriptions-item>
<el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount }}</el-descriptions-item>
<el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount }}</el-descriptions-item>
</el-descriptions>
</template>
<template v-else>
<el-empty description="暂无统计" />
</template>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">学生词汇统计</div>
<template v-if="wordStat">
<el-descriptions :column="1" border>
<el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount
}}</el-descriptions-item>
<el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount
}}</el-descriptions-item>
<el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount
}}</el-descriptions-item>
</el-descriptions>
</template>
<template v-else>
<el-empty description="暂无统计" />
</template>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">学生考试记录</div>
<ExamHistoryChart :data="history" />
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">学生考试记录</div>
<ExamHistoryChart :data="history" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">学生学案记录</div>
<PlanHistoryChart :student-id="route.params.id" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">词汇掌握热力图</div>
<WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
</div>
<StudyAnalysis :student-id="route.params.id" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">学生学案记录</div>
<PlanHistoryChart :student-id="route.params.id" />
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-md font-semibold mb-3">词汇掌握热力图</div>
<WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
</div>
<StudyAnalysis :student-id="route.params.id" />
</div>
</el-main>
</el-main>
</el-container>
</el-container>
</div>
</template>
@@ -68,6 +76,7 @@ import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
import PlanHistoryChart from '@/layouts/components/student/PlanHistoryChart.vue'
import WordMasteryHeatmap from '@/layouts/components/student/WordMasteryHeatmap.vue'
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
import Sidebar from '@/layouts/components/Sidebar.vue'
const loading = ref(false)
const detail = ref(null)