[优化] 代码优化Format

This commit is contained in:
ryan
2026-06-04 09:31:27 +08:00
parent fbb0909638
commit e117e314d9
28 changed files with 6394 additions and 3014 deletions
@@ -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),
);
}}
@@ -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) => (