@nocobase/client-v2 2.2.0-alpha.11 → 2.2.0-alpha.12

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/index.ts

@@ -8,6 +8,7 @@
  */
 
 export * from './AppComponents';
+export * from './AttachmentUpload';
 export * from './BlankComponent';
 export * from './category-tabs';
 export * from './form/table/dnd';

package/src/flow/actions/__tests__/actionLinkageRules.forkProps.test.ts

@@ -11,7 +11,7 @@ import { FlowEngine } from '@nocobase/flow-engine';
 import { describe, expect, it, vi } from 'vitest';
 import { ActionModel as ConfiguredActionModel } from '../../models/base/ActionModel';
 import { ActionModel } from '../../models/base/ActionModelCore';
-import { actionLinkageRules, linkageSetActionProps } from '../linkageRules';
+import { actionLinkageRules, linkageSetActionProps, updateLinkageRules } from '../linkageRules';
 
 class TestActionModel extends ActionModel {}
 
@@ -73,16 +73,180 @@ describe('action linkage rules on action forks', () => {
     });
 
     expect(fork.getProps().title).toBe('Updated');
-    expect(fork.serialize().props.title).toBe('Updated');
+    expect(fork.serialize().props).toMatchObject({ title: 'Updated' });
+    expect(fork.serialize().props).not.toHaveProperty('disabled');
 
     const refreshedFork = master.createFork({ className: 'row-action' });
     expect(refreshedFork.getProps().title).toBe('Updated');
   });
 
