[优化] go 引用调整

openflare-server/web/features/websites/components/certificate-apply-modal.tsx

@@ -0,0 +1,331 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { AppModal } from '@/components/ui/app-modal';
+import {
+  applyTlsCertificate,
+  convertTlsCertificateToAcme,
+  updateAcmeCertificate,
+} from '@/features/tls-certificates/api/tls-certificates';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import { getDnsAccounts } from '@/features/dns-accounts/api/dns-accounts';
+import { getDefaultAcmeAccount } from '@/features/acme-accounts/api/acme-accounts';
+import {
+  acmeApplySchema,
+  defaultAcmeApplyValues,
+  type AcmeApplyFormValues,
+} from '@/features/websites/schemas';
+import { getErrorMessage } from '@/features/websites/utils';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+
+interface CertificateApplyModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onApplied?: (certificate: TlsCertificateItem) => void;
+  mode?: 'create' | 'edit-acme' | 'convert-upload';
+  certificate?: TlsCertificateItem | null;
+}
+
+export function CertificateApplyModal({
+  isOpen,
+  onClose,
+  onApplied,
+  mode = 'create',
+  certificate,
+}: CertificateApplyModalProps) {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<{
+    tone: 'success' | 'danger';
+    message: string;
+  } | null>(null);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const dnsAccountsQuery = useQuery({
+    queryKey: ['dns-accounts'],
+    queryFn: getDnsAccounts,
+    enabled: isOpen,
+  });
+
+  const defaultAcmeAccountQuery = useQuery({
+    queryKey: ['acme-accounts', 'default'],
+    queryFn: getDefaultAcmeAccount,
+    enabled: isOpen,
+  });
+
+  const form = useForm<AcmeApplyFormValues>({
+    resolver: zodResolver(acmeApplySchema),
+    defaultValues: defaultAcmeApplyValues,
+  });
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setFeedback(null);
+    setShowAdvanced(false);
+
+    if (certificate) {
+      form.reset({
+        name: certificate.name,
+        primary_domain:
+          mode === 'convert-upload' ? '' : certificate.primary_domain || '',
+        other_domains:
+          mode === 'convert-upload' ? '' : certificate.other_domains || '',
+        remark: certificate.remark || '',
+        acme_account_id:
+          mode === 'convert-upload' ? 0 : certificate.acme_account_id,
+        dns_account_id:
+          mode === 'convert-upload' ? 0 : certificate.dns_account_id,
+        key_algorithm: certificate.key_algorithm || 'EC256',
+        auto_renew: mode === 'convert-upload' ? true : certificate.auto_renew,
+        dns1: mode === 'convert-upload' ? '' : certificate.dns1 || '',
+        dns2: mode === 'convert-upload' ? '' : certificate.dns2 || '',
+        disable_cname:
+          mode === 'convert-upload' ? false : certificate.disable_cname,
+        skip_dns: mode === 'convert-upload' ? false : certificate.skip_dns,
+      });
+      if (
+        mode !== 'convert-upload' &&
+        (certificate.dns1 ||
+          certificate.dns2 ||
+          certificate.disable_cname ||
+          certificate.skip_dns)
+      ) {
+        setShowAdvanced(true);
+      }
+    } else {
+      form.reset(defaultAcmeApplyValues);
+    }
+  }, [isOpen, form, mode, certificate]);
+
+  useEffect(() => {
+    if (
+      defaultAcmeAccountQuery.data &&
+      form.getValues('acme_account_id') === 0
+    ) {
+      form.setValue('acme_account_id', defaultAcmeAccountQuery.data.id);
+    }
+  }, [defaultAcmeAccountQuery.data, form, isOpen]);
+
+  const applyMutation = useMutation({
+    mutationFn: (values: AcmeApplyFormValues) => {
+      if (mode === 'edit-acme' && certificate) {
+        return updateAcmeCertificate(certificate.id, values);
+      }
+      if (mode === 'convert-upload' && certificate) {
+        return convertTlsCertificateToAcme(certificate.id, values);
+      }
+      return applyTlsCertificate(values);
+    },
+    onSuccess: async (certificate) => {
+      await queryClient.invalidateQueries({ queryKey: ['tls-certificates'] });
+      onApplied?.(certificate);
+      onClose();
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const onSubmit = form.handleSubmit((values) => {
+    setFeedback(null);
+    applyMutation.mutate(values);
+  });
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={
+        mode === 'edit-acme'
+          ? '编辑并重新申请证书'
+          : mode === 'convert-upload'
+            ? '转换为申请证书'
+            : '申请证书'
+      }
+      description={
+        mode === 'edit-acme'
+          ? '修改 ACME 证书配置。保存后将使用新配置重新申请证书。'
+          : mode === 'convert-upload'
+            ? '填写 ACME 申请资料。申请成功后，当前手动证书会原地转换为可自动续签的申请证书。'
+            : "使用 ACME (Let's Encrypt 等) 自动申请和续期证书，支持通配符域名。"
+      }
+      size="xl"
+    >
+      <form className="space-y-5" onSubmit={onSubmit}>
+        {feedback ? (
+          <InlineMessage
+            tone={feedback.tone}
+            message={feedback.message}
+            onClear={() => setFeedback(null)}
+          />
+        ) : null}
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <ResourceField
+            label="证书名称"
+            error={form.formState.errors.name?.message}
+          >
+            <ResourceInput
+              placeholder="例如：主站证书"
+              {...form.register('name')}
+            />
+          </ResourceField>
+          <ResourceField
+            label="主域名"
+            error={form.formState.errors.primary_domain?.message}
+          >
+            <ResourceInput
+              placeholder="example.com 或 *.example.com"
+              {...form.register('primary_domain')}
+            />
+          </ResourceField>
+        </div>
+
+        <ResourceField
+          label="其他域名"
+          hint="每行一个域名。如申请通配符证书，请填写对应的根域名以便一并签发。"
+          error={form.formState.errors.other_domains?.message}
+        >
+          <textarea
+            className="w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none focus:border-[var(--brand-primary)]"
+            rows={3}
+            placeholder="example.net"
+            {...form.register('other_domains')}
+          />
+        </ResourceField>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <ResourceField
+            label="DNS 服务商账号"
+            error={form.formState.errors.dns_account_id?.message}
+          >
+            <ResourceSelect {...form.register('dns_account_id')}>
+              <option value={0}>请选择 DNS 账号</option>
+              {dnsAccountsQuery.data?.map((acc) => (
+                <option key={acc.id} value={acc.id}>
+                  {acc.name} ({acc.type})
+                </option>
+              ))}
+            </ResourceSelect>
+          </ResourceField>
+
+          <ResourceField
+            label="密钥算法"
+            error={form.formState.errors.key_algorithm?.message}
+          >
+            <ResourceSelect {...form.register('key_algorithm')}>
+              <option value="RSA2048">RSA 2048</option>
+              <option value="RSA4096">RSA 4096</option>
+              <option value="EC256">ECC 256</option>
+              <option value="EC384">ECC 384</option>
+            </ResourceSelect>
+          </ResourceField>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-1">
+          <ResourceField
+            label="备注"
+            error={form.formState.errors.remark?.message}
+          >
+            <ResourceInput
+              placeholder="可选，用于记录证书用途。"
+              {...form.register('remark')}
+            />
+          </ResourceField>
+
+          <ToggleField
+            label="开启自动续签"
+            description="开启后，将在证书过期前 7 天自动续期。"
+            checked={form.watch('auto_renew')}
+            onChange={(checked) => form.setValue('auto_renew', checked)}
+          />
+        </div>
+
+        <div className="overflow-hidden rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)]">
+          <button
+            type="button"
+            className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--surface-muted)]"
+            onClick={() => setShowAdvanced(!showAdvanced)}
+          >
+            <span>高级选项</span>
+            <svg
+              className={`h-4 w-4 transition-transform duration-200 ${showAdvanced ? 'rotate-180' : ''}`}
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </button>
+          {showAdvanced && (
+            <div className="space-y-4 border-t border-[var(--border-default)] px-4 py-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField
+                  label="DNS 验证服务器 1"
+                  hint="可选，如 8.8.8.8"
+                  error={form.formState.errors.dns1?.message}
+                >
+                  <ResourceInput
+                    placeholder="为空则使用默认权威 DNS"
+                    {...form.register('dns1')}
+                  />
+                </ResourceField>
+                <ResourceField
+                  label="DNS 验证服务器 2"
+                  hint="可选，如 1.1.1.1"
+                  error={form.formState.errors.dns2?.message}
+                >
+                  <ResourceInput
+                    placeholder="为空则使用默认权威 DNS"
+                    {...form.register('dns2')}
+                  />
+                </ResourceField>
+              </div>
+              <div className="grid gap-4 md:grid-cols-2">
+                <ToggleField
+                  label="跳过 CNAME 检查"
+                  description="在执行 DNS-01 验证时不追踪 CNAME 记录。"
+                  checked={form.watch('disable_cname')}
+                  onChange={(checked) =>
+                    form.setValue('disable_cname', checked)
+                  }
+                />
+                <ToggleField
+                  label="跳过 DNS 前置检查"
+                  description="直接请求 Let's Encrypt 验证而不做本地校验。"
+                  checked={form.watch('skip_dns')}
+                  onChange={(checked) => form.setValue('skip_dns', checked)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <PrimaryButton type="submit" disabled={applyMutation.isPending}>
+          {applyMutation.isPending
+            ? '提交中...'
+            : mode === 'edit-acme'
+              ? '保存并申请'
+              : mode === 'convert-upload'
+                ? '开始转换'
+                : '开始申请'}
+        </PrimaryButton>
+      </form>
+    </AppModal>
+  );
+}

openflare-server/web/features/websites/components/certificate-detail-modal.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { AppModal } from '@/components/ui/app-modal';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  getTlsCertificate,
+  getTlsCertificateContent,
+} from '@/features/tls-certificates/api/tls-certificates';
+import {
+  getCertificateStatus,
+  getErrorMessage,
+} from '@/features/websites/utils';
+import {
+  CodeBlock,
+  DangerButton,
+  PrimaryButton,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime } from '@/lib/utils/date';
+
+interface CertificateDetailModalProps {
+  certificateId: number | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+  deleting?: boolean;
+}
+
+export function CertificateDetailModal({
+  certificateId,
+  isOpen,
+  onClose,
+  onEdit,
+  onDelete,
+  deleting = false,
+}: CertificateDetailModalProps) {
+  const [copyMessage, setCopyMessage] = useState<string | null>(null);
+
+  const certificateQuery = useQuery({
+    queryKey: ['tls-certificates', 'detail', certificateId],
+    queryFn: () => getTlsCertificate(certificateId as number),
+    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;
+
+  const handleCopy = async (value: string, message: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopyMessage(message);
+    } catch (error) {
+      setCopyMessage(getErrorMessage(error));
+    }
+  };
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={() => {
+        setCopyMessage(null);
+        onClose();
+      }}
+      title="证书详情"
+      description="查看证书元信息、备注以及当前保存的 PEM 内容。"
+      size="xl"
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton type="button" onClick={onClose}>
+            关闭
+          </SecondaryButton>
+          <PrimaryButton type="button" onClick={onEdit} disabled={!certificate}>
+            编辑证书
+          </PrimaryButton>
+          <DangerButton
+            type="button"
+            onClick={onDelete}
+            disabled={!certificate || deleting}
+          >
+            {deleting ? '删除中...' : '删除证书'}
+          </DangerButton>
+        </div>
+      }
+    >
+      {copyMessage ? (
+        <InlineMessage tone="success" message={copyMessage} />
+      ) : null}
+
+      {certificateQuery.isLoading || contentQuery.isLoading ? (
+        <LoadingState />
+      ) : certificateQuery.isError || contentQuery.isError ? (
+        <ErrorState
+          title="证书详情加载失败"
+          description={getErrorMessage(
+            certificateQuery.error ?? contentQuery.error,
+          )}
+        />
+      ) : !certificate || !content ? (
+        <EmptyState title="证书不存在" description="当前证书可能已被删除。" />
+      ) : (
+        <div className="space-y-6">
+          <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">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                证书名称
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {certificate.name}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                状态
+              </p>
+              <div className="mt-2">
+                {status ? (
+                  <StatusBadge label={status.label} variant={status.variant} />
+                ) : null}
+              </div>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                生效时间
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {formatDateTime(certificate.not_before)}
+              </p>
+            </div>
+            <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+              <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                到期时间
+              </p>
+              <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                {formatDateTime(certificate.not_after)}
+              </p>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+              备注
+            </p>
+            <p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
+              {certificate.remark || '暂无备注'}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-3">
+                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                  证书 PEM
+                </p>
+                <SecondaryButton
+                  type="button"
+                  className="px-3 py-2 text-xs"
+                  onClick={() =>
+                    void handleCopy(content.cert_pem, '证书 PEM 已复制。')
+                  }
+                >
+                  复制
+                </SecondaryButton>
+              </div>
+              <CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
+                {content.cert_pem}
+              </CodeBlock>
+            </div>
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-3">
+                <p className="text-sm font-medium text-[var(--foreground-primary)]">
+                  私钥 PEM
+                </p>
+                <SecondaryButton
+                  type="button"
+                  className="px-3 py-2 text-xs"
+                  onClick={() =>
+                    void handleCopy(content.key_pem, '私钥 PEM 已复制。')
+                  }
+                >
+                  复制
+                </SecondaryButton>
+              </div>
+              <CodeBlock className="max-h-56 overflow-y-auto break-all whitespace-pre-wrap">
+                {content.key_pem}
+              </CodeBlock>
+            </div>
+          </div>
+        </div>
+      )}
+    </AppModal>
+  );
+}

