feat(server,web,desktop,shared,deploy,docs): Linux 一键安装与 classhelper 运维命令、更新检查、图表去 echarts，版本统一 1.1.0

Linux 交付链（新增）
- deploy/install.sh：一键安装器（CLASSHELPER 大字 TUI、native/docker 双形态、向导选安装目录/
  端口/数据库/初始管理员密码）；识别 apt/yum/dnf 只补缺的依赖、建独立系统用户、下载内置 Node
  运行时（glibc < 2.28 的 CentOS 7 自动改用 unofficial-builds 的 glibc-217 构建）、幂等覆盖安装
  （保留 config.env 与 data/，不重置密钥）、全程写 /var/log/classhelper/install.log；
  `--check` 只体检（不需要 root）、`--yes` 无人值守、`--package` 支持内网离线分发。
- deploy/classhelper：运维命令 —— status / doctor / password / backup(list,restore,schedule) /
  upgrade / rollback / start|stop|restart|reload / logs / config / port / key rotate / uninstall /
  completion / help。特权操作一律校验 EUID，关键动作写 /var/log/classhelper/audit.log。
- deploy/tools/admin-cli.mjs：离线账号工具（改密、列账号、VACUUM INTO 一致性快照、哈希回滚），
  直连数据库 —— 服务停机也能救急，不需要先有一个能登录的账号。
- deploy/{classhelper.service,profile.d,logrotate.d,systemd}/ 模板 + Dockerfile.linux-package。
- scripts/dist-server.mjs 增加 --platform linux（根脚本 `pnpm dist:server:linux`），产物
  classhelper-server-linux-x64-<版本>.tar.gz + 同名 .sha256；新增 GitHub Actions workflow 在
  ubuntu runner 上构建并挂 Release（@libsql/linux-* 这类平台相关依赖只能在 Linux 上装）。
- docs/linux-deploy.md：安装 / 运维命令 / 升级回滚 / 备份恢复 / 排障 / 安全清单 /
  Ubuntu 22.04 与 Rocky 9 的验收清单。deploy/install-linux.sh 改为转发壳，不留两份实现。

三处必须知道的取舍（已写进 AGENTS.md §5 第 59 条）
- 配置真身在 /etc/classhelper/config.env，安装目录里的 .env 是指向它的软链：Web 端
  「数据库管理 → 一键切换」改写的是 <安装目录>/.env，而 systemd 注入的是同一份配置 ——
  两处不是同一个文件时，切换会「看起来成功、重启后又连回旧库」。classhelper doctor 有专门断言。
- 升级/回滚替换程序文件用「改名 + 就位」而不是 rm+cp：升级时正在运行的就是 bin/classhelper
  自己，直接删掉同名文件会让 bash 读到半个脚本。
- 交叉构建（在非 Linux 机器上打 Linux 包）会在包内写 .cross-built 标记、doctor 据此提示：
  已核对 @libsql/linux-x64-gnu 与 -musl 就位且无 win32 残留，但 prisma CLI 的原生 schema engine
  是宿主平台的，Web 端「数据库一键切换」那一步存疑；正式产物一律走 CI。

更新检查（此前只在工作区，本次一并提交）
- 服务端 modules/update：由服务端转发 GitHub Releases（Web 端 CSP 不允许直连），离线/限流/超时
  一律收敛成 ok:false + 一句人话，失败结果同样进缓存；?force=1 只对管理员生效（避免刷爆匿名限流）。
- 版本比较放 @classhelper/shared（compareVersions / isNewerVersion），三端共用；服务端版本号
  改由 lib/version.ts 读 package.json，不再在 app.ts 里写字面量。
- Web 端顶栏「检查更新」弹窗、客户端「关于」页的检查更新与诊断信息。

Web 端 / 客户端
- 成绩图表改用自包含的轻量组件（ScoreBarChart / ScoreLineChart），不再全量引入 echarts
  （原先 echarts 占桌面端渲染产物 1.12MB、Web 端 1.13MB）；柱状图是纯 HTML/CSS，折线图是
  viewBox SVG，均无 resize 监听。
- Element Plus 图标改为按需注册（两端各一份 icons.ts），新增 scripts/check-icons.mjs 静态门禁
  并挂进两端 build —— 漏注册的后果是界面静默渲染空白，只在控制台一条 warning。

版本号统一 1.1.0
- 5 份 package.json、deploy/package.runtime.json、.env.example 的 APP_VERSION、
  docker-compose 与两个 Dockerfile 的镜像标签、Linux 安装包名示例、README 首页版本；
- ClassIsland 插件 manifest.yml 与 BridgeService.PluginVersion 同步（verify:classisland-plugin
  有 manifest ↔ code 的一致性断言）；
