@hzab/form-render 1.6.6 → 1.6.8-beta

package/CHANGELOG.md

@@ -1,4 +1,12 @@
-# @hzab/form-render@1.6.6
+# @hzab/form-render@1.6.9
+
+feat: 添加主题色配置
+
+# @hzab/form-render@1.6.8
+
+feat:富文本组件添加私有化部署文件上传与oss上传的区分
+
+# @hzab/form-render@1.6.7
 
 fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.6",
+  "version": "1.6.8-beta",
   "description": "",
   "main": "src",
   "scripts": {
@@ -21,6 +21,7 @@
     "@hzab/data-model": "^1.2.0",
     "@hzab/permissions": "^0.1.1",
     "@hzab/webpack-config": "0.0.12",
+    "@hzab/theme-tools": "^0.0.2",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",

package/src/common/schema-handler.ts

@@ -38,6 +38,8 @@ export const arrayList = ["ArrayTable", "ArrayCards"];
 export const skipBindList = ["FormCollapse", "FormCollapse.CollapsePanel"];
 /** change 回调返回 parent 数据的组件 */
 export const returnParentValue = ["ArrayTable", "ArrayCards"];
+/** 自定义样式中需要为下拉窗口或弹窗添加popupClassName的组件 */
+export const addPopupClassName = ["Cascader", "TreeSelect", "Select", "TimePicker", "DatePicker", "DatePicker.RangePicker", "TimePicker.RangePicker", "UserSelect"]
 
 /**
  * schema 每项添加 onChange，解决无全局 onChange 问题
@@ -64,6 +66,12 @@ export const bindOnChange = (schema, opt) => {
     } else if (isScopeKey(comProps, schemaScope)) {
       item["x-component-props"] = getScopeKeyVal(comProps, schemaScope) || {};
     }
+    // 为自定义主题时存在弹窗或下拉框的组件添加类名
+    if (opt?.customTheme) {
+      if (addPopupClassName.includes(item["x-component"])) {
+        item["x-component-props"].popupClassName = typeof opt.customTheme === 'string' ? `form-dialog-custom-theme-${opt.customTheme}` : 'form-dialog-custom-theme';
+      }
+    }
 
     const bindParams = {
       componentName,

package/src/components/LocationListPicker/index.tsx

@@ -60,8 +60,7 @@ export const LocationListPicker = observer((props) => {
   }, []);
 
   useEffect(() => {
-    listRef.current = value || [];
-    if (!Array.isArray(value) || value?.length == 0 || !mapUtilsRef.current) {
+    if (!Array.isArray(value) || value?.length == 0) {
       return;
     }
     // 处理 id
@@ -70,6 +69,10 @@ export const LocationListPicker = observer((props) => {
         it.id = nanoid();
       }
     });
+    listRef.current = value || [];
+    if (!mapUtilsRef.current) {
+      return;
+    }
     renderMarker();
   }, [value]);
 
@@ -89,6 +92,7 @@ export const LocationListPicker = observer((props) => {
         mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
       }
     });
+    mapUtilsRef.current.setFitView();
     clearActive();
   }
 
@@ -106,7 +110,6 @@ export const LocationListPicker = observer((props) => {
     });
 
     renderMarker();
-    mapUtilsRef.current.setFitView();
   }
 
   function onAddClick() {

package/src/components/RichEditor/index.tsx

@@ -2,7 +2,8 @@ import "@wangeditor/editor/dist/css/style.css"; // 引入 css
 import React, { useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-react";
 import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
-import UploadOss from "./common/ossUpload";
+import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
+import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
 import "./index.less";
 import { Spin, message } from 'antd';
 import { connect, mapProps, observer } from "@formily/react";
@@ -15,11 +16,16 @@ interface PropsType {
   toolbarConfig?: Partial<IToolbarConfig>;
   editorConfig?: Partial<IEditorConfig>;
   ossOpt: AnyObject,
-  params: AnyObject,
+  uploadParams: AnyObject,
   height: string,
+  ossServerUrl: string,
   ossUrl: string,
+  offlinePreviewUrl: string,
+  offlineServerUrl: string,
   value: string,
   onChange: any,
+  customRequest: any,
+  uploadMode: string,
   zIndex: number
 }
 
@@ -31,10 +37,18 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     onChange,
     value,
     ossOpt,
+    uploadMode = "oss",
+    offlinePreviewUrl = "",
+    offlineServerUrl = "",
+    uploadParams = {},
     // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
+    ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
     ossUrl = "/api/v1/user/oss/getWebOssConfig",
     zIndex = 9999
   } = props;
+  const isPrivateStore =
+    props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
+
   useImperativeHandle(parentRef, () => ({
     setEditorContent,
     getEditorContent,
@@ -57,6 +71,40 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     return html;
   };
 
+
+  const customUpload = async (file: File, insertFn) => {
+    let customRequest = props.customRequest;
+    if (uploadMode === "oss") {
+      customRequest = getOssUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        ossServerUrl: ossServerUrl || ossUrl,
+      });
+    } else if (uploadMode === "offline") {
+      customRequest = getOfflineUploadRequest({
+        ...props,
+        isPrivateStore,
+        params: uploadParams,
+        offlineServerUrl: offlineServerUrl || ossUrl,
+        offlinePreviewUrl: offlinePreviewUrl,
+      });
+    }
+    setIsLoading(true);
+    customRequest({
+      file,
+      onSuccess: (res) => {
+        setIsLoading(false);
+        console.log(res)
+        insertFn(res.url, '', '');
+      },
+      onError: () => {
+        setIsLoading(false);
+        message.error(`${file.name} 上传失败`);
+      }
+    })
+  }
+
   const config: Partial<IEditorConfig> = {
     // TS 语法
     placeholder: "请输入内容...",
@@ -74,19 +122,7 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         withCredentials: false,
         // 超时时间，默认为 10 秒
         timeout: 5 * 1000, // 5 秒
-        async customUpload(file: File, insertFn) {
-          const ossUpload = new UploadOss({
-            serverUrl: ossUrl,
-            ...ossOpt,
-          });
-          const res = await ossUpload.upload(file, {
-            params: {
-              isPublic: 1,
-              ...(props.params || {}),
-            },
-          })
-          insertFn(res?.data?.data?.fileUrl, '', '')
-        },
+        customUpload,
       },
       uploadVideo: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
@@ -97,30 +133,13 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         allowedFileTypes: ['video/*'],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
-        customUpload(file: File, insertFn) {
-          setIsLoading(true)
-          const ossUpload = new UploadOss({
-            serverUrl: ossUrl,
-            ...ossOpt,
-          });
-          ossUpload.upload(file, {
-            params: {
-              isPublic: 1,
-              ...(props.params || {}),
-            },
-          }).then((res) => {
-            setIsLoading(false)
-            insertFn(res?.data?.data?.fileUrl, '', '')
-          }).catch(() => {
-            setIsLoading(false)
-            message.error(`${file.name} 上传失败`);
-          })
-        },
+        customUpload,
       },
     },
     ...editorConfig,
   };
 
+
   const onEditorChange = (e) => {
     const content = e.getHtml();
     setHtml(content);

package/src/custom-theme.less

@@ -0,0 +1,488 @@
+@primaryColor: var(--form-render-primary-color); // 主题色
+@textColor: var(--form-render-color); // 字体颜色
+@bgColor: var(--form-render-bg-color); // 背景颜色
+@tableBgColor: var(--form-render-table-bg-color); // 表格背景颜色
+@tableColor: var(--form-render-table-color); // 表格字体颜色
+@talbeBorderColor: var(--form-render-table-border-color); // 表格边框颜色
+@tableWrapperBorderColor: var(--form-render-table-wrapper-border-color); // 表格表头下边框颜色
+@tableCellHoverBgColor: var(--form-render-table-cell-hover-bg-color); // 表格单元格滑过背景颜色
+@tableCellHoverColor: var(--form-render-table-cell-hover-color); // 表格单元格滑过字体颜色
+@btnOkColor: var(--form-render-btn-ok-color); // 确认按钮字体颜色
+@btnOkBgColor: var(--form-render-btn-ok-bg-color); // 确认按钮背景颜色
+@btnOkBgHoverColor: var(--form-render-btn-ok-bg-hover-color); // 确认按钮滑过字体颜色
+@btnOkBorderColor: var(--form-render-btn-ok-border-color); // 确认按钮边框颜色
+@btnDefaultColor: var(--form-render-btn-default-color); // 默认按钮字体颜色
+@btnDefaultBgColor: var(--form-render-btn-default-bg-color); // 默认按钮背景颜色
+@btnDefaultBorderColor: var(--form-render-btn-default-border-color); // 默认按钮边框颜色
+@btnDefaultBgHoverColor: var(--form-render-btn-default-bg-hover-color); // 默认按钮滑过背景颜色
+@inputColor: var(--form-render-input-color); // 输入框字体颜色
+@formLabelColor: var(--form-render-form-label-color); // 表单项label字体颜色
+@formReqiredColor: var(--form-render-form-required-color); // 表单项必填字体颜色
+@inputHoverColor: var(--form-render-input-hover-color); // 输入框滑过字体颜色
+@inputBgColor: var(--form-render-input-bg-color); // 输入框背景颜色
+@inputBorderColor: var(--form-render-input-border-color); // 输入框边框颜色
+@inputBorderHoverColor: var(--form-render-input-border-hover-color); // 输入框滑过边框颜色
+@selectColor: var(--form-render-select-color); // 选择器字体颜色
+@selectHoverColor: var(--form-render-select-hover-color); // 选择器滑过字体颜色
+@selectBgColor: var(--form-render-select-bg-color); // 选择器背景颜色
+@selectBgHoverColor: var(--form-render-select-bg-hover-color); // 选择器滑过背景颜色
+@selectBorderColor: var(--form-render-select-border-color); // 选择器边框颜色
+@iconColor: var(--form-render-icon-color); // 图标颜色
+@iconHoverColor: var(--form-render-icon-hover-color); // 图标滑过颜色
+@iconBgColor: var(--form-render-icon-bg-color); // 图标背景颜色
+@iconBgHoverColor: var(--form-render-icon-bg-hover-color); // 图标滑过背景颜色
+@pickerCellDisabled: var(--form-render-picker-cell-disabled); // 时间选择器禁用项字体颜色
+@pickerRangeStartAEndBgColor: var(--form-render-picker-range-start-or-end-bg-color); // 时间选择器起止项背景颜色
+@pickerRangeBgStartHoverColor: var(--form-render-picker-range-bg-start-hover-color); // 时间选择器滑过起始项字体颜色
+@pickerRangeBgHoverColor: var(--form-render-picker-range-bg-hover-color); // 时间选择器选择区间背景颜色
+@radioCheckedColor: var(--form-render-radio-checked-color); // 单选框选中状态颜色
+@radioBgColor: var(--form-render-radio-bg-color); // 单选框背景颜色
+@radioColor: var(--form-render-radio-color); // 单选框字体颜色
+@checkboxCheckedColor: var(--form-render-checkbox-checked-color); // 复选框选中状态颜色
+@checkboxBgColor: var(--form-render-checkbox-bg-color); // 复选框背景颜色
+@checkboxColor: var(--form-render-checkbox-color); // 复选框字体颜色
+
+// 表单项集合
+.mixinColor() {
+  .ant-select:not(.ant-select-disabled) {
+    color: @selectColor;
+
+    &:hover {
+      color: @inputHoverColor;
+    }
+
+    .ant-select-selector {
+      background-color: @selectBgColor;
+
+      .ant-btn-icon-only {
+        color: @iconColor;
+        background-color: @selectBgColor;
+
+        &:hover {
+          color: @iconHoverColor;
+          background-color: @inputBgColor;
+          border-color: @inputBorderHoverColor;
+        }
+      }
+    }
+  }
+
+  .ant-select-tree {
+    color: @selectColor;
+    background-color: @selectBgColor;
+
+    .ant-select-tree-node-content-wrapper:hover,
+    .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
+      color: @selectHoverColor;
+      background-color: @selectBgHoverColor;
+    }
+  }
+
+  .ant-select-item {
+    color: @selectColor;
+
+    .ant-select-item-option-content {
+      &>div {
+
+        >div,
+        >span {
+          color: @selectColor;
+        }
+      }
+
+      &:hover {
+        >div {
+
+          >div,
+          >span {
+            color: @selectHoverColor;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-select-item.ant-select-item-option-selected,
+  .ant-select-item.ant-select-item-option-active {
+    color: @selectHoverColor;
+    background-color: @selectBgHoverColor;
+  }
+
+  .ant-select-arrow,
+  .ant-select-clear,
+  .ant-picker-suffix,
+  .ant-picker-clear,
+  .ant-collapse-expand-icon,
+  .ant-btn-icon-only,
+  .ant-table-cell button.ant-table-row-expand-icon {
+    color: @iconColor;
+    background-color: @iconBgColor;
+
+    &:hover {
+      color: @iconHoverColor;
+      background-color: @iconBgHoverColor;
+    }
+  }
+
+  .ant-formily-item-label {
+    color: @formLabelColor;
+
+    .ant-formily-item-asterisk {
+      color: @formReqiredColor;
+    }
+  }
+
+  .ant-input-affix-wrapper,
+  .ant-select:not(.ant-select-disabled) .ant-select-selector,
+  .ant-input-number,
+  .ant-upload,
+  .ant-collapse-item,
+  .ant-collapse-content,
+  .ant-card-head,
+  .ant-collapse-header-text,
+  .ant-picker-header,
+  .ant-picker-header button,
+  .ant-input {
+    color: @inputColor;
+    background-color: @inputBgColor;
+    border-color: @inputBorderColor;
+
+    &:not(.ant-card-head):hover {
+      color: @inputHoverColor;
+      border-color: @inputBorderHoverColor;
+    }
+  }
+
+  .ant-picker {
+    color: @inputColor;
+    background-color: @inputBgColor;
+    border-color: @inputBorderColor;
+
+    .ant-picker-input>input {
+      color: @inputColor;
+
+      &:hover {
+        color: @inputHoverColor;
+      }
+    }
+
+    .ant-picker-separator {
+      color: @inputColor;
+
+      &:hover {
+        color: @inputHoverColor;
+      }
+    }
+  }
+
+  .ant-picker-panel {
+    .ant-picker-body {
+      .ant-picker-content {
+        .ant-picker-cell {
+          color: @selectColor;
+
+          &:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) {
+            .ant-picker-cell-inner {
+              background-color: @selectBgHoverColor;
+              color: @selectHoverColor;
+            }
+          }
+
+          &:hover:not(.ant-picker-cell-in-view) {
+            .ant-picker-cell-inner {
+              background-color: @selectBgHoverColor;
+            }
+          }
+
+          &.ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single) {
+            &::before {
+              background-color: @selectBgHoverColor;
+            }
+          }
+
+          &.ant-picker-cell-in-view.ant-picker-cell-in-range {
+            &::before {
+              background-color: @selectBgHoverColor;
+            }
+
+            &.ant-picker-cell-range-hover-start,
+            &.ant-picker-cell-range-hover-end {
+              &::before {
+                background-color: @pickerRangeBgStartHoverColor;
+              }
+
+              .ant-picker-cell-inner {
+                &::after {
+                  background-color: @pickerRangeBgStartHoverColor;
+                }
+              }
+            }
+
+            &.ant-picker-cell-range-hover {
+              &::before {
+                background-color: @pickerRangeBgHoverColor;
+              }
+            }
+
+            .ant-picker-cell-inner {
+              color: @selectHoverColor;
+
+              &::after {
+                background-color: @selectBgHoverColor;
+              }
+            }
+          }
+
+          &.ant-picker-cell-in-view {
+            color: @selectHoverColor;
+
+            &.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single),
+            &.ant-picker-cell-range-end {
+              &::before {
+                background-color: @pickerRangeStartAEndBgColor;
+              }
+            }
+
+            &.ant-picker-cell-selected {
+              .ant-picker-cell-inner {
+                background-color: @pickerRangeStartAEndBgColor;
+                ;
+              }
+            }
+
+            &.ant-picker-cell-disabled {
+              color: @pickerCellDisabled;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-radio-group {
+    .ant-radio-wrapper {
+      .ant-radio+span {
+        color: @radioColor;
+      }
+
+      &.ant-radio-wrapper-checked {
+        .ant-radio.ant-radio-checked {
+          .ant-radio-inner {
+            background-color: @radioBgColor;
+
+            &::after {
+              background-color: @radioCheckedColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-checkbox-group {
+    .ant-checkbox-wrapper {
+      .ant-checkbox+span {
+        color: @checkboxColor;
+      }
+
+      &.ant-checkbox-wrapper-checked {
+        .ant-checkbox.ant-checkbox-checked {
+          .ant-checkbox-inner {
+            background-color: @checkboxBgColor;
+
+            &::after {
+              border-color: @checkboxCheckedColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-upload-list-item-actions {
+    a {
+      color: @iconColor;
+    }
+  }
+
+  .ant-upload-span {
+    color: @inputColor;
+    fill: @inputColor;
+  }
+
+  .ant-switch {
+    background-color: @inputColor;
+
+    &.ant-switch-checked {
+      background-color: @primaryColor;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+
+
+  .ant-cascader-menu-item {
+    &:hover {
+      background-color: @selectBgHoverColor;
+    }
+
+    &.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+      background-color: @selectBgHoverColor;
+      color: @selectHoverColor;
+    }
+  }
+
+  .ant-btn.ant-btn-primary {
+    color: @btnOkColor;
+    background-color: @btnOkBgColor;
+    border-color: @btnOkBorderColor;
+
+    &:hover,
+    &:focus {
+      border-color: @primaryColor;
+      background-color: @btnOkBgHoverColor;
+    }
+  }
+
+  .ant-btn.ant-btn-default {
+    color: @btnDefaultColor;
+    background-color: @btnDefaultBgColor;
+    border-color: @btnDefaultBorderColor;
+
+    &:hover,
+    &:focus {
+      color: @primaryColor;
+      border-color: @primaryColor;
+      background-color: @btnDefaultBgHoverColor;
+    }
+  }
+
+  .ant-btn.ant-btn-dashed {
+    color: @btnDefaultColor;
+    background-color: @btnDefaultBgColor;
+    border-color: @btnDefaultBorderColor;
+
+    &:hover,
+    &:focus {
+      color: @primaryColor;
+      border-color: @primaryColor;
+    }
+  }
+}
+
+.form-render-custom-theme {
+  background-color: @bgColor;
+  color: @textColor;
+
+  .ant-formily-item,
+  .ant-collapse,
+  .ant-card,
+  .ant-formily-array-table .ant-formily-array-table-sort-helper {
+    background-color: @bgColor;
+    color: @textColor;
+    .mixinColor();
+
+    .ant-table-cell {
+      .ant-empty-normal {
+        color: @tableColor;
+      }
+
+      &:hover {
+        background-color: @tableCellHoverBgColor;
+
+        .ant-empty-normal {
+          color: @tableCellHoverColor;
+        }
+      }
+    }
+  }
+
+  .ant-formily-item-control {
+    .ant-table {
+      background-color: @tableBgColor;
+      color: @tableColor;
+
+      .ant-formily-array-table .ant-formily-array-table-sort-helper {
+        background-color: @tableBgColor;
+      }
+
+      .ant-table-thead>tr>th {
+        background-color: @tableBgColor;
+        color: @tableColor;
+      }
+
+      .ant-table-row {
+
+        // 此处原因：会出现弹窗关闭后，鼠标刚好停留在外表格的某一行，导致ant-table-cell-row-hover类名未正常出现，渲染颜色错误
+        &:hover {
+          td {
+            background-color: @tableCellHoverBgColor;
+            color: @tableCellHoverColor;
+          }
+        }
+
+        & .ant-table-cell-row-hover {
+          background-color: @tableCellHoverBgColor;
+          color: @tableCellHoverColor;
+        }
+      }
+    }
+  }
+}
+
+.form-dialog-custom-theme {
+  background-color: @selectBgColor;
+  color: @selectColor;
+  .mixinColor();
+
+  .ant-table {
+    background-color: @tableBgColor;
+    color: @tableColor;
+
+    .ant-formily-array-table .ant-formily-array-table-sort-helper {
+      background-color: @tableBgColor;
+    }
+
+    .ant-table-thead>tr>th {
+      background-color: @tableBgColor;
+      color: @tableColor;
+    }
+
+    .ant-table-row {
+
+      // 此处原因：会出现弹窗关闭后，鼠标刚好停留在外表格的某一行，导致ant-table-cell-row-hover类名未正常出现，渲染颜色错误
+      &:hover {
+        td {
+          background-color: @tableCellHoverBgColor;
+          color: @tableCellHoverColor;
+        }
+      }
+    }
+  }
+
+  .ant-picker-panel-container {
+    color: @selectColor;
+    background-color: @selectBgColor;
+
+    .ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner {
+      color: @selectColor;
+
+      &:hover {
+        background-color: @selectBgHoverColor;
+        color: @selectHoverColor;
+      }
+    }
+
+    .ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
+      background-color: @selectBgHoverColor;
+      color: @selectHoverColor;
+    }
+
+  }
+
+  .ant-empty-small {
+    color: @selectColor;
+  }
+}

package/src/index.less

@@ -1,18 +1,22 @@
 .form-render {
+
   &.ant-form-inline,
-  &.ant-form-inline > form,
-  &.ant-form-inline > form > .ant-formily-layout {
+  &.ant-form-inline>form,
+  &.ant-form-inline>form>.ant-formily-layout {
     display: inline-flex;
     flex-wrap: wrap;
+
     .ant-formily-item-control {
       min-width: 120px;
     }
+
     .ant-picker-range {
       min-width: 340px;
     }
+
     .ant-formily-item-layout-inline {
       margin-right: 12px;
       margin-bottom: 12px;
     }
   }
-}
+}

package/src/index.tsx

@@ -37,6 +37,7 @@ import { GlobalPropsContext } from "./common/global-props-context";
 import { bindOnChange } from "./common/schema-handler";
 
 import "./index.less";
+import "./custom-theme.less";
 
 const antdComponents = {
   Form,
@@ -163,13 +164,16 @@ const FormRender = forwardRef((props: any, parentRef) => {
       schemaScope: schemaScopeRef.current,
       onChange: props.onChange,
       formRender,
+      customTheme: props.customTheme
     });
   }, []);
 
+  const className = props.customTheme === true ? 'form-render-custom-theme' : typeof props.customTheme === 'string' ? `form-render-${props.customTheme}` : '';
+
   return (
     <GlobalPropsContext.Provider value={props}>
       <Form
-        className={`form-render ${props.className}`}
+        className={`form-render ${props.className} ${className}`}
         layout={props.layout}
         form={formRender}
         labelCol={props.schema.form.labelCol}

package/src/components/RichEditor/common/ossUpload.js

@@ -1,155 +0,0 @@
-import { axios } from "@hzab/data-model";
-import { nanoid } from "nanoid";
-
-export function getSignature(opt = {}) {
-  const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
-  // 减 10 秒，避免发起请求时 刚好过期的情况
-  if (
-    window.__ossSignatureRes &&
-    serverUrl === window.__ossSignatureRes.serverUrl &&
-    Date.now() - window.__ossSignatureRes.__saveTime < window.__ossSignatureRes.expireTimeMillis - 10000
-  ) {
-    return Promise.resolve(window.__ossSignatureRes);
-  }
-  const { axios: _ax = axios, params = {}, axiosConf } = opt;
-  return _ax
-    .get(serverUrl, {
-      ...axiosConf,
-      params: {
-        isPublic: 1,
-        ...params,
-      },
-    })
-    .then((res) => {
-      window.__ossSignatureRes = res?.data?.data;
-      if (window.__ossSignatureRes) {
-        window.__ossSignatureRes.__saveTime = Date.now();
-        window.__ossSignatureRes.serverUrl = serverUrl;
-      }
-      return window.__ossSignatureRes;
-    });
-}
-
-class OssUpload {
-  constructor(props = {}) {
-    this.axios = props.axios || axios;
-    this.axiosConf = props.axiosConf || {};
-    this.serverUrl = props.serverUrl || "/api/v1/user/oss/getWebOssConfig";
-    this.signatureParams = props.signatureParams || {};
-  }
-
-  getSignature(serverUrl = this.serverUrl, opt) {
-    return getSignature({
-      ...opt,
-      serverUrl,
-      axios: opt?.axios || this.axios,
-      axiosConf: { ...this.axiosConf, ...opt?.axiosConf },
-    });
-  }
-
-  upload(file, opt = {}) {
-    return new Promise(async (resolve, reject) => {
-      const ossParams = await this.getSignature(opt.serverUrl || this.serverUrl, {
-        ...opt,
-        params: { ...this.signatureParams, ...opt.signatureParams },
-      });
-
-      const { ossParams: propOssParams } = opt || {};
-      const formData = new FormData();
-      // key 表示上传到 Bucket 内的 Object 的完整路径，例如 exampledir/exampleobject.txtObject，完整路径中不能包含 Bucket 名称。
-      // filename 表示待上传的本地文件名称。
-      let filename = file?.name;
-      if (file?.name) {
-        const nameArr = file?.name.match(/^(.+)\.(.+)$/);
-        if (nameArr && nameArr.length > 2) {
-          filename = `${nameArr[1]}_${Date.now()}_${nanoid()}.${nameArr[2]}`;
-        }
-      }
-      if (!filename) {
-        filename = `${Date.now()}_${nanoid()}.${file.type?.replace(/\w+\/, ''/)}`;
-      }
-      const key = `${ossParams?.dir}${filename}`;
-      formData.set("key", key);
-      formData.set("OSSAccessKeyId", ossParams.accessid);
-      formData.set("policy", ossParams.policy);
-      formData.set("Signature", ossParams.signature);
-      if (ossParams.callback) {
-        formData.set("callback", ossParams.callback);
-      }
-      formData.set("success_action_status", 200);
-      formData.set("file", file);
-
-      if (propOssParams) {
-        for (const key in propOssParams) {
-          if (Object.hasOwnProperty.call(propOssParams, key)) {
-            formData.set(key, propOssParams[key]);
-          }
-        }
-      }
-
-      const _axios = opt?.axios || this.axios;
-
-      return _axios
-        .post(ossParams.host, formData, { ...this.axiosConf, ...opt?.axiosConf })
-        .then((res) => {
-          resolve(res);
-          return res;
-        })
-        .catch((err) => {
-          console.error("oss upload err", err);
-          reject(err);
-          return Promise.reject(err);
-        });
-    });
-  }
-}
-
-/**
- * 处理文件上传逻辑
- * @param {Array} files
- * @param {Object} opt
- * @returns
- */
-export async function handleOssUpload(files, opt) {
-  const _files = files;
-  const { ossUrl, signatureParams, ossParams, axiosConf } = opt || {};
-  const ossUpload = new OssUpload({
-    axios: opt.axios,
-    axiosConf: axiosConf,
-    serverUrl: ossUrl || "/api/v1/user/oss/getWebOssConfig",
-  });
-
-  const promise = [];
-  _files?.forEach((file) => {
-    // 数据已经是 url 的情况
-    if (typeof file === "string" || file.ossUrl) {
-      promise.push(Promise.resolve(file));
-    } else {
-      promise.push(
-        ossUpload
-          .upload(file, {
-            signatureParams: {
-              isPublic: 1,
-              ...(signatureParams || {}),
-            },
-            ossParams,
-            axiosConf,
-          })
-          .then((res) => {
-            return Promise.resolve(res?.data?.data?.fileUrl);
-          }),
-      );
-    }
-  });
-
-  return Promise.all(promise).then((filePromises) => {
-    filePromises?.forEach((fileUrl, idx) => {
-      _files[idx].ossUrl = fileUrl;
-    });
-    return Promise.resolve(_files);
-  });
-}
-
-export { axios };
-
-export default OssUpload;