@nocobase/client-v2 2.3.0-alpha.1 → 3.0.0-alpha.2

package/src/components/AttachmentUpload.tsx

@@ -0,0 +1,275 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { css, cx } from '@emotion/css';
+import { Upload, message } from 'antd';
+import type { UploadFile } from 'antd';
+import mime from 'mime';
+import match from 'mime-match';
+import type { RcFile, UploadRequestOption } from 'rc-upload/lib/interface';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useApp } from '../hooks/useApp';
+
+export type UploadedAttachment = {
+  id?: number;
+  title?: string;
+  filename?: string;
+  url?: string;
+};
+
+export type AttachmentStorageRules = {
+  size?: number;
+  mimetype?: string | string[];
+};
+
+/**
+ * 读取默认附件存储的上传限制。
+ *
+ * 校验交给存储自身的配置（大小、mimetype），而不是在每个调用点各写一套硬编码规则。
+ *
+ * @returns {AttachmentStorageRules | null} 存储规则，取不到时为 null
+ */
+export function useAttachmentStorageRules() {
+  const app = useApp();
+  const [storageRules, setStorageRules] = useState<AttachmentStorageRules | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const loadStorageRules = async () => {
+      try {
+        const attachmentsCollection = app.dataSourceManager?.getCollection?.('main', 'attachments');
+        const storageName = attachmentsCollection?.getOption?.('storage');
+
+        if (!storageName) {
+          if (mounted) {
+            setStorageRules(null);
+          }
+          return;
+        }
+
+        const response = await app.apiClient.request({
+          url: `storages:getBasicInfo/${storageName}`,
+          skipNotify: true,
+        });
+
+        if (mounted) {
+          setStorageRules(response?.data?.data?.rules || null);
+        }
+      } catch (error) {
+        if (mounted) {
+          setStorageRules(null);
+        }
+      }
+    };
+
+    loadStorageRules().catch(() => {
+      if (mounted) {
+        setStorageRules(null);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [app]);
+
+  return storageRules;
+}
+
+export type AttachmentUploadProps = {
+  value?: UploadedAttachment | null;
+  onChange?: (value: UploadedAttachment | null) => void;
+  /** 卡片尺寸；`fit` 对应 CSS object-fit */
+  preview?: {
+    width?: number;
+    height?: number;
+    fit?: 'contain' | 'cover';
+  };
+  /** 在存储规则之外再收窄可选文件类型，例如只收图片 */
+  accept?: string;
+  /** 上传卡片里 `+` 下方的文字 */
+  uploadText?: string;
+  disabled?: boolean;
+};
+
+const DEFAULT_PREVIEW = { width: 104, height: 104, fit: 'contain' as const };
+
+/**
+ * 附件上传控件。
+ *
+ * 受控组件，值就是 `attachments:create` 返回的附件对象，可直接挂在 `Form.Item` 上。
+ * 外观沿用附件字段的原生形态：一张 picture-card，删除在卡片自身的悬浮操作里，不额外摆按钮。
+ * 上传前按默认存储的规则校验大小与 mimetype，与业务表单里的附件字段保持同一套限制。
+ */
+export const AttachmentUpload: React.FC<AttachmentUploadProps> = (props) => {
+  const { value, onChange, preview, accept, uploadText, disabled } = props;
+  const app = useApp();
+  const { t } = useTranslation();
+  const [uploading, setUploading] = useState(false);
+  const storageRules = useAttachmentStorageRules();
+  const previewConfig = { ...DEFAULT_PREVIEW, ...preview };
+
+  const acceptValue = useMemo(() => {
+    if (accept) {
+      return accept;
+    }
+    const rule = storageRules?.mimetype;
+    if (!rule) {
+      return undefined;
+    }
+    return Array.isArray(rule) ? rule.join(',') : rule;
+  }, [accept, storageRules?.mimetype]);
+
+  const beforeUpload = useCallback(
+    async (file: RcFile) => {
+      const sizeLimit = storageRules?.size;
+
+      if (typeof sizeLimit === 'number' && sizeLimit > 0 && file.size > sizeLimit) {
+        message.error(t('File size exceeds the limit'));
+        return Upload.LIST_IGNORE;
+      }
+
+      const mimetypeRule = storageRules?.mimetype;
+      const normalizedRule = Array.isArray(mimetypeRule)
+        ? mimetypeRule.join(',').trim()
+        : `${mimetypeRule || ''}`.trim();
+      const acceptRule = accept?.trim();
+      const rules = [normalizedRule, acceptRule].filter((rule) => rule && rule !== '*');
+
+      if (!rules.length) {
+        return file;
+      }
+
+      // 有些浏览器对不常见扩展名给不出 type，这里按扩展名补一次再判断。
+      let targetFile = file;
+      if (!targetFile.type) {
+        const extname = targetFile.name?.match(/\.[^.]+$/)?.[0];
+        if (extname) {
+          targetFile = new File([targetFile], targetFile.name, {
+            type: mime.getType(extname) || 'application/octet-stream',
+            lastModified: targetFile.lastModified,
+          }) as RcFile;
+        }
+      }
+
+      const isAllowed = rules.every((rule) =>
+        rule
+          .split(',')
+          .filter(Boolean)
+          .some((item) => match(targetFile.type)(item.trim())),
+      );
+
+      if (!isAllowed) {
+        message.error(t('File type is not allowed'));
+        return Upload.LIST_IGNORE;
+      }
+
+      return targetFile;
+    },
+    [accept, storageRules?.mimetype, storageRules?.size, t],
+  );
+
+  const handleUpload = useCallback(
+    async (options: UploadRequestOption) => {
+      const { file, onError, onSuccess } = options;
+      setUploading(true);
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file as RcFile);
+
+        const response = await app.apiClient.request({
+          url: 'attachments:create',
+          method: 'post',
+          data: formData,
+        });
+
+        onChange?.(response?.data?.data || null);
+        onSuccess?.(response?.data, file as RcFile);
+      } catch (error) {
+        onError?.(error as Error);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [app.apiClient, onChange],
+  );
+
+  const fileList = useMemo<UploadFile[]>(() => {
+    if (!value?.url) {
+      return [];
+    }
+
+    return [
+      {
+        uid: `${value.id ?? value.url}`,
+        name: value.title || value.filename || '',
+        status: 'done',
+        url: value.url,
+        thumbUrl: value.url,
+      },
+    ];
+  }, [value?.filename, value?.id, value?.title, value?.url]);
+
+  const handlePreview = useCallback((file: UploadFile) => {
+    if (file.url) {
+      window.open(file.url, '_blank', 'noopener,noreferrer');
+    }
+  }, []);
+
+  const handleRemove = useCallback(() => {
+    onChange?.(null);
+    return true;
+  }, [onChange]);
+
+  // picture-card 的卡片尺寸写死在 104×104，这里按调用方要的比例覆盖掉。
+  const sizeClassName = useMemo(
+    () => css`
+      .ant-upload.ant-upload-select,
+      .ant-upload-list-item-container {
+        width: ${previewConfig.width}px !important;
+        height: ${previewConfig.height}px !important;
+      }
+
+      .ant-upload-list-item-thumbnail img {
+        object-fit: ${previewConfig.fit} !important;
+      }
+    `,
+    [previewConfig.fit, previewConfig.height, previewConfig.width],
+  );
+
+  return (
+    <Upload
+      accept={acceptValue}
+      beforeUpload={beforeUpload}
+      className={cx('nb-attachment-upload', sizeClassName)}
+      customRequest={handleUpload}
+      // 上传期间一并禁用：否则可以在第一个请求返回前再选一个文件，
+      // 两个请求谁后返回谁覆盖 onChange，最终留下的不一定是用户最后选的那张。
+      disabled={disabled || uploading}
+      fileList={fileList}
+      listType="picture-card"
+      maxCount={1}
+      onPreview={handlePreview}
+      onRemove={handleRemove}
+    >
+      {fileList.length ? null : (
+        <div>
+          {uploading ? <LoadingOutlined /> : <PlusOutlined />}
+          <div style={{ marginTop: 8 }}>{uploadText || t('Upload')}</div>
+        </div>
+      )}
+    </Upload>
+  );
+};
+
+export default AttachmentUpload;

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -11,7 +11,7 @@ import { FileImageOutlined, LeftOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { Button, message, theme } from 'antd';
 import { Html5Qrcode } from 'html5-qrcode';
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ScanBox } from './ScanBox';
@@ -26,6 +26,14 @@ type CodeScannerProps = {
 };
 
 const MAX_CODE_IMAGE_SIZE = 10 * 1024 * 1024;
+const SCANNER_RENDER_WIDTH = 1280;
+
+function getViewportSize() {
+  return {
+    width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+    height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
+  };
+}
 
 function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess }: CodeScannerProps) {
   const { t } = useTranslation();
@@ -34,16 +42,15 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   const scannerElementId = `code-scanner-${inputId}`;
   const imgUploaderRef = useRef<HTMLInputElement>(null);
   const [cameraAvailable, setCameraAvailable] = useState(false);
+  const [scannerSize, setScannerSize] = useState({ width: 0, height: 0 });
+  const [viewport, setViewport] = useState(getViewportSize);
 
-  const viewport = useMemo(() => {
-    const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-    return { width, height };
-  }, []);
-  const scanBoxSize = useMemo(
-    () => getCodeScanBoxSize(viewport.width, viewport.height),
-    [viewport.height, viewport.width],
-  );
+  const previewScale = scannerSize.width
+    ? Math.max(viewport.width / scannerSize.width, viewport.height / scannerSize.height)
+    : Math.min(1, viewport.width / SCANNER_RENDER_WIDTH);
+  const visibleScanBoxSize = scannerSize.width
+    ? getCodeScanBoxSize(viewport.width, viewport.height)
+    : { width: 0, height: 0 };
 
   const showScanFailure = useCallback(() => {
     message.error(t('Code recognition failed, please scan again'));
@@ -76,12 +83,18 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     enabled: visible && cameraAvailable,
     elementId: scannerElementId,
     formatsToSupport,
-    scanBoxSize,
+    onScannerSizeChanged: setScannerSize,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
     onCameraStartFailure: showCameraStartFailure,
   });
 
+  useEffect(() => {
+    const handleResize = () => setViewport(getViewportSize());
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   useEffect(() => {
     if (!visible) {
       return;
@@ -152,18 +165,22 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     inset: 0;
     overflow: hidden;
   `;
+  const scannerSurfaceClass = css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: center;
+  `;
   const scannerClass = css`
     position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    line-height: 0;
 
     video {
-      position: absolute !important;
-      inset: 0 !important;
       width: 100% !important;
-      height: 100% !important;
-      object-fit: cover !important;
+      height: auto !important;
+      max-width: none !important;
+      display: block !important;
     }
 
     #qr-shaded-region {
@@ -191,26 +208,36 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   return (
     <div className={rootClass}>
       <div className={scannerWrapperClass}>
-        <div id={scannerElementId} className={scannerClass} />
+        <div
+          className={scannerSurfaceClass}
+          style={{
+            width: `${SCANNER_RENDER_WIDTH}px`,
+            transform: `translate(-50%, -50%) scale(${previewScale})`,
+          }}
+        >
+          <div id={scannerElementId} className={scannerClass} />
+        </div>
       </div>
+      {cameraAvailable && scannerSize.width > 0 && (
+        <ScanBox
+          style={{
+            position: 'fixed',
+            top: `${(viewport.height - visibleScanBoxSize.height) / 2}px`,
+            left: `${(viewport.width - visibleScanBoxSize.width) / 2}px`,
+            width: `${visibleScanBoxSize.width}px`,
+            height: `${visibleScanBoxSize.height}px`,
+          }}
+        />
+      )}
+      <Button
+        aria-label={t('Close')}
+        className={closeButtonClass}
+        icon={<LeftOutlined />}
+        type="text"
+        onClick={onClose}
+      />
       {cameraAvailable && (
         <>
-          <ScanBox
-            style={{
-              position: 'fixed',
-              top: `${(viewport.height - scanBoxSize.height) / 2}px`,
-              left: `${(viewport.width - scanBoxSize.width) / 2}px`,
-              width: `${scanBoxSize.width}px`,
-              height: `${scanBoxSize.height}px`,
-            }}
-          />
-          <Button
-            aria-label={t('Close')}
-            className={closeButtonClass}
-            icon={<LeftOutlined />}
-            type="text"
-            onClick={onClose}
-          />
           <Button className={albumClass} icon={<FileImageOutlined />} type="text" onClick={handleImageButtonClick}>
             {t('Album')}
           </Button>

package/src/components/form/ScanInput/__tests__/CodeScanner.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { act, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { CodeScanner } from '../CodeScanner';
+
+const mocks = vi.hoisted(() => ({
+  getCameras: vi.fn().mockResolvedValue([{ id: 'rear-camera' }]),
+}));
+
+vi.mock('html5-qrcode', () => ({
+  Html5Qrcode: {
+    getCameras: mocks.getCameras,
+  },
+  Html5QrcodeScannerState: {
+    PAUSED: 3,
+    SCANNING: 2,
+  },
+  Html5QrcodeSupportedFormats: {
+    CODABAR: 2,
+    CODE_128: 5,
+    CODE_39: 3,
+    CODE_93: 4,
+    DATA_MATRIX: 6,
+    EAN_13: 9,
+    EAN_8: 10,
+    ITF: 8,
+    PDF_417: 11,
+    QR_CODE: 0,
+    UPC_A: 14,
+    UPC_E: 15,
+  },
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../useCodeScanner', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../useCodeScanner')>();
+  const ReactModule = await import('react');
+
+  return {
+    ...actual,
+    useCodeScanner: ({
+      enabled,
+      onScannerSizeChanged,
+    }: {
+      enabled: boolean;
+      onScannerSizeChanged?: (size: { width: number; height: number }) => void;
+    }) => {
+      ReactModule.useEffect(() => {
+        if (enabled) {
+          onScannerSizeChanged?.({ width: 1280, height: 720 });
+        }
+      }, [enabled, onScannerSizeChanged]);
+
+      return { startScanFile: vi.fn() };
+    },
+  };
+});
+
+describe('CodeScanner', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('keeps the camera preview covering portrait and landscape viewports', async () => {
+    let viewportWidth = 390;
+    let viewportHeight = 844;
+    vi.spyOn(window, 'innerWidth', 'get').mockImplementation(() => viewportWidth);
+    vi.spyOn(window, 'innerHeight', 'get').mockImplementation(() => viewportHeight);
+
+    render(<CodeScanner visible onClose={() => undefined} onScanSuccess={() => undefined} />);
+
+    await waitFor(() => expect(document.getElementById('code-scan-box')).toBeInTheDocument());
+
+    const scannerElement = document.querySelector<HTMLElement>('[id^="code-scanner-"]');
+    const scannerSurface = scannerElement?.parentElement;
+    const scanBox = document.getElementById('code-scan-box');
+    expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 720})`);
+    expect(scanBox).toHaveStyle({ width: '351px', height: '540px' });
+
+    viewportWidth = 844;
+    viewportHeight = 390;
+    act(() => window.dispatchEvent(new Event('resize')));
+
+    await waitFor(() => {
+      expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 1280})`);
+      expect(scanBox).toHaveStyle({ width: '759px', height: '273px' });
+    });
+  });
+});