mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-14 02:46:37 +08:00
refactor(repo): replace legacy openflare-server with Wavelet rename
Delete the old monolithic openflare-server implementation and rename Wavelet/ to openflare-server/ to complete the migration consolidation. Update CI workflows, agent Dockerfiles, and deployment docs for the new layout (frontend/, docker/Dockerfile).
This commit is contained in:
ryan
@@ -0,0 +1,278 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user