mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-11 17:56:37 +08:00
refactor(repo): consolidate openflare-server to root and move subprojects to internal/apps
- 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.
This commit is contained in:
ryan
@@ -0,0 +1,177 @@
|
||||
"use client"
|
||||
|
||||
import {useRef, useState} from "react"
|
||||
import {useMutation, useQueryClient} from "@tanstack/react-query"
|
||||
import {Loader2, UploadCloud} from "lucide-react"
|
||||
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 {Progress} from "@/components/ui/progress"
|
||||
import {PagesService} from "@/lib/services/openflare"
|
||||
import {cn} from "@/lib/utils"
|
||||
|
||||
import {deploymentsQueryKey, formatBytes, projectQueryKey, projectsQueryKey} from "./pages-utils"
|
||||
|
||||
interface DeploymentUploadDialogProps {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
projectId: number
|
||||
}
|
||||
|
||||
export function DeploymentUploadDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
projectId,
|
||||
}: DeploymentUploadDialogProps) {
|
||||
const queryClient = useQueryClient()
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [isDragActive, setIsDragActive] = useState(false)
|
||||
const [uploadProgress, setUploadProgress] = useState<number | null>(null)
|
||||
|
||||
const resetForm = () => {
|
||||
setFile(null)
|
||||
setIsDragActive(false)
|
||||
setUploadProgress(null)
|
||||
if (fileInputRef.current) fileInputRef.current.value = ""
|
||||
}
|
||||
|
||||
const handleClose = (nextOpen: boolean) => {
|
||||
if (!nextOpen) resetForm()
|
||||
onOpenChange(nextOpen)
|
||||
}
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!file) throw new Error("请选择 zip 部署包")
|
||||
return PagesService.uploadDeployment(projectId, {
|
||||
file,
|
||||
onProgress: setUploadProgress,
|
||||
})
|
||||
},
|
||||
onSuccess: async () => {
|
||||
toast.success("部署包上传成功")
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: deploymentsQueryKey(projectId) }),
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
|
||||
])
|
||||
handleClose(false)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error instanceof Error ? error.message : "上传失败")
|
||||
setUploadProgress(null)
|
||||
},
|
||||
})
|
||||
|
||||
const handleFileSelect = (selected: File | null) => {
|
||||
if (!selected) return
|
||||
if (!selected.name.toLowerCase().endsWith(".zip")) {
|
||||
toast.error("仅支持 zip 格式的文件")
|
||||
return
|
||||
}
|
||||
setFile(selected)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>上传部署包</DialogTitle>
|
||||
<DialogDescription>上传已构建的 zip 静态资源包，部署后可在列表中激活。</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border border-dashed p-8 text-center transition",
|
||||
isDragActive ? "border-primary bg-primary/5" : "bg-muted/20",
|
||||
)}
|
||||
onDragEnter={(e) => {
|
||||
e.preventDefault()
|
||||
setIsDragActive(true)
|
||||
}}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDragLeave={(e) => {
|
||||
e.preventDefault()
|
||||
setIsDragActive(false)
|
||||
}}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault()
|
||||
setIsDragActive(false)
|
||||
handleFileSelect(e.dataTransfer.files[0] ?? null)
|
||||
}}
|
||||
>
|
||||
<UploadCloud className="size-8 mx-auto text-muted-foreground" />
|
||||
<p className="mt-3 text-sm">拖拽 zip 文件到此处，或点击选择文件</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
选择文件
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".zip"
|
||||
className="hidden"
|
||||
onChange={(e) => handleFileSelect(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{file ? (
|
||||
<div className="rounded-lg border border-dashed px-4 py-3 text-sm">
|
||||
<p className="font-medium">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{formatBytes(file.size)}</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{uploadProgress !== null ? (
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between text-xs text-muted-foreground">
|
||||
<span>上传进度</span>
|
||||
<span>{uploadProgress}%</span>
|
||||
</div>
|
||||
<Progress value={uploadProgress} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="entryFile">入口文件</Label>
|
||||
<Input id="entryFile" defaultValue="index.html" disabled />
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => handleClose(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => uploadMutation.mutate()}
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
>
|
||||
{uploadMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin mr-1" />
|
||||
上传中...
|
||||
</>
|
||||
) : (
|
||||
"上传并创建部署"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export function formatBytes(bytes: number, decimals = 2) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||
}
|
||||
|
||||
export const projectsQueryKey = ['openflare', 'pages', 'projects'] as const;
|
||||
|
||||
export function projectQueryKey(projectId: string | number) {
|
||||
return ['openflare', 'pages', 'project', String(projectId)] as const;
|
||||
}
|
||||
|
||||
export function deploymentsQueryKey(projectId: number) {
|
||||
return ['openflare', 'pages', 'deployments', projectId] as const;
|
||||
}
|
||||
|
||||
export function deploymentFilesQueryKey(projectId: number, deploymentId: number) {
|
||||
return ['openflare', 'pages', 'deployment-files', projectId, deploymentId] as const;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import {ChevronRight} from "lucide-react"
|
||||
|
||||
import {Badge} from "@/components/ui/badge"
|
||||
import type {PagesProject} from "@/lib/services/openflare"
|
||||
import {formatDateTime} from "@/lib/utils"
|
||||
|
||||
interface ProjectListItemProps {
|
||||
project: PagesProject
|
||||
}
|
||||
|
||||
export function ProjectListItem({ project }: ProjectListItemProps) {
|
||||
return (
|
||||
<Link
|
||||
href={`/pages/detail?id=${project.id}`}
|
||||
className="group block rounded-lg border border-dashed bg-background p-4 transition hover:bg-muted/20"
|
||||
>
|
||||
<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-base font-semibold">{project.name}</h2>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{project.enabled ? "已启用" : "已停用"}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{project.spa_fallback_enabled ? "SPA fallback" : "严格 404"}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{project.slug}</p>
|
||||
{project.description ? (
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-dashed px-4 py-3 text-sm md:min-w-36">
|
||||
<p className="text-xs text-muted-foreground">当前激活</p>
|
||||
<p className="mt-1 font-semibold">
|
||||
{project.active_deployment
|
||||
? `#${project.active_deployment.deployment_number}`
|
||||
: "暂无"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex items-center justify-between border-t border-dashed pt-3 text-xs text-muted-foreground">
|
||||
<span>
|
||||
激活时间：
|
||||
{project.active_deployment?.activated_at
|
||||
? formatDateTime(project.active_deployment.activated_at)
|
||||
: "未激活"}
|
||||
</span>
|
||||
<span className="inline-flex items-center text-primary group-hover:translate-x-0.5 transition-transform">
|
||||
查看详情
|
||||
<ChevronRight className="size-3.5 ml-0.5" />
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user