[优化] 界面优化

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

@@ -1,26 +1,22 @@
 'use client';
 
-import { marked } from 'marked';
+import {marked} from 'marked';
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from 'react';
 
-import { EmptyState } from '@/components/feedback/empty-state';
+import {EmptyState} from '@/components/feedback/empty-state';
-import { ErrorState } from '@/components/feedback/error-state';
+import {ErrorState} from '@/components/feedback/error-state';
-import { LoadingState } from '@/components/feedback/loading-state';
+import {LoadingState} from '@/components/feedback/loading-state';
-import { AppCard } from '@/components/ui/app-card';
+import {AppCard} from '@/components/ui/app-card';
-import { AppModal } from '@/components/ui/app-modal';
+import {AppModal} from '@/components/ui/app-modal';
-import { StatusBadge } from '@/components/ui/status-badge';
+import {StatusBadge} from '@/components/ui/status-badge';
-import type {
+import type {LatestReleaseInfo, ReleaseChannel, UploadedServerBinaryInfo,} from '@/features/update/types';
-  LatestReleaseInfo,
-  ReleaseChannel,
-  UploadedServerBinaryInfo,
-} from '@/features/update/types';
 import {
     PrimaryButton,
     ResourceField,
     ResourceInput,
     SecondaryButton,
 } from '@/features/shared/components/resource-primitives';
-import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
 
 interface VersionUpgradeModalProps {
     isOpen: boolean;
@@ -48,15 +44,15 @@ interface VersionUpgradeModalProps {
 
 function getUpgradeBadge(release: LatestReleaseInfo | null | undefined) {
     if (!release) {
-    return { label: '未检查', variant: 'info' as const };
+        return {label: '未检查', variant: 'info' as const};
     }
     if (release.in_progress) {
-    return { label: '升级中', variant: 'warning' as const };
+        return {label: '升级中', variant: 'warning' as const};
     }
     if (release.has_update) {
-    return { label: '可升级', variant: 'warning' as const };
+        return {label: '可升级', variant: 'warning' as const};
     }
-  return { label: '最新', variant: 'success' as const };
+    return {label: '最新', variant: 'success' as const};
 }
 
 export function VersionUpgradeModal({
@@ -81,7 +77,7 @@ export function VersionUpgradeModal({
                                         onUpgrade,
                                         onUploadBinary,
                                         onConfirmManualUpgrade,
-}: VersionUpgradeModalProps) {
+                                    }: VersionUpgradeModalProps) {
     const upgradeBadge = getUpgradeBadge(release);
     const [selectedBinary, setSelectedBinary] = useState<File | null>(null);
     const selectedChannelLabel =
@@ -109,12 +105,8 @@ export function VersionUpgradeModal({
             size="lg"
         >
             <div className="space-y-6">
-        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+                <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-2">
-          <AppCard title="前端版本">
+
-            <p className="text-sm font-medium text-[var(--foreground-primary)]">
-              {frontendVersion}
-            </p>
-          </AppCard>
                     <AppCard title="服务端版本">
                         <div className="flex flex-wrap items-center gap-3">
                             <p className="text-sm font-medium text-[var(--foreground-primary)]">
@@ -126,23 +118,16 @@ export function VersionUpgradeModal({
                             />
                         </div>
                     </AppCard>
+
                     <AppCard title="最新版本">
                         <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={
@@ -152,6 +137,9 @@ export function VersionUpgradeModal({
                                             disabled={isChecking || isUpgrading || isUploadingBinary}
                                         />
                                     </div>
+                                </div>
+                            ) : null}
+                            </div>
                             <SecondaryButton
                                 type="button"
                                 onClick={onCheck}
@@ -161,14 +149,12 @@ export function VersionUpgradeModal({
                                 {isChecking ? '检查中...' : '检查'}
                             </SecondaryButton>
                         </div>
-              ) : null}
-            </div>
                     </AppCard>
                 </div>
 
-        {isLoading ? <LoadingState /> : null}
+                {isLoading ? <LoadingState/> : null}
                 {!isLoading && releaseErrorMessage ? (
-          <ErrorState title="版本检查失败" description={releaseErrorMessage} />
+                    <ErrorState title="版本检查失败" description={releaseErrorMessage}/>
                 ) : null}
                 {!isLoading && !releaseErrorMessage && !release ? (
                     <EmptyState
@@ -192,9 +178,9 @@ export function VersionUpgradeModal({
                                     variant={release.has_update ? 'warning' : 'success'}
                                 />
                                 {release.prerelease ? (
-                  <StatusBadge label="Preview 发布" variant="warning" />
+                                    <StatusBadge label="Preview 发布" variant="warning"/>
                                 ) : (
-                  <StatusBadge label="正式发布" variant="info" />
+                                    <StatusBadge label="正式发布" variant="info"/>
                                 )}
                                 {!release.upgrade_supported ? (
                                     <StatusBadge
@@ -203,7 +189,7 @@ export function VersionUpgradeModal({
                                     />
                                 ) : null}
                                 {release.in_progress ? (
-                  <StatusBadge label="升级任务执行中" variant="warning" />
+                                    <StatusBadge label="升级任务执行中" variant="warning"/>
                                 ) : null}
                             </div>
                             <div
@@ -224,6 +210,7 @@ export function VersionUpgradeModal({
                             </a>
                             {canUpgrade ? (
                                 <div className="flex justify-end">
+
                                     <PrimaryButton
                                         type="button"
                                         onClick={onUpgrade}
@@ -311,13 +298,15 @@ export function VersionUpgradeModal({
                             ) : null}
 
                             {!manualErrorMessage && manualStatusMessage ? (
-                <div className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-3 text-sm text-[var(--status-warning-foreground)]">
+                                <div
+                                    className="rounded-2xl border border-[var(--status-warning-border)] bg-[var(--status-warning-soft)] px-4 py-3 text-sm text-[var(--status-warning-foreground)]">
                                     {manualStatusMessage}
                                 </div>
                             ) : null}
 
                             {uploadedBinary ? (
-                <div className="space-y-4 rounded-3xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
+                                <div
+                                    className="space-y-4 rounded-3xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
                                     <div className="flex flex-wrap items-center gap-3">
                                         <StatusBadge
                                             label={