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 验收表里的实测记录。
This commit is contained in:
LoveChengke committed
1 parent
aad22df4fd
commit
9a38f86cd3
77 files changed
+8021
-899
No files matched your search
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user