feat: 更新版本升级模态框和状态徽章组件，支持通道切换和点击事件

atsf_server/web/components/layout/dashboard-topbar.tsx

@@ -186,20 +186,20 @@ export function DashboardTopbar() {
     upgradeMutation.mutate(selectedReleaseChannel);
   };
 
-  const handleCheckStableRelease = () => {
-    setSelectedReleaseChannel('stable');
+  const handleCheckRelease = () => {
     setVersionFeedback(null);
     if (isRoot) {
-      void stableReleaseQuery.refetch();
+      if (selectedReleaseChannel === 'preview') {
+        void previewReleaseQuery.refetch();
+      } else {
+        void stableReleaseQuery.refetch();
+      }
     }
   };
 
-  const handleCheckPreviewRelease = () => {
-    setSelectedReleaseChannel('preview');
+  const handleReleaseChannelChange = (channel: ReleaseChannel) => {
+    setSelectedReleaseChannel(channel);
     setVersionFeedback(null);
-    if (isRoot) {
-      void previewReleaseQuery.refetch();
-    }
   };
 
   const handleUploadBinary = (binary: File) => {
@@ -347,8 +347,8 @@ export function DashboardTopbar() {
         isUpgrading={upgradeMutation.isPending}
         isUploadingBinary={uploadBinaryMutation.isPending}
         isConfirmingManualUpgrade={confirmManualUpgradeMutation.isPending}
-        onCheckStable={handleCheckStableRelease}
-        onCheckPreview={handleCheckPreviewRelease}
+        onChannelChange={handleReleaseChannelChange}
+        onCheck={handleCheckRelease}
         onUpgrade={handleUpgrade}
         onUploadBinary={handleUploadBinary}
         onConfirmManualUpgrade={handleConfirmManualUpgrade}

atsf_server/web/components/ui/status-badge.tsx

@@ -1,36 +1,51 @@
-import { cn } from '@/lib/utils/cn';
-
-const variantClasses = {
-  success:
-    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
-  warning:
-    'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]',
-  danger:
-    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
-  info:
-    'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
-} as const;
-
-interface StatusBadgeProps {
-  label: string;
-  variant?: keyof typeof variantClasses;
-  className?: string;
-}
-
-export function StatusBadge({
-  label,
-  variant = 'info',
-  className,
-}: StatusBadgeProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
-        variantClasses[variant],
-        className,
-      )}
-    >
-      {label}
-    </span>
-  );
-}
+import { cn } from '@/lib/utils/cn';
+
+const variantClasses = {
+  success:
+    'border-[var(--status-success-border)] bg-[var(--status-success-soft)] text-[var(--status-success-foreground)]',
+  warning:
+    'border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] text-[var(--status-warning-foreground)]',
+  danger:
+    'border-[var(--status-danger-border)] bg-[var(--status-danger-soft)] text-[var(--status-danger-foreground)]',
+  info: 'border-[var(--status-info-border)] bg-[var(--status-info-soft)] text-[var(--status-info-foreground)]',
+} as const;
+
+interface StatusBadgeProps {
+  label: string;
+  variant?: keyof typeof variantClasses;
+  className?: string;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function StatusBadge({
+  label,
+  variant = 'info',
+  className,
+  onClick,
+  disabled = false,
+}: StatusBadgeProps) {
+  const badgeClassName = cn(
+    'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium tracking-wide',
+    variantClasses[variant],
+    onClick
+      ? 'cursor-pointer transition hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-60'
+      : undefined,
+    className,
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={badgeClassName}
+      >
+        {label}
+      </button>
+    );
+  }
+
+  return <span className={badgeClassName}>{label}</span>;
+}

atsf_server/web/features/update/components/version-upgrade-modal.tsx

@@ -40,8 +40,8 @@ interface VersionUpgradeModalProps {
   isUpgrading: boolean;
   isUploadingBinary: boolean;
   isConfirmingManualUpgrade: boolean;
-  onCheckStable: () => void;
-  onCheckPreview: () => void;
+  onChannelChange: (channel: ReleaseChannel) => void;
+  onCheck: () => void;
   onUpgrade: () => void;
   onUploadBinary: (file: File) => void;
   onConfirmManualUpgrade: () => void;
@@ -78,8 +78,8 @@ export function VersionUpgradeModal({
   isUpgrading,
   isUploadingBinary,
   isConfirmingManualUpgrade,
-  onCheckStable,
-  onCheckPreview,
+  onChannelChange,
+  onCheck,
   onUpgrade,
   onUploadBinary,
   onConfirmManualUpgrade,
@@ -88,6 +88,13 @@ export function VersionUpgradeModal({
   const [selectedBinary, setSelectedBinary] = useState<File | null>(null);
   const selectedChannelLabel =
     selectedChannel === 'preview' ? '预览版' : '正式版';
+  const toggleChannel = () => {
+    onChannelChange(selectedChannel === 'preview' ? 'stable' : 'preview');
+  };
+  const canConfirmManualUpgrade = Boolean(
+    uploadedBinary?.ready_to_upgrade && uploadedBinary.upload_token,
+  );
+  const showConfirmManualUpgradeAction = canConfirmManualUpgrade;
 
   useEffect(() => {
     if (!isOpen) {
@@ -102,78 +109,6 @@ export function VersionUpgradeModal({
       title="版本"
       description="默认检查正式版更新；你也可以手动检查 preview 发布并选择升级，或上传 Server 二进制确认升级。升级开始后服务会短暂重启。"
       size="lg"
-      footer={
-        canUpgrade ? (
-          <div className="flex flex-wrap justify-end gap-3">
-            <SecondaryButton
-              type="button"
-              onClick={onCheckStable}
-              disabled={isChecking || isUpgrading || isUploadingBinary}
-            >
-              {isChecking && selectedChannel === 'stable'
-                ? '检查中...'
-                : '检查正式版'}
-            </SecondaryButton>
-            <SecondaryButton
-              type="button"
-              onClick={onCheckPreview}
-              disabled={isChecking || isUpgrading || isUploadingBinary}
-            >
-              {isChecking && selectedChannel === 'preview'
-                ? '检查中...'
-                : '检查预览版'}
-            </SecondaryButton>
-            <PrimaryButton
-              type="button"
-              onClick={() => {
-                if (selectedBinary) {
-                  onUploadBinary(selectedBinary);
-                }
-              }}
-              disabled={
-                !selectedBinary ||
-                isUploadingBinary ||
-                isConfirmingManualUpgrade
-              }
-            >
-              {isUploadingBinary ? '上传检查中...' : '上传并检查'}
-            </PrimaryButton>
-            <PrimaryButton
-              type="button"
-              onClick={onConfirmManualUpgrade}
-              disabled={
-                !uploadedBinary?.ready_to_upgrade ||
-                !uploadedBinary.upload_token ||
-                isConfirmingManualUpgrade ||
-                isUploadingBinary ||
-                isUpgrading
-              }
-            >
-              {isConfirmingManualUpgrade ? '升级中...' : '确认手动升级'}
-            </PrimaryButton>
-            <PrimaryButton
-              type="button"
-              onClick={onUpgrade}
-              disabled={
-                !release?.has_update ||
-                release.in_progress ||
-                isUpgrading ||
-                !release.upgrade_supported ||
-                isUploadingBinary ||
-                isConfirmingManualUpgrade
-              }
-            >
-              {isUpgrading
-                ? '升级中...'
-                : release?.in_progress
-                  ? '升级中...'
-                  : selectedChannel === 'preview'
-                    ? '升级到预览版'
-                    : '升级到正式版'}
-            </PrimaryButton>
-          </div>
-        ) : undefined
-      }
     >
       <div className="space-y-6">
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
@@ -194,21 +129,43 @@ export function VersionUpgradeModal({
             </div>
           </AppCard>
           <AppCard title="最新版本">
-            <div className="flex flex-wrap items-center gap-3">
-              <p className="text-sm font-medium text-[var(--foreground-primary)]">
-                {release?.tag_name || '未检查'}
-              </p>
-              <StatusBadge
-                label={selectedChannelLabel}
-                variant={selectedChannel === 'preview' ? 'warning' : 'info'}
-              />
+            <div className="space-y-4">
+              <div className="flex flex-wrap items-center gap-3">
+                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                  {release?.tag_name || '未检查'}
+                </p>
+                <StatusBadge
+                  label={selectedChannelLabel}
+                  variant={selectedChannel === 'preview' ? 'warning' : 'info'}
+                />
+              </div>
+              {canUpgrade ? (
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-xs text-[var(--foreground-secondary)]">
+                      点击标签切换通道
+                    </span>
+                    <StatusBadge
+                      label={selectedChannelLabel}
+                      variant={
+                        selectedChannel === 'preview' ? 'warning' : 'info'
+                      }
+                      onClick={toggleChannel}
+                      disabled={isChecking || isUpgrading || isUploadingBinary}
+                    />
+                  </div>
+                  <SecondaryButton
+                    type="button"
+                    onClick={onCheck}
+                    disabled={isChecking || isUpgrading || isUploadingBinary}
+                    className="w-full md:w-auto"
+                  >
+                    {isChecking ? '检查中...' : '检查'}
+                  </SecondaryButton>
+                </div>
+              ) : null}
             </div>
           </AppCard>
-          <AppCard title="启动时间">
-            <p className="text-sm font-medium text-[var(--foreground-primary)]">
-              {startTime ? formatDateTime(new Date(startTime * 1000)) : '未知'}
-            </p>
-          </AppCard>
         </div>
 
         {isLoading ? <LoadingState /> : null}
@@ -267,6 +224,30 @@ export function VersionUpgradeModal({
               >
                 查看发布详情
               </a>
+              {canUpgrade ? (
+                <div className="flex justify-end">
+                  <PrimaryButton
+                    type="button"
+                    onClick={onUpgrade}
+                    disabled={
+                      !release.has_update ||
+                      release.in_progress ||
+                      isUpgrading ||
+                      !release.upgrade_supported ||
+                      isUploadingBinary ||
+                      isConfirmingManualUpgrade
+                    }
+                  >
+                    {isUpgrading
+                      ? '升级中...'
+                      : release.in_progress
+                        ? '升级中...'
+                        : selectedChannel === 'preview'
+                          ? '升级到预览版'
+                          : '升级到正式版'}
+                  </PrimaryButton>
+                </div>
+              ) : null}
             </div>
           </AppCard>
         ) : null}
@@ -291,6 +272,39 @@ export function VersionUpgradeModal({
                 />
               </ResourceField>
 
+              <div className="flex justify-end">
+                {showConfirmManualUpgradeAction ? (
+                  <PrimaryButton
+                    type="button"
+                    onClick={onConfirmManualUpgrade}
+                    disabled={
+                      !canConfirmManualUpgrade ||
+                      isConfirmingManualUpgrade ||
+                      isUploadingBinary ||
+                      isUpgrading
+                    }
+                  >
+                    {isConfirmingManualUpgrade ? '升级中...' : '升级'}
+                  </PrimaryButton>
+                ) : (
+                  <PrimaryButton
+                    type="button"
+                    onClick={() => {
+                      if (selectedBinary) {
+                        onUploadBinary(selectedBinary);
+                      }
+                    }}
+                    disabled={
+                      !selectedBinary ||
+                      isUploadingBinary ||
+                      isConfirmingManualUpgrade
+                    }
+                  >
+                    {isUploadingBinary ? '上传检查中...' : '上传并检查'}
+                  </PrimaryButton>
+                )}
+              </div>
+
               {manualErrorMessage ? (
                 <ErrorState
                   title="手动升级检查失败"