openflare-server/web/features/websites/components/certificate-editor-modal.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { AppModal } from '@/components/ui/app-modal';
+import {
+  getTlsCertificateContent,
+  updateTlsCertificate,
+} from '@/features/tls-certificates/api/tls-certificates';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import {
+  defaultManualImportValues,
+  manualImportSchema,
+  type ManualImportFormValues,
+} from '@/features/websites/schemas';
+import { getErrorMessage, toManualPayload } from '@/features/websites/utils';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceTextarea,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+interface CertificateEditorModalProps {
+  certificateId: number | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSaved?: (certificate: TlsCertificateItem) => void;
+  onConvert?: (certificate: TlsCertificateItem) => void;
+}
+
+export function CertificateEditorModal({
+  certificateId,
+  isOpen,
+  onClose,
+  onSaved,
+  onConvert,
+}: CertificateEditorModalProps) {
+  const queryClient = useQueryClient();
+  const form = useForm<ManualImportFormValues>({
+    resolver: zodResolver(manualImportSchema),
+    defaultValues: defaultManualImportValues,
+  });
+
+  const certificateQuery = useQuery({
+    queryKey: ['tls-certificates', 'content', certificateId],
+    queryFn: () => getTlsCertificateContent(certificateId as number),
+    enabled: isOpen && certificateId !== null,
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: async (values: ManualImportFormValues) =>
+      updateTlsCertificate(certificateId as number, toManualPayload(values)),
+    onSuccess: async (certificate) => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
+        queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
+      ]);
+      onSaved?.(certificate);
+      handleClose();
+    },
+  });
+
+  useEffect(() => {
+    if (!isOpen || !certificateQuery.data) {
+      return;
+    }
+
+    form.reset({
+      name: certificateQuery.data.name,
+      cert_pem: certificateQuery.data.cert_pem,
+      key_pem: certificateQuery.data.key_pem,
+      remark: certificateQuery.data.remark || '',
+    });
+  }, [certificateQuery.data, form, isOpen]);
+
+  const handleSubmit = form.handleSubmit((values) => {
+    updateMutation.mutate(values);
+  });
+
+  const handleClose = () => {
+    updateMutation.reset();
+    form.reset(defaultManualImportValues);
+    onClose();
+  };
+
+  const canConvert =
+    certificateQuery.data?.provider === 'upload' &&
+    certificateQuery.data.apply_status !== 'applying';
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="编辑证书"
+      description="可以修改证书名称、备注，以及重新上传 PEM 证书和私钥内容。"
+      size="xl"
+      footer={
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            {canConvert ? (
+              <SecondaryButton
+                type="button"
+                onClick={() => {
+                  if (certificateQuery.data) {
+                    onConvert?.(certificateQuery.data);
+                  }
+                }}
+                disabled={updateMutation.isPending}
+              >
+                转换来源
+              </SecondaryButton>
+            ) : null}
+          </div>
+          <div className="flex flex-wrap justify-end gap-3">
+            <SecondaryButton
+              type="button"
+              onClick={handleClose}
+              disabled={updateMutation.isPending}
+            >
+              取消
+            </SecondaryButton>
+            <PrimaryButton
+              type="submit"
+              form="certificate-editor-form"
+              disabled={updateMutation.isPending || certificateQuery.isLoading}
+            >
+              {updateMutation.isPending ? '保存中...' : '保存证书'}
+            </PrimaryButton>
+          </div>
+        </div>
+      }
+    >
+      {certificateQuery.isLoading ? (
+        <LoadingState />
+      ) : certificateQuery.isError ? (
+        <ErrorState
+          title="证书内容加载失败"
+          description={getErrorMessage(certificateQuery.error)}
+        />
+      ) : !certificateQuery.data ? (
+        <EmptyState title="证书不存在" description="当前证书可能已被删除。" />
+      ) : (
+        <form
+          id="certificate-editor-form"
+          className="space-y-5"
+          onSubmit={handleSubmit}
+        >
+          {updateMutation.isError ? (
+            <InlineMessage
+              tone="danger"
+              message={getErrorMessage(updateMutation.error)}
+            />
+          ) : null}
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <ResourceField
+              label="证书名称"
+              error={form.formState.errors.name?.message}
+            >
+              <ResourceInput {...form.register('name')} />
+            </ResourceField>
+            <ResourceField
+              label="备注"
+              error={form.formState.errors.remark?.message}
+            >
+              <ResourceInput {...form.register('remark')} />
+            </ResourceField>
+          </div>
+
+          <ResourceField
+            label="证书 PEM"
+            error={form.formState.errors.cert_pem?.message}
+          >
+            <ResourceTextarea
+              className="min-h-40 font-mono text-xs"
+              {...form.register('cert_pem')}
+            />
+          </ResourceField>
+
+          <ResourceField
+            label="私钥 PEM"
+            error={form.formState.errors.key_pem?.message}
+          >
+            <ResourceTextarea
+              className="min-h-40 font-mono text-xs"
+              {...form.register('key_pem')}
+            />
+          </ResourceField>
+        </form>
+      )}
+    </AppModal>
+  );
+}

