tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-05 23:26:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

[优化] 代码优化Format

Browse Source
This commit is contained in:
ryan
2026-06-04 09:31:27 +08:00
parent fbb0909638
commit e117e314d9
28 changed files with 6394 additions and 3014 deletions
Download Patch File Download Diff File Expand all files Collapse all files
openflare_server/web/features/nodes/components/node-detail-page.tsx
+22 -11
View File
@@ -31,10 +31,7 @@ import {
updateNode,
} from '@/features/nodes/api/nodes';
import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
import type {
NodeItem,
NodeAgentReleaseInfo,
} from '@/features/nodes/types';
import type { NodeItem, NodeAgentReleaseInfo } from '@/features/nodes/types';
import {
CodeBlock,
DangerButton,
@@ -691,7 +688,9 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
总内存
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{formatBytes(observability.profile.total_memory_bytes)}
{formatBytes(
observability.profile.total_memory_bytes,
)}
</p>
</div>
<div>
@@ -735,7 +734,9 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
<div className="grid gap-4 md:grid-cols-2">
<MetricBar
label="CPU"
value={formatPercent(latestMetricSnapshot.cpu_usage_percent)}
value={formatPercent(
latestMetricSnapshot.cpu_usage_percent,
)}
progress={latestMetricSnapshot.cpu_usage_percent}
hint={
isMeaningfulTime(latestMetricSnapshot.captured_at)
@@ -794,7 +795,9 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
/>
<StatusBadge
label={getOpenrestyStatusLabel(node.openresty_status)}
variant={getOpenrestyStatusVariant(node.openresty_status)}
variant={getOpenrestyStatusVariant(
node.openresty_status,
)}
/>
<StatusBadge
label={
@@ -802,7 +805,9 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
? `${activeHealthEvents.length} 个活动异常`
: '无活动异常'
}
variant={activeHealthEvents.length ? 'warning' : 'success'}
variant={
activeHealthEvents.length ? 'warning' : 'success'
}
/>
</div>
@@ -852,7 +857,9 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
</p>
<p className="mt-3 text-2xl font-semibold text-[var(--foreground-primary)]">
{trafficSummary
? trafficSummary.request_count.toLocaleString('zh-CN')
? trafficSummary.request_count.toLocaleString(
'zh-CN',
)
: '—'}
</p>
<p className="mt-2 text-sm text-[var(--foreground-secondary)]">
@@ -1172,8 +1179,12 @@ function EdgeNodeDetailPage({ node }: { node: NodeItem }) {
variant={getHealthEventVariant(event)}
/>
<StatusBadge
label={event.status === 'active' ? '活动中' : '已恢复'}
variant={event.status === 'active' ? 'warning' : 'success'}
label={
event.status === 'active' ? '活动中' : '已恢复'
}
variant={
event.status === 'active' ? 'warning' : 'success'
}
/>
</div>
<p className="mt-3 text-sm text-[var(--foreground-secondary)]">
openflare_server/web/features/nodes/components/node-editor-modal.tsx
+49 -16
View File
@@ -257,12 +257,30 @@ function toPayload(values: NodeEditorValues): NodeMutationPayload {
ip: values.ip.trim(),
ip_manual_override: values.ip_manual_override,
auto_update_enabled: values.auto_update_enabled,
relay_bind_port: values.type === 'tunnel_relay' ? Number(values.relay_bind_port) : undefined,
relay_vhost_http_port: values.type === 'tunnel_relay' ? Number(values.relay_vhost_http_port) : undefined,
relay_client_access_addr: values.type === 'tunnel_relay' ? values.relay_client_access_addr.trim() : undefined,
relay_agent_access_addr: values.type === 'tunnel_relay' ? values.relay_agent_access_addr.trim() : undefined,
relay_client_proxy_url: values.type === 'tunnel_relay' ? values.relay_client_proxy_url.trim() : undefined,
relay_web_server_enabled: values.type === 'tunnel_relay' ? values.relay_web_server_enabled : undefined,
relay_bind_port:
values.type === 'tunnel_relay'
? Number(values.relay_bind_port)
: undefined,
relay_vhost_http_port:
values.type === 'tunnel_relay'
? Number(values.relay_vhost_http_port)
: undefined,
relay_client_access_addr:
values.type === 'tunnel_relay'
? values.relay_client_access_addr.trim()
: undefined,
relay_agent_access_addr:
values.type === 'tunnel_relay'
? values.relay_agent_access_addr.trim()
: undefined,
relay_client_proxy_url:
values.type === 'tunnel_relay'
? values.relay_client_proxy_url.trim()
: undefined,
relay_web_server_enabled:
values.type === 'tunnel_relay'
? values.relay_web_server_enabled
: undefined,
};
if (!values.geo_manual_override) {
@@ -389,30 +407,39 @@ export function NodeEditorModal({
</ResourceField>
{watchedType === 'tunnel_relay' && (
<div className="space-y-5 rounded-lg border border-border p-4 bg-muted/50">
<div className="border-border bg-muted/50 space-y-5 rounded-lg border p-4">
<h4 className="text-sm font-medium">中继配置 (Relay Config)</h4>
<ResourceField
label="中继绑定端口 (Bind Port)"
hint="中继服务端在此端口监听并接受 Flared 客户端连接。"
error={form.formState.errors.relay_bind_port?.message}
>
<ResourceInput placeholder="7000" {...form.register('relay_bind_port')} />
<ResourceInput
placeholder="7000"
{...form.register('relay_bind_port')}
/>
</ResourceField>
<ResourceField
label="中继 Vhost HTTP 端口 (Vhost HTTP Port)"
hint="中继服务端在此端口监听 HTTP 虚拟主机流量，用于 Openresty 转发到中继。"
error={form.formState.errors.relay_vhost_http_port?.message}
>
<ResourceInput placeholder="8080" {...form.register('relay_vhost_http_port')} />
<ResourceInput
placeholder="8080"
{...form.register('relay_vhost_http_port')}
/>
</ResourceField>
<ResourceField
label="边缘节点接入地址 (Edge Node Access Addr)"
hint="用于 Edge Node 转发请求。默认与 Client Access Addr 或 IP + 绑定端口一致。"
error={form.formState.errors.relay_agent_access_addr?.message}
label="边缘节点接入地址 (Edge Node Access Addr)"
hint="用于 Edge Node 转发请求。默认与 Client Access Addr 或 IP + 绑定端口一致。"
error={form.formState.errors.relay_agent_access_addr?.message}
>
<ResourceInput placeholder="例如: 10.0.0.1:7000" {...form.register('relay_agent_access_addr')} />
<ResourceInput
placeholder="例如: 10.0.0.1:7000"
{...form.register('relay_agent_access_addr')}
/>
</ResourceField>
<ResourceField
@@ -420,7 +447,10 @@ export function NodeEditorModal({
hint="如果不填默认使用节点的 IP + 绑定端口。"
error={form.formState.errors.relay_client_access_addr?.message}
>
<ResourceInput placeholder="例如: relay.example.com:7000" {...form.register('relay_client_access_addr')} />
<ResourceInput
placeholder="例如: relay.example.com:7000"
{...form.register('relay_client_access_addr')}
/>
</ResourceField>
<ResourceField
@@ -428,7 +458,10 @@ export function NodeEditorModal({
hint="可选，下发给客户端。当客户端连接中继需要经过 HTTP 代理时使用。"
error={form.formState.errors.relay_client_proxy_url?.message}
>
<ResourceInput placeholder="例如: http://10.0.0.1:3128" {...form.register('relay_client_proxy_url')} />
<ResourceInput
placeholder="例如: http://10.0.0.1:3128"
{...form.register('relay_client_proxy_url')}
/>
</ResourceField>
<ToggleField
openflare_server/web/features/nodes/components/nodes-page.tsx
+439 -417
View File
@@ -1,461 +1,483 @@
'use client';
import Link from 'next/link';
import {useSearchParams} from 'next/navigation';
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import {useMemo, useState} from 'react';
import { useSearchParams } from 'next/navigation';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useMemo, useState } from 'react';
import {EmptyState} from '@/components/feedback/empty-state';
import {ErrorState} from '@/components/feedback/error-state';
import {InlineMessage} from '@/components/feedback/inline-message';
import {LoadingState} from '@/components/feedback/loading-state';
import {PageHeader} from '@/components/layout/page-header';
import {AppCard} from '@/components/ui/app-card';
import {StatusBadge} from '@/components/ui/status-badge';
import {getConfigVersions} from '@/features/config-versions/api/config-versions';
import {createNode, deleteNode, getNodes, updateNode,} from '@/features/nodes/api/nodes';
import {NodeEditorModal} from '@/features/nodes/components/node-editor-modal';
import type {NodeItem, NodeMutationPayload} from '@/features/nodes/types';
import {DangerButton, SecondaryButton,} from '@/features/shared/components/resource-primitives';
import {formatDateTime, formatRelativeTime} from '@/lib/utils/date';
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 { getConfigVersions } from '@/features/config-versions/api/config-versions';
import {
getApplyLabel,
getApplyVariant,
getNodeStatusLabel,
getNodeStatusVariant,
getOpenrestyStatusLabel,
getOpenrestyStatusVariant,
getRelayStatusLabel,
getRelayStatusVariant,
isMeaningfulTime,
isNodeAbnormal,
isWSConnectedLastSeen,
createNode,
deleteNode,
getNodes,
updateNode,
} from '@/features/nodes/api/nodes';
import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
import type { NodeItem, NodeMutationPayload } from '@/features/nodes/types';
import {
DangerButton,
SecondaryButton,
} from '@/features/shared/components/resource-primitives';
import { formatDateTime, formatRelativeTime } from '@/lib/utils/date';
import {
getApplyLabel,
getApplyVariant,
getNodeStatusLabel,
getNodeStatusVariant,
getOpenrestyStatusLabel,
getOpenrestyStatusVariant,
getRelayStatusLabel,
getRelayStatusVariant,
isMeaningfulTime,
isNodeAbnormal,
isWSConnectedLastSeen,
} from '@/features/nodes/utils';
const nodesQueryKey = ['nodes'];
const supportedNodeFilters = ['all', 'edge', 'relay', 'tunnel', 'abnormal'] as const;
const supportedNodeFilters = [
'all',
'edge',
'relay',
'tunnel',
'abnormal',
] as const;
type NodeFilter = (typeof supportedNodeFilters)[number];
type FeedbackState = {
tone: 'info' | 'success' | 'danger';
message: string;
tone: 'info' | 'success' | 'danger';
message: string;
};
function getErrorMessage(error: unknown) {
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
return error instanceof Error ? error.message : '请求失败，请稍后重试。';
}
export function NodesPage() {
const searchParams = useSearchParams();
const queryClient = useQueryClient();
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
const [isEditorOpen, setIsEditorOpen] = useState(false);
const searchParams = useSearchParams();
const queryClient = useQueryClient();
const [feedback, setFeedback] = useState<FeedbackState | null>(null);
const [editingNode, setEditingNode] = useState<NodeItem | null>(null);
const [isEditorOpen, setIsEditorOpen] = useState(false);
const nodesQuery = useQuery({
queryKey: nodesQueryKey,
queryFn: getNodes,
refetchInterval: 5000,
});
const nodesQuery = useQuery({
queryKey: nodesQueryKey,
queryFn: getNodes,
refetchInterval: 5000,
});
const configVersionsQuery = useQuery({
queryKey: ['config-versions'],
queryFn: getConfigVersions,
refetchInterval: 5000,
});
const configVersionsQuery = useQuery({
queryKey: ['config-versions'],
queryFn: getConfigVersions,
refetchInterval: 5000,
});
const saveMutation = useMutation({
mutationFn: async (payload: NodeMutationPayload) => {
return editingNode
? updateNode(editingNode.id, payload)
: createNode(payload);
},
onSuccess: async () => {
setFeedback({
tone: 'success',
message: editingNode ? '节点已更新。' : '节点已创建。',
});
setEditingNode(null);
setIsEditorOpen(false);
await queryClient.invalidateQueries({queryKey: nodesQueryKey});
},
onError: (error) => {
setFeedback({tone: 'danger', message: getErrorMessage(error)});
},
});
const saveMutation = useMutation({
mutationFn: async (payload: NodeMutationPayload) => {
return editingNode
? updateNode(editingNode.id, payload)
: createNode(payload);
},
onSuccess: async () => {
setFeedback({
tone: 'success',
message: editingNode ? '节点已更新。' : '节点已创建。',
});
setEditingNode(null);
setIsEditorOpen(false);
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const deleteMutation = useMutation({
mutationFn: deleteNode,
onSuccess: async () => {
setFeedback({tone: 'success', message: '节点已删除。'});
setEditingNode(null);
await queryClient.invalidateQueries({queryKey: nodesQueryKey});
},
onError: (error) => {
setFeedback({tone: 'danger', message: getErrorMessage(error)});
},
});
const deleteMutation = useMutation({
mutationFn: deleteNode,
onSuccess: async () => {
setFeedback({ tone: 'success', message: '节点已删除。' });
setEditingNode(null);
await queryClient.invalidateQueries({ queryKey: nodesQueryKey });
},
onError: (error) => {
setFeedback({ tone: 'danger', message: getErrorMessage(error) });
},
});
const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
const activeVersion = useMemo(
() =>
(configVersionsQuery.data ?? []).find((item) => item.is_active)
?.version ?? '',
[configVersionsQuery.data],
);
const nodeFilter = useMemo<NodeFilter>(() => {
const current = searchParams.get('filter')?.trim().toLowerCase() ?? '';
if (supportedNodeFilters.includes(current as NodeFilter)) {
return current as NodeFilter;
}
const nodes = useMemo(() => nodesQuery.data ?? [], [nodesQuery.data]);
const activeVersion = useMemo(
() =>
(configVersionsQuery.data ?? []).find((item) => item.is_active)
?.version ?? '',
[configVersionsQuery.data],
);
const nodeFilter = useMemo<NodeFilter>(() => {
const current = searchParams.get('filter')?.trim().toLowerCase() ?? '';
if (supportedNodeFilters.includes(current as NodeFilter)) {
return current as NodeFilter;
}
const legacyRisk = searchParams.get('risk')?.trim().toLowerCase() ?? '';
if (
legacyRisk === 'offline' ||
legacyRisk === 'unhealthy' ||
legacyRisk === 'lagging'
) {
return 'abnormal';
}
const legacyRisk = searchParams.get('risk')?.trim().toLowerCase() ?? '';
if (
legacyRisk === 'offline' ||
legacyRisk === 'unhealthy' ||
legacyRisk === 'lagging'
) {
return 'abnormal';
}
return 'all';
}, [searchParams]);
const filteredNodes = useMemo(() => {
switch (nodeFilter) {
case 'all':
return nodes;
case 'relay':
return nodes.filter((node) => node.node_type === 'tunnel_relay');
case 'tunnel':
return nodes.filter((node) => node.node_type === 'tunnel_client');
case 'abnormal':
return nodes.filter((node) => isNodeAbnormal(node, activeVersion));
case 'edge':
default:
return nodes.filter((node) => node.node_type === 'edge_node');
}
}, [activeVersion, nodeFilter, nodes]);
return 'all';
}, [searchParams]);
const filteredNodes = useMemo(() => {
switch (nodeFilter) {
case 'all':
return nodes;
case 'relay':
return nodes.filter((node) => node.node_type === 'tunnel_relay');
case 'tunnel':
return nodes.filter((node) => node.node_type === 'tunnel_client');
case 'abnormal':
return nodes.filter((node) => isNodeAbnormal(node, activeVersion));
case 'edge':
default:
return nodes.filter((node) => node.node_type === 'edge_node');
}
}, [activeVersion, nodeFilter, nodes]);
const filterDescription = useMemo(() => {
switch (nodeFilter) {
case 'all':
return '当前展示全部节点。';
case 'relay':
return '当前仅展示 Relay 节点。';
case 'tunnel':
return '当前仅展示 Tunnel 节点。';
case 'abnormal':
return activeVersion
? `当前仅展示异常节点（离线、运行异常或未追平激活版本 ${activeVersion}）。`
: '当前仅展示异常节点（离线或运行异常）。';
case 'edge':
default:
return '当前仅展示 Edge 节点。';
}
}, [activeVersion, nodeFilter]);
const filterDescription = useMemo(() => {
switch (nodeFilter) {
case 'all':
return '当前展示全部节点。';
case 'relay':
return '当前仅展示 Relay 节点。';
case 'tunnel':
return '当前仅展示 Tunnel 节点。';
case 'abnormal':
return activeVersion
? `当前仅展示异常节点（离线、运行异常或未追平激活版本 ${activeVersion}）。`
: '当前仅展示异常节点（离线或运行异常）。';
case 'edge':
default:
return '当前仅展示 Edge 节点。';
}
}, [activeVersion, nodeFilter]);
const handleReset = () => {
setFeedback(null);
setEditingNode(null);
setIsEditorOpen(false);
};
const handleReset = () => {
setFeedback(null);
setEditingNode(null);
setIsEditorOpen(false);
};
const handleCreate = () => {
setFeedback(null);
setEditingNode(null);
setIsEditorOpen(true);
};
const handleCreate = () => {
setFeedback(null);
setEditingNode(null);
setIsEditorOpen(true);
};
const handleEdit = (node: NodeItem) => {
setFeedback(null);
setEditingNode(node);
setIsEditorOpen(true);
};
const handleEdit = (node: NodeItem) => {
setFeedback(null);
setEditingNode(node);
setIsEditorOpen(true);
};
const handleDelete = (nodeId: number, nodeName: string) => {
if (
!window.confirm(
`确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
)
) {
return;
}
const handleDelete = (nodeId: number, nodeName: string) => {
if (
!window.confirm(
`确认删除节点“${nodeName}”吗？删除后该节点需要重新创建并重新接入。`,
)
) {
return;
}
setFeedback(null);
deleteMutation.mutate(nodeId);
};
return (
<>
<div className="space-y-6">
<PageHeader
title="节点管理"
description="显示节点相关信息。"
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>
</>
}
/>
setFeedback(null);
deleteMutation.mutate(nodeId);
};
return (
<>
<div className="space-y-6">
<PageHeader
title="节点管理"
description="显示节点相关信息。"
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}
onClear={() => setFeedback(null)}
/>
) : null}
{feedback ? (
<InlineMessage
tone={feedback.tone}
message={feedback.message}
onClear={() => setFeedback(null)}
/>
) : null}
<AppCard
title="节点列表"
description={filterDescription}
action={
<SecondaryButton
type="button"
onClick={() =>
void queryClient.invalidateQueries({queryKey: nodesQueryKey})
}
>
立即刷新
</SecondaryButton>
}
<AppCard
title="节点列表"
description={filterDescription}
action={
<SecondaryButton
type="button"
onClick={() =>
void queryClient.invalidateQueries({ queryKey: nodesQueryKey })
}
>
立即刷新
</SecondaryButton>
}
>
{nodesQuery.isLoading ? (
<LoadingState />
) : nodesQuery.isError ? (
<ErrorState
title="节点列表加载失败"
description={getErrorMessage(nodesQuery.error)}
/>
) : filteredNodes.length === 0 ? (
<EmptyState
title={nodes.length === 0 ? '暂无节点' : '当前筛选无结果'}
description={
nodes.length === 0
? '请先创建一个节点，然后进入详情页查看专属部署命令。'
: '可以返回总览继续排查，或切换到其他筛选查看完整列表。'
}
/>
) : (
<div className="space-y-4">
<div className="flex flex-wrap gap-2">
<Link
href="/node"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'all'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
{nodesQuery.isLoading ? (
<LoadingState/>
) : nodesQuery.isError ? (
<ErrorState
title="节点列表加载失败"
description={getErrorMessage(nodesQuery.error)}
/>
) : filteredNodes.length === 0 ? (
<EmptyState
title={nodes.length === 0 ? '暂无节点' : '当前筛选无结果'}
description={
nodes.length === 0
? '请先创建一个节点，然后进入详情页查看专属部署命令。'
: '可以返回总览继续排查，或切换到其他筛选查看完整列表。'
}
/>
) : (
<div className="space-y-4">
<div className="flex flex-wrap gap-2">
<Link
href="/node"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'all'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
全部节点
</Link>
<Link
href="/node?filter=edge"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'edge'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Edge
</Link>
<Link
href="/node?filter=relay"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'relay'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Relay
</Link>
<Link
href="/node?filter=tunnel"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'tunnel'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Tunnel
</Link>
<Link
href="/node?filter=abnormal"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'abnormal'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
异常
</Link>
</div>
全部节点
</Link>
<Link
href="/node?filter=edge"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'edge'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Edge
</Link>
<Link
href="/node?filter=relay"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'relay'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Relay
</Link>
<Link
href="/node?filter=tunnel"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'tunnel'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
Tunnel
</Link>
<Link
href="/node?filter=abnormal"
className={`inline-flex items-center rounded-full border px-3 py-1.5 text-xs transition ${
nodeFilter === 'abnormal'
? 'border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground-primary)]'
: 'border-[var(--border-default)] text-[var(--foreground-secondary)] hover:bg-[var(--control-background-hover)]'
}`}
>
异常
</Link>
</div>
<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">Version</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)]">
{filteredNodes.map((node) => (
<tr key={node.id} className="align-top">
<td className="px-3 py-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<p className="font-medium text-[var(--foreground-primary)]">
{node.name}
</p>
{node.node_type === 'tunnel_relay' ? (
<span
className="rounded-full border border-blue-500/20 bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
<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">Version</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)]">
{filteredNodes.map((node) => (
<tr key={node.id} className="align-top">
<td className="px-3 py-4">
<div className="space-y-1">
<div className="flex items-center gap-2">
<p className="font-medium text-[var(--foreground-primary)]">
{node.name}
</p>
{node.node_type === 'tunnel_relay' ? (
<span className="rounded-full border border-blue-500/20 bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
Relay
</span>
) : node.node_type === 'tunnel_client' ? (
<span
className="rounded-full border border-purple-500/20 bg-purple-50 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
) : node.node_type === 'tunnel_client' ? (
<span className="rounded-full border border-purple-500/20 bg-purple-50 px-2 py-0.5 text-xs text-purple-700 dark:bg-purple-900/30 dark:text-purple-300">
Client
</span>
) : (
<span
className="rounded-full border border-gray-500/20 bg-gray-50 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
) : (
<span className="rounded-full border border-gray-500/20 bg-gray-50 px-2 py-0.5 text-xs text-gray-700 dark:bg-gray-800/50 dark:text-gray-300">
Edge
</span>
)}
</div>
<p className="text-xs text-[var(--foreground-secondary)]">
IP：{node.ip || 'null'}
{node.ip_manual_override ? '（已锁定）' : ''}
</p>
<p className="text-xs text-[var(--foreground-secondary)]">
位置：{node.geo_name || '未配置地图点位'}
</p>
</div>
</td>
<td className="px-3 py-4">
<StatusBadge
label={getNodeStatusLabel(node.status)}
variant={getNodeStatusVariant(node.status)}
/>
</td>
<td className="px-3 py-4 text-sm text-[var(--foreground-secondary)]">
{node.version || 'unknown'}
</td>
<td className="px-3 py-4">
<div className="space-y-2">
{node.node_type === 'tunnel_relay' ? (
<StatusBadge
label={getRelayStatusLabel(node.relay_status)}
variant={getRelayStatusVariant(
node.relay_status,
)}
/>
) : node.node_type === 'tunnel_client' ? (
<StatusBadge
label={node.status === 'online' ? '运行中' : '未知'}
variant={node.status === 'online' ? 'success' : 'warning'}
/>
) : (
<StatusBadge
label={getOpenrestyStatusLabel(
node.openresty_status,
)}
variant={getOpenrestyStatusVariant(
node.openresty_status,
)}
/>
)}
</div>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{node.current_version || (node.node_type === 'tunnel_relay' ? '实时配置' : '未应用')}
</td>
<td className="px-3 py-4">
<div className="space-y-2">
{node.node_type === 'tunnel_relay' ? (
<span className="text-sm text-[var(--foreground-secondary)]">—</span>
) : (
<StatusBadge
label={getApplyLabel(node.latest_apply_result)}
variant={getApplyVariant(
node.latest_apply_result,
)}
/>
)}
</div>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{isWSConnectedLastSeen(node.last_seen_at)
? 'WS 已连接'
: isMeaningfulTime(node.last_seen_at)
? `${formatRelativeTime(
node.last_seen_at,
)} · ${formatDateTime(node.last_seen_at)}`
: '暂无'}
</td>
<td className="px-3 py-4">
<div className="flex flex-wrap gap-2">
<Link
href={`/node/detail?id=${node.id}`}
className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
>
详情
</Link>
<SecondaryButton
type="button"
onClick={() => handleEdit(node)}
className="px-3 py-2 text-xs"
>
编辑
</SecondaryButton>
<DangerButton
type="button"
onClick={() => handleDelete(node.id, node.name)}
disabled={deleteMutation.isPending}
className="px-3 py-2 text-xs"
>
删除
</DangerButton>
</div>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
)}
</AppCard>
<p className="text-xs text-[var(--foreground-secondary)]">
IP：{node.ip || 'null'}
{node.ip_manual_override ? '（已锁定）' : ''}
</p>
<p className="text-xs text-[var(--foreground-secondary)]">
位置：{node.geo_name || '未配置地图点位'}
</p>
</div>
</td>
<td className="px-3 py-4">
<StatusBadge
label={getNodeStatusLabel(node.status)}
variant={getNodeStatusVariant(node.status)}
/>
</td>
<td className="px-3 py-4 text-sm text-[var(--foreground-secondary)]">
{node.version || 'unknown'}
</td>
<td className="px-3 py-4">
<div className="space-y-2">
{node.node_type === 'tunnel_relay' ? (
<StatusBadge
label={getRelayStatusLabel(node.relay_status)}
variant={getRelayStatusVariant(
node.relay_status,
)}
/>
) : node.node_type === 'tunnel_client' ? (
<StatusBadge
label={
node.status === 'online' ? '运行中' : '未知'
}
variant={
node.status === 'online'
? 'success'
: 'warning'
}
/>
) : (
<StatusBadge
label={getOpenrestyStatusLabel(
node.openresty_status,
)}
variant={getOpenrestyStatusVariant(
node.openresty_status,
)}
/>
)}
</div>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{node.current_version ||
(node.node_type === 'tunnel_relay'
? '实时配置'
: '未应用')}
</td>
<td className="px-3 py-4">
<div className="space-y-2">
{node.node_type === 'tunnel_relay' ? (
<span className="text-sm text-[var(--foreground-secondary)]">
—
</span>
) : (
<StatusBadge
label={getApplyLabel(node.latest_apply_result)}
variant={getApplyVariant(
node.latest_apply_result,
)}
/>
)}
</div>
</td>
<td className="px-3 py-4 text-[var(--foreground-secondary)]">
{isWSConnectedLastSeen(node.last_seen_at)
? 'WS 已连接'
: isMeaningfulTime(node.last_seen_at)
? `${formatRelativeTime(
node.last_seen_at,
)} · ${formatDateTime(node.last_seen_at)}`
: '暂无'}
</td>
<td className="px-3 py-4">
<div className="flex flex-wrap gap-2">
<Link
href={`/node/detail?id=${node.id}`}
className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-3 py-2 text-xs font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
>
详情
</Link>
<SecondaryButton
type="button"
onClick={() => handleEdit(node)}
className="px-3 py-2 text-xs"
>
编辑
</SecondaryButton>
<DangerButton
type="button"
onClick={() => handleDelete(node.id, node.name)}
disabled={deleteMutation.isPending}
className="px-3 py-2 text-xs"
>
删除
</DangerButton>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<NodeEditorModal
isOpen={isEditorOpen}
node={editingNode}
isSubmitting={saveMutation.isPending}
title={editingNode ? '编辑节点' : '新增节点'}
onClose={handleReset}
description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
submitLabel={editingNode ? '保存修改' : '新增节点'}
onSubmit={(payload) => {
setFeedback(null);
saveMutation.mutate(payload);
}}
/>
</>
);
)}
</AppCard>
</div>
<NodeEditorModal
isOpen={isEditorOpen}
node={editingNode}
isSubmitting={saveMutation.isPending}
title={editingNode ? '编辑节点' : '新增节点'}
onClose={handleReset}
description="预创建节点后可在详情页查看专属 Token、部署命令与更新控制。"
submitLabel={editingNode ? '保存修改' : '新增节点'}
onSubmit={(payload) => {
setFeedback(null);
saveMutation.mutate(payload);
}}
/>
</>
);
}
openflare_server/web/features/nodes/components/relay-detail-page.tsx
+1 -3
View File
@@ -730,8 +730,6 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
)}
</AppCard>
</div>
</>
) : null}
@@ -766,7 +764,7 @@ export function RelayDetailPage({ node }: { node: NodeItem }) {
href={`http://${node.ip || '127.0.0.1'}:${node.relay_bind_port + 500}`}
target="_blank"
rel="noreferrer"
className="text-[var(--accent-strong)] hover:underline font-medium"
className="font-medium text-[var(--accent-strong)] hover:underline"
>
点击打开 Web 界面
</a>
openflare_server/web/features/nodes/components/tunnel-detail-page.tsx
+35 -21
View File
@@ -27,10 +27,7 @@ import {
updateNode,
} from '@/features/nodes/api/nodes';
import { NodeEditorModal } from '@/features/nodes/components/node-editor-modal';
import type {
NodeItem,
NodeAgentReleaseInfo,
} from '@/features/nodes/types';
import type { NodeItem, NodeAgentReleaseInfo } from '@/features/nodes/types';
import {
CodeBlock,
DangerButton,
@@ -217,9 +214,11 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
});
const handleDelete = () => {
if (!window.confirm(
`确认删除节点“${node.name}”吗？删除后该节点需要重新创建并重新接入。`,
)) {
if (
!window.confirm(
`确认删除节点“${node.name}”吗？删除后该节点需要重新创建并重新接入。`,
)
) {
return;
}
setFeedback(null);
@@ -266,7 +265,12 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
default:
return observability?.health_events ?? [];
}
}, [activeHealthEvents, healthEventFilter, observability?.health_events, resolvedHealthEvents]);
}, [
activeHealthEvents,
healthEventFilter,
observability?.health_events,
resolvedHealthEvents,
]);
const tabs = useMemo(
() =>
@@ -550,7 +554,9 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
总内存
</p>
<p className="mt-2 text-sm text-[var(--foreground-primary)]">
{formatBytes(observability.profile.total_memory_bytes)}
{formatBytes(
observability.profile.total_memory_bytes,
)}
</p>
</div>
<div>
@@ -594,7 +600,9 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
<div className="grid gap-4 md:grid-cols-2">
<MetricBar
label="CPU"
value={formatPercent(latestMetricSnapshot.cpu_usage_percent)}
value={formatPercent(
latestMetricSnapshot.cpu_usage_percent,
)}
progress={latestMetricSnapshot.cpu_usage_percent}
hint={
isMeaningfulTime(latestMetricSnapshot.captured_at)
@@ -703,8 +711,12 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
variant={getHealthEventVariant(event)}
/>
<StatusBadge
label={event.status === 'active' ? '活动中' : '已恢复'}
variant={event.status === 'active' ? 'warning' : 'success'}
label={
event.status === 'active' ? '活动中' : '已恢复'
}
variant={
event.status === 'active' ? 'warning' : 'success'
}
/>
</div>
<p className="mt-3 text-sm text-[var(--foreground-secondary)]">
@@ -1126,12 +1138,8 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
/>
) : (
<div className="space-y-3 text-sm text-[var(--foreground-secondary)]">
<p>
该操作会物理删除此节点在控制端记录的所有健康诊断事件历史。
</p>
<p>
这不会影响节点在后续运行中继续捕获并上报新的故障。
</p>
<p>该操作会物理删除此节点在控制端记录的所有健康诊断事件历史。</p>
<p>这不会影响节点在后续运行中继续捕获并上报新的故障。</p>
</div>
)}
</AppModal>
@@ -1200,8 +1208,12 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
{selectedReleaseChannel === 'preview' ? '预览版' : '正式版'}
</p>
<StatusBadge
label={selectedReleaseChannel === 'preview' ? 'Preview' : 'Stable'}
variant={selectedReleaseChannel === 'preview' ? 'warning' : 'info'}
label={
selectedReleaseChannel === 'preview' ? 'Preview' : 'Stable'
}
variant={
selectedReleaseChannel === 'preview' ? 'warning' : 'info'
}
/>
</div>
</AppCard>
@@ -1254,7 +1266,9 @@ export function TunnelDetailPage({ node }: { node: NodeItem }) {
? '发现可升级版本'
: '当前已是最新版本'
}
variant={selectedAgentRelease.has_update ? 'warning' : 'success'}
variant={
selectedAgentRelease.has_update ? 'warning' : 'success'
}
/>
{selectedAgentRelease.prerelease ? (
<StatusBadge label="Preview 发布" variant="warning" />
openflare_server/web/features/nodes/utils.ts
+5 -2
View File
@@ -1,10 +1,13 @@
import type { NodeItem } from '@/features/nodes/types';
export const WS_CONNECTED_LAST_SEEN = '__OPENFLARE_WS_CONNECTED__';
export const FLARED_WS_CONNECTED_LAST_SEEN = '__OPENFLARE_FLARED_WS_CONNECTED__';
export const FLARED_WS_CONNECTED_LAST_SEEN =
'__OPENFLARE_FLARED_WS_CONNECTED__';
export function isWSConnectedLastSeen(value: string | null | undefined) {
return value === WS_CONNECTED_LAST_SEEN || value === FLARED_WS_CONNECTED_LAST_SEEN;
return (
value === WS_CONNECTED_LAST_SEEN || value === FLARED_WS_CONNECTED_LAST_SEEN
);
}
export function isMeaningfulTime(value: string | null | undefined) {