fix: 样式问题处理

antvis · Sep 15, 2023 · 2bdaab0 · 2bdaab0
1 parent b3116cf
commit 2bdaab0
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 6 deletions.
diff --git a/...c/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.less b/...c/widgets/LayersPanel/LayerAttribute/BaseFormSchemaField/VisTypeSelect/VisTypeSelect.less
@@ -5,6 +5,10 @@
 @prefix-select-cls: ~'@{prefix}-vis-type-select';
 
 .@{prefix-select-cls} {
+  .ant-select-selection-item {
+    height: 30px;
+  }
+
   &__drop-down {
     display: flex;
     flex-wrap: wrap;

diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/style.ts b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/style.ts
@@ -1,12 +1,16 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('color-range-selector', (token) => {
-  const { componentCls, antCls } = token;
-
+  const { componentCls, antCls, controlHeight, lineWidth } = token;
+  const selectHeightWithoutBorder = controlHeight - lineWidth * 2;
   return {
     [componentCls]: {
       maxWidth: 260,
 
+      [`${antCls}-select-selection-item`]: {
+        height: selectHeightWithoutBorder,
+      },
+
       [`${componentCls}__selection-item`]: {
         display: 'flex',
         alignItems: 'center',

diff --git a/packages/li-p2/src/components/Formily/ControlPositionSelect/Select/index.tsx b/packages/li-p2/src/components/Formily/ControlPositionSelect/Select/index.tsx
@@ -13,7 +13,7 @@ const PositionSelect: React.FC<SelectProps> = (props) => {
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   return wrapSSR(
-    <Select {...prop} popupClassName={cls(`${prefixCls}`, hashId)}>
+    <Select {...prop} className={cls(`${prefixCls}-select`, hashId)} popupClassName={cls(`${prefixCls}`, hashId)}>
       {(options ?? POSITION).map((item, index) => {
         return (
           <Select.Option value={item.value} key={index}>

diff --git a/packages/li-p2/src/components/Formily/ControlPositionSelect/Select/style.ts b/packages/li-p2/src/components/Formily/ControlPositionSelect/Select/style.ts
@@ -1,9 +1,16 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('field-select', (token) => {
-  const { componentCls } = token;
+  const { antCls, componentCls, controlHeight, lineWidth } = token;
+  const selectHeightWithoutBorder = controlHeight - lineWidth * 2;
 
   return {
+    [`${componentCls}-select`]: {
+      [`${antCls}-select-selection-item`]: {
+        height: selectHeightWithoutBorder,
+      },
+    },
+
     [componentCls]: {
       [`${componentCls}-item`]: {
         lineHeight: '30px',

diff --git a/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx b/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx
@@ -22,6 +22,7 @@ const InternalSelect: React.FC<SelectProps<string, FieldSelectOptionType>> = (pr
   return wrapSSR(
     <Select
       {...prop}
+      className={cls(`${prefixCls}-select`, hashId)}
       popupClassName={cls(`${prefixCls}`, hashId)}
       open={open}
       onDropdownVisibleChange={(visible) => setOpen(visible)}

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,9 +1,16 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('field-select', (token) => {
-  const { componentCls, controlItemBgActive, controlItemBgHover, colorTextDescription } = token;
+  const { antCls, componentCls, controlItemBgActive, controlItemBgHover, controlHeight, lineWidth } = token;
+  const selectHeightWithoutBorder = controlHeight - lineWidth * 2;
 
   return {
+    [`${componentCls}-select`]: {
+      [`${antCls}-select-selection-item`]: {
+        height: selectHeightWithoutBorder,
+      },
+    },
+
     [componentCls]: {
       [`${componentCls}-dropdown`]: {
         maxHeight: 256,

diff --git a/packages/li-p2/src/components/Formily/RibbonSelect/RibbonSelect/style.ts b/packages/li-p2/src/components/Formily/RibbonSelect/RibbonSelect/style.ts
@@ -1,10 +1,15 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('ribbon-select', (token) => {
-  const { componentCls } = token;
+  const { componentCls, antCls, controlHeight, lineWidth } = token;
+  const selectHeightWithoutBorder = controlHeight - lineWidth * 2;
 
   return {
     [componentCls]: {
+      [`${antCls}-select-selection-item`]: {
+        height: selectHeightWithoutBorder,
+      },
+
       [`${componentCls}__selection-item`]: {
         display: 'flex',
         alignItems: 'center',