ota

src/api/ota.js

@@ -0,0 +1,150 @@
+// 前端 OTA 封装
+//   - Tauri 客户端: 直接用 tauri-plugin-hotswap-api (checkUpdate / applyUpdate / ...)
+//   - Web 浏览器:   只走我们自己的 /api/ota/manifest, 提示用户手动刷新 (Vite 资源指纹会失效)
+//
+// 设计原则:
+//   - Web 端只能"查 + 提示", 不能真下载应用, 避免误导
+//   - Tauri 端走 hotswap 插件的官方 API, 签名校验/回滚/资源替换全交给插件
+import { getApiBase, getToken } from './client.js'
+import { APP_VERSION, BUILD_ID } from '../version.js'
+
+// 判断是否在 Tauri WebView 内 (与 src/debug/pagespy.js 同样的判定)
+const inTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
+
+// 拼接绝对 URL: 在 Tauri (VITE_API_BASE 有值) 时直连, 否则同源
+function resolveUrl(p) {
+  const base = getApiBase()
+  return base ? base + p : p
+}
+
+// 当前版本信息 (前端展示用)
+export function getCurrentVersionInfo() {
+  return { version: APP_VERSION, build: BUILD_ID }
+}
+
+// 启动时: 确认当前资源可用 (Tauri only)
+//   失败/异常都不抛, 仅 console.warn
+export function initOta() {
+  if (!inTauri) return
+  // 动态 import: web 模式根本不打这个 chunk
+  import('tauri-plugin-hotswap-api')
+    .then((mod) => mod.notifyReady())
+    .then(() => console.log('[ota] notifyReady ok'))
+    .catch((e) => console.warn('[ota] notifyReady failed:', e))
+}
+
+// 检查更新
+//   返回统一结构, 调用方不关心是 Tauri 还是 web:
+//   {
+//     available: boolean,
+//     reason:    'no_package' | 'same_version' | 'ota_disabled' | 'unsupported' | 'ok',
+//     info:      { version, sequence, notes, mandatory, bundle_size }
+//   }
+export async function checkOtaUpdate() {
+  if (!inTauri) {
+    return checkOtaUpdateWeb()
+  }
+  return checkOtaUpdateTauri()
+}
+
+async function checkOtaUpdateTauri() {
+  // 走 hotswap 插件 (内部会带 sequence / platform / arch 等参数)
+  const { checkUpdate } = await import('tauri-plugin-hotswap-api')
+  const r = await checkUpdate()
+  if (!r.available) {
+    return { available: false, reason: 'no_package', info: r }
+  }
+  return {
+    available: true,
+    reason: 'ok',
+    info: {
+      version: r.version,
+      sequence: r.sequence,
+      notes: r.notes,
+      mandatory: r.mandatory,
+      bundle_size: r.bundle_size,
+    },
+  }
+}
+
+async function checkOtaUpdateWeb() {
+  // Web 端不能下载, 只能拿到版本号/构建号做比对, 提示用户刷新
+  try {
+    const res = await fetch(resolveUrl('/api/ota/manifest-web'), { method: 'GET' })
+    if (!res.ok) {
+      return { available: false, reason: 'unsupported', info: null }
+    }
+    const data = await res.json()
+    if (!data.available) return { available: false, reason: 'no_package', info: data }
+    if (data.build_id && data.build_id === BUILD_ID) {
+      return { available: false, reason: 'same_version', info: data }
+    }
+    return {
+      available: true,
+      reason: 'ok',
+      info: {
+        version: data.version,
+        notes: data.note || '',
+        // web 端没有强制/mandatory 等字段, 仅展示
+        mandatory: false,
+        bundle_size: data.size || 0,
+      },
+    }
+  } catch (e) {
+    console.warn('[ota] web check failed:', e)
+    return { available: false, reason: 'unsupported', info: null }
+  }
+}
+
+// 下载并应用更新 (Tauri only). 调用方负责 UI 提示和错误处理
+//   onProgress(received, total) 进度回调
+//   成功后必须 reload, 新资源才会生效
+export async function applyOtaUpdate(onProgress) {
+  if (!inTauri) {
+    throw new Error('OTA 升级仅在 Tauri 客户端可用, Web 端请直接刷新页面')
+  }
+  const mod = await import('tauri-plugin-hotswap-api')
+
+  // 注册一次性进度监听 (applyUpdate 期间触发)
+  let unlisten = null
+  if (onProgress) {
+    try {
+      unlisten = await mod.onDownloadProgress((p) => onProgress(p.downloaded, p.total))
+    } catch (e) {
+      console.warn('[ota] onDownloadProgress 监听失败:', e)
+    }
+  }
+
+  try {
+    const newVersion = await mod.applyUpdate()
+    return newVersion
+  } finally {
+    if (unlisten) {
+      try { unlisten() } catch { /* ignore */ }
+    }
+  }
+}
+
+// 回滚到内置 dist (Tauri only, 一般用于 OTA 出错时手动恢复)
+export async function rollbackOta() {
+  if (!inTauri) throw new Error('仅 Tauri 客户端可用')
+  const mod = await import('tauri-plugin-hotswap-api')
+  return mod.rollback()
+}
+
+// 取当前 OTA 状态 (Tauri only)
+export async function getOtaVersionInfo() {
+  if (!inTauri) return null
+  try {
+    const mod = await import('tauri-plugin-hotswap-api')
+    return await mod.getVersionInfo()
+  } catch (e) {
+    console.warn('[ota] getVersionInfo failed:', e)
+    return null
+  }
+}
+
+// reload 当前页 (新资源生效)
+export function reloadApp() {
+  window.location.reload()
+}

