feat: 添加获取TLS证书内容的API和前端支持，更新相关组件

atsf_server/web/features/tls-certificates/api/tls-certificates.ts

@@ -1,6 +1,7 @@
 import { apiRequest } from '@/lib/api/client';
 
 import type {
+  TlsCertificateContentItem,
   TlsCertificateDetailItem,
   TlsCertificateFileImportPayload,
   TlsCertificateItem,
@@ -22,6 +23,10 @@ export function getTlsCertificate(id: number) {
   return apiRequest<TlsCertificateDetailItem>(`/tls-certificates/${id}`);
 }
 
+export function getTlsCertificateContent(id: number) {
+  return apiRequest<TlsCertificateContentItem>(`/tls-certificates/${id}/content`);
+}
+
 export function updateTlsCertificate(
   id: number,
   payload: TlsCertificateMutationPayload,

atsf_server/web/features/tls-certificates/types.ts

@@ -11,6 +11,11 @@ export interface TlsCertificateItem {
 }
 
 export interface TlsCertificateDetailItem extends TlsCertificateItem {
+  cert_pem?: never;
+  key_pem?: never;
+}
+
+export interface TlsCertificateContentItem extends TlsCertificateItem {
   cert_pem: string;
   key_pem: string;
 }

atsf_server/web/features/websites/components/certificate-detail-modal.tsx

@@ -7,7 +7,10 @@ import { ErrorState } from '@/components/feedback/error-state';
 import { LoadingState } from '@/components/feedback/loading-state';
 import { AppModal } from '@/components/ui/app-modal';
 import { StatusBadge } from '@/components/ui/status-badge';
-import { getTlsCertificate } from '@/features/tls-certificates/api/tls-certificates';
+import {
+  getTlsCertificate,
+  getTlsCertificateContent,
+} from '@/features/tls-certificates/api/tls-certificates';
 import { getCertificateStatus, getErrorMessage } from '@/features/websites/utils';
 import {
   CodeBlock,
@@ -40,7 +43,14 @@ export function CertificateDetailModal({
     enabled: isOpen && certificateId !== null,
   });
 
+  const contentQuery = useQuery({
+    queryKey: ['tls-certificates', 'content', certificateId],
+    queryFn: () => getTlsCertificateContent(certificateId as number),
+    enabled: isOpen && certificateId !== null,
+  });
+
   const certificate = certificateQuery.data;
+  const content = contentQuery.data;
   const status = certificate ? getCertificateStatus(certificate) : null;
 
   return (
@@ -72,14 +82,16 @@ export function CertificateDetailModal({
         </div>
       }
     >
-      {certificateQuery.isLoading ? (
+      {certificateQuery.isLoading || contentQuery.isLoading ? (
         <LoadingState />
-      ) : certificateQuery.isError ? (
+      ) : certificateQuery.isError || contentQuery.isError ? (
         <ErrorState
           title="证书详情加载失败"
-          description={getErrorMessage(certificateQuery.error)}
+          description={getErrorMessage(
+            certificateQuery.error ?? contentQuery.error,
+          )}
         />
-      ) : !certificate ? (
+      ) : !certificate || !content ? (
         <EmptyState
           title="证书不存在"
           description="当前证书可能已被删除。"
@@ -138,7 +150,7 @@ export function CertificateDetailModal({
                 证书 PEM
               </p>
               <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
-                {certificate.cert_pem}
+                {content.cert_pem}
               </CodeBlock>
             </div>
             <div>
@@ -146,7 +158,7 @@ export function CertificateDetailModal({
                 私钥 PEM
               </p>
               <CodeBlock className="max-h-56 overflow-y-auto whitespace-pre-wrap break-all">
-                {certificate.key_pem}
+                {content.key_pem}
               </CodeBlock>
             </div>
           </div>

atsf_server/web/features/websites/components/certificate-editor-modal.tsx

@@ -11,7 +11,7 @@ import { InlineMessage } from '@/components/feedback/inline-message';
 import { LoadingState } from '@/components/feedback/loading-state';
 import { AppModal } from '@/components/ui/app-modal';
 import {
-  getTlsCertificate,
+  getTlsCertificateContent,
   updateTlsCertificate,
 } from '@/features/tls-certificates/api/tls-certificates';
 import type { TlsCertificateItem } from '@/features/tls-certificates/types';
@@ -49,8 +49,8 @@ export function CertificateEditorModal({
   });
 
   const certificateQuery = useQuery({
-    queryKey: ['tls-certificates', 'detail', certificateId],
-    queryFn: () => getTlsCertificate(certificateId as number),
+    queryKey: ['tls-certificates', 'content', certificateId],
+    queryFn: () => getTlsCertificateContent(certificateId as number),
     enabled: isOpen && certificateId !== null,
   });
 
@@ -120,7 +120,7 @@ export function CertificateEditorModal({
         <LoadingState />
       ) : certificateQuery.isError ? (
         <ErrorState
-          title="证书详情加载失败"
+          title="证书内容加载失败"
           description={getErrorMessage(certificateQuery.error)}
         />
       ) : !certificateQuery.data ? (