[优化] 界面优化

atsf_server/web/features/performance/components/performance-page.tsx

@@ -762,7 +762,6 @@ export function PerformancePage() {
                             </ResourceField>
                             <ToggleField
                                 label="multi_accept"
-                                description=""
                                 tooltip={performanceFieldTooltips.multi_accept}
                                 checked={performanceFields.OpenRestyEventsMultiAcceptEnabled}
                                 onChange={(checked) =>

atsf_server/web/features/shared/components/resource-primitives.tsx

@@ -180,13 +180,13 @@ export function ToggleField({
         onChange={(event) => onChange(event.target.checked)}
         className="mt-1 h-4 w-4 rounded border-[var(--border-default)] accent-[var(--brand-primary)]"
       />
-      <span className="space-y-1">
+      <span className="flex flex-col">
         <span className="flex items-center gap-2 text-sm font-medium text-[var(--foreground-primary)]">
           <span>{label}</span>
           {tooltip ? <FieldTooltip content={tooltip} /> : null}
         </span>
         {description ? (
-          <span className="block text-xs leading-5 text-[var(--foreground-secondary)]">
+          <span className="mt-1 block text-xs leading-5 text-[var(--foreground-secondary)]">
             {description}
           </span>
         ) : null}

atsf_server/web/features/websites/components/website-detail-page.tsx

@@ -1,32 +1,24 @@
 'use client';
 
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
+import {useRouter} from 'next/navigation';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import {useMemo, 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 { InlineMessage } from '@/components/feedback/inline-message';
+import {InlineMessage} from '@/components/feedback/inline-message';
-import { LoadingState } from '@/components/feedback/loading-state';
+import {LoadingState} from '@/components/feedback/loading-state';
-import { PageHeader } from '@/components/layout/page-header';
+import {PageHeader} from '@/components/layout/page-header';
-import { AppCard } from '@/components/ui/app-card';
+import {AppCard} from '@/components/ui/app-card';
-import { StatusBadge } from '@/components/ui/status-badge';
+import {StatusBadge} from '@/components/ui/status-badge';
-import {
+import {deleteManagedDomain, getManagedDomains,} from '@/features/managed-domains/api/managed-domains';
-  deleteManagedDomain,
+import {getProxyRoutes,} from '@/features/proxy-routes/api/proxy-routes';
-  getManagedDomains,
+import {deleteTlsCertificate, getTlsCertificates,} from '@/features/tls-certificates/api/tls-certificates';
-} from '@/features/managed-domains/api/managed-domains';
+import {CertificateDetailModal} from '@/features/websites/components/certificate-detail-modal';
-import {
+import {CertificateEditorModal} from '@/features/websites/components/certificate-editor-modal';
-  getProxyRoutes,
+import {CertificateImportModal} from '@/features/websites/components/certificate-import-modal';
-} from '@/features/proxy-routes/api/proxy-routes';
+import {WebsiteEditorModal} from '@/features/websites/components/website-editor-modal';
-import {
-  deleteTlsCertificate,
-  getTlsCertificates,
-} from '@/features/tls-certificates/api/tls-certificates';
-import { CertificateDetailModal } from '@/features/websites/components/certificate-detail-modal';
-import { CertificateEditorModal } from '@/features/websites/components/certificate-editor-modal';
-import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
-import { WebsiteEditorModal } from '@/features/websites/components/website-editor-modal';
 import {
     buildCertificateLabel,
     getCertificateStatus,
@@ -34,19 +26,15 @@ import {
     getMatchTypeMeta,
     isRouteRelatedToManagedDomain,
 } from '@/features/websites/utils';
-import {
+import {DangerButton, PrimaryButton, SecondaryButton,} from '@/features/shared/components/resource-primitives';
-  DangerButton,
+import {formatDateTime} from '@/lib/utils/date';
-  PrimaryButton,
-  SecondaryButton,
-} from '@/features/shared/components/resource-primitives';
-import { formatDateTime } from '@/lib/utils/date';
 
 type FeedbackState = {
     tone: 'success' | 'danger';
     message: string;
 };
 
-export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
+export function WebsiteDetailPage({websiteId}: { websiteId: string }) {
     const router = useRouter();
     const queryClient = useQueryClient();
     const [feedback, setFeedback] = useState<FeedbackState | null>(null);
@@ -74,25 +62,25 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
     const deleteDomainMutation = useMutation({
         mutationFn: deleteManagedDomain,
         onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
+            await queryClient.invalidateQueries({queryKey: ['managed-domains']});
             router.push('/website');
         },
         onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+            setFeedback({tone: 'danger', message: getErrorMessage(error)});
         },
     });
 
     const deleteCertificateMutation = useMutation({
         mutationFn: deleteTlsCertificate,
         onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '证书已删除。' });
+            setFeedback({tone: 'success', message: '证书已删除。'});
             await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
+                queryClient.invalidateQueries({queryKey: ['tls-certificates']}),
-        queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
+                queryClient.invalidateQueries({queryKey: ['managed-domains']}),
             ]);
         },
         onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+            setFeedback({tone: 'danger', message: getErrorMessage(error)});
         },
     });
 