openflare-server/web/features/websites/components/certificate-import-modal.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState, type FormEvent } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { AppCard } from '@/components/ui/app-card';
+import { AppModal } from '@/components/ui/app-modal';
+import {
+  createTlsCertificate,
+  importTlsCertificateFiles,
+} from '@/features/tls-certificates/api/tls-certificates';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import {
+  defaultFileImportValues,
+  defaultManualImportValues,
+  type FileImportFormValues,
+  manualImportSchema,
+  type ManualImportFormValues,
+} from '@/features/websites/schemas';
+import {
+  getErrorMessage,
+  toFilePayload,
+  toManualPayload,
+} from '@/features/websites/utils';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceTextarea,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+type FeedbackState = {
+  tone: 'success' | 'danger';
+  message: string;
+};
+
+interface CertificateImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onImported?: (certificate: TlsCertificateItem) => void;
+}
+
+export function CertificateImportModal({
+  isOpen,
+  onClose,
+  onImported,
+}: CertificateImportModalProps) {
+  const queryClient = useQueryClient();
+  const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [fileForm, setFileForm] = useState<FileImportFormValues>(
+    defaultFileImportValues,
+  );
+  const [certFile, setCertFile] = useState<File | null>(null);
+  const [keyFile, setKeyFile] = useState<File | null>(null);
+  const [fileInputNonce, setFileInputNonce] = useState(0);
+
+  const manualForm = useForm<ManualImportFormValues>({
+    resolver: zodResolver(manualImportSchema),
+    defaultValues: defaultManualImportValues,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    setFeedback(null);
+  }, [isOpen]);
+
+  const resetFileForm = () => {
+    setFileForm(defaultFileImportValues);
+    setCertFile(null);
+    setKeyFile(null);
+    setFileInputNonce((value) => value + 1);
+  };
+
+  const resetAll = () => {
+    setImportMode('manual');
+    setFeedback(null);
+    manualForm.reset(defaultManualImportValues);
+    resetFileForm();
+  };
+
+  const invalidateCertificateQueries = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
+      queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
+    ]);
+  };
+
+  const manualImportMutation = useMutation({
+    mutationFn: async (values: ManualImportFormValues) =>
+      createTlsCertificate(toManualPayload(values)),
+    onSuccess: async (certificate) => {
+      await invalidateCertificateQueries();
+      onImported?.(certificate);
+      resetAll();
+      onClose();
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const fileImportMutation = useMutation({
+    mutationFn: async (values: FileImportFormValues) =>
+      importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
+    onSuccess: async (certificate) => {
+      await invalidateCertificateQueries();
+      onImported?.(certificate);
+      resetAll();
+      onClose();
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const handleManualSubmit = manualForm.handleSubmit((values) => {
+    setFeedback(null);
+    manualImportMutation.mutate(values);
+  });
+
+  const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFeedback(null);
+    fileImportMutation.mutate(fileForm);
+  };
+
+  const handleClose = () => {
+    resetAll();
+    onClose();
+  };
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="添加证书"
+      description="支持手动粘贴 PEM 或上传证书文件。导入成功后可立即在网站表单里选择。"
+      size="xl"
+    >
+      <div className="space-y-6">
+        {feedback ? (
+          <InlineMessage
+            tone={feedback.tone}
+            message={feedback.message}
+            onClear={() => setFeedback(null)}
+          />
+        ) : null}
+
+        <div className="inline-flex rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-1">
+          <button
+            type="button"
+            onClick={() => setImportMode('manual')}
+            className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
+              importMode === 'manual'
+                ? 'bg-[var(--brand-primary)] text-[var(--foreground-inverse)]'
+                : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground-primary)]'
+            }`}
+          >
+            手动导入
+          </button>
+          <button
+            type="button"
+            onClick={() => setImportMode('file')}
+            className={`rounded-xl px-4 py-2 text-sm font-medium transition ${
+              importMode === 'file'
+                ? 'bg-[var(--brand-primary)] text-[var(--foreground-inverse)]'
+                : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground-primary)]'
+            }`}
+          >
+            文件导入
+          </button>
+        </div>
+
+        {importMode === 'manual' ? (
+          <AppCard description="直接粘贴 PEM 证书和私钥内容，适合快速录入已有证书。">
+            <form className="space-y-5" onSubmit={handleManualSubmit}>
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField
+                  label="证书名称"
+                  error={manualForm.formState.errors.name?.message}
+                >
+                  <ResourceInput
+                    placeholder="example-com"
+                    {...manualForm.register('name')}
+                  />
+                </ResourceField>
+                <ResourceField
+                  label="备注"
+                  hint="可选，用于记录证书用途或来源。"
+                  error={manualForm.formState.errors.remark?.message}
+                >
+                  <ResourceInput
+                    placeholder="例如：主站生产证书"
+                    {...manualForm.register('remark')}
+                  />
+                </ResourceField>
+              </div>
+
+              <ResourceField
+                label="证书 PEM"
+                error={manualForm.formState.errors.cert_pem?.message}
+              >
+                <ResourceTextarea
+                  placeholder="-----BEGIN CERTIFICATE-----"
+                  className="min-h-40 font-mono text-xs"
+                  {...manualForm.register('cert_pem')}
+                />
+              </ResourceField>
+
+              <ResourceField
+                label="私钥 PEM"
+                error={manualForm.formState.errors.key_pem?.message}
+              >
+                <ResourceTextarea
+                  placeholder="-----BEGIN PRIVATE KEY-----"
+                  className="min-h-40 font-mono text-xs"
+                  {...manualForm.register('key_pem')}
+                />
+              </ResourceField>
+
+              <PrimaryButton
+                type="submit"
+                disabled={manualImportMutation.isPending}
+              >
+                {manualImportMutation.isPending ? '导入中...' : '导入证书'}
+              </PrimaryButton>
+            </form>
+          </AppCard>
+        ) : (
+          <AppCard description="上传证书文件和私钥文件，适合直接复用现有 PEM 文件。">
+            <form className="space-y-5" onSubmit={handleFileSubmit}>
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField label="证书名称">
+                  <ResourceInput
+                    value={fileForm.name}
+                    onChange={(event) =>
+                      setFileForm((current) => ({
+                        ...current,
+                        name: event.target.value,
+                      }))
+                    }
+                    placeholder="wildcard-example"
+                  />
+                </ResourceField>
+                <ResourceField label="备注">
+                  <ResourceInput
+                    value={fileForm.remark}
+                    onChange={(event) =>
+                      setFileForm((current) => ({
+                        ...current,
+                        remark: event.target.value,
+                      }))
+                    }
+                    placeholder="例如：泛域名生产证书"
+                  />
+                </ResourceField>
+              </div>
+
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField
+                  label="证书文件"
+                  hint={
+                    certFile
+                      ? `已选择：${certFile.name}`
+                      : '请选择 PEM/CRT 文件'
+                  }
+                >
+                  <ResourceInput
+                    key={`cert-${fileInputNonce}`}
+                    type="file"
+                    accept=".pem,.crt,.cer"
+                    onChange={(event) =>
+                      setCertFile(event.target.files?.[0] ?? null)
+                    }
+                  />
+                </ResourceField>
+                <ResourceField
+                  label="私钥文件"
+                  hint={
+                    keyFile ? `已选择：${keyFile.name}` : '请选择 KEY/PEM 文件'
+                  }
+                >
+                  <ResourceInput
+                    key={`key-${fileInputNonce}`}
+                    type="file"
+                    accept=".key,.pem"
+                    onChange={(event) =>
+                      setKeyFile(event.target.files?.[0] ?? null)
+                    }
+                  />
+                </ResourceField>
+              </div>
+
+              <div className="flex flex-wrap gap-3">
+                <PrimaryButton
+                  type="submit"
+                  disabled={fileImportMutation.isPending}
+                >
+                  {fileImportMutation.isPending ? '上传中...' : '上传文件'}
+                </PrimaryButton>
+                <SecondaryButton
+                  type="button"
+                  onClick={resetFileForm}
+                  disabled={fileImportMutation.isPending}
+                >
+                  清空文件
+                </SecondaryButton>
+              </div>
+            </form>
+          </AppCard>
+        )}
+      </div>
+    </AppModal>
+  );
+}

openflare-server/web/features/websites/components/website-detail-page.tsx

@@ -0,0 +1,672 @@
+'use client';
+
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  deleteManagedDomain,
+  getManagedDomains,
+} from '@/features/managed-domains/api/managed-domains';
+import { getProxyRoutes } from '@/features/proxy-routes/api/proxy-routes';
+import { getUpstreamSummary } from '@/features/proxy-routes/helpers';
+
+import {
+  deleteTlsCertificate,
+  getTlsCertificates,
+} from '@/features/tls-certificates/api/tls-certificates';
+import {
+  getWAFSiteRuleGroups,
+  replaceWAFSiteRuleGroups,
+} from '@/features/waf/api/waf';
+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 { CertificateApplyModal } from '@/features/websites/components/certificate-apply-modal';
+import { WebsiteEditorModal } from '@/features/websites/components/website-editor-modal';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import {
+  buildCertificateLabel,
+  getCertificateStatus,
+  getErrorMessage,
+  getMatchTypeMeta,
+  isRouteRelatedToManagedDomain,
+} from '@/features/websites/utils';
+import {
+  DangerButton,
+  PrimaryButton,
+  SecondaryButton,
+  ToggleField,
+} 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 }) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [isCertificateImportOpen, setIsCertificateImportOpen] = useState(false);
+  const [isCertificateDetailOpen, setIsCertificateDetailOpen] = useState(false);
+  const [isCertificateEditorOpen, setIsCertificateEditorOpen] = useState(false);
+  const [wafSelectedIDs, setWafSelectedIDs] = useState<number[]>([]);
+  const [convertCertificate, setConvertCertificate] =
+    useState<TlsCertificateItem | null>(null);
+  const [preferredCertificateId, setPreferredCertificateId] = useState<
+    number | null
+  >(null);
+
+  const managedDomainsQuery = useQuery({
+    queryKey: ['managed-domains'],
+    queryFn: getManagedDomains,
+  });
+  const certificatesQuery = useQuery({
+    queryKey: ['tls-certificates', 'list'],
+    queryFn: getTlsCertificates,
+  });
+  const proxyRoutesQuery = useQuery({
+    queryKey: ['proxy-routes'],
+    queryFn: getProxyRoutes,
+  });
+
+  const deleteDomainMutation = useMutation({
+    mutationFn: deleteManagedDomain,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
+      router.push('/website');
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteCertificateMutation = useMutation({
+    mutationFn: deleteTlsCertificate,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '证书已删除。' });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['tls-certificates'] }),
+        queryClient.invalidateQueries({ queryKey: ['managed-domains'] }),
+      ]);
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const website = useMemo(() => {
+    return (
+      (managedDomainsQuery.data ?? []).find(
+        (item) => String(item.id) === websiteId,
+      ) ?? null
+    );
+  }, [managedDomainsQuery.data, websiteId]);
+
+  const certificates = useMemo(
+    () => certificatesQuery.data ?? [],
+    [certificatesQuery.data],
+  );
+  const certificateMap = useMemo(
+    () => new Map(certificates.map((item) => [item.id, item])),
+    [certificates],
+  );
+  const relatedRoutes = useMemo(() => {
+    if (!website) {
+      return [];
+    }
+
+    return (proxyRoutesQuery.data ?? []).filter((route) =>
+      isRouteRelatedToManagedDomain(website.domain, route.domain),
+    );
+  }, [proxyRoutesQuery.data, website]);
+
+  const certificate = website?.cert_id
+    ? (certificateMap.get(website.cert_id) ?? null)
+    : null;
+  const enabledRoutesCount = relatedRoutes.filter(
+    (route) => route.enabled,
+  ).length;
+  const wafRouteID = relatedRoutes[0]?.id ?? null;
+  const wafQuery = useQuery({
+    queryKey: ['waf', 'site-rule-groups', wafRouteID],
+    queryFn: () => getWAFSiteRuleGroups(wafRouteID ?? 0),
+    enabled: Boolean(wafRouteID),
+  });
+  const wafMutation = useMutation({
+    mutationFn: (ids: number[]) =>
+      replaceWAFSiteRuleGroups(wafRouteID ?? 0, ids),
+    onSuccess: async (view) => {
+      setWafSelectedIDs(view.applied_ids);
+      setFeedback({ tone: 'success', message: '网站 WAF 规则组已更新。' });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['waf'] }),
+        queryClient.invalidateQueries({
+          queryKey: ['config-versions', 'diff'],
+        }),
+      ]);
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  useEffect(() => {
+    if (wafQuery.data) {
+      setWafSelectedIDs(wafQuery.data.applied_ids);
+    }
+  }, [wafQuery.data]);
+
+  const handleDeleteWebsite = () => {
+    if (!website) {
+      return;
+    }
+
+    if (!window.confirm(`确认删除网站 ${website.domain} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteDomainMutation.mutate(website.id);
+  };
+
+  const handleDeleteCertificate = () => {
+    if (!certificate) {
+      return;
+    }
+
+    if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteCertificateMutation.mutate(certificate.id);
+  };
+
+  if (
+    managedDomainsQuery.isLoading ||
+    certificatesQuery.isLoading ||
+    proxyRoutesQuery.isLoading
+  ) {
+    return <LoadingState />;
+  }
+
+  if (managedDomainsQuery.isError) {
+    return (
+      <ErrorState
+        title="网站详情加载失败"
+        description={getErrorMessage(managedDomainsQuery.error)}
+      />
+    );
+  }
+
+  if (certificatesQuery.isError) {
+    return (
+      <ErrorState
+        title="证书信息加载失败"
+        description={getErrorMessage(certificatesQuery.error)}
+      />
+    );
+  }
+
+  if (proxyRoutesQuery.isError) {
+    return (
+      <ErrorState
+        title="关联规则加载失败"
+        description={getErrorMessage(proxyRoutesQuery.error)}
+      />
+    );
+  }
+
+  if (!website) {
+    return (
+      <EmptyState
+        title="网站不存在"
+        description="该网站可能已被删除，或当前 ID 无法匹配到网站记录。"
+      />
+    );
+  }
+
+  const matchType = getMatchTypeMeta(website.domain);
+  const certificateStatus = certificate
+    ? getCertificateStatus(certificate)
+    : null;
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title={website.domain}
+          description="网站详情"
+          action={
+            <>
+              <Link
+                href="/website"
+                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)]"
+              >
+                返回
+              </Link>
+              <SecondaryButton
+                type="button"
+                onClick={() => setIsEditorOpen(true)}
+              >
+                编辑网站
+              </SecondaryButton>
+              <PrimaryButton
+                type="button"
+                onClick={() => setIsCertificateImportOpen(true)}
+              >
+                添加证书
+              </PrimaryButton>
+              <DangerButton
+                type="button"
+                onClick={handleDeleteWebsite}
+                disabled={deleteDomainMutation.isPending}
+              >
+                删除网站
+              </DangerButton>
+            </>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage
+            tone={feedback.tone}
+            message={feedback.message}
+            onClear={() => setFeedback(null)}
+          />
+        ) : null}
+
+        <div className="grid gap-4 xl:grid-cols-4">
+          <AppCard title="匹配类型">
+            <div className="space-y-3">
+              <StatusBadge
+                label={matchType.label}
+                variant={matchType.variant}
+              />
+              <p className="text-sm text-[var(--foreground-secondary)]">
+                {website.domain.startsWith('*.')
+                  ? '当前网站会覆盖该后缀下的子域名规则。'
+                  : '当前网站只匹配同名精确域名。'}
+              </p>
+            </div>
+          </AppCard>
+
+          <AppCard title="网站状态">
+            <div className="space-y-3">
+              <StatusBadge
+                label={website.enabled ? '启用' : '停用'}
+                variant={website.enabled ? 'success' : 'warning'}
+              />
+              <p className="text-sm text-[var(--foreground-secondary)]">
+                更新时间：{formatDateTime(website.updated_at)}
+              </p>
+            </div>
+          </AppCard>
+
+          <AppCard title="关联规则">
+            <div className="space-y-2 text-sm text-[var(--foreground-secondary)]">
+              <p>规则总数：{relatedRoutes.length}</p>
+              <p>已启用规则：{enabledRoutesCount}</p>
+            </div>
+          </AppCard>
+
+          <AppCard title="绑定证书">
+            <div className="space-y-3">
+              <StatusBadge
+                label={certificate ? certificate.name : '未绑定证书'}
+                variant={certificate ? 'success' : 'warning'}
+              />
+              <p className="text-sm text-[var(--foreground-secondary)]">
+                {certificateStatus
+                  ? `证书状态：${certificateStatus.label}`
+                  : '当前网站未设置默认证书。'}
+              </p>
+            </div>
+          </AppCard>
+        </div>
+
+        <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">
+                <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                  域名
+                </p>
+                <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                  {website.domain}
+                </p>
+              </div>
+              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+                <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                  创建时间
+                </p>
+                <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                  {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">
+                <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                  备注
+                </p>
+                <p className="mt-2 text-sm leading-6 text-[var(--foreground-primary)]">
+                  {website.remark || '暂无备注'}
+                </p>
+              </div>
+            </div>
+          </AppCard>
+          <AppCard
+            title="证书信息"
+            description="当前网站绑定的默认证书信息。若还没有证书，可直接添加后回填。"
+          >
+            {certificate ? (
+              <div className="space-y-4">
+                <div className="flex flex-wrap items-center gap-2">
+                  <StatusBadge
+                    label={certificateStatus?.label ?? '有效'}
+                    variant={certificateStatus?.variant ?? 'success'}
+                  />
+                </div>
+                <div className="space-y-2 text-sm text-[var(--foreground-secondary)]">
+                  <p>证书名称：{buildCertificateLabel(certificate)}</p>
+                  <p>生效时间：{formatDateTime(certificate.not_before)}</p>
+                  <p>到期时间：{formatDateTime(certificate.not_after)}</p>
+                  <p>备注：{certificate.remark || '暂无备注'}</p>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                  <SecondaryButton
+                    type="button"
+                    onClick={() => setIsCertificateDetailOpen(true)}
+                  >
+                    查看
+                  </SecondaryButton>
+                  <DangerButton
+                    type="button"
+                    onClick={handleDeleteCertificate}
+                    disabled={deleteCertificateMutation.isPending}
+                  >
+                    删除
+                  </DangerButton>
+                </div>
+              </div>
+            ) : (
+              <EmptyState
+                title="未绑定证书"
+                description="点击右上角“添加证书”后，可以在编辑网站时直接选择并应用。"
+              />
+            )}
+          </AppCard>
+        </div>
+
+        <AppCard
+          title="WAF"
+          description="全局规则组始终生效，可为当前网站叠加多个自定义规则组。"
+          action={
+            wafRouteID ? (
+              <PrimaryButton
+                type="button"
+                disabled={wafMutation.isPending}
+                onClick={() => wafMutation.mutate(wafSelectedIDs)}
+              >
+                {wafMutation.isPending ? '保存中...' : '保存 WAF'}
+              </PrimaryButton>
+            ) : null
+          }
+        >
+          {!wafRouteID ? (
+            <EmptyState
+              title="暂无可绑定规则"
+              description="当前网站还没有关联代理规则，创建规则后即可配置 WAF。"
+            />
+          ) : wafQuery.isLoading ? (
+            <LoadingState />
+          ) : wafQuery.isError ? (
+            <ErrorState
+              title="WAF 规则组加载失败"
+              description={getErrorMessage(wafQuery.error)}
+            />
+          ) : (
+            <div className="space-y-4">
+              {wafQuery.data?.global_rule_group ? (
+                <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div>
+                      <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                        {wafQuery.data.global_rule_group.name}
+                      </p>
+                      <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
+                        全局规则组默认应用到所有网站，不能在单站关闭。
+                      </p>
+                    </div>
+                    <StatusBadge
+                      label={
+                        wafQuery.data.global_rule_group.enabled
+                          ? '全局启用'
+                          : '全局停用'
+                      }
+                      variant={
+                        wafQuery.data.global_rule_group.enabled
+                          ? 'success'
+                          : 'warning'
+                      }
+                    />
+                  </div>
+                </div>
+              ) : null}
+              <div className="grid gap-3 md:grid-cols-2">
+                {(wafQuery.data?.rule_groups ?? []).map((group) => (
+                  <ToggleField
+                    key={group.id}
+                    label={group.name}
+                    description={`已应用 ${group.applied_site_count} 个网站，${group.enabled ? '启用中' : '已停用'}`}
+                    checked={wafSelectedIDs.includes(group.id)}
+                    onChange={(checked) => {
+                      setWafSelectedIDs((current) =>
+                        checked
+                          ? [...current, group.id].sort(
+                              (left, right) => left - right,
+                            )
+                          : current.filter((id) => id !== group.id),
+                      );
+                    }}
+                  />
+                ))}
+              </div>
+              {(wafQuery.data?.rule_groups ?? []).length === 0 ? (
+                <p className="text-sm text-[var(--foreground-secondary)]">
+                  暂无自定义规则组，可在 WAF 页面创建后再绑定。
+                </p>
+              ) : null}
+            </div>
+          )}
+        </AppCard>
+
+        <AppCard title="关联规则">
+          {relatedRoutes.length === 0 ? (
+            <EmptyState
+              title="暂无关联规则"
+              description="当前网站还没有命中任何代理规则。创建或调整规则后，这里会自动展示。"
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-[var(--border-default)] text-left text-sm">
+                <thead>
+                  <tr className="text-[var(--foreground-secondary)]">
+                    <th className="px-3 py-3 font-medium">规则域名</th>
+                    <th className="px-3 py-3 font-medium">源站</th>
+                    <th className="px-3 py-3 font-medium">HTTPS</th>
+                    <th className="px-3 py-3 font-medium">证书</th>
+                    <th className="px-3 py-3 font-medium">状态</th>
+                    <th className="px-3 py-3 font-medium">备注</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-[var(--border-default)]">
+                  {relatedRoutes.map((route) => {
+                    const routeCertificate = route.cert_id
+                      ? (certificateMap.get(route.cert_id) ?? null)
+                      : null;
+
+                    return (
+                      <tr key={route.id} className="align-top">
+                        <td className="px-3 py-4 text-[var(--foreground-primary)]">
+                          <div className="space-y-2">
+                            <p>{route.domain}</p>
+                            <StatusBadge
+                              label={
+                                route.domain === website.domain
+                                  ? '直接关联'
+                                  : '被网站覆盖'
+                              }
+                              variant={
+                                route.domain === website.domain
+                                  ? 'info'
+                                  : 'warning'
+                              }
+                            />
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          <div className="max-w-72 space-y-1 break-all">
+                            <p>{getUpstreamSummary(route)}</p>
+                            <p className="text-xs text-[var(--foreground-muted)]">
+                              回源主机名: {route.origin_host || '$host'}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="px-3 py-4">
+                          <div className="flex flex-wrap gap-2">
+                            <StatusBadge
+                              label={route.enable_https ? '启用 HTTPS' : 'HTTP'}
+                              variant={
+                                route.enable_https ? 'success' : 'warning'
+                              }
+                            />
+                            {route.redirect_http ? (
+                              <StatusBadge label="HTTP 跳转" variant="info" />
+                            ) : null}
+                          </div>
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {routeCertificate
+                            ? routeCertificate.name
+                            : '未绑定证书'}
+                        </td>
+                        <td className="px-3 py-4">
+                          <StatusBadge
+                            label={route.enabled ? '启用' : '停用'}
+                            variant={route.enabled ? 'success' : 'warning'}
+                          />
+                        </td>
+                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                          {route.remark || '暂无备注'}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </AppCard>
+      </div>
+
+      {isEditorOpen ? (
+        <WebsiteEditorModal
+          isOpen={isEditorOpen}
+          onClose={() => {
+            setIsEditorOpen(false);
+            setPreferredCertificateId(null);
+          }}
+          initialDomain={website}
+          certificates={certificates}
+          certificatesLoading={certificatesQuery.isLoading}
+          preferredCertificateId={preferredCertificateId}
+          onRequestImportCertificate={() => setIsCertificateImportOpen(true)}
+          onSaved={() => {
+            setPreferredCertificateId(null);
+            setFeedback({ tone: 'success', message: '网站已更新。' });
+          }}
+        />
+      ) : null}
+
+      {isCertificateImportOpen ? (
+        <CertificateImportModal
+          isOpen={isCertificateImportOpen}
+          onClose={() => setIsCertificateImportOpen(false)}
+          onImported={(importedCertificate) => {
+            setPreferredCertificateId(importedCertificate.id);
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${importedCertificate.name} 已导入，可在编辑网站时直接应用。`,
+            });
+            setIsEditorOpen(true);
+          }}
+        />
+      ) : null}
+
+      {isCertificateDetailOpen ? (
+        <CertificateDetailModal
+          certificateId={certificate?.id ?? null}
+          isOpen={isCertificateDetailOpen}
+          onClose={() => setIsCertificateDetailOpen(false)}
+          onEdit={() => {
+            setIsCertificateDetailOpen(false);
+            setIsCertificateEditorOpen(true);
+          }}
+          onDelete={() => {
+            setIsCertificateDetailOpen(false);
+            handleDeleteCertificate();
+          }}
+          deleting={deleteCertificateMutation.isPending}
+        />
+      ) : null}
+
+      {isCertificateEditorOpen ? (
+        <CertificateEditorModal
+          certificateId={certificate?.id ?? null}
+          isOpen={isCertificateEditorOpen}
+          onClose={() => setIsCertificateEditorOpen(false)}
+          onSaved={(updatedCertificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${updatedCertificate.name} 已更新。`,
+            });
+          }}
+          onConvert={(manualCertificate) => {
+            setIsCertificateEditorOpen(false);
+            setConvertCertificate(manualCertificate);
+          }}
+        />
+      ) : null}
+
+      {convertCertificate ? (
+        <CertificateApplyModal
+          isOpen={true}
+          onClose={() => setConvertCertificate(null)}
+          mode="convert-upload"
+          certificate={convertCertificate}
+          onApplied={(convertedCertificate) => {
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${convertedCertificate.name} 转换申请已提交。`,
+            });
+          }}
+        />
+      ) : null}
+    </>
+  );
+}

openflare-server/web/features/websites/components/website-editor-modal.tsx

@@ -0,0 +1,276 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { AppModal } from '@/components/ui/app-modal';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  createManagedDomain,
+  updateManagedDomain,
+} from '@/features/managed-domains/api/managed-domains';
+import type { ManagedDomainItem } from '@/features/managed-domains/types';
+import type { TlsCertificateItem } from '@/features/tls-certificates/types';
+import {
+  defaultManagedDomainValues,
+  managedDomainSchema,
+  type ManagedDomainFormValues,
+} from '@/features/websites/schemas';
+import {
+  buildCertificateLabel,
+  getErrorMessage,
+  getMatchTypeMeta,
+  toManagedDomainFormValues,
+  toManagedDomainPayload,
+} from '@/features/websites/utils';
+import {
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  SecondaryButton,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+
+interface WebsiteEditorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaved?: (domain: ManagedDomainItem, mode: 'create' | 'update') => void;
+  onRequestImportCertificate: () => void;
+  certificates: TlsCertificateItem[];
+  certificatesLoading?: boolean;
+  initialDomain?: ManagedDomainItem | null;
+  preferredCertificateId?: number | null;
+}
+
+export function WebsiteEditorModal({
+  isOpen,
+  onClose,
+  onSaved,
+  onRequestImportCertificate,
+  certificates,
+  certificatesLoading = false,
+  initialDomain = null,
+  preferredCertificateId = null,
+}: WebsiteEditorModalProps) {
+  const queryClient = useQueryClient();
+  const form = useForm<ManagedDomainFormValues>({
+    resolver: zodResolver(managedDomainSchema),
+    defaultValues: defaultManagedDomainValues,
+  });
+
+  const watchedDomain = useWatch({
+    control: form.control,
+    name: 'domain',
+  });
+  const watchedCertId = useWatch({
+    control: form.control,
+    name: 'cert_id',
+  });
+  const watchedEnabled = useWatch({
+    control: form.control,
+    name: 'enabled',
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: async (values: ManagedDomainFormValues) => {
+      const payload = toManagedDomainPayload(values);
+      return initialDomain
+        ? updateManagedDomain(initialDomain.id, payload)
+        : createManagedDomain(payload);
+    },
+    onSuccess: async (domain) => {
+      await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
+      onSaved?.(domain, initialDomain ? 'update' : 'create');
+      handleClose();
+    },
+  });
+
+  const currentCertificate = watchedCertId
+    ? (certificates.find((item) => item.id === Number(watchedCertId)) ?? null)
+    : null;
+
+  const handleSubmit = form.handleSubmit((values) => {
+    saveMutation.mutate(values);
+  });
+
+  const handleClose = () => {
+    saveMutation.reset();
+    form.reset(defaultManagedDomainValues);
+    onClose();
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    form.reset(
+      initialDomain
+        ? toManagedDomainFormValues(initialDomain)
+        : defaultManagedDomainValues,
+    );
+  }, [form, initialDomain, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen || !preferredCertificateId) {
+      return;
+    }
+
+    form.setValue('cert_id', String(preferredCertificateId), {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  }, [form, isOpen, preferredCertificateId]);
+
+  return (
+    <AppModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={initialDomain ? '编辑网站' : '新增网站'}
+      description="录入域名并选择绑定证书。证书可在弹窗内直接新增，导入成功后会自动回填。"
+      footer={
+        <div className="flex flex-wrap justify-end gap-3">
+          <SecondaryButton
+            type="button"
+            onClick={handleClose}
+            disabled={saveMutation.isPending}
+          >
+            取消
+          </SecondaryButton>
+          <PrimaryButton
+            type="submit"
+            form="website-editor-form"
+            disabled={saveMutation.isPending}
+          >
+            {saveMutation.isPending
+              ? '保存中...'
+              : initialDomain
+                ? '保存网站'
+                : '创建网站'}
+          </PrimaryButton>
+        </div>
+      }
+    >
+      <form
+        id="website-editor-form"
+        className="space-y-5"
+        onSubmit={handleSubmit}
+      >
+        {saveMutation.isError ? (
+          <InlineMessage
+            tone="danger"
+            message={getErrorMessage(saveMutation.error)}
+          />
+        ) : null}
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <ResourceField
+            label="域名"
+            hint="示例：example.com 或 *.example.com"
+            error={form.formState.errors.domain?.message}
+          >
+            <ResourceInput
+              placeholder="example.com 或 *.example.com"
+              {...form.register('domain')}
+            />
+          </ResourceField>
+
+          <ResourceField
+            label="绑定证书"
+            hint="默认证书会用于该网站的自动匹配与规则推荐。"
+            error={form.formState.errors.cert_id?.message}
+          >
+            <div className="space-y-3">
+              <ResourceSelect
+                value={watchedCertId}
+                disabled={certificatesLoading}
+                onChange={(event) =>
+                  form.setValue('cert_id', event.target.value, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  })
+                }
+              >
+                <option value="">不绑定证书</option>
+                {certificates.map((certificate) => (
+                  <option key={certificate.id} value={certificate.id}>
+                    {buildCertificateLabel(certificate)}
+                  </option>
+                ))}
+              </ResourceSelect>
+              <SecondaryButton
+                type="button"
+                onClick={onRequestImportCertificate}
+                className="w-full sm:w-auto"
+              >
+                添加证书
+              </SecondaryButton>
+            </div>
+          </ResourceField>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              当前域名
+            </p>
+            <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+              {watchedDomain?.trim() || '未填写域名'}
+            </p>
+          </div>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              匹配类型
+            </p>
+            <div className="mt-2">
+              {watchedDomain?.trim() ? (
+                <StatusBadge {...getMatchTypeMeta(watchedDomain.trim())} />
+              ) : (
+                <StatusBadge label="等待输入" variant="warning" />
+              )}
+            </div>
+          </div>
+          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4">
+            <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
+              当前证书
+            </p>
+            <div className="mt-2">
+              <StatusBadge
+                label={
+                  currentCertificate ? currentCertificate.name : '未绑定证书'
+                }
+                variant={currentCertificate ? 'success' : 'warning'}
+              />
+            </div>
+          </div>
+        </div>
+
+        <ToggleField
+          label="启用网站"
+          description="停用后该网站不会参与自动匹配，但记录会保留。"
+          checked={watchedEnabled}
+          onChange={(checked) =>
+            form.setValue('enabled', checked, {
+              shouldDirty: true,
+              shouldValidate: true,
+            })
+          }
+        />
+
+        <ResourceField
+          label="备注"
+          error={form.formState.errors.remark?.message}
+        >
+          <ResourceInput
+            placeholder="例如：主站 / 泛域名 / 生产"
+            {...form.register('remark')}
+          />
+        </ResourceField>
+      </form>
+    </AppModal>
+  );
+}

openflare-server/web/features/websites/components/websites-page.tsx

@@ -0,0 +1,247 @@
+'use client';
+
+import Link from 'next/link';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import { EmptyState } from '@/components/feedback/empty-state';
+import { ErrorState } from '@/components/feedback/error-state';
+import { InlineMessage } from '@/components/feedback/inline-message';
+import { LoadingState } from '@/components/feedback/loading-state';
+import { PageHeader } from '@/components/layout/page-header';
+import { AppCard } from '@/components/ui/app-card';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  deleteManagedDomain,
+  getManagedDomains,
+} from '@/features/managed-domains/api/managed-domains';
+import type { ManagedDomainItem } from '@/features/managed-domains/types';
+import { getTlsCertificates } from '@/features/tls-certificates/api/tls-certificates';
+import { CertificateImportModal } from '@/features/websites/components/certificate-import-modal';
+import { WebsiteEditorModal } from '@/features/websites/components/website-editor-modal';
+import {
+  buildCertificateLabel,
+  getErrorMessage,
+  getMatchTypeMeta,
+} from '@/features/websites/utils';
+import {
+  DangerButton,
+  PrimaryButton,
+} from '@/features/shared/components/resource-primitives';
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+export function WebsitesPage() {
+  const queryClient = useQueryClient();
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [isWebsiteModalOpen, setIsWebsiteModalOpen] = useState(false);
+  const [isCertificateImportOpen, setIsCertificateImportOpen] = useState(false);
+  const [preferredCertificateId, setPreferredCertificateId] = useState<
+    number | null
+  >(null);
+
+  const managedDomainsQuery = useQuery({
+    queryKey: ['managed-domains'],
+    queryFn: getManagedDomains,
+  });
+  const certificatesQuery = useQuery({
+    queryKey: ['tls-certificates', 'list'],
+    queryFn: getTlsCertificates,
+  });
+
+  const deleteDomainMutation = useMutation({
+    mutationFn: deleteManagedDomain,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '网站已删除。' });
+      await queryClient.invalidateQueries({ queryKey: ['managed-domains'] });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const domains = useMemo(
+    () => managedDomainsQuery.data ?? [],
+    [managedDomainsQuery.data],
+  );
+  const certificates = useMemo(
+    () => certificatesQuery.data ?? [],
+    [certificatesQuery.data],
+  );
+  const certificateMap = useMemo(
+    () => new Map(certificates.map((item) => [item.id, item])),
+    [certificates],
+  );
+
+  const handleOpenWebsiteModal = () => {
+    setPreferredCertificateId(null);
+    setFeedback(null);
+    setIsWebsiteModalOpen(true);
+  };
+
+  const handleDeleteDomain = (domain: ManagedDomainItem) => {
+    if (!window.confirm(`确认删除网站 ${domain.domain} 吗？`)) {
+      return;
+    }
+
+    setFeedback(null);
+    deleteDomainMutation.mutate(domain.id);
+  };
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="网站"
+          description="新增网站和添加证书。"
+          action={
+            <div className="flex flex-wrap gap-3">
+              <Link
+                href="/website/certificate"
+                className="inline-flex min-h-[46px] 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)]"
+              >
+                证书列表
+              </Link>
+              <PrimaryButton type="button" onClick={handleOpenWebsiteModal}>
+                新增网站
+              </PrimaryButton>
+            </div>
+          }
+        />
+
+        {feedback ? (
+          <InlineMessage
+            tone={feedback.tone}
+            message={feedback.message}
+            onClear={() => setFeedback(null)}
+          />
+        ) : null}
+
+        <AppCard
+          title="网站列表"
+          description="查看网站绑定的证书、启用状态和更新时间。"
+        >
+          {managedDomainsQuery.isLoading ? (
+            <LoadingState />
+          ) : managedDomainsQuery.isError ? (
+            <ErrorState
+              title="网站列表加载失败"
+              description={getErrorMessage(managedDomainsQuery.error)}
+            />
+          ) : domains.length === 0 ? (
+            <EmptyState
+              title="暂无网站"
+              description="点击右上角“新增网站”开始录入。录入时如还没有证书，也可以直接在弹窗里添加。"
+            />
+          ) : (
+            <div className="grid gap-4 lg:grid-cols-2">
+              {domains.map((domain) => {
+                const certificate = domain.cert_id
+                  ? (certificateMap.get(domain.cert_id) ?? null)
+                  : null;
+                const matchType = getMatchTypeMeta(domain.domain);
+
+                return (
+                  <article
+                    key={domain.id}
+                    className="rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5"
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="space-y-3">
+                        <div className="space-y-2">
+                          <div className="flex flex-wrap items-center gap-2">
+                            <h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
+                              {domain.domain}
+                            </h2>
+                            <StatusBadge
+                              label={matchType.label}
+                              variant={matchType.variant}
+                            />
+                            <StatusBadge
+                              label={domain.enabled ? '启用' : '停用'}
+                              variant={domain.enabled ? 'success' : 'warning'}
+                            />
+                          </div>
+                          <p className="text-sm text-[var(--foreground-secondary)]">
+                            {domain.remark || '暂无备注'}
+                          </p>
+                        </div>
+
+                        <div className="grid gap-3 md:grid-cols-1">
+                          <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-panel)] px-4 py-3">
+                            <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                              绑定证书
+                            </p>
+                            <p className="mt-2 text-sm text-[var(--foreground-primary)]">
+                              {certificate
+                                ? buildCertificateLabel(certificate)
+                                : '未绑定证书'}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      <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)]"
+                        >
+                          详情
+                        </Link>
+                        <DangerButton
+                          type="button"
+                          onClick={() => handleDeleteDomain(domain)}
+                          disabled={deleteDomainMutation.isPending}
+                        >
+                          删除
+                        </DangerButton>
+                      </div>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          )}
+        </AppCard>
+      </div>
+
+      {isWebsiteModalOpen ? (
+        <WebsiteEditorModal
+          isOpen={isWebsiteModalOpen}
+          onClose={() => {
+            setIsWebsiteModalOpen(false);
+            setPreferredCertificateId(null);
+          }}
+          certificates={certificates}
+          certificatesLoading={certificatesQuery.isLoading}
+          preferredCertificateId={preferredCertificateId}
+          onRequestImportCertificate={() => setIsCertificateImportOpen(true)}
+          onSaved={(_, mode) => {
+            setPreferredCertificateId(null);
+            setFeedback({
+              tone: 'success',
+              message: mode === 'create' ? '网站已创建。' : '网站已更新。',
+            });
+          }}
+        />
+      ) : null}
+
+      {isCertificateImportOpen ? (
+        <CertificateImportModal
+          isOpen={isCertificateImportOpen}
+          onClose={() => setIsCertificateImportOpen(false)}
+          onImported={(certificate) => {
+            setPreferredCertificateId(certificate.id);
+            setFeedback({
+              tone: 'success',
+              message: `证书 ${certificate.name} 已导入，可直接用于当前网站。`,
+            });
+          }}
+        />
+      ) : null}
+    </>
+  );
+}

openflare-server/web/features/websites/schemas.ts

@@ -0,0 +1,99 @@
+import {z} from 'zod';
+
+export const managedDomainSchema = z.object({
+  domain: z
+    .string()
+    .trim()
+    .min(1, '请输入域名')
+    .max(255, '域名不能超过 255 个字符')
+    .refine(
+      (value) => !value.includes('://') && !value.includes('/'),
+      '域名格式不合法',
+    )
+    .refine(
+      (value) =>
+        /^(?:\*\.)?(?=.{1,253}$)(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$/.test(
+          value,
+        ),
+      '域名格式不合法',
+    )
+    .refine(
+      (value) =>
+        !value.includes('*') ||
+        (value.startsWith('*.') && value.indexOf('*', 1) === -1),
+      '通配符域名仅支持 *.example.com 格式',
+    ),
+  cert_id: z.string(),
+  enabled: z.boolean(),
+  remark: z.string().max(255, '备注不能超过 255 个字符'),
+});
+
+export const manualImportSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, '请输入证书名称')
+    .max(255, '证书名称不能超过 255 个字符'),
+  cert_pem: z.string().trim().min(1, '请输入证书 PEM 内容'),
+  key_pem: z.string().trim().min(1, '请输入私钥 PEM 内容'),
+  remark: z.string().max(255, '备注不能超过 255 个字符'),
+});
+
+export type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
+export type ManualImportFormValues = z.infer<typeof manualImportSchema>;
+
+export type FileImportFormValues = {
+  name: string;
+  remark: string;
+};
+
+export const defaultManagedDomainValues: ManagedDomainFormValues = {
+  domain: '',
+  cert_id: '',
+  enabled: true,
+  remark: '',
+};
+
+export const defaultManualImportValues: ManualImportFormValues = {
+  name: '',
+  cert_pem: '',
+  key_pem: '',
+  remark: '',
+};
+
+export const defaultFileImportValues: FileImportFormValues = {
+  name: '',
+  remark: '',
+};
+
+export const acmeApplySchema = z.object({
+  name: z.string().trim().min(1, '请输入证书名称').max(255),
+  primary_domain: z.string().trim().min(1, '请输入主域名'),
+  other_domains: z.string(),
+  dns_account_id: z.coerce.number().min(1, '请选择 DNS 账号'),
+  acme_account_id: z.coerce.number(),
+  key_algorithm: z.string(),
+  auto_renew: z.boolean(),
+  disable_cname: z.boolean().default(false),
+  skip_dns: z.boolean().default(false),
+  dns1: z.string().default(''),
+  dns2: z.string().default(''),
+  remark: z.string().max(255),
+});
+
+export type AcmeApplyFormValues = z.infer<typeof acmeApplySchema>;
+
+export const defaultAcmeApplyValues: AcmeApplyFormValues = {
+  name: '',
+  primary_domain: '',
+  other_domains: '',
+  dns_account_id: 0,
+  acme_account_id: 0,
+  key_algorithm: 'RSA2048',
+  auto_renew: true,
+  disable_cname: false,
+  skip_dns: false,
+  dns1: '',
+  dns2: '',
+  remark: '',
+};

openflare-server/web/features/websites/utils.ts

@@ -0,0 +1,118 @@
+import type {
+  ManagedDomainItem,
+  ManagedDomainMutationPayload,
+} from '@/features/managed-domains/types';
+import type {
+  TlsCertificateFileImportPayload,
+  TlsCertificateItem,
+  TlsCertificateMutationPayload,
+} from '@/features/tls-certificates/types';
+
+import type {
+  FileImportFormValues,
+  ManagedDomainFormValues,
+  ManualImportFormValues,
+} from '@/features/websites/schemas';
+import { formatDateTime } from '@/lib/utils/date';
+
+export function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+export function getMatchTypeMeta(domain: string) {
+  return domain.startsWith('*.')
+    ? { label: '通配符', variant: 'warning' as const }
+    : { label: '精确匹配', variant: 'info' as const };
+}
+
+export function getCertificateStatus(certificate: TlsCertificateItem) {
+  const expiresAt = new Date(certificate.not_after).getTime();
+  const diffMs = expiresAt - Date.now();
+  const days = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+
+  if (Number.isNaN(expiresAt)) {
+    return { label: '有效期未知', variant: 'warning' as const };
+  }
+
+  if (days < 0) {
+    return { label: '已过期', variant: 'danger' as const };
+  }
+
+  if (days <= 30) {
+    return { label: `${days} 天内到期`, variant: 'warning' as const };
+  }
+
+  return { label: '有效', variant: 'success' as const };
+}
+
+export function buildCertificateLabel(certificate: TlsCertificateItem) {
+  return certificate.not_after
+    ? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
+    : certificate.name;
+}
+
+export function toManagedDomainPayload(
+  values: ManagedDomainFormValues,
+): ManagedDomainMutationPayload {
+  return {
+    domain: values.domain.trim().toLowerCase(),
+    cert_id: values.cert_id ? Number(values.cert_id) : null,
+    enabled: values.enabled,
+    remark: values.remark.trim(),
+  };
+}
+
+export function toManagedDomainFormValues(
+  domain: ManagedDomainItem,
+): ManagedDomainFormValues {
+  return {
+    domain: domain.domain,
+    cert_id: domain.cert_id ? String(domain.cert_id) : '',
+    enabled: domain.enabled,
+    remark: domain.remark || '',
+  };
+}
+
+export function toManualPayload(
+  values: ManualImportFormValues,
+): TlsCertificateMutationPayload {
+  return {
+    name: values.name.trim(),
+    cert_pem: values.cert_pem.trim(),
+    key_pem: values.key_pem.trim(),
+    remark: values.remark.trim(),
+  };
+}
+
+export function toFilePayload(
+  values: FileImportFormValues,
+  certFile: File | null,
+  keyFile: File | null,
+): TlsCertificateFileImportPayload {
+  if (!certFile || !keyFile) {
+    throw new Error('请选择证书文件和私钥文件。');
+  }
+
+  return {
+    name: values.name.trim(),
+    remark: values.remark.trim(),
+    certFile,
+    keyFile,
+  };
+}
+
+export function isRouteRelatedToManagedDomain(
+  managedDomain: string,
+  routeDomain: string,
+) {
+  if (managedDomain === routeDomain) {
+    return true;
+  }
+
+  if (!managedDomain.startsWith('*.')) {
+    return false;
+  }
+
+  const suffix = managedDomain.slice(2);
+  return routeDomain.endsWith(`.${suffix}`);
+}