add docker hot update management

2026-09-29 19:36:36 +08:00 · 2026-06-26 13:02:40 +08:00
parent 65adca04df
commit 93be60ed99
16 changed files with 1023 additions and 72 deletions
@@ -1,6 +1,25 @@
 import { api } from './client'
 import type { AccessLog, Setting, User } from '../types'

+export interface SystemUpdateStatus {
+  image: string
+  watchtower_image?: string
+  container_id?: string
+  container_name?: string
+  current_image_id?: string
+  local_digest?: string
+  remote_digest?: string
+  docker_available: boolean
+  can_apply: boolean
+  update_available?: boolean
+  running: boolean
+  task_id?: string
+  message?: string
+  details?: string
+  checked_at?: string
+  started_at?: string
+}
+
 export const adminAPI = {
  listUsers: () => api.get<User[]>('/admin/users').then((r) => r.data),

@@ -24,4 +43,10 @@ export const adminAPI = {
    api.put('/admin/settings', { key, value }).then((r) => r.data),

  recentLogs: () => api.get<AccessLog[]>('/admin/logs').then((r) => r.data),
+
+  systemUpdateStatus: () => api.get<SystemUpdateStatus>('/admin/system/update').then((r) => r.data),
+
+  systemUpdateCheck: () => api.post<SystemUpdateStatus>('/admin/system/update/check').then((r) => r.data),
+
+  systemUpdateApply: () => api.post<SystemUpdateStatus>('/admin/system/update/apply').then((r) => r.data),
 }
@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom'
+import { useEffect, useRef } from 'react'
+import { Link, useLocation } from 'react-router-dom'
 import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronDown, LogOut, Settings, User as UserIcon, UserCog } from 'lucide-react'
 import clsx from 'clsx'
