mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-06 23:56:37 +08:00
[优化] 代码优化Format
This commit is contained in:
ryan
@@ -0,0 +1,174 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
uploadPagesDeployment,
|
||||
} from '@/features/pages/api/pages';
|
||||
import {
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import {
|
||||
deploymentsQueryKey,
|
||||
projectQueryKey,
|
||||
projectsQueryKey,
|
||||
} from '../utils';
|
||||
|
||||
interface PagesDeploymentUploadModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: number;
|
||||
}
|
||||
|
||||
export function PagesDeploymentUploadModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
projectId,
|
||||
}: PagesDeploymentUploadModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [entryFile, setEntryFile] = useState('index.html');
|
||||
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
setFile(null);
|
||||
setEntryFile('index.html');
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async ({ shouldActivate }: { shouldActivate: boolean }) => {
|
||||
if (!file) {
|
||||
throw new Error('请选择 zip 文件');
|
||||
}
|
||||
setUploadProgress(0);
|
||||
setErrorMessage(null);
|
||||
|
||||
const deployment = await uploadPagesDeployment(
|
||||
projectId,
|
||||
file,
|
||||
entryFile,
|
||||
(percent) => {
|
||||
setUploadProgress(percent);
|
||||
},
|
||||
);
|
||||
|
||||
if (shouldActivate) {
|
||||
await activatePagesDeployment(projectId, deployment.id);
|
||||
}
|
||||
return deployment;
|
||||
},
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectsQueryKey,
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(error instanceof Error ? error.message : '上传失败');
|
||||
},
|
||||
});
|
||||
|
||||
const handleUploadOnly = () => {
|
||||
uploadMutation.mutate({ shouldActivate: false });
|
||||
};
|
||||
|
||||
const handleUploadAndDeploy = () => {
|
||||
uploadMutation.mutate({ shouldActivate: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="上传部署包"
|
||||
description="上传已构建的 zip 静态资源包，默认入口为 index.html。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={uploadMutation.isPending}
|
||||
>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadOnly}
|
||||
>
|
||||
{uploadMutation.isPending &&
|
||||
!uploadMutation.variables?.shouldActivate
|
||||
? `上传中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传'}
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadAndDeploy}
|
||||
>
|
||||
{uploadMutation.isPending &&
|
||||
uploadMutation.variables?.shouldActivate
|
||||
? `上传并部署中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传并部署'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<ResourceField
|
||||
label="部署包"
|
||||
hint="仅支持 zip，Server 会校验文件数量、体积、路径逃逸和入口文件。"
|
||||
error={errorMessage ?? undefined}
|
||||
>
|
||||
<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>
|
||||
{uploadProgress !== null && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
<span>上传进度</span>
|
||||
<span>{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-[var(--surface-muted)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
deletePagesDeployment,
|
||||
deletePagesProject,
|
||||
getPagesProject,
|
||||
getPagesDeployments,
|
||||
} from '@/features/pages/api/pages';
|
||||
import {
|
||||
DangerButton,
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { PagesProjectEditorModal } from './pages-project-editor-modal';
|
||||
import { PagesDeploymentUploadModal } from './pages-deployment-upload-modal';
|
||||
import { formatBytes } from '@/lib/utils/metrics';
|
||||
import {
|
||||
deploymentsQueryKey,
|
||||
projectQueryKey,
|
||||
projectsQueryKey,
|
||||
} from '../utils';
|
||||
|
||||
export function PagesProjectDetailPage({ projectId }: { projectId: string }) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isEditModalOpen, setEditModalOpen] = useState(false);
|
||||
const [isUploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
|
||||
const parsedProjectId = Number(projectId);
|
||||
const projectQuery = useQuery({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
queryFn: () => getPagesProject(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
const deploymentsQuery = useQuery({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
queryFn: () => getPagesDeployments(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
|
||||
const activateMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
activatePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteDeploymentMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
deletePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
const deleteProjectMutation = useMutation({
|
||||
mutationFn: () => deletePagesProject(parsedProjectId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
router.push('/pages');
|
||||
},
|
||||
});
|
||||
|
||||
if (projectId === '' || !Number.isFinite(parsedProjectId)) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="缺少有效的 Pages 项目 ID，请从项目列表重新进入。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (projectQuery.isLoading) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (projectQuery.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Pages 项目加载失败"
|
||||
description={projectQuery.error.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const project = projectQuery.data;
|
||||
if (!project) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="该项目可能已被删除，或当前 ID 无法匹配到项目记录。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDeleteProject = () => {
|
||||
if (!window.confirm(`确认删除 Pages 项目 ${project.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
deleteProjectMutation.mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={project.name}
|
||||
description={`${project.slug} · Pages 静态站点项目详情`}
|
||||
action={
|
||||
<>
|
||||
<Link
|
||||
href="/pages"
|
||||
className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
|
||||
>
|
||||
返回列表
|
||||
</Link>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setEditModalOpen(true)}
|
||||
>
|
||||
编辑项目
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
onClick={handleDeleteProject}
|
||||
>
|
||||
删除项目
|
||||
</DangerButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<AppCard
|
||||
title="部署历史"
|
||||
description="部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。"
|
||||
action={
|
||||
(deploymentsQuery.data ?? []).length > 0 ? (
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{deploymentsQuery.isLoading ? (
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
加载中...
|
||||
</p>
|
||||
) : deploymentsQuery.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{deploymentsQuery.error.message}
|
||||
</p>
|
||||
) : (deploymentsQuery.data ?? []).length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无部署"
|
||||
description="上传 zip 部署包后，可以在这里激活某个部署版本。"
|
||||
>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<PagesProjectEditorModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => setEditModalOpen(false)}
|
||||
project={project}
|
||||
/>
|
||||
|
||||
<PagesDeploymentUploadModal
|
||||
isOpen={isUploadModalOpen}
|
||||
onClose={() => setUploadModalOpen(false)}
|
||||
projectId={parsedProjectId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState, type FormEvent } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { EmptyState } from '@/components/feedback/empty-state';
|
||||
import { ErrorState } from '@/components/feedback/error-state';
|
||||
import { LoadingState } from '@/components/feedback/loading-state';
|
||||
import { PageHeader } from '@/components/layout/page-header';
|
||||
import { AppCard } from '@/components/ui/app-card';
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import { getPagesProjects } from '@/features/pages/api/pages';
|
||||
import {
|
||||
activatePagesDeployment,
|
||||
createPagesProject,
|
||||
deletePagesDeployment,
|
||||
deletePagesProject,
|
||||
getPagesProject,
|
||||
getPagesDeployments,
|
||||
getPagesProjects,
|
||||
updatePagesProject,
|
||||
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';
|
||||
import { PagesProjectEditorModal } from './pages-project-editor-modal';
|
||||
import { PagesProjectListItem } from './pages-project-list-item';
|
||||
import { projectsQueryKey } from '../utils';
|
||||
|
||||
const projectsQueryKey = ['pages-projects'];
|
||||
|
||||
function projectQueryKey(projectId: string | number) {
|
||||
return ['pages-project', String(projectId)];
|
||||
}
|
||||
|
||||
function deploymentsQueryKey(projectId: string | number) {
|
||||
return ['pages-deployments', Number(projectId)];
|
||||
}
|
||||
|
||||
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 { PagesProjectDetailPage } from './pages-detail-page';
|
||||
|
||||
export function PagesPage() {
|
||||
const [isCreateModalOpen, setCreateModalOpen] = useState(false);
|
||||
@@ -79,8 +34,8 @@ export function PagesPage() {
|
||||
边缘静态站点托管
|
||||
</h1>
|
||||
<p className="max-w-3xl text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
创建 Pages 项目，上传已构建的 zip 静态资源包，然后在规则中选择 Pages
|
||||
项目作为上游。发布后 Agent
|
||||
创建 Pages 项目，上传已构建 of zip 静态资源包，然后在规则中选择
|
||||
Pages 项目作为上游。发布后 Agent
|
||||
会拉取部署包并在边缘节点本地服务静态文件。
|
||||
</p>
|
||||
</div>
|
||||
@@ -114,8 +69,7 @@ export function PagesPage() {
|
||||
新建 Pages 项目
|
||||
</SecondaryButton>
|
||||
}
|
||||
>
|
||||
</AppCard>
|
||||
/>
|
||||
) : (
|
||||
(projectsQuery.data ?? []).map((project) => (
|
||||
<PagesProjectListItem key={project.id} project={project} />
|
||||
@@ -123,769 +77,10 @@ export function PagesPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<PagesProjectCreateModal
|
||||
<PagesProjectEditorModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setCreateModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PagesProjectDetailPage({ projectId }: { projectId: string }) {
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const [isEditModalOpen, setEditModalOpen] = useState(false);
|
||||
const [isUploadModalOpen, setUploadModalOpen] = useState(false);
|
||||
|
||||
const parsedProjectId = Number(projectId);
|
||||
const projectQuery = useQuery({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
queryFn: () => getPagesProject(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
const deploymentsQuery = useQuery({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
queryFn: () => getPagesDeployments(parsedProjectId),
|
||||
enabled: projectId !== '' && Number.isFinite(parsedProjectId),
|
||||
});
|
||||
|
||||
const activateMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
activatePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
const deleteDeploymentMutation = useMutation({
|
||||
mutationFn: (deploymentId: number) =>
|
||||
deletePagesDeployment(parsedProjectId, deploymentId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(parsedProjectId),
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
const deleteProjectMutation = useMutation({
|
||||
mutationFn: () => deletePagesProject(parsedProjectId),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
router.push('/pages');
|
||||
},
|
||||
});
|
||||
|
||||
if (projectId === '' || !Number.isFinite(parsedProjectId)) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="缺少有效的 Pages 项目 ID，请从项目列表重新进入。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (projectQuery.isLoading) {
|
||||
return <LoadingState />;
|
||||
}
|
||||
|
||||
if (projectQuery.isError) {
|
||||
return (
|
||||
<ErrorState
|
||||
title="Pages 项目加载失败"
|
||||
description={projectQuery.error.message}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const project = projectQuery.data;
|
||||
if (!project) {
|
||||
return (
|
||||
<EmptyState
|
||||
title="Pages 项目不存在"
|
||||
description="该项目可能已被删除，或当前 ID 无法匹配到项目记录。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const handleDeleteProject = () => {
|
||||
if (!window.confirm(`确认删除 Pages 项目 ${project.name} 吗？`)) {
|
||||
return;
|
||||
}
|
||||
deleteProjectMutation.mutate();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<PageHeader
|
||||
title={project.name}
|
||||
description={`${project.slug} · Pages 静态站点项目详情`}
|
||||
action={
|
||||
<>
|
||||
<Link
|
||||
href="/pages"
|
||||
className="inline-flex items-center justify-center rounded-2xl border border-[var(--border-default)] bg-[var(--control-background)] px-4 py-3 text-sm font-medium text-[var(--foreground-primary)] transition hover:bg-[var(--control-background-hover)]"
|
||||
>
|
||||
返回列表
|
||||
</Link>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={() => setEditModalOpen(true)}
|
||||
>
|
||||
编辑项目
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
<DangerButton
|
||||
type="button"
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
onClick={handleDeleteProject}
|
||||
>
|
||||
删除项目
|
||||
</DangerButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<AppCard
|
||||
title="部署历史"
|
||||
description="部署不可变；激活后发布配置，Agent 才会拉取并切换静态资源。"
|
||||
action={
|
||||
(deploymentsQuery.data ?? []).length > 0 ? (
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
{deploymentsQuery.isLoading ? (
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
加载中...
|
||||
</p>
|
||||
) : deploymentsQuery.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{deploymentsQuery.error.message}
|
||||
</p>
|
||||
) : (deploymentsQuery.data ?? []).length === 0 ? (
|
||||
<EmptyState
|
||||
title="暂无部署"
|
||||
description="上传 zip 部署包后，可以在这里激活某个部署版本。"
|
||||
>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
onClick={() => setUploadModalOpen(true)}
|
||||
>
|
||||
上传部署包
|
||||
</PrimaryButton>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</AppCard>
|
||||
|
||||
<PagesProjectEditModal
|
||||
isOpen={isEditModalOpen}
|
||||
onClose={() => setEditModalOpen(false)}
|
||||
project={project}
|
||||
/>
|
||||
|
||||
<PagesDeploymentUploadModal
|
||||
isOpen={isUploadModalOpen}
|
||||
onClose={() => setUploadModalOpen(false)}
|
||||
projectId={parsedProjectId}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesDeploymentUploadModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
projectId,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
projectId: number;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [entryFile, setEntryFile] = useState('index.html');
|
||||
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const resetForm = () => {
|
||||
setFile(null);
|
||||
setEntryFile('index.html');
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async ({ shouldActivate }: { shouldActivate: boolean }) => {
|
||||
if (!file) {
|
||||
throw new Error('请选择 zip 文件');
|
||||
}
|
||||
setUploadProgress(0);
|
||||
setErrorMessage(null);
|
||||
|
||||
const deployment = await uploadPagesDeployment(
|
||||
projectId,
|
||||
file,
|
||||
entryFile,
|
||||
(percent) => {
|
||||
setUploadProgress(percent);
|
||||
}
|
||||
);
|
||||
|
||||
if (shouldActivate) {
|
||||
await activatePagesDeployment(projectId, deployment.id);
|
||||
}
|
||||
return deployment;
|
||||
},
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: deploymentsQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(projectId),
|
||||
});
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectsQueryKey,
|
||||
});
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
setUploadProgress(null);
|
||||
setErrorMessage(error instanceof Error ? error.message : '上传失败');
|
||||
},
|
||||
});
|
||||
|
||||
const handleUploadOnly = () => {
|
||||
uploadMutation.mutate({ shouldActivate: false });
|
||||
};
|
||||
|
||||
const handleUploadAndDeploy = () => {
|
||||
uploadMutation.mutate({ shouldActivate: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={handleClose}
|
||||
title="上传部署包"
|
||||
description="上传已构建的 zip 静态资源包，默认入口为 index.html。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={uploadMutation.isPending}
|
||||
>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<SecondaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadOnly}
|
||||
>
|
||||
{uploadMutation.isPending && !uploadMutation.variables?.shouldActivate
|
||||
? `上传中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传'}
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="button"
|
||||
disabled={!file || uploadMutation.isPending}
|
||||
onClick={handleUploadAndDeploy}
|
||||
>
|
||||
{uploadMutation.isPending && uploadMutation.variables?.shouldActivate
|
||||
? `上传并部署中 (${uploadProgress ?? 0}%)...`
|
||||
: '上传并部署'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<ResourceField
|
||||
label="部署包"
|
||||
hint="仅支持 zip，Server 会校验文件数量、体积、路径逃逸和入口文件。"
|
||||
>
|
||||
<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>
|
||||
{uploadProgress !== null && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs font-medium text-[var(--foreground-secondary)]">
|
||||
<span>上传进度</span>
|
||||
<span>{uploadProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-[var(--surface-muted)]">
|
||||
<div
|
||||
className="h-full rounded-full bg-[var(--brand-primary)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${uploadProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)]">
|
||||
{errorMessage}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function PagesProjectEditModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
project,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project: PagesProject;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState(project.name);
|
||||
const [slug, setSlug] = useState(project.slug);
|
||||
const [description, setDescription] = useState(project.description || '');
|
||||
const [spaFallbackEnabled, setSpaFallbackEnabled] = useState(project.spa_fallback_enabled);
|
||||
const [spaFallbackPath, setSpaFallbackPath] = useState(project.spa_fallback_path);
|
||||
const [apiProxyEnabled, setApiProxyEnabled] = useState(project.api_proxy_enabled || false);
|
||||
const [apiProxyPath, setApiProxyPath] = useState(project.api_proxy_path || '');
|
||||
const [apiProxyPass, setApiProxyPass] = useState(project.api_proxy_pass || '');
|
||||
const [apiProxyRewrite, setApiProxyRewrite] = useState(project.api_proxy_rewrite || '');
|
||||
|
||||
useEffect(() => {
|
||||
setName(project.name);
|
||||
setSlug(project.slug);
|
||||
setDescription(project.description || '');
|
||||
setSpaFallbackEnabled(project.spa_fallback_enabled);
|
||||
setSpaFallbackPath(project.spa_fallback_path);
|
||||
setApiProxyEnabled(project.api_proxy_enabled || false);
|
||||
setApiProxyPath(project.api_proxy_path || '');
|
||||
setApiProxyPass(project.api_proxy_pass || '');
|
||||
setApiProxyRewrite(project.api_proxy_rewrite || '');
|
||||
}, [project]);
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
updatePagesProject(project.id, {
|
||||
name,
|
||||
slug,
|
||||
description,
|
||||
enabled: project.enabled,
|
||||
spa_fallback_enabled: spaFallbackEnabled,
|
||||
spa_fallback_path: spaFallbackPath,
|
||||
api_proxy_enabled: apiProxyEnabled,
|
||||
api_proxy_path: apiProxyPath,
|
||||
api_proxy_pass: apiProxyPass,
|
||||
api_proxy_rewrite: apiProxyRewrite,
|
||||
}),
|
||||
onSuccess: () => {
|
||||
onClose();
|
||||
queryClient.invalidateQueries({ queryKey: projectQueryKey(project.id) });
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
function handleUpdate(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
updateMutation.mutate();
|
||||
}
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title="编辑 Pages 项目"
|
||||
description="修改静态站点项目的基础配置。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={onClose}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-edit-form"
|
||||
disabled={updateMutation.isPending || name.trim() === ''}
|
||||
>
|
||||
{updateMutation.isPending ? '保存中...' : '保存修改'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-edit-form"
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
onSubmit={handleUpdate}
|
||||
>
|
||||
<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="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={setSpaFallbackEnabled}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={spaFallbackPath}
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
onChange={(event) => setSpaFallbackPath(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 API 反向代理"
|
||||
description="允许为该静态站点配置反代后端（例如反代指定 API 路径至您的后端服务）。"
|
||||
checked={apiProxyEnabled}
|
||||
onChange={setApiProxyEnabled}
|
||||
/>
|
||||
{apiProxyEnabled && (
|
||||
<>
|
||||
<ResourceField
|
||||
label="反代匹配路径"
|
||||
hint="以 / 开头，例如 /api 或 /api/v1。匹配该前缀的请求将被转发。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyPath}
|
||||
placeholder="/api"
|
||||
onChange={(event) => setApiProxyPath(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="后端服务地址"
|
||||
hint="包含协议和主机的完整 URL，例如 http://127.0.0.1:8080。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyPass}
|
||||
placeholder="http://127.0.0.1:8080"
|
||||
onChange={(event) => setApiProxyPass(event.target.value)}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="路径重写目标"
|
||||
hint="可选。如果配置为 /，请求 /api/users 将被重写转发至后端 /users 路径。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={apiProxyRewrite}
|
||||
placeholder="/"
|
||||
onChange={(event) => setApiProxyRewrite(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
</>
|
||||
)}
|
||||
{updateMutation.error ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{updateMutation.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesProjectCreateModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
}: {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState('');
|
||||
const [slug, setSlug] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [spaFallbackEnabled, setSpaFallbackEnabled] = useState(false);
|
||||
const [spaFallbackPath, setSpaFallbackPath] = useState('/index.html');
|
||||
|
||||
const resetForm = () => {
|
||||
setName('');
|
||||
setSlug('');
|
||||
setDescription('');
|
||||
setSpaFallbackEnabled(false);
|
||||
setSpaFallbackPath('/index.html');
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
createPagesProject({
|
||||
name,
|
||||
slug,
|
||||
description,
|
||||
enabled: true,
|
||||
spa_fallback_enabled: spaFallbackEnabled,
|
||||
spa_fallback_path: spaFallbackPath,
|
||||
api_proxy_enabled: false,
|
||||
api_proxy_path: '',
|
||||
api_proxy_pass: '',
|
||||
api_proxy_rewrite: '',
|
||||
}),
|
||||
onSuccess: () => {
|
||||
resetForm();
|
||||
onClose();
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
},
|
||||
});
|
||||
|
||||
function handleCreate(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
createMutation.mutate();
|
||||
}
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
title="新建 Pages 项目"
|
||||
description="配置静态站点项目的基础信息。创建后再上传已构建的 zip 部署包。"
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={closeModal}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-create-form"
|
||||
disabled={createMutation.isPending || name.trim() === ''}
|
||||
>
|
||||
{createMutation.isPending ? '创建中...' : '创建项目'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-create-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="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={setSpaFallbackEnabled}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
>
|
||||
<ResourceInput
|
||||
value={spaFallbackPath}
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
onChange={(event) => setSpaFallbackPath(event.target.value)}
|
||||
/>
|
||||
</ResourceField>
|
||||
{createMutation.error ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{createMutation.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
|
||||
function PagesProjectListItem({ project }: { project: PagesProject }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/pages/detail?id=${project.id}`}
|
||||
className="group block rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] p-5 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:border-[var(--border-strong)] hover:shadow-[var(--shadow-soft)]"
|
||||
>
|
||||
<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-lg font-semibold text-[var(--foreground-primary)]">
|
||||
{project.name}
|
||||
</h2>
|
||||
<StatusBadge
|
||||
label={project.enabled ? '已启用' : '已停用'}
|
||||
variant={project.enabled ? 'success' : 'warning'}
|
||||
/>
|
||||
<StatusBadge
|
||||
label={project.spa_fallback_enabled ? 'SPA fallback' : '严格 404'}
|
||||
variant={project.spa_fallback_enabled ? 'info' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
{project.slug}
|
||||
</p>
|
||||
{project.description ? (
|
||||
<p className="line-clamp-2 text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
{project.description}
|
||||
</p>
|
||||
) : null}
|
||||
{project.spa_fallback_enabled ? (
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
回退路径：{project.spa_fallback_path || '/index.html'}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid shrink-0 grid-cols-2 gap-3 text-sm md:min-w-80">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">部署数</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.deployment_count}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
当前激活
|
||||
</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.active_deployment
|
||||
? `#${project.active_deployment.deployment_number}`
|
||||
: '暂无'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between border-t border-[var(--border-default)] pt-4">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
激活时间：{formatDate(project.active_deployment?.activated_at)}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-[var(--brand-primary)] transition group-hover:translate-x-1">
|
||||
查看详情 →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
import { AppModal } from '@/components/ui/app-modal';
|
||||
import {
|
||||
createPagesProject,
|
||||
updatePagesProject,
|
||||
} from '@/features/pages/api/pages';
|
||||
import type { PagesProject } from '@/features/pages/types';
|
||||
import {
|
||||
PrimaryButton,
|
||||
ResourceField,
|
||||
ResourceInput,
|
||||
SecondaryButton,
|
||||
ToggleField,
|
||||
} from '@/features/shared/components/resource-primitives';
|
||||
import { projectQueryKey, projectsQueryKey } from '../utils';
|
||||
import { pagesProjectSchema, type PagesProjectFormValues } from '../schemas';
|
||||
|
||||
interface PagesProjectEditorModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
project?: PagesProject | null;
|
||||
onSaved?: (project: PagesProject, mode: 'create' | 'update') => void;
|
||||
}
|
||||
|
||||
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: '',
|
||||
};
|
||||
}
|
||||
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 || '',
|
||||
};
|
||||
}
|
||||
|
||||
export function PagesProjectEditorModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
project,
|
||||
onSaved,
|
||||
}: PagesProjectEditorModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const form = useForm<PagesProjectFormValues>({
|
||||
resolver: zodResolver(pagesProjectSchema),
|
||||
defaultValues: toFormValues(project),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
form.reset(toFormValues(project));
|
||||
}
|
||||
}, [form, project, isOpen]);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (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
|
||||
? 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()
|
||||
: '',
|
||||
};
|
||||
return project
|
||||
? updatePagesProject(project.id, payload)
|
||||
: createPagesProject(payload);
|
||||
},
|
||||
onSuccess: (savedProject) => {
|
||||
onClose();
|
||||
if (project) {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: projectQueryKey(project.id),
|
||||
});
|
||||
}
|
||||
queryClient.invalidateQueries({ queryKey: projectsQueryKey });
|
||||
onSaved?.(savedProject, project ? 'update' : 'create');
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = form.handleSubmit((values) => {
|
||||
mutation.mutate(values);
|
||||
});
|
||||
|
||||
const spaFallbackEnabled = form.watch('spa_fallback_enabled');
|
||||
const apiProxyEnabled = form.watch('api_proxy_enabled');
|
||||
|
||||
return (
|
||||
<AppModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={project ? '编辑 Pages 项目' : '新建 Pages 项目'}
|
||||
description={
|
||||
project
|
||||
? '修改静态站点项目的基础配置与高级反代规则。'
|
||||
: '配置静态站点项目的基础信息与高级反代规则。创建后再上传已构建的 zip 部署包。'
|
||||
}
|
||||
footer={
|
||||
<div className="flex flex-wrap justify-end gap-3">
|
||||
<SecondaryButton type="button" onClick={onClose}>
|
||||
取消
|
||||
</SecondaryButton>
|
||||
<PrimaryButton
|
||||
type="submit"
|
||||
form="pages-project-editor-form"
|
||||
disabled={mutation.isPending || !form.formState.isValid}
|
||||
>
|
||||
{mutation.isPending
|
||||
? '保存中...'
|
||||
: project
|
||||
? '保存修改'
|
||||
: '创建项目'}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<form
|
||||
id="pages-project-editor-form"
|
||||
className="grid gap-4 md:grid-cols-2"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<ResourceField
|
||||
label="项目名称"
|
||||
error={form.formState.errors.name?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="Marketing Site"
|
||||
{...form.register('name')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="项目标识"
|
||||
hint="留空时会按名称自动生成。"
|
||||
error={form.formState.errors.slug?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="marketing-site"
|
||||
{...form.register('slug')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="描述"
|
||||
className="md:col-span-2"
|
||||
error={form.formState.errors.description?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="这个项目托管的静态站点用途"
|
||||
{...form.register('description')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 SPA fallback"
|
||||
description="开启后未命中的路径会回退到指定文件，适合 React/Vue history 路由。"
|
||||
checked={spaFallbackEnabled}
|
||||
onChange={(checked) =>
|
||||
form.setValue('spa_fallback_enabled', checked, {
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<ResourceField
|
||||
label="SPA 回退路径"
|
||||
hint="以 / 开头，例如 /index.html 或 /app.html。关闭 fallback 时不会生效。"
|
||||
error={form.formState.errors.spa_fallback_path?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/index.html"
|
||||
disabled={!spaFallbackEnabled}
|
||||
{...form.register('spa_fallback_path')}
|
||||
/>
|
||||
</ResourceField>
|
||||
<ToggleField
|
||||
label="启用 API 反向代理"
|
||||
description="允许为该静态站点配置反代后端（例如反代指定 API 路径至您的后端服务）。"
|
||||
checked={apiProxyEnabled}
|
||||
onChange={(checked) =>
|
||||
form.setValue('api_proxy_enabled', checked, {
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{apiProxyEnabled && (
|
||||
<>
|
||||
<ResourceField
|
||||
label="反代匹配路径"
|
||||
hint="以 / 开头，例如 /api 或 /api/v1。匹配该前缀的请求将被转发。"
|
||||
error={form.formState.errors.api_proxy_path?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/api"
|
||||
{...form.register('api_proxy_path')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="后端服务地址"
|
||||
hint="包含协议和主机的完整 URL，例如 http://127.0.0.1:8080。"
|
||||
error={form.formState.errors.api_proxy_pass?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="http://127.0.0.1:8080"
|
||||
{...form.register('api_proxy_pass')}
|
||||
required
|
||||
/>
|
||||
</ResourceField>
|
||||
<ResourceField
|
||||
label="路径重写目标"
|
||||
hint="可选。如果配置为 /，请求 /api/users 将被重写转发至后端 /users 路径。"
|
||||
error={form.formState.errors.api_proxy_rewrite?.message}
|
||||
>
|
||||
<ResourceInput
|
||||
placeholder="/"
|
||||
{...form.register('api_proxy_rewrite')}
|
||||
/>
|
||||
</ResourceField>
|
||||
</>
|
||||
)}
|
||||
{mutation.isError ? (
|
||||
<p className="text-sm text-[var(--status-danger-foreground)] md:col-span-2">
|
||||
{mutation.error instanceof Error
|
||||
? mutation.error.message
|
||||
: '操作失败，请稍后重试。'}
|
||||
</p>
|
||||
) : null}
|
||||
</form>
|
||||
</AppModal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { StatusBadge } from '@/components/ui/status-badge';
|
||||
import type { PagesProject } from '@/features/pages/types';
|
||||
import { formatDateTime } from '@/lib/utils/date';
|
||||
|
||||
export function PagesProjectListItem({ project }: { project: PagesProject }) {
|
||||
return (
|
||||
<Link
|
||||
href={`/pages/detail?id=${project.id}`}
|
||||
className="group block rounded-[28px] border border-[var(--border-default)] bg-[var(--surface-panel)] p-5 shadow-[var(--shadow-card)] transition hover:-translate-y-0.5 hover:border-[var(--border-strong)] hover:shadow-[var(--shadow-soft)]"
|
||||
>
|
||||
<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-lg font-semibold text-[var(--foreground-primary)]">
|
||||
{project.name}
|
||||
</h2>
|
||||
<StatusBadge
|
||||
label={project.enabled ? '已启用' : '已停用'}
|
||||
variant={project.enabled ? 'success' : 'warning'}
|
||||
/>
|
||||
<StatusBadge
|
||||
label={project.spa_fallback_enabled ? 'SPA fallback' : '严格 404'}
|
||||
variant={project.spa_fallback_enabled ? 'info' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--foreground-secondary)]">
|
||||
{project.slug}
|
||||
</p>
|
||||
{project.description ? (
|
||||
<p className="line-clamp-2 text-sm leading-6 text-[var(--foreground-secondary)]">
|
||||
{project.description}
|
||||
</p>
|
||||
) : null}
|
||||
{project.spa_fallback_enabled ? (
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
回退路径：{project.spa_fallback_path || '/index.html'}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="grid shrink-0 grid-cols-2 gap-3 text-sm md:min-w-80">
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">部署数</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.deployment_count}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-[var(--border-default)] bg-[var(--surface-muted)] px-4 py-3">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
当前激活
|
||||
</p>
|
||||
<p className="mt-1 font-semibold text-[var(--foreground-primary)]">
|
||||
{project.active_deployment
|
||||
? `#${project.active_deployment.deployment_number}`
|
||||
: '暂无'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between border-t border-[var(--border-default)] pt-4">
|
||||
<p className="text-xs text-[var(--foreground-secondary)]">
|
||||
激活时间：
|
||||
{project.active_deployment?.activated_at
|
||||
? formatDateTime(project.active_deployment.activated_at)
|
||||
: '未激活'}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-[var(--brand-primary)] transition group-hover:translate-x-1">
|
||||
查看详情 →
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user