- 刻意保持不变的是**历史性表述与举例**：docs/mysql.md 的「自 v1.0.0 起内置 MySQL 适配器」、
  shared/utils.ts 讲版本比较用的 1.0.0 / 1.0.0-fix、README 验收表里的实测记录。

packages/web-admin/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@classhelper/web-admin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "班级小助手 Web 管理端（Vue 3 + Vite + Element Plus）",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit -p tsconfig.json && vite build",
+    "build": "node ../../scripts/check-icons.mjs && vue-tsc --noEmit -p tsconfig.json && vite build",
     "build:only": "vite build",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
@@ -15,7 +15,6 @@
     "@classhelper/shared": "workspace:*",
     "@element-plus/icons-vue": "^2.3.2",
     "axios": "^1.20.0",
-    "echarts": "^6.1.0",
     "element-plus": "^2.14.5",
     "pinia": "^4.0.3",
     "socket.io-client": "^4.8.3",

packages/web-admin/src/api/index.ts

@@ -42,6 +42,7 @@ import {
   type TimeLayoutParsePreview,
   type UpdateClassAccountRequest,
   type UpdateClassRequest,
+  type UpdateInfo,
   type UpdateIntegrationDeviceRequest,
   type UserDto,
 } from '@classhelper/shared';
@@ -126,12 +127,8 @@ export const homeworkApi = {
     date?: string;
   }): Promise<HomeworkDto[]> => api.get(API_PATHS.homeworks, params),
   /** 哪些天有作业（日期选择器高亮） */
-  days: (params: {
-    classId?: string;
-    from?: string;
-    to?: string;
-    days?: number;
-  }): Promise<HomeworkDaysDto> => api.get(`${API_PATHS.homeworks}/days`, params),
+  days: (params: { classId?: string; from?: string; to?: string; days?: number }): Promise<HomeworkDaysDto> =>
+    api.get(`${API_PATHS.homeworks}/days`, params),
   detail: (id: string): Promise<HomeworkDto> => api.get(`${API_PATHS.homeworks}/${id}`),
   create: (payload: CreateHomeworkRequest): Promise<HomeworkDto> => api.post(API_PATHS.homeworks, payload),
   update: (id: string, payload: Partial<CreateHomeworkRequest>): Promise<HomeworkDto> =>
