prettier

2026-10-13 18:36:37 +08:00 · 2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
@@ -1,9 +1,9 @@
 'use client';

-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
-import {useMemo, useState} from 'react';
-import {FileKey, Plus, RefreshCw, Trash2} from 'lucide-react';
-import {toast} from 'sonner';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { FileKey, Plus, RefreshCw, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';

 import {
  AlertDialog,
@@ -15,21 +15,30 @@ import {
  AlertDialogHeader,
  AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Button} from '@/components/ui/button';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {EmptyStateWithBorder} from '@/components/layout/empty';
-import {ErrorInline} from '@/components/layout/error';
-import {LoadingStateWithBorder} from '@/components/layout/loading';
-import type {TlsCertificateItem} from '@/lib/services/openflare';
-import {TlsCertificateService} from '@/lib/services/openflare';
-import {formatDateTime} from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import type { TlsCertificateItem } from '@/lib/services/openflare';
+import { TlsCertificateService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';

-import {CertificateApplyDialog} from '../websites/components/certificate-apply-dialog';
-import {CertificateDetailDialog} from '../websites/components/certificate-detail-dialog';
-import {CertificateEditorDialog} from '../websites/components/certificate-editor-dialog';
-import {CertificateImportDialog} from '../websites/components/certificate-import-dialog';
-import {WebsiteStatusBadge} from '../websites/components/status-badge';
-import {getCertificateStatus, getErrorMessage} from '../websites/components/website-utils';
+import { CertificateApplyDialog } from '../websites/components/certificate-apply-dialog';
+import { CertificateDetailDialog } from '../websites/components/certificate-detail-dialog';
+import { CertificateEditorDialog } from '../websites/components/certificate-editor-dialog';
+import { CertificateImportDialog } from '../websites/components/certificate-import-dialog';
+import { WebsiteStatusBadge } from '../websites/components/status-badge';
+import {
+  getCertificateStatus,
+  getErrorMessage,
+} from '../websites/components/website-utils';

 const certificatesQueryKey = ['openflare', 'tls-certificates'];

@@ -41,9 +50,14 @@ export default function CertificatesPage() {
  const [applyOpen, setApplyOpen] = useState(false);
  const [detailOpen, setDetailOpen] = useState(false);
  const [editorOpen, setEditorOpen] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<TlsCertificateItem | null>(null);
-  const [selectedCertificateId, setSelectedCertificateId] = useState<number | null>(null);
-  const [applyCertificate, setApplyCertificate] = useState<TlsCertificateItem | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<TlsCertificateItem | null>(
+    null,
+  );
+  const [selectedCertificateId, setSelectedCertificateId] = useState<
+    number | null
+  >(null);
+  const [applyCertificate, setApplyCertificate] =
+    useState<TlsCertificateItem | null>(null);
  const [applyMode, setApplyMode] = useState<CertificateApplyMode>('edit-acme');

  const certificatesQuery = useQuery({
@@ -56,7 +70,7 @@ export default function CertificatesPage() {
    onSuccess: async () => {
      toast.success('证书已删除');
      setDeleteTarget(null);
-      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
+      await queryClient.invalidateQueries({ queryKey: certificatesQueryKey });
    },
    onError: (error) => toast.error(getErrorMessage(error)),
  });
@@ -65,7 +79,7 @@ export default function CertificatesPage() {
    mutationFn: (id: number) => TlsCertificateService.renew(id),
    onSuccess: async (cert) => {
      toast.success(`证书 ${cert.name} 续期任务已提交`);
-      await queryClient.invalidateQueries({queryKey: certificatesQueryKey});
+      await queryClient.invalidateQueries({ queryKey: certificatesQueryKey });
    },
    onError: (error) => toast.error(getErrorMessage(error)),
  });
@@ -87,85 +101,103 @@ export default function CertificatesPage() {
  };

  return (
-    <div className="py-6 px-1 space-y-6">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex items-center gap-2">
-          <FileKey className="size-5 text-primary" />
-          <h1 className="text-2xl font-semibold tracking-tight">证书</h1>
+    <div className='py-6 px-1 space-y-6'>
+      <div className='flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+        <div className='flex items-center gap-2'>
+          <FileKey className='size-5 text-primary' />
+          <h1 className='text-2xl font-semibold tracking-tight'>证书</h1>
        </div>
-        <div className="flex flex-wrap gap-2">
+        <div className='flex flex-wrap gap-2'>
          <Button
-            variant="outline"
-            size="sm"
-            className="h-7 text-xs"
-            onClick={() => void queryClient.invalidateQueries({queryKey: certificatesQueryKey})}
+            variant='outline'
+            size='sm'
+            className='h-7 text-xs'
+            onClick={() =>
+              void queryClient.invalidateQueries({
+                queryKey: certificatesQueryKey,
+              })
+            }
          >
-            <RefreshCw className="size-3.5 mr-1" />
+            <RefreshCw className='size-3.5 mr-1' />
            刷新证书
          </Button>
          <Button
-            variant="secondary"
-            size="sm"
-            className="h-7 text-xs"
+            variant='secondary'
+            size='sm'
+            className='h-7 text-xs'
            onClick={() => setImportOpen(true)}
          >
            导入证书
          </Button>
-          <Button size="sm" className="h-7 text-xs" onClick={() => setApplyOpen(true)}>
-            <Plus className="size-3.5 mr-1" />
+          <Button
+            size='sm'
+            className='h-7 text-xs'
+            onClick={() => setApplyOpen(true)}
+          >
+            <Plus className='size-3.5 mr-1' />
            申请证书
          </Button>
        </div>
      </div>

-      <Card className="border-dashed shadow-none">
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base font-semibold">证书列表</CardTitle>
+      <Card className='border-dashed shadow-none'>
+        <CardHeader className='pb-3'>
+          <CardTitle className='text-base font-semibold'>证书列表</CardTitle>
          <CardDescription>
            展示证书有效期、备注和状态，支持查看详情、编辑内容或删除证书。
          </CardDescription>
        </CardHeader>
        <CardContent>
          {certificatesQuery.isLoading ? (
-            <LoadingStateWithBorder icon={FileKey} description="加载证书列表中..." />
+            <LoadingStateWithBorder
+              icon={FileKey}
+              description='加载证书列表中...'
+            />
          ) : certificatesQuery.isError ? (
-            <div className="p-8 border border-dashed rounded-lg">
+            <div className='p-8 border border-dashed rounded-lg'>
              <ErrorInline
                message={getErrorMessage(certificatesQuery.error)}
                onRetry={() => void certificatesQuery.refetch()}
-                className="justify-center"
+                className='justify-center'
              />
            </div>
          ) : certificates.length === 0 ? (
            <EmptyStateWithBorder
              icon={FileKey}
-              description="暂无证书，点击右上角「导入证书」或「申请证书」开始录入。"
+              description='暂无证书，点击右上角「导入证书」或「申请证书」开始录入。'
            />
          ) : (
-            <div className="space-y-3">
+            <div className='space-y-3'>
              {certificates.map((certificate) => {
                const status = getCertificateStatus(certificate);

                return (
                  <div
                    key={certificate.id}
-                    className="rounded-lg border bg-card px-4 py-3"
+                    className='rounded-lg border bg-card px-4 py-3'
                  >
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="space-y-2">
-                        <div className="flex flex-wrap items-center gap-2">
-                          <p className="text-sm font-semibold">{certificate.name}</p>
-                          <WebsiteStatusBadge label={status.label} tone={status.tone} />
+                    <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                      <div className='space-y-2'>
+                        <div className='flex flex-wrap items-center gap-2'>
+                          <p className='text-sm font-semibold'>
+                            {certificate.name}
+                          </p>
+                          <WebsiteStatusBadge
+                            label={status.label}
+                            tone={status.tone}
+                          />
                        </div>
-                        <div className="text-xs leading-5 text-muted-foreground space-y-0.5">
+                        <div className='text-xs leading-5 text-muted-foreground space-y-0.5'>
                          <p>生效：{formatDateTime(certificate.not_before)}</p>
                          <p>到期：{formatDateTime(certificate.not_after)}</p>
                          <p>
                            来源：
-                            {certificate.provider === 'acme' ? 'ACME 申请' : '手动上传'}
+                            {certificate.provider === 'acme'
+                              ? 'ACME 申请'
+                              : '手动上传'}
                          </p>
                          {certificate.apply_status === 'applying' ? (
-                            <p className="text-blue-600">
+                            <p className='text-blue-600'>
                              状态：
                              {certificate.provider === 'upload'
                                ? '转换申请中...'
@@ -173,9 +205,11 @@ export default function CertificatesPage() {
                            </p>
                          ) : null}
                          {certificate.apply_status === 'error' ? (
-                            <p className="text-destructive">
+                            <p className='text-destructive'>
                              状态：
-                              {certificate.provider === 'upload' ? '转换失败' : '申请失败'}
+                              {certificate.provider === 'upload'
+                                ? '转换失败'
+                                : '申请失败'}
                              （{certificate.apply_message}）
                            </p>
                          ) : null}
@@ -183,11 +217,11 @@ export default function CertificatesPage() {
                        </div>
                      </div>

-                      <div className="flex flex-wrap gap-1">
+                      <div className='flex flex-wrap gap-1'>
                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs'
                          onClick={() => {
                            setSelectedCertificateId(certificate.id);
                            setDetailOpen(true);
@@ -196,18 +230,18 @@ export default function CertificatesPage() {
                          查看
                        </Button>
                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs'
                          onClick={() => handleOpenEditor(certificate)}
                        >
                          编辑
                        </Button>
                        {certificate.provider === 'acme' ? (
                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-7 text-xs"
+                            variant='outline'
+                            size='sm'
+                            className='h-7 text-xs'
                            disabled={renewMutation.isPending}
                            onClick={() => renewMutation.mutate(certificate.id)}
                          >
@@ -215,12 +249,12 @@ export default function CertificatesPage() {
                          </Button>
                        ) : null}
                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-7 text-xs text-destructive"
+                          variant='outline'
+                          size='sm'
+                          className='h-7 text-xs text-destructive'
                          onClick={() => setDeleteTarget(certificate)}
                        >
-                          <Trash2 className="size-3" />
+                          <Trash2 className='size-3' />
                        </Button>
                      </div>
                    </div>
@@ -291,7 +325,9 @@ export default function CertificatesPage() {
        certificateId={selectedCertificateId}
        open={editorOpen}
        onOpenChange={setEditorOpen}
-        onSaved={(certificate) => toast.success(`证书 ${certificate.name} 已更新`)}
+        onSaved={(certificate) =>
+          toast.success(`证书 ${certificate.name} 已更新`)
+        }
        onConvert={(certificate) => {
          setEditorOpen(false);
          setApplyMode('convert-upload');
@@ -314,8 +350,10 @@ export default function CertificatesPage() {
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
            <AlertDialogAction
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              onClick={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
+              className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
+              onClick={() =>
+                deleteTarget && deleteMutation.mutate(deleteTarget.id)
+              }
            >
              删除
            </AlertDialogAction>
@@ -324,4 +362,4 @@ export default function CertificatesPage() {
      </AlertDialog>
    </div>
  );
-}
+}