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

新增部署源配置与运行态模型、安全下载、租约续期、原子激活和失败补偿。接入内部任务与脱敏前端交互，并阻止数据库 Trace 和日志展开敏感查询参数。
2026-10-13 18:36:37 +08:00 · 2026-07-19 17:36:51 +08:00
parent 4e8ec23264
commit 38b0516937
58 changed files with 9858 additions and 1075 deletions
@@ -2,7 +2,7 @@

 import { useRef, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Link2, Loader2, UploadCloud } from 'lucide-react';
+import { UploadCloud } from 'lucide-react';
 import { toast } from 'sonner';

 import { Button } from '@/components/ui/button';
@@ -14,10 +14,14 @@ import {
  DialogHeader,
  DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from '@/components/ui/field';
 import { Progress } from '@/components/ui/progress';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Spinner } from '@/components/ui/spinner';
 import { PagesService } from '@/lib/services/openflare';
 import { cn } from '@/lib/utils';

@@ -46,52 +50,51 @@ const PAGES_PACKAGE_EXTENSIONS = [

 function isSupportedPagesPackage(fileName: string) {
  const lower = fileName.toLowerCase();
-  return PAGES_PACKAGE_EXTENSIONS.some((ext) => lower.endsWith(ext));
+  return PAGES_PACKAGE_EXTENSIONS.some((extension) =>
+    lower.endsWith(extension),
+  );
+}
+
+export function pagesEntryPath(rootDir: string, entryFile: string) {
+  const root = rootDir.trim().replace(/^\/+|\/+$/g, '');
+  const entry = entryFile.trim().replace(/^\/+/, '');
+  return root ? `${root}/${entry}` : entry;
 }

 interface DeploymentUploadDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  projectId: number;
+  rootDir: string;
+  entryFile: string;
 }

 export function DeploymentUploadDialog({
  open,
  onOpenChange,
  projectId,
+  rootDir,
+  entryFile,
 }: DeploymentUploadDialogProps) {
  const queryClient = useQueryClient();
  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [mode, setMode] = useState<'file' | 'url'>('file');
  const [file, setFile] = useState<File | null>(null);
-  const [packageURL, setPackageURL] = useState('');
  const [isDragActive, setIsDragActive] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<number | null>(null);

  const resetForm = () => {
    setFile(null);
-    setPackageURL('');
    setIsDragActive(false);
    setUploadProgress(null);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

-  const handleClose = (nextOpen: boolean) => {
+  const handleOpenChange = (nextOpen: boolean) => {
    if (!nextOpen) resetForm();
    onOpenChange(nextOpen);
  };

-  const invalidate = async () => {
-    await Promise.all([
-      queryClient.invalidateQueries({
-        queryKey: deploymentsQueryKey(projectId),
-      }),
-      queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
-      queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
-    ]);
-  };
-
-  const uploadFileMutation = useMutation({
+  const uploadMutation = useMutation({
    mutationFn: () => {
      if (!file) throw new Error('请选择部署包');
      return PagesService.uploadDeployment(projectId, {
@@ -101,8 +104,14 @@ export function DeploymentUploadDialog({
    },
    onSuccess: async () => {
      toast.success('部署包上传成功');
-      await invalidate();
-      handleClose(false);
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: deploymentsQueryKey(projectId),
+        }),
+        queryClient.invalidateQueries({ queryKey: projectQueryKey(projectId) }),
+        queryClient.invalidateQueries({ queryKey: projectsQueryKey }),
+      ]);
+      handleOpenChange(false);
    },
    onError: (error) => {
      toast.error(error instanceof Error ? error.message : '上传失败');
@@ -110,27 +119,6 @@ export function DeploymentUploadDialog({
    },
  });

-  const uploadURLMutation = useMutation({
-    mutationFn: () => {
-      const url = packageURL.trim();
-      if (!url) throw new Error('请填写部署包下载链接');
-      if (!/^https?:\/\//i.test(url)) {
-        throw new Error('链接必须以 http:// 或 https:// 开头');
-      }
-      return PagesService.uploadDeploymentFromURL(projectId, { url });
-    },
-    onSuccess: async () => {
-      toast.success('已从链接下载并创建部署');
-      await invalidate();
-      handleClose(false);
-    },
-    onError: (error) => {
-      toast.error(error instanceof Error ? error.message : '从链接导入失败');
-    },
-  });
-
-  const isPending = uploadFileMutation.isPending || uploadURLMutation.isPending;
-
  const handleFileSelect = (selected: File | null) => {
    if (!selected) return;
    if (!isSupportedPagesPackage(selected.name)) {
@@ -140,150 +128,112 @@ export function DeploymentUploadDialog({
    setFile(selected);
  };

-  const handleSubmit = () => {
-    if (mode === 'file') {
-      uploadFileMutation.mutate();
-      return;
-    }
-    uploadURLMutation.mutate();
-  };
-
-  const canSubmit =
-    mode === 'file' ? Boolean(file) : packageURL.trim().length > 0;
-
  return (
-    <Dialog open={open} onOpenChange={handleClose}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className='sm:max-w-lg'>
        <DialogHeader>
          <DialogTitle>上传部署包</DialogTitle>
          <DialogDescription>
-            支持本地上传或从 URL 下载静态资源压缩包（zip / tar.gz / tar.xz /
-            tar.bz2 / tar / 7z），创建部署后可在列表中激活。
+            上传不可变的静态资源压缩包，完成后可在部署历史中激活。
          </DialogDescription>
        </DialogHeader>

-        <Tabs
-          value={mode}
-          onValueChange={(value) => setMode(value as 'file' | 'url')}
-          className='w-full'
-        >
-          <TabsList className='grid w-full grid-cols-2'>
-            <TabsTrigger value='file'>本地上传</TabsTrigger>
-            <TabsTrigger value='url'>从 URL 下载</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value='file' className='space-y-4 mt-4'>
-            <div
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor='pages-package'>本地部署包</FieldLabel>
+            <button
+              type='button'
              className={cn(
-                'rounded-lg border border-dashed p-8 text-center transition',
+                'flex min-h-52 w-full flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8 text-center transition-colors',
                isDragActive ? 'border-primary bg-primary/5' : 'bg-muted/20',
              )}
-              onDragEnter={(e) => {
-                e.preventDefault();
+              onClick={() => fileInputRef.current?.click()}
+              onDragEnter={(event) => {
+                event.preventDefault();
                setIsDragActive(true);
              }}
-              onDragOver={(e) => e.preventDefault()}
-              onDragLeave={(e) => {
-                e.preventDefault();
+              onDragOver={(event) => event.preventDefault()}
+              onDragLeave={(event) => {
+                event.preventDefault();
                setIsDragActive(false);
              }}
-              onDrop={(e) => {
-                e.preventDefault();
+              onDrop={(event) => {
+                event.preventDefault();
                setIsDragActive(false);
-                handleFileSelect(e.dataTransfer.files[0] ?? null);
+                handleFileSelect(event.dataTransfer.files[0] ?? null);
              }}
            >
-              <UploadCloud className='size-8 mx-auto text-muted-foreground' />
-              <p className='mt-3 text-sm'>拖拽部署包到此处，或点击选择文件</p>
-              <p className='mt-1 text-xs text-muted-foreground'>
-                支持 zip、tar.gz、tar.xz、tar.bz2、tar、7z
-              </p>
-              <Button
-                type='button'
-                variant='outline'
-                size='sm'
-                className='mt-3'
-                onClick={() => fileInputRef.current?.click()}
-              >
-                选择文件
-              </Button>
-              <input
-                ref={fileInputRef}
-                type='file'
-                accept={PAGES_PACKAGE_ACCEPT}
-                className='hidden'
-                onChange={(e) => handleFileSelect(e.target.files?.[0] ?? null)}
-              />
-            </div>
-
+              <UploadCloud className='size-8 text-muted-foreground' />
+              <span className='text-sm font-medium'>
+                拖拽部署包到此处，或点击选择文件
+              </span>
+              <span className='text-xs text-muted-foreground'>
+                zip、tar.gz、tar.xz、tar.bz2、tar、7z
+              </span>
+            </button>
+            <input
+              ref={fileInputRef}
+              id='pages-package'
+              type='file'
+              accept={PAGES_PACKAGE_ACCEPT}
+              className='hidden'
+              onChange={(event) =>
+                handleFileSelect(event.target.files?.[0] ?? null)
+              }
+            />
            {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}
+              <FieldDescription>
+                已选择 {file.name}（{formatBytes(file.size)}）
+              </FieldDescription>
+            ) : (
+              <FieldDescription>请选择一个受支持的压缩包。</FieldDescription>
+            )}
+          </Field>

-            {uploadProgress !== null ? (
-              <div className='space-y-1.5'>
-                <div className='flex justify-between text-xs text-muted-foreground'>
-                  <span>
-                    {uploadProgress >= 100 ? '服务端处理中' : '上传进度'}
-                  </span>
-                  <span>
-                    {uploadProgress >= 100 ? '请稍候' : `${uploadProgress}%`}
-                  </span>
-                </div>
-                <Progress
-                  value={uploadProgress >= 100 ? 100 : uploadProgress}
-                />
-              </div>
-            ) : null}
-          </TabsContent>
-
-          <TabsContent value='url' className='space-y-4 mt-4'>
-            <div className='space-y-2'>
-              <Label htmlFor='package-url'>部署包下载链接</Label>
-              <div className='relative'>
-                <Link2 className='absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground' />
-                <Input
-                  id='package-url'
-                  className='pl-9'
-                  placeholder='https://example.com/dist/site.zip'
-                  value={packageURL}
-                  onChange={(e) => setPackageURL(e.target.value)}
-                  disabled={isPending}
-                />
-              </div>
-              <p className='text-xs text-muted-foreground'>
-                服务端将使用浏览器环境请求头从该链接下载压缩包，支持内网地址与自签证书
-                HTTPS。
-              </p>
+          <Field>
+            <FieldLabel>部署入口</FieldLabel>
+            <div className='rounded-md border bg-muted/20 px-3 py-2 font-mono text-sm'>
+              {pagesEntryPath(rootDir, entryFile)}
            </div>
-          </TabsContent>
-        </Tabs>
+            <FieldDescription>
+              入口来自项目设置；部署包上传不会覆盖该配置。
+            </FieldDescription>
+          </Field>

-        <div className='space-y-1.5'>
-          <Label htmlFor='entryFile'>入口文件</Label>
-          <Input id='entryFile' defaultValue='index.html' disabled />
-        </div>
+          {uploadProgress !== null ? (
+            <Field>
+              <div className='flex items-center justify-between text-xs text-muted-foreground'>
+                <span>
+                  {uploadProgress >= 100 ? '服务端处理中' : '上传进度'}
+                </span>
+                <span>
+                  {uploadProgress >= 100 ? '请稍候' : `${uploadProgress}%`}
+                </span>
+              </div>
+              <Progress value={Math.min(uploadProgress, 100)} />
+            </Field>
+          ) : null}
+        </FieldGroup>

        <DialogFooter>
-          <Button variant='outline' onClick={() => handleClose(false)}>
+          <Button
+            type='button'
+            variant='outline'
+            onClick={() => handleOpenChange(false)}
+          >
            取消
          </Button>
-          <Button onClick={handleSubmit} disabled={!canSubmit || isPending}>
-            {isPending ? (
-              <>
-                <Loader2 className='size-4 animate-spin mr-1' />
-                {mode === 'url' ? '下载中...' : '上传中...'}
-              </>
-            ) : mode === 'url' ? (
-              '下载并创建部署'
+          <Button
+            type='button'
+            disabled={!file || uploadMutation.isPending}
+            onClick={() => uploadMutation.mutate()}
+          >
+            {uploadMutation.isPending ? (
+              <Spinner data-icon='inline-start' />
            ) : (
-              '上传并创建部署'
+              <UploadCloud data-icon='inline-start' />
            )}
+            {uploadMutation.isPending ? '上传中...' : '上传并创建部署'}
          </Button>
        </DialogFooter>
      </DialogContent>
@@ -17,6 +17,10 @@ export function deploymentsQueryKey(projectId: number) {
  return ['openflare', 'pages', 'deployments', projectId] as const;
 }

+export function sourceQueryKey(projectId: number) {
+  return ['openflare', 'pages', 'source', projectId] as const;
+}
+
 export function deploymentFilesQueryKey(
  projectId: number,
  deploymentId: number,