@@ -35,10 +36,44 @@ export function LayoutUserMenu({
  onSwitchProfile,
  onLogout,
 }: LayoutUserMenuProps) {
+  const location = useLocation()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const lastLocationRef = useRef(`${location.pathname}${location.search}`)
+
+  useEffect(() => {
+    if (!isOpen) return undefined
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const root = rootRef.current
+      const target = event.target
+      if (!root || !(target instanceof Node) || root.contains(target)) return
+      onClose()
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('pointerdown', handlePointerDown, true)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown, true)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen, onClose])
+
+  useEffect(() => {
+    const nextLocation = `${location.pathname}${location.search}`
+    if (lastLocationRef.current === nextLocation) return
+    lastLocationRef.current = nextLocation
+    if (isOpen) onClose()
+  }, [isOpen, location.pathname, location.search, onClose])
+
  return (
-    <div className="relative">
+    <div ref={rootRef} className="relative" data-testid="layout-user-menu">
      <button
        onClick={onToggle}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
        className="flex items-center gap-2.5 rounded-full border border-[var(--app-border)] p-1 pr-3 transition-all hover:bg-[var(--app-hover)]"
      >
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#111827] to-[#1f2937] font-display text-xs font-bold text-white shadow-sm">
@@ -55,55 +90,53 @@ export function LayoutUserMenu({

      <AnimatePresence>
        {isOpen && (
-          <>
-            <div className="fixed inset-0 z-10" onClick={onClose} />
-            <motion.div
-              initial={{ opacity: 0, y: 10, scale: 0.95 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 10, scale: 0.95 }}
-              transition={{ duration: 0.15 }}
-              className="absolute right-0 z-20 mt-3 w-56 origin-top-right rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-2 shadow-xl"
-            >
-              <UserMenuLink to="/profile" icon={<UserIcon size={16} />} label="个人基本信息" onClick={onClose} />
-              {user?.role === 'admin' && (
-                <UserMenuLink to="/admin" icon={<Settings size={16} />} label="管理主控制台" onClick={onClose} />
-              )}
-              <div className="my-1.5 border-t border-[var(--app-border)]" />
-              <div className="px-3 py-2">
-                <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
-                  当前观影 Profile
-                </p>
-                <div className="space-y-1">
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 10, scale: 0.95 }}
+            transition={{ duration: 0.15 }}
+            role="menu"
+            className="absolute right-0 z-50 mt-3 w-56 origin-top-right rounded-2xl border border-[var(--app-border)] bg-[var(--app-panel)] p-2 shadow-xl"
+          >
+            <UserMenuLink to="/profile" icon={<UserIcon size={16} />} label="个人基本信息" onClick={onClose} />
+            {user?.role === 'admin' && (
+              <UserMenuLink to="/admin" icon={<Settings size={16} />} label="管理主控制台" onClick={onClose} />
+            )}
+            <div className="my-1.5 border-t border-[var(--app-border)]" />
+            <div className="px-3 py-2">
+              <p className="mb-2 text-[10px] font-bold uppercase tracking-wider text-[var(--app-muted)]">
+                当前观影 Profile
+              </p>
+              <div className="space-y-1">
+                <button
+                  onClick={onUseDefaultProfile}
+                  className={profileButtonClass(!activeProfileId)}
+                >
+                  <span>账号默认</span>
+                  <span>{!activeProfileId ? '使用中' : ''}</span>
+                </button>
+                {profiles.map((profile) => (
                  <button
-                    onClick={onUseDefaultProfile}
-                    className={profileButtonClass(!activeProfileId)}
+                    key={profile.id}
+                    onClick={() => onSwitchProfile(profile)}
+                    className={profileButtonClass(activeProfileId === profile.id)}
                  >
-                    <span>账号默认</span>
-                    <span>{!activeProfileId ? '使用中' : ''}</span>
+                    <span className="truncate">{profile.name}</span>
+                    <span className="ml-2 shrink-0">{profile.allow_adult ? '成人' : '安全'}</span>
                  </button>
-                  {profiles.map((profile) => (
-                    <button
-                      key={profile.id}
-                      onClick={() => onSwitchProfile(profile)}
-                      className={profileButtonClass(activeProfileId === profile.id)}
-                    >
-                      <span className="truncate">{profile.name}</span>
-                      <span className="ml-2 shrink-0">{profile.allow_adult ? '成人' : '安全'}</span>
-                    </button>
-                  ))}
-                </div>
+                ))}
              </div>
-              <UserMenuLink to="/play-profiles" icon={<UserCog size={16} />} label="管理观影 Profile" onClick={onClose} />
-              <div className="my-1.5 border-t border-[var(--app-border)]" />
-              <button
-                onClick={onLogout}
-                className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-red-500 transition-colors hover:bg-[var(--app-danger-soft)]"
-              >
-                <LogOut size={16} />
-                <span>安全登出系统</span>
-              </button>
-            </motion.div>
-          </>
+            </div>
+            <UserMenuLink to="/play-profiles" icon={<UserCog size={16} />} label="管理观影 Profile" onClick={onClose} />
+            <div className="my-1.5 border-t border-[var(--app-border)]" />
+            <button
+              onClick={onLogout}
+              className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm text-red-500 transition-colors hover:bg-[var(--app-danger-soft)]"
+            >
+              <LogOut size={16} />
+              <span>安全登出系统</span>
+            </button>
+          </motion.div>
        )}
      </AnimatePresence>
    </div>
@@ -7,6 +7,7 @@ import { libraryAPI } from '../api/library'
 import type { Library, Setting } from '../types'
 import { SettingRow } from './SettingsRow'
 import { ALL_KEYS, GROUPS } from './settingsGroups'
+import { SystemUpdatePanel } from './SystemUpdatePanel'

 export function SettingsPage() {
  const [activeGroup, setActiveGroup] = useState(GROUPS[0].key)
@@ -104,31 +105,34 @@ export function SettingsPage() {
      )}

      {!loading && (
-        <form onSubmit={onSave} className="glass-panel space-y-4">
-          {group.description && <p className="text-xs text-sand-500">{group.description}</p>}
-          {group.items.map((it) => (
-            <SettingRow
-              key={it.key}
-              def={it}
-              value={values[it.key] ?? it.defaultValue ?? ''}
-              onChange={(v) => onChange(it.key, v)}
-              libraries={libraries}
-            />
-          ))}
-          <div className="flex items-center justify-between pt-2">
-            <span className="text-xs text-sand-500">
-              {dirty.size > 0 ? `有 ${dirty.size} 项未保存` : '所有更改已保存'}
-            </span>
-            <button
-              type="submit"
-              disabled={saving || dirty.size === 0}
-              className="neon-button disabled:opacity-50"
-            >
-              {saving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
-              保存
-            </button>
-          </div>
-        </form>
+        <div className="space-y-4">
+          {group.key === 'system-update' && <SystemUpdatePanel />}
+          <form onSubmit={onSave} className="glass-panel space-y-4">
+            {group.description && <p className="text-xs text-sand-500">{group.description}</p>}
+            {group.items.map((it) => (
+              <SettingRow
+                key={it.key}
+                def={it}
+                value={values[it.key] ?? it.defaultValue ?? ''}
+                onChange={(v) => onChange(it.key, v)}
+                libraries={libraries}
+              />
+            ))}
+            <div className="flex items-center justify-between pt-2">
+              <span className="text-xs text-sand-500">
+                {dirty.size > 0 ? `有 ${dirty.size} 项未保存` : '所有更改已保存'}
+              </span>
+              <button
+                type="submit"
+                disabled={saving || dirty.size === 0}
+                className="neon-button disabled:opacity-50"
+              >
+                {saving ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />}
+                保存
+              </button>
+            </div>
+          </form>
+        </div>
      )}
    </div>
  )
@@ -0,0 +1,246 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import toast from 'react-hot-toast'
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clock3,
+  Loader2,
+  PackageCheck,
+  RefreshCw,
+  RotateCw,
+  Server,
+} from 'lucide-react'
+
+import { adminAPI, type SystemUpdateStatus } from '../api/admin'
+
+type UpdateErrorPayload = {
+  response?: {
+    data?: {
+      error?: string
+      status?: SystemUpdateStatus
+    }
+  }
+}
+
+export function SystemUpdatePanel() {
+  const [status, setStatus] = useState<SystemUpdateStatus | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [checking, setChecking] = useState(false)
+  const [applying, setApplying] = useState(false)
+
+  const refreshStatus = useCallback(async () => {
+    const next = await adminAPI.systemUpdateStatus()
+    setStatus(next)
+    return next
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    adminAPI
+      .systemUpdateStatus()
+      .then((next) => {
+        if (!cancelled) setStatus(next)
+      })
+      .catch(() => undefined)
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!status?.running) return undefined
+    const id = window.setInterval(() => {
+      refreshStatus().catch(() => undefined)
+    }, 3_000)
+    return () => window.clearInterval(id)
+  }, [refreshStatus, status?.running])
+
+  const checkUpdate = async () => {
+    setChecking(true)
+    try {
+      const next = await adminAPI.systemUpdateCheck()
+      setStatus(next)
+      toast.success(next.message || '检查完成')
+    } catch (err: unknown) {
+      toast.error(apiErrorMessage(err, '检查更新失败'))
+    } finally {
+      setChecking(false)
+    }
+  }
+
+  const applyUpdate = async () => {
+    setApplying(true)
+    try {
+      const next = await adminAPI.systemUpdateApply()
+      setStatus(next)
+      toast.success(next.message || '更新任务已启动')
+    } catch (err: unknown) {
+      const payload = err as UpdateErrorPayload
+      if (payload.response?.data?.status) setStatus(payload.response.data.status)
+      toast.error(apiErrorMessage(err, '启动更新失败'))
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  const tone = updateTone(status)
+  const ToneIcon = tone.icon
+
+  return (
+    <section className="glass-panel space-y-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-200 bg-white text-brand-500">
+            <PackageCheck size={20} />
+          </div>
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="font-display text-xl font-semibold text-ink-600">Docker 热更新</h2>
+              <span className={`inline-flex items-center gap-1 rounded-lg border px-2 py-1 text-xs ${tone.className}`}>
+                <ToneIcon size={13} />
+                {tone.label}
+              </span>
+            </div>
+            <p className="mt-1 text-sm text-ink-50">
+              {loading ? '正在读取更新状态…' : status?.message || '尚未检查更新'}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <button
+            type="button"
+            className="btn-outline"
+            disabled={loading}
+            onClick={() => refreshStatus().catch(() => toast.error('刷新状态失败'))}
+            title="刷新状态"
+          >
+            {loading ? <Loader2 size={16} className="animate-spin" /> : <RefreshCw size={16} />}
+            刷新
+          </button>
+          <button type="button" className="btn-outline" disabled={checking || status?.running} onClick={checkUpdate}>
+            {checking ? <Loader2 size={16} className="animate-spin" /> : <CheckCircle2 size={16} />}
+            检查更新
+          </button>
+          <button
+            type="button"
+            className="btn-primary"
+            disabled={applying || status?.running || !status?.can_apply}
+            onClick={applyUpdate}
+          >
+            {applying || status?.running ? <Loader2 size={16} className="animate-spin" /> : <RotateCw size={16} />}
+            一键更新
+          </button>
+        </div>
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
+        <UpdateFact icon={Server} label="Docker" value={status?.docker_available ? '可连接' : '未就绪'} />
+        <UpdateFact label="应用镜像" value={status?.image || '-'} mono />
+        <UpdateFact label="当前容器" value={status?.container_name || status?.container_id || '-'} mono />
+        <UpdateFact label="最近检查" value={formatDate(status?.checked_at)} />
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <DigestRow label="本地摘要" digest={status?.local_digest} />
+        <DigestRow label="远端摘要" digest={status?.remote_digest} />
+      </div>
+
+      {status?.task_id && (
+        <div className="flex items-center justify-between gap-3 rounded-xl border border-gray-200 bg-gray-50/70 px-3 py-2 text-sm">
+          <span className="min-w-0 truncate text-ink-100">
+            后台任务：<span className="font-mono">{status.task_id}</span>
+          </span>
+          <Link className="btn-ghost shrink-0 px-3 py-2" to="/tasks">
+            查看任务
+          </Link>
+        </div>
+      )}
+
+      {status?.details && (
+        <pre className="max-h-56 overflow-auto rounded-xl border border-gray-200 bg-gray-50 p-3 font-mono text-xs leading-relaxed text-ink-100">
+          {status.details}
+        </pre>
+      )}
+    </section>
+  )
+}
+
+function UpdateFact({
+  icon: Icon,
+  label,
+  value,
+  mono = false,
+}: {
+  icon?: typeof Server
+  label: string
+  value: string
+  mono?: boolean
+}) {
+  return (
+    <div className="rounded-xl border border-gray-200 bg-gray-50/60 px-3 py-2">
+      <div className="flex items-center gap-1.5 text-xs text-sand-500">
+        {Icon && <Icon size={13} />}
+        {label}
+      </div>
+      <div className={`mt-1 truncate text-sm text-ink-600 ${mono ? 'font-mono' : ''}`} title={value}>
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function DigestRow({ label, digest }: { label: string; digest?: string }) {
+  return (
+    <div className="flex min-w-0 items-center justify-between gap-3 rounded-xl border border-gray-200 bg-gray-50/60 px-3 py-2">
+      <span className="shrink-0 text-xs text-sand-500">{label}</span>
+      <span className="min-w-0 truncate font-mono text-xs text-ink-100" title={digest || ''}>
+        {shortDigest(digest)}
+      </span>
+    </div>
+  )
+}
+
+function updateTone(status: SystemUpdateStatus | null): {
+  label: string
+  className: string
+  icon: typeof Clock3
+} {
+  if (!status) {
+    return { label: '读取中', className: 'border-gray-200 text-sand-500', icon: Clock3 }
+  }
+  if (status.running) {
+    return { label: '更新中', className: 'border-yellow-400/50 text-yellow-600', icon: Loader2 }
+  }
+  if (!status.docker_available || !status.can_apply) {
+    return { label: '不可更新', className: 'border-red-400/50 text-red-500', icon: AlertTriangle }
+  }
+  if (status.update_available === true) {
+    return { label: '有新版', className: 'border-emerald-400/50 text-emerald-600', icon: CheckCircle2 }
+  }
+  if (status.update_available === false) {
+    return { label: '已最新', className: 'border-gray-300 text-ink-100', icon: CheckCircle2 }
+  }
+  return { label: '可执行', className: 'border-brand-300/60 text-brand-500', icon: CheckCircle2 }
+}
+
+function shortDigest(digest?: string): string {
+  if (!digest) return '-'
+  return digest.length > 24 ? `${digest.slice(0, 18)}…${digest.slice(-8)}` : digest
+}
+
+function formatDate(value?: string): string {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleString()
+}
+
+function apiErrorMessage(err: unknown, fallback: string): string {
+  return (err as UpdateErrorPayload).response?.data?.error || fallback
+}
@@ -0,0 +1,33 @@
+import type { SettingGroup } from './settingsGroupTypes'
+
+export const systemUpdateSettingsGroup: SettingGroup = {
+  key: 'system-update',
+  label: '系统更新',
+  description: 'Docker 部署可在这里检查并拉取最新版镜像。',
+  items: [
+    {
+      key: 'system.update.image',
+      label: '应用镜像',
+      type: 'text',
+      defaultValue: 'ghcr.io/shukebta/mediastation-go:latest',
+      placeholder: 'ghcr.io/shukebta/mediastation-go:latest',
+      hint: '用于检查远端摘要；保持 latest 即可跟随主分支镜像。',
+    },
+    {
+      key: 'system.update.watchtower_image',
+      label: 'Watchtower 镜像',
+      type: 'text',
+      defaultValue: 'containrrr/watchtower:latest',
+      placeholder: 'containrrr/watchtower:latest',
+      hint: '默认使用一次性 Watchtower 更新当前容器。',
+    },
+    {
+      key: 'system.update.command',
+      label: '自定义更新命令',
+      type: 'textarea',
+      placeholder:
+        'docker run --rm -v /var/run/docker.sock:/var/run/docker.sock {{watchtower_image}} --run-once --cleanup {{container}}',
+      hint: '留空时使用默认命令。支持 {{image}}、{{watchtower_image}}、{{container}}、{{container_id}}、{{container_name}}。',
+    },
+  ],
+}
@@ -2,6 +2,7 @@ import { adultSettingsGroup } from './settingsGroupAccess'
 import { cloudUploadSettingsGroup } from './settingsGroupCloud'
 import { generalSettingsGroup, licenseSettingsGroup } from './settingsGroupGeneral'
 import { subscriptionSettingsGroup } from './settingsGroupSubscriptions'
+import { systemUpdateSettingsGroup } from './settingsGroupSystemUpdate'
 import type { SettingGroup } from './settingsGroupTypes'

 export type { SettingGroup } from './settingsGroupTypes'
@@ -9,6 +10,7 @@ export type { SettingGroup } from './settingsGroupTypes'
 export const GROUPS: SettingGroup[] = [
  generalSettingsGroup,
  licenseSettingsGroup,
+  systemUpdateSettingsGroup,
  subscriptionSettingsGroup,
  cloudUploadSettingsGroup,
  adultSettingsGroup,