mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-09-29 05:56:38 +08:00
[优化] 代码优化Format
This commit is contained in:
ryan
@@ -184,6 +184,6 @@ button {
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@@ -21,4 +21,3 @@ export function EmptyState({ title, description, children }: EmptyStateProps) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -221,7 +221,7 @@ function SidebarContent({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<nav className="min-h-0 flex-1 overflow-y-auto no-scrollbar pr-1 flex flex-col gap-2">
|
||||
<nav className="no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
|
||||
{dashboardNavigation.map((item) => (
|
||||
<SidebarNavItem
|
||||
key={item.href}
|
||||
|
||||
@@ -214,10 +214,7 @@ export function DashboardTopbar() {
|
||||
socket.onmessage = (event) => {
|
||||
const snapshot = parseUpgradeStreamSnapshot(String(event.data));
|
||||
if (snapshot) {
|
||||
if (
|
||||
snapshot.in_progress ||
|
||||
snapshot.upgrade_status === 'succeeded'
|
||||
) {
|
||||
if (snapshot.in_progress || snapshot.upgrade_status === 'succeeded') {
|
||||
upgradeRefreshPendingRef.current = true;
|
||||
}
|
||||
if (snapshot.upgrade_status === 'failed') {
|
||||
|
||||
@@ -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)]">
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -49,10 +49,13 @@ export function uploadPagesDeployment(
|
||||
const formData = new FormData();
|
||||
formData.append('package', file);
|
||||
formData.append('entry_file', entryFile);
|
||||
return apiRequest<PagesDeployment>(`/pages/${projectId}/deployments/upload`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
return apiRequest<PagesDeployment>(
|
||||
`/pages/${projectId}/deployments/upload`,
|
||||
{
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return new Promise<PagesDeployment>((resolve, reject) => {
|
||||
@@ -86,7 +89,12 @@ export function uploadPagesDeployment(
|
||||
reject(new ApiError(payload?.message || '请求失败', xhr.status));
|
||||
}
|
||||
} else {
|
||||
reject(new ApiError(payload?.message || `请求失败（${xhr.status}）`, xhr.status));
|
||||
reject(
|
||||
new ApiError(
|
||||
payload?.message || `请求失败（${xhr.status}）`,
|
||||
xhr.status,
|
||||
),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
uploadPagesDeployment,
|
||||
} from '@/features/pages/api/pages';
|
||||
import {
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import {
|
||||
deploymentsQueryKey,
|
||||
projectQueryKey,
|
||||
projectsQueryKey,
|
||||
} from '../utils';
|
||||
|
||||
interface PagesDeploymentUploadModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: number;
|
||||
}
|
||||
|
||||
export function PagesDeploymentUploadModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
projectId,
|
||||
}: PagesDeploymentUploadModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [entryFile, setEntryFile] = useState('index.html');
|
||||
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
setFile(null);
|
||||
setEntryFile('index.html');
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async ({ shouldActivate }: { shouldActivate: boolean }) => {
|
||||
if (!file) {
|
||||
throw new Error('请选择 zip 文件');
|
||||
}
|
||||
setUploadProgress(0);
|
||||
setErrorMessage(null);
|
||||
|
||||
const deployment = await uploadPagesDeployment(
|
||||
projectId,
|
||||
file,
|
||||
entryFile,
|
||||
(percent) => {
|
||||
setUploadProgress(percent);
|
||||
},
|
||||
);
|
||||
|
||||
if (shouldActivate) {
|
||||
await activatePagesDeployment(projectId, deployment.id);
|
||||
}
|
||||
return deployment;
|
||||
},
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectsQueryKey,
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(error instanceof Error ? error.message : '上传失败');
|
||||
},
|
||||
});
|
||||
|
||||
const handleUploadOnly = () => {
|
||||
uploadMutation.mutate({ shouldActivate: false });
|
||||
};
|
||||
|
||||
const handleUploadAndDeploy = () => {
|
||||
uploadMutation.mutate({ shouldActivate: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="上传部署包"
|
||||
description="上传已构建的 zip 静态资源包，默认入口为 index.html。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={uploadMutation.isPending}
|
||||
>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadOnly}
|
||||
>
|
||||
{uploadMutation.isPending &&
|
||||
!uploadMutation.variables?.shouldActivate
|
||||
? `上传中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传'}
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadAndDeploy}
|
||||
>
|
||||
{uploadMutation.isPending &&
|
||||
uploadMutation.variables?.shouldActivate
|
||||
? `上传并部署中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传并部署'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<ResourceField
|
||||
label="部署包"
|
||||
hint="仅支持 zip，Server 会校验文件数量、体积、路径逃逸和入口文件。"
|
||||
error={errorMessage ?? undefined}
|
||||
>
|
||||
<ResourceInput
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
onChange={(event) => setFile(event.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="入口文件">
|
||||
<ResourceInput
|
||||
value={entryFile}
|
||||
onChange={(event) => setEntryFile(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
{uploadProgress !== null && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
<span>上传进度</span>
|
||||
<span>{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-[var(--surface-muted)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
deletePagesDeployment,
|
||||
deletePagesProject,
|
||||
getPagesProject,
|
||||
getPagesDeployments,
|
||||
} from '@/features/pages/api/pages';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { PagesProjectEditorModal } from './pages-project-editor-modal';
|
||||
import { PagesDeploymentUploadModal } from './pages-deployment-upload-modal';
|
||||
import { formatBytes } from '@/lib/utils/metrics';
|
||||
import {
|
||||
deploymentsQueryKey,
|
||||
projectQueryKey,
|
||||
projectsQueryKey,
|
||||
} from '../utils';
|
||||
|
||||
export function PagesProjectDetailPage({ projectId }: { projectId: string }) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isEditModalOpen, setEditModalOpen] = useState(false);
|
||||
const [isUploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
|
||||
const parsedProjectId = Number(projectId);
|
||||
const projectQuery = useQuery({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
queryFn: () => getPagesProject(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
const deploymentsQuery = useQuery({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
queryFn: () => getPagesDeployments(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
|
||||
const activateMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
activatePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteDeploymentMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
deletePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteProjectMutation = useMutation({
|
||||
mutationFn: () => deletePagesProject(parsedProjectId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
router.push('/pages');
|
||||
},
|
||||
});
|
||||
|
||||
if (projectId === '' || !Number.isFinite(parsedProjectId)) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="缺少有效的 Pages 项目 ID，请从项目列表重新进入。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (projectQuery.isLoading) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (projectQuery.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Pages 项目加载失败"
|
||||
description={projectQuery.error.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const project = projectQuery.data;
|
||||
if (!project) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="该项目可能已被删除，或当前 ID 无法匹配到项目记录。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDeleteProject = () => {
|
||||
if (!window.confirm(`确认删除 Pages 项目 ${project.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
deleteProjectMutation.mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={project.name}
|
||||
description={`${project.slug} · Pages 静态站点项目详情`}
|
||||
action={
|
||||
<>
|
||||
<Link
|
||||
href="/pages"
|
||||
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>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setEditModalOpen(true)}
|
||||
>
|
||||
编辑项目
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
onClick={handleDeleteProject}
|
||||
>
|
||||
删除项目
|
||||
</DangerButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<AppCard
|
||||
title="部署历史"
|
||||
description="部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。"
|
||||
action={
|
||||
(deploymentsQuery.data ?? []).length > 0 ? (
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{deploymentsQuery.isLoading ? (
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
加载中...
|
||||
</p>
|
||||
) : deploymentsQuery.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{deploymentsQuery.error.message}
|
||||
</p>
|
||||
) : (deploymentsQuery.data ?? []).length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无部署"
|
||||
description="上传 zip 部署包后，可以在这里激活某个部署版本。"
|
||||
>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-2xl border border-[var(--border-default)]">
|
||||
{(deploymentsQuery.data ?? []).map((deployment) => (
|
||||
<div
|
||||
key={deployment.id}
|
||||
className="flex flex-col gap-3 border-b border-[var(--border-default)] p-4 last:border-b-0 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--foreground-primary)]">
|
||||
#{deployment.deployment_number}{' '}
|
||||
{deployment.status === 'active' ? '· 已激活' : ''}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[var(--foreground-secondary)]">
|
||||
{deployment.checksum.slice(0, 16)} · {deployment.file_count}{' '}
|
||||
files · {formatBytes(deployment.total_size)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={
|
||||
deployment.status === 'active' ||
|
||||
activateMutation.isPending
|
||||
}
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
`确认激活部署 #${deployment.deployment_number} 吗？`,
|
||||
)
|
||||
) {
|
||||
activateMutation.mutate(deployment.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
激活
|
||||
</SecondaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={
|
||||
deployment.status === 'active' ||
|
||||
deleteDeploymentMutation.isPending
|
||||
}
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
`确认删除部署 #${deployment.deployment_number} 吗？`,
|
||||
)
|
||||
) {
|
||||
deleteDeploymentMutation.mutate(deployment.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<PagesProjectEditorModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => setEditModalOpen(false)}
|
||||
project={project}
|
||||
/>
|
||||
|
||||
<PagesDeploymentUploadModal
|
||||
isOpen={isUploadModalOpen}
|
||||
onClose={() => setUploadModalOpen(false)}
|
||||
projectId={parsedProjectId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { getPagesProjects } from '@/features/pages/api/pages';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
createPagesProject,
|
||||
deletePagesDeployment,
|
||||
deletePagesProject,
|
||||
getPagesProject,
|
||||
getPagesDeployments,
|
||||
getPagesProjects,
|
||||
updatePagesProject,
|
||||
uploadPagesDeployment,
|
||||
} from '@/features/pages/api/pages';
|
||||
import type { PagesProject } from '@/features/pages/types';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
ToggleField,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { PagesProjectEditorModal } from './pages-project-editor-modal';
|
||||
import { PagesProjectListItem } from './pages-project-list-item';
|
||||
import { projectsQueryKey } from '../utils';
|
||||
|
||||
const projectsQueryKey = ['pages-projects'];
|
||||
|
||||
function projectQueryKey(projectId: string | number) {
|
||||
return ['pages-project', String(projectId)];
|
||||
}
|
||||
|
||||
function deploymentsQueryKey(projectId: string | number) {
|
||||
return ['pages-deployments', Number(projectId)];
|
||||
}
|
||||
|
||||
function formatBytes(value: number) {
|
||||
if (value < 1024) {
|
||||
return `${value} B`;
|
||||
}
|
||||
if (value < 1024 * 1024) {
|
||||
return `${(value / 1024).toFixed(1)} KiB`;
|
||||
}
|
||||
return `${(value / 1024 / 1024).toFixed(1)} MiB`;
|
||||
}
|
||||
|
||||
function formatDate(value?: string | null) {
|
||||
if (!value) {
|
||||
return '未激活';
|
||||
}
|
||||
return new Date(value).toLocaleString();
|
||||
}
|
||||
export { PagesProjectDetailPage } from './pages-detail-page';
|
||||
|
||||
export function PagesPage() {
|
||||
const [isCreateModalOpen, setCreateModalOpen] = useState(false);
|
||||
@@ -79,8 +34,8 @@ export function PagesPage() {
|
||||
边缘静态站点托管
|
||||
</h1>
|
||||
<p className="max-w-3xl text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
创建 Pages 项目，上传已构建的 zip 静态资源包，然后在规则中选择 Pages
|
||||
项目作为上游。发布后 Agent
|
||||
创建 Pages 项目，上传已构建 of zip 静态资源包，然后在规则中选择
|
||||
Pages 项目作为上游。发布后 Agent
|
||||
会拉取部署包并在边缘节点本地服务静态文件。
|
||||
</p>
|
||||
</div>
|
||||
@@ -114,8 +69,7 @@ export function PagesPage() {
|
||||
新建 Pages 项目
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
</AppCard>
|
||||
/>
|
||||
) : (
|
||||
(projectsQuery.data ?? []).map((project) => (
|
||||
<PagesProjectListItem key={project.id} project={project} />
|
||||
@@ -123,769 +77,10 @@ export function PagesPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PagesProjectCreateModal
|
||||
<PagesProjectEditorModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setCreateModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PagesProjectDetailPage({ projectId }: { projectId: string }) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isEditModalOpen, setEditModalOpen] = useState(false);
|
||||
const [isUploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
|
||||
const parsedProjectId = Number(projectId);
|
||||
const projectQuery = useQuery({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
queryFn: () => getPagesProject(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
const deploymentsQuery = useQuery({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
queryFn: () => getPagesDeployments(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
|
||||
const activateMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
activatePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
const deleteDeploymentMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
deletePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
const deleteProjectMutation = useMutation({
|
||||
mutationFn: () => deletePagesProject(parsedProjectId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
router.push('/pages');
|
||||
},
|
||||
});
|
||||
|
||||
if (projectId === '' || !Number.isFinite(parsedProjectId)) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="缺少有效的 Pages 项目 ID，请从项目列表重新进入。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (projectQuery.isLoading) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (projectQuery.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Pages 项目加载失败"
|
||||
description={projectQuery.error.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const project = projectQuery.data;
|
||||
if (!project) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="该项目可能已被删除，或当前 ID 无法匹配到项目记录。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDeleteProject = () => {
|
||||
if (!window.confirm(`确认删除 Pages 项目 ${project.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
deleteProjectMutation.mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={project.name}
|
||||
description={`${project.slug} · Pages 静态站点项目详情`}
|
||||
action={
|
||||
<>
|
||||
<Link
|
||||
href="/pages"
|
||||
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>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setEditModalOpen(true)}
|
||||
>
|
||||
编辑项目
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
onClick={handleDeleteProject}
|
||||
>
|
||||
删除项目
|
||||
</DangerButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<AppCard
|
||||
title="部署历史"
|
||||
description="部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。"
|
||||
action={
|
||||
(deploymentsQuery.data ?? []).length > 0 ? (
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{deploymentsQuery.isLoading ? (
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
加载中...
|
||||
</p>
|
||||
) : deploymentsQuery.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{deploymentsQuery.error.message}
|
||||
</p>
|
||||
) : (deploymentsQuery.data ?? []).length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无部署"
|
||||
description="上传 zip 部署包后，可以在这里激活某个部署版本。"
|
||||
>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-2xl border border-[var(--border-default)]">
|
||||
{(deploymentsQuery.data ?? []).map((deployment) => (
|
||||
<div
|
||||
key={deployment.id}
|
||||
className="flex flex-col gap-3 border-b border-[var(--border-default)] p-4 last:border-b-0 md:flex-row md:items-center md:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--foreground-primary)]">
|
||||
#{deployment.deployment_number}{' '}
|
||||
{deployment.status === 'active' ? '· 已激活' : ''}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-[var(--foreground-secondary)]">
|
||||
{deployment.checksum.slice(0, 16)} ·{' '}
|
||||
{deployment.file_count} files ·{' '}
|
||||
{formatBytes(deployment.total_size)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={
|
||||
deployment.status === 'active' ||
|
||||
activateMutation.isPending
|
||||
}
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
`确认激活部署 #${deployment.deployment_number} 吗？`,
|
||||
)
|
||||
) {
|
||||
activateMutation.mutate(deployment.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
激活
|
||||
</SecondaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={
|
||||
deployment.status === 'active' ||
|
||||
deleteDeploymentMutation.isPending
|
||||
}
|
||||
onClick={() => {
|
||||
if (
|
||||
window.confirm(
|
||||
`确认删除部署 #${deployment.deployment_number} 吗？`,
|
||||
)
|
||||
) {
|
||||
deleteDeploymentMutation.mutate(deployment.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
删除
|
||||
</DangerButton>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<PagesProjectEditModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => setEditModalOpen(false)}
|
||||
project={project}
|
||||
/>
|
||||
|
||||
<PagesDeploymentUploadModal
|
||||
isOpen={isUploadModalOpen}
|
||||
onClose={() => setUploadModalOpen(false)}
|
||||
projectId={parsedProjectId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesDeploymentUploadModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
projectId,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: number;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [entryFile, setEntryFile] = useState('index.html');
|
||||
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
setFile(null);
|
||||
setEntryFile('index.html');
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async ({ shouldActivate }: { shouldActivate: boolean }) => {
|
||||
if (!file) {
|
||||
throw new Error('请选择 zip 文件');
|
||||
}
|
||||
setUploadProgress(0);
|
||||
setErrorMessage(null);
|
||||
|
||||
const deployment = await uploadPagesDeployment(
|
||||
projectId,
|
||||
file,
|
||||
entryFile,
|
||||
(percent) => {
|
||||
setUploadProgress(percent);
|
||||
}
|
||||
);
|
||||
|
||||
if (shouldActivate) {
|
||||
await activatePagesDeployment(projectId, deployment.id);
|
||||
}
|
||||
return deployment;
|
||||
},
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectsQueryKey,
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(error instanceof Error ? error.message : '上传失败');
|
||||
},
|
||||
});
|
||||
|
||||
const handleUploadOnly = () => {
|
||||
uploadMutation.mutate({ shouldActivate: false });
|
||||
};
|
||||
|
||||
const handleUploadAndDeploy = () => {
|
||||
uploadMutation.mutate({ shouldActivate: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="上传部署包"
|
||||
description="上传已构建的 zip 静态资源包，默认入口为 index.html。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={uploadMutation.isPending}
|
||||
>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadOnly}
|
||||
>
|
||||
{uploadMutation.isPending && !uploadMutation.variables?.shouldActivate
|
||||
? `上传中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传'}
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadAndDeploy}
|
||||
>
|
||||
{uploadMutation.isPending && uploadMutation.variables?.shouldActivate
|
||||
? `上传并部署中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传并部署'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<ResourceField
|
||||
label="部署包"
|
||||
hint="仅支持 zip，Server 会校验文件数量、体积、路径逃逸和入口文件。"
|
||||
>
|
||||
<ResourceInput
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
onChange={(event) => setFile(event.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="入口文件">
|
||||
<ResourceInput
|
||||
value={entryFile}
|
||||
onChange={(event) => setEntryFile(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
{uploadProgress !== null && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
<span>上传进度</span>
|
||||
<span>{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-[var(--surface-muted)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{errorMessage}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function PagesProjectEditModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
project,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project: PagesProject;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState(project.name);
|
||||
const [slug, setSlug] = useState(project.slug);
|
||||
const [description, setDescription] = useState(project.description || '');
|
||||
const [spaFallbackEnabled, setSpaFallbackEnabled] = useState(project.spa_fallback_enabled);
|
||||
const [spaFallbackPath, setSpaFallbackPath] = useState(project.spa_fallback_path);
|
||||
const [apiProxyEnabled, setApiProxyEnabled] = useState(project.api_proxy_enabled || false);
|
||||
const [apiProxyPath, setApiProxyPath] = useState(project.api_proxy_path || '');
|
||||
const [apiProxyPass, setApiProxyPass] = useState(project.api_proxy_pass || '');
|
||||
const [apiProxyRewrite, setApiProxyRewrite] = useState(project.api_proxy_rewrite || '');
|
||||
|
||||
useEffect(() => {
|
||||
setName(project.name);
|
||||
setSlug(project.slug);
|
||||
setDescription(project.description || '');
|
||||
setSpaFallbackEnabled(project.spa_fallback_enabled);
|
||||
setSpaFallbackPath(project.spa_fallback_path);
|
||||
setApiProxyEnabled(project.api_proxy_enabled || false);
|
||||
setApiProxyPath(project.api_proxy_path || '');
|
||||
setApiProxyPass(project.api_proxy_pass || '');
|
||||
setApiProxyRewrite(project.api_proxy_rewrite || '');
|
||||
}, [project]);
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
updatePagesProject(project.id, {
|
||||
name,
|
||||
slug,
|
||||
description,
|
||||
enabled: project.enabled,
|
||||
spa_fallback_enabled: spaFallbackEnabled,
|
||||
spa_fallback_path: spaFallbackPath,
|
||||
api_proxy_enabled: apiProxyEnabled,
|
||||
api_proxy_path: apiProxyPath,
|
||||
api_proxy_pass: apiProxyPass,
|
||||
api_proxy_rewrite: apiProxyRewrite,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(project.id) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
function handleUpdate(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
updateMutation.mutate();
|
||||
}
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="编辑 Pages 项目"
|
||||
description="修改静态站点项目的基础配置。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={onClose}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-edit-form"
|
||||
disabled={updateMutation.isPending || name.trim() === ''}
|
||||
>
|
||||
{updateMutation.isPending ? '保存中...' : '保存修改'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-edit-form"
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
onSubmit={handleUpdate}
|
||||
>
|
||||
<ResourceField label="项目名称">
|
||||
<ResourceInput
|
||||
value={name}
|
||||
placeholder="Marketing Site"
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="项目标识" hint="留空时会按名称自动生成。">
|
||||
<ResourceInput
|
||||
value={slug}
|
||||
placeholder="marketing-site"
|
||||
onChange={(event) => setSlug(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="描述" className="md:col-span-2">
|
||||
<ResourceInput
|
||||
value={description}
|
||||
placeholder="这个项目托管的静态站点用途"
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 SPA fallback"
|
||||
description="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={setSpaFallbackEnabled}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={spaFallbackPath}
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
onChange={(event) => setSpaFallbackPath(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 API 反向代理"
|
||||
description="允许为该静态站点配置反代后端（例如反代指定 API 路径至您的后端服务）。"
|
||||
checked={apiProxyEnabled}
|
||||
onChange={setApiProxyEnabled}
|
||||
/>
|
||||
{apiProxyEnabled && (
|
||||
<>
|
||||
<ResourceField
|
||||
label="反代匹配路径"
|
||||
hint="以 / 开头，例如 /api 或 /api/v1。匹配该前缀的请求将被转发。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyPath}
|
||||
placeholder="/api"
|
||||
onChange={(event) => setApiProxyPath(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="后端服务地址"
|
||||
hint="包含协议和主机的完整 URL，例如 http://127.0.0.1:8080。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyPass}
|
||||
placeholder="http://127.0.0.1:8080"
|
||||
onChange={(event) => setApiProxyPass(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="路径重写目标"
|
||||
hint="可选。如果配置为 /，请求 /api/users 将被重写转发至后端 /users 路径。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyRewrite}
|
||||
placeholder="/"
|
||||
onChange={(event) => setApiProxyRewrite(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
</>
|
||||
)}
|
||||
{updateMutation.error ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{updateMutation.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesProjectCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState('');
|
||||
const [slug, setSlug] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [spaFallbackEnabled, setSpaFallbackEnabled] = useState(false);
|
||||
const [spaFallbackPath, setSpaFallbackPath] = useState('/index.html');
|
||||
|
||||
const resetForm = () => {
|
||||
setName('');
|
||||
setSlug('');
|
||||
setDescription('');
|
||||
setSpaFallbackEnabled(false);
|
||||
setSpaFallbackPath('/index.html');
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
createPagesProject({
|
||||
name,
|
||||
slug,
|
||||
description,
|
||||
enabled: true,
|
||||
spa_fallback_enabled: spaFallbackEnabled,
|
||||
spa_fallback_path: spaFallbackPath,
|
||||
api_proxy_enabled: false,
|
||||
api_proxy_path: '',
|
||||
api_proxy_pass: '',
|
||||
api_proxy_rewrite: '',
|
||||
}),
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
function handleCreate(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
createMutation.mutate();
|
||||
}
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
title="新建 Pages 项目"
|
||||
description="配置静态站点项目的基础信息。创建后再上传已构建的 zip 部署包。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={closeModal}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-create-form"
|
||||
disabled={createMutation.isPending || name.trim() === ''}
|
||||
>
|
||||
{createMutation.isPending ? '创建中...' : '创建项目'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-create-form"
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
onSubmit={handleCreate}
|
||||
>
|
||||
<ResourceField label="项目名称">
|
||||
<ResourceInput
|
||||
value={name}
|
||||
placeholder="Marketing Site"
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="项目标识" hint="留空时会按名称自动生成。">
|
||||
<ResourceInput
|
||||
value={slug}
|
||||
placeholder="marketing-site"
|
||||
onChange={(event) => setSlug(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="描述" className="md:col-span-2">
|
||||
<ResourceInput
|
||||
value={description}
|
||||
placeholder="这个项目托管的静态站点用途"
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 SPA fallback"
|
||||
description="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={setSpaFallbackEnabled}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={spaFallbackPath}
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
onChange={(event) => setSpaFallbackPath(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
{createMutation.error ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{createMutation.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesProjectListItem({ project }: { project: PagesProject }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/pages/detail?id=${project.id}`}
|
||||
className="group block rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] p-5 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:border-[var(--border-strong)] hover:shadow-[var(--shadow-soft)]"
|
||||
>
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
|
||||
{project.name}
|
||||
</h2>
|
||||
<StatusBadge
|
||||
label={project.enabled ? '已启用' : '已停用'}
|
||||
variant={project.enabled ? 'success' : 'warning'}
|
||||
/>
|
||||
<StatusBadge
|
||||
label={project.spa_fallback_enabled ? 'SPA fallback' : '严格 404'}
|
||||
variant={project.spa_fallback_enabled ? 'info' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
{project.slug}
|
||||
</p>
|
||||
{project.description ? (
|
||||
<p className="line-clamp-2 text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
{project.description}
|
||||
</p>
|
||||
) : null}
|
||||
{project.spa_fallback_enabled ? (
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
回退路径：{project.spa_fallback_path || '/index.html'}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid shrink-0 grid-cols-2 gap-3 text-sm md:min-w-80">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">部署数</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.deployment_count}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
当前激活
|
||||
</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.active_deployment
|
||||
? `#${project.active_deployment.deployment_number}`
|
||||
: '暂无'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between border-t border-[var(--border-default)] pt-4">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
激活时间：{formatDate(project.active_deployment?.activated_at)}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-[var(--brand-primary)] transition group-hover:translate-x-1">
|
||||
查看详情 →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import {
|
||||
createPagesProject,
|
||||
updatePagesProject,
|
||||
} from '@/features/pages/api/pages';
|
||||
import type { PagesProject } from '@/features/pages/types';
|
||||
import {
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
ToggleField,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { projectQueryKey, projectsQueryKey } from '../utils';
|
||||
import { pagesProjectSchema, type PagesProjectFormValues } from '../schemas';
|
||||
|
||||
interface PagesProjectEditorModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project?: PagesProject | null;
|
||||
onSaved?: (project: PagesProject, mode: 'create' | 'update') => void;
|
||||
}
|
||||
|
||||
function toFormValues(project?: PagesProject | null): PagesProjectFormValues {
|
||||
if (!project) {
|
||||
return {
|
||||
name: '',
|
||||
slug: '',
|
||||
description: '',
|
||||
spa_fallback_enabled: false,
|
||||
spa_fallback_path: '/index.html',
|
||||
api_proxy_enabled: false,
|
||||
api_proxy_path: '',
|
||||
api_proxy_pass: '',
|
||||
api_proxy_rewrite: '',
|
||||
};
|
||||
}
|
||||
return {
|
||||
name: project.name,
|
||||
slug: project.slug,
|
||||
description: project.description || '',
|
||||
spa_fallback_enabled: project.spa_fallback_enabled,
|
||||
spa_fallback_path: project.spa_fallback_path,
|
||||
api_proxy_enabled: project.api_proxy_enabled || false,
|
||||
api_proxy_path: project.api_proxy_path || '',
|
||||
api_proxy_pass: project.api_proxy_pass || '',
|
||||
api_proxy_rewrite: project.api_proxy_rewrite || '',
|
||||
};
|
||||
}
|
||||
|
||||
export function PagesProjectEditorModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
project,
|
||||
onSaved,
|
||||
}: PagesProjectEditorModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm<PagesProjectFormValues>({
|
||||
resolver: zodResolver(pagesProjectSchema),
|
||||
defaultValues: toFormValues(project),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
form.reset(toFormValues(project));
|
||||
}
|
||||
}, [form, project, isOpen]);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (values: PagesProjectFormValues) => {
|
||||
const payload = {
|
||||
name: values.name.trim(),
|
||||
slug: values.slug?.trim() || '',
|
||||
description: values.description?.trim() || '',
|
||||
enabled: project ? project.enabled : true,
|
||||
spa_fallback_enabled: values.spa_fallback_enabled,
|
||||
spa_fallback_path: values.spa_fallback_enabled
|
||||
? values.spa_fallback_path.trim()
|
||||
: project
|
||||
? project.spa_fallback_path
|
||||
: '/index.html',
|
||||
api_proxy_enabled: values.api_proxy_enabled,
|
||||
api_proxy_path: values.api_proxy_enabled
|
||||
? values.api_proxy_path.trim()
|
||||
: '',
|
||||
api_proxy_pass: values.api_proxy_enabled
|
||||
? values.api_proxy_pass.trim()
|
||||
: '',
|
||||
api_proxy_rewrite: values.api_proxy_enabled
|
||||
? values.api_proxy_rewrite.trim()
|
||||
: '',
|
||||
};
|
||||
return project
|
||||
? updatePagesProject(project.id, payload)
|
||||
: createPagesProject(payload);
|
||||
},
|
||||
onSuccess: (savedProject) => {
|
||||
onClose();
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(project.id),
|
||||
});
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
onSaved?.(savedProject, project ? 'update' : 'create');
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = form.handleSubmit((values) => {
|
||||
mutation.mutate(values);
|
||||
});
|
||||
|
||||
const spaFallbackEnabled = form.watch('spa_fallback_enabled');
|
||||
const apiProxyEnabled = form.watch('api_proxy_enabled');
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={project ? '编辑 Pages 项目' : '新建 Pages 项目'}
|
||||
description={
|
||||
project
|
||||
? '修改静态站点项目的基础配置与高级反代规则。'
|
||||
: '配置静态站点项目的基础信息与高级反代规则。创建后再上传已构建的 zip 部署包。'
|
||||
}
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={onClose}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-editor-form"
|
||||
disabled={mutation.isPending || !form.formState.isValid}
|
||||
>
|
||||
{mutation.isPending
|
||||
? '保存中...'
|
||||
: project
|
||||
? '保存修改'
|
||||
: '创建项目'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-editor-form"
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<ResourceField
|
||||
label="项目名称"
|
||||
error={form.formState.errors.name?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="Marketing Site"
|
||||
{...form.register('name')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="项目标识"
|
||||
hint="留空时会按名称自动生成。"
|
||||
error={form.formState.errors.slug?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="marketing-site"
|
||||
{...form.register('slug')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="描述"
|
||||
className="md:col-span-2"
|
||||
error={form.formState.errors.description?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="这个项目托管的静态站点用途"
|
||||
{...form.register('description')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 SPA fallback"
|
||||
description="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={(checked) =>
|
||||
form.setValue('spa_fallback_enabled', checked, {
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
error={form.formState.errors.spa_fallback_path?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
{...form.register('spa_fallback_path')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 API 反向代理"
|
||||
description="允许为该静态站点配置反代后端（例如反代指定 API 路径至您的后端服务）。"
|
||||
checked={apiProxyEnabled}
|
||||
onChange={(checked) =>
|
||||
form.setValue('api_proxy_enabled', checked, {
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{apiProxyEnabled && (
|
||||
<>
|
||||
<ResourceField
|
||||
label="反代匹配路径"
|
||||
hint="以 / 开头，例如 /api 或 /api/v1。匹配该前缀的请求将被转发。"
|
||||
error={form.formState.errors.api_proxy_path?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/api"
|
||||
{...form.register('api_proxy_path')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="后端服务地址"
|
||||
hint="包含协议和主机的完整 URL，例如 http://127.0.0.1:8080。"
|
||||
error={form.formState.errors.api_proxy_pass?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="http://127.0.0.1:8080"
|
||||
{...form.register('api_proxy_pass')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="路径重写目标"
|
||||
hint="可选。如果配置为 /，请求 /api/users 将被重写转发至后端 /users 路径。"
|
||||
error={form.formState.errors.api_proxy_rewrite?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/"
|
||||
{...form.register('api_proxy_rewrite')}
|
||||
/>
|
||||
</ResourceField>
|
||||
</>
|
||||
)}
|
||||
{mutation.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{mutation.error instanceof Error
|
||||
? mutation.error.message
|
||||
: '操作失败，请稍后重试。'}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import type { PagesProject } from '@/features/pages/types';
|
||||
import { formatDateTime } from '@/lib/utils/date';
|
||||
|
||||
export function PagesProjectListItem({ project }: { project: PagesProject }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/pages/detail?id=${project.id}`}
|
||||
className="group block rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] p-5 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:border-[var(--border-strong)] hover:shadow-[var(--shadow-soft)]"
|
||||
>
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="min-w-0 space-y-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h2 className="text-lg font-semibold text-[var(--foreground-primary)]">
|
||||
{project.name}
|
||||
</h2>
|
||||
<StatusBadge
|
||||
label={project.enabled ? '已启用' : '已停用'}
|
||||
variant={project.enabled ? 'success' : 'warning'}
|
||||
/>
|
||||
<StatusBadge
|
||||
label={project.spa_fallback_enabled ? 'SPA fallback' : '严格 404'}
|
||||
variant={project.spa_fallback_enabled ? 'info' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
{project.slug}
|
||||
</p>
|
||||
{project.description ? (
|
||||
<p className="line-clamp-2 text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
{project.description}
|
||||
</p>
|
||||
) : null}
|
||||
{project.spa_fallback_enabled ? (
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
回退路径：{project.spa_fallback_path || '/index.html'}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid shrink-0 grid-cols-2 gap-3 text-sm md:min-w-80">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">部署数</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.deployment_count}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
当前激活
|
||||
</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.active_deployment
|
||||
? `#${project.active_deployment.deployment_number}`
|
||||
: '暂无'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between border-t border-[var(--border-default)] pt-4">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
激活时间：
|
||||
{project.active_deployment?.activated_at
|
||||
? formatDateTime(project.active_deployment.activated_at)
|
||||
: '未激活'}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-[var(--brand-primary)] transition group-hover:translate-x-1">
|
||||
查看详情 →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
export const pagesProjectSchema = z
|
||||
.object({
|
||||
name: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, '请输入项目名称')
|
||||
.max(255, '项目名称不能超过 255 个字符'),
|
||||
slug: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(255, '项目标识不能超过 255 个字符')
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
description: z
|
||||
.string()
|
||||
.trim()
|
||||
.max(1000, '描述不能超过 1000 个字符')
|
||||
.optional()
|
||||
.or(z.literal('')),
|
||||
spa_fallback_enabled: z.boolean(),
|
||||
spa_fallback_path: z.string().trim(),
|
||||
api_proxy_enabled: z.boolean(),
|
||||
api_proxy_path: z.string().trim(),
|
||||
api_proxy_pass: z.string().trim(),
|
||||
api_proxy_rewrite: z.string().trim(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (data.spa_fallback_enabled) {
|
||||
if (!data.spa_fallback_path) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['spa_fallback_path'],
|
||||
message: '启用 SPA fallback 时必须输入回退路径',
|
||||
});
|
||||
} else if (!data.spa_fallback_path.startsWith('/')) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['spa_fallback_path'],
|
||||
message: '回退路径必须以 / 开头，例如 /index.html',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (data.api_proxy_enabled) {
|
||||
if (!data.api_proxy_path) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['api_proxy_path'],
|
||||
message: '启用 API 反向代理时必须输入匹配路径',
|
||||
});
|
||||
} else if (!data.api_proxy_path.startsWith('/')) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['api_proxy_path'],
|
||||
message: '匹配路径必须以 / 开头，例如 /api',
|
||||
});
|
||||
}
|
||||
|
||||
if (!data.api_proxy_pass) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['api_proxy_pass'],
|
||||
message: '启用 API 反向代理时必须输入后端服务地址',
|
||||
});
|
||||
} else if (!/^https?:\/\//i.test(data.api_proxy_pass)) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ['api_proxy_pass'],
|
||||
message: '后端服务地址必须以 http:// 或 https:// 开头',
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>;
|
||||
@@ -0,0 +1,9 @@
|
||||
export const projectsQueryKey = ['pages-projects'];
|
||||
|
||||
export function projectQueryKey(projectId: string | number) {
|
||||
return ['pages-project', String(projectId)];
|
||||
}
|
||||
|
||||
export function deploymentsQueryKey(projectId: string | number) {
|
||||
return ['pages-deployments', Number(projectId)];
|
||||
}
|
||||
@@ -206,7 +206,8 @@ export function PerformancePage() {
|
||||
|
||||
const optionMap = optionsToMap(optionsQuery.data);
|
||||
setPerformanceFields({
|
||||
OpenRestyDefaultServerReturnStatus: optionMap.OpenRestyDefaultServerReturnStatus ?? '421',
|
||||
OpenRestyDefaultServerReturnStatus:
|
||||
optionMap.OpenRestyDefaultServerReturnStatus ?? '421',
|
||||
OpenRestyWorkerProcesses: optionMap.OpenRestyWorkerProcesses ?? 'auto',
|
||||
OpenRestyWorkerConnections:
|
||||
optionMap.OpenRestyWorkerConnections ?? '4096',
|
||||
@@ -235,10 +236,7 @@ export function PerformancePage() {
|
||||
optionMap.OpenRestyWebsocketEnabled,
|
||||
true,
|
||||
),
|
||||
OpenRestyHTTP3Enabled: toBoolean(
|
||||
optionMap.OpenRestyHTTP3Enabled,
|
||||
false,
|
||||
),
|
||||
OpenRestyHTTP3Enabled: toBoolean(optionMap.OpenRestyHTTP3Enabled, false),
|
||||
OpenRestyProxyRequestBufferingEnabled: toBoolean(
|
||||
optionMap.OpenRestyProxyRequestBufferingEnabled,
|
||||
false,
|
||||
|
||||
@@ -580,8 +580,11 @@ function ReverseProxySection({
|
||||
origin_host: route.origin_host || '',
|
||||
tunnel_id: route.tunnel_node_id ? String(route.tunnel_node_id) : '',
|
||||
tunnel_target_addr: route.tunnel_target_addr || '',
|
||||
tunnel_target_protocol: (route.tunnel_target_protocol as 'http' | 'https') || 'http',
|
||||
pages_project_id: route.pages_project_id ? String(route.pages_project_id) : '',
|
||||
tunnel_target_protocol:
|
||||
(route.tunnel_target_protocol as 'http' | 'https') || 'http',
|
||||
pages_project_id: route.pages_project_id
|
||||
? String(route.pages_project_id)
|
||||
: '',
|
||||
custom_headers_text: customHeadersToText(route.custom_header_list),
|
||||
remark: route.remark || '',
|
||||
},
|
||||
@@ -594,8 +597,11 @@ function ReverseProxySection({
|
||||
origin_host: route.origin_host || '',
|
||||
tunnel_id: route.tunnel_node_id ? String(route.tunnel_node_id) : '',
|
||||
tunnel_target_addr: route.tunnel_target_addr || '',
|
||||
tunnel_target_protocol: (route.tunnel_target_protocol as 'http' | 'https') || 'http',
|
||||
pages_project_id: route.pages_project_id ? String(route.pages_project_id) : '',
|
||||
tunnel_target_protocol:
|
||||
(route.tunnel_target_protocol as 'http' | 'https') || 'http',
|
||||
pages_project_id: route.pages_project_id
|
||||
? String(route.pages_project_id)
|
||||
: '',
|
||||
custom_headers_text: customHeadersToText(route.custom_header_list),
|
||||
remark: route.remark || '',
|
||||
});
|
||||
@@ -678,32 +684,34 @@ function ReverseProxySection({
|
||||
})}
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium text-[var(--foreground-primary)] block">回源方式</label>
|
||||
<label className="block text-sm font-medium text-[var(--foreground-primary)]">
|
||||
回源方式
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="direct"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
直连上游
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="tunnel"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
内网穿透 (Tunnel)
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="pages"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
Pages 静态站点
|
||||
</label>
|
||||
@@ -726,7 +734,7 @@ function ReverseProxySection({
|
||||
/>
|
||||
</ResourceField>
|
||||
) : form.watch('upstream_type') === 'tunnel' ? (
|
||||
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
|
||||
<div className="space-y-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4">
|
||||
<ResourceField
|
||||
label="选择内网穿透隧道"
|
||||
hint="将请求转发到该隧道连接的客户端节点。"
|
||||
@@ -734,17 +742,18 @@ function ReverseProxySection({
|
||||
>
|
||||
<select
|
||||
{...form.register('tunnel_id')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="">请选择...</option>
|
||||
{(tunnelClients).map((tunnel) => (
|
||||
{tunnelClients.map((tunnel) => (
|
||||
<option key={tunnel.id} value={tunnel.id}>
|
||||
{tunnel.name} ({tunnel.status === 'online' ? '在线' : '离线'})
|
||||
{tunnel.name} (
|
||||
{tunnel.status === 'online' ? '在线' : '离线'})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</ResourceField>
|
||||
|
||||
|
||||
<ResourceField
|
||||
label="内网服务协议"
|
||||
hint="转发到内网服务时使用的协议。"
|
||||
@@ -752,7 +761,7 @@ function ReverseProxySection({
|
||||
>
|
||||
<select
|
||||
{...form.register('tunnel_target_protocol')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="http">HTTP</option>
|
||||
<option value="https">HTTPS</option>
|
||||
@@ -771,7 +780,7 @@ function ReverseProxySection({
|
||||
</ResourceField>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
|
||||
<div className="space-y-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4">
|
||||
<ResourceField
|
||||
label="选择 Pages 项目"
|
||||
hint="仅显示已启用且已有激活部署的 Pages 项目。"
|
||||
@@ -779,7 +788,7 @@ function ReverseProxySection({
|
||||
>
|
||||
<select
|
||||
{...form.register('pages_project_id')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="">请选择...</option>
|
||||
{pagesProjects.map((project) => (
|
||||
@@ -1039,7 +1048,9 @@ function WAFBindingSection({ route }: { route: ProxyRouteItem }) {
|
||||
const checked = event.target.checked;
|
||||
setSelectedIDs((current) =>
|
||||
checked
|
||||
? [...current, group.id].sort((left, right) => left - right)
|
||||
? [...current, group.id].sort(
|
||||
(left, right) => left - right,
|
||||
)
|
||||
: current.filter((id) => id !== group.id),
|
||||
);
|
||||
}}
|
||||
|
||||
+18
-15
@@ -383,32 +383,34 @@ export function ProxyRouteCreateDrawer({
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="text-sm font-medium text-[var(--foreground-primary)] block">回源方式</label>
|
||||
<label className="block text-sm font-medium text-[var(--foreground-primary)]">
|
||||
回源方式
|
||||
</label>
|
||||
<div className="flex gap-4">
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="direct"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
直连上游
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="tunnel"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
内网穿透 (Tunnel)
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
|
||||
<label className="flex cursor-pointer items-center gap-2 text-sm text-[var(--foreground-primary)]">
|
||||
<input
|
||||
type="radio"
|
||||
value="pages"
|
||||
{...form.register('upstream_type')}
|
||||
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
|
||||
className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||
/>
|
||||
Pages 静态站点
|
||||
</label>
|
||||
@@ -430,7 +432,7 @@ export function ProxyRouteCreateDrawer({
|
||||
/>
|
||||
</ResourceField>
|
||||
) : form.watch('upstream_type') === 'tunnel' ? (
|
||||
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
|
||||
<div className="space-y-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4">
|
||||
<ResourceField
|
||||
label="选择内网穿透隧道"
|
||||
hint="将请求转发到该隧道连接的客户端节点。"
|
||||
@@ -438,17 +440,18 @@ export function ProxyRouteCreateDrawer({
|
||||
>
|
||||
<select
|
||||
{...form.register('tunnel_id')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="">请选择...</option>
|
||||
{(tunnelClients).map((tunnel) => (
|
||||
{tunnelClients.map((tunnel) => (
|
||||
<option key={tunnel.id} value={tunnel.id}>
|
||||
{tunnel.name} ({tunnel.status === 'online' ? '在线' : '离线'})
|
||||
{tunnel.name} (
|
||||
{tunnel.status === 'online' ? '在线' : '离线'})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</ResourceField>
|
||||
|
||||
|
||||
<ResourceField
|
||||
label="内网服务协议"
|
||||
hint="转发到内网服务时使用的协议。"
|
||||
@@ -456,7 +459,7 @@ export function ProxyRouteCreateDrawer({
|
||||
>
|
||||
<select
|
||||
{...form.register('tunnel_target_protocol')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="http">HTTP</option>
|
||||
<option value="https">HTTPS</option>
|
||||
@@ -475,7 +478,7 @@ export function ProxyRouteCreateDrawer({
|
||||
</ResourceField>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
|
||||
<div className="space-y-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4">
|
||||
<ResourceField
|
||||
label="选择 Pages 项目"
|
||||
hint="仅显示已启用且已有激活部署的 Pages 项目。"
|
||||
@@ -483,7 +486,7 @@ export function ProxyRouteCreateDrawer({
|
||||
>
|
||||
<select
|
||||
{...form.register('pages_project_id')}
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] outline-none transition focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
className="block w-full rounded-xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-2.5 text-sm text-[var(--foreground-primary)] placeholder-[var(--foreground-muted)] transition outline-none focus:border-[var(--border-strong)] focus:ring-1 focus:ring-[var(--border-strong)]"
|
||||
>
|
||||
<option value="">请选择...</option>
|
||||
{pagesProjects.map((project) => (
|
||||
|
||||
@@ -388,7 +388,8 @@ export function SettingsPage() {
|
||||
NodeOfflineThreshold: optionMap.NodeOfflineThreshold ?? '120000',
|
||||
AgentUpdateRepo: optionMap.AgentUpdateRepo ?? 'Rain-kl/OpenFlare',
|
||||
GeoIPProvider: optionMap.GeoIPProvider ?? 'ipinfo',
|
||||
OpenRestyDefaultServerReturnStatus: optionMap.OpenRestyDefaultServerReturnStatus ?? '421',
|
||||
OpenRestyDefaultServerReturnStatus:
|
||||
optionMap.OpenRestyDefaultServerReturnStatus ?? '421',
|
||||
OpenRestyWorkerProcesses: optionMap.OpenRestyWorkerProcesses ?? 'auto',
|
||||
OpenRestyWorkerConnections:
|
||||
optionMap.OpenRestyWorkerConnections ?? '4096',
|
||||
@@ -683,10 +684,16 @@ export function SettingsPage() {
|
||||
|
||||
const handleUptimeKumaSave = () => {
|
||||
void runBusyAction('uptimekuma-save', async () => {
|
||||
const syncInt = Number.parseInt(operationFields.UptimeKumaSyncInterval, 10);
|
||||
const syncInt = Number.parseInt(
|
||||
operationFields.UptimeKumaSyncInterval,
|
||||
10,
|
||||
);
|
||||
const interval = Number.parseInt(operationFields.UptimeKumaInterval, 10);
|
||||
const retry = Number.parseInt(operationFields.UptimeKumaRetry, 10);
|
||||
const retryInt = Number.parseInt(operationFields.UptimeKumaRetryInterval, 10);
|
||||
const retryInt = Number.parseInt(
|
||||
operationFields.UptimeKumaRetryInterval,
|
||||
10,
|
||||
);
|
||||
const timeout = Number.parseInt(operationFields.UptimeKumaTimeout, 10);
|
||||
|
||||
if (operationFields.UptimeKumaEnabled) {
|
||||
@@ -1399,7 +1406,10 @@ export function SettingsPage() {
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={handleUptimeKumaSync}
|
||||
disabled={busyKey === 'uptimekuma-sync' || !operationFields.UptimeKumaEnabled}
|
||||
disabled={
|
||||
busyKey === 'uptimekuma-sync' ||
|
||||
!operationFields.UptimeKumaEnabled
|
||||
}
|
||||
>
|
||||
{busyKey === 'uptimekuma-sync' ? '同步中...' : '立即同步'}
|
||||
</SecondaryButton>
|
||||
@@ -1429,7 +1439,10 @@ export function SettingsPage() {
|
||||
{operationFields.UptimeKumaEnabled ? (
|
||||
<div className="space-y-5 border-t border-[var(--border-default)] pt-5">
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<ResourceField label="Uptime Kuma 地址" hint="例如 http://192.168.1.100:3001">
|
||||
<ResourceField
|
||||
label="Uptime Kuma 地址"
|
||||
hint="例如 http://192.168.1.100:3001"
|
||||
>
|
||||
<ResourceInput
|
||||
value={operationFields.UptimeKumaUrl}
|
||||
onChange={(event) =>
|
||||
@@ -1475,14 +1488,14 @@ export function SettingsPage() {
|
||||
</ResourceField>
|
||||
<ResourceField label="同步间隔 (分钟)">
|
||||
<ResourceInput
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaSyncInterval}
|
||||
onChange={(event) =>
|
||||
setOperationFields((previous) => ({
|
||||
...previous,
|
||||
UptimeKumaSyncInterval: event.target.value,
|
||||
}))
|
||||
}
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaSyncInterval}
|
||||
onChange={(event) =>
|
||||
setOperationFields((previous) => ({
|
||||
...previous,
|
||||
UptimeKumaSyncInterval: event.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField label="监控范围">
|
||||
@@ -1499,32 +1512,40 @@ export function SettingsPage() {
|
||||
<option value="selected">选择站点</option>
|
||||
</ResourceSelect>
|
||||
</ResourceField>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{operationFields.UptimeKumaMonitorScope === 'selected' ? (
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4 space-y-3">
|
||||
<div className="space-y-3 rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-[var(--foreground-primary)]">已选站点</span>
|
||||
<SecondaryButton type="button" onClick={() => setUptimeKumaModalOpen(true)}>
|
||||
<span className="text-sm font-medium text-[var(--foreground-primary)]">
|
||||
已选站点
|
||||
</span>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setUptimeKumaModalOpen(true)}
|
||||
>
|
||||
选择监控站点
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--foreground-secondary)] break-all max-h-[80px] overflow-y-auto leading-5">
|
||||
<div className="max-h-[80px] overflow-y-auto text-xs leading-5 break-all text-[var(--foreground-secondary)]">
|
||||
{operationFields.UptimeKumaSelectedSites
|
||||
? operationFields.UptimeKumaSelectedSites.split(',').join(', ')
|
||||
? operationFields.UptimeKumaSelectedSites.split(
|
||||
',',
|
||||
).join(', ')
|
||||
: '未选择任何站点，同步不会执行。'}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="border-t border-[var(--border-default)] pt-5 space-y-4">
|
||||
<div className="space-y-4 border-t border-[var(--border-default)] pt-5">
|
||||
<p className="text-sm font-medium text-[var(--foreground-primary)]">
|
||||
Uptime Kuma 属性配置
|
||||
</p>
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<ResourceField label="心跳间隔 (检测频率秒)" hint="服务检测频率，单位：秒">
|
||||
<ResourceField
|
||||
label="心跳间隔 (检测频率秒)"
|
||||
hint="服务检测频率，单位：秒"
|
||||
>
|
||||
<ResourceInput
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaInterval}
|
||||
@@ -1537,7 +1558,10 @@ export function SettingsPage() {
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label="重试次数" hint="服务被标记为故障前的最大重试次数">
|
||||
<ResourceField
|
||||
label="重试次数"
|
||||
hint="服务被标记为故障前的最大重试次数"
|
||||
>
|
||||
<ResourceInput
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaRetry}
|
||||
@@ -1550,7 +1574,10 @@ export function SettingsPage() {
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label="心跳重试间隔 (秒)" hint="重试间隔时间，单位：秒">
|
||||
<ResourceField
|
||||
label="心跳重试间隔 (秒)"
|
||||
hint="重试间隔时间，单位：秒"
|
||||
>
|
||||
<ResourceInput
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaRetryInterval}
|
||||
@@ -1563,7 +1590,10 @@ export function SettingsPage() {
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
<ResourceField label="请求超时 (秒)" hint="超时断开时间，单位：秒">
|
||||
<ResourceField
|
||||
label="请求超时 (秒)"
|
||||
hint="超时断开时间，单位：秒"
|
||||
>
|
||||
<ResourceInput
|
||||
type="number"
|
||||
value={operationFields.UptimeKumaTimeout}
|
||||
@@ -2109,7 +2139,6 @@ export function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] p-5">
|
||||
<p className="text-sm font-semibold text-[var(--foreground-primary)]">
|
||||
敏感接口限流
|
||||
|
||||
@@ -32,7 +32,11 @@ export function UptimeKumaSiteSelectModal({
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [tempSelected, setTempSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
const { data: routes = [], isLoading, error } = useQuery({
|
||||
const {
|
||||
data: routes = [],
|
||||
isLoading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ['proxy-routes'],
|
||||
queryFn: getProxyRoutes,
|
||||
enabled: isOpen,
|
||||
@@ -40,7 +44,9 @@ export function UptimeKumaSiteSelectModal({
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setTempSelected(new Set(selectedSites.map(s => s.trim()).filter(Boolean)));
|
||||
setTempSelected(
|
||||
new Set(selectedSites.map((s) => s.trim()).filter(Boolean)),
|
||||
);
|
||||
setSearchTerm('');
|
||||
}
|
||||
}, [isOpen, selectedSites]);
|
||||
@@ -162,7 +168,10 @@ export function UptimeKumaSiteSelectModal({
|
||||
onClick={() => toggleSite(route.site_name)}
|
||||
className="cursor-pointer hover:bg-[var(--surface-elevated)]"
|
||||
>
|
||||
<td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
|
||||
<td
|
||||
className="px-4 py-3"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
@@ -192,7 +201,10 @@ export function UptimeKumaSiteSelectModal({
|
||||
})}
|
||||
{filteredRoutes.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={4} className="px-4 py-8 text-center text-[var(--foreground-secondary)]">
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-4 py-8 text-center text-[var(--foreground-secondary)]"
|
||||
>
|
||||
无匹配的站点
|
||||
</td>
|
||||
</tr>
|
||||
@@ -201,8 +213,8 @@ export function UptimeKumaSiteSelectModal({
|
||||
</table>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="text-xs text-[var(--foreground-muted)] text-right">
|
||||
|
||||
<div className="text-right text-xs text-[var(--foreground-muted)]">
|
||||
已选择 {tempSelected.size} 个监控站点
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { ArrowLeft, Download, Play, Plus, Save, Trash2, Eye } from 'lucide-react';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Download,
|
||||
Play,
|
||||
Plus,
|
||||
Save,
|
||||
Trash2,
|
||||
Eye,
|
||||
} from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
@@ -626,7 +634,7 @@ export function WAFIPGroupsPage() {
|
||||
<div className="mb-2 text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
命中 IP 列表
|
||||
</div>
|
||||
<pre className="overflow-x-auto whitespace-pre-wrap break-all text-sm text-[var(--foreground-primary)]">
|
||||
<pre className="overflow-x-auto text-sm break-all whitespace-pre-wrap text-[var(--foreground-primary)]">
|
||||
{autoTestResult.matched_ips.join('\n')}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -694,7 +702,10 @@ export function WAFIPGroupsPage() {
|
||||
onClose={() => setIsCapturedIPsModalOpen(false)}
|
||||
footer={
|
||||
<div className="flex justify-end">
|
||||
<SecondaryButton type="button" onClick={() => setIsCapturedIPsModalOpen(false)}>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setIsCapturedIPsModalOpen(false)}
|
||||
>
|
||||
关闭
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
@@ -712,19 +723,29 @@ export function WAFIPGroupsPage() {
|
||||
<table className="min-w-full divide-y divide-[var(--border-default)]">
|
||||
<thead className="bg-[var(--surface-muted)]">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">IP 地址</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">抓取时间</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">封禁剩余时间</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">
|
||||
IP 地址
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">
|
||||
抓取时间
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold text-[var(--foreground-secondary)]">
|
||||
封禁剩余时间
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[var(--border-default)] bg-[var(--surface-elevated)]">
|
||||
{selectedGroup.ext_ips.map((item) => {
|
||||
const autoConfig = selectedGroup.auto_config as { ttl?: number } | undefined;
|
||||
const autoConfig = selectedGroup.auto_config as
|
||||
| { ttl?: number }
|
||||
| undefined;
|
||||
const ttl = autoConfig?.ttl ?? -1;
|
||||
let expireText = '永久';
|
||||
if (ttl > 0) {
|
||||
const capturedDate = new Date(item.captured_at);
|
||||
const expireDate = new Date(capturedDate.getTime() + ttl * 1000);
|
||||
const expireDate = new Date(
|
||||
capturedDate.getTime() + ttl * 1000,
|
||||
);
|
||||
const now = new Date();
|
||||
if (expireDate.getTime() <= now.getTime()) {
|
||||
expireText = '已过期';
|
||||
@@ -741,9 +762,20 @@ export function WAFIPGroupsPage() {
|
||||
}
|
||||
return (
|
||||
<tr key={item.ip}>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] font-mono">{item.ip}</td>
|
||||
<td className="whitespace-nowrap px-4 py-3 text-sm text-[var(--foreground-secondary)]">{new Date(item.captured_at).toLocaleString()}</td>
|
||||
<td className={cn("whitespace-nowrap px-4 py-3 text-sm font-medium", ttl > 0 ? "text-amber-500" : "text-emerald-500")}>{expireText}</td>
|
||||
<td className="px-4 py-3 font-mono text-sm font-medium whitespace-nowrap text-[var(--foreground-primary)]">
|
||||
{item.ip}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm whitespace-nowrap text-[var(--foreground-secondary)]">
|
||||
{new Date(item.captured_at).toLocaleString()}
|
||||
</td>
|
||||
<td
|
||||
className={cn(
|
||||
'px-4 py-3 text-sm font-medium whitespace-nowrap',
|
||||
ttl > 0 ? 'text-amber-500' : 'text-emerald-500',
|
||||
)}
|
||||
>
|
||||
{expireText}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -108,9 +108,11 @@ export function PowTabPanel({
|
||||
<select
|
||||
value={config.algorithm}
|
||||
onChange={(event) =>
|
||||
updateConfig(enabled, { algorithm: event.target.value as 'fast' | 'slow' })
|
||||
updateConfig(enabled, {
|
||||
algorithm: event.target.value as 'fast' | 'slow',
|
||||
})
|
||||
}
|
||||
className="w-full rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm text-[var(--foreground-primary)] outline-none transition focus:border-[var(--border-strong)]"
|
||||
className="w-full rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm text-[var(--foreground-primary)] transition outline-none focus:border-[var(--border-strong)]"
|
||||
>
|
||||
<option value="fast">Fast</option>
|
||||
<option value="slow">Slow</option>
|
||||
@@ -143,7 +145,9 @@ export function PowTabPanel({
|
||||
min={30}
|
||||
value={config.challenge_ttl}
|
||||
onChange={(event) =>
|
||||
updateConfig(enabled, { challenge_ttl: Number(event.target.value) })
|
||||
updateConfig(enabled, {
|
||||
challenge_ttl: Number(event.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</ResourceField>
|
||||
|
||||
@@ -188,7 +188,8 @@ export function RuleEntryModal({
|
||||
选择 IP 组
|
||||
</h3>
|
||||
<p className="mt-1 text-xs leading-5 text-[var(--foreground-secondary)]">
|
||||
发布版本只保存引用 ID，IP 组成员由 Agent 按 checksum 差异同步。
|
||||
发布版本只保存引用 ID，IP 组成员由 Agent 按 checksum
|
||||
差异同步。
|
||||
</p>
|
||||
</div>
|
||||
<span className="rounded-full border border-[var(--border-default)] px-2.5 py-1 text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
|
||||
@@ -2,7 +2,10 @@ import { useEffect, useMemo, useState } from 'react';
|
||||
import { Check, Search } from 'lucide-react';
|
||||
import { Drawer } from '@/components/ui/drawer';
|
||||
import type { ProxyRouteItem } from '@/features/proxy-routes/types';
|
||||
import { PrimaryButton, SecondaryButton } from '@/features/shared/components/resource-primitives';
|
||||
import {
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import type { WAFRuleGroup } from '@/features/waf/types';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
|
||||
Generated
+4765
-1627
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user