Love_Chengke/ClassHelper
1
1 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): 实现可编辑岛组件方案与连接更新状态反馈

Browse Source
This commit is contained in:
LoveChengke committed 2026-10-17 12:55:39 +08:00
1 parent 35b252249d
commit b990701cde
26 files changed
+2014 -275
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/desktop-client/src/renderer/views/GradeView.vue
+263 -202
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import type { CollectiveGradeAnalysisDto as ContractCollectiveGradeAnalysisDto } from '@classhelper/shared';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import {
SOCKET_EVENTS,
@@ -11,6 +13,7 @@ import {
type GradeDto,
type StudentGradeDetailDto,
} from '@classhelper/shared';
import { api } from '../api/http.js';
import { gradeApi } from '../api/index.js';
import { fetchWithCache } from '../cache/index.js';
import ScoreBarChart from '../components/ScoreBarChart.vue';
@@ -28,6 +31,7 @@ const realtime = useRealtimeStore();
const loading = ref(false);
const grades = ref<GradeDto[]>([]);
const collective = ref<ContractCollectiveGradeAnalysisDto | null>(null);
const fromCache = ref(false);
const updatedAt = ref<number | null>(null);
@@ -106,6 +110,31 @@ const examAverages = computed(() => {
async function loadGrades(): Promise<void> {
loading.value = true;
try {
if (auth.isClassSession) {
const result = await fetchWithCache<
ContractCollectiveGradeAnalysisDto | { mode: 'personal'; items: GradeDto[] }
>('grades', 'overview', () => api.get('/grades/overview'), {
mode: 'collective',
classId: auth.classId || '',
suppressed: true,
averagePercent: null,
passRate: null,
excellentRate: null,
subjects: [],
distribution: [],
trend: [],
});
collective.value = result.data.mode === 'collective' ? result.data : null;
grades.value = result.data.mode === 'personal' ? result.data.items : [];
if (collective.value) {
queried.value = null;
queryNo.value = '';
ranking.value = null;
}
fromCache.value = result.fromCache;
updatedAt.value = result.updatedAt;
return;
}
const result = await fetchWithCache<GradeDto[]>('grades', 'my', () => gradeApi.my(), []);
grades.value = result.data;
fromCache.value = result.fromCache;
@@ -134,6 +163,12 @@ const rankingLoading = ref(false);
const rankingError = ref('');
async function loadExams(): Promise<void> {
if (collective.value) {
examList.value = [];
selectedExam.value = '';
ranking.value = null;
return;
}
const classId = auth.user?.classId;
if (!classId) return;
try {
@@ -180,233 +215,259 @@ onMounted(async () => {
await loadGrades();
await loadExams();
realtime.on(SOCKET_EVENTS.gradeUpdated, onGradeEvent);
realtime.on(SOCKET_EVENTS.classUpdated, onGradeEvent);
appStore.onServerRecovered(onRecovered);
});
onUnmounted(() => {
realtime.off(SOCKET_EVENTS.gradeUpdated, onGradeEvent);
realtime.off(SOCKET_EVENTS.classUpdated, onGradeEvent);
appStore.offServerRecovered(onRecovered);
});
</script>
<template>
<div class="page">
<div class="page-header">
<div>
<h2 class="page-title">{{ auth.isClassSession ? '本班成绩' : '我的成绩' }}</h2>
<p class="page-subtitle">
共 {{ grades.length }} 条记录 · 平均得分率 {{ averagePercent }}%
<span v-if="auth.isClassSession">· 班级账号：显示全班成绩总览</span>
<el-tag v-if="fromCache" size="small" type="warning" effect="plain">离线缓存</el-tag>
</p>
<el-card v-if="collective">
<h2>全班集体成绩分析</h2>
<p>个人成绩查询已关闭；只展示服务端聚合结果。人数不足或稀疏分段不展示。</p>
<p>
班级平均得分率：{{ collective.averagePercent ?? '样本不足' }} · 及格率：{{
collective.passRate ?? '已隐藏'
}}
· 优秀率：{{ collective.excellentRate ?? '已隐藏' }}
</p>
<el-table :data="collective.subjects">
<el-table-column prop="name" label="科目" />
<el-table-column prop="averagePercent" label="平均得分率" />
</el-table>
<el-table :data="collective.distribution">
<el-table-column prop="label" label="分数段" />
<el-table-column prop="count" label="人数（稀疏时隐藏）" />
</el-table>
<el-table :data="collective.trend">
<el-table-column prop="examName" label="考试趋势" />
<el-table-column prop="averagePercent" label="平均得分率" />
</el-table>
</el-card>
<template v-if="!collective">
<div v-if="!collective" class="page-header">
<div>
<h2 class="page-title">{{ auth.isClassSession ? '本班成绩' : '我的成绩' }}</h2>
<p class="page-subtitle">
共 {{ grades.length }} 条记录 · 平均得分率 {{ averagePercent }}%
<span v-if="auth.isClassSession">· 班级账号：显示全班成绩总览</span>
<el-tag v-if="fromCache" size="small" type="warning" effect="plain">离线缓存</el-tag>
</p>
</div>
<div class="toolbar">
<el-input
v-model="queryNo"
placeholder="输入学号查个人明细"
clearable
style="width: 200px"
@keyup.enter="queryByStudentNo"
/>
<el-button :icon="'Search'" :loading="queryLoading" @click="queryByStudentNo">按学号查询</el-button>
<el-button :icon="'Refresh'" @click="loadGrades">刷新</el-button>
</div>
</div>
<div class="toolbar">
<el-input
v-model="queryNo"
placeholder="输入学号查个人明细"
clearable
style="width: 200px"
@keyup.enter="queryByStudentNo"
/>
<el-button :icon="'Search'" :loading="queryLoading" @click="queryByStudentNo">按学号查询</el-button>
<el-button :icon="'Refresh'" @click="loadGrades">刷新</el-button>
</div>
</div>
<!-- 按学号查询结果：ClassHelper 班级端代学生查本人明细 -->
<el-card v-if="queried || queryError" shadow="never" class="mt-12">
<template #header>
<div class="query-header">
<span v-if="queried">
学号 {{ queried.student.studentNo }} · {{ queried.student.name }}
<span class="text-muted">（{{ queried.className ?? '未分班' }}）</span>
</span>
<span v-else>查询失败</span>
<el-button link @click="((queried = null), (queryError = ''))">收起</el-button>
</div>
</template>
<el-alert v-if="queryError" type="warning" :closable="false" show-icon :title="queryError" />
<template v-else-if="queried">
<div class="text-muted" style="margin-bottom: 8px">
共 {{ queried.items.length }} 条记录 · 平均得分率 {{ queried.averagePercent }}%
</div>
<el-table :data="queried.items" size="small" empty-text="该生还没有成绩记录" max-height="320">
<el-table-column prop="examName" label="考试" width="150" />
<el-table-column label="科目" width="110">
<!-- 按学号查询结果：ClassHelper 班级端代学生查本人明细 -->
<el-card v-if="queried || queryError" shadow="never" class="mt-12">
<template #header>
<div class="query-header">
<span v-if="queried">
学号 {{ queried.student.studentNo }} · {{ queried.student.name }}
<span class="text-muted">（{{ queried.className ?? '未分班' }}）</span>
</span>
<span v-else>查询失败</span>
<el-button link @click="((queried = null), (queryError = ''))">收起</el-button>
</div>
</template>
<el-alert v-if="queryError" type="warning" :closable="false" show-icon :title="queryError" />
<template v-else-if="queried">
<div class="text-muted" style="margin-bottom: 8px">
共 {{ queried.items.length }} 条记录 · 平均得分率 {{ queried.averagePercent }}%
</div>
<el-table :data="queried.items" size="small" empty-text="该生还没有成绩记录" max-height="320">
<el-table-column prop="examName" label="考试" width="150" />
<el-table-column label="科目" width="110">
<template #default="{ row }">{{ row.course?.name ?? '-' }}</template>
</el-table-column>
<el-table-column label="分数" width="120">
<template #default="{ row }">{{ row.score }} / {{ row.totalScore }}</template>
</el-table-column>
<el-table-column label="等级" width="100">
<template #default="{ row }">
<el-tag size="small" effect="plain">{{ row.level || '-' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="发布时间">
<template #default="{ row }">{{ formatDate(row.publishedAt, true) }}</template>
</el-table-column>
</el-table>
</template>
</el-card>
<!-- 考试排名：总分榜（老师把这次考试设成"所有科目相加"时才有）+ 单科榜。
排名与"算不算总分"都由服务端说了算，这里只显示。 -->
<el-card v-if="auth.isClassSession" v-loading="rankingLoading" shadow="never" class="mt-16">
<template #header>
<div class="ranking-header">
<span>考试排名</span>
<el-select
v-model="selectedExam"
placeholder="选择考试"
size="small"
style="width: 200px"
:disabled="examList.length === 0"
@change="loadRanking"
>
<el-option
v-for="item in examList"
:key="item.name"
:label="`${item.name}（${item.gradeCount} 条）`"
:value="item.name"
/>
</el-select>
<el-button size="small" :icon="'Refresh'" @click="loadRanking">刷新</el-button>
</div>
</template>
<el-alert v-if="rankingError" type="warning" :closable="false" show-icon :title="rankingError" />
<el-empty
v-else-if="examList.length === 0"
description="还没有成绩记录，先在 Web 端录入或导入"
:image-size="60"
/>
<template v-else-if="ranking">
<el-alert v-if="!ranking.countInTotal" type="info" :closable="false" show-icon class="mb-12">
<template #title>这次考试没有开启总分排名</template>
<template #default>
语数外与音体美的分数量纲不同，合不合总分由老师决定 —— 需要总分榜请在 Web 端「成绩录入」
页把该次考试的「考试口径」打开。
</template>
</el-alert>
<el-table v-if="ranking.countInTotal" :data="ranking.total" size="small" max-height="320">
<el-table-column label="总分排名" width="96">
<template #default="{ row }">
<el-tag :type="row.rank <= 3 ? 'danger' : 'info'" effect="plain" size="small">
{{ row.rank }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="studentNo" label="学号" width="110" />
<el-table-column prop="studentName" label="姓名" width="110" />
<el-table-column label="总分" width="90">
<template #default="{ row }">{{ row.score }}</template>
</el-table-column>
<el-table-column label="科目数" width="90">
<template #default="{ row }">{{ row.subjectCount }}</template>
</el-table-column>
</el-table>
<el-divider v-if="ranking.countInTotal" content-position="left">单科排名</el-divider>
<el-tabs v-if="ranking.subjects.length > 0" type="border-card">
<el-tab-pane
v-for="subject in ranking.subjects"
:key="subject.courseName"
:label="subject.courseName"
>
<el-table :data="subject.rows" size="small" max-height="300">
<el-table-column label="名次" width="80">
<template #default="{ row }">{{ row.rank }}</template>
</el-table-column>
<el-table-column prop="studentNo" label="学号" width="110" />
<el-table-column prop="studentName" label="姓名" width="110" />
<el-table-column label="得分" width="120">
<template #default="{ row }">{{ row.score }} / {{ row.totalScore }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="这次考试还没有单科成绩" :image-size="60" />
</template>
</el-card>
<el-row :gutter="12">
<el-col :xs="24" :md="8">
<div class="stat-card">
<div class="stat-label">平均得分率</div>
<div class="stat-value">{{ averagePercent }}%</div>
<div class="stat-hint">共 {{ grades.length }} 次记录</div>
</div>
<div class="stat-card mt-12">
<div class="stat-label">最好成绩</div>
<div class="stat-value">
{{ bestGrade ? `${bestGrade.score}/${bestGrade.totalScore}` : '-' }}
</div>
<div class="stat-hint">{{ bestGrade?.examName ?? '暂无数据' }}</div>
</div>
<div class="stat-card mt-12">
<div class="stat-label">等级分布</div>
<div class="level-list">
<el-tag v-for="(count, level) in levelCounts" :key="level" effect="plain">
{{ level }} 等：{{ count }}
</el-tag>
</div>
</div>
</el-col>
<el-col :xs="24" :md="16">
<el-card v-loading="loading" shadow="never">
<template #header><span>各次考试平均得分率</span></template>
<ScoreBarChart :items="examAverages" />
</el-card>
</el-col>
</el-row>
<el-card shadow="never" class="mt-16">
<template #header><span>成绩明细</span></template>
<el-table :data="grades" empty-text="暂无成绩" max-height="420">
<el-table-column prop="examName" label="考试" min-width="150" />
<el-table-column label="课程" width="110">
<template #default="{ row }">{{ row.course?.name ?? '-' }}</template>
</el-table-column>
<el-table-column label="分数" width="120">
<el-table-column label="分数" width="130">
<template #default="{ row }">{{ row.score }} / {{ row.totalScore }}</template>
</el-table-column>
<el-table-column label="等级" width="100">
<el-table-column label="得分率" width="200">
<template #default="{ row }">
<el-tag size="small" effect="plain">{{ row.level || '-' }}</el-tag>
<el-progress
:percentage="gradePercent(row.score, row.totalScore)"
:stroke-width="10"
:status="gradePercent(row.score, row.totalScore) >= 60 ? 'success' : 'exception'"
/>
</template>
</el-table-column>
<el-table-column label="发布时间">
<el-table-column label="等级" width="80">
<template #default="{ row }">
{{ row.level || gradeLevel(gradePercent(row.score, row.totalScore)) }}
</template>
</el-table-column>
<el-table-column label="发布时间" width="170">
<template #default="{ row }">{{ formatDate(row.publishedAt, true) }}</template>
</el-table-column>
</el-table>
</template>
</el-card>
</el-card>
<!-- 考试排名：总分榜（老师把这次考试设成"所有科目相加"时才有）+ 单科榜。
排名与"算不算总分"都由服务端说了算，这里只显示。 -->
<el-card v-if="auth.isClassSession" v-loading="rankingLoading" shadow="never" class="mt-16">
<template #header>
<div class="ranking-header">
<span>考试排名</span>
<el-select
v-model="selectedExam"
placeholder="选择考试"
size="small"
style="width: 200px"
:disabled="examList.length === 0"
@change="loadRanking"
<el-card v-if="latestGrades.length > 0" shadow="never" class="mt-16">
<template #header><span>最近更新</span></template>
<el-timeline>
<el-timeline-item
v-for="item in latestGrades"
:key="item.id"
:timestamp="formatDate(item.publishedAt, true)"
placement="top"
>
<el-option
v-for="item in examList"
:key="item.name"
:label="`${item.name}（${item.gradeCount} 条）`"
:value="item.name"
/>
</el-select>
<el-button size="small" :icon="'Refresh'" @click="loadRanking">刷新</el-button>
</div>
</template>
<el-alert v-if="rankingError" type="warning" :closable="false" show-icon :title="rankingError" />
<el-empty
v-else-if="examList.length === 0"
description="还没有成绩记录，先在 Web 端录入或导入"
:image-size="60"
/>
<template v-else-if="ranking">
<el-alert v-if="!ranking.countInTotal" type="info" :closable="false" show-icon class="mb-12">
<template #title>这次考试没有开启总分排名</template>
<template #default>
语数外与音体美的分数量纲不同，合不合总分由老师决定 —— 需要总分榜请在 Web 端「成绩录入」
页把该次考试的「考试口径」打开。
</template>
</el-alert>
<el-table v-if="ranking.countInTotal" :data="ranking.total" size="small" max-height="320">
<el-table-column label="总分排名" width="96">
<template #default="{ row }">
<el-tag :type="row.rank <= 3 ? 'danger' : 'info'" effect="plain" size="small">
{{ row.rank }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="studentNo" label="学号" width="110" />
<el-table-column prop="studentName" label="姓名" width="110" />
<el-table-column label="总分" width="90">
<template #default="{ row }">{{ row.score }}</template>
</el-table-column>
<el-table-column label="科目数" width="90">
<template #default="{ row }">{{ row.subjectCount }}</template>
</el-table-column>
</el-table>
<el-divider v-if="ranking.countInTotal" content-position="left">单科排名</el-divider>
<el-tabs v-if="ranking.subjects.length > 0" type="border-card">
<el-tab-pane
v-for="subject in ranking.subjects"
:key="subject.courseName"
:label="subject.courseName"
>
<el-table :data="subject.rows" size="small" max-height="300">
<el-table-column label="名次" width="80">
<template #default="{ row }">{{ row.rank }}</template>
</el-table-column>
<el-table-column prop="studentNo" label="学号" width="110" />
<el-table-column prop="studentName" label="姓名" width="110" />
<el-table-column label="得分" width="120">
<template #default="{ row }">{{ row.score }} / {{ row.totalScore }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
<el-empty v-else description="这次考试还没有单科成绩" :image-size="60" />
</template>
</el-card>
<el-row :gutter="12">
<el-col :xs="24" :md="8">
<div class="stat-card">
<div class="stat-label">平均得分率</div>
<div class="stat-value">{{ averagePercent }}%</div>
<div class="stat-hint">共 {{ grades.length }} 次记录</div>
</div>
<div class="stat-card mt-12">
<div class="stat-label">最好成绩</div>
<div class="stat-value">
{{ bestGrade ? `${bestGrade.score}/${bestGrade.totalScore}` : '-' }}
</div>
<div class="stat-hint">{{ bestGrade?.examName ?? '暂无数据' }}</div>
</div>
<div class="stat-card mt-12">
<div class="stat-label">等级分布</div>
<div class="level-list">
<el-tag v-for="(count, level) in levelCounts" :key="level" effect="plain">
{{ level }} 等：{{ count }}
</el-tag>
</div>
</div>
</el-col>
<el-col :xs="24" :md="16">
<el-card v-loading="loading" shadow="never">
<template #header><span>各次考试平均得分率</span></template>
<ScoreBarChart :items="examAverages" />
</el-card>
</el-col>
</el-row>
<el-card shadow="never" class="mt-16">
<template #header><span>成绩明细</span></template>
<el-table :data="grades" empty-text="暂无成绩" max-height="420">
<el-table-column prop="examName" label="考试" min-width="150" />
<el-table-column label="课程" width="110">
<template #default="{ row }">{{ row.course?.name ?? '-' }}</template>
</el-table-column>
<el-table-column label="分数" width="130">
<template #default="{ row }">{{ row.score }} / {{ row.totalScore }}</template>
</el-table-column>
<el-table-column label="得分率" width="200">
<template #default="{ row }">
<el-progress
:percentage="gradePercent(row.score, row.totalScore)"
:stroke-width="10"
:status="gradePercent(row.score, row.totalScore) >= 60 ? 'success' : 'exception'"
/>
</template>
</el-table-column>
<el-table-column label="等级" width="80">
<template #default="{ row }">
{{ row.level || gradeLevel(gradePercent(row.score, row.totalScore)) }}
</template>
</el-table-column>
<el-table-column label="发布时间" width="170">
<template #default="{ row }">{{ formatDate(row.publishedAt, true) }}</template>
</el-table-column>
</el-table>
</el-card>
<el-card v-if="latestGrades.length > 0" shadow="never" class="mt-16">
<template #header><span>最近更新</span></template>
<el-timeline>
<el-timeline-item
v-for="item in latestGrades"
:key="item.id"
:timestamp="formatDate(item.publishedAt, true)"
placement="top"
>
{{ item.examName }} · {{ item.course?.name ?? '未关联课程' }}：
<strong>{{ item.score }}/{{ item.totalScore }}</strong>
</el-timeline-item>
</el-timeline>
</el-card>
{{ item.examName }} · {{ item.course?.name ?? '未关联课程' }}：
<strong>{{ item.score }}/{{ item.totalScore }}</strong>
</el-timeline-item>
</el-timeline>
</el-card>
</template>
</div>
</template>