@@ -158,7 +146,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
         certificatesQuery.isLoading ||
         proxyRoutesQuery.isLoading
     ) {
-    return <LoadingState />;
+        return <LoadingState/>;
     }
 
     if (managedDomainsQuery.isError) {
@@ -238,13 +226,13 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                 />
 
                 {feedback ? (
-          <InlineMessage tone={feedback.tone} message={feedback.message} />
+                    <InlineMessage tone={feedback.tone} message={feedback.message}/>
                 ) : null}
 
                 <div className="grid gap-4 xl:grid-cols-4">
                     <AppCard title="匹配类型">
                         <div className="space-y-3">
-              <StatusBadge label={matchType.label} variant={matchType.variant} />
+                            <StatusBadge label={matchType.label} variant={matchType.variant}/>
                             <p className="text-sm text-[var(--foreground-secondary)]">
                                 {website.domain.startsWith('*.')
                                     ? '当前网站会覆盖该后缀下的子域名规则。'
@@ -290,7 +278,8 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                 <div className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
                     <AppCard title="网站信息" description="当前网站的基础配置与托管信息。">
                         <div className="grid gap-4 md:grid-cols-2">
-              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                            <div
+                                className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
                                 <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
                                     域名
                                 </p>
@@ -298,7 +287,8 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                                     {website.domain}
                                 </p>
                             </div>
-              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                            <div
+                                className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
                                 <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
                                     创建时间
                                 </p>
@@ -306,7 +296,8 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                                     {formatDateTime(website.created_at)}
                                 </p>
                             </div>
-              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 md:col-span-2">
+                            <div
+                                className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 md:col-span-2">
                                 <p className="text-xs uppercase tracking-[0.18em] text-[var(--foreground-muted)]">
                                     备注
                                 </p>
@@ -316,18 +307,9 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                             </div>
                         </div>
                     </AppCard>
-
                     <AppCard
                         title="证书信息"
                         description="当前网站绑定的默认证书信息。若还没有证书，可直接添加后回填。"
-            action={
-              <PrimaryButton
-                type="button"
-                onClick={() => setIsCertificateImportOpen(true)}
-              >
-                添加
-              </PrimaryButton>
-            }
                     >
                         {certificate ? (
                             <div className="space-y-4">
@@ -343,20 +325,13 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                                     <p>到期时间：{formatDateTime(certificate.not_after)}</p>
                                     <p>备注：{certificate.remark || '暂无备注'}</p>
                                 </div>
-                <div className="flex flex-wrap gap-2">
+                                <div className="flex flex-wrap gap-3">
                                     <SecondaryButton
                                         type="button"
                                         onClick={() => setIsCertificateDetailOpen(true)}
                                     >
                                         查看
                                     </SecondaryButton>
-                  <SecondaryButton
-                    type="button"
-                    onClick={() => setIsCertificateEditorOpen(true)}
-                  >
-                    编辑
-                  </SecondaryButton>
-                </div>
                                     <DangerButton
                                         type="button"
                                         onClick={handleDeleteCertificate}
@@ -365,6 +340,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                                         删除
                                     </DangerButton>
                                 </div>
+                            </div>
                         ) : (
                             <EmptyState
                                 title="未绑定证书"
@@ -430,7 +406,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                                                         variant={route.enable_https ? 'success' : 'warning'}
                                                     />
                                                     {route.redirect_http ? (
-                              <StatusBadge label="HTTP 跳转" variant="info" />
+                                                        <StatusBadge label="HTTP 跳转" variant="info"/>
                                                     ) : null}
                                                 </div>
                                             </td>
@@ -471,7 +447,7 @@ export function WebsiteDetailPage({ websiteId }: { websiteId: string }) {
                 onRequestImportCertificate={() => setIsCertificateImportOpen(true)}
                 onSaved={() => {
                     setPreferredCertificateId(null);
-          setFeedback({ tone: 'success', message: '网站已更新。' });
+                    setFeedback({tone: 'success', message: '网站已更新。'});
                 }}
             />
 

atsf_server/web/features/websites/components/websites-page.tsx

@@ -119,7 +119,7 @@ export function WebsitesPage() {
 
         <AppCard
           title="网站列表"
-          description="查看网站绑定的证书、启用状态和更新时间。进入详情页可继续查看关联规则并编辑网站。"
+          description="查看网站绑定的证书、启用状态和更新时间。"
         >
           {managedDomainsQuery.isLoading ? (
             <LoadingState />
@@ -181,7 +181,7 @@ export function WebsitesPage() {
                         </div>
                       </div>
 
-                      <div className="flex flex-col gap-2">
+                      <div className="flex flex-row gap-2">
                         <Link
                           href={`/website/detail?id=${domain.id}`}
                           className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"