[优化] 界面优化

2026-10-05 07:26:36 +08:00 · 2026-03-11 21:51:32 +08:00
parent 0edc024cbd
commit c0ec718563
8 changed files with 536 additions and 623 deletions
@@ -1,20 +1,20 @@
-'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';
+'use client';

-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 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 { 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,
@@ -157,14 +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 [isEditorOpen, setIsEditorOpen] = useState(false);
-	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),
@@ -209,15 +209,15 @@ export function NodesPage() {
 			return editingNodeId ? updateNode(editingNodeId, payload) : createNode(payload);
 		},
 		onSuccess: async (node) => {
-			setFeedback({
-				tone: 'success',
-				message: editingNodeId ? '节点已更新。' : '节点已创建。',
-			});
-			setEditingNodeId(null);
-			setIsEditorOpen(false);
-			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 }),
 			]);
@@ -276,30 +276,30 @@ export function NodesPage() {
 		return nodes.find((item) => item.id === selectedNode.id) ?? selectedNode;
 	}, [nodes, selectedNode]);

-	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 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 (
@@ -345,76 +345,30 @@ export function NodesPage() {
 			? buildNodeInstallCommand(normalizedServerUrl, selectedNodeFromList.agent_token)
 			: '';

-	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}
-
-			<div className='grid gap-6 xl:grid-cols-[1fr_1fr]'>
-				<AppCard
-					title='Discovery Token 部署'
-					description='适用于新节点首次接入，Agent 会自动注册并换取节点专属 Token。'
-					action={
-						<div className='flex flex-wrap gap-2'>
-							<SecondaryButton type='button' onClick={handleRotateToken} disabled={rotateMutation.isPending}>
-								{rotateMutation.isPending ? '生成中...' : '重新生成 Token'}
-							</SecondaryButton>
-							{discoveryCommand ? (
-								<PrimaryButton
-									type='button'
-									onClick={() => void handleCopy(discoveryCommand, 'Discovery 部署命令已复制。')}
-								>
-									复制命令
-								</PrimaryButton>
-							) : null}
-						</div>
-					}
-				>
-					{bootstrapQuery.isLoading ? (
-						<LoadingState />
-					) : bootstrapQuery.isError ? (
-						<ErrorState title='Discovery Token 加载失败' description={getErrorMessage(bootstrapQuery.error)} />
-					) : (
-						<div className='space-y-4'>
-							<ResourceField label='Server URL' hint='默认使用当前管理端来源，可按需改为对外访问地址。'>
-								<ResourceInput value={serverUrl} onChange={(event) => setServerUrl(event.target.value)} />
-							</ResourceField>
+	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>
+					</>
+				}
+			/>

-							<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)]'>Discovery Token</p>
-									<p className='mt-2 break-all text-sm text-[var(--foreground-primary)]'>
-										{bootstrapToken || '暂无'}
-									</p>
-								</div>
-								<div className='rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-4 text-sm leading-6 text-[var(--foreground-secondary)]'>
-									创建节点后也可以使用节点专属 Token 安装，这种方式适合预分配节点名与更新策略。
-								</div>
-							</div>
-
-							{discoveryCommand ? <CodeBlock className='whitespace-pre-wrap'>{discoveryCommand}</CodeBlock> : null}
-						</div>
-					)}
-				</AppCard>
+			{feedback ? <InlineMessage tone={feedback.tone} message={feedback.message} /> : null}

+			<div className='grid gap-6 xl:grid-cols-[1fr_1fr]'>
 				<AppCard
 					title='节点专属部署命令'
 					description='适用于已在管理端预创建节点的场景，可避免首次接入时匿名自动命名。'
@@ -458,18 +412,18 @@ export function NodesPage() {
 				</AppCard>
 			</div>

-			<AppCard
-				title='节点列表'
-				description='展示心跳、最近应用结果、版本信息与更新状态，可直接执行管理动作。'
-				action={
-					<SecondaryButton
-						type='button'
-						onClick={() => void queryClient.invalidateQueries({ queryKey: nodesQueryKey })}
-					>
-						刷新列表
-					</SecondaryButton>
-				}
-			>
+			<AppCard
+				title='节点列表'
+				description='展示心跳、最近应用结果、版本信息与更新状态，可直接执行管理动作。'
+				action={
+					<SecondaryButton
+						type='button'
+						onClick={() => void queryClient.invalidateQueries({ queryKey: nodesQueryKey })}
+					>
+						刷新列表
+					</SecondaryButton>
+				}
+			>
 				{nodesQuery.isLoading ? (
 					<LoadingState />
 				) : nodesQuery.isError ? (
@@ -594,41 +548,41 @@ export function NodesPage() {
 					</div>
 				)}
 			</AppCard>
-			</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>
-		</>
-	);
-}
+			</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>
+		</>
+	);
+}