mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-06 15:46:37 +08:00
ryan
63cd906cfc
- Merge all files inside openflare-server to the repository root directory. - Relocate agent, relay, and flared subprojects from internal/ to internal/apps/. - Combine docker-compose files and update build context paths to root. - Update GitHub workflows and Dockerfiles to refer to new directories and package names. - Rewrite Go package imports across all files. - Resolve database renew test race condition and clean up docs.
279 lines
9.8 KiB
TypeScript
279 lines
9.8 KiB
TypeScript
"use client"
|
|
|
|
import {useEffect} from "react"
|
|
import {useMutation, useQueryClient} from "@tanstack/react-query"
|
|
import {zodResolver} from "@hookform/resolvers/zod"
|
|
import {useForm} from "react-hook-form"
|
|
import {Loader2} from "lucide-react"
|
|
import {z} from "zod"
|
|
import {toast} from "sonner"
|
|
|
|
import {Button} from "@/components/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import {Input} from "@/components/ui/input"
|
|
import {Label} from "@/components/ui/label"
|
|
import {Switch} from "@/components/ui/switch"
|
|
import {Textarea} from "@/components/ui/textarea"
|
|
import {type PagesProject, PagesService} from "@/lib/services/openflare"
|
|
|
|
import {projectQueryKey, projectsQueryKey} from "./pages-utils"
|
|
|
|
const pagesProjectSchema = z
|
|
.object({
|
|
name: z.string().trim().min(1, "请输入项目名称").max(255),
|
|
slug: z.string().trim().max(255).optional().or(z.literal("")),
|
|
description: z.string().trim().max(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(),
|
|
root_dir: z.string().trim().max(512).optional().or(z.literal("")),
|
|
entry_file: z.string().trim().min(1, "请输入入口文件").max(512),
|
|
})
|
|
.superRefine((data, ctx) => {
|
|
if (data.spa_fallback_enabled && !data.spa_fallback_path.startsWith("/")) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
path: ["spa_fallback_path"],
|
|
message: "回退路径必须以 / 开头",
|
|
})
|
|
}
|
|
if (data.api_proxy_enabled) {
|
|
if (!data.api_proxy_path.startsWith("/")) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
path: ["api_proxy_path"],
|
|
message: "匹配路径必须以 / 开头",
|
|
})
|
|
}
|
|
if (!/^https?:\/\//i.test(data.api_proxy_pass)) {
|
|
ctx.addIssue({
|
|
code: z.ZodIssueCode.custom,
|
|
path: ["api_proxy_pass"],
|
|
message: "后端地址必须以 http:// 或 https:// 开头",
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
type PagesProjectFormValues = z.infer<typeof pagesProjectSchema>
|
|
|
|
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: "",
|
|
root_dir: "",
|
|
entry_file: "index.html",
|
|
}
|
|
}
|
|
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 || "",
|
|
root_dir: project.root_dir || "",
|
|
entry_file: project.entry_file || "index.html",
|
|
}
|
|
}
|
|
|
|
interface ProjectEditorDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
project?: PagesProject | null
|
|
}
|
|
|
|
export function ProjectEditorDialog({
|
|
open,
|
|
onOpenChange,
|
|
project,
|
|
}: ProjectEditorDialogProps) {
|
|
const queryClient = useQueryClient()
|
|
const form = useForm<PagesProjectFormValues>({
|
|
resolver: zodResolver(pagesProjectSchema),
|
|
defaultValues: toFormValues(project),
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (open) form.reset(toFormValues(project))
|
|
}, [form, project, open])
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: async (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?.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()
|
|
: "",
|
|
root_dir: values.root_dir?.trim() || "",
|
|
entry_file: values.entry_file.trim(),
|
|
}
|
|
return project
|
|
? PagesService.updateProject(project.id, payload)
|
|
: PagesService.createProject(payload)
|
|
},
|
|
onSuccess: async () => {
|
|
toast.success(project ? "项目已更新" : "项目已创建")
|
|
await queryClient.invalidateQueries({ queryKey: projectsQueryKey })
|
|
if (project) {
|
|
await queryClient.invalidateQueries({
|
|
queryKey: projectQueryKey(project.id),
|
|
})
|
|
}
|
|
onOpenChange(false)
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error instanceof Error ? error.message : "保存失败")
|
|
},
|
|
})
|
|
|
|
const spaEnabled = form.watch("spa_fallback_enabled")
|
|
const apiEnabled = form.watch("api_proxy_enabled")
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>{project ? "编辑 Pages 项目" : "新建 Pages 项目"}</DialogTitle>
|
|
<DialogDescription>
|
|
配置静态站点托管参数，上传部署包后在代理规则中选择 Pages 上游。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<form
|
|
id="pages-project-form"
|
|
className="space-y-4"
|
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
|
>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="name">项目名称</Label>
|
|
<Input id="name" {...form.register("name")} />
|
|
{form.formState.errors.name ? (
|
|
<p className="text-xs text-destructive">{form.formState.errors.name.message}</p>
|
|
) : null}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="slug">项目标识</Label>
|
|
<Input id="slug" placeholder="留空自动生成" {...form.register("slug")} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="description">描述</Label>
|
|
<Textarea id="description" rows={2} {...form.register("description")} />
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="entry_file">入口文件</Label>
|
|
<Input id="entry_file" {...form.register("entry_file")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="root_dir">根目录</Label>
|
|
<Input id="root_dir" placeholder="可选" {...form.register("root_dir")} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
|
|
<div>
|
|
<p className="text-sm font-medium">SPA fallback</p>
|
|
<p className="text-xs text-muted-foreground">未命中静态文件时回退到指定路径</p>
|
|
</div>
|
|
<Switch
|
|
checked={spaEnabled}
|
|
onCheckedChange={(checked) =>
|
|
form.setValue("spa_fallback_enabled", checked)
|
|
}
|
|
/>
|
|
</div>
|
|
{spaEnabled ? (
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="spa_fallback_path">回退路径</Label>
|
|
<Input id="spa_fallback_path" {...form.register("spa_fallback_path")} />
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex items-center justify-between rounded-lg border border-dashed px-4 py-3">
|
|
<div>
|
|
<p className="text-sm font-medium">API 反向代理</p>
|
|
<p className="text-xs text-muted-foreground">为静态站点附加 API 反代规则</p>
|
|
</div>
|
|
<Switch
|
|
checked={apiEnabled}
|
|
onCheckedChange={(checked) =>
|
|
form.setValue("api_proxy_enabled", checked)
|
|
}
|
|
/>
|
|
</div>
|
|
{apiEnabled ? (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="api_proxy_path">匹配路径</Label>
|
|
<Input id="api_proxy_path" {...form.register("api_proxy_path")} />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="api_proxy_pass">后端地址</Label>
|
|
<Input id="api_proxy_pass" {...form.register("api_proxy_pass")} />
|
|
</div>
|
|
<div className="space-y-1.5 md:col-span-2">
|
|
<Label htmlFor="api_proxy_rewrite">重写规则</Label>
|
|
<Input id="api_proxy_rewrite" {...form.register("api_proxy_rewrite")} />
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</form>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
|
取消
|
|
</Button>
|
|
<Button type="submit" form="pages-project-form" disabled={mutation.isPending}>
|
|
{mutation.isPending ? (
|
|
<>
|
|
<Loader2 className="size-4 animate-spin mr-1" />
|
|
保存中...
|
|
</>
|
|
) : project ? (
|
|
"保存修改"
|
|
) : (
|
|
"创建项目"
|
|
)}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|