feat: unify website and certificate management

atsf_server/web/app/(dashboard)/managed-domain/page.tsx

@@ -1,5 +0,0 @@
-import { ManagedDomainsPage as ManagedDomainsFeaturePage } from '@/features/managed-domains/components/managed-domains-page';
-
-export default function ManagedDomainsPage() {
-  return <ManagedDomainsFeaturePage />;
-}

atsf_server/web/app/(dashboard)/tls-certificate/page.tsx

@@ -1,5 +0,0 @@
-import { TlsCertificatesPage as TlsCertificatesFeaturePage } from '@/features/tls-certificates/components/tls-certificates-page';
-
-export default function TlsCertificatesPage() {
-  return <TlsCertificatesFeaturePage />;
-}

atsf_server/web/app/(dashboard)/website/page.tsx

@@ -0,0 +1,5 @@
+import { WebsitesPage } from '@/features/websites/components/websites-page';
+
+export default function WebsiteRoute() {
+  return <WebsitesPage />;
+}

atsf_server/web/features/dashboard/components/dashboard-overview.tsx

@@ -59,7 +59,7 @@ function SummaryCard({
       action={
         <Link
           href={href}
-          className='inline-flex items-center rounded-full border border-[var(--border-default)] px-3 py-1.5 text-xs text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
+          className="inline-flex items-center rounded-full border border-[var(--border-default)] px-3 py-1.5 text-xs text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
         >
           进入模块
         </Link>
@@ -68,18 +68,23 @@ function SummaryCard({
       {status === 'pending' ? (
         <LoadingState />
       ) : status === 'error' ? (
-        <ErrorState title={`${title}加载失败`} description={getErrorMessage(error)} />
+        <ErrorState
+          title={`${title}加载失败`}
+          description={getErrorMessage(error)}
+        />
       ) : (
-        <div className='grid gap-3 sm:grid-cols-2'>
+        <div className="grid gap-3 sm:grid-cols-2">
           {items.map((item) => (
             <div
               key={item.label}
-              className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4'
+              className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-4"
             >
-              <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>
+              <p className="text-xs tracking-[0.2em] text-[var(--foreground-muted)] uppercase">
                 {item.label}
               </p>
-              <p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
+              <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
+                {item.value}
+              </p>
             </div>
           ))}
         </div>
@@ -99,9 +104,18 @@ export function DashboardOverview() {
   ] = useQueries({
     queries: [
       { queryKey: ['dashboard', 'nodes'], queryFn: getNodes },
-      { queryKey: ['dashboard', 'config-versions'], queryFn: getConfigVersions },
+      {
-      { queryKey: ['dashboard', 'managed-domains'], queryFn: getManagedDomains },
+        queryKey: ['dashboard', 'config-versions'],
-      { queryKey: ['dashboard', 'tls-certificates'], queryFn: getTlsCertificates },
+        queryFn: getConfigVersions,
+      },
+      {
+        queryKey: ['dashboard', 'managed-domains'],
+        queryFn: getManagedDomains,
+      },
+      {
+        queryKey: ['dashboard', 'tls-certificates'],
+        queryFn: getTlsCertificates,
+      },
       { queryKey: ['dashboard', 'proxy-routes'], queryFn: getProxyRoutes },
       {
         queryKey: ['dashboard', 'users'],
@@ -125,7 +139,11 @@ export function DashboardOverview() {
 
   const expiringCertificates = certificates.filter((item) => {
     const expiresAt = new Date(item.not_after).getTime();
-    return !Number.isNaN(expiresAt) && expiresAt >= Date.now() && expiresAt - Date.now() <= 30 * 24 * 60 * 60 * 1000;
+    return (
+      !Number.isNaN(expiresAt) &&
+      expiresAt >= Date.now() &&
+      expiresAt - Date.now() <= 30 * 24 * 60 * 60 * 1000
+    );
   }).length;
 
   const expiredCertificates = certificates.filter((item) => {
@@ -142,9 +160,18 @@ export function DashboardOverview() {
       error: nodesQuery.error,
       items: [
         { label: '节点总数', value: nodes.length },
-        { label: '在线节点', value: nodes.filter((item) => item.status === 'online').length },
+        {
-        { label: '待接入节点', value: nodes.filter((item) => item.status === 'pending').length },
+          label: '在线节点',
-        { label: '自动更新', value: nodes.filter((item) => item.auto_update_enabled).length },
+          value: nodes.filter((item) => item.status === 'online').length,
+        },
+        {
+          label: '待接入节点',
+          value: nodes.filter((item) => item.status === 'pending').length,
+        },
+        {
+          label: '自动更新',
+          value: nodes.filter((item) => item.auto_update_enabled).length,
+        },
       ],
     },
     {
@@ -155,34 +182,56 @@ export function DashboardOverview() {
       error: versionsQuery.error,
       items: [
         { label: '版本总数', value: versions.length },
-        { label: '激活版本', value: versions.filter((item) => item.is_active).length },
+        {
-        { label: '最近创建', value: versions[0]?.created_at ? formatDateTime(versions[0].created_at) : '—' },
+          label: '激活版本',
+          value: versions.filter((item) => item.is_active).length,
+        },
+        {
+          label: '最近创建',
+          value: versions[0]?.created_at
+            ? formatDateTime(versions[0].created_at)
+            : '—',
+        },
       ],
     },
     {
       title: '规则摘要',
       description: '查看域名规则启用状态、通配符覆盖和证书绑定规模。',
-      href: '/managed-domain',
+      href: '/website',
       status: managedDomainsQuery.status,
       error: managedDomainsQuery.error,
       items: [
         { label: '域名规则', value: domains.length },
-        { label: '已启用', value: domains.filter((item) => item.enabled).length },
+        {
-        { label: '通配符规则', value: domains.filter((item) => item.domain.startsWith('*.')).length },
+          label: '已启用',
-        { label: '已绑证书', value: domains.filter((item) => item.cert_id).length },
+          value: domains.filter((item) => item.enabled).length,
+        },
+        {
+          label: '通配符规则',
+          value: domains.filter((item) => item.domain.startsWith('*.')).length,
+        },
+        {
+          label: '已绑证书',
+          value: domains.filter((item) => item.cert_id).length,
+        },
       ],
     },
     {
       title: '证书概览',
       description: '快速识别证书存量、近 30 天到期风险和过期情况。',
-      href: '/tls-certificate',
+      href: '/website',
       status: certificatesQuery.status,
       error: certificatesQuery.error,
       items: [
         { label: '证书总数', value: certificates.length },
         { label: '30 天内到期', value: expiringCertificates },
         { label: '已过期', value: expiredCertificates },
-        { label: '最近更新', value: certificates[0]?.updated_at ? formatDateTime(certificates[0].updated_at) : '—' },
+        {
+          label: '最近更新',
+          value: certificates[0]?.updated_at
+            ? formatDateTime(certificates[0].updated_at)
+            : '—',
+        },
       ],
     },
     {
@@ -193,11 +242,21 @@ export function DashboardOverview() {
       error: proxyRoutesQuery.error,
       items: [
         { label: '规则总数', value: routes.length },
-        { label: '已启用', value: routes.filter((item) => item.enabled).length },
+        {
-        { label: 'HTTPS 规则', value: routes.filter((item) => item.enable_https).length },
+          label: '已启用',
+          value: routes.filter((item) => item.enabled).length,
+        },
+        {
+          label: 'HTTPS 规则',
+          value: routes.filter((item) => item.enable_https).length,
+        },
         {
           label: '自定义请求头',
-          value: routes.reduce((count, route) => count + parseCustomHeaders(route.custom_headers).length, 0),
+          value: routes.reduce(
+            (count, route) =>
+              count + parseCustomHeaders(route.custom_headers).length,
+            0,
+          ),
         },
       ],
     },
@@ -209,16 +268,25 @@ export function DashboardOverview() {
       error: usersQuery.error,
       items: [
         { label: '用户总数', value: users.length },
-        { label: '管理员', value: users.filter((item) => item.role >= 10).length },
+        {
-        { label: '已激活', value: users.filter((item) => item.status === 1).length },
+          label: '管理员',
-        { label: '已封禁', value: users.filter((item) => item.status !== 1).length },
+          value: users.filter((item) => item.role >= 10).length,
+        },
+        {
+          label: '已激活',
+          value: users.filter((item) => item.status === 1).length,
+        },
+        {
+          label: '已封禁',
+          value: users.filter((item) => item.status !== 1).length,
+        },
       ],
     },
   ] as const;
 
   return (
-    <div className='space-y-6'>
+    <div className="space-y-6">
-      <div className='grid gap-6 xl:grid-cols-2'>
+      <div className="grid gap-6 xl:grid-cols-2">
         {dashboardCards.map((card) => (
           <SummaryCard key={card.title} {...card} />
         ))}

atsf_server/web/features/managed-domains/components/managed-domains-page.tsx

@@ -1,411 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
-import { useForm, useWatch } from 'react-hook-form';
-import { z } from 'zod';
-
-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 { AppModal } from '@/components/ui/app-modal';
-import { AppCard } from '@/components/ui/app-card';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  createManagedDomain,
-  deleteManagedDomain,
-  getManagedDomainCertificates,
-  getManagedDomains,
-  updateManagedDomain,
-} from '@/features/managed-domains/api/managed-domains';
-import type {
-  ManagedDomainCertificateOption,
-  ManagedDomainItem,
-  ManagedDomainMutationPayload,
-} from '@/features/managed-domains/types';
-import {
-  DangerButton,
-  PrimaryButton,
-  ResourceField,
-  ResourceInput,
-  ResourceSelect,
-  SecondaryButton,
-  ToggleField,
-} from '@/features/shared/components/resource-primitives';
-import { formatDateTime } from '@/lib/utils/date';
-
-const managedDomainsQueryKey = ['managed-domains'] as const;
-const managedDomainCertificatesQueryKey = ['managed-domains', 'certificates'] as const;
-
-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 个字符'),
-});
-
-type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
-
-type FeedbackState = {
-  tone: 'info' | 'success' | 'danger';
-  message: string;
-};
-
-const defaultValues: ManagedDomainFormValues = {
-  domain: '',
-  cert_id: '',
-  enabled: true,
-  remark: '',
-};
-
-function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
-}
-
-function getMatchTypeMeta(domain: string) {
-  return domain.startsWith('*.')
-    ? { label: '通配符', variant: 'warning' as const }
-    : { label: '精确匹配', variant: 'info' as const };
-}
-
-function buildCertificateLabel(certificate: ManagedDomainCertificateOption) {
-  return certificate.not_after
-    ? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
-    : certificate.name;
-}
-
-function toPayload(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(),
-  };
-}
-
-function toFormValues(domain: ManagedDomainItem): ManagedDomainFormValues {
-  return {
-    domain: domain.domain,
-    cert_id: domain.cert_id ? String(domain.cert_id) : '',
-    enabled: domain.enabled,
-    remark: domain.remark || '',
-  };
-}
-
-export function ManagedDomainsPage() {
-  const queryClient = useQueryClient();
-  const [editingDomainId, setEditingDomainId] = useState<number | null>(null);
-  const [isEditorOpen, setIsEditorOpen] = useState(false);
-  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
-
-  const form = useForm<ManagedDomainFormValues>({
-    resolver: zodResolver(managedDomainSchema),
-    defaultValues,
-  });
-
-  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 managedDomainsQuery = useQuery({
-    queryKey: managedDomainsQueryKey,
-    queryFn: getManagedDomains,
-  });
-
-  const certificatesQuery = useQuery({
-    queryKey: managedDomainCertificatesQueryKey,
-    queryFn: getManagedDomainCertificates,
-  });
-
-  const saveMutation = useMutation({
-    mutationFn: async (values: ManagedDomainFormValues) => {
-      const payload = toPayload(values);
-      return editingDomainId
-        ? updateManagedDomain(editingDomainId, payload)
-        : createManagedDomain(payload);
-    },
-    onSuccess: async () => {
-      setFeedback({
-        tone: 'success',
-        message: editingDomainId ? '域名规则已更新。' : '域名规则已创建。',
-      });
-      setEditingDomainId(null);
-      setIsEditorOpen(false);
-      form.reset(defaultValues);
-      await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
-    },
-    onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: deleteManagedDomain,
-    onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '域名规则已删除。' });
-      await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
-    },
-    onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
-    },
-  });
-
-  const certificates = useMemo(() => certificatesQuery.data ?? [], [certificatesQuery.data]);
-  const domains = useMemo(() => managedDomainsQuery.data ?? [], [managedDomainsQuery.data]);
-
-  const certificateMap = useMemo(
-    () => new Map(certificates.map((item) => [item.id, item])),
-    [certificates],
-  );
-
-  const currentCertificate = watchedCertId ? certificateMap.get(Number(watchedCertId)) : null;
-
-  const handleReset = () => {
-    setEditingDomainId(null);
-    setIsEditorOpen(false);
-    setFeedback(null);
-    form.reset(defaultValues);
-  };
-
-  const handleCreate = () => {
-    setEditingDomainId(null);
-    setFeedback(null);
-    form.reset(defaultValues);
-    setIsEditorOpen(true);
-  };
-
-  const handleEdit = (domain: ManagedDomainItem) => {
-    setEditingDomainId(domain.id);
-    setFeedback(null);
-    form.reset(toFormValues(domain));
-    setIsEditorOpen(true);
-  };
-
-  const handleDelete = (domain: ManagedDomainItem) => {
-    if (!window.confirm(`确认删除域名规则 ${domain.domain} 吗？`)) {
-      return;
-    }
-
-    setFeedback(null);
-    deleteMutation.mutate(domain.id);
-  };
-
-  const handleSubmit = form.handleSubmit((values) => {
-    setFeedback(null);
-    saveMutation.mutate(values);
-  });
-
-  return (
-    <>
-    <div className='space-y-6'>
-      <PageHeader
-        title='域名管理'
-        description='维护精确域名与通配符域名，为其绑定默认证书，并控制是否参与自动匹配与发布。'
-        action={
-          <PrimaryButton type='button' onClick={handleCreate}>
-            新增域名
-          </PrimaryButton>
-        }
-      />
-
-      {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
-
-      <AppCard
-        title='域名规则列表'
-        action={
-          <SecondaryButton
-            type='button'
-            onClick={() => void queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey })}
-          >
-            刷新
-          </SecondaryButton>
-        }
-      >
-        {managedDomainsQuery.isLoading ? (
-          <LoadingState />
-        ) : managedDomainsQuery.isError ? (
-          <ErrorState title='域名规则加载失败' description={getErrorMessage(managedDomainsQuery.error)} />
-        ) : domains.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'>绑定证书</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>
-                  <th className='px-3 py-3 font-medium'>操作</th>
-                </tr>
-              </thead>
-              <tbody className='divide-y divide-[var(--border-default)]'>
-                {domains.map((domain) => {
-                  const certificate = domain.cert_id ? certificateMap.get(domain.cert_id) : null;
-                  const matchType = getMatchTypeMeta(domain.domain);
-
-                  return (
-                    <tr key={domain.id} className='align-top'>
-                      <td className='px-3 py-4 font-medium text-[var(--foreground-primary)]'>{domain.domain}</td>
-                      <td className='px-3 py-4'>
-                        <StatusBadge label={matchType.label} variant={matchType.variant} />
-                      </td>
-                      <td className='px-3 py-4 text-[var(--foreground-secondary)]'>
-                        {certificate ? certificate.name : '未绑定'}
-                      </td>
-                      <td className='px-3 py-4'>
-                        <StatusBadge
-                          label={domain.enabled ? '启用' : '停用'}
-                          variant={domain.enabled ? 'success' : 'warning'}
-                        />
-                      </td>
-                      <td className='px-3 py-4 text-[var(--foreground-secondary)]'>{domain.remark || '—'}</td>
-                      <td className='px-3 py-4 text-[var(--foreground-secondary)]'>
-                        {formatDateTime(domain.updated_at)}
-                      </td>
-                      <td className='px-3 py-4'>
-                        <div className='flex flex-wrap gap-2'>
-                          <SecondaryButton
-                            type='button'
-                            onClick={() => handleEdit(domain)}
-                            className='px-3 py-2 text-xs'
-                          >
-                            编辑
-                          </SecondaryButton>
-                          <DangerButton
-                            type='button'
-                            onClick={() => handleDelete(domain)}
-                            disabled={deleteMutation.isPending}
-                            className='px-3 py-2 text-xs'
-                          >
-                            删除
-                          </DangerButton>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </AppCard>
-    </div>
-    <AppModal
-      isOpen={isEditorOpen}
-      onClose={handleReset}
-      title={editingDomainId ? '编辑域名规则' : '新增域名规则'}
-      description='支持精确域名与单层通配符域名，证书可留空以仅维护资产关系。'
-      footer={
-        <div className='flex flex-wrap justify-end gap-3'>
-          <SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
-            取消
-          </SecondaryButton>
-          <PrimaryButton type='submit' form='managed-domain-editor-form' disabled={saveMutation.isPending}>
-            {saveMutation.isPending ? '保存中...' : editingDomainId ? '保存修改' : '新增域名'}
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <form id='managed-domain-editor-form' className='space-y-5' onSubmit={handleSubmit}>
-        <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}
-          >
-            <ResourceSelect
-              value={watchedCertId}
-              disabled={certificatesQuery.isLoading}
-              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>
-          </ResourceField>
-        </div>
-
-        <ToggleField
-          label='启用规则'
-          description='停用后该域名不会参与证书自动匹配，但记录会保留。'
-          checked={watchedEnabled}
-          onChange={(checked) =>
-            form.setValue('enabled', checked, {
-              shouldDirty: true,
-              shouldValidate: true,
-            })
-          }
-        />
-
-        <AppCard title='匹配提示' description='自动证书推荐时，精确域名优先级高于通配符域名。'>
-          <div className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
-            <p>
-              当前输入：
-              <span className='ml-2 font-medium text-[var(--foreground-primary)]'>
-                {watchedDomain.trim() || '未填写域名'}
-              </span>
-            </p>
-            <div className='flex flex-wrap gap-2'>
-              {watchedDomain.trim() ? (
-                <StatusBadge {...getMatchTypeMeta(watchedDomain.trim())} />
-              ) : (
-                <StatusBadge label='等待输入' variant='warning' />
-              )}
-              <StatusBadge
-                label={currentCertificate ? `证书：${currentCertificate.name}` : '未绑定证书'}
-                variant={currentCertificate ? 'success' : 'warning'}
-              />
-            </div>
-            <p>
-              建议只为真正需要默认推荐的域名绑定证书；如果同一 hostname 同时命中精确和通配符规则，
-              系统会优先使用精确匹配。
-            </p>
-          </div>
-        </AppCard>
-
-        <ResourceField
-          label='备注'
-          hint='可选，用于记录归属、用途或生效说明。'
-          error={form.formState.errors.remark?.message}
-        >
-          <ResourceInput placeholder='例如：主站泛域名证书' {...form.register('remark')} />
-        </ResourceField>
-      </form>
-    </AppModal>
-    </>
-  );
-}

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

@@ -569,7 +569,6 @@ export function PerformancePage() {
 
           <AppCard
             title="OpenResty 连接与事件"
-            description="第五版第一批结构化性能项。保存后进入统一发布链路，不会在节点即时生效。"
             action={
               <PrimaryButton
                 type="button"
@@ -638,7 +637,7 @@ export function PerformancePage() {
               </ResourceField>
               <ToggleField
                 label="multi_accept"
-                description="是否启用 multi_accept on。"
+                description=""
                 checked={performanceFields.OpenRestyEventsMultiAcceptEnabled}
                 onChange={(checked) =>
                   setPerformanceFields((previous) => ({

atsf_server/web/features/tls-certificates/components/tls-certificates-page.tsx

@@ -1,525 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState, type FormEvent } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-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 { AppModal } from '@/components/ui/app-modal';
-import { AppCard } from '@/components/ui/app-card';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  createTlsCertificate,
-  deleteTlsCertificate,
-  getTlsCertificates,
-  importTlsCertificateFiles,
-} from '@/features/tls-certificates/api/tls-certificates';
-import type {
-  TlsCertificateFileImportPayload,
-  TlsCertificateItem,
-  TlsCertificateMutationPayload,
-} from '@/features/tls-certificates/types';
-import {
-  DangerButton,
-  PrimaryButton,
-  ResourceField,
-  ResourceInput,
-  ResourceTextarea,
-  SecondaryButton,
-} from '@/features/shared/components/resource-primitives';
-import { formatDateTime } from '@/lib/utils/date';
-
-const tlsCertificatesQueryKey = ['tls-certificates', 'list'] as const;
-
-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 个字符'),
-});
-
-type ManualImportFormValues = z.infer<typeof manualImportSchema>;
-
-type FileImportFormValues = {
-  name: string;
-  remark: string;
-};
-
-type FeedbackState = {
-  tone: 'info' | 'success' | 'danger';
-  message: string;
-};
-
-const defaultManualValues: ManualImportFormValues = {
-  name: '',
-  cert_pem: '',
-  key_pem: '',
-  remark: '',
-};
-
-const defaultFileValues: FileImportFormValues = {
-  name: '',
-  remark: '',
-};
-
-function getErrorMessage(error: unknown) {
-  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
-}
-
-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 };
-}
-
-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(),
-  };
-}
-
-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 TlsCertificatesPage() {
-  const queryClient = useQueryClient();
-  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
-  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
-  const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
-  const [fileForm, setFileForm] =
-    useState<FileImportFormValues>(defaultFileValues);
-  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: defaultManualValues,
-  });
-
-  const certificatesQuery = useQuery({
-    queryKey: tlsCertificatesQueryKey,
-    queryFn: getTlsCertificates,
-  });
-
-  const manualImportMutation = useMutation({
-    mutationFn: async (values: ManualImportFormValues) =>
-      createTlsCertificate(toManualPayload(values)),
-    onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '证书已导入。' });
-      setImportMode('manual');
-      setIsImportModalOpen(false);
-      manualForm.reset(defaultManualValues);
-      await queryClient.invalidateQueries({
-        queryKey: tlsCertificatesQueryKey,
-      });
-    },
-    onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
-    },
-  });
-
-  const fileImportMutation = useMutation({
-    mutationFn: async (values: FileImportFormValues) =>
-      importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
-    onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '证书文件已导入。' });
-      setImportMode('manual');
-      setIsImportModalOpen(false);
-      setFileForm(defaultFileValues);
-      setCertFile(null);
-      setKeyFile(null);
-      setFileInputNonce((value) => value + 1);
-      await queryClient.invalidateQueries({
-        queryKey: tlsCertificatesQueryKey,
-      });
-    },
-    onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: deleteTlsCertificate,
-    onSuccess: async () => {
-      setFeedback({ tone: 'success', message: '证书已删除。' });
-      await queryClient.invalidateQueries({
-        queryKey: tlsCertificatesQueryKey,
-      });
-    },
-    onError: (error) => {
-      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
-    },
-  });
-
-  const certificates = useMemo(
-    () => certificatesQuery.data ?? [],
-    [certificatesQuery.data],
-  );
-
-  const handleManualSubmit = manualForm.handleSubmit((values) => {
-    setFeedback(null);
-    manualImportMutation.mutate(values);
-  });
-
-  const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setFeedback(null);
-    fileImportMutation.mutate(fileForm);
-  };
-
-  const handleDelete = (certificate: TlsCertificateItem) => {
-    if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
-      return;
-    }
-
-    setFeedback(null);
-    deleteMutation.mutate(certificate.id);
-  };
-
-  const handleCloseImportModal = () => {
-    setImportMode('manual');
-    setIsImportModalOpen(false);
-  };
-
-  return (
-    <>
-      <div className="space-y-6">
-        <PageHeader
-          title="TLS 证书"
-          description="支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。"
-          action={
-            <PrimaryButton
-              type="button"
-              onClick={() => {
-                setImportMode('manual');
-                setIsImportModalOpen(true);
-              }}
-            >
-              导入证书
-            </PrimaryButton>
-          }
-        />
-
-        {feedback ? (
-          <InlineMessage tone={feedback.tone} message={feedback.message} />
-        ) : null}
-
-        <AppCard
-          title="证书列表"
-          action={
-            <SecondaryButton
-              type="button"
-              onClick={() =>
-                void queryClient.invalidateQueries({
-                  queryKey: tlsCertificatesQueryKey,
-                })
-              }
-            >
-              刷新
-            </SecondaryButton>
-          }
-        >
-          {certificatesQuery.isLoading ? (
-            <LoadingState />
-          ) : certificatesQuery.isError ? (
-            <ErrorState
-              title="证书列表加载失败"
-              description={getErrorMessage(certificatesQuery.error)}
-            />
-          ) : certificates.length === 0 ? (
-            <EmptyState
-              title="暂无证书"
-              description="请先导入至少一张证书，再为 HTTPS 规则或域名绑定使用。"
-            />
-          ) : (
-            <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">有效期</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)]">
-                  {certificates.map((certificate) => {
-                    const status = getCertificateStatus(certificate);
-
-                    return (
-                      <tr key={certificate.id} className="align-top">
-                        <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
-                          {certificate.name}
-                        </td>
-                        <td className="px-3 py-4">
-                          <StatusBadge
-                            label={status.label}
-                            variant={status.variant}
-                          />
-                        </td>
-                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                          <div className="space-y-1">
-                            <p>{formatDateTime(certificate.not_before)}</p>
-                            <p>{formatDateTime(certificate.not_after)}</p>
-                          </div>
-                        </td>
-                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                          {certificate.remark || '—'}
-                        </td>
-                        <td className="px-3 py-4 text-[var(--foreground-secondary)]">
-                          {formatDateTime(certificate.updated_at)}
-                        </td>
-                        <td className="px-3 py-4">
-                          <DangerButton
-                            type="button"
-                            onClick={() => handleDelete(certificate)}
-                            disabled={deleteMutation.isPending}
-                            className="px-3 py-2 text-xs"
-                          >
-                            删除
-                          </DangerButton>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </AppCard>
-      </div>
-      <AppModal
-        isOpen={isImportModalOpen}
-        onClose={handleCloseImportModal}
-        title="导入证书"
-        description="手动导入和文档导入通过标签切换，避免在同一层同时堆叠两套表单。"
-        size="xl"
-      >
-        <div className="space-y-6">
-          <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={() => {
-                      setFileForm(defaultFileValues);
-                      setCertFile(null);
-                      setKeyFile(null);
-                      setFileInputNonce((value) => value + 1);
-                    }}
-                    disabled={fileImportMutation.isPending}
-                  >
-                    清空文件
-                  </SecondaryButton>
-                </div>
-              </form>
-            </AppCard>
-          )}
-        </div>
-      </AppModal>
-    </>
-  );
-}

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

@@ -0,0 +1,934 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState, type FormEvent } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+
+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 { AppModal } from '@/components/ui/app-modal';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  createManagedDomain,
+  deleteManagedDomain,
+  getManagedDomains,
+  updateManagedDomain,
+} from '@/features/managed-domains/api/managed-domains';
+import type {
+  ManagedDomainItem,
+  ManagedDomainMutationPayload,
+} from '@/features/managed-domains/types';
+import {
+  DangerButton,
+  PrimaryButton,
+  ResourceField,
+  ResourceInput,
+  ResourceSelect,
+  ResourceTextarea,
+  SecondaryButton,
+  ToggleField,
+} from '@/features/shared/components/resource-primitives';
+import {
+  createTlsCertificate,
+  deleteTlsCertificate,
+  getTlsCertificates,
+  importTlsCertificateFiles,
+} from '@/features/tls-certificates/api/tls-certificates';
+import type {
+  TlsCertificateFileImportPayload,
+  TlsCertificateItem,
+  TlsCertificateMutationPayload,
+} from '@/features/tls-certificates/types';
+import { formatDateTime } from '@/lib/utils/date';
+
+const managedDomainsQueryKey = ['managed-domains'] as const;
+const managedDomainCertificatesQueryKey = [
+  'managed-domains',
+  'certificates',
+] as const;
+const tlsCertificatesQueryKey = ['tls-certificates', 'list'] as const;
+
+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 个字符'),
+});
+
+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 个字符'),
+});
+
+type ManagedDomainFormValues = z.infer<typeof managedDomainSchema>;
+type ManualImportFormValues = z.infer<typeof manualImportSchema>;
+
+type FileImportFormValues = {
+  name: string;
+  remark: string;
+};
+
+type FeedbackState = {
+  tone: 'info' | 'success' | 'danger';
+  message: string;
+};
+
+const defaultDomainValues: ManagedDomainFormValues = {
+  domain: '',
+  cert_id: '',
+  enabled: true,
+  remark: '',
+};
+
+const defaultManualValues: ManualImportFormValues = {
+  name: '',
+  cert_pem: '',
+  key_pem: '',
+  remark: '',
+};
+
+const defaultFileValues: FileImportFormValues = {
+  name: '',
+  remark: '',
+};
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function getMatchTypeMeta(domain: string) {
+  return domain.startsWith('*.')
+    ? { label: '通配符', variant: 'warning' as const }
+    : { label: '精确匹配', variant: 'info' as const };
+}
+
+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 };
+}
+
+function buildCertificateLabel(certificate: TlsCertificateItem) {
+  return certificate.not_after
+    ? `${certificate.name}（到期：${formatDateTime(certificate.not_after)}）`
+    : certificate.name;
+}
+
+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(),
+  };
+}
+
+function toManagedDomainFormValues(
+  domain: ManagedDomainItem,
+): ManagedDomainFormValues {
+  return {
+    domain: domain.domain,
+    cert_id: domain.cert_id ? String(domain.cert_id) : '',
+    enabled: domain.enabled,
+    remark: domain.remark || '',
+  };
+}
+
+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(),
+  };
+}
+
+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 WebsitesPage() {
+  const queryClient = useQueryClient();
+  const [editingDomainId, setEditingDomainId] = useState<number | null>(null);
+  const [feedback, setFeedback] = useState<FeedbackState | null>(null);
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [importMode, setImportMode] = useState<'manual' | 'file'>('manual');
+  const [fileForm, setFileForm] =
+    useState<FileImportFormValues>(defaultFileValues);
+  const [certFile, setCertFile] = useState<File | null>(null);
+  const [keyFile, setKeyFile] = useState<File | null>(null);
+  const [fileInputNonce, setFileInputNonce] = useState(0);
+
+  const domainForm = useForm<ManagedDomainFormValues>({
+    resolver: zodResolver(managedDomainSchema),
+    defaultValues: defaultDomainValues,
+  });
+  const manualForm = useForm<ManualImportFormValues>({
+    resolver: zodResolver(manualImportSchema),
+    defaultValues: defaultManualValues,
+  });
+
+  const watchedDomain = useWatch({
+    control: domainForm.control,
+    name: 'domain',
+  });
+  const watchedCertId = useWatch({
+    control: domainForm.control,
+    name: 'cert_id',
+  });
+  const watchedEnabled = useWatch({
+    control: domainForm.control,
+    name: 'enabled',
+  });
+
+  const managedDomainsQuery = useQuery({
+    queryKey: managedDomainsQueryKey,
+    queryFn: getManagedDomains,
+  });
+  const certificatesQuery = useQuery({
+    queryKey: managedDomainCertificatesQueryKey,
+    queryFn: getTlsCertificates,
+  });
+
+  const saveDomainMutation = useMutation({
+    mutationFn: async (values: ManagedDomainFormValues) => {
+      const payload = toManagedDomainPayload(values);
+      return editingDomainId
+        ? updateManagedDomain(editingDomainId, payload)
+        : createManagedDomain(payload);
+    },
+    onSuccess: async () => {
+      setFeedback({
+        tone: 'success',
+        message: editingDomainId ? '网站已更新。' : '网站已创建。',
+      });
+      setEditingDomainId(null);
+      domainForm.reset(defaultDomainValues);
+      await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const deleteDomainMutation = useMutation({
+    mutationFn: deleteManagedDomain,
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '网站已删除。' });
+      await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const manualImportMutation = useMutation({
+    mutationFn: async (values: ManualImportFormValues) =>
+      createTlsCertificate(toManualPayload(values)),
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '证书已导入。' });
+      setImportMode('manual');
+      setIsImportModalOpen(false);
+      manualForm.reset(defaultManualValues);
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: managedDomainCertificatesQueryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: tlsCertificatesQueryKey,
+        }),
+      ]);
+    },
+    onError: (error) => {
+      setFeedback({ tone: 'danger', message: getErrorMessage(error) });
+    },
+  });
+
+  const fileImportMutation = useMutation({
+    mutationFn: async (values: FileImportFormValues) =>
+      importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
+    onSuccess: async () => {
+      setFeedback({ tone: 'success', message: '证书文件已导入。' });
+      setImportMode('manual');
+      setIsImportModalOpen(false);
+      setFileForm(defaultFileValues);
+      setCertFile(null);
+      setKeyFile(null);
+      setFileInputNonce((value) => value + 1);
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: managedDomainCertificatesQueryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: tlsCertificatesQueryKey,
+        }),
+      ]);
+    },
+    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: managedDomainCertificatesQueryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: tlsCertificatesQueryKey,
+        }),
+        queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey }),
+      ]);
+    },
+    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 currentCertificate = watchedCertId
+    ? certificateMap.get(Number(watchedCertId))
+    : null;
+
+  const handleDomainSubmit = domainForm.handleSubmit((values) => {
+    setFeedback(null);
+    saveDomainMutation.mutate(values);
+  });
+
+  const handleDomainReset = () => {
+    setEditingDomainId(null);
+    domainForm.reset(defaultDomainValues);
+  };
+
+  const handleEditDomain = (domain: ManagedDomainItem) => {
+    setEditingDomainId(domain.id);
+    setFeedback(null);
+    domainForm.reset(toManagedDomainFormValues(domain));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleDeleteDomain = (domain: ManagedDomainItem) => {
+    if (!window.confirm(`确认删除网站 ${domain.domain} 吗？`)) {
+      return;
+    }
+    setFeedback(null);
+    deleteDomainMutation.mutate(domain.id);
+  };
+
+  const handleManualSubmit = manualForm.handleSubmit((values) => {
+    setFeedback(null);
+    manualImportMutation.mutate(values);
+  });
+
+  const handleFileSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFeedback(null);
+    fileImportMutation.mutate(fileForm);
+  };
+
+  const handleDeleteCertificate = (certificate: TlsCertificateItem) => {
+    if (!window.confirm(`确认删除证书 ${certificate.name} 吗？`)) {
+      return;
+    }
+    setFeedback(null);
+    deleteCertificateMutation.mutate(certificate.id);
+  };
+
+  const handleCloseImportModal = () => {
+    setImportMode('manual');
+    setIsImportModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="space-y-6">
+        <PageHeader
+          title="网站"
+          description="在同一页完成网站录入、默认证书绑定、证书导入和资产巡检，减少域名页与证书页之间的来回切换。"
+        />
+
+        {feedback ? (
+          <InlineMessage tone={feedback.tone} message={feedback.message} />
+        ) : null}
+
+        <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+          <AppCard
+            title={editingDomainId ? '编辑网站' : '快速添加网站'}
+            description="录入域名后即可直接绑定默认证书。若证书尚未导入，可在右侧先导入再回到这里选择。"
+            action={
+              <div className="flex flex-wrap gap-2">
+                {editingDomainId ? (
+                  <SecondaryButton type="button" onClick={handleDomainReset}>
+                    取消编辑
+                  </SecondaryButton>
+                ) : null}
+                <PrimaryButton
+                  type="button"
+                  onClick={() => void handleDomainSubmit()}
+                  disabled={saveDomainMutation.isPending}
+                >
+                  {saveDomainMutation.isPending
+                    ? '保存中...'
+                    : editingDomainId
+                      ? '保存网站'
+                      : '创建网站'}
+                </PrimaryButton>
+              </div>
+            }
+          >
+            <form className="space-y-5" onSubmit={handleDomainSubmit}>
+              <div className="grid gap-4 md:grid-cols-2">
+                <ResourceField
+                  label="域名"
+                  hint="示例：example.com 或 *.example.com"
+                  error={domainForm.formState.errors.domain?.message}
+                >
+                  <ResourceInput
+                    placeholder="example.com 或 *.example.com"
+                    {...domainForm.register('domain')}
+                  />
+                </ResourceField>
+                <ResourceField
+                  label="默认证书"
+                  hint="证书用于域名自动匹配与规则推荐，可不选择。"
+                  error={domainForm.formState.errors.cert_id?.message}
+                >
+                  <ResourceSelect
+                    value={watchedCertId}
+                    disabled={certificatesQuery.isLoading}
+                    onChange={(event) =>
+                      domainForm.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>
+                </ResourceField>
+              </div>
+
+              <ToggleField
+                label="启用网站"
+                description="停用后该域名不会参与自动匹配，但记录会保留。"
+                checked={watchedEnabled}
+                onChange={(checked) =>
+                  domainForm.setValue('enabled', checked, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  })
+                }
+              />
+
+              <ResourceField
+                label="备注"
+                hint="可选，用于记录归属、用途或生效说明。"
+                error={domainForm.formState.errors.remark?.message}
+              >
+                <ResourceInput
+                  placeholder="例如：主站 / 泛域名 / 生产"
+                  {...domainForm.register('remark')}
+                />
+              </ResourceField>
+            </form>
+          </AppCard>
+
+          <AppCard
+            title="证书快捷入口"
+            description="先导入证书，再回到左侧立即绑定到网站。无需跳转到单独页面。"
+            action={
+              <div className="flex flex-wrap gap-2">
+                <SecondaryButton
+                  type="button"
+                  onClick={() =>
+                    void queryClient.invalidateQueries({
+                      queryKey: managedDomainCertificatesQueryKey,
+                    })
+                  }
+                >
+                  刷新证书
+                </SecondaryButton>
+                <PrimaryButton
+                  type="button"
+                  onClick={() => {
+                    setImportMode('manual');
+                    setIsImportModalOpen(true);
+                  }}
+                >
+                  导入证书
+                </PrimaryButton>
+              </div>
+            }
+          >
+            <div className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-3 xl:grid-cols-1">
+                <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>
+
+              <div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm leading-6 text-[var(--foreground-secondary)]">
+                <p>
+                  建议流程：先导入证书，再在左侧创建网站并直接绑定。若同一
+                  hostname 同时命中精确和通配符， 系统会优先使用精确匹配。
+                </p>
+              </div>
+            </div>
+          </AppCard>
+        </div>
+
+        <div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
+          <AppCard
+            title="网站列表"
+            description="维护精确域名与通配符域名，并查看当前绑定的默认证书。"
+          >
+            {managedDomainsQuery.isLoading ? (
+              <LoadingState />
+            ) : managedDomainsQuery.isError ? (
+              <ErrorState
+                title="网站列表加载失败"
+                description={getErrorMessage(managedDomainsQuery.error)}
+              />
+            ) : domains.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">绑定证书</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)]">
+                    {domains.map((domain) => {
+                      const certificate = domain.cert_id
+                        ? certificateMap.get(domain.cert_id)
+                        : null;
+                      const matchType = getMatchTypeMeta(domain.domain);
+
+                      return (
+                        <tr key={domain.id} className="align-top">
+                          <td className="px-3 py-4 font-medium text-[var(--foreground-primary)]">
+                            <div className="space-y-1">
+                              <p>{domain.domain}</p>
+                              <p className="text-xs text-[var(--foreground-secondary)]">
+                                {domain.remark || '—'}
+                              </p>
+                            </div>
+                          </td>
+                          <td className="px-3 py-4">
+                            <StatusBadge
+                              label={matchType.label}
+                              variant={matchType.variant}
+                            />
+                          </td>
+                          <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                            {certificate ? certificate.name : '未绑定'}
+                          </td>
+                          <td className="px-3 py-4">
+                            <StatusBadge
+                              label={domain.enabled ? '启用' : '停用'}
+                              variant={domain.enabled ? 'success' : 'warning'}
+                            />
+                          </td>
+                          <td className="px-3 py-4 text-[var(--foreground-secondary)]">
+                            {formatDateTime(domain.updated_at)}
+                          </td>
+                          <td className="px-3 py-4">
+                            <div className="flex flex-wrap gap-2">
+                              <SecondaryButton
+                                type="button"
+                                onClick={() => handleEditDomain(domain)}
+                                className="px-3 py-2 text-xs"
+                              >
+                                编辑
+                              </SecondaryButton>
+                              <DangerButton
+                                type="button"
+                                onClick={() => handleDeleteDomain(domain)}
+                                disabled={deleteDomainMutation.isPending}
+                                className="px-3 py-2 text-xs"
+                              >
+                                删除
+                              </DangerButton>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </AppCard>
+
+          <AppCard
+            title="证书列表"
+            description="查看有效期和到期风险，并直接删除不再使用的证书。"
+          >
+            {certificatesQuery.isLoading ? (
+              <LoadingState />
+            ) : certificatesQuery.isError ? (
+              <ErrorState
+                title="证书列表加载失败"
+                description={getErrorMessage(certificatesQuery.error)}
+              />
+            ) : certificates.length === 0 ? (
+              <EmptyState
+                title="暂无证书"
+                description="点击上方“导入证书”即可开始录入。"
+              />
+            ) : (
+              <div className="space-y-3">
+                {certificates.map((certificate) => {
+                  const status = getCertificateStatus(certificate);
+                  return (
+                    <div
+                      key={certificate.id}
+                      className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="space-y-2">
+                          <p className="text-sm font-semibold text-[var(--foreground-primary)]">
+                            {certificate.name}
+                          </p>
+                          <div className="flex flex-wrap gap-2">
+                            <StatusBadge
+                              label={status.label}
+                              variant={status.variant}
+                            />
+                          </div>
+                          <div className="text-xs leading-5 text-[var(--foreground-secondary)]">
+                            <p>
+                              生效：{formatDateTime(certificate.not_before)}
+                            </p>
+                            <p>到期：{formatDateTime(certificate.not_after)}</p>
+                            <p>备注：{certificate.remark || '—'}</p>
+                          </div>
+                        </div>
+                        <DangerButton
+                          type="button"
+                          onClick={() => handleDeleteCertificate(certificate)}
+                          disabled={deleteCertificateMutation.isPending}
+                          className="px-3 py-2 text-xs"
+                        >
+                          删除
+                        </DangerButton>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </AppCard>
+        </div>
+      </div>
+
+      <AppModal
+        isOpen={isImportModalOpen}
+        onClose={handleCloseImportModal}
+        title="导入证书"
+        description="手动导入和文件导入都在这里完成，导入成功后左侧网站表单会立刻可选。"
+        size="xl"
+      >
+        <div className="space-y-6">
+          <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={() => {
+                      setFileForm(defaultFileValues);
+                      setCertFile(null);
+                      setKeyFile(null);
+                      setFileInputNonce((value) => value + 1);
+                    }}
+                    disabled={fileImportMutation.isPending}
+                  >
+                    清空文件
+                  </SecondaryButton>
+                </div>
+              </form>
+            </AppCard>
+          )}
+        </div>
+      </AppModal>
+    </>
+  );
+}

atsf_server/web/lib/constants/navigation.ts

@@ -22,14 +22,9 @@ export const dashboardNavigation: NavigationItem[] = [
     icon: 'release',
   },
   {
-    href: '/managed-domain',
+    href: '/website',
-    label: '域名',
+    label: '网站',
-    icon: 'domain',
+    icon: 'website',
-  },
-  {
-    href: '/tls-certificate',
-    label: '证书',
-    icon: 'certificate',
   },
   {
     href: '/user',

atsf_server/web/lib/utils/navigation.ts

@@ -16,18 +16,34 @@ export function isPathActive(pathname: string, href: string) {
     return normalizedPathname === '/';
   }
 
-  return normalizedPathname === href || normalizedPathname.startsWith(`${href}/`);
+  return (
+    normalizedPathname === href || normalizedPathname.startsWith(`${href}/`)
+  );
 }
 
-export function isNavigationItemActive(pathname: string, item: NavigationItem): boolean {
+export function isNavigationItemActive(
-  return isPathActive(pathname, item.href) || item.children?.some((child) => isNavigationItemActive(pathname, child)) || false;
+  pathname: string,
+  item: NavigationItem,
+): boolean {
+  return (
+    isPathActive(pathname, item.href) ||
+    item.children?.some((child) => isNavigationItemActive(pathname, child)) ||
+    false
+  );
 }
 
-export function flattenNavigationItems(items: NavigationItem[]): NavigationItem[] {
+export function flattenNavigationItems(
-  return items.flatMap((item) => [item, ...(item.children ? flattenNavigationItems(item.children) : [])]);
+  items: NavigationItem[],
+): NavigationItem[] {
+  return items.flatMap((item) => [
+    item,
+    ...(item.children ? flattenNavigationItems(item.children) : []),
+  ]);
 }
 
-export function getCurrentNavigationItem(pathname: string): NavigationItem | undefined {
+export function getCurrentNavigationItem(
+  pathname: string,
+): NavigationItem | undefined {
   const findMatch = (items: NavigationItem[]): NavigationItem | undefined => {
     for (const item of items) {
       if (item.children) {

atsf_server/web/tests/unit/navigation-utils.test.ts

@@ -10,7 +10,7 @@ describe('navigation utils', () => {
 
   it('resolves current navigation item for nested paths', () => {
     expect(getCurrentNavigationItem('/node/abc')?.label).toBe('节点');
-    expect(getCurrentNavigationItem('/managed-domain')?.label).toBe('域名');
+    expect(getCurrentNavigationItem('/website')?.label).toBe('网站');
     expect(getCurrentNavigationItem('/performance')?.label).toBe('性能');
     expect(getCurrentNavigationItem('/setting')?.label).toBe('设置');
   });

docs/frontend-revamp-plan.md

@@ -51,8 +51,7 @@
 * 配置版本
 * 节点管理
 * 应用记录
-* 域名管理
+* 网站
-* TLS 证书
 * 用户管理
 * 设置
 * 性能