fix(V0.2): OTA 发布说明改为 commit message, sha 单独展示; 版本附构建时间
Docker Build and Push / build-image (push) Successful in 1m2s
Docker Build and Push / build-image (push) Successful in 1m2s
- CI: notes 取 git log -1 的 commit message (标题+正文, 截断 400 字), commit sha 经 --commit 写入 manifest (不再把裸 sha 塞进发布说明) - build-ota: 新增 --commit 参数; latest.json 增加 commit 字段 - 服务端 /ota/check 与 /manifest-web 透传 commit 与 sequence - 我的页: 当前版本/新版本后附 seq 时间戳 (MM-dd HH:mm), 发布说明下方新增「提交」行显示短 sha
This commit is contained in:
jif2.zhang
+259
-247
@@ -1,247 +1,259 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Avatar, Button, List, ProgressBar, Switch, Toast } from 'antd-mobile'
|
||||
import { useAuth } from '../auth/AuthContext.jsx'
|
||||
import { APP_VERSION, BUILD_ID } from '../version.js'
|
||||
import {
|
||||
applyOtaUpdate,
|
||||
checkOtaUpdate,
|
||||
getCurrentVersionInfo,
|
||||
getOtaDevMode,
|
||||
getOtaVersionInfo,
|
||||
reloadApp,
|
||||
rollbackOta,
|
||||
setOtaDevMode,
|
||||
} from '../api/ota.js'
|
||||
|
||||
// "我" 页: 顶部 NavBar + 用户头像卡片 + 信息列表 + OTA 升级区
|
||||
// OTA 区:
|
||||
// - 显示当前 APP_VERSION (前端包, 对应内置 dist)
|
||||
// - 显示当前 hotswap 状态 (是否已应用覆盖包)
|
||||
// - [检查更新]: 走 checkOtaUpdate()
|
||||
// - [立即升级]: 走 applyOtaUpdate(), 完成后 reload
|
||||
// - [回滚]: 清除覆盖包, 回到内置 dist
|
||||
export default function MePage() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
// 顶部安全区与「我」页蓝色渐变头部无缝衔接: 给 body 打标记,
|
||||
// 由 CSS 让 .app-safe-top 也使用同一条渐变, 避免出现一条白边/色块把蓝色割断.
|
||||
// 离开本页时移除标记, 其他页恢复默认底色.
|
||||
useEffect(() => {
|
||||
document.body.classList.add('me-safe-top')
|
||||
return () => { document.body.classList.remove('me-safe-top') }
|
||||
}, [])
|
||||
|
||||
// OTA 状态
|
||||
const [otaState, setOtaState] = useState('idle') // idle | checking | available | none | downloading | ready | error
|
||||
const [otaInfo, setOtaInfo] = useState(null) // 检查结果中的 info
|
||||
const [otaVersion, setOtaVersion] = useState(null) // hotswap 当前激活的覆盖包版本
|
||||
const [progress, setProgress] = useState({ received: 0, total: 0 })
|
||||
const [error, setError] = useState('')
|
||||
// 判新模式: false(默认)=版本号比较, true=build sequence 比较; 值持久化在设备端
|
||||
const [devMode, setDevMode] = useState(() => getOtaDevMode())
|
||||
|
||||
// 进入页面时拉一次 hotswap 状态 (Tauri 内才需要, web 下 null 也无所谓)
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
getOtaVersionInfo().then((v) => {
|
||||
if (!cancelled) setOtaVersion(v)
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
async function onCheck() {
|
||||
setError('')
|
||||
setOtaState('checking')
|
||||
try {
|
||||
const r = await checkOtaUpdate({ devMode })
|
||||
if (r.available) {
|
||||
setOtaInfo(r.info)
|
||||
setOtaState('available')
|
||||
Toast.show({ icon: 'success', content: '发现新版本 v' + (r.info?.version || '') })
|
||||
} else {
|
||||
setOtaInfo(null)
|
||||
setOtaState('none')
|
||||
if (r.reason === 'same_version') {
|
||||
Toast.show({ content: '已是最新版本' })
|
||||
} else if (r.reason === 'no_package') {
|
||||
Toast.show({ content: '当前没有可用更新' })
|
||||
} else {
|
||||
Toast.show({ content: '当前没有可用更新' })
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e?.message || '检查失败')
|
||||
setOtaState('error')
|
||||
Toast.show({ icon: 'fail', content: '检查失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onApply() {
|
||||
setError('')
|
||||
setOtaState('downloading')
|
||||
setProgress({ received: 0, total: 0 })
|
||||
try {
|
||||
const newVer = await applyOtaUpdate((received, total) => {
|
||||
setProgress({ received, total })
|
||||
})
|
||||
Toast.show({ icon: 'success', content: '已下载 v' + newVer + ', 即将重启' })
|
||||
setOtaState('ready')
|
||||
// 给用户 1s 看提示, 然后 reload
|
||||
setTimeout(() => reloadApp(), 1000)
|
||||
} catch (e) {
|
||||
setError(e?.message || '升级失败')
|
||||
setOtaState('error')
|
||||
Toast.show({ icon: 'fail', content: '升级失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onRollback() {
|
||||
if (!window.confirm('确认回滚到内置版本?')) return
|
||||
try {
|
||||
await rollbackOta()
|
||||
Toast.show({ icon: 'success', content: '已回滚, 正在重启' })
|
||||
setTimeout(() => reloadApp(), 800)
|
||||
} catch (e) {
|
||||
Toast.show({ icon: 'fail', content: '回滚失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onLogout() {
|
||||
const confirmed = window.confirm('确定退出登录?')
|
||||
if (!confirmed) return
|
||||
await logout()
|
||||
Toast.show({ icon: 'success', content: '已退出' })
|
||||
navigate('/login', { replace: true })
|
||||
}
|
||||
|
||||
const cur = getCurrentVersionInfo()
|
||||
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
|
||||
const showProgress = otaState === 'downloading' && progress.total > 0
|
||||
const progressPct = showProgress ? Math.min(100, Math.round((progress.received / progress.total) * 100)) : 0
|
||||
|
||||
return (
|
||||
<div className="me-page">
|
||||
<div className="me-profile">
|
||||
<Avatar
|
||||
className="me-avatar"
|
||||
src={user?.avatar}
|
||||
style={{ '--size': '64px', '--border-radius': '50%' }}
|
||||
>
|
||||
{(user?.name || '?').slice(0, 1).toUpperCase()}
|
||||
</Avatar>
|
||||
<div className="me-name">{user?.name || '用户'}</div>
|
||||
<div className="me-email">{user?.email}</div>
|
||||
</div>
|
||||
|
||||
{/* OTA 升级区 */}
|
||||
<List className="me-list" mode="card" header="前端升级 (OTA)">
|
||||
<List.Item extra={'v' + cur.version + ' · ' + cur.build}>当前版本</List.Item>
|
||||
<List.Item extra={otaVersion?.active ? 'v' + (otaVersion.version || '?') : '内置'}>
|
||||
运行资源
|
||||
</List.Item>
|
||||
{/* 判新口径开关: 默认关(版本号比较), 打开后按 build sequence 比较 */}
|
||||
<List.Item
|
||||
extra={
|
||||
<Switch
|
||||
checked={devMode}
|
||||
onChange={(v) => {
|
||||
setDevMode(v)
|
||||
setOtaDevMode(v)
|
||||
// 切换口径后旧检查结果失效, 重置避免误导
|
||||
setOtaState('idle')
|
||||
setOtaInfo(null)
|
||||
setError('')
|
||||
Toast.show({ content: v ? '开发版本: 按构建号判新' : '正式口径: 按版本号判新' })
|
||||
}}
|
||||
/>
|
||||
}
|
||||
description={
|
||||
devMode
|
||||
? '按 build sequence 判新：每次构建都算新版本，便于开发联调'
|
||||
: '按版本号判新：仅当服务端版本号更高时才提示更新'
|
||||
}
|
||||
>
|
||||
开发版本
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<div className="me-ota-actions">
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
loading={otaState === 'checking'}
|
||||
disabled={otaState === 'downloading'}
|
||||
onClick={onCheck}
|
||||
>
|
||||
检查更新
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
color="danger"
|
||||
disabled={otaState !== 'available' || otaState === 'downloading'}
|
||||
onClick={onApply}
|
||||
>
|
||||
立即升级
|
||||
</Button>
|
||||
{isTauri && otaVersion?.active && (
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={onRollback}
|
||||
disabled={otaState === 'downloading'}
|
||||
>
|
||||
回滚
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</List.Item>
|
||||
{otaState === 'available' && otaInfo && (
|
||||
<List.Item extra={'v' + otaInfo.version}>
|
||||
新版本
|
||||
{otaInfo.bundle_size ? ` (${(otaInfo.bundle_size / 1024).toFixed(0)} KB)` : ''}
|
||||
</List.Item>
|
||||
)}
|
||||
{otaState === 'downloading' && (
|
||||
<List.Item>
|
||||
<div className="me-ota-progress">
|
||||
<div className="me-ota-progress-text">
|
||||
正在下载 {showProgress ? progressPct + '%' : ''}
|
||||
{' '}({(progress.received / 1024).toFixed(0)} KB
|
||||
{progress.total ? ' / ' + (progress.total / 1024).toFixed(0) + ' KB' : ''})
|
||||
</div>
|
||||
<ProgressBar percent={progressPct || undefined} />
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
{otaInfo?.notes && (
|
||||
<List.Item description={otaInfo.notes}>发布说明</List.Item>
|
||||
)}
|
||||
{error && (
|
||||
<List.Item>
|
||||
<span className="me-ota-error">{error}</span>
|
||||
</List.Item>
|
||||
)}
|
||||
{!isTauri && (
|
||||
<List.Item description="Web 端仅展示提示, 实际升级需在 Tauri 客户端进行">提示</List.Item>
|
||||
)}
|
||||
</List>
|
||||
|
||||
<List className="me-list" mode="card">
|
||||
<List.Item extra={'#' + (user?.id || '-')}>用户 ID</List.Item>
|
||||
<List.Item extra={user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}>
|
||||
注册时间
|
||||
</List.Item>
|
||||
<List.Item
|
||||
onClick={onLogout}
|
||||
clickable
|
||||
arrowIcon={false}
|
||||
className="me-logout"
|
||||
>
|
||||
退出登录
|
||||
</List.Item>
|
||||
</List>
|
||||
<div className="me-version">v{APP_VERSION} · build {BUILD_ID}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Avatar, Button, List, ProgressBar, Switch, Toast } from 'antd-mobile'
|
||||
import { useAuth } from '../auth/AuthContext.jsx'
|
||||
import { APP_VERSION, BUILD_ID } from '../version.js'
|
||||
import {
|
||||
applyOtaUpdate,
|
||||
checkOtaUpdate,
|
||||
getCurrentVersionInfo,
|
||||
getOtaDevMode,
|
||||
getOtaVersionInfo,
|
||||
reloadApp,
|
||||
rollbackOta,
|
||||
setOtaDevMode,
|
||||
} from '../api/ota.js'
|
||||
|
||||
// seq/build 时间戳 → 'MM-dd HH:mm' (sequence 为毫秒时间戳, build_id 形如 seq-<ms>)
|
||||
export function fmtSeqTime(v) {
|
||||
const ms = typeof v === 'string' && v.startsWith('seq-') ? Number(v.slice(4)) : Number(v)
|
||||
if (!Number.isFinite(ms) || ms <= 0) return ''
|
||||
const p = (n) => String(n).padStart(2, '0')
|
||||
const d = new Date(ms)
|
||||
return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
||||
}
|
||||
|
||||
// "我" 页: 顶部 NavBar + 用户头像卡片 + 信息列表 + OTA 升级区
|
||||
// OTA 区:
|
||||
// - 显示当前 APP_VERSION (前端包, 对应内置 dist)
|
||||
// - 显示当前 hotswap 状态 (是否已应用覆盖包)
|
||||
// - [检查更新]: 走 checkOtaUpdate()
|
||||
// - [立即升级]: 走 applyOtaUpdate(), 完成后 reload
|
||||
// - [回滚]: 清除覆盖包, 回到内置 dist
|
||||
export default function MePage() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
|
||||
// 顶部安全区与「我」页蓝色渐变头部无缝衔接: 给 body 打标记,
|
||||
// 由 CSS 让 .app-safe-top 也使用同一条渐变, 避免出现一条白边/色块把蓝色割断.
|
||||
// 离开本页时移除标记, 其他页恢复默认底色.
|
||||
useEffect(() => {
|
||||
document.body.classList.add('me-safe-top')
|
||||
return () => { document.body.classList.remove('me-safe-top') }
|
||||
}, [])
|
||||
|
||||
// OTA 状态
|
||||
const [otaState, setOtaState] = useState('idle') // idle | checking | available | none | downloading | ready | error
|
||||
const [otaInfo, setOtaInfo] = useState(null) // 检查结果中的 info
|
||||
const [otaVersion, setOtaVersion] = useState(null) // hotswap 当前激活的覆盖包版本
|
||||
const [progress, setProgress] = useState({ received: 0, total: 0 })
|
||||
const [error, setError] = useState('')
|
||||
// 判新模式: false(默认)=版本号比较, true=build sequence 比较; 值持久化在设备端
|
||||
const [devMode, setDevMode] = useState(() => getOtaDevMode())
|
||||
|
||||
// 进入页面时拉一次 hotswap 状态 (Tauri 内才需要, web 下 null 也无所谓)
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
getOtaVersionInfo().then((v) => {
|
||||
if (!cancelled) setOtaVersion(v)
|
||||
})
|
||||
return () => { cancelled = true }
|
||||
}, [])
|
||||
|
||||
async function onCheck() {
|
||||
setError('')
|
||||
setOtaState('checking')
|
||||
try {
|
||||
const r = await checkOtaUpdate({ devMode })
|
||||
if (r.available) {
|
||||
setOtaInfo(r.info)
|
||||
setOtaState('available')
|
||||
Toast.show({ icon: 'success', content: '发现新版本 v' + (r.info?.version || '') })
|
||||
} else {
|
||||
setOtaInfo(null)
|
||||
setOtaState('none')
|
||||
if (r.reason === 'same_version') {
|
||||
Toast.show({ content: '已是最新版本' })
|
||||
} else if (r.reason === 'no_package') {
|
||||
Toast.show({ content: '当前没有可用更新' })
|
||||
} else {
|
||||
Toast.show({ content: '当前没有可用更新' })
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e?.message || '检查失败')
|
||||
setOtaState('error')
|
||||
Toast.show({ icon: 'fail', content: '检查失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onApply() {
|
||||
setError('')
|
||||
setOtaState('downloading')
|
||||
setProgress({ received: 0, total: 0 })
|
||||
try {
|
||||
const newVer = await applyOtaUpdate((received, total) => {
|
||||
setProgress({ received, total })
|
||||
})
|
||||
Toast.show({ icon: 'success', content: '已下载 v' + newVer + ', 即将重启' })
|
||||
setOtaState('ready')
|
||||
// 给用户 1s 看提示, 然后 reload
|
||||
setTimeout(() => reloadApp(), 1000)
|
||||
} catch (e) {
|
||||
setError(e?.message || '升级失败')
|
||||
setOtaState('error')
|
||||
Toast.show({ icon: 'fail', content: '升级失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onRollback() {
|
||||
if (!window.confirm('确认回滚到内置版本?')) return
|
||||
try {
|
||||
await rollbackOta()
|
||||
Toast.show({ icon: 'success', content: '已回滚, 正在重启' })
|
||||
setTimeout(() => reloadApp(), 800)
|
||||
} catch (e) {
|
||||
Toast.show({ icon: 'fail', content: '回滚失败: ' + (e?.message || '') })
|
||||
}
|
||||
}
|
||||
|
||||
async function onLogout() {
|
||||
const confirmed = window.confirm('确定退出登录?')
|
||||
if (!confirmed) return
|
||||
await logout()
|
||||
Toast.show({ icon: 'success', content: '已退出' })
|
||||
navigate('/login', { replace: true })
|
||||
}
|
||||
|
||||
const cur = getCurrentVersionInfo()
|
||||
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
|
||||
const showProgress = otaState === 'downloading' && progress.total > 0
|
||||
const progressPct = showProgress ? Math.min(100, Math.round((progress.received / progress.total) * 100)) : 0
|
||||
|
||||
return (
|
||||
<div className="me-page">
|
||||
<div className="me-profile">
|
||||
<Avatar
|
||||
className="me-avatar"
|
||||
src={user?.avatar}
|
||||
style={{ '--size': '64px', '--border-radius': '50%' }}
|
||||
>
|
||||
{(user?.name || '?').slice(0, 1).toUpperCase()}
|
||||
</Avatar>
|
||||
<div className="me-name">{user?.name || '用户'}</div>
|
||||
<div className="me-email">{user?.email}</div>
|
||||
</div>
|
||||
|
||||
{/* OTA 升级区 */}
|
||||
<List className="me-list" mode="card" header="前端升级 (OTA)">
|
||||
<List.Item extra={'v' + cur.version + (fmtSeqTime(cur.build) ? ' · ' + fmtSeqTime(cur.build) : '')}>当前版本</List.Item>
|
||||
<List.Item extra={otaVersion?.active ? 'v' + (otaVersion.version || '?') : '内置'}>
|
||||
运行资源
|
||||
</List.Item>
|
||||
{/* 判新口径开关: 默认关(版本号比较), 打开后按 build sequence 比较 */}
|
||||
<List.Item
|
||||
extra={
|
||||
<Switch
|
||||
checked={devMode}
|
||||
onChange={(v) => {
|
||||
setDevMode(v)
|
||||
setOtaDevMode(v)
|
||||
// 切换口径后旧检查结果失效, 重置避免误导
|
||||
setOtaState('idle')
|
||||
setOtaInfo(null)
|
||||
setError('')
|
||||
Toast.show({ content: v ? '开发版本: 按构建号判新' : '正式口径: 按版本号判新' })
|
||||
}}
|
||||
/>
|
||||
}
|
||||
description={
|
||||
devMode
|
||||
? '按 build sequence 判新：每次构建都算新版本，便于开发联调'
|
||||
: '按版本号判新：仅当服务端版本号更高时才提示更新'
|
||||
}
|
||||
>
|
||||
开发版本
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<div className="me-ota-actions">
|
||||
<Button
|
||||
size="small"
|
||||
color="primary"
|
||||
loading={otaState === 'checking'}
|
||||
disabled={otaState === 'downloading'}
|
||||
onClick={onCheck}
|
||||
>
|
||||
检查更新
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
color="danger"
|
||||
disabled={otaState !== 'available' || otaState === 'downloading'}
|
||||
onClick={onApply}
|
||||
>
|
||||
立即升级
|
||||
</Button>
|
||||
{isTauri && otaVersion?.active && (
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
onClick={onRollback}
|
||||
disabled={otaState === 'downloading'}
|
||||
>
|
||||
回滚
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</List.Item>
|
||||
{otaState === 'available' && otaInfo && (
|
||||
<List.Item extra={'v' + otaInfo.version + (fmtSeqTime(otaInfo.sequence) ? ' · ' + fmtSeqTime(otaInfo.sequence) : '')}>
|
||||
新版本
|
||||
{otaInfo.bundle_size ? ` (${(otaInfo.bundle_size / 1024).toFixed(0)} KB)` : ''}
|
||||
</List.Item>
|
||||
)}
|
||||
{otaState === 'downloading' && (
|
||||
<List.Item>
|
||||
<div className="me-ota-progress">
|
||||
<div className="me-ota-progress-text">
|
||||
正在下载 {showProgress ? progressPct + '%' : ''}
|
||||
{' '}({(progress.received / 1024).toFixed(0)} KB
|
||||
{progress.total ? ' / ' + (progress.total / 1024).toFixed(0) + ' KB' : ''})
|
||||
</div>
|
||||
<ProgressBar percent={progressPct || undefined} />
|
||||
</div>
|
||||
</List.Item>
|
||||
)}
|
||||
{otaInfo?.notes && (
|
||||
<List.Item description={otaInfo.notes}>发布说明</List.Item>
|
||||
)}
|
||||
{otaInfo?.commit && (
|
||||
<List.Item extra={String(otaInfo.commit).slice(0, 10)}>提交</List.Item>
|
||||
)}
|
||||
{error && (
|
||||
<List.Item>
|
||||
<span className="me-ota-error">{error}</span>
|
||||
</List.Item>
|
||||
)}
|
||||
{!isTauri && (
|
||||
<List.Item description="Web 端仅展示提示, 实际升级需在 Tauri 客户端进行">提示</List.Item>
|
||||
)}
|
||||
</List>
|
||||
|
||||
<List className="me-list" mode="card">
|
||||
<List.Item extra={'#' + (user?.id || '-')}>用户 ID</List.Item>
|
||||
<List.Item extra={user?.createdAt ? new Date(user.createdAt).toLocaleDateString() : '-'}>
|
||||
注册时间
|
||||
</List.Item>
|
||||
<List.Item
|
||||
onClick={onLogout}
|
||||
clickable
|
||||
arrowIcon={false}
|
||||
className="me-logout"
|
||||
>
|
||||
退出登录
|
||||
</List.Item>
|
||||
</List>
|
||||
<div className="me-version">v{APP_VERSION} · build {BUILD_ID}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user