@hzab/form-render 1.6.8-beta → 1.6.8-beta1

package/CHANGELOG.md

@@ -1,6 +1,7 @@
+
 # @hzab/form-render@1.6.9
 
-feat: 添加主题色配置
+feat: PersonnelSelect组件
 
 # @hzab/form-render@1.6.8
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.8-beta",
+  "version": "1.6.8-beta1",
   "description": "",
   "main": "src",
   "scripts": {
@@ -21,7 +21,6 @@
     "@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/formily-utils.ts

@@ -1,13 +1,125 @@
+import _ from "lodash";
+
+export interface ISetTargetLevelValOpt {
+  /**
+   * 相对当前的层级数
+   */
+  level?: number;
+  /**
+   * 目标数据为数组是否使用 push
+   */
+  isArrPush?: boolean;
+}
+
 /**
- * 获取父级的数据对象（包括当前项的对象）
- * { 当前项: xxx, 其他项: lll }
- * @param field
+ * 获取父级的数据（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
  * @returns
  */
 export function getParentValue(field) {
-  let form = field?.parent?.value || field?.value;
-  if (Array.isArray(form)) {
-    form = form[field.index];
+  return getTargetLevelVal(field, -1);
+}
+
+/**
+ * 设置当前 field 同层级数据值。
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标值
+ * @example
+ * 如当前的 field name 为 test, 设置同层级 testA
+ * // 初始值：
+ * {
+ *  test: 1
+ * }
+ * // 设置同层级 key 为 testA 的值为 222
+ * setParentValue(field, 'testA', 222);
+ * // 设置结果
+ * {
+ *  test: 1,
+ *  testA: 222
+ * }
+ */
+export function setParentValue(field, key, val) {
+  setTargetLevelVal(field, key, val, { level: -1 });
+}
+
+/**
+ * 获取相对当前层级的数据对象（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标 value
+ * @param level 相对的层级 负数
+ * @returns
+ */
+export function getTargetLevelVal(field, level) {
+  if (typeof field !== "object" || !field.form || !field.path) {
+    console.warn("Warn setCurLevelData: field 入参不是一个正确的 formily field 数据");
+    return;
+  }
+  // 设置目标参数的路径
+  let path = [...field.path.segments];
+  // 层级超出路径长度不进行设置
+  if (Math.abs(level) > path.length) {
+    console.info("Info setCurLevelData: level 层级超出路径长度不进行设置");
+    return;
+  }
+  if (typeof level === "number") {
+    path = path.slice(0, level);
+  }
+  // 设置目标数据
+  return _.get(field.form.values, path.join("."));
+}
+
+/**
+ * 设置相对当前层级的数据对象（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标 value
+ * @param level 相对的层级
+ * @returns
+ */
+export function setTargetLevelVal(
+  field,
+  key,
+  val,
+  opt: ISetTargetLevelValOpt = { level: undefined, isArrPush: false },
+) {
+  if (typeof field !== "object" || !field.form || !field.path) {
+    console.warn("Warn setCurLevelData: field 入参不是一个正确的 formily field 数据");
+    return;
+  }
+  const {
+    /**
+     * 数组是否进行 push 曹组
+     */
+    isArrPush,
+    /**
+     * 相对的层级
+     */
+    level,
+  } = opt || {};
+  // 设置目标参数的路径
+  let path = [...field.path.segments];
+  // 层级超出路径长度不进行设置
+  if (Math.abs(level) > path.length) {
+    console.info("Info setCurLevelData: level 层级超出路径长度不进行设置");
+    return;
+  }
+  if (typeof level === "number") {
+    path = path.slice(0, -Math.abs(level));
+  }
+  const parentPath = path.join(".");
+  const parentType = _.get(field.form.values, path);
+  // 添加目标 key，得到目标完整 path
+  path.push(key);
+  // 克隆 form 数据，用于修改目标数据 （）
+  const data = _.cloneDeep(field.form.values);
+  // 设置目标数据
+  if (isArrPush && Array.isArray(parentType)) {
+    const _d = _.get(data, parentPath);
+    Array.isArray(_d) && _d.push({ [key]: val });
+  } else {
+    _.set(data, path.join("."), val);
   }
-  return form;
+  field.form.setValues(data);
 }

package/src/common/schema-handler.ts

@@ -38,8 +38,6 @@ 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 问题
@@ -66,12 +64,6 @@ 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/PersonnelSelect/index.less

@@ -0,0 +1,21 @@
+.abt-user-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+
+
+
+  .abt-user-item-info {
+    list-style: none;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+
+    .abt-user-item-info__item {
+      & > span:last-of-type {
+        color: #666;
+      }
+    }
+  }
+}

package/src/components/PersonnelSelect/index.module.less

@@ -0,0 +1,33 @@
+.user-select {
+
+  &-option {
+    :global {
+      .ant-select-item-option-content {
+        display: flex;
+      }
+    }
+
+
+    &__avatar {
+      margin-right: 10px;
+    }
+
+    .user-item {
+      display: flex;
+      flex-direction: column;
+
+      &-name {
+        margin-bottom: 4px;
+        color: #000000d9;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+      }
+
+      &__idCard {
+        color: #00000073;
+        font-size: 14px;
+      }
+    }
+  }
+}

package/src/components/PersonnelSelect/index.tsx

@@ -0,0 +1,257 @@
+import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
+import { Select, List, Avatar, Spin } from "antd";
+import { connect, mapProps } from "@formily/react";
+import type { SelectProps } from "antd/lib/select";
+import type { AvatarProps } from "antd/lib/avatar";
+import { debounce, isObject, uniq } from "lodash";
+
+import "./index.less";
+
+export interface Person {
+  id: string | number;
+  name: string;
+  avatar?: string;
+  email?: string;
+  description?: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface ScrollPagination {
+  pageNum: number;
+  pageSize: number;
+  current?: number;
+  total?: number;
+}
+
+type LableValue = {
+  label: string;
+  value: string | number;
+  [key: string]: any;
+};
+
+interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "children"> {
+  loadOptions: (
+    search: string,
+    pagination: ScrollPagination,
+  ) => Promise<{ list: Person[]; pagination: ScrollPagination }>;
+  renderItem?: (item: Person) => React.ReactNode;
+  initialPagination?: Partial<ScrollPagination>;
+  avataProps?: AvatarProps;
+  value: LableValue[] | LableValue;
+  listItemConfigs?: { label: string; key: string }[];
+  disabledKey?: string;
+  disabledStyle?: (disabled: boolean) => React.CSSProperties;
+  customItemNode?: React.ReactNode;
+}
+
+const defaultListItemConfigs = [
+  { label: "姓名：", key: "userName" },
+  { label: "主部门：", key: "orgName" },
+  { label: "主驻点：", key: "userName" },
+  { label: "手机号：", key: "phoneNumber" },
+  { label: "身份证号：", key: "idnumber" },
+];
+
+const RemoteSelect: React.FC<RemoteSelectProps> = ({
+  loadOptions,
+  renderItem,
+  listItemConfigs,
+  disabledKey = "disabled",
+  initialPagination = {},
+  avataProps = {},
+  disabledStyle,
+  customItemNode,
+  ...selectProps
+}) => {
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [list, setList] = useState<Person[]>([]);
+  const [pagination, setPagination] = useState<ScrollPagination>({
+    pageNum: 1,
+    pageSize: 10,
+    ...initialPagination,
+  });
+  const listRef = useRef<HTMLDivElement>(null);
+  const selectInstance = useRef<any>(null);
+
+  const debounceLoadData = debounce(async (isScrollLoad = false) => {
+    try {
+      isScrollLoad ? setLoadingMore(true) : setLoading(true);
+
+      const result = await loadOptions(search, {
+        ...pagination,
+        pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
+      });
+      const { list } = result;
+
+      setList((prev) => (isScrollLoad ? [...prev, ...list] : list));
+    } finally {
+      isScrollLoad ? setLoadingMore(false) : setLoading(false);
+    }
+  }, 500);
+  const debounceHandleScroll = async (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+    const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
+
+    if (isNearBottom && !loadingMore) {
+      await loadData(true);
+      setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
+    }
+  };
+
+  const loadData = useCallback(debounceLoadData, [search, pagination, loadOptions]);
+
+  // 处理滚动加载
+  const handleScroll = useCallback(debounceHandleScroll, [loadingMore, loadData]);
+
+  // 处理搜索
+  const handleSearch = debounce((value: string) => {
+    setSearch(value);
+    setPagination((prev) => ({ ...prev, pageNum: 1 }));
+  }, 1000);
+
+  useEffect(() => {
+    loadData();
+  }, [search]);
+
+  // 处理选项点击
+  const handleItemClick = (itemId: string | number) => {
+    const currentValue = selectProps.value;
+    const isMultiple = selectProps.mode === "multiple";
+
+    // 更新值
+    if (isMultiple) {
+      const isValueArr = Array.isArray(currentValue);
+      let newValue = null;
+
+      if (isValueArr) {
+        const currentValueIds = currentValue.map((it) => it.value);
+        newValue = currentValueIds.includes(itemId)
+          ? currentValueIds.filter((v) => v !== itemId)
+          : uniq([...currentValue, itemId]);
+      } else {
+        newValue = [itemId];
+      }
+
+      selectProps.onChange?.(newValue, currentValue);
+    } else {
+      const newValue = itemId === (currentValue as LableValue)?.value ? undefined : itemId;
+      selectProps.onChange?.(newValue, currentValue);
+
+      // 单选模式下关闭下拉框
+      if (selectInstance.current) {
+        selectInstance.current.blur();
+      }
+    }
+  };
+
+  const itemConfigs = useMemo(() => {
+    if (Array.isArray(listItemConfigs) && listItemConfigs?.length) return listItemConfigs;
+    return defaultListItemConfigs;
+  }, [listItemConfigs]);
+
+  // 默认渲染项（增加选中状态和点击处理）
+  const defaultRenderItem = useCallback(
+    (item: Person) => {
+      let isSelected;
+
+      if (selectProps.mode === "multiple") {
+        isSelected = (selectProps.value || [])
+          .map((it) => (isObject(it) ? it?.value || it?.userId : it))
+          .includes(item.userId);
+      } else {
+        isSelected = isObject(selectProps.value) ? (selectProps.value as LableValue)?.value === item.userId : false;
+      }
+
+      const disabled = item?.[disabledKey] || false;
+      const getDisabledStyle: React.CSSProperties =
+        typeof disabledStyle === "function"
+          ? disabledStyle(disabled)
+          : {
+              cursor: disabled ? "not-allowed" : "pointer",
+              backgroundColor: disabled ? "#f0f0f0" : isSelected ? "#e6f7ff" : "inherit",
+              color: disabled ? "#999" : "inherit",
+              filter: disabled ? "grayscale(100%)" : "none",
+            };
+
+      return (
+        <List.Item
+          key={item.userId}
+          onClick={() => (disabled ? null : handleItemClick(item.userId))}
+          style={getDisabledStyle}
+        >
+          {customItemNode ? (
+            customItemNode
+          ) : (
+            <div className="abt-user-item">
+              <div className="abt-user-item-avatar">
+                <Avatar alt={item?.userName} size={60} {...avataProps} src={item.avatar} />
+              </div>
+              <ul className="abt-user-item-info">
+                {itemConfigs.map((configItem) => (
+                  <li className="abt-user-item-info__item">
+                    <span>{configItem.label}</span>
+                    <span>{item?.[configItem.key]}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </List.Item>
+      );
+    },
+    [selectProps.value],
+  );
+
+  // 自定义下拉内容
+  const dropdownRender = (menu: React.ReactNode) => (
+    <div ref={listRef}>
+      <Spin spinning={loading}>
+        <List
+          loading={loadingMore}
+          dataSource={list}
+          renderItem={renderItem ? renderItem : defaultRenderItem}
+          /*@ts-ignore*/
+          onScroll={handleScroll}
+          style={{ maxHeight: 250, overflowY: "auto" }}
+        />
+      </Spin>
+    </div>
+  );
+
+  return (
+    <Select
+      {...selectProps}
+      ref={selectInstance}
+      showSearch
+      onSearch={handleSearch}
+      filterOption={false}
+      dropdownRender={dropdownRender}
+      placeholder="请选择人员"
+      // 增加虚拟的options用于显示选中标签
+      options={list.map((item) => ({
+        value: item.userId,
+        label: item.userName,
+      }))}
+    />
+  );
+};
+
+// Formily集成
+const PersonnelSelect = connect(
+  RemoteSelect,
+  mapProps(
+    {
+      loading: true,
+    },
+    (props, field: any) => {
+      return {
+        ...props,
+      };
+    },
+  ),
+);
+
+export { RemoteSelect, PersonnelSelect };

package/src/components/index.tsx

@@ -5,6 +5,7 @@ export * from "./ArrayTable";
 export * from "./Upload";
 
 export * from "./UserSelect";
+export * from "./PersonnelSelect"
 
 export * from "./TreeCheckbox";
 export * from "./DatePicker";

package/src/index.less

@@ -1,22 +1,18 @@
 .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,7 +37,6 @@ import { GlobalPropsContext } from "./common/global-props-context";
 import { bindOnChange } from "./common/schema-handler";
 
 import "./index.less";
-import "./custom-theme.less";
 
 const antdComponents = {
   Form,
@@ -164,16 +163,13 @@ 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}`}
+        className={`form-render ${props.className}`}
         layout={props.layout}
         form={formRender}
         labelCol={props.schema.form.labelCol}

package/src/custom-theme.less

@@ -1,488 +0,0 @@
-@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;
-  }
-}