Files
student_system/frontend/index.html
T
2026-09-21 19:22:31 +08:00

94 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>沃林 · 学生管理系统</title><meta name="theme-color" content="#7c4bad">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='10' fill='%23322044'/%3E%3Ctext x='5' y='29' fill='%23dec5f5' font-size='28'%3EW%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="/static/styles.css"><link rel="stylesheet" href="/static/workspace.css"><link rel="stylesheet" href="/static/ai.css"><link rel="stylesheet" href="/static/floating-assistant.css">
<script defer src="/static/app.js?v=employment-date-20260914-2"></script><script defer src="/static/ai.js"></script><script defer src="/static/floating-assistant.js"></script>
</head><body>
<aside class="sidebar"><a class="brand" href="#employment"><span class="brand-mark">W</span><span>沃林<span class="brand-sub">学生管理系统</span></span></a>
<div class="nav-label">工作空间</div><nav aria-label="主导航">
<a href="#students" class="nav-item"><span>▦</span>学生管理</a><a href="#classes" class="nav-item"><span>▥</span>班级管理</a>
<a href="#teachers" class="nav-item"><span>♧</span>教师管理</a><a href="#advisors" class="nav-item"><span>◎</span>顾问管理</a>
<a href="#scores" class="nav-item"><span>▧</span>成绩管理</a><a href="#employment" class="nav-item"><span>▤</span>就业管理</a>
<div class="nav-divider"></div><a href="#statistics" class="nav-item"><span>◴</span>统计分析</a><a href="#ai" class="nav-item"><span>✧</span>AI 助手<span class="ai-nav-badge">AI</span></a>
</nav><div class="side-bottom"><span class="side-dot"></span><div>学生成长工作台<small>教学管理 · 就业服务</small></div></div></aside>
<div class="workspace"><header class="topbar"><div class="crumb">学生发展中心 <span>/</span> <strong id="crumb-current">就业管理</strong></div><div class="top-actions"><span id="connection" class="connection">正在连接</span><a href="/docs" target="_blank" rel="noopener">接口文档 ↗</a><span class="avatar">沃</span></div></header>
<main><div class="page-heading"><div><div id="page-eyebrow" class="eyebrow">EMPLOYMENT WORKSPACE</div><h1 id="page-title">就业管理</h1><p id="page-description">记录每一次成长,跟进每一份职业机会。</p></div><button class="button primary" id="add-button">+ 新增就业信息</button></div>
<div id="page-error" class="error-banner" role="alert" hidden></div>
<section id="data-metrics" class="metrics" aria-label="实时数据概览"></section>
<section id="module-view" class="panel"><div class="panel-heading"><div><h2 id="list-title">就业信息</h2><span class="count-pill" id="record-count">— 条记录</span></div><div class="panel-actions"><button class="button subtle" id="ask-module">✧ 问问 AI</button><button class="button subtle" id="refresh-button">↻ 刷新数据</button></div></div>
<form id="filter-form" class="filter-bar"></form><div class="table-scroll"><table><thead id="table-head"></thead><tbody id="table-body"></tbody></table></div>
<div class="table-footer"><span id="list-summary">数据来自当前业务数据库</span><div class="pagination"><button class="icon-button" id="prev-page" aria-label="上一页">‹</button><span id="page-number">1 / 1</span><button class="icon-button" id="next-page" aria-label="下一页">›</button></div></div></section>
<section id="statistics-view" hidden><div class="insight-banner"><div><span class="eyebrow">DATA INSIGHTS</span><h2>从数据中,看见成长</h2><p>按班级、考试与就业情况比较,掌握每一段学习进程。</p></div><span class="insight-symbol">◴</span></div>
<div class="panel"><div class="panel-heading"><div><h2>统计分析</h2><span class="count-pill">实时计算</span></div><button class="button subtle" id="stats-refresh">↻ 刷新</button></div>
<form id="stats-form" class="stats-controls"><label>分析主题<select id="stats-kind"><option value="gender">班级性别分布</option><option value="class_scores">各班各次考试平均分</option><option value="score_rank">学生平均分排名</option><option value="fails">不及格次数统计</option><option value="salary">就业薪资排名</option><option value="duration">学生就业时长</option><option value="class_duration">各班平均就业时长</option><option value="teacher_classes">教师与班级关系</option></select></label><label id="stats-threshold-label" hidden>最少不及格次数<input id="stats-threshold" type="number" min="1" value="1"></label><button class="button primary">查看分析</button></form>
<p id="stats-note" class="stats-note"></p><div id="stats-chart" class="stats-chart"></div><div class="table-scroll"><table><thead id="stats-head"></thead><tbody id="stats-body"></tbody></table></div><div class="table-footer"><span id="stats-summary"></span><div class="pagination"><button class="icon-button" id="stats-prev" aria-label="统计上一页">‹</button><span id="stats-page">1 / 1</span><button class="icon-button" id="stats-next" aria-label="统计下一页">›</button></div></div></div></section>
<section id="ai-view" class="ai-layout" aria-label="AI助手" hidden>
<div class="ai-chat-panel">
<div class="ai-chat-header"><div class="ai-chat-identity"><span class="ai-emblem" aria-hidden="true">✧</span><div><h2>沃林 AI 助手</h2><small>全模块查询 · 关联分析 · 统计解答</small></div></div><button class="button subtle" id="ai-clear" type="button">清空问答</button></div>
<div id="ai-welcome" class="ai-welcome"><h3>今天想了解什么?</h3><p>用自然语言查询学生、班级、教师、顾问、成绩与就业信息,或了解项目需求。</p>
<div class="ai-suggestions"><button type="button" data-ai-question="查询每个班级的有效学生人数。">学生与班级<span>了解各班学生规模</span></button><button type="button" data-ai-question="查询所有有效教师和顾问的数量,并各列出前5条记录。">教师与顾问<span>查看教学与服务团队</span></button><button type="button" data-ai-question="按学生统计有效成绩的平均分,从高到低列出前5名。">考试成绩<span>掌握学习进展</span></button><button type="button" data-ai-question="查询有效就业记录中薪资最高的前3名学生,列出姓名、公司和薪资。">就业薪资<span>跟进职业发展</span></button><button type="button" data-ai-question="查询每个班级每次考试的平均分。">班级成绩分析<span>比较班级学习表现</span></button><button type="button" data-ai-question="查询教师ID为1的老师关联了哪些班级和学生。">教师关联<span>查看实际教学关系</span></button></div>
</div>
<p id="ai-empty-hint" class="ai-empty-hint">点击示例填入问题,再发送即可。</p>
<div id="ai-messages" class="ai-messages" role="log" aria-label="问答记录" aria-live="polite" aria-relevant="additions"></div>
<div id="ai-progress" class="ai-progress" role="status" hidden></div>
<form id="ai-form" class="ai-composer"><label for="ai-question">向 AI 助手提问</label><textarea id="ai-question" maxlength="2000" placeholder="例如:查询学生 ID 为 1 的就业信息。" required></textarea>
<div class="ai-composer-actions"><span><span id="ai-length">0 / 2000</span><small>Ctrl / ⌘ + Enter 发送</small></span><button class="button primary" id="ai-send" type="submit">发送问题 ↗</button></div>
<div id="ai-error" class="form-error" role="alert" hidden></div>
</form>
</div>
<aside class="ai-aside" aria-label="助手使用说明"><section class="ai-help"><h3>可以帮你做什么</h3><ul><li>查询六个模块的记录与关联信息</li><li>计算成绩、薪资排名和班级统计</li><li>解释系统功能与统计口径</li></ul><p>支持六个业务模块、教师关联关系与统计分析的只读查询。</p></section><section class="ai-help accent-help"><h3>让回答有据可查</h3><p id="ai-evidence-status">回答后可查看本次参考资料及实际查询结果。</p><p>每次问题独立处理,请写明学生或筛选条件。问答记录仅在当前页面保留,刷新后清空。</p></section></aside>
</section>
<footer class="page-footer"><span>沃林学生管理系统 · 让成长有迹可循</span><span id="last-update">正在获取最新数据</span></footer></main></div>
<dialog id="edit-dialog" aria-labelledby="edit-title"><form id="edit-form"><div class="dialog-heading"><div><span class="eyebrow">RECORD DETAILS</span><h2 id="edit-title"></h2></div><button type="button" class="icon-button" data-close="edit-dialog" aria-label="关闭表单">×</button></div><div class="dialog-body"><p id="edit-description" class="dialog-description"></p><div class="form-error" id="edit-error" role="alert" hidden></div><div id="edit-fields" class="form-grid"></div></div><div class="dialog-footer"><button type="button" class="button subtle" data-close="edit-dialog">取消</button><button class="button primary" id="save-button">保存信息</button></div></form></dialog>
<dialog id="delete-dialog" class="small-dialog" aria-labelledby="delete-title"><div class="dialog-body"><span class="delete-symbol">!</span><h2 id="delete-title">删除这条记录?</h2><p id="delete-description"></p><p class="field-hint">删除后将从有效列表隐藏,数据库记录仍保留。</p><div id="delete-error" class="form-error" role="alert" hidden></div></div><div class="dialog-footer"><button class="button subtle" data-close="delete-dialog">取消</button><button class="button danger" id="confirm-delete">确认删除</button></div></dialog>
<dialog id="detail-dialog" aria-labelledby="detail-title"><div class="dialog-heading"><h2 id="detail-title">记录详情</h2><button class="icon-button" data-close="detail-dialog" aria-label="关闭详情">×</button></div><div class="dialog-body" id="detail-content"></div></dialog>
<div class="toast" id="toast" role="status" hidden></div>
<section id="floating-ai-panel" class="floating-ai-panel" role="dialog" aria-modal="false" aria-labelledby="floating-ai-title" hidden>
<header class="floating-ai-header"><img src="/static/assets/assistant-avatar.png" alt=""><div><h2 id="floating-ai-title">沃林 AI 助手</h2><small>需求解答 · 真实数据查询</small></div><button id="floating-ai-close" class="icon-button" type="button" aria-label="收起快捷助手">×</button></header>
<div class="floating-ai-toolbar"><button id="floating-ai-clear" type="button">清空问答</button><button id="floating-ai-full" type="button">打开完整助手 ↗</button></div>
<div class="floating-ai-content"><div id="floating-ai-greeting" class="floating-ai-greeting"><strong>你好,有什么可以帮你?</strong>可以问我学生、班级、教师、顾问、成绩和就业信息。每次请写明要查询的对象。</div><div id="floating-ai-messages" role="log" aria-label="快捷问答记录" aria-live="polite" aria-relevant="additions"></div></div>
<div id="floating-ai-progress" class="floating-ai-progress" role="status" hidden>正在准备资料和回答,请稍候…</div>
<form id="floating-ai-form" class="floating-ai-form"><label for="floating-ai-question" class="floating-ai-label">快捷提问</label><textarea id="floating-ai-question" placeholder="例如:目前有多少条就业记录?" maxlength="1800" required></textarea><div id="floating-ai-error" class="floating-ai-error" role="alert" hidden></div><div><small><span id="floating-ai-count">0 / 1800</span> · Enter 发送,Shift + Enter 换行</small><button id="floating-ai-send" class="button" type="submit">发送 ↗</button></div></form>
</section>
<button id="floating-ai-trigger" class="floating-ai-trigger" type="button" aria-label="打开沃林AI快捷助手,可拖动头像调整位置" title="点击提问,拖动可移动位置" aria-controls="floating-ai-panel" aria-expanded="false"><img src="/static/assets/assistant-avatar.png" alt="" width="100" height="103"><span>问问 AI</span></button>
</body></html>