+  it.each(['disable', 'delete'] as const)(
+    'restores a row action when linkage rules are %sd without persisting disabled',
+    async (change) => {
+      const engine = new FlowEngine();
+      engine.registerModels({ ConfiguredActionModel });
+      engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+
+      let savedData: ReturnType<ConfiguredActionModel['serialize']> | undefined;
+      engine.setModelRepository({
+        save: async (model) => {
+          savedData = model.serialize();
+          return savedData;
+        },
+      } as Parameters<FlowEngine['setModelRepository']>[0]);
+
+      const enabledRules = [
+        {
+          key: 'disable-edit',
+          enable: true,
+          condition: { logic: '$and', items: [] },
+          actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+        },
+      ];
+      const master = engine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: { title: 'Edit' },
+        stepParams: {
+          buttonSettings: {
+            linkageRules: { value: enabledRules },
+          },
+        },
+      });
+      const fork = master.createFork({ className: 'row-action' });
+
+      await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+      expect(fork.getProps().disabled).toBe(true);
+
+      const nextRules =
+        change === 'disable'
+          ? updateLinkageRules(enabledRules, (rules) => {
+              rules[0].enable = false;
+            })
+          : [];
+      fork.setStepParams('buttonSettings', 'linkageRules', { value: nextRules });
+      await fork.saveStepParams();
+      await fork.rerender();
+
+      expect(savedData).toBeDefined();
+      expect(savedData?.props).not.toHaveProperty('disabled');
+      expect(savedData?.stepParams.buttonSettings.linkageRules.value).toEqual(nextRules);
+      expect(fork.getProps().disabled).toBeUndefined();
+
+      const reloadedEngine = new FlowEngine();
+      reloadedEngine.registerModels({ ConfiguredActionModel });
+      reloadedEngine.registerActions({ actionLinkageRules, linkageSetActionProps });
+      const reloadedMaster = reloadedEngine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: savedData?.props,
+        stepParams: savedData?.stepParams,
+      });
+      const reloadedFork = reloadedMaster.createFork({ className: 'row-action' });
+
+      await reloadedFork.dispatchEvent('beforeRender', undefined, { useCache: false });
+      expect(reloadedFork.getProps().disabled).toBeUndefined();
+    },
+  );
+
+  it.each(['disabled', 'deleted'] as const)(
+    'ignores a historical disabled prop after the linkage rule is %s',
+    async (state) => {
+      const engine = new FlowEngine();
+      engine.registerModels({ ConfiguredActionModel });
+      engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+      const rules =
+        state === 'disabled'
+          ? [
+              {
+                key: 'disable-edit',
+                enable: false,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ]
+          : [];
+      const master = engine.createModel<ConfiguredActionModel>({
+        use: 'ConfiguredActionModel',
+        props: { title: 'Edit', disabled: true },
+        stepParams: {
+          buttonSettings: {
+            linkageRules: { value: rules },
+          },
+        },
+      });
+      const fork = master.createFork({ className: 'row-action' });
+
+      expect(master.getProps()).not.toHaveProperty('disabled');
+      await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+      expect(fork.getProps().disabled).toBeUndefined();
+    },
+  );
+
+  it('still applies an enabled linkage rule after dropping a historical disabled prop', async () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ ConfiguredActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const master = engine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: { title: 'Edit', disabled: true },
+      stepParams: {
+        buttonSettings: {
+          linkageRules: {
+            value: [
+              {
+                key: 'disable-edit',
+                enable: true,
+                condition: { logic: '$and', items: [] },
+                actions: [{ name: 'linkageSetActionProps', params: { value: 'disabled' } }],
+              },
+            ],
+          },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    expect(master.getProps()).not.toHaveProperty('disabled');
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+    expect(fork.getProps().disabled).toBe(true);
+  });
+
+  it('preserves a default disabled state as runtime-only state', async () => {
+    class DefaultDisabledActionModel extends ConfiguredActionModel {
+      defaultProps = { ...this.defaultProps, disabled: true };
+    }
+    const engine = new FlowEngine();
+    engine.registerModels({ DefaultDisabledActionModel });
+    engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const master = engine.createModel<DefaultDisabledActionModel>({
+      use: 'DefaultDisabledActionModel',
+      props: { title: 'Edit' },
+      stepParams: {
+        buttonSettings: {
+          linkageRules: { value: [] },
+        },
+      },
+    });
+    const fork = master.createFork({ className: 'row-action' });
+
+    await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
+
+    expect(fork.getProps().disabled).toBe(true);
+    expect(fork.serialize().props).not.toHaveProperty('disabled');
+  });
+
   it('updates a disabled row action title through the real beforeRender flow', async () => {
     const engine = new FlowEngine();
     engine.registerModels({ ConfiguredActionModel });
     engine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    let savedData: ReturnType<ConfiguredActionModel['serialize']> | undefined;
+    engine.setModelRepository({
+      save: async (model) => {
+        savedData = model.serialize();
+        return savedData;
+      },
+    } as Parameters<FlowEngine['setModelRepository']>[0]);
     const master = engine.createModel<ConfiguredActionModel>({
       use: 'ConfiguredActionModel',
       props: { title: 'Edit' },
@@ -107,9 +271,44 @@ describe('action linkage rules on action forks', () => {
     await fork.dispatchEvent('beforeRender', undefined, { useCache: false });
     expect(fork.getProps()).toMatchObject({ title: 'Edit', disabled: true });
 
-    master.setStepParams('buttonSettings', 'general', { title: 'Updated' });
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    fork.setStepParams('buttonSettings', 'general', { title: 'Updated' });
+    await fork.saveStepParams();
+    await fork.rerender();
 
+    expect(savedData?.props).not.toHaveProperty('disabled');
+    expect(savedData?.stepParams.buttonSettings.general.title).toBe('Updated');
     expect(fork.getProps()).toMatchObject({ title: 'Updated', disabled: true });
+
+    const reloadedEngine = new FlowEngine();
+    reloadedEngine.registerModels({ ConfiguredActionModel });
+    reloadedEngine.registerActions({ actionLinkageRules, linkageSetActionProps });
+    const reloadedMaster = reloadedEngine.createModel<ConfiguredActionModel>({
+      use: 'ConfiguredActionModel',
+      props: savedData?.props,
+      stepParams: savedData?.stepParams,
+    });
+    const reloadedFork = reloadedMaster.createFork({ className: 'row-action' });
+
+    await reloadedFork.dispatchEvent('beforeRender', undefined, { useCache: false });
+    expect(reloadedFork.getProps()).toMatchObject({ title: 'Updated', disabled: true });
+  });
+
+  it('creates a new rules value when disabling a linkage rule', () => {
+    const rules = [
+      {
+        key: 'disable-edit',
+        title: 'Linkage rule',
+        enable: true,
+        condition: { logic: '$and', items: [] },
+        actions: [],
+      },
+    ];
+    const nextRules = updateLinkageRules(rules, (next) => {
+      next[0].enable = false;
+    });
+
+    expect(nextRules).toEqual([expect.objectContaining({ key: 'disable-edit', enable: false })]);
+    expect(nextRules).not.toBe(rules);
+    expect(rules[0].enable).toBe(true);
   });
 });

package/src/flow/actions/linkageRules.tsx

@@ -68,6 +68,12 @@ interface LinkageRule {
   }[];
 }
 
+export function updateLinkageRules<T>(rules: T[], updater: (nextRules: T[]) => void): T[] {
+  const nextRules = _.cloneDeep(rules);
+  updater(nextRules);
+  return nextRules;
+}
+
 const previewValueForLog = (value: any) => {
   if (value == null) return value;
   const t = typeof value;
@@ -1500,13 +1506,26 @@ async function resolveLinkageRulesParamsPreservingRunJsScripts(ctx: FlowContext,
 }
 
 const LinkageRulesUI = observer(
-  (props: { readonly value: LinkageRule[]; supportedActions: string[]; title?: string }) => {
-    const { value: rules, supportedActions } = props;
+  (props: {
+    readonly value: LinkageRule[];
+    onChange?: (value: LinkageRule[]) => void;
+    supportedActions: string[];
+    title?: string;
+  }) => {
+    const { value: rules = [], onChange, supportedActions } = props;
     const ctx = useFlowContext();
     const flowEngine = useFlowEngine();
     const t = ctx.model.translate.bind(ctx.model);
     const assignPriorityTip = t('Assignment takes precedence over form field assignment');
 
+    const replaceRules = (updater: (nextRules: LinkageRule[]) => void) => {
+      if (onChange) {
+        onChange(updateLinkageRules(rules, updater));
+      } else {
+        updater(rules);
+      }
+    };
+
     // 创建新规则的默认值
     const createNewRule = (): LinkageRule => ({
       key: uid(),
@@ -1523,7 +1542,7 @@ const LinkageRulesUI = observer(
 
     // 删除规则
     const handleDeleteRule = (index: number) => {
-      rules.splice(index, 1);
+      replaceRules((nextRules) => nextRules.splice(index, 1));
     };
 
     // 上移规则
@@ -1562,7 +1581,9 @@ const LinkageRulesUI = observer(
 
     // 切换规则启用状态
     const handleToggleEnable = (index: number, enable: boolean) => {
-      rules[index].enable = enable;
+      replaceRules((nextRules) => {
+        nextRules[index].enable = enable;
+      });
     };
 
     // 获取可用的动作类型

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -18,7 +18,6 @@ import { theme as antdTheme, ConfigProvider, Grid, Popover } from 'antd';
 import { createStyles, createGlobalStyle } from 'antd-style';
 import React, { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import {
   AdminLayoutMenuModelRenderer,
@@ -35,7 +34,6 @@ import { ResetThemeTokenAndKeepAlgorithm } from './ResetThemeTokenAndKeepAlgorit
 import { PinnedPluginListLite } from './PinnedPluginListLite';
 import { useApplications } from './useApplications';
 import { useGlobalTheme, type CustomToken } from '../../../theme';
-import { useSystemSettings } from '../../system-settings';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 import {
   FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT,
@@ -44,60 +42,7 @@ import {
 } from './flowSettingsPreference';
 import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
-
-const className1 = css`
-  height: var(--nb-header-height);
-  margin-right: 4px;
-  display: inline-flex;
-  flex-shrink: 0;
-  color: #fff;
-  padding: 0;
-  align-items: center;
-`;
-const className1WithFixedWidth = css`
-  ${className1}
-  width: 168px;
-`;
-const className1WithAutoWidth = css`
-  ${className1}
-  width: auto;
-  min-width: 168px;
-`;
-const className2 = css`
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-`;
-const className3 = css`
-  width: 100%;
-  height: 100%;
-  font-weight: 500;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const NocoBaseLogo = observer(() => {
-  const { token } = antdTheme.useToken();
-  const customToken = token as CustomToken;
-  const result = useSystemSettings();
-  const { t } = useTranslation('lm-collections');
-  const fontSizeStyle = useMemo(() => ({ fontSize: customToken.fontSizeHeading3 }), [customToken.fontSizeHeading3]);
-
-  const hasLogo = result?.data?.data?.logo?.url;
-  const logo = hasLogo ? (
-    <img className={className2} src={result?.data?.data?.logo?.url} />
-  ) : (
-    <span style={fontSizeStyle} className={className3}>
-      {t(result?.data?.data?.title)}
-    </span>
-  );
-
-  return (
-    <div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
-  );
-});
+import { NocoBaseLogo } from './NocoBaseLogo';
 
 const resetStyle = css`
   .ant-layout-sider-children {