fix: 样式修改

antvis · Sep 14, 2023 · 35827a5 · 35827a5
1 parent a489586
commit 35827a5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 27 deletions.
diff --git a/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx b/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx
@@ -1,6 +1,6 @@
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import type { SelectProps } from 'antd';
-import { Select, Tag } from 'antd';
+import { Select, Tag, Empty } from 'antd';
 import cls from 'classnames';
 import { isUndefined } from 'lodash-es';
 import React, { useState } from 'react';
@@ -25,29 +25,40 @@ const InternalSelect: React.FC<SelectProps<string, FieldSelectOptionType>> = (pr
       popupClassName={cls(`${prefixCls}`, hashId)}
       open={open}
       onDropdownVisibleChange={(visible) => setOpen(visible)}
-      dropdownRender={() => (
-        <div className={`${prefixCls}-dropdown`}>
-          {options?.map((item, index) => {
-            return (
-              <div
-                className={cls(`${prefixCls}-item`, hashId, {
-                  [`${prefixCls}-item_selected`]: item.value === props.value,
-                })}
-                key={index}
-                onClick={() => onOptionClick(item.value)}
-              >
-                {isUndefined(item.type) ? (
-                  <Tag>未知</Tag>
-                ) : (
-                  <Tag color={item.typeColor}>{isUndefined(item.typeName) ? item.type : item.typeName}</Tag>
-                )}
+      dropdownRender={() => {
+        if (!options?.length) {
+          return <Empty description="暂无数据" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+        }
 
-                <span>{item.label}</span>
-              </div>
-            );
-          })}
-        </div>
-      )}
+        const dropdownHeight =
+          40 * options.length < 200 ? 40 * options.length + (options[0].label.length > 9 ? 20 : 0) : 200;
+
+        return (
+          <div className={`${prefixCls}-dropdown`} style={{ height: dropdownHeight }}>
+            <div className={`${prefixCls}-dropdown-container`}>
+              {options?.map((item, index) => {
+                return (
+                  <div
+                    className={cls(`${prefixCls}-item`, hashId, {
+                      [`${prefixCls}-item_selected`]: item.value === props.value,
+                    })}
+                    key={index}
+                    onClick={() => onOptionClick(item.value)}
+                  >
+                    {isUndefined(item.type) ? (
+                      <Tag>未知</Tag>
+                    ) : (
+                      <Tag color={item.typeColor}>{isUndefined(item.typeName) ? item.type : item.typeName}</Tag>
+                    )}
+
+                    <span>{item.label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      }}
     >
       {options?.map((item, index) => {
         return (

diff --git a/packages/li-p2/src/components/Formily/FieldSelect/Select/style.ts b/packages/li-p2/src/components/Formily/FieldSelect/Select/style.ts
@@ -1,16 +1,22 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('field-select', (token) => {
-  const { componentCls, colorPrimaryActive, colorPrimaryHover } = token;
+  const { componentCls, controlItemBgActive, controlItemBgHover } = token;
 
   return {
     [componentCls]: {
       [`${componentCls}-dropdown`]: {
-        maxHeight: 300,
+        maxHeight: 200,
         overflow: 'auto',
         position: 'relative',
       },
 
+      [`${componentCls}-dropdown-container`]: {
+        maxHeight: 200,
+        position: 'absolute',
+        minWidth: '100%',
+      },
+
       [`${componentCls}-item`]: {
         lineHeight: '30px',
         whiteSpace: 'nowrap',
@@ -19,11 +25,11 @@ export default genStyleHook('field-select', (token) => {
         cursor: 'pointer',
 
         '&:hover': {
-          color: colorPrimaryHover,
+          background: controlItemBgHover,
         },
 
         '&_selected': {
-          color: colorPrimaryActive,
+          background: controlItemBgActive,
         },
       },
     },