feat(pages): 支持 Remote 部署源同步

新增部署源配置与运行态模型、安全下载、租约续期、原子激活和失败补偿。接入内部任务与脱敏前端交互，并阻止数据库 Trace 和日志展开敏感查询参数。
2026-10-14 02:46:37 +08:00 · 2026-07-19 17:36:51 +08:00
parent 4e8ec23264
commit 38b0516937
58 changed files with 9858 additions and 1075 deletions
@@ -0,0 +1,86 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { EmptyInline } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { PagesService } from '@/lib/services/openflare';
+
+import {
+  deploymentFilesQueryKey,
+  formatBytes,
+} from '../../components/pages-utils';
+
+interface DeploymentFilesPanelProps {
+  projectId: number;
+  deploymentId: number;
+}
+
+export function DeploymentFilesPanel({
+  projectId,
+  deploymentId,
+}: DeploymentFilesPanelProps) {
+  const filesQuery = useQuery({
+    queryKey: deploymentFilesQueryKey(projectId, deploymentId),
+    queryFn: () => PagesService.listDeploymentFiles(deploymentId),
+  });
+
+  if (filesQuery.isLoading) {
+    return (
+      <div className='flex flex-col gap-2 p-4'>
+        <Skeleton className='h-8 w-full' />
+        <Skeleton className='h-8 w-full' />
+      </div>
+    );
+  }
+
+  if (filesQuery.isError) {
+    return (
+      <div className='p-4'>
+        <ErrorInline
+          message={
+            filesQuery.error instanceof Error
+              ? filesQuery.error.message
+              : '文件清单加载失败'
+          }
+          onRetry={() => void filesQuery.refetch()}
+        />
+      </div>
+    );
+  }
+
+  const files = filesQuery.data ?? [];
+  if (files.length === 0) {
+    return <EmptyInline message='暂无文件记录' />;
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>路径</TableHead>
+          <TableHead className='text-right'>大小</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {files.map((file) => (
+          <TableRow key={file.id}>
+            <TableCell className='font-mono text-xs'>{file.path}</TableCell>
+            <TableCell className='text-right text-xs text-muted-foreground'>
+              {formatBytes(file.size)}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
@@ -0,0 +1,300 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { EmptyStateWithBorder } from '@/components/layout/empty';
+import { ErrorInline } from '@/components/layout/error';
+import { LoadingStateWithBorder } from '@/components/layout/loading';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Spinner } from '@/components/ui/spinner';
+import { type PagesDeployment, PagesService } from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
+
+import {
+  deploymentFilesQueryKey,
+  deploymentsQueryKey,
+  formatBytes,
+  projectQueryKey,
+  projectsQueryKey,
+  sourceQueryKey,
+} from '../../components/pages-utils';
+import { DeploymentFilesPanel } from './deployment-files-panel';
+
+const SOURCE_LABELS: Record<PagesDeployment['source_type'], string> = {
+  manual_upload: '本地上传',
+  manual_url: 'URL 导入',
+  remote_url: 'Remote URL',
+  github_release: 'GitHub Release',
+};
+
+const TRIGGER_LABELS: Record<PagesDeployment['trigger_type'], string> = {
+  manual_upload: '手动上传',
+  manual_url: '手动导入',
+  manual_sync: '手动同步',
+  scheduled_auto_update: '定时更新',
+};
+
+interface DeploymentHistoryProps {
+  projectId: number;
+  activeDeploymentId?: number | null;
+}
+
+type PendingAction = {
+  type: 'activate' | 'delete';
+  deployment: PagesDeployment;
+};
+
+function deploymentSnapshot(deployment: PagesDeployment) {
+  return [
+    SOURCE_LABELS[deployment.source_type],
+    deployment.source_label,
+    TRIGGER_LABELS[deployment.trigger_type],
+  ]
+    .filter(Boolean)
+    .join(' · ');
+}
+
+export function DeploymentHistory({
+  projectId,
+  activeDeploymentId,
+}: DeploymentHistoryProps) {
+  const queryClient = useQueryClient();
+  const [expandedDeploymentId, setExpandedDeploymentId] = useState<
+    number | null
+  >(null);
+  const [pendingAction, setPendingAction] = useState<PendingAction | null>(
+    null,
+  );
+
+  const deploymentsQuery = useQuery({
+    queryKey: deploymentsQueryKey(projectId),
+    queryFn: () => PagesService.listDeployments(projectId),
+  });
+
+  const deployments = useMemo(() => {
+    const records = [...(deploymentsQuery.data ?? [])];
+    return records.sort((left, right) => {
+      const leftActive =
+        left.id === activeDeploymentId || left.status === 'active';
+      const rightActive =
+        right.id === activeDeploymentId || right.status === 'active';
+      if (leftActive !== rightActive) return leftActive ? -1 : 1;
+      return right.deployment_number - left.deployment_number;
+    });
+  }, [activeDeploymentId, deploymentsQuery.data]);
+
+  const invalidateDeploymentState = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({
+        queryKey: deploymentsQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+      queryClient.invalidateQueries({ queryKey: sourceQueryKey(projectId) }),
+      queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+    ]);
+  };
+
+  const activateMutation = useMutation({
+    mutationFn: (deploymentId: number) =>
+      PagesService.activateDeployment(projectId, deploymentId),
+    onSuccess: async () => {
+      toast.success('部署已激活');
+      await invalidateDeploymentState();
+      setPendingAction(null);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '激活失败');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (deploymentId: number) =>
+      PagesService.deleteDeployment(projectId, deploymentId),
+    onSuccess: async (_, deploymentId) => {
+      toast.success('部署已删除');
+      queryClient.removeQueries({
+        queryKey: deploymentFilesQueryKey(projectId, deploymentId),
+      });
+      await invalidateDeploymentState();
+      setPendingAction(null);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '删除失败');
+    },
+  });
+
+  const actionPending = activateMutation.isPending || deleteMutation.isPending;
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>部署历史</CardTitle>
+          <CardDescription>
+            部署记录不可变，来源信息是创建部署时的安全快照。
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-col gap-3'>
+          {deploymentsQuery.isLoading ? (
+            <LoadingStateWithBorder description='加载部署历史...' />
+          ) : deploymentsQuery.isError ? (
+            <div className='rounded-lg border p-4'>
+              <ErrorInline
+                message={
+                  deploymentsQuery.error instanceof Error
+                    ? deploymentsQuery.error.message
+                    : '部署历史加载失败'
+                }
+                onRetry={() => void deploymentsQuery.refetch()}
+              />
+            </div>
+          ) : deployments.length === 0 ? (
+            <EmptyStateWithBorder
+              title='暂无部署'
+              description='上传本地部署包，或配置 Remote URL 来源后同步发布。'
+            />
+          ) : (
+            deployments.map((deployment) => {
+              const active =
+                deployment.id === activeDeploymentId ||
+                deployment.status === 'active';
+              const expanded = expandedDeploymentId === deployment.id;
+
+              return (
+                <div key={deployment.id} className='rounded-lg border'>
+                  <div className='flex flex-col gap-4 p-4 md:flex-row md:items-center md:justify-between'>
+                    <div className='flex min-w-0 items-start gap-2'>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        size='icon-sm'
+                        aria-label={expanded ? '收起文件清单' : '展开文件清单'}
+                        onClick={() =>
+                          setExpandedDeploymentId(
+                            expanded ? null : deployment.id,
+                          )
+                        }
+                      >
+                        {expanded ? <ChevronDown /> : <ChevronRight />}
+                      </Button>
+                      <div className='flex min-w-0 flex-col gap-2'>
+                        <div className='flex flex-wrap items-center gap-2'>
+                          <span className='text-sm font-medium'>
+                            部署 #{deployment.deployment_number}
+                          </span>
+                          <Badge variant={active ? 'default' : 'outline'}>
+                            {active ? '当前生产部署' : '历史部署'}
+                          </Badge>
+                          <Badge variant='secondary'>
+                            {deploymentSnapshot(deployment)}
+                          </Badge>
+                        </div>
+                        <p className='truncate text-xs text-muted-foreground'>
+                          {deployment.checksum.slice(0, 16)} ·{' '}
+                          {deployment.file_count} 个文件 ·{' '}
+                          {formatBytes(deployment.total_size)}
+                        </p>
+                        <p className='text-xs text-muted-foreground'>
+                          创建于 {formatDateTime(deployment.created_at)}
+                        </p>
+                      </div>
+                    </div>
+                    <div className='flex gap-2 md:ml-10'>
+                      <Button
+                        type='button'
+                        variant='outline'
+                        size='sm'
+                        disabled={active || actionPending}
+                        onClick={() =>
+                          setPendingAction({ type: 'activate', deployment })
+                        }
+                      >
+                        激活
+                      </Button>
+                      <Button
+                        type='button'
+                        variant='destructive'
+                        size='sm'
+                        disabled={active || actionPending}
+                        onClick={() =>
+                          setPendingAction({ type: 'delete', deployment })
+                        }
+                      >
+                        删除
+                      </Button>
+                    </div>
+                  </div>
+                  {expanded ? (
+                    <DeploymentFilesPanel
+                      projectId={projectId}
+                      deploymentId={deployment.id}
+                    />
+                  ) : null}
+                </div>
+              );
+            })
+          )}
+        </CardContent>
+      </Card>
+
+      <AlertDialog
+        open={pendingAction !== null}
+        onOpenChange={(open) => {
+          if (!open && !actionPending) setPendingAction(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {pendingAction?.type === 'activate' ? '激活历史部署' : '删除部署'}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pendingAction?.type === 'activate'
+                ? '激活其它历史部署会终止当前来源任务；若已开启自动更新，将同时关闭自动更新。'
+                : `确认删除部署 #${pendingAction?.deployment.deployment_number} 吗？此操作不可恢复。`}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={actionPending}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={actionPending}
+              onClick={(event) => {
+                event.preventDefault();
+                if (!pendingAction) return;
+                if (pendingAction.type === 'activate') {
+                  activateMutation.mutate(pendingAction.deployment.id);
+                } else {
+                  deleteMutation.mutate(pendingAction.deployment.id);
+                }
+              }}
+            >
+              {actionPending ? <Spinner data-icon='inline-start' /> : null}
+              确认
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
@@ -0,0 +1,393 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Download, Pencil, RefreshCw, RotateCcw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { ErrorInline } from '@/components/layout/error';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { AdminTaskService } from '@/lib/services/admin';
+import {
+  type PagesSource,
+  type PagesSourceActionReceipt,
+  type PagesSourceStatus,
+  PagesService,
+} from '@/lib/services/openflare';
+import { formatDateTime } from '@/lib/utils';
+
+import {
+  deploymentsQueryKey,
+  projectQueryKey,
+  projectsQueryKey,
+  sourceQueryKey,
+} from '../../components/pages-utils';
+import { PagesSourceDialog } from './pages-source-dialog';
+
+const ACTION_POLL_INTERVAL = 2_000;
+const ACTION_MAX_WAIT = 16 * 60 * 1_000;
+
+const SOURCE_STATUS: Record<
+  PagesSourceStatus,
+  {
+    label: string;
+    variant: 'default' | 'secondary' | 'destructive' | 'outline';
+  }
+> = {
+  idle: { label: '空闲', variant: 'outline' },
+  checking: { label: '检查中', variant: 'secondary' },
+  update_available: { label: '有可用更新', variant: 'default' },
+  syncing: { label: '同步中', variant: 'secondary' },
+  failed: { label: '最近同步失败', variant: 'destructive' },
+  attention: { label: '需要确认', variant: 'destructive' },
+};
+
+interface ActiveAction {
+  receipt: PagesSourceActionReceipt;
+  startedAt: number;
+}
+
+function revisionSummary(source: PagesSource) {
+  if (source.source_type === 'manual' || !source.last_applied)
+    return '尚未应用';
+  return `${source.last_applied.label} · ${source.last_applied.revision.slice(0, 12)}`;
+}
+
+export function PagesSourceCard({ projectId }: { projectId: number }) {
+  const queryClient = useQueryClient();
+  const handledExecutionID = useRef<string | null>(null);
+  const sourcePollingStartedAt = useRef<number | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogMode, setDialogMode] = useState<'manual' | 'remote_url'>(
+    'manual',
+  );
+  const [activeAction, setActiveAction] = useState<ActiveAction | null>(null);
+  const [actionTimedOut, setActionTimedOut] = useState(false);
+
+  const sourceQuery = useQuery({
+    queryKey: sourceQueryKey(projectId),
+    queryFn: () => PagesService.getSource(projectId),
+    refetchInterval: (query) => {
+      const source = query.state.data;
+      if (
+        source &&
+        source.source_type !== 'manual' &&
+        (source.sync_status === 'checking' || source.sync_status === 'syncing')
+      ) {
+        sourcePollingStartedAt.current ??= Date.now();
+        return Date.now() - sourcePollingStartedAt.current < ACTION_MAX_WAIT
+          ? ACTION_POLL_INTERVAL
+          : false;
+      }
+      sourcePollingStartedAt.current = null;
+      return false;
+    },
+  });
+
+  const executionQuery = useQuery({
+    queryKey: [
+      'admin',
+      'task-execution',
+      activeAction?.receipt.execution_id ?? '',
+    ],
+    queryFn: () =>
+      AdminTaskService.getTaskExecution(activeAction!.receipt.execution_id),
+    enabled: Boolean(activeAction) && !actionTimedOut,
+    refetchInterval: (query) => {
+      if (actionTimedOut) return false;
+      const status = query.state.data?.status;
+      return status === 'pending' || status === 'running'
+        ? ACTION_POLL_INTERVAL
+        : false;
+    },
+  });
+
+  useEffect(() => {
+    if (!activeAction || actionTimedOut) return;
+    const elapsed = Date.now() - activeAction.startedAt;
+    const remaining = Math.max(0, ACTION_MAX_WAIT - elapsed);
+    const timeout = window.setTimeout(() => setActionTimedOut(true), remaining);
+    return () => window.clearTimeout(timeout);
+  }, [actionTimedOut, activeAction]);
+
+  useEffect(() => {
+    const execution = executionQuery.data;
+    if (!execution || !['succeeded', 'failed'].includes(execution.status)) {
+      return;
+    }
+    if (handledExecutionID.current === execution.id) return;
+    handledExecutionID.current = execution.id;
+
+    void Promise.all([
+      queryClient.invalidateQueries({ queryKey: sourceQueryKey(projectId) }),
+      queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+      queryClient.invalidateQueries({
+        queryKey: deploymentsQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: ['openflare', 'pages', 'deployment-files', projectId],
+      }),
+      queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+    ]);
+
+    if (execution.status === 'succeeded') {
+      toast.success('部署源同步并发布完成');
+    } else {
+      toast.error(execution.error_message || '部署源同步失败');
+    }
+    setActiveAction(null);
+    setActionTimedOut(false);
+  }, [executionQuery.data, projectId, queryClient]);
+
+  const syncMutation = useMutation({
+    mutationFn: () => PagesService.syncSource(projectId, {}),
+    onSuccess: async (receipt) => {
+      handledExecutionID.current = null;
+      setActiveAction({ receipt, startedAt: Date.now() });
+      setActionTimedOut(false);
+      await queryClient.invalidateQueries({
+        queryKey: sourceQueryKey(projectId),
+      });
+      toast.success('同步任务已提交');
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '同步任务提交失败');
+    },
+  });
+
+  const source = sourceQuery.data;
+  const executionBusy =
+    activeAction !== null &&
+    (executionQuery.data?.status === undefined ||
+      executionQuery.data.status === 'pending' ||
+      executionQuery.data.status === 'running');
+  const sourceBusy =
+    source?.source_type !== 'manual' &&
+    (source?.sync_status === 'checking' || source?.sync_status === 'syncing');
+  const actionsDisabled = syncMutation.isPending || executionBusy || sourceBusy;
+
+  const openSourceDialog = (mode: 'manual' | 'remote_url') => {
+    setDialogMode(mode);
+    setDialogOpen(true);
+  };
+
+  if (sourceQuery.isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>部署源</CardTitle>
+          <CardDescription>加载来源配置...</CardDescription>
+        </CardHeader>
+        <CardContent className='flex flex-col gap-3'>
+          <Skeleton className='h-10 w-full' />
+          <Skeleton className='h-20 w-full' />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (sourceQuery.isError || !source) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>部署源</CardTitle>
+          <CardDescription>来源配置与部署历史相互独立。</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ErrorInline
+            message={
+              sourceQuery.error instanceof Error
+                ? sourceQuery.error.message
+                : '部署源加载失败'
+            }
+            onRetry={() => void sourceQuery.refetch()}
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const status =
+    source.source_type === 'manual'
+      ? null
+      : SOURCE_STATUS[source.sync_status ?? 'idle'];
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <CardTitle>部署源</CardTitle>
+          <CardDescription>
+            来源配置负责发现内容，发布结果记录在独立的部署历史中。
+          </CardDescription>
+          <CardAction>
+            {status ? (
+              <Badge variant={status.variant}>{status.label}</Badge>
+            ) : (
+              <Badge variant='outline'>手动部署</Badge>
+            )}
+          </CardAction>
+        </CardHeader>
+
+        <CardContent className='flex flex-col gap-4'>
+          {source.source_type === 'manual' ? (
+            <div className='rounded-lg border bg-muted/20 p-4'>
+              <p className='text-sm font-medium'>本地部署包</p>
+              <p className='mt-1 text-sm text-muted-foreground'>
+                当前没有持久化远端来源。上传部署包后，再从部署历史显式激活。
+              </p>
+            </div>
+          ) : source.source_type === 'remote_url' ? (
+            <div className='grid gap-4 md:grid-cols-2'>
+              <div className='flex min-w-0 flex-col gap-1 rounded-lg border p-4 md:col-span-2'>
+                <span className='text-xs text-muted-foreground'>脱敏地址</span>
+                <code className='truncate text-sm'>{source.display_url}</code>
+              </div>
+              <div className='flex flex-col gap-1 rounded-lg border p-4'>
+                <span className='text-xs text-muted-foreground'>网络策略</span>
+                <span className='text-sm font-medium'>
+                  {source.remote_network_policy === 'trusted_internal'
+                    ? '受信内网模式'
+                    : '公网安全模式'}
+                </span>
+              </div>
+              <div className='flex flex-col gap-1 rounded-lg border p-4'>
+                <span className='text-xs text-muted-foreground'>最近同步</span>
+                <span className='text-sm font-medium'>
+                  {source.last_synced_at
+                    ? formatDateTime(source.last_synced_at)
+                    : '尚未同步'}
+                </span>
+              </div>
+              <div className='flex flex-col gap-1 rounded-lg border p-4 md:col-span-2'>
+                <span className='text-xs text-muted-foreground'>
+                  已应用 revision
+                </span>
+                <span className='font-mono text-sm'>
+                  {revisionSummary(source)}
+                </span>
+              </div>
+              {source.last_error ? (
+                <div className='md:col-span-2'>
+                  <ErrorInline message={source.last_error} />
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className='rounded-lg border p-4 text-sm text-muted-foreground'>
+              当前版本暂不提供该来源类型的编辑界面。
+            </div>
+          )}
+
+          {executionQuery.isError ? (
+            <ErrorInline
+              message={
+                executionQuery.error instanceof Error
+                  ? executionQuery.error.message
+                  : '任务状态读取失败'
+              }
+              onRetry={() => void executionQuery.refetch()}
+            />
+          ) : null}
+          {actionTimedOut ? (
+            <div className='flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between'>
+              <span className='text-xs text-muted-foreground'>
+                自动等待已停止，任务可能仍在后台运行。
+              </span>
+              <Button
+                type='button'
+                variant='outline'
+                size='sm'
+                onClick={() => {
+                  if (!activeAction) return;
+                  setActiveAction({ ...activeAction, startedAt: Date.now() });
+                  setActionTimedOut(false);
+                  void executionQuery.refetch();
+                  void sourceQuery.refetch();
+                }}
+              >
+                <RefreshCw data-icon='inline-start' />
+                刷新任务状态
+              </Button>
+            </div>
+          ) : null}
+        </CardContent>
+
+        <CardFooter className='flex flex-wrap gap-2 border-t'>
+          {source.source_type === 'manual' ? (
+            <Button
+              type='button'
+              onClick={() => openSourceDialog('remote_url')}
+            >
+              <Download data-icon='inline-start' />
+              配置 Remote URL
+            </Button>
+          ) : source.source_type === 'remote_url' ? (
+            <>
+              <Button
+                type='button'
+                variant='outline'
+                disabled={actionsDisabled}
+                onClick={() => openSourceDialog('remote_url')}
+              >
+                <Pencil data-icon='inline-start' />
+                编辑来源
+              </Button>
+              <Button
+                type='button'
+                disabled={actionsDisabled}
+                onClick={() => syncMutation.mutate()}
+              >
+                {actionsDisabled ? (
+                  <Spinner data-icon='inline-start' />
+                ) : (
+                  <Download data-icon='inline-start' />
+                )}
+                同步并发布
+              </Button>
+              <Button
+                type='button'
+                variant='ghost'
+                disabled={actionsDisabled}
+                onClick={() => openSourceDialog('manual')}
+              >
+                <RotateCcw data-icon='inline-start' />
+                切换回手动
+              </Button>
+            </>
+          ) : null}
+          <Button
+            type='button'
+            variant='ghost'
+            size='sm'
+            className='ml-auto'
+            onClick={() => void sourceQuery.refetch()}
+          >
+            <RefreshCw data-icon='inline-start' />
+            刷新
+          </Button>
+        </CardFooter>
+      </Card>
+
+      <PagesSourceDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        projectId={projectId}
+        source={source}
+        initialMode={dialogMode}
+      />
+    </>
+  );
+}
@@ -0,0 +1,376 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldTitle,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { Spinner } from '@/components/ui/spinner';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import {
+  type PagesRemoteNetworkPolicy,
+  type PagesSource,
+  PagesService,
+} from '@/lib/services/openflare';
+
+import {
+  deploymentsQueryKey,
+  projectQueryKey,
+  projectsQueryKey,
+  sourceQueryKey,
+} from '../../components/pages-utils';
+
+type SourceMode = 'manual' | 'remote_url';
+type Confirmation = 'trusted_internal' | 'manual' | null;
+
+interface PagesSourceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: number;
+  source: PagesSource;
+  initialMode?: SourceMode;
+}
+
+export function PagesSourceDialog({
+  open,
+  onOpenChange,
+  projectId,
+  source,
+  initialMode,
+}: PagesSourceDialogProps) {
+  const queryClient = useQueryClient();
+  const [mode, setMode] = useState<SourceMode>('manual');
+  const [networkPolicy, setNetworkPolicy] =
+    useState<PagesRemoteNetworkPolicy>('public');
+  const [replaceURL, setReplaceURL] = useState(false);
+  const [remoteURL, setRemoteURL] = useState('');
+  const [urlError, setURLError] = useState('');
+  const [confirmation, setConfirmation] = useState<Confirmation>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const nextMode =
+      initialMode ??
+      (source.source_type === 'remote_url' ? 'remote_url' : 'manual');
+    setMode(nextMode);
+    setNetworkPolicy(
+      source.source_type === 'remote_url'
+        ? source.remote_network_policy
+        : 'public',
+    );
+    setReplaceURL(source.source_type !== 'remote_url');
+    setRemoteURL('');
+    setURLError('');
+    setConfirmation(null);
+  }, [initialMode, open, source]);
+
+  const invalidateSourceState = async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: sourceQueryKey(projectId) }),
+      queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+      queryClient.invalidateQueries({
+        queryKey: deploymentsQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+    ]);
+  };
+
+  const updateMutation = useMutation({
+    mutationFn: () =>
+      PagesService.updateSource(projectId, {
+        source_type: 'remote_url',
+        remote_url_set: replaceURL,
+        remote_url: replaceURL ? remoteURL.trim() : '',
+        remote_network_policy: networkPolicy,
+      }),
+    onSuccess: async (result) => {
+      queryClient.setQueryData(sourceQueryKey(projectId), result.source);
+      await invalidateSourceState();
+      toast.success('部署源已更新');
+      if (result.warning) toast.warning(result.warning);
+      setConfirmation(null);
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '部署源更新失败');
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => PagesService.deleteSource(projectId),
+    onSuccess: async (manualSource) => {
+      queryClient.setQueryData(sourceQueryKey(projectId), manualSource);
+      await invalidateSourceState();
+      toast.success('已切换回手动部署');
+      setConfirmation(null);
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : '切换失败');
+    },
+  });
+
+  const isPending = updateMutation.isPending || deleteMutation.isPending;
+
+  const submitRemote = () => {
+    if (replaceURL) {
+      const value = remoteURL.trim();
+      if (!value) {
+        setURLError('请输入 Remote URL');
+        return;
+      }
+      try {
+        const parsed = new URL(value);
+        if (!['http:', 'https:'].includes(parsed.protocol)) throw new Error();
+      } catch {
+        setURLError('请输入有效的 HTTP(S) URL');
+        return;
+      }
+    }
+    setURLError('');
+    if (networkPolicy === 'trusted_internal') {
+      setConfirmation('trusted_internal');
+      return;
+    }
+    updateMutation.mutate();
+  };
+
+  const handleSubmit = () => {
+    if (mode === 'manual') {
+      if (source.source_type === 'manual') {
+        onOpenChange(false);
+      } else {
+        setConfirmation('manual');
+      }
+      return;
+    }
+    submitRemote();
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (!isPending) onOpenChange(nextOpen);
+        }}
+      >
+        <DialogContent className='sm:max-w-xl'>
+          <DialogHeader>
+            <DialogTitle>部署源设置</DialogTitle>
+            <DialogDescription>
+              手动部署与 Remote URL
+              各自保持独立配置；后续仓库构建来源会作为新的来源类型接入。
+            </DialogDescription>
+          </DialogHeader>
+
+          <FieldGroup>
+            <Field>
+              <FieldTitle id='pages-source-mode'>来源类型</FieldTitle>
+              <ToggleGroup
+                type='single'
+                variant='outline'
+                value={mode}
+                aria-labelledby='pages-source-mode'
+                className='grid w-full grid-cols-2'
+                onValueChange={(value) => {
+                  if (value === 'manual' || value === 'remote_url') {
+                    setMode(value);
+                  }
+                }}
+              >
+                <ToggleGroupItem value='manual' className='w-full'>
+                  手动部署
+                </ToggleGroupItem>
+                <ToggleGroupItem value='remote_url' className='w-full'>
+                  Remote URL
+                </ToggleGroupItem>
+              </ToggleGroup>
+              <FieldDescription>
+                手动部署由管理员上传本地包；Remote URL 通过显式同步下载并发布。
+              </FieldDescription>
+            </Field>
+
+            {mode === 'manual' ? (
+              <Field>
+                <FieldLabel>手动部署</FieldLabel>
+                <div className='rounded-lg border bg-muted/20 p-4 text-sm text-muted-foreground'>
+                  保留现有部署与当前生产版本，后续通过“上传部署包”创建新部署。
+                </div>
+              </Field>
+            ) : (
+              <>
+                <Field data-invalid={Boolean(urlError)}>
+                  <FieldLabel htmlFor='pages-remote-url'>Remote URL</FieldLabel>
+                  {source.source_type === 'remote_url' && !replaceURL ? (
+                    <div className='flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between'>
+                      <code className='min-w-0 truncate text-xs'>
+                        {source.display_url}
+                      </code>
+                      <Button
+                        type='button'
+                        variant='outline'
+                        size='sm'
+                        onClick={() => {
+                          setReplaceURL(true);
+                          setRemoteURL('');
+                        }}
+                      >
+                        更换地址
+                      </Button>
+                    </div>
+                  ) : (
+                    <Input
+                      id='pages-remote-url'
+                      type='url'
+                      placeholder='https://artifacts.example.com/site.zip?token=...'
+                      value={remoteURL}
+                      aria-invalid={Boolean(urlError)}
+                      autoComplete='off'
+                      onChange={(event) => {
+                        setRemoteURL(event.target.value);
+                        setURLError('');
+                      }}
+                    />
+                  )}
+                  <FieldDescription>
+                    {urlError ||
+                      (replaceURL
+                        ? '保存后不会回显原始地址或 query token。'
+                        : '界面只显示脱敏地址；留空表示保留当前地址。')}
+                  </FieldDescription>
+                  {source.source_type === 'remote_url' && replaceURL ? (
+                    <Button
+                      type='button'
+                      variant='ghost'
+                      size='sm'
+                      className='self-start'
+                      onClick={() => {
+                        setReplaceURL(false);
+                        setRemoteURL('');
+                        setURLError('');
+                      }}
+                    >
+                      保留当前地址
+                    </Button>
+                  ) : null}
+                </Field>
+
+                <Field>
+                  <FieldTitle id='pages-network-policy'>网络策略</FieldTitle>
+                  <ToggleGroup
+                    type='single'
+                    variant='outline'
+                    value={networkPolicy}
+                    aria-labelledby='pages-network-policy'
+                    className='grid w-full grid-cols-2'
+                    onValueChange={(value) => {
+                      if (value === 'public' || value === 'trusted_internal') {
+                        setNetworkPolicy(value);
+                      }
+                    }}
+                  >
+                    <ToggleGroupItem value='public' className='w-full'>
+                      公网安全模式
+                    </ToggleGroupItem>
+                    <ToggleGroupItem
+                      value='trusted_internal'
+                      className='w-full'
+                    >
+                      受信内网模式
+                    </ToggleGroupItem>
+                  </ToggleGroup>
+                  <FieldDescription>
+                    {networkPolicy === 'public'
+                      ? '阻止内网地址、代理与不安全 TLS。'
+                      : '允许访问内网地址与自签名证书，仅用于可信来源。'}
+                  </FieldDescription>
+                </Field>
+              </>
+            )}
+          </FieldGroup>
+
+          <DialogFooter>
+            <Button
+              type='button'
+              variant='outline'
+              disabled={isPending}
+              onClick={() => onOpenChange(false)}
+            >
+              取消
+            </Button>
+            <Button type='button' disabled={isPending} onClick={handleSubmit}>
+              {isPending ? <Spinner data-icon='inline-start' /> : null}
+              {mode === 'manual' ? '使用手动部署' : '保存 Remote 来源'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog
+        open={confirmation !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen && !isPending) setConfirmation(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {confirmation === 'manual'
+                ? '切换回手动部署'
+                : '启用受信内网模式'}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {confirmation === 'manual'
+                ? '当前来源配置将被删除，但已有部署与当前生产版本会保留。'
+                : '该模式允许访问私有网络并接受自签名证书。请确认此地址属于可信内部来源，且不会被非可信用户控制。'}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isPending}>取消</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={isPending}
+              onClick={(event) => {
+                event.preventDefault();
+                if (confirmation === 'manual') {
+                  deleteMutation.mutate();
+                } else if (confirmation === 'trusted_internal') {
+                  updateMutation.mutate();
+                }
+              }}
+            >
+              {isPending ? <Spinner data-icon='inline-start' /> : null}
+              确认
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}