@@ -344,8 +341,10 @@ export const integrationApi = {
  */
 export const databaseApi = {
   status: (): Promise<DatabaseStatusDto> => api.get(`${API_PATHS.database}/status`),
-  testConnection: (payload: { provider: 'sqlite' | 'mysql'; url: string }): Promise<DatabaseConnectionTestDto> =>
-    api.post(`${API_PATHS.database}/test-connection`, payload),
+  testConnection: (payload: {
+    provider: 'sqlite' | 'mysql';
+    url: string;
+  }): Promise<DatabaseConnectionTestDto> => api.post(`${API_PATHS.database}/test-connection`, payload),
   listBackups: (): Promise<DatabaseBackupMetaDto[]> => api.get(`${API_PATHS.database}/backups`),
   createBackup: (): Promise<DatabaseBackupMetaDto> => api.post(`${API_PATHS.database}/backups`, {}),
   restoreBackup: (name: string): Promise<{ counts: Record<string, number> }> =>
@@ -366,3 +365,18 @@ export const databaseApi = {
   getSwitchJob: (jobId: string): Promise<DatabaseSwitchJobDto | null> =>
     api.get(`${API_PATHS.database}/switch/jobs/${encodeURIComponent(jobId)}`),
 };
+
+/**
+ * 更新检查：问服务端 GitHub 上有没有比本机新的版本。
+ *
+ * **Web 端不直连 GitHub** —— 服务端下发的 CSP `connect-src` 只放行 `'self'` 与 WebSocket
+ * （见 `middleware/security.ts`），浏览器直连 `api.github.com` 会被拦掉；
+ * 走服务端转发还顺带让所有管理员共享同一份缓存（匿名限流 60 次/小时/IP）。
+ *
+ * `ok:false` 是正常结果（机房没外网 / GitHub 限流），不是异常。
+ */
+export const updateApi = {
+  /** @param force 绕过服务端缓存；仅管理员生效 */
+  check: (force = false): Promise<UpdateInfo> =>
+    api.get(`${API_PATHS.update}/check${force ? '?force=1' : ''}`),
+};

packages/web-admin/src/components/ScoreBarChart.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * 轻量柱状图（纯 HTML/CSS，不依赖任何图表库）。
+ *
+ * 为什么不用 echarts：成绩页只需要「分组柱 + 数值标签 + 坐标轴」这点东西，
+ * 而 `import * as echarts from 'echarts'` 会给构建产物加 1.1MB。
+ *
+ * 实现要点（决定了这里为什么不需要 resize 监听）：
+ * - 柱高用**百分比**：`.bar-track` 是行方向 flex 里 `flex:1` 的子项，高度确定，
+ *   柱子的 `height: X%` 直接按它解析；
+ * - 刻度与网格线用**零高度 flex 行 + `justify-content: space-between`**：
+ *   零高度元素的中心正好落在 i/(N-1) 处，与柱状区上下边界精确对齐；
+ * - 纵轴刻度列与绘图区共用同一套上下留白（数值行 18px / 标签行 28px），因此永远对齐。
+ *
+ * 与桌面客户端那份（`packages/desktop-client/src/renderer/components/ScoreBarChart.vue`）
+ * 是刻意分开的两份：两端的设计令牌体系不同（`--ch-*` 浅/深色 vs `--el-*`），
+ * 合用一个组件反而要塞一堆条件样式。
+ */
+interface BarItem {
+  label: string;
+  value: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 每根柱：分类名 + 数值 */
+    items: BarItem[];
+    /** 柱色 */
+    color?: string;
+    /** 纵轴上限；不传时按数据最大值向上取整到「好看」的刻度 */
+    max?: number;
+    /** 数值单位（显示在刻度与柱顶数值后面） */
+    unit?: string;
+    /** 图表高度（px） */
+    height?: number;
+  }>(),
+  { color: '#409eff', max: undefined, unit: '', height: 220 },
+);
+
+/** 把数值向上取整到 1/2/5 × 10^n，让刻度落在整数上 */
+function niceCeil(value: number): number {
+  if (value <= 0) return 1;
+  const base = 10 ** Math.floor(Math.log10(value));
+  const normalized = value / base;
+  const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return step * base;
+}
+
+const axisMax = computed(() => {
+  if (props.max !== undefined) return props.max;
+  const dataMax = props.items.reduce((max, item) => Math.max(max, item.value), 0);
+  return niceCeil(dataMax);
+});
+
+/** 纵轴刻度（自上而下）：100% / 75% / 50% / 25% / 0%，去重后最多 5 条 */
+const ticks = computed(() => {
+  const values = [1, 0.75, 0.5, 0.25, 0].map((ratio) => Math.round(axisMax.value * ratio));
+  return [...new Set(values)];
+});
+
+function barHeight(value: number): string {
+  const ratio = axisMax.value > 0 ? value / axisMax.value : 0;
+  return `${Math.min(1, Math.max(0, ratio)) * 100}%`;
+}
+
+function formatValue(value: number): string {
+  return `${Number.isInteger(value) ? value : value.toFixed(1)}${props.unit}`;
+}
+</script>
+
+<template>
+  <div class="bar-chart" :style="{ height: `${height}px` }">
+    <div v-if="items.length === 0" class="bar-chart-empty">暂无数据</div>
+    <template v-else>
+      <div class="axis-y" aria-hidden="true">
+        <span v-for="tick in ticks" :key="tick" class="tick">{{ tick }}{{ unit }}</span>
+      </div>
+
+      <div class="plot">
+        <div class="gridlines" aria-hidden="true">
+          <span v-for="tick in ticks" :key="tick" class="gridline"></span>
+        </div>
+
+        <div class="bars">
+          <div v-for="item in items" :key="item.label" class="bar-col">
+            <div class="bar-value">{{ formatValue(item.value) }}</div>
+            <div class="bar-track">
+              <div
+                class="bar"
+                :style="{ height: barHeight(item.value), background: color }"
+                :title="`${item.label}：${formatValue(item.value)}`"
+              ></div>
+            </div>
+            <div class="bar-label" :title="item.label">{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.bar-chart {
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  width: 100%;
+}
+
+.bar-chart-empty {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 13px;
+  color: var(--el-text-color-placeholder);
+}
+
+.axis-y {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 18px 0 28px;
+}
+
+.tick {
+  height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--el-text-color-secondary);
+}
+
+.plot {
+  position: relative;
+  min-width: 0;
+}
+
+.gridlines {
+  position: absolute;
+  inset: 18px 0 28px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.gridline {
+  height: 0;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.bars {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  height: 100%;
+  padding: 0 6px;
+}
+
+.bar-col {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.bar-value {
+  flex: none;
+  height: 18px;
+  font-size: 11px;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--el-text-color-secondary);
+}
+
+.bar-track {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.bar {
+  width: 46%;
+  max-width: 46px;
+  border-radius: 4px 4px 0 0;
+  transition: height 0.2s ease;
+}
+
+.bar-label {
+  flex: none;
+  height: 28px;
+  padding-top: 6px;
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--el-text-color-secondary);
+}
+</style>

packages/web-admin/src/components/ScoreLineChart.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+/**
+ * 轻量折线图（内联 SVG + HTML 数据点，不依赖任何图表库）。
+ *
+ * 为什么不用 echarts：成绩页只需要一条「各科平均得分率」折线，
+ * 而 `import * as echarts from 'echarts'` 会给构建产物加 1.1MB。
+ *
+ * 实现要点：
+ * - 线画在 `viewBox="0 0 100 100"` + `preserveAspectRatio="none"` 的 SVG 里，
+ *   于是 viewBox 坐标 (x, y) 精确对应绘图区的 (x%, y%)；`vector-effect="non-scaling-stroke"`
+ *   保证非等比拉伸时线宽仍是 2px；
+ * - 数据点用**绝对定位的 HTML 圆点**（而不是 SVG `<circle>`），这样非等比拉伸下仍是正圆；
+ *   点位与线的坐标共用同一套百分比，天然对齐；
+ * - 横轴分类点落在**每个分组的中心**（`(i + 0.5) / n`），与 echarts 的 category 轴一致；
+ * - 全程零 resize 监听。
+ */
+interface LineItem {
+  label: string;
+  value: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: LineItem[];
+    color?: string;
+    /** 纵轴上限；不传时按数据最大值向上取整 */
+    max?: number;
+    unit?: string;
+    height?: number;
+  }>(),
+  { color: '#67c23a', max: undefined, unit: '%', height: 220 },
+);
+
+function niceCeil(value: number): number {
+  if (value <= 0) return 1;
+  const base = 10 ** Math.floor(Math.log10(value));
+  const normalized = value / base;
+  const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  return step * base;
+}
+
+const axisMax = computed(() => {
+  if (props.max !== undefined) return props.max;
+  const dataMax = props.items.reduce((max, item) => Math.max(max, item.value), 0);
+  return niceCeil(dataMax);
+});
+
+const ticks = computed(() => {
+  const values = [1, 0.75, 0.5, 0.25, 0].map((ratio) => Math.round(axisMax.value * ratio));
+  return [...new Set(values)];
+});
+
+/** 数据点：x / y 都是绘图区的百分比坐标（0~100） */
+const points = computed(() => {
+  const count = props.items.length;
+  const max = axisMax.value;
+  return props.items.map((item, index) => {
+    const ratio = max > 0 ? item.value / max : 0;
+    return {
+      label: item.label,
+      value: item.value,
+      x: ((index + 0.5) / count) * 100,
+      y: (1 - Math.min(1, Math.max(0, ratio))) * 100,
+    };
+  });
+});
+
+/**
+ * Catmull-Rom 转三次贝塞尔，复刻 echarts `smooth: true` 的观感。
+ * tension 0.2 与 echarts 的默认平滑强度接近。
+ */
+const linePath = computed(() => {
+  const list = points.value;
+  if (list.length < 2) return '';
+  const tension = 0.2;
+  const round = (value: number) => Number(value.toFixed(2));
+
+  let path = `M ${round(list[0]!.x)} ${round(list[0]!.y)}`;
+  for (let index = 0; index < list.length - 1; index += 1) {
+    const previous = list[index - 1] ?? list[index]!;
+    const current = list[index]!;
+    const next = list[index + 1]!;
+    const afterNext = list[index + 2] ?? next;
+
+    const control1x = current.x + (next.x - previous.x) * tension;
+    const control1y = current.y + (next.y - previous.y) * tension;
+    const control2x = next.x - (afterNext.x - current.x) * tension;
+    const control2y = next.y - (afterNext.y - current.y) * tension;
+
+    path += ` C ${round(control1x)} ${round(control1y)}, ${round(control2x)} ${round(control2y)}, ${round(
+      next.x,
+    )} ${round(next.y)}`;
+  }
+  return path;
+});
+
+/** 折线下方的面积：从终点垂到基线，再沿基线回到起点 */
+const areaPath = computed(() => {
+  const list = points.value;
+  if (list.length < 2) return '';
+  const first = list[0]!;
+  const last = list[list.length - 1]!;
+  return `${linePath.value} L ${Number(last.x.toFixed(2))} 100 L ${Number(first.x.toFixed(2))} 100 Z`;
+});
+
+function formatValue(value: number): string {
+  return `${Number.isInteger(value) ? value : value.toFixed(1)}${props.unit}`;
+}
+</script>
+
+<template>
+  <div class="line-chart" :style="{ height: `${height}px` }">
+    <div v-if="items.length === 0" class="line-chart-empty">暂无数据</div>
+    <template v-else>
+      <div class="axis-y" aria-hidden="true">
+        <span v-for="tick in ticks" :key="tick" class="tick">{{ tick }}{{ unit }}</span>
+      </div>
+
+      <div class="plot">
+        <div class="gridlines" aria-hidden="true">
+          <span v-for="tick in ticks" :key="tick" class="gridline"></span>
+        </div>
+
+        <svg class="lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+          <path v-if="areaPath" :d="areaPath" :fill="color" fill-opacity="0.12" />
+          <path
+            v-if="linePath"
+            :d="linePath"
+            fill="none"
+            :stroke="color"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            vector-effect="non-scaling-stroke"
+          />
+        </svg>
+
+        <div class="points">
+          <div v-for="point in points" :key="point.label" class="point-col">
+            <span
+              class="point"
+              :style="{ top: `${point.y}%`, background: color }"
+              :title="`${point.label}：${formatValue(point.value)}`"
+            ></span>
+          </div>
+        </div>
+
+        <div class="x-labels" aria-hidden="true">
+          <span v-for="point in points" :key="point.label" class="x-label" :title="point.label">
+            {{ point.label }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.line-chart {
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  width: 100%;
+}
+
+.line-chart-empty {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 13px;
+  color: var(--el-text-color-placeholder);
+}
+
+/* 上下留白与绘图区（.gridlines / .lines / .points 的 inset）严格一致 */
+.axis-y {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 18px 0 28px;
+}
+
+.tick {
+  height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+  color: var(--el-text-color-secondary);
+}
+
+.plot {
+  position: relative;
+  min-width: 0;
+}
+
+.gridlines,
+.lines,
+.points {
+  position: absolute;
+  inset: 18px 0 28px;
+}
+
+.gridlines {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+}
+
+.gridline {
+  height: 0;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.lines {
+  /* 尺寸完全由上面的 inset 决定（left/right/top/bottom 都给了），不要再写 width/height，
+     否则会和 inset 打架 */
+  pointer-events: none;
+}
+
+.points {
+  display: flex;
+}
+
+.point-col {
+  flex: 1 1 0;
+  min-width: 0;
+  position: relative;
+}
+
+.point {
+  position: absolute;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.x-labels {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 28px;
+  display: flex;
+  pointer-events: none;
+}
+
+.x-label {
+  flex: 1 1 0;
+  min-width: 0;
+  padding-top: 6px;
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--el-text-color-secondary);
+}
+</style>

packages/web-admin/src/components/UpdateCheckDialog.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { formatDate, type UpdateInfo } from '@classhelper/shared';
+import { updateApi } from '@/api';
+
+/**
+ * 「检查更新」弹窗（Web 管理端顶栏用户菜单）。
+ *
+ * 数据来自**服务端**的 `GET /api/update/check` —— 浏览器受服务端下发的 CSP `connect-src`
+ * 限制，不能直连 `api.github.com`；走服务端转发还顺带让所有管理员共享同一份缓存
+ * （GitHub 匿名限流 60 次/小时/IP）。
+ *
+ * `ok:false` 是**正常结果**（机房没有外网 / GitHub 限流 / 超时），不是错误 ——
+ * 界面按"暂时查不到"呈现，并给出重试入口，而不是弹一句红字报错。
+ */
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{ (event: 'update:modelValue', value: boolean): void }>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value),
+});
+
+const loading = ref(false);
+const info = ref<UpdateInfo | null>(null);
+
+/** 发布时间（本地格式），拿不到就不显示 */
+const publishedText = computed(() => {
+  const at = info.value?.publishedAt;
+  return at ? formatDate(at, true) : '';
+});
+
+/**
+ * 用户点菜单里的「检查更新」是一次明确的手动检查，因此**绕过服务端缓存**（force=1，仅管理员生效）；
+ * 打开弹窗时才查，而不是进页面就查 —— 没点菜单就不该产生任何外部请求。
+ */
+async function check(): Promise<void> {
+  loading.value = true;
+  try {
+    info.value = await updateApi.check(true);
+  } catch {
+    // 请求本身失败（如火并发的接口限流）：http.ts 已经弹过提示，这里只保证弹窗里不留空白
+    info.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openRelease(): void {
+  const url = info.value?.releaseUrl;
+  if (!url) return;
+  window.open(url, '_blank', 'noopener');
+}
+
+function formatBytes(size: number): string {
+  if (!Number.isFinite(size) || size <= 0) return '';
+  const mb = size / 1024 / 1024;
+  return mb >= 1 ? `${mb.toFixed(1)} MB` : `${Math.round(size / 1024)} KB`;
+}
+
+// 打开时才查：关闭后清空结果，下次打开重新查一遍（避免显示上一次的陈旧结论）
+watch(
+  () => props.modelValue,
+  (opened) => {
+    if (opened) void check();
+    else info.value = null;
+  },
+);
+</script>
+
+<template>
+  <el-dialog v-model="visible" title="检查更新" width="520px" data-test="update-dialog">
+    <div v-loading="loading" class="update-body">
+      <template v-if="info && info.ok">
+        <el-alert
+          v-if="info.hasUpdate"
+          type="success"
+          :closable="false"
+          show-icon
+          data-test="update-found"
+          :title="`发现新版本 v${info.latestVersion}`"
+          :description="`当前版本 v${info.currentVersion}${publishedText ? ` · 发布于 ${publishedText}` : ''}`"
+        />
+        <el-alert
+          v-else
+          type="info"
+          :closable="false"
+          show-icon
+          data-test="update-latest"
+          title="已是最新版本"
+          :description="`当前版本 v${info.currentVersion}（GitHub 最新为 v${info.latestVersion}）`"
+        />
+
+        <template v-if="info.hasUpdate">
+          <div v-if="info.releaseName" class="update-name">{{ info.releaseName }}</div>
+
+          <div v-if="info.notes" class="update-notes-label">更新说明</div>
+          <pre v-if="info.notes" class="update-notes">{{ info.notes }}</pre>
+
+          <template v-if="info.assets.length > 0">
+            <div class="update-notes-label">可下载文件</div>
+            <ul class="update-assets">
+              <li v-for="asset in info.assets" :key="asset.name">
+                <span class="update-asset-name">{{ asset.name }}</span>
+                <span v-if="formatBytes(asset.size)" class="update-asset-size">
+                  {{ formatBytes(asset.size) }}
+                </span>
+              </li>
+            </ul>
+          </template>
+        </template>
+      </template>
+
+      <!-- 查不到不是错误：机房没有外网、GitHub 限流都会走到这里 -->
+      <el-alert
+        v-else-if="!loading"
+        type="warning"
+        :closable="false"
+        show-icon
+        data-test="update-unavailable"
+        title="暂时无法检查更新"
+        :description="info?.error ?? '请稍后重试；若服务器没有外网，可手动打开项目 Release 页面查看'"
+      />
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">关闭</el-button>
+      <el-button :loading="loading" @click="check()">重新检查</el-button>
+      <el-button v-if="info?.ok && info.hasUpdate" type="primary" @click="openRelease">前往下载</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.update-body {
+  min-height: 72px;
+}
+
+.update-name {
+  margin-top: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.update-notes-label {
+  margin: 12px 0 6px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.update-notes {
+  margin: 0;
+  padding: 10px 12px;
+  max-height: 200px;
+  overflow: auto;
+  background: var(--el-fill-color-light);
+  border-radius: var(--ch-radius-sm);
+  font-size: 12px;
+  line-height: 1.7;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+  color: var(--el-text-color-regular);
+}
+
+.update-assets {
+  margin: 0;
+  padding-left: 18px;
+  font-size: 12px;
+  line-height: 1.9;
+  color: var(--el-text-color-regular);
+}
+
+.update-asset-size {
+  margin-left: 6px;
+  color: var(--el-text-color-secondary);
+}
+</style>

packages/web-admin/src/icons.ts

@@ -0,0 +1,74 @@
+import type { App } from 'vue';
+import {
+  ArrowDown,
+  Bell,
+  Calendar,
+  Coin,
+  Connection,
+  CopyDocument,
+  Document,
+  Guide,
+  Lock,
+  Menu,
+  Notebook,
+  Odometer,
+  Plus,
+  Refresh,
+  School,
+  Search,
+  SwitchButton,
+  Trophy,
+  Upload,
+  User,
+  UserFilled,
+  WarningFilled,
+} from '@element-plus/icons-vue';
+
+/**
+ * Element Plus 图标注册表（Web 管理端）。
+ *
+ * **为什么不 `import * as ElementPlusIconsVue` 全量注册**：
+ * 图标库有 293 个组件（实测全量打包 minified 203KB，实际用到的只有 22 个 / 59KB），
+ * 全量注册既把 144KB 死代码打进主 chunk，又要在启动时执行 293 次 `app.component()`。
+ *
+ * **为什么不改成模板里逐个 import**：本项目的图标是按**字符串名**引用的
+ * （菜单/路由配置里的 `icon: 'Odometer'`、按钮上的 `:icon="'Search'"`、
+ * `<component :is="item.icon">`），Element Plus 的 `el-button` / `el-menu-item`
+ * 会用 `<component :is="'Odometer'">` 去解析**全局组件名**，因此图标必须以全局组件存在。
+ *
+ * 新增视图时若用了新图标，`scripts/check-icons.mjs` 会在构建前报错（见 package.json 的 build 脚本），
+ * 不会静默渲染成空白。
+ */
+const APP_ICONS = {
+  ArrowDown,
+  Bell,
+  Calendar,
+  Coin,
+  Connection,
+  CopyDocument,
+  Document,
+  Guide,
+  Lock,
+  Menu,
+  Notebook,
+  Odometer,
+  Plus,
+  Refresh,
+  School,
+  Search,
+  SwitchButton,
+  Trophy,
+  Upload,
+  User,
+  UserFilled,
+  WarningFilled,
+} as const;
+
+/** 供 `scripts/check-icons.mjs` 读取的名单（构建期静态校验用） */
+export const APP_ICON_NAMES: readonly string[] = Object.keys(APP_ICONS).sort();
+
+export function registerAppIcons(app: App): void {
+  for (const [name, component] of Object.entries(APP_ICONS)) {
+    app.component(name, component);
+  }
+}

packages/web-admin/src/layouts/AdminLayout.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
 import { STORAGE_KEYS } from '@classhelper/shared';
 import { authApi } from '@/api';
+import UpdateCheckDialog from '@/components/UpdateCheckDialog.vue';
 import { useAuthStore } from '@/stores/auth';
 import { useRealtimeStore } from '@/stores/realtime';
 import { useResponsive } from '@/composables/useResponsive';
@@ -107,6 +108,10 @@ async function handleLogout(): Promise<void> {
   void router.push({ name: 'login' });
 }
 
+/* ------------------------------------------------------------ 检查更新 */
+/** 顶栏用户菜单「检查更新」弹窗 */
+const updateVisible = ref(false);
+
 /* ------------------------------------------------------------ 修改密码 */
 const passwordVisible = ref(false);
 const passwordFormRef = ref<FormInstance>();
@@ -295,6 +300,10 @@ const tourSteps = computed(() => [
                   <el-icon><Guide /></el-icon>
                   使用引导
                 </el-dropdown-item>
+                <el-dropdown-item divided data-test="update-check-entry" @click="updateVisible = true">
+                  <el-icon><Refresh /></el-icon>
+                  检查更新
+                </el-dropdown-item>
                 <el-dropdown-item divided @click="handleLogout">
                   <el-icon><SwitchButton /></el-icon>
                   退出登录
@@ -352,6 +361,9 @@ const tourSteps = computed(() => [
       </template>
     </el-dialog>
 
+    <!-- 检查更新：问服务端最新 Release（浏览器受 CSP 限制不能直连 GitHub），见组件内说明 -->
+    <UpdateCheckDialog v-model="updateVisible" />
+
     <!--
       新手引导：首次登录自动弹出（见 script 的 onMounted），头像菜单「使用引导」可重看。
       target 为 null 的步骤（首尾两步）由 el-tour 放到屏幕居中；其余步骤锚定真实 UI。

packages/web-admin/src/main.ts

@@ -2,19 +2,17 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import ElementPlus from 'element-plus';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import 'element-plus/dist/index.css';
 
 import App from './App.vue';
 import router from './router';
+import { registerAppIcons } from './icons';
 import '@/styles/index.css';
 
 const app = createApp(App);
 
-// 全量注册 Element Plus 图标，模板里可直接 <el-icon><Bell /></el-icon>
-for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(name, component);
-}
+// 按需注册图标（见 icons.ts：只注册用到的那些，而不是全量 293 个）
+registerAppIcons(app);
 
 app.use(createPinia());
 app.use(router);

packages/web-admin/src/views/GradesView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import * as echarts from 'echarts';
 import {
   SOCKET_EVENTS,
   SUBJECT_CATALOG,
@@ -15,6 +14,8 @@ import {
   type StudentDto,
 } from '@classhelper/shared';
 import { classApi, courseApi, gradeApi } from '@/api';
+import ScoreBarChart from '@/components/ScoreBarChart.vue';
+import ScoreLineChart from '@/components/ScoreLineChart.vue';
 import TableImportDialog from '@/components/TableImportDialog.vue';
 import { useAuthStore } from '@/stores/auth';
 import { useRealtimeStore } from '@/stores/realtime';
@@ -41,10 +42,15 @@ const students = ref<StudentDto[]>([]);
 const stats = ref<GradeStats | null>(null);
 const filter = reactive({ classId: '', courseId: '', examName: '' });
 
-const levelChartRef = ref<HTMLDivElement>();
-const courseChartRef = ref<HTMLDivElement>();
-const levelChart = ref<ReturnType<typeof echarts.init> | null>(null);
-const courseChart = ref<ReturnType<typeof echarts.init> | null>(null);
+/** 等级分布柱状图的数据（count 是整数，纵轴上限交给组件按数据自动取整） */
+const levelItems = computed(() =>
+  (stats.value?.distribution ?? []).map((item) => ({ label: `${item.level} 等`, value: item.count })),
+);
+
+/** 各课程平均得分率折线图的数据 */
+const courseItems = computed(() =>
+  (stats.value?.byCourse ?? []).map((item) => ({ label: item.courseName, value: item.averagePercent })),
+);
 
 const averagePercent = computed(() => {
   if (grades.value.length === 0) return 0;
@@ -79,7 +85,6 @@ async function loadGrades(): Promise<void> {
     if (requestId !== gradesRequestId) return;
     grades.value = list;
     stats.value = statistic;
-    renderCharts();
   } finally {
     if (requestId === gradesRequestId) loading.value = false;
   }
@@ -94,55 +99,15 @@ async function onClassChange(): Promise<void> {
   await loadTeacherSuggestions();
 }
 
-/* ------------------------------------------------------------ 图表 */
-
-function renderCharts(): void {
-  const statistic = stats.value;
-  if (!statistic) return;
-
-  if (levelChartRef.value) {
-    levelChart.value ??= echarts.init(levelChartRef.value);
-    levelChart.value.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: 40, right: 16, top: 30, bottom: 28 },
-      xAxis: { type: 'category', data: statistic.distribution.map((item) => `${item.level} 等`) },
-      yAxis: { type: 'value', minInterval: 1 },
-      series: [
-        {
-          type: 'bar',
-          barWidth: '46%',
-          itemStyle: { color: '#409eff', borderRadius: [4, 4, 0, 0] },
-          data: statistic.distribution.map((item) => item.count),
-        },
-      ],
-    });
-  }
-
-  if (courseChartRef.value) {
-    courseChart.value ??= echarts.init(courseChartRef.value);
-    courseChart.value.setOption({
-      tooltip: { trigger: 'axis' },
-      grid: { left: 40, right: 16, top: 30, bottom: 28 },
-      xAxis: { type: 'category', data: statistic.byCourse.map((item) => item.courseName) },
-      yAxis: { type: 'value', max: 100, name: '得分率%' },
-      series: [
-        {
-          type: 'line',
-          smooth: true,
-          symbolSize: 8,
-          areaStyle: { opacity: 0.12 },
-          itemStyle: { color: '#67c23a' },
-          data: statistic.byCourse.map((item) => item.averagePercent),
-        },
-      ],
-    });
-  }
-}
-
-function handleResize(): void {
-  levelChart.value?.resize();
-  courseChart.value?.resize();
-}
+/* ------------------------------------------------------------ 图表
+ *
+ * 等级分布与各课程得分率原先用 echarts 渲染（`import * as echarts from 'echarts'`
+ * 会给构建产物加 1.1MB）。现在换成两个自包含的轻量组件：
+ *   - ScoreBarChart：纯 HTML/CSS 柱状图
+ *   - ScoreLineChart：内联 SVG 折线 + HTML 数据点
+ * 两者都是响应式的（百分比布局），因此不再需要 resize 监听，
+ * 数据也直接从上面两个 computed 流过去，不需要手写 setOption。
+ */
 
 /* ------------------------------------------------------------ 统一科目
  *
@@ -299,14 +264,10 @@ watch(
 onMounted(async () => {
   await loadClasses();
   await loadGrades();
-  window.addEventListener('resize', handleResize);
   realtime.on(SOCKET_EVENTS.gradeUpdated, onGradeEvent);
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-  levelChart.value?.dispose();
-  courseChart.value?.dispose();
   realtime.off(SOCKET_EVENTS.gradeUpdated, onGradeEvent);
 });
 </script>
@@ -361,13 +322,13 @@ onUnmounted(() => {
       <el-col :xs="24" :md="9">
         <el-card shadow="never">
           <template #header><span>等级分布</span></template>
-          <div ref="levelChartRef" class="chart"></div>
+          <ScoreBarChart :items="levelItems" />
         </el-card>
       </el-col>
       <el-col :xs="24" :md="9">
         <el-card shadow="never">
           <template #header><span>各课程平均得分率</span></template>
-          <div ref="courseChartRef" class="chart"></div>
+          <ScoreLineChart :items="courseItems" :max="100" />
         </el-card>
       </el-col>
     </el-row>
@@ -503,10 +464,3 @@ onUnmounted(() => {
     />
   </div>
 </template>
-
-<style scoped>
-.chart {
-  height: 220px;
-  width: 100%;
-}
-</style>