feat: add managed domains and TLS certificates management features

- Implemented ApplyLogItem interface for logging purposes. - Created API functions for managing domains including CRUD operations. - Developed ManagedDomainsPage component for domain management UI with form handling and state management. - Defined ManagedDomainItem and related types for domain data structure. - Added API functions for managing TLS certificates including creation, deletion, and file import. - Built TlsCertificatesPage component for certificate management with manual and file import options. - Introduced types for TLS certificate items and mutation payloads.
2026-09-29 05:56:38 +08:00 · 2026-03-11 16:27:57 +08:00
parent 256d4e80b3
commit 5d6898b633
16 changed files with 1263 additions and 48 deletions
@@ -1,10 +1,5 @@
-import { ModulePageSkeleton } from '@/features/shared/components/module-page-skeleton';
-
-export default function ApplyLogsPage() {
-  return (
-    <ModulePageSkeleton
-      title='应用记录'
-      description='阶段 3 将在此接入过滤器、结果状态可视化与分页详情。'
-    />
-  );
-}
+import { ApplyLogsPage as ApplyLogsFeaturePage } from '@/features/apply-logs/components/apply-logs-page';
+
+export default function ApplyLogsPage() {
+  return <ApplyLogsFeaturePage />;
+}
@@ -1,10 +1,5 @@
-import { ModulePageSkeleton } from '@/features/shared/components/module-page-skeleton';
-
-export default function ManagedDomainsPage() {
-  return (
-    <ModulePageSkeleton
-      title='域名管理'
-      description='阶段 3 将在此接入域名列表、证书绑定状态与启用切换。'
-    />
-  );
-}
+import { ManagedDomainsPage as ManagedDomainsFeaturePage } from '@/features/managed-domains/components/managed-domains-page';
+
+export default function ManagedDomainsPage() {
+  return <ManagedDomainsFeaturePage />;
+}
@@ -1,10 +1,5 @@
-import { ModulePageSkeleton } from '@/features/shared/components/module-page-skeleton';
-
-export default function TlsCertificatesPage() {
-  return (
-    <ModulePageSkeleton
-      title='TLS 证书'
-      description='阶段 3 将在此接入证书上传、导入与有效期展示。'
-    />
-  );
-}
+import { TlsCertificatesPage as TlsCertificatesFeaturePage } from '@/features/tls-certificates/components/tls-certificates-page';
+
+export default function TlsCertificatesPage() {
+  return <TlsCertificatesFeaturePage />;
+}
@@ -0,0 +1,5 @@
+import { LegacyRouteRedirect } from '@/features/shared/components/legacy-route-redirect';
+
+export default function LegacyApplyLogRoute() {
+  return <LegacyRouteRedirect href='/apply-logs' />;
+}
@@ -0,0 +1,5 @@
+import { LegacyRouteRedirect } from '@/features/shared/components/legacy-route-redirect';
+
+export default function LegacyManagedDomainRoute() {
+  return <LegacyRouteRedirect href='/managed-domains' />;
+}
@@ -0,0 +1,5 @@
+import { LegacyRouteRedirect } from '@/features/shared/components/legacy-route-redirect';
+
+export default function LegacyTlsCertificateRoute() {
+  return <LegacyRouteRedirect href='/tls-certificates' />;
+}
@@ -0,0 +1,9 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type { ApplyLogItem } from '@/features/apply-logs/types';
+
+export function getApplyLogs(nodeId?: string) {
+  const normalizedNodeId = nodeId?.trim();
+  const query = normalizedNodeId ? `?node_id=${encodeURIComponent(normalizedNodeId)}` : '';
+  return apiRequest<ApplyLogItem[]>(`/apply-logs/${query}`);
+}
@@ -0,0 +1,234 @@
+'use client';
+
+import { 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 { getApplyLogs } from '@/features/apply-logs/api/apply-logs';
+import type { ApplyLogItem } from '@/features/apply-logs/types';
+import {
+  PrimaryButton,
+  ResourceInput,
+  SecondaryButton,
+} from '@/features/shared/components/resource-primitives';
+import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
+
+const applyLogsQueryKey = (nodeId: string) => ['apply-logs', nodeId] as const;
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '请求失败，请稍后重试。';
+}
+
+function getResultMeta(result: string) {
+  if (result === 'success') {
+    return { label: '成功', variant: 'success' as const };
+  }
+
+  return { label: '失败', variant: 'danger' as const };
+}
+
+function buildSummary(logs: ApplyLogItem[]) {
+  const nodeIds = new Set(logs.map((item) => item.node_id));
+
+  return [
+    { label: '记录总数', value: logs.length },
+    { label: '成功', value: logs.filter((item) => item.result === 'success').length },
+    { label: '失败', value: logs.filter((item) => item.result !== 'success').length },
+    { label: '节点数', value: nodeIds.size },
+  ];
+}
+
+export function ApplyLogsPage() {
+  const queryClient = useQueryClient();
+  const [nodeFilterInput, setNodeFilterInput] = useState('');
+  const [nodeFilter, setNodeFilter] = useState('');
+  const [selectedLogId, setSelectedLogId] = useState<number | null>(null);
+  const [feedback, setFeedback] = useState<string | null>(null);
+
+  const logsQuery = useQuery({
+    queryKey: applyLogsQueryKey(nodeFilter),
+    queryFn: () => getApplyLogs(nodeFilter),
+  });
+
+  const logs = useMemo(() => logsQuery.data ?? [], [logsQuery.data]);
+  const summary = useMemo(() => buildSummary(logs), [logs]);
+
+  useEffect(() => {
+    if (logs.length === 0) {
+      setSelectedLogId(null);
+      return;
+    }
+
+    if (!logs.some((item) => item.id === selectedLogId)) {
+      setSelectedLogId(logs[0].id);
+    }
+  }, [logs, selectedLogId]);
+
+  const selectedLog = logs.find((item) => item.id === selectedLogId) ?? null;
+
+  const handleSearch = () => {
+    setFeedback(null);
+    setNodeFilter(nodeFilterInput.trim());
+  };
+
+  const handleReset = () => {
+    setFeedback(null);
+    setNodeFilter('');
+    setNodeFilterInput('');
+  };
+
+  return (
+    <div className='space-y-6'>
+      <PageHeader
+        title='应用记录'
+        description='查看节点应用版本的成功或失败记录，支持按 node_id 过滤并查看单条详情。'
+      />
+
+      {feedback ? <InlineMessage tone='info' message={feedback} /> : null}
+
+      <AppCard title='记录摘要' description='帮助快速识别失败趋势和受影响节点范围。'>
+        <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
+          {summary.map((item) => (
+            <div
+              key={item.label}
+              className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'
+            >
+              <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>{item.label}</p>
+              <p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
+            </div>
+          ))}
+        </div>
+      </AppCard>
+
+      <div className='grid gap-6 xl:grid-cols-[1.2fr_0.8fr]'>
+        <AppCard
+          title='过滤与列表'
+          description='默认展示全部记录，可按 node_id 快速筛选单节点应用结果。'
+          action={
+            <SecondaryButton
+              type='button'
+              onClick={() => void queryClient.invalidateQueries({ queryKey: applyLogsQueryKey(nodeFilter) })}
+            >
+              刷新
+            </SecondaryButton>
+          }
+        >
+          <div className='space-y-5'>
+            <div className='flex flex-col gap-3 lg:flex-row lg:items-center'>
+              <ResourceInput
+                value={nodeFilterInput}
+                onChange={(event) => setNodeFilterInput(event.target.value)}
+                placeholder='输入 node_id 过滤应用记录'
+                className='lg:max-w-md'
+              />
+              <div className='flex flex-wrap gap-2'>
+                <PrimaryButton type='button' onClick={handleSearch}>
+                  筛选
+                </PrimaryButton>
+                <SecondaryButton type='button' onClick={handleReset}>
+                  清空
+                </SecondaryButton>
+              </div>
+            </div>
+
+            {logsQuery.isLoading ? (
+              <LoadingState />
+            ) : logsQuery.isError ? (
+              <ErrorState title='应用记录加载失败' description={getErrorMessage(logsQuery.error)} />
+            ) : logs.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'>Node ID</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)]'>
+                    {logs.map((log) => {
+                      const resultMeta = getResultMeta(log.result);
+                      return (
+                        <tr key={log.id} className='align-top'>
+                          <td className='px-3 py-4 font-medium text-[var(--foreground-primary)]'>{log.node_id}</td>
+                          <td className='px-3 py-4 text-[var(--foreground-secondary)]'>{log.version}</td>
+                          <td className='px-3 py-4'>
+                            <StatusBadge label={resultMeta.label} variant={resultMeta.variant} />
+                          </td>
+                          <td className='px-3 py-4 text-[var(--foreground-secondary)]'>
+                            <div className='space-y-1'>
+                              <p>{formatDateTime(log.created_at)}</p>
+                              <p className='text-xs'>{formatRelativeTime(log.created_at)}</p>
+                            </div>
+                          </td>
+                          <td className='px-3 py-4'>
+                            <SecondaryButton
+                              type='button'
+                              onClick={() => {
+                                setSelectedLogId(log.id);
+                                setFeedback(`已选中节点 ${log.node_id} 的版本 ${log.version} 记录。`);
+                              }}
+                              className='px-3 py-2 text-xs'
+                            >
+                              查看详情
+                            </SecondaryButton>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        </AppCard>
+
+        <AppCard title='记录详情' description='展示所选应用记录的完整结果与错误信息。'>
+          {selectedLog ? (
+            <div className='space-y-4'>
+              <div className='flex flex-wrap gap-2'>
+                <StatusBadge {...getResultMeta(selectedLog.result)} />
+                <StatusBadge label={`Node：${selectedLog.node_id}`} variant='info' />
+                <StatusBadge label={`版本：${selectedLog.version}`} variant='warning' />
+              </div>
+
+              <div className='grid gap-4 sm:grid-cols-2'>
+                <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                  <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>创建时间</p>
+                  <p className='mt-2 text-sm text-[var(--foreground-primary)]'>
+                    {formatDateTime(selectedLog.created_at)}
+                  </p>
+                </div>
+                <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                  <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>相对时间</p>
+                  <p className='mt-2 text-sm text-[var(--foreground-primary)]'>
+                    {formatRelativeTime(selectedLog.created_at)}
+                  </p>
+                </div>
+              </div>
+
+              <div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
+                <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>应用信息</p>
+                <p className='mt-3 whitespace-pre-wrap break-words text-sm leading-6 text-[var(--foreground-primary)]'>
+                  {selectedLog.message || '无附加信息'}
+                </p>
+              </div>
+            </div>
+          ) : (
+            <EmptyState title='未选择记录' description='请先从左侧列表中选择一条应用记录查看详情。' />
+          )}
+        </AppCard>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,8 @@
+export interface ApplyLogItem {
+  id: number;
+  node_id: string;
+  version: string;
+  result: 'success' | 'failed' | string;
+  message: string;
+  created_at: string;
+}
@@ -0,0 +1,35 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  ManagedDomainCertificateOption,
+  ManagedDomainItem,
+  ManagedDomainMutationPayload,
+} from '@/features/managed-domains/types';
+
+export function getManagedDomains() {
+  return apiRequest<ManagedDomainItem[]>('/managed-domains/');
+}
+
+export function createManagedDomain(payload: ManagedDomainMutationPayload) {
+  return apiRequest<ManagedDomainItem>('/managed-domains/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function updateManagedDomain(id: number, payload: ManagedDomainMutationPayload) {
+  return apiRequest<ManagedDomainItem>(`/managed-domains/${id}`, {
+    method: 'PUT',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function deleteManagedDomain(id: number) {
+  return apiRequest<void>(`/managed-domains/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function getManagedDomainCertificates() {
+  return apiRequest<ManagedDomainCertificateOption[]>('/tls-certificates/');
+}
@@ -0,0 +1,421 @@
+'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 { 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 [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);
+      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 summary = useMemo(
+    () => [
+      { label: '域名规则', value: domains.length },
+      { label: '已启用', 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 },
+    ],
+    [domains],
+  );
+
+  const currentCertificate = watchedCertId ? certificateMap.get(Number(watchedCertId)) : null;
+
+  const handleReset = () => {
+    setEditingDomainId(null);
+    setFeedback(null);
+    form.reset(defaultValues);
+  };
+
+  const handleEdit = (domain: ManagedDomainItem) => {
+    setEditingDomainId(domain.id);
+    setFeedback(null);
+    form.reset(toFormValues(domain));
+  };
+
+  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='维护精确域名与通配符域名，为其绑定默认证书，并控制是否参与自动匹配与发布。'
+      />
+
+      {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+
+      <div className='grid gap-6 xl:grid-cols-[1.15fr_0.85fr]'>
+        <AppCard
+          title={editingDomainId ? '编辑域名规则' : '新增域名规则'}
+          description='支持精确域名与单层通配符域名，证书可留空以仅维护资产关系。'
+        >
+          <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,
+                })
+              }
+            />
+
+            <ResourceField
+              label='备注'
+              hint='可选，用于记录归属、用途或生效说明。'
+              error={form.formState.errors.remark?.message}
+            >
+              <ResourceInput placeholder='例如：主站泛域名证书' {...form.register('remark')} />
+            </ResourceField>
+
+            <div className='flex flex-wrap gap-3'>
+              <PrimaryButton type='submit' disabled={saveMutation.isPending}>
+                {saveMutation.isPending ? '保存中...' : editingDomainId ? '保存修改' : '新增域名'}
+              </PrimaryButton>
+              <SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
+                {editingDomainId ? '取消编辑' : '重置表单'}
+              </SecondaryButton>
+            </div>
+          </form>
+        </AppCard>
+
+        <div className='space-y-6'>
+          <AppCard title='规则摘要' description='帮助区分精确与通配符规则覆盖情况。'>
+            <div className='grid gap-4 sm:grid-cols-2 xl:grid-cols-1'>
+              {summary.map((item) => (
+                <div
+                  key={item.label}
+                  className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'
+                >
+                  <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>
+                    {item.label}
+                  </p>
+                  <p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
+                </div>
+              ))}
+            </div>
+          </AppCard>
+
+          <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>
+        </div>
+      </div>
+
+      <AppCard
+        title='域名规则列表'
+        description='支持快速查看绑定证书、启用状态与最近更新时间。'
+        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>
+  );
+}
@@ -0,0 +1,22 @@
+export interface ManagedDomainItem {
+  id: number;
+  domain: string;
+  cert_id: number | null;
+  enabled: boolean;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ManagedDomainMutationPayload {
+  domain: string;
+  cert_id: number | null;
+  enabled: boolean;
+  remark: string;
+}
+
+export interface ManagedDomainCertificateOption {
+  id: number;
+  name: string;
+  not_after: string | null;
+}
@@ -0,0 +1,37 @@
+import { apiRequest } from '@/lib/api/client';
+
+import type {
+  TlsCertificateFileImportPayload,
+  TlsCertificateItem,
+  TlsCertificateMutationPayload,
+} from '@/features/tls-certificates/types';
+
+export function getTlsCertificates() {
+  return apiRequest<TlsCertificateItem[]>('/tls-certificates/');
+}
+
+export function createTlsCertificate(payload: TlsCertificateMutationPayload) {
+  return apiRequest<TlsCertificateItem>('/tls-certificates/', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+}
+
+export function importTlsCertificateFiles(payload: TlsCertificateFileImportPayload) {
+  const formData = new FormData();
+  formData.append('name', payload.name);
+  formData.append('remark', payload.remark);
+  formData.append('cert_file', payload.certFile);
+  formData.append('key_file', payload.keyFile);
+
+  return apiRequest<TlsCertificateItem>('/tls-certificates/import-file', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+export function deleteTlsCertificate(id: number) {
+  return apiRequest<void>(`/tls-certificates/${id}`, {
+    method: 'DELETE',
+  });
+}
@@ -0,0 +1,426 @@
+'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 { 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 [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: '证书已导入。' });
+      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: '证书文件已导入。' });
+      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 summary = useMemo(
+    () => [
+      { label: '证书总数', value: certificates.length },
+      {
+        label: '30 天内到期',
+        value: certificates.filter((item) => {
+          const expiresAt = new Date(item.not_after).getTime();
+          if (Number.isNaN(expiresAt)) {
+            return false;
+          }
+
+          const diffMs = expiresAt - Date.now();
+          return diffMs >= 0 && diffMs <= 30 * 24 * 60 * 60 * 1000;
+        }).length,
+      },
+      {
+        label: '已过期',
+        value: certificates.filter((item) => {
+          const expiresAt = new Date(item.not_after).getTime();
+          return !Number.isNaN(expiresAt) && expiresAt < Date.now();
+        }).length,
+      },
+      { label: '最近更新', value: certificates[0] ? formatDateTime(certificates[0].updated_at) : '—' },
+    ],
+    [certificates],
+  );
+
+  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);
+  };
+
+  return (
+    <div className='space-y-6'>
+      <PageHeader
+        title='TLS 证书'
+        description='支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。'
+      />
+
+      {feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
+
+      <AppCard title='证书概览' description='上线前可先检查证书存量、过期风险与最近更新时间。'>
+        <div className='grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
+          {summary.map((item) => (
+            <div
+              key={item.label}
+              className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'
+            >
+              <p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>{item.label}</p>
+              <p className='mt-2 text-lg font-semibold text-[var(--foreground-primary)]'>{item.value}</p>
+            </div>
+          ))}
+        </div>
+      </AppCard>
+
+      <div className='grid gap-6 xl:grid-cols-2'>
+        <AppCard title='手动导入' 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 title='文件导入' 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='备注' hint='可选，用于记录部署环境或域名范围。'>
+                <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>
+
+      <AppCard
+        title='证书列表'
+        description='展示证书有效期、到期状态与最近更新时间。删除前会提示确认。'
+        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>
+  );
+}
@@ -0,0 +1,23 @@
+export interface TlsCertificateItem {
+  id: number;
+  name: string;
+  not_before: string;
+  not_after: string;
+  remark: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface TlsCertificateMutationPayload {
+  name: string;
+  cert_pem: string;
+  key_pem: string;
+  remark: string;
+}
+
+export interface TlsCertificateFileImportPayload {
+  name: string;
+  remark: string;
+  certFile: File;
+  keyFile: File;
+}
@@ -25,24 +25,24 @@ export const dashboardNavigation: NavigationItem[] = [
    shortLabel: '节点',
    description: '已接入状态标签、部署命令、心跳与更新动作。',
  },
-  {
-    href: '/apply-logs',
-    label: '应用记录',
-    shortLabel: '记录',
-    description: '阶段 3 接入筛选、分页与详情展示。',
-  },
-  {
-    href: '/managed-domains',
-    label: '域名管理',
-    shortLabel: '域名',
-    description: '阶段 3 接入证书绑定与启用状态切换。',
-  },
-  {
-    href: '/tls-certificates',
-    label: 'TLS 证书',
-    shortLabel: '证书',
-    description: '阶段 3 接入导入、上传与有效期展示。',
-  },
+  {
+    href: '/apply-logs',
+    label: '应用记录',
+    shortLabel: '记录',
+    description: '已接入 node_id 筛选、结果状态展示与单条详情查看。',
+  },
+  {
+    href: '/managed-domains',
+    label: '域名管理',
+    shortLabel: '域名',
+    description: '已接入列表、证书绑定、启停控制与编辑删除。',
+  },
+  {
+    href: '/tls-certificates',
+    label: 'TLS 证书',
+    shortLabel: '证书',
+    description: '已接入 PEM 导入、文件上传、到期展示与删除。',
+  },
  {
    href: '/files',
    label: '文件管理',