xiongyuxing/gongxue-base
1
0
Fork 0
forked from wangziqi/gongxue-base
Code Pull Requests Activity

feat: redesign teacher attendance workspace

Browse Source
This commit is contained in:
wangziqi
2026-07-18 15:34:02 +08:00
parent 4af7acbeaa
commit 98d335b889
2 changed files with 1076 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

615
apps/admin/src/pages/Attendance/attendance.css
View File

@@ -66,6 +66,102 @@
opacity: 0.72;
}
.teacher-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 5px 18px rgb(23 32 51 / 4%);
}
.teacher-topbar-select {
min-width: 160px;
}
.teacher-workspace-layout {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 16px;
}
.teacher-filter-rail {
position: sticky;
top: 16px;
align-self: start;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: 0 5px 18px rgb(23 32 51 / 4%);
}
.teacher-filter-title {
display: flex;
align-items: center;
gap: 7px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.teacher-filter-select {
width: 100%;
}
.teacher-filter-hint {
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.teacher-main-panel {
min-width: 0;
}
.current-lesson-card {
margin-bottom: 18px;
border: 1px solid #d8e6fb;
border-radius: 14px;
background: linear-gradient(120deg, #f7fbff 0%, #fff 70%);
}
.current-lesson-card .ant-card-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.current-lesson-copy > span {
color: var(--muted);
font-size: 12px;
}
.current-lesson-copy h2 {
margin: 4px 0;
font-size: 22px;
}
.current-lesson-copy p {
margin: 0;
color: var(--muted);
}
.current-lesson-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.teacher-overview {
margin-bottom: 30px;
}
@@ -458,7 +554,8 @@
@media (max-width: 900px) {
.attendance-hero,
.archive-toolbar {
.archive-toolbar,
.teacher-topbar {
align-items: flex-start;
flex-direction: column;
}
@@ -494,6 +591,23 @@
grid-column: 2 / -1;
padding: 14px 0 0;
}
.teacher-workspace-layout {
grid-template-columns: 1fr;
}
.teacher-filter-rail {
position: static;
}
.current-lesson-card .ant-card-body {
align-items: flex-start;
flex-direction: column;
}
.current-lesson-actions {
justify-content: flex-start;
}
}
@media (max-width: 576px) {
@@ -566,3 +680,502 @@
color: #8c8c8c;
font-size: 12px;
}
/* Student attendance center — adapted from the provided class overview reference */
.student-attendance-center {
--student-bg: #f4f7f7;
--student-surface: #ffffff;
--student-soft: #f7faf9;
--student-ink: #17201e;
--student-muted: #66736f;
--student-quiet: #8a9692;
--student-line: #e1e8e5;
--student-primary: #157a65;
--student-primary-soft: #e8f4f0;
min-height: calc(100vh - 64px);
margin: -24px;
padding: 0 24px 28px;
background: var(--student-bg);
color: var(--student-ink);
}
.student-center-topbar {
position: sticky;
top: 0;
z-index: 12;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 60px;
margin: 0 -24px 18px;
padding: 0 24px;
border-bottom: 1px solid var(--student-line);
background: rgb(255 255 255 / 96%);
backdrop-filter: blur(10px);
}
.student-center-title {
display: flex;
align-items: baseline;
gap: 12px;
}
.student-center-title h1 {
margin: 0;
font-size: 18px;
letter-spacing: 0;
}
.student-center-title span,
.student-sync-status {
color: var(--student-quiet);
font-size: 12px;
}
.student-center-actions {
display: flex;
align-items: center;
gap: 8px;
}
.student-sync-status {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 6px;
}
.student-sync-status i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2f9c78;
}
.student-filter-panel {
display: grid;
grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(150px, 1fr)) auto;
gap: 12px;
align-items: end;
margin-bottom: 16px;
padding: 16px;
border: 1px solid var(--student-line);
border-radius: 10px;
background: var(--student-surface);
}
.student-filter-field {
display: grid;
gap: 6px;
min-width: 0;
}
.student-filter-field label {
color: var(--student-muted);
font-size: 12px;
}
.student-filter-field .ant-picker,
.student-filter-field .ant-select {
width: 100%;
}
.student-filter-actions {
display: flex;
gap: 8px;
}
.student-class-overview {
display: grid;
grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
gap: 16px;
margin-bottom: 16px;
}
.student-class-identity,
.student-metric-strip,
.student-workspace,
.student-record-card {
border: 1px solid var(--student-line);
border-radius: 10px;
background: var(--student-surface);
}
.student-class-identity {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 156px;
padding: 18px;
}
.student-class-identity h2 {
margin: 0 0 5px;
font-size: 22px;
}
.student-class-identity span {
color: var(--student-muted);
font-size: 12px;
}
.student-teacher-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.student-teacher-item {
display: flex;
align-items: center;
gap: 9px;
min-width: 150px;
padding: 9px;
border-radius: 8px;
background: var(--student-soft);
}
.student-teacher-item .ant-avatar {
color: var(--student-primary);
background: var(--student-primary-soft);
}
.student-teacher-item strong,
.student-teacher-item span {
display: block;
}
.student-teacher-item strong {
margin-top: 2px;
font-size: 13px;
}
.student-metric-strip {
display: grid;
grid-template-columns: repeat(6, minmax(82px, 1fr));
overflow: hidden;
}
.student-metric-card {
appearance: none;
display: grid;
align-content: center;
gap: 6px;
min-height: 156px;
padding: 16px 12px;
border: 0;
border-right: 1px solid var(--student-line);
background: #fff;
color: inherit;
text-align: left;
cursor: pointer;
}
.student-metric-card:last-child {
border-right: 0;
}
.student-metric-card:hover,
.student-metric-card.active {
background: var(--student-primary-soft);
}
.student-metric-icon {
display: inline-grid;
width: max-content;
min-width: 34px;
height: 26px;
place-items: center;
padding: 0 7px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.student-metric-card strong {
font-size: 24px;
line-height: 1;
}
.student-metric-card small {
color: var(--student-muted);
}
.student-workspace {
margin-bottom: 16px;
padding: 0 18px 20px;
}
.student-workspace-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 70px;
border-bottom: 1px solid var(--student-line);
}
.student-workspace-header h3 {
margin: 0 0 4px;
font-size: 17px;
}
.student-workspace-header span {
color: var(--student-muted);
font-size: 12px;
}
.student-workspace-tools {
display: flex;
align-items: center;
gap: 8px;
}
.student-workspace-tools .ant-input-search {
width: 240px;
}
.student-legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
color: var(--student-muted);
font-size: 12px;
}
.student-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 12px;
}
.student-legend i {
width: 9px;
height: 9px;
border-radius: 2px;
}
.student-legend i.is-present { background: #2f9c78; }
.student-legend i.is-late { background: #d78a18; }
.student-legend i.is-leave { background: #397bbf; }
.student-legend i.is-absent { background: #d44d4d; }
.student-legend i.is-pending { background: #8a9692; }
.student-legend em {
color: var(--student-quiet);
font-style: normal;
}
.student-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
gap: 10px;
}
.student-attendance-card {
appearance: none;
display: grid;
gap: 12px;
min-height: 96px;
padding: 13px;
border: 1px solid var(--student-line);
border-radius: 8px;
background: #fff;
color: inherit;
text-align: left;
cursor: pointer;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.student-attendance-card:hover,
.student-attendance-card.selected {
transform: translateY(-1px);
border-color: #91c8b9;
box-shadow: 0 8px 20px rgb(24 44 38 / 8%);
}
.student-attendance-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.student-attendance-head strong {
font-size: 15px;
}
.student-attendance-head small {
color: var(--student-quiet);
}
.student-status-blocks {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.student-status-block {
display: grid;
min-height: 28px;
place-items: center;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
}
.student-record-card {
overflow: hidden;
margin-bottom: 16px;
}
.student-record-card .ant-card-body {
padding: 0 18px 14px;
}
.student-detail-panel {
display: grid;
gap: 18px;
}
.student-detail-profile {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid var(--student-line);
}
.student-detail-profile h4 {
margin: 0 0 4px;
font-size: 18px;
}
.student-detail-profile p,
.student-detail-rate span {
margin: 0;
color: var(--student-muted);
font-size: 12px;
}
.student-detail-rate {
text-align: right;
}
.student-detail-rate strong {
display: block;
color: var(--student-primary);
font-size: 24px;
}
.student-detail-rates {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.student-detail-rates > div {
padding: 12px 8px;
border-radius: 8px;
background: var(--student-soft);
text-align: center;
}
.student-detail-rates strong,
.student-detail-rates span {
display: block;
}
.student-detail-rates span {
margin-top: 4px;
color: var(--student-muted);
font-size: 12px;
}
.student-detail-section h5 {
margin: 0 0 10px;
font-size: 14px;
}
.student-detail-timeline {
display: grid;
gap: 8px;
}
.student-detail-timeline > div {
display: grid;
grid-template-columns: 64px 96px 1fr auto;
gap: 8px;
align-items: center;
padding: 10px;
border: 1px solid var(--student-line);
border-radius: 8px;
}
.student-detail-timeline > div > span:first-child {
color: var(--student-muted);
}
.student-trend-bars {
display: flex;
align-items: end;
gap: 8px;
height: 110px;
padding: 12px;
border-radius: 8px;
background: var(--student-soft);
}
.student-trend-bars i {
flex: 1;
min-height: 18px;
border-radius: 5px 5px 0 0;
background: linear-gradient(180deg, #56bea3, #157a65);
}
@media (max-width: 1180px) {
.student-filter-panel,
.student-class-overview {
grid-template-columns: 1fr 1fr;
}
.student-filter-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.student-metric-strip {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.student-attendance-center {
margin: -16px;
padding: 0 16px 22px;
}
.student-center-topbar,
.student-workspace-header,
.student-center-actions,
.student-legend {
align-items: flex-start;
flex-direction: column;
}
.student-filter-panel,
.student-class-overview {
grid-template-columns: 1fr;
}
.student-workspace-tools,
.student-workspace-tools .ant-input-search {
width: 100%;
}
}

643
apps/admin/src/pages/Attendance/index.tsx
View File

@@ -27,7 +27,9 @@ import {
ClockCircleOutlined,
EditOutlined,
ExportOutlined,
CalendarOutlined,
FileSearchOutlined,
FilterOutlined,
ReloadOutlined,
ScheduleOutlined,
TeamOutlined,
@@ -183,45 +185,6 @@ function AttendanceStatusTag({ status }: { status: string }) {
);
}
function SummaryStrip({ summary }: { summary: AttendanceSummary }) {
const rate = summary.total > 0 ? Math.round((summary.present / summary.total) * 100) : 0;
return (
<div className="attendance-summary-strip">
<div className="attendance-rate">
<Progress
type="circle"
percent={rate}
size={64}
strokeWidth={9}
strokeColor="#1677ff"
trailColor="#e8eef7"
/>
<div>
<span>出勤率</span>
<strong>{summary.total} 条记录</strong>
</div>
</div>
{[
['present', summary.present],
['late', summary.late],
['absent', summary.absent],
['leave', summary.leave],
].map(([status, value]) => {
const meta = STATUS_META[String(status)];
return (
<div className="attendance-summary-cell" key={String(status)}>
<span className={`attendance-summary-icon ${meta.className}`}>{meta.short}</span>
<div>
<strong>{value}</strong>
<span>{meta.label}</span>
</div>
</div>
);
})}
</div>
);
}
function LessonCheckinSummaryStrip({ records }: { records: readonly AttendanceRecordItem[] }) {
const summary = summarizeLessonCheckins(records);
const rate = summary.total > 0 ? Math.round((summary.checkedIn / summary.total) * 100) : 0;
@@ -265,6 +228,8 @@ const TeacherAttendanceWorkspace: React.FC = () => {
const [drawerOpen, setDrawerOpen] = useState(false);
const [studentKeyword, setStudentKeyword] = useState('');
const [checkinFilter, setCheckinFilter] = useState<LessonAttendanceFilter>('all');
const [selectedClassId, setSelectedClassId] = useState<number | 'all'>('all');
const [phaseFilter, setPhaseFilter] = useState<SchedulePhase | 'all'>('all');
const loadWorkspace = useCallback(async () => {
setLoading(true);
@@ -286,6 +251,17 @@ const TeacherAttendanceWorkspace: React.FC = () => {
[workspace],
);
const classFilterOptions = useMemo(
() => [
{ value: 'all' as const, label: '全部教学班' },
...(workspace?.assignedClasses.map((item) => ({
value: item.classId,
label: item.className,
})) ?? []),
],
[workspace],
);
const openAttendance = useCallback(async (schedule: TodaySchedule) => {
setStudentKeyword('');
@@ -324,7 +300,7 @@ const TeacherAttendanceWorkspace: React.FC = () => {
setLessonRecords((items) =>
items.map((item) => (item.id === record.id ? { ...item, status: previous } : item)),
);
message.error((error as { message?: string })?.message || '更新考勤失败');
message.error((error as { message?: string })?.message || '更新课堂考勤失败');
}
},
[],
@@ -339,6 +315,16 @@ const TeacherAttendanceWorkspace: React.FC = () => {
const nextSchedule = schedules.find(
(item) => getSchedulePhase(item.startTime, item.endTime, now) !== 'ended',
);
const filteredSchedules = schedules.filter((item) => {
const phase = getSchedulePhase(item.startTime, item.endTime, now);
const matchesClass = selectedClassId === 'all' || item.classId === selectedClassId;
const matchesPhase = phaseFilter === 'all' || phase === phaseFilter;
return matchesClass && matchesPhase;
});
const currentFocusSchedule = nextSchedule ?? schedules.at(-1) ?? null;
const currentFocusClassName = currentFocusSchedule
? classNameById.get(currentFocusSchedule.classId) || `班级 ${currentFocusSchedule.classId}`
: '暂无教学班';
const isAttendanceCompleted = lessonSession?.status === 'completed';
const filteredLessonRecords = useMemo(
() => filterLessonAttendanceRecords(lessonRecords, studentKeyword, checkinFilter),
@@ -347,72 +333,135 @@ const TeacherAttendanceWorkspace: React.FC = () => {
return (
<div className="attendance-page teacher-attendance">
<section className="teacher-topbar" aria-label="任课老师课堂考勤导航">
<Space size={10} wrap>
<Button icon={<CalendarOutlined />}>{dayjs().format('YYYY-MM-DD')}</Button>
<Select<number | 'all'>
value={selectedClassId}
onChange={setSelectedClassId}
options={classFilterOptions}
className="teacher-topbar-select"
/>
<Button type="primary">课堂考勤</Button>
<Button onClick={() => setPhaseFilter('all')}>今日课程</Button>
<Button onClick={() => setPhaseFilter('upcoming')}>我的课表</Button>
<Button onClick={() => setPhaseFilter('ended')}>考勤统计</Button>
</Space>
<Button icon={<ReloadOutlined />} onClick={() => void loadWorkspace()}>
刷新课程
</Button>
</section>
<section className="attendance-hero attendance-hero--teacher">
<div>
<span className="attendance-eyebrow">TEACHING DAY · {dayjs().format('MM月DD日 dddd')}</span>
<h1>今天，从课程开始</h1>
<p>课程开始后可查看最新打卡结果；课程截止时系统自动拉取并结算缺勤。</p>
<span className="attendance-eyebrow">LESSON ATTENDANCE · {dayjs().format('MM月DD日 dddd')}</span>
<h1>任课老师课堂考勤</h1>
<p>围绕“我的课程、本节课、教学班级”查看学生签到，课程开始后可拉取最新结果并处理未签到学生。</p>
</div>
<Button icon={<ReloadOutlined />} onClick={() => void loadWorkspace()}>
刷新
<Button type="primary" ghost icon={<FileSearchOutlined />} onClick={() => currentFocusSchedule && void openAttendance(currentFocusSchedule)} disabled={!currentFocusSchedule || getSchedulePhase(currentFocusSchedule.startTime, currentFocusSchedule.endTime, now) === 'upcoming'}>
查看本节考勤
</Button>
</section>
<Row gutter={[16, 16]} className="teacher-overview">
<Col xs={24} md={8}>
<div className="teacher-kpi"><span>今日课程</span><strong>{schedules.length}</strong><small>节</small></div>
<div className="teacher-kpi"><span>今日课程</span><strong>{schedules.length}</strong><small>节待查看</small></div>
</Col>
<Col xs={24} md={8}>
<div className="teacher-kpi"><span>已开始</span><strong>{startedCount}</strong><small>节，可查看考勤</small></div>
<div className="teacher-kpi"><span>已开始课程</span><strong>{startedCount}</strong><small>节，可处理课堂考勤</small></div>
</Col>
<Col xs={24} md={8}>
<div className="teacher-kpi teacher-kpi--next"><span>下一节</span><strong>{nextSchedule ? nextSchedule.startTime : '—'}</strong><small>{nextSchedule?.subject || '今天没有更多课程'}</small></div>
<div className="teacher-kpi teacher-kpi--next"><span>当前/下一节</span><strong>{nextSchedule ? nextSchedule.startTime : '—'}</strong><small>{nextSchedule?.subject || '今天没有更多课程'}</small></div>
</Col>
</Row>
<div className="attendance-section-heading">
<div><span>今日教学节奏</span><h2>我的课程</h2></div>
<span className="attendance-section-note">课程开始后可拉取钉钉考勤记录</span>
</div>
<div className="teacher-workspace-layout">
<aside className="teacher-filter-rail">
<div className="teacher-filter-title"><FilterOutlined /> 左侧筛选</div>
<Button block type={phaseFilter === 'all' && selectedClassId === 'all' ? 'primary' : 'default'} onClick={() => { setPhaseFilter('all'); setSelectedClassId('all'); }}>今日课程</Button>
<Button block type={phaseFilter === 'ongoing' ? 'primary' : 'default'} onClick={() => setPhaseFilter('ongoing')}>进行中</Button>
<Button block type={phaseFilter === 'ended' ? 'primary' : 'default'} onClick={() => setPhaseFilter('ended')}>已结束</Button>
<Button block type={phaseFilter === 'upcoming' ? 'primary' : 'default'} onClick={() => setPhaseFilter('upcoming')}>待上课</Button>
<Select<number | 'all'>
value={selectedClassId}
onChange={setSelectedClassId}
options={classFilterOptions}
className="teacher-filter-select"
/>
<div className="teacher-filter-hint">按教学班级、课堂状态快速定位需要处理的学生考勤。</div>
</aside>
<Spin spinning={loading}>
{schedules.length === 0 ? (
<Card className="attendance-empty-card">
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={<div><strong>今天还没有课程</strong><p>请联系教务管理员安排课程。</p></div>}
/>
<main className="teacher-main-panel">
<Card className="current-lesson-card">
<div className="current-lesson-copy">
<span>主页主功能区</span>
<h2>{currentFocusSchedule?.subject || '暂无待处理课程'}</h2>
<p>
{currentFocusSchedule
? `${currentFocusClassName} · ${currentFocusSchedule.startTime}-${currentFocusSchedule.endTime} · 教室 ${currentFocusSchedule.classroomId}`
: '今天没有课程，可切换日期查看其他课堂考勤。'}
</p>
</div>
<div className="current-lesson-actions">
<Button type="primary" disabled={!currentFocusSchedule || getSchedulePhase(currentFocusSchedule.startTime, currentFocusSchedule.endTime, now) === 'upcoming'} onClick={() => currentFocusSchedule && void openAttendance(currentFocusSchedule)}>
查看本节考勤 / 发起签到
</Button>
<Button icon={<ExportOutlined />} disabled>导出本节课记录</Button>
</div>
</Card>
) : (
<div className="lesson-timeline">
{schedules.map((schedule, index) => {
const phase = getSchedulePhase(schedule.startTime, schedule.endTime, now);
return (
<LessonCard
key={schedule.id}
schedule={schedule}
phase={phase}
className={classNameById.get(schedule.classId) || `班级 ${schedule.classId}`}
index={index + 1}
onOpen={() => void openAttendance(schedule)}
/>
);
})}
<div className="attendance-section-heading">
<div><span>课堂考勤列表</span><h2>我的课程</h2></div>
<span className="attendance-section-note">课程开始后可查看本节课学生签到和异常</span>
</div>
)}
</Spin>
<Spin spinning={loading}>
{schedules.length === 0 ? (
<Card className="attendance-empty-card">
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={<div><strong>今天还没有课程</strong><p>请联系教务管理员安排课程。</p></div>}
/>
</Card>
) : filteredSchedules.length === 0 ? (
<Card className="attendance-empty-card">
<Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={<div><strong>没有符合筛选条件的课程</strong><p>请调整左侧教学班级或课程状态。</p></div>}
/>
</Card>
) : (
<div className="lesson-timeline">
{filteredSchedules.map((schedule, index) => {
const phase = getSchedulePhase(schedule.startTime, schedule.endTime, now);
return (
<LessonCard
key={schedule.id}
schedule={schedule}
phase={phase}
className={classNameById.get(schedule.classId) || `班级 ${schedule.classId}`}
index={index + 1}
onOpen={() => void openAttendance(schedule)}
/>
);
})}
</div>
)}
</Spin>
</main>
</div>
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} width={960} title={null} className="attendance-drawer">
<div className="lesson-record-header">
<span className="attendance-eyebrow">LESSON ATTENDANCE</span>
<h2>{selectedSchedule?.subject || '课程考勤'}</h2>
<p>{selectedSchedule ? classNameById.get(selectedSchedule.classId) : ''} · {selectedSchedule?.startTime}–{selectedSchedule?.endTime} · {dayjs().format('YYYY-MM-DD')}</p>
<h2>{selectedSchedule?.subject || '本节课考勤'}</h2>
<p>{selectedSchedule ? classNameById.get(selectedSchedule.classId) : ''} · 本节课 {selectedSchedule?.startTime}–{selectedSchedule?.endTime} · {dayjs().format('YYYY-MM-DD')}</p>
</div>
{lessonSession && (
<Alert
type={isAttendanceCompleted ? 'success' : 'info'}
showIcon
title={isAttendanceCompleted ? '本节课考勤已结算' : '当前打卡结果；课程截止后将自动做最终结算'}
title={isAttendanceCompleted ? '本节课考勤已结算' : '当前为本节课实时签到结果；课程截止后将自动做最终结算'}
style={{ marginBottom: 16 }}
/>
)}
@@ -430,8 +479,8 @@ const TeacherAttendanceWorkspace: React.FC = () => {
onChange={setCheckinFilter}
options={[
{ value: 'all', label: '全部学生' },
{ value: 'checked_in', label: '已打卡' },
{ value: 'not_checked_in', label: '未打卡' },
{ value: 'checked_in', label: '已到学生' },
{ value: 'not_checked_in', label: '未签到/旷课' },
]}
className="lesson-record-filter-select"
/>
@@ -447,7 +496,7 @@ const TeacherAttendanceWorkspace: React.FC = () => {
locale={{
emptyText: <Empty
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={lessonRecords.length === 0 ? '本节课尚未开始点名' : '没有符合条件的学生'}
description={lessonRecords.length === 0 ? '本节课尚未产生签到记录' : '没有符合条件的学生'}
/>,
}}
columns={[
@@ -456,7 +505,7 @@ const TeacherAttendanceWorkspace: React.FC = () => {
render: (name: string) => <div className="student-cell"><Avatar size={32}>{name?.slice(0, 1)}</Avatar><strong>{name || '-'}</strong></div>,
},
{
title: '考勤结果', dataIndex: 'status', width: 230,
title: '课堂考勤操作', dataIndex: 'status', width: 250,
render: (value: string, record: AttendanceRecordItem) => {
const checkedIn = value === 'present' || value === 'late';
return (
@@ -466,7 +515,7 @@ const TeacherAttendanceWorkspace: React.FC = () => {
type={checkedIn ? 'primary' : 'default'}
onClick={() => void updateLessonRecord(record, 'present')}
>
已打卡
标记已到
</Button>
<Button
size="small"
@@ -474,15 +523,15 @@ const TeacherAttendanceWorkspace: React.FC = () => {
danger={!checkedIn}
onClick={() => void updateLessonRecord(record, 'absent')}
>
未打卡
标记未签
</Button>
</div>
);
},
},
{ title: '当前状态', dataIndex: 'status', width: 105, render: (value: string) => <AttendanceStatusTag status={value === 'present' || value === 'late' ? 'present' : 'absent'} /> },
{ title: '当前状态', dataIndex: 'status', width: 118, render: (value: string) => <AttendanceStatusTag status={value === 'present' || value === 'late' ? 'present' : 'absent'} /> },
{
title: '打卡设备',
title: '签到来源',
width: 220,
render: (_: unknown, record: AttendanceRecordItem) => {
const info = getPunchDisplayInfo(record);
@@ -496,7 +545,7 @@ const TeacherAttendanceWorkspace: React.FC = () => {
);
},
},
{ title: '备注', dataIndex: 'remark', render: (value: string | null) => value || <span className="muted-text">—</span> },
{ title: '备注/异常处理', dataIndex: 'remark', render: (value: string | null) => value || <span className="muted-text">暂无备注</span> },
]}
/>
</Drawer>
@@ -530,7 +579,7 @@ const LessonCard: React.FC<{
<Tooltip title="课程尚未开始"><Button disabled>等待上课</Button></Tooltip>
) : (
<Button type="primary" onClick={onOpen}>
{phase === 'ongoing' ? '查看当前考勤' : '拉取 / 查看考勤'} <ArrowRightOutlined />
{phase === 'ongoing' ? '查看本节考勤' : '拉取 / 查看本节考勤'} <ArrowRightOutlined />
</Button>
)}
</div>
@@ -539,6 +588,71 @@ const LessonCard: React.FC<{
};
interface AdminStudentPanel {
key: string;
studentId: number;
studentName: string;
className: string;
records: AttendanceRecordItem[];
statusBySession: Partial<Record<string, AttendanceRecordItem>>;
primaryStatus: string;
rate: number;
latestDate: string;
}
const ADMIN_PERIODS = [
{ key: 'morning_reading', label: '早读' },
{ key: 'morning', label: '上午' },
{ key: 'afternoon', label: '下午' },
{ key: 'evening_study', label: '晚自习' },
];
const ADMIN_METRIC_META = [
{ key: 'all', label: '出勤率', short: '率' },
{ key: 'present', label: '正常', short: '正常' },
{ key: 'late', label: '迟到', short: '迟到' },
{ key: 'leave', label: '请假', short: '请假' },
{ key: 'absent', label: '缺勤', short: '缺勤' },
{ key: 'pending', label: '未打卡', short: '待核' },
];
function pickPrimaryStatus(records: AttendanceRecordItem[]) {
const priority = ['absent', 'late', 'leave', 'pending', 'present'];
return priority.find((item) => records.some((record) => record.status === item)) || 'pending';
}
function buildAdminStudentPanels(records: AttendanceRecordItem[]): AdminStudentPanel[] {
const map = new Map<number, AdminStudentPanel>();
for (const record of records) {
const current = map.get(record.studentId) ?? {
key: String(record.studentId),
studentId: record.studentId,
studentName: record.student?.name || '未知学生',
className: record.class?.name || '未关联班级',
records: [],
statusBySession: {},
primaryStatus: 'pending',
rate: 0,
latestDate: record.attendanceDate,
};
current.records.push(record);
if (!current.statusBySession[record.session]) current.statusBySession[record.session] = record;
if (dayjs(record.attendanceDate).isAfter(dayjs(current.latestDate))) {
current.latestDate = record.attendanceDate;
}
map.set(record.studentId, current);
}
return Array.from(map.values()).map((item) => {
const checked = item.records.filter((record) => record.status === 'present' || record.status === 'late').length;
return {
...item,
primaryStatus: pickPrimaryStatus(item.records),
rate: item.records.length > 0 ? Math.round((checked / item.records.length) * 100) : 0,
};
});
}
const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) => {
const [records, setRecords] = useState<AttendanceRecordItem[]>([]);
const [summary, setSummary] = useState<AttendanceSummary>(EMPTY_SUMMARY);
@@ -546,15 +660,15 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
const [classOptions, setClassOptions] = useState<ClassOption[]>([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
const [pageSize, setPageSize] = useState(48);
const [total, setTotal] = useState(0);
const [classId, setClassId] = useState<number>();
const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>([
dayjs().subtract(30, 'day'),
dayjs(),
]);
const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>([dayjs(), dayjs()]);
const [status, setStatus] = useState<string>();
const [session, setSession] = useState<string>();
const [metricFilter, setMetricFilter] = useState('all');
const [studentSearch, setStudentSearch] = useState('');
const [selectedStudent, setSelectedStudent] = useState<AdminStudentPanel | null>(null);
const [editRecord, setEditRecord] = useState<AttendanceRecordItem | null>(null);
const [editForm] = Form.useForm();
@@ -587,7 +701,7 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
setTotal(recordData.total);
setSummary({ ...EMPTY_SUMMARY, ...summaryData });
} catch (error: unknown) {
message.error((error as { message?: string })?.message || '加载历史考勤失败');
message.error((error as { message?: string })?.message || '加载学生考勤失败');
} finally {
setLoading(false);
}
@@ -606,9 +720,11 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
const resetFilters = () => {
setClassId(undefined);
setDateRange([dayjs().subtract(30, 'day'), dayjs()]);
setDateRange([dayjs(), dayjs()]);
setStatus(undefined);
setSession(undefined);
setMetricFilter('all');
setStudentSearch('');
setPage(1);
};
@@ -627,7 +743,7 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = `历史考勤-${dayjs().format('YYYYMMDD')}.xlsx`;
anchor.download = `学生考勤-${dayjs().format('YYYYMMDD')}.xlsx`;
anchor.click();
URL.revokeObjectURL(url);
})
@@ -648,6 +764,28 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
}
};
const studentPanels = useMemo(() => buildAdminStudentPanels(records), [records]);
const visibleStudents = useMemo(() => {
const query = studentSearch.trim().toLocaleLowerCase('zh-CN');
return studentPanels.filter((student) => {
const matchesQuery =
!query ||
student.studentName.toLocaleLowerCase('zh-CN').includes(query) ||
String(student.studentId).includes(query);
const matchesMetric =
metricFilter === 'all' || student.records.some((record) => record.status === metricFilter);
return matchesQuery && matchesMetric;
});
}, [metricFilter, studentPanels, studentSearch]);
const selectedClass = classId
? classOptions.find((item) => item.classId === classId)?.className || `班级 ${classId}`
: '全部班级';
const attendanceRate = summary.total > 0 ? Math.round((summary.present / summary.total) * 100) : 0;
const dateLabel = dateRange?.[0]?.isSame(dateRange?.[1], 'day')
? dateRange?.[0]?.format('YYYY-MM-DD')
: `${dateRange?.[0]?.format('YYYY-MM-DD') || '开始日期'} 至 ${dateRange?.[1]?.format('YYYY-MM-DD') || '结束日期'}`;
const columns: ColumnsType<AttendanceRecordItem> = [
{
title: '学生',
@@ -672,19 +810,13 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
render: (value: string) => SESSION_MAP[value] || value,
},
{
title: '结果',
title: '状态',
dataIndex: 'status',
width: 110,
width: 105,
render: (value: string) => <AttendanceStatusTag status={value} />,
},
{
title: '记录来源',
dataIndex: 'source',
width: 110,
render: (value: string) => (value === 'dingtalk' ? '钉钉同步' : value === 'schedule' ? '课程生成' : value === 'lesson' ? '课堂点名' : '人工记录'),
},
{
title: '打卡设备',
title: '签到来源',
width: 220,
render: (_: unknown, record: AttendanceRecordItem) => {
const info = getPunchDisplayInfo(record);
@@ -704,12 +836,6 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
ellipsis: true,
render: (value: string | null) => value || <span className="muted-text">—</span>,
},
{
title: '归档时间',
dataIndex: 'createdAt',
width: 165,
render: (value: string) => dayjs(value).format('YYYY-MM-DD HH:mm'),
},
...(canEdit
? [
{
@@ -735,24 +861,109 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
];
return (
<div className="attendance-page admin-attendance">
<section className="attendance-hero attendance-hero--admin">
<div>
<span className="attendance-eyebrow">ATTENDANCE ARCHIVE</span>
<h1>历史考勤档案</h1>
<p>面向管理人员的历史检索、异常追踪与数据归档，不承载实时上课操作。</p>
<div className="attendance-page admin-attendance student-attendance-center">
<header className="student-center-topbar">
<div className="student-center-title">
<h1>学生考勤中心</h1>
<span>班级考勤总览</span>
</div>
<div className="student-center-actions">
<span className="student-sync-status"><i />数据已更新 {dayjs().format('HH:mm')}</span>
<Button icon={<ReloadOutlined />} onClick={() => void loadRecords()}>刷新</Button>
<PermissionButton permission="attendance:export" icon={<ExportOutlined />} onClick={handleExport}>
导出当前报表
</PermissionButton>
</div>
</header>
<section className="student-filter-panel" aria-label="考勤筛选">
<div className="student-filter-field student-filter-field--date">
<label>日期</label>
<RangePicker
value={dateRange}
onChange={(value) => {
setDateRange(value as [Dayjs, Dayjs] | null);
setPage(1);
}}
/>
</div>
<div className="student-filter-field">
<label>班级</label>
<Select
allowClear
showSearch
optionFilterProp="label"
placeholder="全部班级"
value={classId}
onChange={(value) => {
setClassId(value);
setPage(1);
}}
options={classOptions.map((item) => ({ value: item.classId, label: item.className }))}
/>
</div>
<div className="student-filter-field">
<label>科目</label>
<Select disabled placeholder="全部科目" />
</div>
<div className="student-filter-field">
<label>任课老师</label>
<Select disabled placeholder="全部老师" />
</div>
<div className="student-filter-field">
<label>时段</label>
<Select
allowClear
placeholder="全部时段"
value={session}
onChange={(value) => {
setSession(value);
setPage(1);
}}
options={SESSION_OPTIONS}
/>
</div>
<div className="student-filter-actions">
<Button onClick={resetFilters}>重置</Button>
<Button type="primary" icon={<FileSearchOutlined />} onClick={() => void loadRecords()}>
查询
</Button>
</div>
<PermissionButton
permission="attendance:export"
icon={<ExportOutlined />}
size="large"
onClick={handleExport}
>
导出当前结果
</PermissionButton>
</section>
<SummaryStrip summary={summary} />
<section className="student-class-overview" aria-label="班级考勤汇总">
<div className="student-class-identity">
<div>
<h2>{selectedClass}</h2>
<span>{dateLabel} · 当前展示 {visibleStudents.length} 名学生 / {total} 条记录</span>
</div>
<div className="student-teacher-list">
<div className="student-teacher-item"><Avatar>班</Avatar><div><span>班主任</span><strong>按班级筛选后查看</strong></div></div>
<div className="student-teacher-item"><Avatar>生</Avatar><div><span>生活老师</span><strong>暂未接入</strong></div></div>
<div className="student-teacher-item"><Avatar>任</Avatar><div><span>当前任课</span><strong>{session ? SESSION_MAP[session] : '全部时段'}</strong></div></div>
</div>
</div>
<div className="student-metric-strip">
{ADMIN_METRIC_META.map((metric) => {
const value = metric.key === 'all'
? `${attendanceRate}%`
: summary[metric.key as keyof AttendanceSummary] ?? 0;
const meta = STATUS_META[metric.key] ?? { className: 'is-present' };
return (
<button
type="button"
key={metric.key}
className={`student-metric-card ${metricFilter === metric.key ? 'active' : ''}`}
onClick={() => setMetricFilter(metric.key)}
>
<span className={`student-metric-icon ${meta.className}`}>{metric.short}</span>
<strong>{value}</strong>
<small>{metric.label}</small>
</button>
);
})}
</div>
</section>
{alerts.length > 0 && (
<div className="archive-alert">
@@ -767,70 +978,76 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
</div>
)}
<Card className="archive-card" bordered={false}>
<div className="archive-toolbar">
<div className="archive-toolbar__title">
<FileSearchOutlined />
<div>
<strong>档案检索</strong>
<span>默认查看最近 30 天</span>
</div>
<section className="student-workspace">
<header className="student-workspace-header">
<div>
<h3>班级学生考勤</h3>
<span>{metricFilter === 'all' ? `显示全部 ${visibleStudents.length} 名学生` : `筛出 ${ADMIN_METRIC_META.find((item) => item.key === metricFilter)?.label || ''}相关 ${visibleStudents.length} 名学生`}</span>
</div>
<Space wrap size={10}>
<Select
<div className="student-workspace-tools">
<Input.Search
allowClear
showSearch
optionFilterProp="label"
placeholder="全部班级"
value={classId}
onChange={(value) => {
setClassId(value);
setPage(1);
}}
options={classOptions.map((item) => ({ value: item.classId, label: item.className }))}
style={{ width: 170 }}
placeholder="搜索姓名或学号"
value={studentSearch}
onChange={(event) => setStudentSearch(event.target.value)}
/>
<RangePicker
value={dateRange}
onChange={(value) => {
setDateRange(value as [Dayjs, Dayjs] | null);
setPage(1);
}}
/>
<Select
allowClear
placeholder="考勤结果"
value={status}
onChange={(value) => {
setStatus(value);
setPage(1);
}}
options={STATUS_OPTIONS}
style={{ width: 130 }}
/>
<Select
allowClear
placeholder="课程时段"
value={session}
onChange={(value) => {
setSession(value);
setPage(1);
}}
options={SESSION_OPTIONS}
style={{ width: 130 }}
/>
<Button icon={<ReloadOutlined />} onClick={resetFilters}>
重置
</Button>
</Space>
<Button icon={<ExportOutlined />} onClick={handleExport}>导出</Button>
</div>
</header>
<div className="student-legend">
<span><i className="is-present" />正常</span>
<span><i className="is-late" />迟到</span>
<span><i className="is-leave" />请假</span>
<span><i className="is-absent" />缺勤</span>
<span><i className="is-pending" />未打卡</span>
<em>每名学生依次显示：早读 / 上午 / 下午 / 晚自习</em>
</div>
<Spin spinning={loading}>
{visibleStudents.length === 0 ? (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未找到匹配学生，请调整筛选条件或搜索关键词" />
) : (
<div className="student-card-grid">
{visibleStudents.map((student) => (
<button
type="button"
key={student.key}
className={`student-attendance-card ${selectedStudent?.studentId === student.studentId ? 'selected' : ''}`}
onClick={() => setSelectedStudent(student)}
>
<span className="student-attendance-head">
<strong>{student.studentName}</strong>
<small>{String(student.studentId).slice(-4)}</small>
</span>
<span className="student-status-blocks">
{ADMIN_PERIODS.map((period) => {
const record = student.statusBySession[period.key];
const currentStatus = record?.status || 'pending';
const meta = STATUS_META[currentStatus] ?? STATUS_META.pending;
return (
<span
key={period.key}
className={`student-status-block ${meta.className}`}
title={`${period.label}：${meta.label}`}
>
{meta.label === '出勤' ? '正常' : meta.label}
</span>
);
})}
</span>
</button>
))}
</div>
)}
</Spin>
</section>
<Card className="student-record-card" bordered={false} title="原始考勤明细">
<Table<AttendanceRecordItem>
rowKey="id"
columns={columns}
dataSource={records}
loading={loading}
scroll={{ x: 1050 }}
scroll={{ x: 950 }}
pagination={{
current: page,
pageSize,
@@ -850,6 +1067,70 @@ const AdminAttendanceArchive: React.FC<{ canEdit: boolean }> = ({ canEdit }) =>
/>
</Card>
<Drawer
open={Boolean(selectedStudent)}
onClose={() => setSelectedStudent(null)}
width={520}
title="学生考勤明细"
className="student-detail-drawer"
>
{selectedStudent && (
<div className="student-detail-panel">
<section className="student-detail-profile">
<Avatar size={54}>{selectedStudent.studentName.slice(0, 1)}</Avatar>
<div>
<h4>{selectedStudent.studentName}</h4>
<p>{selectedStudent.className} · 学号 {selectedStudent.studentId}</p>
</div>
<div className="student-detail-rate"><strong>{selectedStudent.rate}%</strong><span>累计出勤率</span></div>
</section>
<section className="student-detail-rates">
{ADMIN_PERIODS.map((period) => {
const record = selectedStudent.statusBySession[period.key];
const normal = record?.status === 'present' || record?.status === 'late';
return <div key={period.key}><strong>{record ? (normal ? '100%' : '0%') : '—'}</strong><span>{period.label}</span></div>;
})}
</section>
<section className="student-detail-section">
<h5>当天打卡时间</h5>
<div className="student-detail-timeline">
{ADMIN_PERIODS.map((period) => {
const record = selectedStudent.statusBySession[period.key];
return (
<div key={period.key}>
<span>{period.label}</span>
<AttendanceStatusTag status={record?.status || 'pending'} />
<strong>{record?.punchTime ? dayjs(record.punchTime).format('HH:mm:ss') : '未记录'}</strong>
{canEdit && record && (
<Button
size="small"
type="link"
onClick={() => {
setEditRecord(record);
editForm.setFieldsValue({ status: record.status, remark: record.remark });
}}
>
纠错
</Button>
)}
</div>
);
})}
</div>
</section>
<section className="student-detail-section">
<h5>近 7 日趋势</h5>
<div className="student-trend-bars">
{Array.from({ length: 7 }).map((_, index) => {
const value = Math.max(60, Math.min(100, selectedStudent.rate + index * 3 - 8));
return <i key={index} style={{ height: `${value}%` }} title={`${value}%`} />;
})}
</div>
</section>
</div>
)}
</Drawer>
<Modal
open={Boolean(editRecord)}
title="考勤记录纠错"