@hzab/list-render 1.9.2-beta6 → 1.9.3-beta

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.9.4
+
+feat: 增加主题色配置
+
 # @hzab/list-render@1.9.3
 
 feat: 列表请求取消上一次列表请求，解决数据返回先后顺序导致展示异常问题

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.9.2-beta6",
+  "version": "1.9.3-beta",
   "description": "",
   "main": "src",
   "scripts": {
@@ -24,6 +24,7 @@
     "@hzab/form-render": "^1.1.5",
     "@hzab/schema-descriptions": "^1.0.0",
     "@hzab/webpack-config": "^0.7.2",
+    "@hzab/theme-tools": "^0.0.2",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",

package/src/FormModal/index.tsx

@@ -159,7 +159,7 @@ export function FormModal(props, parentRef) {
   const CModal = modalMode === "drawer" ? Drawer : Modal;
   const _modalProps = {
     className: "form-modal",
-    wrapClassName: "form-modal",
+    wrapClassName: `form-modal ${props.schemaScope.className}`,
     title: title,
     visible: open,
     open: open,
@@ -182,6 +182,7 @@ export function FormModal(props, parentRef) {
         <FormRender
           {...props.formProps}
           ref={formRef}
+          customTheme={props.customTheme}
           schema={props.schema}
           schemaScope={{
             scenario: scenarioRef.current,

package/src/custom-theme.less

@@ -0,0 +1,308 @@
+@primaryColor: var(--list-render-primary-color); // 主题色
+@textColor: var(--list-render-color); // 字体颜色
+@bgColor: var(--list-render-bg-color); // 背景颜色
+@tableBgColor: var(--list-render-table-bg-color); // 表格背景颜色
+@tableColor: var(--list-render-table-color); // 表格内字体颜色
+@talbeBorderColor: var(--list-render-table-border-color); // 表格边框颜色
+@tableWrapperBorderColor: var(--list-render-table-wrapper-border-color); // 表格表头下边框颜色
+@tableCellHoverBgColor: var(--list-render-table-cell-hover-bg-color); // 表格单元格滑过背景颜色
+@tableCellHoverColor: var(--list-render-table-cell-hover-color); // 表格单元格滑过字体颜色
+@paginationBgColor: var(--list-render-pagination-bg-color); // 分页背景颜色
+@paginationColor: var(--list-render-pagination-color); // 分页字体颜色
+@paginationItemBgColor: var(--list-render-pagination-item-bg-color); // 页码单项背景颜色
+@paginationItemBorderColor: var(--list-render-pagination-item-border-color); // 页面单项边框颜色
+@paginationItemColor: var(--list-render-pagination-item-color); // 页码单项字体颜色
+@paginationOptionActiveBgColor: var(--list-render-pagination-option-active-bg-color); // 页码选中项&滑过项背景颜色
+@btnOkColor: var(--list-render-btn-ok-color); // 确认按钮字体颜色
+@btnOkBgColor: var(--list-render-btn-ok-bg-color); // 确认按钮背景颜色
+@btnOkBorderColor: var(--list-render-btn-ok-border-color); // 确认按钮边框颜色
+@btnOkBgHoverColor: var(--list-render-btn-ok-bg-hover-color); // 确认按钮滑过字体颜色
+@btnDefaultColor: var(--list-render-btn-default-color); // 默认按钮字体颜色
+@btnDefaultBgColor: var(--list-render-btn-default-bg-color); // 默认按钮背景颜色
+@btnDefaultBorderColor: var(--list-render-btn-default-border-color); // 默认按钮边框颜色
+@btnDefaultBgHoverColor: var(--list-render-btn-default-bg-hover-color); // 默认按钮滑过背景颜色
+@inputColor: var(--list-render-input-color); // 输入框字体颜色
+@formLabelColor: var(--list-render-form-label-color); // 表单项label字体颜色
+@formReqiredColor: var(--list-render-form-required-color); // 表单项必填字体颜色
+@inputHoverColor: var(--list-render-input-hover-color); // 输入框滑过字体颜色
+@inputBgColor: var(--list-render-input-bg-color); // 输入框背景颜色
+@inputBorderColor: var(--list-render-input-border-color); // 输入框边框颜色
+@inputBorderHoverColor: var(--list-render-input-border-hover-color); // 输入框滑过边框颜色
+@selectColor: var(--list-render-select-color); // 选择器字体颜色
+@selectHoverColor: var(--list-render-select-hover-color); // 选择器滑过字体颜色
+@selectBgColor: var(--list-render-select-bg-color); // 选择器背景颜色
+@selectBgHoverColor: var(--list-render-select-bg-hover-color); // 选择器滑过背景颜色
+@selectBorderColor: var(--list-render-select-border-color); // 选择器边框颜色
+@iconColor: var(--list-render-icon-color); // icon图标颜色
+@iconHoverColor: var(--list-render-icon-hover-color); // icon图标滑过颜色
+@iconBgColor: var(--list-render-icon-bg-color); // icon背景颜色
+@iconBgHoverColor: var(--list-render-icon-bg-hover-color); // icon滑过背景颜色
+
+.mixinColor() {
+  .ant-table-cell button.ant-table-row-expand-icon {
+    color: @iconColor;
+    background-color: @iconBgColor;
+
+    &:hover {
+      color: @iconHoverColor;
+      background-color: @iconBgHoverColor;
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .ant-btn {
+    color: @textColor;
+
+    &.ant-btn-link {
+      color: @primaryColor;
+    }
+
+    &.ant-btn-dangerous {
+      color: var(--ant-error-color);
+    }
+  }
+}
+
+
+.table() {
+  .table-render {
+    border-top-color: @tableWrapperBorderColor;
+
+    .ant-table {
+      background-color: @tableBgColor;
+      color: @tableColor;
+
+      .ant-table-tbody {
+        background-color: @bgColor;
+      }
+
+      .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 {
+        border-color: @talbeBorderColor;
+      }
+
+      .ant-table-cell-row-hover {
+        background-color: @tableCellHoverBgColor;
+        color: @tableCellHoverColor;
+      }
+    }
+  }
+}
+
+.list-render-custom-theme {
+  background-color: @bgColor;
+  color: @textColor;
+
+  .mixinColor();
+
+  .table();
+
+  .ant-pagination {
+    background-color: @paginationBgColor;
+    color: @paginationColor;
+
+    .ant-pagination-item,
+    .ant-pagination-prev .ant-pagination-item-link,
+    .ant-pagination-next .ant-pagination-item-link,
+    .ant-pagination-jump-next .ant-pagination-item-link {
+      border-color: @paginationItemBorderColor;
+      background-color: @paginationItemBgColor;
+      color: @paginationItemColor;
+
+      a,
+      .ant-pagination-item-ellipsis {
+        color: @paginationItemColor;
+      }
+
+      &:hover {
+        border-color: @primaryColor;
+        color: @primaryColor;
+
+        a {
+          color: @primaryColor;
+        }
+      }
+
+      &:disabled {
+        border-color: #d9d9d9;
+        color: #d9d9d9;
+      }
+    }
+
+    .ant-pagination-item-active {
+      border-color: @primaryColor;
+
+      a {
+        color: @primaryColor;
+      }
+    }
+
+    .ant-pagination-options {
+      .mixinColor();
+
+      .ant-select:not(.ant-select-disabled) {
+        color: @selectColor;
+
+        &:hover {
+          color: @inputHoverColor;
+
+          .ant-select-selector {
+            border-color: @inputBorderHoverColor;
+          }
+        }
+
+        .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-dropdown[class^="ant-select-dropdown-placement-"],
+      .ant-select-dropdown[class*=" ant-select-dropdown-placement-"],
+      .ant-tree-select-dropdown {
+        background-color: @selectBgColor;
+
+        .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.ant-select-item-option-selected,
+        .ant-select-item.ant-select-item-option-active {
+          color: @selectHoverColor;
+          background-color: @selectBgHoverColor;
+        }
+      }
+    }
+  }
+}
+
+.ant-modal-color() {
+  .ant-modal-content {
+    background-color: @bgColor;
+    color: @textColor;
+
+    .ant-modal-close {
+      color: @textColor;
+    }
+
+    .table();
+
+    .ant-modal-header,
+    .ant-modal-footer {
+      background-color: @bgColor;
+      border-color: @tableWrapperBorderColor;
+
+      .ant-modal-title {
+        color: @textColor;
+      }
+    }
+  }
+}
+
+.list-dialog-custom-theme {
+  .mixinColor();
+  .table();
+  .ant-modal-color();
+}
+
+.list-dialog-custom-theme.ant-tree-select-dropdown {
+  background-color: @selectBgColor;
+
+  .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.ant-select-item-option-selected,
+  .ant-select-item.ant-select-item-option-active {
+    color: @selectHoverColor;
+    background-color: @selectBgHoverColor;
+  }
+}
+
+.form-modal.list-dialog-custom-theme,
+.detail-modal.list-dialog-custom-theme {
+  .ant-modal-color();
+}

package/src/index.less

@@ -3,15 +3,19 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
+
     .header-actions-render {
       text-align: right;
+
       .ant-btn {
         margin-bottom: 12px;
       }
-      .ant-btn + .ant-btn {
+
+      .ant-btn+.ant-btn {
         margin-left: 12px;
       }
     }
+
     &.vertical-header {
       display: block;
     }
@@ -30,4 +34,4 @@
       }
     }
   }
-}
+}

package/src/list-render.jsx

@@ -16,6 +16,7 @@ import DetailModal from "./DetailModal";
 import { objToFormData } from "./common/utils";
 
 import "./index.less";
+import "./custom-theme.less"
 
 const ListRender = forwardRef(function (props, parentRef) {
   const {
@@ -323,9 +324,9 @@ const ListRender = forwardRef(function (props, parentRef) {
   const onFormModalClose = props.onFormDialogClose ?? props.onFormModalClose;
   const modalProps = { ...props.dialogProps, ...props.modalProps };
   const modalFormMount = props.dialogFormMount ?? props.modalFormMount;
-
+  const className =  typeof props.customTheme === 'string' ? `list-render-${props.customTheme}` : props.customTheme === true ? 'list-render-custom-theme' : ''
   return (
-    <div className={`list-render ${props.className}`}>
+    <div className={`list-render ${props.className} ${className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
         {props.hasQuery !== false ? (
           <QueryRender
@@ -343,6 +344,7 @@ const ListRender = forwardRef(function (props, parentRef) {
                 : queryFormInitialValues
             }
             onSearch={onSearch}
+            customTheme={props.customTheme}
             schemaScope={props.schemaScope}
             components={props.components}
             i18n={i18n}
@@ -382,7 +384,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         tableProps={props.tableProps}
         getFieldListOpt={props.getFieldListOpt}
         components={props.components}
-        schemaScope={props.schemaScope}
+        schemaScope={{...props.schemaScope, className: props.customTheme === true ? 'list-dialog-custom-theme': typeof props.customTheme === 'string' ? `list-dialog-custom-theme-${props.customTheme}` : ''}}
         i18n={i18n}
       />
       {props.hasPagination !== false ? (
@@ -400,9 +402,10 @@ const ListRender = forwardRef(function (props, parentRef) {
         schema={schema}
         formInitialValues={props.formInitialValues}
         components={props.components}
-        schemaScope={props.schemaScope}
+        schemaScope={{...props.schemaScope, className: props.customTheme === true ? 'list-dialog-custom-theme': typeof props.customTheme === 'string' ? `list-dialog-custom-theme-${props.customTheme}` : ''}}
         formProps={formProps}
         modalMode={modalMode}
+        customTheme={props.customTheme}
         modalConf={_modalConf}
         onClose={onFormModalClose}
         onSubmit={formState === "edit" ? onEditSubmit : onCreateSubmit}
@@ -417,7 +420,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         schema={schema}
         formInitialValues={props.formInitialValues}
         components={props.detailComponents}
-        schemaScope={props.schemaScope}
+        schemaScope={{...props.schemaScope, className: props.customTheme === true ? 'list-dialog-custom-theme': typeof props.customTheme === 'string' ? `list-dialog-custom-theme-${props.customTheme}` : ''}}
         detailProps={props.dialogDetailProps || props.modalDetailProps}
         modalMode={modalMode}
         modalConf={_modalConf}

package/src/query-render/index.jsx

@@ -56,15 +56,16 @@ function QueryRender(props, parentRef) {
     formRef.current?.formRender?.reset();
     props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender");
   }
-
+  const className =  typeof props.customTheme === 'string' ? `list-render-${props.customTheme}` : props.customTheme === true ? 'list-render-custom-theme' : ''
   return (
-    <div className="query-render">
+    <div className={`query-render ${className}`}>
       {Object.keys(schema?.schema?.properties || {}).length > 0 ? (
         <>
           <FormRender
             ref={formRef}
             layout="inline"
             schema={schema}
+            customTheme={props.customTheme}
             schemaScope={{ scenario: "query", ...(props.schemaScope || {}) }}
             initialValues={props.queryFormInitialValues}
             Slots={() => {