mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-04 15:06:37 +08:00
Refactor code structure and remove redundant sections for improved readability and maintainability
This commit is contained in:
ryan
@@ -1,32 +1,38 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { dashboardNavigation } from '@/lib/constants/navigation';
|
||||
|
||||
const readinessItems = [
|
||||
{
|
||||
title: '工程底座',
|
||||
import Link from 'next/link';
|
||||
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { dashboardNavigation } from '@/lib/constants/navigation';
|
||||
import { flattenNavigationItems } from '@/lib/utils/navigation';
|
||||
import type { NavigationItem } from '@/types/navigation';
|
||||
|
||||
const readinessItems = [
|
||||
{
|
||||
title: '工程底座',
|
||||
description: 'Next.js App Router、TypeScript strict、Tailwind CSS 与静态导出链路已稳定运行。',
|
||||
},
|
||||
{
|
||||
title: '认证骨架',
|
||||
description: '登录、注册、重置密码、鉴权守卫与后台布局已迁移到新前端。',
|
||||
},
|
||||
{
|
||||
title: '业务模块',
|
||||
description: '核心链路与阶段 4 的设置、用户、文件模块都已接入真实数据与交互。',
|
||||
},
|
||||
];
|
||||
|
||||
},
|
||||
{
|
||||
title: '业务模块',
|
||||
description: '核心链路、用户和设置模块都已接入真实数据与交互，正在继续生产化打磨。',
|
||||
},
|
||||
];
|
||||
|
||||
const moduleLinks = flattenNavigationItems(dashboardNavigation).filter(
|
||||
(item: NavigationItem) => item.href !== '/' && !item.children?.length,
|
||||
);
|
||||
|
||||
export function DashboardOverview() {
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<AppCard
|
||||
title='前端迁移完成'
|
||||
description='新版管理端已承接全部页面入口、旧路由兼容和核心交互，当前可继续推进联调与测试补齐。'
|
||||
description='新版管理端已承接主链路页面与核心运维动作，当前重点转向生产环境信息架构与操作效率优化。'
|
||||
action={<StatusBadge label='统一 Next.js 前端' variant='success' />}
|
||||
>
|
||||
>
|
||||
<div className='grid gap-4 lg:grid-cols-3'>
|
||||
{readinessItems.map((item) => (
|
||||
<div
|
||||
@@ -41,28 +47,26 @@ export function DashboardOverview() {
|
||||
))}
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<div className='grid gap-6 xl:grid-cols-[1.3fr_0.9fr]'>
|
||||
<AppCard title='模块入口' description='新版导航中的业务页面均已接入真实数据，设置与边缘模块也已可直接使用。'>
|
||||
<div className='grid gap-3 md:grid-cols-2'>
|
||||
{dashboardNavigation.slice(1).map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4 transition hover:border-[var(--border-strong)] hover:bg-[var(--accent-soft)]'
|
||||
>
|
||||
<p className='text-sm font-semibold text-[var(--foreground-primary)]'>{item.label}</p>
|
||||
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>
|
||||
{item.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard title='下一步建议' description='当前重点转向联调回归、测试覆盖和发布验收。'>
|
||||
|
||||
<div className='grid gap-6 xl:grid-cols-[1.3fr_0.9fr]'>
|
||||
<AppCard title='模块入口' description='当前导航已收敛为首页、节点、网站、发布、用户和设置，网站下再细分业务对象。'>
|
||||
<div className='grid gap-3 md:grid-cols-2'>
|
||||
{moduleLinks.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4 transition hover:border-[var(--border-strong)] hover:bg-[var(--accent-soft)]'
|
||||
>
|
||||
<p className='text-sm font-semibold text-[var(--foreground-primary)]'>{item.label}</p>
|
||||
<p className='mt-2 text-sm leading-6 text-[var(--foreground-secondary)]'>进入 {item.label} 页面，继续完成管理与发布操作。</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard title='下一步建议' description='当前重点转向弹窗化操作、联调回归和发布验收。'>
|
||||
<ol className='space-y-3 text-sm leading-6 text-[var(--foreground-secondary)]'>
|
||||
<li>1. 对照后端接口完成设置、节点、证书和用户链路联调。</li>
|
||||
<li>1. 对照后端接口继续压缩页面认知负担，保持核心动作在列表页附近完成。</li>
|
||||
<li>2. 补齐关键页面的测试覆盖与构建验收。</li>
|
||||
<li>3. 清理迁移期文档和发布说明中的旧前端表述。</li>
|
||||
</ol>
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import { apiRequest, getApiUrl } from '@/lib/api/client';
|
||||
|
||||
import type { FileItem } from '@/features/files/types';
|
||||
|
||||
export function getFiles(page: number) {
|
||||
return apiRequest<FileItem[]>(`/file/?p=${page}`);
|
||||
}
|
||||
|
||||
export function searchFiles(keyword: string) {
|
||||
return apiRequest<FileItem[]>(`/file/search?keyword=${encodeURIComponent(keyword)}`);
|
||||
}
|
||||
|
||||
export function deleteFile(id: number) {
|
||||
return apiRequest<void>(`/file/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
export function buildFileDownloadUrl(link: string) {
|
||||
return `/upload/${link}`;
|
||||
}
|
||||
|
||||
export function buildFileAbsoluteUrl(link: string) {
|
||||
if (typeof window === 'undefined') {
|
||||
return buildFileDownloadUrl(link);
|
||||
}
|
||||
|
||||
return new URL(buildFileDownloadUrl(link), window.location.origin).toString();
|
||||
}
|
||||
|
||||
export async function uploadFiles(files: File[], description?: string) {
|
||||
const formData = new FormData();
|
||||
|
||||
files.forEach((file) => {
|
||||
formData.append('file', file);
|
||||
});
|
||||
|
||||
if (description) {
|
||||
formData.append('description', description);
|
||||
}
|
||||
|
||||
const response = await fetch(getApiUrl('/file/'), {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const payload = (await response.json()) as {
|
||||
success: boolean;
|
||||
message: string;
|
||||
};
|
||||
|
||||
if (!response.ok || !payload.success) {
|
||||
throw new Error(payload.message || `上传失败（${response.status}）`);
|
||||
}
|
||||
}
|
||||
@@ -1,374 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import {
|
||||
buildFileAbsoluteUrl,
|
||||
buildFileDownloadUrl,
|
||||
deleteFile,
|
||||
getFiles,
|
||||
searchFiles,
|
||||
uploadFiles,
|
||||
} from '@/features/files/api/files';
|
||||
import type { FileItem } from '@/features/files/types';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const filesQueryKey = ['files', 'list'] as const;
|
||||
|
||||
type FeedbackState = {
|
||||
tone: 'info' | 'success' | 'danger';
|
||||
message: string;
|
||||
};
|
||||
|
||||
function getErrorMessage(error: unknown) {
|
||||
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
|
||||
}
|
||||
|
||||
async function copyToClipboard(value: string) {
|
||||
await navigator.clipboard.writeText(value);
|
||||
}
|
||||
|
||||
export function FilesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user } = useAuth();
|
||||
const [page, setPage] = useState(0);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
|
||||
const isAdmin = (user?.role ?? 0) >= 10;
|
||||
|
||||
const filesPageQuery = useQuery({
|
||||
queryKey: [...filesQueryKey, page],
|
||||
queryFn: () => getFiles(page),
|
||||
enabled: isAdmin && searchKeyword.length === 0,
|
||||
});
|
||||
|
||||
const filesSearchQuery = useQuery({
|
||||
queryKey: [...filesQueryKey, 'search', searchKeyword],
|
||||
queryFn: () => searchFiles(searchKeyword),
|
||||
enabled: isAdmin && searchKeyword.length > 0,
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async () => uploadFiles(selectedFiles, description.trim()),
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: `已上传 ${selectedFiles.length} 个文件。` });
|
||||
setSelectedFiles([]);
|
||||
setDescription('');
|
||||
await queryClient.invalidateQueries({ queryKey: filesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteFile,
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '文件已删除。' });
|
||||
await queryClient.invalidateQueries({ queryKey: filesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
},
|
||||
});
|
||||
|
||||
const activeQuery = searchKeyword.length > 0 ? filesSearchQuery : filesPageQuery;
|
||||
const files = useMemo(() => activeQuery.data ?? [], [activeQuery.data]);
|
||||
|
||||
const summary = useMemo(() => {
|
||||
return [
|
||||
{ label: searchKeyword ? '搜索结果' : '当前页文件', value: files.length },
|
||||
{ label: '当前上传批次', value: selectedFiles.length },
|
||||
{
|
||||
label: '下载总次数',
|
||||
value: files.reduce((total, item) => total + (item.download_counter || 0), 0),
|
||||
},
|
||||
{
|
||||
label: '上传者数',
|
||||
value: new Set(files.map((item) => item.uploader_id)).size,
|
||||
},
|
||||
];
|
||||
}, [files, searchKeyword, selectedFiles.length]);
|
||||
|
||||
const handleUpload = () => {
|
||||
if (selectedFiles.length === 0) {
|
||||
setFeedback({ tone: 'info', message: '请先选择要上传的文件。' });
|
||||
return;
|
||||
}
|
||||
|
||||
setFeedback(null);
|
||||
uploadMutation.mutate();
|
||||
};
|
||||
|
||||
const handleDelete = (file: FileItem) => {
|
||||
if (!window.confirm(`确认删除文件“${file.filename}”吗？`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setFeedback(null);
|
||||
deleteMutation.mutate(file.id);
|
||||
};
|
||||
|
||||
const handleCopy = async (link: string) => {
|
||||
try {
|
||||
await copyToClipboard(buildFileAbsoluteUrl(link));
|
||||
setFeedback({ tone: 'success', message: '文件链接已复制到剪贴板。' });
|
||||
} catch (error) {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchSubmit = () => {
|
||||
setFeedback(null);
|
||||
setPage(0);
|
||||
setSearchKeyword(searchInput.trim());
|
||||
};
|
||||
|
||||
const handleResetSearch = () => {
|
||||
setSearchInput('');
|
||||
setSearchKeyword('');
|
||||
setPage(0);
|
||||
setFeedback(null);
|
||||
};
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='文件管理'
|
||||
description='阶段 4 已迁移文件管理页面，但当前账户没有管理员权限。'
|
||||
/>
|
||||
<EmptyState
|
||||
title='权限不足'
|
||||
description='文件上传、删除与下载链接管理仅对管理员开放，请使用管理员账号登录后继续。'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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.1fr_0.9fr]'>
|
||||
<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>
|
||||
|
||||
<AppCard
|
||||
title='上传文件'
|
||||
description='支持一次选择多个文件并附加统一描述信息。文件上传后将立即可下载。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={handleUpload} disabled={uploadMutation.isPending}>
|
||||
{uploadMutation.isPending ? '上传中...' : '开始上传'}
|
||||
</PrimaryButton>
|
||||
}
|
||||
>
|
||||
<div className='space-y-5'>
|
||||
<ResourceField label='上传描述' hint='可选，适用于同批次文件的统一说明。'>
|
||||
<ResourceInput
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder='例如：节点安装包 / 测试证书 / 宣传素材'
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='文件选择' hint='按住 Ctrl 或 Shift 可批量选择多个文件。'>
|
||||
<input
|
||||
type='file'
|
||||
multiple
|
||||
onChange={(event) => setSelectedFiles(Array.from(event.target.files ?? []))}
|
||||
className='block w-full rounded-2xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-6 text-sm text-[var(--foreground-secondary)] file:mr-4 file:rounded-xl file:border-0 file:bg-[var(--brand-primary)] file:px-4 file:py-2 file:text-sm file:font-medium file:text-[var(--foreground-inverse)]'
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
{selectedFiles.length > 0 ? (
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-sm font-medium text-[var(--foreground-primary)]'>待上传文件</p>
|
||||
<ul className='mt-3 space-y-2 text-sm text-[var(--foreground-secondary)]'>
|
||||
{selectedFiles.map((file) => (
|
||||
<li key={`${file.name}-${file.size}`} className='break-all'>
|
||||
{file.name} · {(file.size / 1024).toFixed(1)} KB
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title='尚未选择文件' description='选择文件后即可直接上传，无需离开当前页面。' />
|
||||
)}
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<AppCard
|
||||
title='文件列表'
|
||||
description='分页模式下按服务器每页 10 条加载；搜索模式会返回全部匹配结果。'
|
||||
action={
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => void queryClient.invalidateQueries({ queryKey: filesQueryKey })}
|
||||
>
|
||||
刷新
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
<div className='space-y-5'>
|
||||
<div className='flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between'>
|
||||
<div className='flex w-full flex-col gap-3 md:flex-row'>
|
||||
<ResourceInput
|
||||
value={searchInput}
|
||||
onChange={(event) => setSearchInput(event.target.value)}
|
||||
placeholder='搜索文件名、上传者或上传者 ID'
|
||||
className='md:max-w-xl'
|
||||
/>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<PrimaryButton type='button' onClick={handleSearchSubmit}>
|
||||
搜索
|
||||
</PrimaryButton>
|
||||
<SecondaryButton type='button' onClick={handleResetSearch}>
|
||||
清空
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{searchKeyword.length === 0 ? (
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<SecondaryButton type='button' onClick={() => setPage((value) => Math.max(value - 1, 0))} disabled={page === 0 || activeQuery.isLoading}>
|
||||
上一页
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => setPage((value) => value + 1)}
|
||||
disabled={activeQuery.isLoading || files.length < ITEMS_PER_PAGE}
|
||||
>
|
||||
下一页
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{activeQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : activeQuery.isError ? (
|
||||
<ErrorState title='文件列表加载失败' description={getErrorMessage(activeQuery.error)} />
|
||||
) : files.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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className='divide-y divide-[var(--border-default)]'>
|
||||
{files.map((file) => (
|
||||
<tr key={file.id} className='align-top'>
|
||||
<td className='px-3 py-4'>
|
||||
<div className='space-y-1'>
|
||||
<a
|
||||
href={buildFileDownloadUrl(file.link)}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
className='font-medium text-[var(--brand-primary)] transition hover:opacity-80'
|
||||
>
|
||||
{file.filename}
|
||||
</a>
|
||||
<p className='max-w-80 text-xs leading-5 text-[var(--foreground-secondary)]'>
|
||||
{file.description || '无描述信息'}
|
||||
</p>
|
||||
<p className='text-xs text-[var(--foreground-secondary)]'>
|
||||
存储链接：{file.link}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
|
||||
<div className='space-y-1'>
|
||||
<p>{file.uploader}</p>
|
||||
<p className='text-xs'>上传者 ID：{file.uploader_id}</p>
|
||||
</div>
|
||||
</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
|
||||
{formatRelativeTime(file.upload_time)} · {formatDateTime(file.upload_time)}
|
||||
</td>
|
||||
<td className='px-3 py-4 text-[var(--foreground-secondary)]'>
|
||||
{file.download_counter || 0}
|
||||
</td>
|
||||
<td className='px-3 py-4'>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
<PrimaryButton
|
||||
type='button'
|
||||
onClick={() => window.open(buildFileDownloadUrl(file.link), '_blank', 'noopener,noreferrer')}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
下载
|
||||
</PrimaryButton>
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => void handleCopy(file.link)}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
复制链接
|
||||
</SecondaryButton>
|
||||
<DangerButton
|
||||
type='button'
|
||||
onClick={() => handleDelete(file)}
|
||||
disabled={deleteMutation.isPending}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
export interface FileItem {
|
||||
id: number;
|
||||
filename: string;
|
||||
description: string;
|
||||
uploader: string;
|
||||
uploader_id: number;
|
||||
link: string;
|
||||
upload_time: string;
|
||||
download_counter: number;
|
||||
}
|
||||
@@ -11,6 +11,7 @@ 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 {
|
||||
@@ -110,6 +111,7 @@ function toFormValues(domain: ManagedDomainItem): ManagedDomainFormValues {
|
||||
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>({
|
||||
@@ -144,6 +146,7 @@ export function ManagedDomainsPage() {
|
||||
message: editingDomainId ? '域名规则已更新。' : '域名规则已创建。',
|
||||
});
|
||||
setEditingDomainId(null);
|
||||
setIsEditorOpen(false);
|
||||
form.reset(defaultValues);
|
||||
await queryClient.invalidateQueries({ queryKey: managedDomainsQueryKey });
|
||||
},
|
||||
@@ -185,14 +188,23 @@ export function ManagedDomainsPage() {
|
||||
|
||||
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) => {
|
||||
@@ -210,128 +222,35 @@ export function ManagedDomainsPage() {
|
||||
});
|
||||
|
||||
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}
|
||||
|
||||
<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}
|
||||
<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'
|
||||
>
|
||||
<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 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>
|
||||
</AppCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<AppCard
|
||||
title='域名规则列表'
|
||||
@@ -417,5 +336,103 @@ export function ManagedDomainsPage() {
|
||||
)}
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
'use client';
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect, 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 { 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 {
|
||||
createNode,
|
||||
deleteNode,
|
||||
@@ -155,13 +157,14 @@ async function copyToClipboard(value: string) {
|
||||
await navigator.clipboard.writeText(value);
|
||||
}
|
||||
|
||||
export function NodesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [editingNodeId, setEditingNodeId] = useState<number | null>(null);
|
||||
const [selectedNode, setSelectedNode] = useState<NodeItem | null>(null);
|
||||
const [serverUrl, setServerUrl] = useState('');
|
||||
const [, setRefreshTick] = useState(0);
|
||||
export function NodesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [editingNodeId, setEditingNodeId] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [selectedNode, setSelectedNode] = useState<NodeItem | null>(null);
|
||||
const [serverUrl, setServerUrl] = useState('');
|
||||
const [, setRefreshTick] = useState(0);
|
||||
|
||||
const form = useForm<NodeFormValues>({
|
||||
resolver: zodResolver(nodeSchema),
|
||||
@@ -206,14 +209,15 @@ export function NodesPage() {
|
||||
return editingNodeId ? updateNode(editingNodeId, payload) : createNode(payload);
|
||||
},
|
||||
onSuccess: async (node) => {
|
||||
setFeedback({
|
||||
tone: 'success',
|
||||
message: editingNodeId ? '节点已更新。' : '节点已创建。',
|
||||
});
|
||||
setEditingNodeId(null);
|
||||
setSelectedNode(node);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
setFeedback({
|
||||
tone: 'success',
|
||||
message: editingNodeId ? '节点已更新。' : '节点已创建。',
|
||||
});
|
||||
setEditingNodeId(null);
|
||||
setIsEditorOpen(false);
|
||||
setSelectedNode(node);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: nodesQueryKey }),
|
||||
queryClient.invalidateQueries({ queryKey: bootstrapQueryKey }),
|
||||
]);
|
||||
@@ -281,21 +285,30 @@ export function NodesPage() {
|
||||
];
|
||||
}, [nodes]);
|
||||
|
||||
const handleReset = () => {
|
||||
setFeedback(null);
|
||||
setEditingNodeId(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleEdit = (node: NodeItem) => {
|
||||
setFeedback(null);
|
||||
setEditingNodeId(node.id);
|
||||
setSelectedNode(node);
|
||||
form.reset({
|
||||
name: node.name,
|
||||
auto_update_enabled: node.auto_update_enabled,
|
||||
});
|
||||
};
|
||||
const handleReset = () => {
|
||||
setFeedback(null);
|
||||
setEditingNodeId(null);
|
||||
setIsEditorOpen(false);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setFeedback(null);
|
||||
setEditingNodeId(null);
|
||||
form.reset(defaultValues);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (node: NodeItem) => {
|
||||
setFeedback(null);
|
||||
setEditingNodeId(node.id);
|
||||
setSelectedNode(node);
|
||||
form.reset({
|
||||
name: node.name,
|
||||
auto_update_enabled: node.auto_update_enabled,
|
||||
});
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (node: NodeItem) => {
|
||||
if (
|
||||
@@ -341,77 +354,55 @@ export function NodesPage() {
|
||||
? buildNodeInstallCommand(normalizedServerUrl, selectedNodeFromList.agent_token)
|
||||
: '';
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='节点管理'
|
||||
description='查看节点在线状态、最近心跳、部署命令与 Agent 更新动作，并支持预创建节点。'
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<div className='grid gap-6 xl:grid-cols-[1.1fr_0.9fr]'>
|
||||
<AppCard
|
||||
title='节点摘要'
|
||||
description='阶段 3 已接入状态标签、部署命令、自动更新开关与手动更新动作。'
|
||||
action={
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => void queryClient.invalidateQueries({ queryKey: nodesQueryKey })}
|
||||
>
|
||||
刷新列表
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
|
||||
<AppCard
|
||||
title='创建或编辑节点'
|
||||
description='预创建节点后会立即生成节点专属 Token，可直接复制专属安装命令。'
|
||||
>
|
||||
<form className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='节点名' hint='示例：shanghai-edge-1' error={form.formState.errors.name?.message}>
|
||||
<ResourceInput placeholder='shanghai-edge-1' {...form.register('name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ToggleField
|
||||
label='启用自动更新'
|
||||
description='开启后 Agent 心跳返回会提示节点自动执行自更新。'
|
||||
checked={watchedAutoUpdate}
|
||||
onChange={(checked) =>
|
||||
form.setValue('auto_update_enabled', checked, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<PrimaryButton type='submit' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingNodeId ? '保存修改' : '新增节点'}
|
||||
</PrimaryButton>
|
||||
{editingNodeId ? (
|
||||
<SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
|
||||
取消编辑
|
||||
</SecondaryButton>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
</AppCard>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='节点管理'
|
||||
description='查看节点在线状态、最近心跳、部署命令与 Agent 更新动作，并支持预创建节点。'
|
||||
action={
|
||||
<>
|
||||
<SecondaryButton type='button' onClick={handleCreate}>
|
||||
新增节点
|
||||
</SecondaryButton>
|
||||
<Link
|
||||
href='/apply-log'
|
||||
className='inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]'
|
||||
>
|
||||
应用记录
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<AppCard
|
||||
title='节点摘要'
|
||||
description='节点创建、编辑和更新动作均已收敛到列表页与弹窗，便于在生产环境快速处理。'
|
||||
action={
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => void queryClient.invalidateQueries({ queryKey: nodesQueryKey })}
|
||||
>
|
||||
刷新列表
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
<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-[1fr_1fr]'>
|
||||
<AppCard
|
||||
@@ -503,7 +494,7 @@ export function NodesPage() {
|
||||
</AppCard>
|
||||
</div>
|
||||
|
||||
<AppCard title='节点列表' description='展示心跳、最近应用结果、版本信息与更新状态，可直接执行管理动作。'>
|
||||
<AppCard title='节点列表' description='展示心跳、最近应用结果、版本信息与更新状态，可直接执行管理动作。'>
|
||||
{nodesQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : nodesQuery.isError ? (
|
||||
@@ -628,6 +619,41 @@ export function NodesPage() {
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
<AppModal
|
||||
isOpen={isEditorOpen}
|
||||
onClose={handleReset}
|
||||
title={editingNodeId ? '编辑节点' : '新增节点'}
|
||||
description='预创建节点后会立即生成节点专属 Token，可继续复制专属安装命令。'
|
||||
footer={
|
||||
<div className='flex flex-wrap justify-end gap-3'>
|
||||
<SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type='submit' form='node-editor-form' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingNodeId ? '保存修改' : '新增节点'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form id='node-editor-form' className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='节点名' hint='示例：shanghai-edge-1' error={form.formState.errors.name?.message}>
|
||||
<ResourceInput placeholder='shanghai-edge-1' {...form.register('name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ToggleField
|
||||
label='启用自动更新'
|
||||
description='开启后 Agent 心跳返回会提示节点自动执行自更新。'
|
||||
checked={watchedAutoUpdate}
|
||||
onChange={(checked) =>
|
||||
form.setValue('auto_update_enabled', checked, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</form>
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,12 +7,13 @@ import { useFieldArray, 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 { 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 { publishConfigVersion } from '@/features/config-versions/api/config-versions';
|
||||
import {
|
||||
createProxyRoute,
|
||||
@@ -211,12 +212,13 @@ function getMatchMessage(
|
||||
return '未找到匹配证书，可继续手动选择。';
|
||||
}
|
||||
|
||||
export function ProxyRoutesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [editingRouteId, setEditingRouteId] = useState<number | null>(null);
|
||||
const [matchResult, setMatchResult] = useState<ManagedDomainMatchResult | null>(null);
|
||||
const [isMatching, setIsMatching] = useState(false);
|
||||
export function ProxyRoutesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [editingRouteId, setEditingRouteId] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [matchResult, setMatchResult] = useState<ManagedDomainMatchResult | null>(null);
|
||||
const [isMatching, setIsMatching] = useState(false);
|
||||
|
||||
const form = useForm<ProxyRouteFormValues>({
|
||||
resolver: zodResolver(proxyRouteSchema),
|
||||
@@ -251,12 +253,13 @@ export function ProxyRoutesPage() {
|
||||
? updateProxyRoute(editingRouteId, payload)
|
||||
: createProxyRoute(payload);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: editingRouteId ? '规则已更新。' : '规则已创建。' });
|
||||
setEditingRouteId(null);
|
||||
setMatchResult(null);
|
||||
form.reset(defaultValues);
|
||||
await queryClient.invalidateQueries({ queryKey: routesQueryKey });
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: editingRouteId ? '规则已更新。' : '规则已创建。' });
|
||||
setEditingRouteId(null);
|
||||
setIsEditorOpen(false);
|
||||
setMatchResult(null);
|
||||
form.reset(defaultValues);
|
||||
await queryClient.invalidateQueries({ queryKey: routesQueryKey });
|
||||
},
|
||||
onError: (error) => {
|
||||
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
|
||||
@@ -350,24 +353,34 @@ export function ProxyRoutesPage() {
|
||||
];
|
||||
}, [routesQuery.data]);
|
||||
|
||||
const handleReset = () => {
|
||||
setFeedback(null);
|
||||
setEditingRouteId(null);
|
||||
setMatchResult(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
const handleReset = () => {
|
||||
setFeedback(null);
|
||||
setEditingRouteId(null);
|
||||
setIsEditorOpen(false);
|
||||
setMatchResult(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setFeedback(null);
|
||||
setEditingRouteId(null);
|
||||
setMatchResult(null);
|
||||
form.reset(defaultValues);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = form.handleSubmit((values) => {
|
||||
setFeedback(null);
|
||||
saveMutation.mutate(values);
|
||||
});
|
||||
|
||||
const handleEdit = (route: ProxyRouteItem) => {
|
||||
setFeedback(null);
|
||||
setEditingRouteId(route.id);
|
||||
setMatchResult(null);
|
||||
form.reset(toFormValues(route));
|
||||
};
|
||||
const handleEdit = (route: ProxyRouteItem) => {
|
||||
setFeedback(null);
|
||||
setEditingRouteId(route.id);
|
||||
setMatchResult(null);
|
||||
form.reset(toFormValues(route));
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (route: ProxyRouteItem) => {
|
||||
if (!window.confirm(`确认删除规则 ${route.domain} 吗？`)) {
|
||||
@@ -389,218 +402,44 @@ export function ProxyRoutesPage() {
|
||||
|
||||
const routes = routesQuery.data || [];
|
||||
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='反代规则'
|
||||
description='维护域名到源站的映射、HTTPS 证书绑定与自定义请求头，并可直接触发配置发布。'
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<div className='grid gap-6 xl:grid-cols-[1.3fr_0.7fr]'>
|
||||
<AppCard
|
||||
title={editingRouteId ? '编辑规则' : '新增规则'}
|
||||
description='新增或修改反代规则后，可直接在当前页面完成发布。'
|
||||
>
|
||||
<form className='space-y-5' onSubmit={handleSubmit}>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<ResourceField
|
||||
label='域名'
|
||||
hint='示例：example.com'
|
||||
error={form.formState.errors.domain?.message}
|
||||
>
|
||||
<ResourceInput placeholder='example.com' {...form.register('domain')} />
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label='源站地址'
|
||||
hint='示例：https://origin.internal'
|
||||
error={form.formState.errors.origin_url?.message}
|
||||
>
|
||||
<ResourceInput placeholder='https://origin.internal' {...form.register('origin_url')} />
|
||||
</ResourceField>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 lg:grid-cols-2'>
|
||||
<ToggleField
|
||||
label='启用规则'
|
||||
description='关闭后该规则不会参与配置渲染与发布。'
|
||||
checked={watchedEnabled}
|
||||
onChange={(checked) => form.setValue('enabled', checked, { shouldDirty: true })}
|
||||
/>
|
||||
<ToggleField
|
||||
label='启用 HTTPS'
|
||||
description='启用后必须关联 TLS 证书，可选择是否将 HTTP 自动重定向到 HTTPS。'
|
||||
checked={watchedEnableHttps}
|
||||
onChange={(checked) => {
|
||||
form.setValue('enable_https', checked, { shouldDirty: true, shouldValidate: true });
|
||||
if (!checked) {
|
||||
form.setValue('cert_id', '', { shouldDirty: true, shouldValidate: true });
|
||||
form.setValue('redirect_http', false, { shouldDirty: true, shouldValidate: true });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 lg:grid-cols-[1.2fr_0.8fr]'>
|
||||
<ResourceField
|
||||
label='TLS 证书'
|
||||
hint='启用 HTTPS 后可自动推荐匹配证书，也支持手动选择。'
|
||||
error={form.formState.errors.cert_id?.message}
|
||||
>
|
||||
<ResourceSelect
|
||||
value={watchedCertId}
|
||||
disabled={!watchedEnableHttps || 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>
|
||||
<ToggleField
|
||||
label='HTTP 跳转 HTTPS'
|
||||
description='仅在启用 HTTPS 后可开启。开启后会将 HTTP 请求重定向到 HTTPS。'
|
||||
checked={watchedRedirectHttp}
|
||||
disabled={!watchedEnableHttps}
|
||||
onChange={(checked) =>
|
||||
form.setValue('redirect_http', checked, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-3'>
|
||||
<div>
|
||||
<p className='text-sm font-semibold text-[var(--foreground-primary)]'>自定义请求头</p>
|
||||
<p className='mt-1 text-xs leading-5 text-[var(--foreground-secondary)]'>
|
||||
可为空。若填写，请保证 Header 名称合法且不包含换行。
|
||||
</p>
|
||||
</div>
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => append({ key: '', value: '' })}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
添加请求头
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 space-y-4'>
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className='grid gap-3 md:grid-cols-[1fr_1fr_auto]'>
|
||||
<ResourceField
|
||||
label={index === 0 ? 'Header 名称' : `Header 名称 ${index + 1}`}
|
||||
error={form.formState.errors.custom_headers?.[index]?.key?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder='X-Trace-Id'
|
||||
{...form.register(`custom_headers.${index}.key`)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label={index === 0 ? 'Header 值' : `Header 值 ${index + 1}`}
|
||||
error={form.formState.errors.custom_headers?.[index]?.value?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder='$request_id'
|
||||
{...form.register(`custom_headers.${index}.value`)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<div className='flex items-end'>
|
||||
<DangerButton
|
||||
type='button'
|
||||
onClick={() => handleRemoveHeader(index)}
|
||||
className='w-full px-3 py-3 text-xs md:w-auto'
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ResourceField
|
||||
label='备注'
|
||||
hint='可选，便于标记用途、责任人或特殊说明。'
|
||||
error={form.formState.errors.remark?.message}
|
||||
>
|
||||
<ResourceTextarea placeholder='例如：主站生产流量入口' {...form.register('remark')} />
|
||||
</ResourceField>
|
||||
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<PrimaryButton type='submit' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingRouteId ? '保存修改' : '新增规则'}
|
||||
</PrimaryButton>
|
||||
{editingRouteId ? (
|
||||
<SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
|
||||
取消编辑
|
||||
</SecondaryButton>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
</AppCard>
|
||||
|
||||
<div className='space-y-6'>
|
||||
<AppCard
|
||||
title='发布与摘要'
|
||||
description='规则变更完成后，可直接发布为新的配置版本。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={() => publishMutation.mutate()} disabled={publishMutation.isPending}>
|
||||
{publishMutation.isPending ? '发布中...' : '发布当前规则'}
|
||||
</PrimaryButton>
|
||||
}
|
||||
>
|
||||
<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'>
|
||||
<p className='text-sm leading-6 text-[var(--foreground-secondary)]'>
|
||||
{getMatchMessage(matchResult, isMatching, watchedDomain, watchedEnableHttps)}
|
||||
</p>
|
||||
{matchResult?.matched && matchResult.candidates.length > 1 ? (
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{matchResult.candidates.map((candidate) => (
|
||||
<StatusBadge
|
||||
key={`${candidate.managed_domain_id}-${candidate.certificate_id}`}
|
||||
label={`${candidate.domain} → ${candidate.certificate_name}`}
|
||||
variant={candidate.match_type === 'exact' ? 'success' : 'info'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm text-[var(--foreground-secondary)]'>
|
||||
当前可选证书：{certificatesQuery.isLoading ? '加载中...' : `${certificates.length} 张`}
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='反代规则'
|
||||
description='维护域名到源站的映射、HTTPS 证书绑定与自定义请求头，并可直接触发配置发布。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={handleCreate}>
|
||||
新增规则
|
||||
</PrimaryButton>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
|
||||
<AppCard
|
||||
title='发布与摘要'
|
||||
description='规则维护动作改为按钮+弹窗模式，列表不再被长表单挤压。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={() => publishMutation.mutate()} disabled={publishMutation.isPending}>
|
||||
{publishMutation.isPending ? '发布中...' : '发布当前规则'}
|
||||
</PrimaryButton>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
|
||||
<AppCard title='规则列表' description='支持查看启用状态、HTTPS 配置、自定义请求头数量及最近更新时间。'>
|
||||
{routesQuery.isLoading ? (
|
||||
@@ -688,6 +527,184 @@ export function ProxyRoutesPage() {
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
<AppModal
|
||||
isOpen={isEditorOpen}
|
||||
onClose={handleReset}
|
||||
title={editingRouteId ? '编辑规则' : '新增规则'}
|
||||
description='新增或修改反代规则后，可直接回到列表页继续发布。'
|
||||
size='xl'
|
||||
footer={
|
||||
<div className='flex flex-wrap justify-end gap-3'>
|
||||
<SecondaryButton type='button' onClick={handleReset} disabled={saveMutation.isPending}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type='submit' form='proxy-route-editor-form' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingRouteId ? '保存修改' : '新增规则'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form id='proxy-route-editor-form' className='space-y-5' onSubmit={handleSubmit}>
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<ResourceField
|
||||
label='域名'
|
||||
hint='示例：example.com'
|
||||
error={form.formState.errors.domain?.message}
|
||||
>
|
||||
<ResourceInput placeholder='example.com' {...form.register('domain')} />
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label='源站地址'
|
||||
hint='示例：https://origin.internal'
|
||||
error={form.formState.errors.origin_url?.message}
|
||||
>
|
||||
<ResourceInput placeholder='https://origin.internal' {...form.register('origin_url')} />
|
||||
</ResourceField>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 lg:grid-cols-2'>
|
||||
<ToggleField
|
||||
label='启用规则'
|
||||
description='关闭后该规则不会参与配置渲染与发布。'
|
||||
checked={watchedEnabled}
|
||||
onChange={(checked) => form.setValue('enabled', checked, { shouldDirty: true })}
|
||||
/>
|
||||
<ToggleField
|
||||
label='启用 HTTPS'
|
||||
description='启用后必须关联 TLS 证书，可选择是否将 HTTP 自动重定向到 HTTPS。'
|
||||
checked={watchedEnableHttps}
|
||||
onChange={(checked) => {
|
||||
form.setValue('enable_https', checked, { shouldDirty: true, shouldValidate: true });
|
||||
if (!checked) {
|
||||
form.setValue('cert_id', '', { shouldDirty: true, shouldValidate: true });
|
||||
form.setValue('redirect_http', false, { shouldDirty: true, shouldValidate: true });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-4 lg:grid-cols-[1.2fr_0.8fr]'>
|
||||
<ResourceField
|
||||
label='TLS 证书'
|
||||
hint='启用 HTTPS 后可自动推荐匹配证书，也支持手动选择。'
|
||||
error={form.formState.errors.cert_id?.message}
|
||||
>
|
||||
<ResourceSelect
|
||||
value={watchedCertId}
|
||||
disabled={!watchedEnableHttps || 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>
|
||||
<ToggleField
|
||||
label='HTTP 跳转 HTTPS'
|
||||
description='仅在启用 HTTPS 后可开启。开启后会将 HTTP 请求重定向到 HTTPS。'
|
||||
checked={watchedRedirectHttp}
|
||||
disabled={!watchedEnableHttps}
|
||||
onChange={(checked) =>
|
||||
form.setValue('redirect_http', checked, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<div className='flex flex-wrap items-center justify-between gap-3'>
|
||||
<div>
|
||||
<p className='text-sm font-semibold text-[var(--foreground-primary)]'>自定义请求头</p>
|
||||
<p className='mt-1 text-xs leading-5 text-[var(--foreground-secondary)]'>
|
||||
可为空。若填写，请保证 Header 名称合法且不包含换行。
|
||||
</p>
|
||||
</div>
|
||||
<SecondaryButton
|
||||
type='button'
|
||||
onClick={() => append({ key: '', value: '' })}
|
||||
className='px-3 py-2 text-xs'
|
||||
>
|
||||
添加请求头
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
|
||||
<div className='mt-4 space-y-4'>
|
||||
{fields.map((field, index) => (
|
||||
<div key={field.id} className='grid gap-3 md:grid-cols-[1fr_1fr_auto]'>
|
||||
<ResourceField
|
||||
label={index === 0 ? 'Header 名称' : `Header 名称 ${index + 1}`}
|
||||
error={form.formState.errors.custom_headers?.[index]?.key?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder='X-Trace-Id'
|
||||
{...form.register(`custom_headers.${index}.key`)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label={index === 0 ? 'Header 值' : `Header 值 ${index + 1}`}
|
||||
error={form.formState.errors.custom_headers?.[index]?.value?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder='$request_id'
|
||||
{...form.register(`custom_headers.${index}.value`)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<div className='flex items-end'>
|
||||
<DangerButton
|
||||
type='button'
|
||||
onClick={() => handleRemoveHeader(index)}
|
||||
className='w-full px-3 py-3 text-xs md:w-auto'
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppCard title='证书匹配提示' description='根据域名自动匹配托管证书，优先使用精确匹配规则。'>
|
||||
<div className='space-y-3'>
|
||||
<p className='text-sm leading-6 text-[var(--foreground-secondary)]'>
|
||||
{getMatchMessage(matchResult, isMatching, watchedDomain, watchedEnableHttps)}
|
||||
</p>
|
||||
{matchResult?.matched && matchResult.candidates.length > 1 ? (
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{matchResult.candidates.map((candidate) => (
|
||||
<StatusBadge
|
||||
key={`${candidate.managed_domain_id}-${candidate.certificate_id}`}
|
||||
label={`${candidate.domain} → ${candidate.certificate_name}`}
|
||||
variant={candidate.match_type === 'exact' ? 'success' : 'info'}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm text-[var(--foreground-secondary)]'>
|
||||
当前可选证书：{certificatesQuery.isLoading ? '加载中...' : `${certificates.length} 张`}
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<ResourceField
|
||||
label='备注'
|
||||
hint='可选，便于标记用途、责任人或特殊说明。'
|
||||
error={form.formState.errors.remark?.message}
|
||||
>
|
||||
<ResourceTextarea placeholder='例如：主站生产流量入口' {...form.register('remark')} />
|
||||
</ResourceField>
|
||||
</form>
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ 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 {
|
||||
@@ -120,6 +121,7 @@ function toFilePayload(
|
||||
export function TlsCertificatesPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
|
||||
const [fileForm, setFileForm] = useState<FileImportFormValues>(defaultFileValues);
|
||||
const [certFile, setCertFile] = useState<File | null>(null);
|
||||
const [keyFile, setKeyFile] = useState<File | null>(null);
|
||||
@@ -139,6 +141,7 @@ export function TlsCertificatesPage() {
|
||||
mutationFn: async (values: ManualImportFormValues) => createTlsCertificate(toManualPayload(values)),
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '证书已导入。' });
|
||||
setIsImportModalOpen(false);
|
||||
manualForm.reset(defaultManualValues);
|
||||
await queryClient.invalidateQueries({ queryKey: tlsCertificatesQueryKey });
|
||||
},
|
||||
@@ -152,6 +155,7 @@ export function TlsCertificatesPage() {
|
||||
importTlsCertificateFiles(toFilePayload(values, certFile, keyFile)),
|
||||
onSuccess: async () => {
|
||||
setFeedback({ tone: 'success', message: '证书文件已导入。' });
|
||||
setIsImportModalOpen(false);
|
||||
setFileForm(defaultFileValues);
|
||||
setCertFile(null);
|
||||
setKeyFile(null);
|
||||
@@ -222,11 +226,21 @@ export function TlsCertificatesPage() {
|
||||
deleteMutation.mutate(certificate.id);
|
||||
};
|
||||
|
||||
const handleCloseImportModal = () => {
|
||||
setIsImportModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='TLS 证书'
|
||||
description='支持手动粘贴 PEM 导入和文件上传导入，并展示证书有效期与到期风险。'
|
||||
action={
|
||||
<PrimaryButton type='button' onClick={() => setIsImportModalOpen(true)}>
|
||||
导入证书
|
||||
</PrimaryButton>
|
||||
}
|
||||
/>
|
||||
|
||||
{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}
|
||||
@@ -245,6 +259,83 @@ export function TlsCertificatesPage() {
|
||||
</div>
|
||||
</AppCard>
|
||||
|
||||
<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>
|
||||
<AppModal
|
||||
isOpen={isImportModalOpen}
|
||||
onClose={handleCloseImportModal}
|
||||
title='导入证书'
|
||||
description='手动粘贴和文件导入都保留在同一个弹窗中，避免压缩主列表空间。'
|
||||
size='xl'
|
||||
>
|
||||
<div className='grid gap-6 xl:grid-cols-2'>
|
||||
<AppCard title='手动导入' description='直接粘贴 PEM 证书和私钥内容，适合快速录入已有证书。'>
|
||||
<form className='space-y-5' onSubmit={handleManualSubmit}>
|
||||
@@ -351,76 +442,7 @@ export function TlsCertificatesPage() {
|
||||
</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>
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,12 +8,13 @@ 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 { useAuth } from '@/components/providers/auth-provider';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { InlineMessage } from '@/components/feedback/inline-message';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { useAuth } from '@/components/providers/auth-provider';
|
||||
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 {
|
||||
createUser,
|
||||
getUser,
|
||||
@@ -96,10 +97,11 @@ export function UsersPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const { user: currentUser } = useAuth();
|
||||
const [page, setPage] = useState(0);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingUserId, setEditingUserId] = useState<number | null>(null);
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [searchKeyword, setSearchKeyword] = useState('');
|
||||
const [editingUserId, setEditingUserId] = useState<number | null>(null);
|
||||
const [isEditorOpen, setIsEditorOpen] = useState(false);
|
||||
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
|
||||
|
||||
const form = useForm<UserFormValues>({
|
||||
resolver: zodResolver(userSchema),
|
||||
@@ -153,12 +155,13 @@ export function UsersPage() {
|
||||
await createUser(payload);
|
||||
return '用户已创建。';
|
||||
},
|
||||
onSuccess: async (message) => {
|
||||
setFeedback({ tone: 'success', message });
|
||||
setEditingUserId(null);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
|
||||
onSuccess: async (message) => {
|
||||
setFeedback({ tone: 'success', message });
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
form.reset(defaultValues);
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: usersListQueryKey }),
|
||||
queryClient.invalidateQueries({ queryKey: ['users', 'detail'] }),
|
||||
]);
|
||||
},
|
||||
@@ -217,16 +220,25 @@ export function UsersPage() {
|
||||
setFeedback(null);
|
||||
};
|
||||
|
||||
const handleResetForm = () => {
|
||||
setEditingUserId(null);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleEdit = (targetUser: UserItem) => {
|
||||
setFeedback(null);
|
||||
setEditingUserId(targetUser.id);
|
||||
};
|
||||
const handleResetForm = () => {
|
||||
setEditingUserId(null);
|
||||
setIsEditorOpen(false);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditingUserId(null);
|
||||
setFeedback(null);
|
||||
form.reset(defaultValues);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (targetUser: UserItem) => {
|
||||
setFeedback(null);
|
||||
setEditingUserId(targetUser.id);
|
||||
setIsEditorOpen(true);
|
||||
};
|
||||
|
||||
const handleManage = (targetUser: UserItem, action: ManageUserAction) => {
|
||||
const actionText = {
|
||||
@@ -255,10 +267,10 @@ export function UsersPage() {
|
||||
});
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
return (
|
||||
<div className='space-y-6'>
|
||||
<PageHeader
|
||||
title='用户管理'
|
||||
description='阶段 4 已迁移用户管理页面，但当前账户没有管理员权限。'
|
||||
/>
|
||||
<EmptyState
|
||||
@@ -269,90 +281,36 @@ export function UsersPage() {
|
||||
);
|
||||
}
|
||||
|
||||
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='用户概览' 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>
|
||||
|
||||
<AppCard
|
||||
title={editingUserId ? '编辑用户' : '创建新用户'}
|
||||
description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
|
||||
>
|
||||
{editingUserId && editingUserQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : editingUserId && editingUserQuery.isError ? (
|
||||
<ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
|
||||
) : (
|
||||
<form className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='用户名' error={form.formState.errors.username?.message}>
|
||||
<ResourceInput placeholder='请输入用户名' {...form.register('username')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
|
||||
<ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField
|
||||
label={editingUserId ? '新密码' : '密码'}
|
||||
hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
|
||||
error={form.formState.errors.password?.message}
|
||||
>
|
||||
<ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
|
||||
</ResourceField>
|
||||
|
||||
{editingUserId && editingUserQuery.data ? (
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
|
||||
<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
|
||||
{editingUserQuery.data.email || '未绑定'}
|
||||
</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)]'>
|
||||
GitHub：{editingUserQuery.data.github_id || '未绑定'}
|
||||
</p>
|
||||
<p className='mt-1 text-sm text-[var(--foreground-primary)]'>
|
||||
微信：{editingUserQuery.data.wechat_id || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className='flex flex-wrap gap-3'>
|
||||
<PrimaryButton type='submit' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
|
||||
{editingUserId ? '取消编辑' : '重置表单'}
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</AppCard>
|
||||
</div>
|
||||
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='用户概览' 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>
|
||||
|
||||
<AppCard
|
||||
title='用户列表'
|
||||
@@ -487,6 +445,67 @@ export function UsersPage() {
|
||||
)}
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
<AppModal
|
||||
isOpen={isEditorOpen}
|
||||
onClose={handleResetForm}
|
||||
title={editingUserId ? '编辑用户' : '创建新用户'}
|
||||
description={editingUserId ? '可更新用户名、显示名称与密码。留空密码表示不修改。' : '新建用户默认创建为普通用户。'}
|
||||
footer={
|
||||
<div className='flex flex-wrap justify-end gap-3'>
|
||||
<SecondaryButton type='button' onClick={handleResetForm} disabled={saveMutation.isPending}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type='submit' form='user-editor-form' disabled={saveMutation.isPending}>
|
||||
{saveMutation.isPending ? '保存中...' : editingUserId ? '保存修改' : '创建用户'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{editingUserId && editingUserQuery.isLoading ? (
|
||||
<LoadingState />
|
||||
) : editingUserId && editingUserQuery.isError ? (
|
||||
<ErrorState title='用户详情加载失败' description={getErrorMessage(editingUserQuery.error)} />
|
||||
) : (
|
||||
<form id='user-editor-form' className='space-y-5' onSubmit={handleSubmit}>
|
||||
<ResourceField label='用户名' error={form.formState.errors.username?.message}>
|
||||
<ResourceInput placeholder='请输入用户名' {...form.register('username')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label='显示名称' error={form.formState.errors.display_name?.message}>
|
||||
<ResourceInput placeholder='请输入显示名称' {...form.register('display_name')} />
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField
|
||||
label={editingUserId ? '新密码' : '密码'}
|
||||
hint={editingUserId ? '留空表示保持原密码不变。' : '密码长度需为 8 到 20 个字符。'}
|
||||
error={form.formState.errors.password?.message}
|
||||
>
|
||||
<ResourceInput type='password' placeholder='请输入密码' {...form.register('password')} />
|
||||
</ResourceField>
|
||||
|
||||
{editingUserId && editingUserQuery.data ? (
|
||||
<div className='grid gap-4 md:grid-cols-2'>
|
||||
<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4'>
|
||||
<p className='text-xs uppercase tracking-[0.2em] text-[var(--foreground-muted)]'>绑定邮箱</p>
|
||||
<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
|
||||
{editingUserQuery.data.email || '未绑定'}
|
||||
</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)]'>
|
||||
GitHub：{editingUserQuery.data.github_id || '未绑定'}
|
||||
</p>
|
||||
<p className='mt-1 text-sm text-[var(--foreground-primary)]'>
|
||||
微信：{editingUserQuery.data.wechat_id || '未绑定'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</form>
|
||||
)}
|
||||
</AppModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user