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

[新增] OpenFlare Pages

Browse Source
This commit is contained in:
ryan
2026-06-03 17:09:02 +08:00
parent 3ec607106d
commit 2c74d042ed
38 changed files with 2630 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
openflare_server/web/app/(dashboard)/pages/page.tsx
+5
View File
@@ -0,0 +1,5 @@
import { PagesPage } from '@/features/pages/components/pages-page';
export default function Page() {
return <PagesPage />;
}
openflare_server/web/components/layout/dashboard-sidebar.tsx
+9
View File
@@ -80,6 +80,15 @@ function SidebarIcon({ icon }: { icon: NavigationIconKey }) {
<path d="m14 15 3 2-3 2" />
</svg>
);
case 'pages':
return (
<svg {...commonProps}>
<path d="M5 5.5h14v13H5z" />
<path d="M8 9h8" />
<path d="M8 12h5" />
<path d="M8 15h7" />
</svg>
);
case 'waf':
return <ShieldCheck className="h-[18px] w-[18px]" strokeWidth={1.8} />;
case 'release':
openflare_server/web/features/pages/api/pages.ts
+66
View File
@@ -0,0 +1,66 @@
import { apiRequest } from '@/lib/api/client';
import type {
PagesDeployment,
PagesProject,
PagesProjectPayload,
} from '@/features/pages/types';
export function getPagesProjects() {
return apiRequest<PagesProject[]>('/pages/');
}
export function createPagesProject(payload: PagesProjectPayload) {
return apiRequest<PagesProject>('/pages/', {
method: 'POST',
body: JSON.stringify(payload),
});
}
export function updatePagesProject(id: number, payload: PagesProjectPayload) {
return apiRequest<PagesProject>(`/pages/${id}/update`, {
method: 'POST',
body: JSON.stringify(payload),
});
}
export function deletePagesProject(id: number) {
return apiRequest<void>(`/pages/${id}/delete`, {
method: 'POST',
});
}
export function getPagesDeployments(projectId: number) {
return apiRequest<PagesDeployment[]>(`/pages/${projectId}/deployments`);
}
export function uploadPagesDeployment(
projectId: number,
file: File,
entryFile = 'index.html',
) {
const formData = new FormData();
formData.append('package', file);
formData.append('entry_file', entryFile);
return apiRequest<PagesDeployment>(`/pages/${projectId}/deployments/upload`, {
method: 'POST',
body: formData,
});
}
export function activatePagesDeployment(
projectId: number,
deploymentId: number,
) {
return apiRequest<PagesProject>(
`/pages/${projectId}/deployments/${deploymentId}/activate`,
{ method: 'POST' },
);
}
export function deletePagesDeployment(projectId: number, deploymentId: number) {
return apiRequest<void>(
`/pages/${projectId}/deployments/${deploymentId}/delete`,
{ method: 'POST' },
);
}
openflare_server/web/features/pages/components/pages-page.tsx
+364
View File
@@ -0,0 +1,364 @@
'use client';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useState, type FormEvent } from 'react';
import { AppCard } from '@/components/ui/app-card';
import {
activatePagesDeployment,
createPagesProject,
deletePagesDeployment,
deletePagesProject,
getPagesDeployments,
getPagesProjects,
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';
const projectsQueryKey = ['pages-projects'];
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 function PagesPage() {
const queryClient = useQueryClient();
const [name, setName] = useState('');
const [slug, setSlug] = useState('');
const [description, setDescription] = useState('');
const [spaFallbackEnabled, setSpaFallbackEnabled] = useState(false);
const projectsQuery = useQuery({
queryKey: projectsQueryKey,
queryFn: getPagesProjects,
});
const createMutation = useMutation({
mutationFn: () =>
createPagesProject({
name,
slug,
description,
enabled: true,
spa_fallback_enabled: spaFallbackEnabled,
}),
onSuccess: () => {
setName('');
setSlug('');
setDescription('');
setSpaFallbackEnabled(false);
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
},
});
function handleCreate(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
createMutation.mutate();
}
return (
<div className="space-y-6">
<div className="space-y-2">
<p className="text-sm font-medium text-[var(--foreground-secondary)]">
OpenFlare Pages
</p>
<h1 className="text-2xl font-semibold text-[var(--foreground-primary)]">
边缘静态站点托管
</h1>
<p className="max-w-3xl text-sm leading-6 text-[var(--foreground-secondary)]">
创建 Pages 项目，上传已构建的 zip 静态资源包，然后在规则中选择 Pages
项目作为上游。发布后 Agent 会拉取部署包并在边缘节点本地服务静态文件。
</p>
</div>
<AppCard
title="新建 Pages 项目"
description="V1 仅支持 Direct Upload，不执行 Git 构建或边缘函数运行时。"
>
<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="开启后未命中的路径会回退到 /index.html，适合 React/Vue history 路由。"
checked={spaFallbackEnabled}
onChange={setSpaFallbackEnabled}
/>
<div className="flex items-end justify-end">
<PrimaryButton
type="submit"
disabled={createMutation.isPending || name.trim() === ''}
>
{createMutation.isPending ? '创建中...' : '创建项目'}
</PrimaryButton>
</div>
{createMutation.error ? (
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
{createMutation.error.message}
</p>
) : null}
</form>
</AppCard>
<div className="space-y-4">
{projectsQuery.isLoading ? (
<AppCard>正在加载 Pages 项目...</AppCard>
) : projectsQuery.error ? (
<AppCard>
<p className="text-sm text-[var(--status-danger-foreground)]">
{projectsQuery.error.message}
</p>
</AppCard>
) : (projectsQuery.data ?? []).length === 0 ? (
<AppCard>
<p className="text-sm text-[var(--foreground-secondary)]">
还没有 Pages 项目。先创建一个项目，再上传静态资源包。
</p>
</AppCard>
) : (
(projectsQuery.data ?? []).map((project) => (
<PagesProjectCard key={project.id} project={project} />
))
)}
</div>
</div>
);
}
function PagesProjectCard({ project }: { project: PagesProject }) {
const queryClient = useQueryClient();
const [file, setFile] = useState<File | null>(null);
const [entryFile, setEntryFile] = useState('index.html');
const deploymentsQuery = useQuery({
queryKey: ['pages-deployments', project.id],
queryFn: () => getPagesDeployments(project.id),
});
const uploadMutation = useMutation({
mutationFn: () => {
if (!file) {
throw new Error('请选择 zip 文件');
}
return uploadPagesDeployment(project.id, file, entryFile);
},
onSuccess: () => {
setFile(null);
queryClient.invalidateQueries({
queryKey: ['pages-deployments', project.id],
});
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
},
});
const activateMutation = useMutation({
mutationFn: (deploymentId: number) =>
activatePagesDeployment(project.id, deploymentId),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['pages-deployments', project.id],
});
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
},
});
const deleteDeploymentMutation = useMutation({
mutationFn: (deploymentId: number) =>
deletePagesDeployment(project.id, deploymentId),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ['pages-deployments', project.id],
});
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
},
});
const deleteProjectMutation = useMutation({
mutationFn: () => deletePagesProject(project.id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
},
});
return (
<AppCard
title={project.name}
description={`${project.slug} · ${
project.spa_fallback_enabled ? 'SPA fallback 已启用' : '严格 404'
}`}
action={
<DangerButton
type="button"
disabled={deleteProjectMutation.isPending}
onClick={() => {
if (window.confirm(`确认删除 Pages 项目 ${project.name} 吗？`)) {
deleteProjectMutation.mutate();
}
}}
>
删除项目
</DangerButton>
}
>
<div className="grid gap-6 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
<div className="space-y-4">
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] p-4">
<p className="text-xs text-[var(--foreground-secondary)]">
当前激活部署
</p>
<p className="mt-2 text-sm font-medium text-[var(--foreground-primary)]">
{project.active_deployment
? `#${project.active_deployment.deployment_number} · ${project.active_deployment.checksum.slice(0, 12)}`
: '暂无激活部署'}
</p>
<p className="mt-1 text-xs text-[var(--foreground-secondary)]">
激活时间：{formatDate(project.active_deployment?.activated_at)}
</p>
</div>
<div className="space-y-3">
<ResourceField
label="上传部署包"
hint="仅支持 zip，默认入口 index.html。"
>
<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>
<PrimaryButton
type="button"
disabled={!file || uploadMutation.isPending}
onClick={() => uploadMutation.mutate()}
>
{uploadMutation.isPending ? '上传中...' : '上传部署'}
</PrimaryButton>
{uploadMutation.error ? (
<p className="text-sm text-[var(--status-danger-foreground)]">
{uploadMutation.error.message}
</p>
) : null}
</div>
</div>
<div className="space-y-3">
<h3 className="text-sm font-medium text-[var(--foreground-primary)]">
部署历史
</h3>
{deploymentsQuery.isLoading ? (
<p className="text-sm text-[var(--foreground-secondary)]">
加载中...
</p>
) : (deploymentsQuery.data ?? []).length === 0 ? (
<p className="text-sm text-[var(--foreground-secondary)]">
暂无部署。上传 zip 后再激活部署。
</p>
) : (
<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>
)}
</div>
</div>
</AppCard>
);
}
openflare_server/web/features/pages/types.ts
+35
View File
@@ -0,0 +1,35 @@
export interface PagesDeployment {
id: number;
project_id: number;
deployment_number: number;
checksum: string;
status: 'uploaded' | 'active';
file_count: number;
total_size: number;
entry_file: string;
created_by: string;
created_at: string;
activated_at?: string | null;
}
export interface PagesProject {
id: number;
name: string;
slug: string;
description: string;
enabled: boolean;
spa_fallback_enabled: boolean;
active_deployment_id?: number | null;
active_deployment?: PagesDeployment | null;
deployment_count: number;
created_at: string;
updated_at: string;
}
export interface PagesProjectPayload {
name: string;
slug: string;
description: string;
enabled: boolean;
spa_fallback_enabled: boolean;
}
openflare_server/web/features/proxy-routes/components/proxy-route-config-page.tsx
+76 -10
View File
@@ -15,6 +15,7 @@ import { LoadingState } from '@/components/feedback/loading-state';
import { PageHeader } from '@/components/layout/page-header';
import { AppCard } from '@/components/ui/app-card';
import { getManagedDomains } from '@/features/managed-domains/api/managed-domains';
import { getPagesProjects } from '@/features/pages/api/pages';
import {
getProxyRoute,
updateProxyRoute,
@@ -157,12 +158,13 @@ const rateLimitSchema = z
const reverseProxySchema = z
.object({
upstream_type: z.enum(['direct', 'tunnel']),
upstream_type: z.enum(['direct', 'tunnel', 'pages']),
origin_urls_text: z.string().trim(),
origin_host: z.string(),
tunnel_id: z.string().optional(),
tunnel_target_addr: z.string().trim().optional(),
tunnel_target_protocol: z.enum(['http', 'https']).optional(),
pages_project_id: z.string().optional(),
custom_headers_text: z.string(),
remark: z.string().max(255, '备注不能超过 255 个字符'),
})
@@ -184,7 +186,7 @@ const reverseProxySchema = z
});
}
}
} else {
} else if (value.upstream_type === 'tunnel') {
if (!value.tunnel_id) {
context.addIssue({
code: z.ZodIssueCode.custom,
@@ -199,6 +201,12 @@ const reverseProxySchema = z
message: '请填写内网服务地址 (如 127.0.0.1:8080)',
});
}
} else if (!value.pages_project_id) {
context.addIssue({
code: z.ZodIssueCode.custom,
path: ['pages_project_id'],
message: '请选择 Pages 项目',
});
}
const originHostError = validateOriginHost(value.origin_host);
@@ -552,8 +560,17 @@ function ReverseProxySection({
queryKey: ['nodes'],
queryFn: getNodes,
});
const tunnelClients = (tunnelsQuery.data ?? []).filter((node) => node.node_type === 'tunnel_client');
const pagesProjectsQuery = useQuery({
queryKey: ['pages-projects'],
queryFn: getPagesProjects,
});
const tunnelClients = (tunnelsQuery.data ?? []).filter(
(node) => node.node_type === 'tunnel_client',
);
const pagesProjects = (pagesProjectsQuery.data ?? []).filter(
(project) => project.enabled && project.active_deployment_id,
);
const form = useForm<ReverseProxyValues>({
resolver: zodResolver(reverseProxySchema),
@@ -564,6 +581,7 @@ function ReverseProxySection({
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) : '',
custom_headers_text: customHeadersToText(route.custom_header_list),
remark: route.remark || '',
},
@@ -577,6 +595,7 @@ function ReverseProxySection({
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) : '',
custom_headers_text: customHeadersToText(route.custom_header_list),
remark: route.remark || '',
});
@@ -609,12 +628,17 @@ function ReverseProxySection({
originPort = primaryOrigin.port;
originUri = primaryOrigin.uri;
upstreams = urls.slice(1);
} else {
} else if (values.upstream_type === 'tunnel') {
originUrl = `${values.tunnel_target_protocol}://${values.tunnel_target_addr}`;
originScheme = values.tunnel_target_protocol as 'http' | 'https';
originAddress = values.tunnel_target_addr || '';
} else {
originUrl = 'http://127.0.0.1';
originScheme = 'http';
originAddress = '127.0.0.1';
originPort = '80';
}
const { headers } = parseCustomHeadersText(
values.custom_headers_text,
);
@@ -632,9 +656,22 @@ function ReverseProxySection({
custom_headers: headers,
remark: values.remark.trim(),
upstream_type: values.upstream_type,
tunnel_node_id: values.upstream_type === 'tunnel' && values.tunnel_id ? Number(values.tunnel_id) : null,
tunnel_target_addr: values.upstream_type === 'tunnel' ? values.tunnel_target_addr : '',
tunnel_target_protocol: values.upstream_type === 'tunnel' ? values.tunnel_target_protocol : '',
tunnel_node_id:
values.upstream_type === 'tunnel' && values.tunnel_id
? Number(values.tunnel_id)
: null,
tunnel_target_addr:
values.upstream_type === 'tunnel'
? values.tunnel_target_addr
: '',
tunnel_target_protocol:
values.upstream_type === 'tunnel'
? values.tunnel_target_protocol
: '',
pages_project_id:
values.upstream_type === 'pages' && values.pages_project_id
? Number(values.pages_project_id)
: null,
}),
{ message: '反向代理设置已保存。' },
);
@@ -661,6 +698,15 @@ function ReverseProxySection({
/>
内网穿透 (Tunnel)
</label>
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
<input
type="radio"
value="pages"
{...form.register('upstream_type')}
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
/>
Pages 静态站点
</label>
</div>
</div>
@@ -679,7 +725,7 @@ function ReverseProxySection({
{...form.register('origin_urls_text')}
/>
</ResourceField>
) : (
) : form.watch('upstream_type') === 'tunnel' ? (
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
<ResourceField
label="选择内网穿透隧道"
@@ -724,6 +770,26 @@ function ReverseProxySection({
/>
</ResourceField>
</div>
) : (
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
<ResourceField
label="选择 Pages 项目"
hint="仅显示已启用且已有激活部署的 Pages 项目。"
error={form.formState.errors.pages_project_id?.message}
>
<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)]"
>
<option value="">请选择...</option>
{pagesProjects.map((project) => (
<option key={project.id} value={project.id}>
{project.name} ({project.slug})
</option>
))}
</select>
</ResourceField>
</div>
)}
<ResourceField
openflare_server/web/features/proxy-routes/components/proxy-route-create-drawer.tsx
+87 -14
View File
@@ -8,6 +8,7 @@ import { z } from 'zod';
import { Drawer } from '@/components/ui/drawer';
import { getManagedDomains } from '@/features/managed-domains/api/managed-domains';
import { getPagesProjects } from '@/features/pages/api/pages';
import { createProxyRoute } from '@/features/proxy-routes/api/proxy-routes';
import {
DomainListInput,
@@ -40,11 +41,12 @@ const createWebsiteSchema = z
.object({
site_name: z.string().trim().max(255, '站点标识不能超过 255 个字符'),
domain_rows: z.array(domainRowSchema).min(1),
upstream_type: z.enum(['direct', 'tunnel']),
upstream_type: z.enum(['direct', 'tunnel', 'pages']),
origin_urls_text: z.string().trim(),
tunnel_id: z.string().optional(),
tunnel_target_addr: z.string().trim().optional(),
tunnel_target_protocol: z.enum(['http', 'https']).optional(),
pages_project_id: z.string().optional(),
enabled: z.boolean(),
redirect_http: z.boolean(),
remark: z.string().max(255, '备注不能超过 255 个字符'),
@@ -79,7 +81,7 @@ const createWebsiteSchema = z
});
}
}
} else {
} else if (value.upstream_type === 'tunnel') {
if (!value.tunnel_id) {
context.addIssue({
code: z.ZodIssueCode.custom,
@@ -94,6 +96,12 @@ const createWebsiteSchema = z
message: '请填写内网服务地址 (如 127.0.0.1:8080)',
});
}
} else if (!value.pages_project_id) {
context.addIssue({
code: z.ZodIssueCode.custom,
path: ['pages_project_id'],
message: '请选择 Pages 项目',
});
}
const selectedCertificateCount = new Set(
@@ -120,6 +128,7 @@ const defaultValues: CreateWebsiteFormValues = {
tunnel_id: '',
tunnel_target_addr: '',
tunnel_target_protocol: 'http',
pages_project_id: '',
enabled: true,
redirect_http: false,
remark: '',
@@ -177,7 +186,17 @@ export function ProxyRouteCreateDrawer({
queryFn: getNodes,
enabled: open,
});
const tunnelClients = (tunnelsQuery.data ?? []).filter((node) => node.node_type === 'tunnel_client');
const pagesProjectsQuery = useQuery({
queryKey: ['pages-projects'],
queryFn: getPagesProjects,
enabled: open,
});
const tunnelClients = (tunnelsQuery.data ?? []).filter(
(node) => node.node_type === 'tunnel_client',
);
const pagesProjects = (pagesProjectsQuery.data ?? []).filter(
(project) => project.enabled && project.active_deployment_id,
);
const combinedDomainSuggestions = useMemo(
() => [
@@ -199,11 +218,11 @@ export function ProxyRouteCreateDrawer({
const selectedCertIDs = normalizeSelectedCertificateIDs(
values.domain_rows,
);
let originUrl = '';
const originHost = '';
let upstreams: string[] = [];
if (values.upstream_type === 'direct') {
const { urls } = parseOriginUrls(values.origin_urls_text);
const primaryOrigin = parseOriginUrl(urls[0]);
@@ -214,8 +233,10 @@ export function ProxyRouteCreateDrawer({
primaryOrigin.uri,
);
upstreams = urls.slice(1);
} else {
} else if (values.upstream_type === 'tunnel') {
originUrl = `${values.tunnel_target_protocol}://${values.tunnel_target_addr}`;
} else {
originUrl = 'http://127.0.0.1';
}
return createProxyRoute({
@@ -224,10 +245,22 @@ export function ProxyRouteCreateDrawer({
domains,
origin_id: null,
origin_url: originUrl,
origin_scheme: values.upstream_type === 'direct' ? parseOriginUrl(originUrl).scheme : 'http',
origin_address: values.upstream_type === 'direct' ? parseOriginUrl(originUrl).address : values.tunnel_target_addr || '',
origin_port: values.upstream_type === 'direct' ? parseOriginUrl(originUrl).port : '80',
origin_uri: values.upstream_type === 'direct' ? parseOriginUrl(originUrl).uri : '',
origin_scheme:
values.upstream_type === 'direct'
? parseOriginUrl(originUrl).scheme
: 'http',
origin_address:
values.upstream_type === 'direct'
? parseOriginUrl(originUrl).address
: values.tunnel_target_addr || '127.0.0.1',
origin_port:
values.upstream_type === 'direct'
? parseOriginUrl(originUrl).port
: '80',
origin_uri:
values.upstream_type === 'direct'
? parseOriginUrl(originUrl).uri
: '',
origin_host: originHost,
upstreams,
enabled: values.enabled,
@@ -249,9 +282,20 @@ export function ProxyRouteCreateDrawer({
basic_auth_enabled: false,
remark: values.remark.trim(),
upstream_type: values.upstream_type,
tunnel_node_id: values.upstream_type === 'tunnel' && values.tunnel_id ? Number(values.tunnel_id) : null,
tunnel_target_addr: values.upstream_type === 'tunnel' ? values.tunnel_target_addr : '',
tunnel_target_protocol: values.upstream_type === 'tunnel' ? values.tunnel_target_protocol : '',
tunnel_node_id:
values.upstream_type === 'tunnel' && values.tunnel_id
? Number(values.tunnel_id)
: null,
tunnel_target_addr:
values.upstream_type === 'tunnel' ? values.tunnel_target_addr : '',
tunnel_target_protocol:
values.upstream_type === 'tunnel'
? values.tunnel_target_protocol
: '',
pages_project_id:
values.upstream_type === 'pages' && values.pages_project_id
? Number(values.pages_project_id)
: null,
});
},
onSuccess: (route) => {
@@ -359,6 +403,15 @@ export function ProxyRouteCreateDrawer({
/>
内网穿透 (Tunnel)
</label>
<label className="flex items-center gap-2 text-sm text-[var(--foreground-primary)] cursor-pointer">
<input
type="radio"
value="pages"
{...form.register('upstream_type')}
className="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500"
/>
Pages 静态站点
</label>
</div>
</div>
@@ -376,7 +429,7 @@ export function ProxyRouteCreateDrawer({
{...form.register('origin_urls_text')}
/>
</ResourceField>
) : (
) : form.watch('upstream_type') === 'tunnel' ? (
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
<ResourceField
label="选择内网穿透隧道"
@@ -421,6 +474,26 @@ export function ProxyRouteCreateDrawer({
/>
</ResourceField>
</div>
) : (
<div className="p-4 rounded-xl border border-[var(--border-default)] bg-[var(--surface-muted)] space-y-4">
<ResourceField
label="选择 Pages 项目"
hint="仅显示已启用且已有激活部署的 Pages 项目。"
error={form.formState.errors.pages_project_id?.message}
>
<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)]"
>
<option value="">请选择...</option>
{pagesProjects.map((project) => (
<option key={project.id} value={project.id}>
{project.name} ({project.slug})
</option>
))}
</select>
</ResourceField>
</div>
)}
<ToggleField
openflare_server/web/features/proxy-routes/helpers.ts
+10 -1
View File
@@ -267,7 +267,10 @@ export function buildPayloadFromRoute(
route: ProxyRouteItem,
overrides: Partial<ProxyRouteMutationPayload>,
): ProxyRouteMutationPayload {
const primaryOrigin = parseOriginUrl(route.origin_url);
const primaryOrigin =
route.upstream_type === 'pages'
? parseOriginUrl('http://127.0.0.1')
: parseOriginUrl(route.origin_url);
return {
site_name: route.site_name,
@@ -304,11 +307,17 @@ export function buildPayloadFromRoute(
tunnel_node_id: route.tunnel_node_id ?? route.tunnel_id ?? null,
tunnel_target_addr: route.tunnel_target_addr || '',
tunnel_target_protocol: route.tunnel_target_protocol || '',
pages_project_id: route.pages_project_id ?? null,
...overrides,
};
}
export function getUpstreamSummary(route: ProxyRouteItem) {
if (route.upstream_type === 'pages') {
return route.pages_project_id
? `Pages 项目 #${route.pages_project_id}`
: 'Pages 项目未绑定';
}
if (route.upstream_type === 'tunnel') {
const protocol = route.tunnel_target_protocol || 'http';
const target = route.tunnel_target_addr || '未配置目标';
openflare_server/web/features/proxy-routes/types.ts
+4 -2
View File
@@ -53,11 +53,12 @@ export interface ProxyRouteItem {
basic_auth_username: string;
basic_auth_password: string;
remark: string;
upstream_type: 'direct' | 'tunnel';
upstream_type: 'direct' | 'tunnel' | 'pages';
tunnel_node_id?: number | null;
tunnel_id?: number | null;
tunnel_target_addr?: string;
tunnel_target_protocol?: string;
pages_project_id?: number | null;
created_at: string;
updated_at: string;
}
@@ -93,11 +94,12 @@ export interface ProxyRouteMutationPayload {
basic_auth_username?: string;
basic_auth_password?: string;
remark: string;
upstream_type?: 'direct' | 'tunnel';
upstream_type?: 'direct' | 'tunnel' | 'pages';
tunnel_node_id?: number | null;
tunnel_id?: number | null;
tunnel_target_addr?: string;
tunnel_target_protocol?: string;
pages_project_id?: number | null;
}
export interface TlsCertificateItem {
openflare_server/web/lib/constants/navigation.ts
+5
View File
@@ -16,6 +16,11 @@ export const dashboardNavigation: NavigationItem[] = [
label: '规则',
icon: 'proxy',
},
{
href: '/pages',
label: 'Pages',
icon: 'pages',
},
{
href: '/website',
label: '网站',
openflare_server/web/tests/unit/nodes-utils.test.ts
+1
View File
@@ -18,6 +18,7 @@ function buildNode(overrides: Partial<NodeItem> = {}): NodeItem {
relay_client_proxy_url: '',
relay_auth_token: '',
relay_status: 'healthy',
relay_web_server_enabled: false,
relay_frps_connections: 0,
relay_frps_proxy_count: 0,
geo_name: '',
openflare_server/web/types/navigation.ts
+1
View File
@@ -5,6 +5,7 @@ export type NavigationIconKey =
| 'origin'
| 'domain'
| 'certificate'
| 'pages'
| 'proxy'
| 'waf'
| 'release'