src/main.jsx

@@ -9,8 +9,14 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter } from 'react-router-dom'
 import App from './App.jsx'
 import { AuthProvider } from './auth/AuthContext.jsx'
+import { initOta } from './api/ota.js'
 import './styles/globals.css'
 
+// OTA 启动: 仅 Tauri 内生效
+//   - notifyReady: 确认当前资源可用, 否则下次启动自动回滚 (hotswap 插件行为)
+//   - 异步执行, 不阻塞 React 挂载
+initOta()
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <BrowserRouter>

src/pages/MePage.jsx

@@ -1,14 +1,101 @@
+import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Avatar, List, NavBar, Toast } from 'antd-mobile'
+import { Avatar, Button, List, NavBar, ProgressBar, Toast } from 'antd-mobile'
 import { useAuth } from '../auth/AuthContext.jsx'
 import { APP_VERSION, BUILD_ID } from '../version.js'
+import {
+  applyOtaUpdate,
+  checkOtaUpdate,
+  getCurrentVersionInfo,
+  getOtaVersionInfo,
+  reloadApp,
+  rollbackOta,
+} from '../api/ota.js'
 
-// 我的页: 顶部 NavBar + 用户头像卡片 + 信息列表
-// 使用 antd-mobile: NavBar / List / Avatar / Toast
+// "我" 页: 顶部 NavBar + 用户头像卡片 + 信息列表 + OTA 升级区
+// OTA 区:
+//   - 显示当前 APP_VERSION (前端包, 对应内置 dist)
+//   - 显示当前 hotswap 状态 (是否已应用覆盖包)
+//   - [检查更新]: 走 checkOtaUpdate()
+//   - [立即升级]: 走 applyOtaUpdate(), 完成后 reload
+//   - [回滚]: 清除覆盖包, 回到内置 dist
 export default function MePage() {
   const { user, logout } = useAuth()
   const navigate = useNavigate()
 
+  // 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('')
+
+  // 进入页面时拉一次 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()
+      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
@@ -17,6 +104,11 @@ export default function MePage() {
     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">
       <NavBar back={null} className="me-navbar">我的</NavBar>
@@ -31,6 +123,75 @@ export default function MePage() {
         <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>
+        <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() : '-'}>

src/styles/globals.css

@@ -265,3 +265,32 @@ input, textarea, select { font: inherit; }
 .chart-card .adm-card-body { padding: 12px 8px 8px; }
 .chart-title { font-size: 13px; font-weight: 600; color: var(--color-text); padding: 0 4px 6px; }
 .scroll-sentinel { text-align: center; padding: 14px 0 4px; color: var(--color-muted); font-size: 12px; }
+
+
+/* ================== OTA 升级区 (MePage) ================== */
+.me-ota-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.me-ota-actions .adm-button {
+  --adm-button-border-radius: 6px;
+  min-width: 84px;
+}
+.me-ota-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px 0;
+}
+.me-ota-progress-text {
+  font-size: 12px;
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+}
+.me-ota-error {
+  color: var(--color-danger);
+  font-size: 12px;
+  word-break: break-word;
+}