From 8c99b91df49d5160099ba2437a54365a392567d7 Mon Sep 17 00:00:00 2001
From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
Date: Thu, 9 Nov 2023 17:33:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amis-editor/src/plugin/Form/Picker.tsx    |  2 +-
 packages/amis-editor/src/plugin/Images.tsx    |  2 +-
 packages/amis-editor/src/plugin/Nav.tsx       |  1 +
 .../src/renderer/event-control/helper.tsx     |  4 +-
 packages/amis-ui/scss/_properties.scss        | 14 ++-
 .../amis-ui/scss/components/_dropdown.scss    |  6 +-
 packages/amis-ui/scss/components/_menu.scss   |  3 +-
 .../amis-ui/scss/components/_pagination.scss  | 85 +++++++++----------
 packages/amis-ui/scss/components/_tabs.scss   | 41 ++++-----
 .../scss/components/form/_date-range.scss     |  9 +-
 .../amis-ui/scss/components/form/_date.scss   |  8 +-
 .../scss/components/form/_nested-select.scss  | 27 ++++--
 .../amis-ui/scss/components/form/_select.scss | 11 ---
 .../amis-ui/scss/components/form/_text.scss   | 17 ++--
 packages/amis-ui/src/components/Tabs.tsx      |  2 +-
 .../amis/src/renderers/Form/NestedSelect.tsx  |  6 +-
 16 files changed, 114 insertions(+), 124 deletions(-)

diff --git a/packages/amis-editor/src/plugin/Form/Picker.tsx b/packages/amis-editor/src/plugin/Form/Picker.tsx
index 07165aafb5e..35a00ed65ff 100644
--- a/packages/amis-editor/src/plugin/Form/Picker.tsx
+++ b/packages/amis-editor/src/plugin/Form/Picker.tsx
@@ -50,7 +50,7 @@ export class PickerControlPlugin extends BasePlugin {
         value: 'B'
       }
     ],
-    modalClassName: 'app-popover'
+    modalClassName: 'app-popover :AMISCSSWrapper'
   };
   previewSchema: any = {
     type: 'form',
diff --git a/packages/amis-editor/src/plugin/Images.tsx b/packages/amis-editor/src/plugin/Images.tsx
index 1e0349b9145..fc3da2d7f4e 100644
--- a/packages/amis-editor/src/plugin/Images.tsx
+++ b/packages/amis-editor/src/plugin/Images.tsx
@@ -20,7 +20,7 @@ export class ImagesPlugin extends BasePlugin {
   pluginIcon = 'images-plugin';
   scaffold = {
     type: 'images',
-    imageGallaryClassName: 'app-popover'
+    imageGallaryClassName: 'app-popover :AMISCSSWrapper'
   };
   previewSchema = {
     ...this.scaffold,
diff --git a/packages/amis-editor/src/plugin/Nav.tsx b/packages/amis-editor/src/plugin/Nav.tsx
index 0b68a7582a7..6157c9c1435 100644
--- a/packages/amis-editor/src/plugin/Nav.tsx
+++ b/packages/amis-editor/src/plugin/Nav.tsx
@@ -29,6 +29,7 @@ export class NavPlugin extends BasePlugin {
   scaffold = {
     type: 'nav',
     stacked: true,
+    popupClassName: 'app-popover :AMISCSSWrapper',
     links: [
       {
         label: '页面1',
diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx
index 36fd16ef458..06b382ee149 100644
--- a/packages/amis-editor/src/renderer/event-control/helper.tsx
+++ b/packages/amis-editor/src/renderer/event-control/helper.tsx
@@ -3212,7 +3212,7 @@ export const getEventControlConfig = (
           showCloseButton: true,
           showErrorMsg: true,
           showLoading: true,
-          className: 'app-popover',
+          className: 'app-popover :AMISCSSWrapper',
           actions: [
             {
               type: 'button',
@@ -3239,7 +3239,7 @@ export const getEventControlConfig = (
               inline: false
             }
           ],
-          className: 'app-popover',
+          className: 'app-popover :AMISCSSWrapper',
           actions: [
             {
               type: 'button',
diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss
index 19aec048c1d..466457909c3 100644
--- a/packages/amis-ui/scss/_properties.scss
+++ b/packages/amis-ui/scss/_properties.scss
@@ -274,22 +274,18 @@ $Table-strip-bg: transparent;
   --DropDown-menu-borderColor: var(--borderColor);
   --DropDown-menu-borderRadius: var(--borderRadius);
   --DropDown-menu-borderWidth: var(--borderWidth);
-  --DropDown-menu-boxShadow: var(--shadows-shadow-normal);
-  --DropDown-menu-height: #{px2rem(34px)};
+  --DropDown-menu-boxShadow: var(--Form-select-outer-boxShadow);
+  --DropDown-menu-height: #{px2rem(32px)};
   --DropDown-menu-minWidth: #{px2rem(160px)};
   --DropDown-menu-paddingX: 0;
   --DropDown-menu-paddingY: var(--gap-xs);
-  --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
+  --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg);
   --DropDown-group-color: #848b99;
   --DropDown-menuItem-color: #151a26;
-  --DropDown-menuItem-onHover-color: var(--colors-brand-5);
+  --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color);
   --DropDown-menuItem-onActive-color: var(--colors-brand-5);
   --DropDown-menuItem-onDisabled-color: #b4b6ba;
-  --DropDown-menuItem-paddingX: var(--gap-sm);
-  --DropDown-menuItem-paddingY: calc(
-    (var(--DropDown-menu-height) - var(--fontSizeBase) * var(--lineHeightBase)) /
-      2
-  );
+  --DropDown-menuItem-paddingX: var(--select-base-default-option-paddingRight);
 
   --Fieldset-legend-bgColor: var(--colors-neutral-fill-11);
 
diff --git a/packages/amis-ui/scss/components/_dropdown.scss b/packages/amis-ui/scss/components/_dropdown.scss
index fd2eaad3117..b1665b58f2d 100644
--- a/packages/amis-ui/scss/components/_dropdown.scss
+++ b/packages/amis-ui/scss/components/_dropdown.scss
@@ -57,6 +57,7 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: px2rem(300px);
+      margin-top: px2rem(4px);
     }
   }
 
@@ -67,10 +68,11 @@
 
   &-menuItem,
   &-menu > li {
-    padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
+    padding: 0 var(--DropDown-menuItem-paddingX);
     white-space: nowrap;
     box-sizing: border-box;
     height: var(--DropDown-menu-height);
+    line-height: var(--DropDown-menu-height);
     vertical-align: middle;
     user-select: none;
     color: var(--DropDown-menuItem-color);
@@ -95,7 +97,7 @@
 
     &.#{$ns}DropDown-divider {
       height: px2rem(1px);
-      margin: px2rem(9px) 0;
+      margin: px2rem(4px) 0;
       overflow: hidden;
       background: var(--DropDown-menu-borderColor);
       padding: 0;
diff --git a/packages/amis-ui/scss/components/_menu.scss b/packages/amis-ui/scss/components/_menu.scss
index de013415240..ef1c19979bc 100644
--- a/packages/amis-ui/scss/components/_menu.scss
+++ b/packages/amis-ui/scss/components/_menu.scss
@@ -519,14 +519,13 @@
     .#{$ns}Nav-Menu-submenu-arrow {
       display: inline-block;
       font-size: px2rem(9px);
-      vertical-align: middle;
       text-transform: none;
       text-rendering: auto;
       line-height: px2rem(20px);
       margin-left: px2rem(5px);
 
       & > svg {
-        top: auto;
+        top: 0;
       }
     }
 
diff --git a/packages/amis-ui/scss/components/_pagination.scss b/packages/amis-ui/scss/components/_pagination.scss
index 72f7a821909..f54d27bb86f 100644
--- a/packages/amis-ui/scss/components/_pagination.scss
+++ b/packages/amis-ui/scss/components/_pagination.scss
@@ -74,7 +74,7 @@
     }
   }
   &-simple {
-    >ul >li {
+    > ul > li {
       &:hover,
       &:focus {
         outline: none;
@@ -94,8 +94,6 @@
     }
   }
 
-
-
   &-next {
     > span {
       cursor: pointer;
@@ -113,47 +111,47 @@
     align-items: center;
     height: var(--Pagination-height);
 
-      &-left {
-        color: var(--Pagination-light-color);
-      }
-      input {
-        min-width: px2rem(50px);
-        width: px2rem(50px);
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        // height: var(--Pagination-height);
-        border: none;
-        border: var(--borderWidth) solid var(--borderColor);
-        border-radius: var(--borderRadius) 0 0 var(--borderRadius);
-        padding: var(--Pagination-padding);
-        margin-left: px2rem(8px);
-        text-align: center;
-
-        &:focus,
-        &:hover {
-          outline: none;
-          // border: var(--borderWidth) solid var(--primary);
-          border-color: var(--primary);
-        }
+    &-left {
+      color: var(--Pagination-light-color);
+    }
+    input {
+      min-width: px2rem(50px);
+      width: px2rem(50px);
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      // height: var(--Pagination-height);
+      border: none;
+      border: var(--borderWidth) solid var(--borderColor);
+      border-radius: var(--borderRadius) 0 0 var(--borderRadius);
+      padding: var(--Pagination-padding);
+      margin-left: px2rem(8px);
+      text-align: center;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        // border: var(--borderWidth) solid var(--primary);
+        border-color: var(--primary);
       }
-      &-right {
-        display: inline-block;
-        width: px2rem(32px);
-        cursor: pointer;
-        text-align: center;
-        height: var(--Pagination-height);
-        line-height: var(--Pagination-height);
-        border: var(--borderWidth) solid var(--borderColor);
-        border-left: none;
-        border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
-        font-size: var(--fontSizeSm);
-        &:hover {
-          color: var(--primary);
-          border-color: var(--primary);
-          border-left: var(--borderWidth) solid var(--primary);
-          margin-left: -1px;
-        }
+    }
+    &-right {
+      display: inline-block;
+      width: px2rem(32px);
+      cursor: pointer;
+      text-align: center;
+      height: var(--Pagination-height);
+      line-height: var(--Pagination-height);
+      border: var(--borderWidth) solid var(--borderColor);
+      border-left: none;
+      border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
+      font-size: var(--fontSizeSm);
+      &:hover {
+        color: var(--primary);
+        border-color: var(--primary);
+        border-left: var(--borderWidth) solid var(--primary);
+        margin-left: -1px;
       }
+    }
   }
 }
 
@@ -161,7 +159,6 @@
   line-height: px2rem(30px);
 
   .#{$ns}Pagination-item {
-    margin-left: px2rem(8px);
     &:nth-child(1) {
       margin-left: 0;
     }
@@ -198,4 +195,4 @@
   }
 
   text-align: right;
-}
\ No newline at end of file
+}
diff --git a/packages/amis-ui/scss/components/_tabs.scss b/packages/amis-ui/scss/components/_tabs.scss
index 04e4f29ee3b..eeee8e011fd 100644
--- a/packages/amis-ui/scss/components/_tabs.scss
+++ b/packages/amis-ui/scss/components/_tabs.scss
@@ -18,10 +18,10 @@
 
     .#{$ns}Tabs-addable {
       display: flex;
-      margin-left: var(--Tabs-add-margin);
       align-items: center;
-      justify-content: flex-start;
-      padding: var(--Tabs--line-addPadding);
+      margin-left: var(--Tabs-add-margin);
+      margin-bottom: px2rem(3px);
+      padding-bottom: px2rem(8px);
       white-space: nowrap;
       cursor: pointer;
 
@@ -60,16 +60,19 @@
       // }
 
       &-arrow {
-        margin: var(--Tabs--line-addPadding);
         width: 16px;
         height: 100%;
         display: flex;
         align-items: center;
         cursor: pointer;
         box-sizing: content-box;
+        margin-bottom: px2rem(3px);
+        padding-bottom: px2rem(8px);
 
-        .iconfont {
-          font-size: var(--Remark-icon-fontSize);
+        .icon {
+          top: 0;
+          width: var(--Remark-icon-fontSize);
+          height: var(--Remark-icon-fontSize);
         }
         &:hover {
           color: var(--icon-onHover-color);
@@ -77,6 +80,9 @@
 
         &--left {
           padding-right: 16px;
+          svg {
+            transform: rotate(180deg);
+          }
         }
 
         &--right {
@@ -672,6 +678,7 @@
       .#{$ns}Tabs-addable {
         padding: 0 var(--Tabs--tiled-add-gap);
         margin-left: 0;
+        margin-bottom: 0;
         white-space: nowrap;
         border-style: solid;
         border-color: var(--Tabs-borderColor);
@@ -1112,6 +1119,7 @@
       & > .#{$ns}Tabs-linksContainer {
         > .#{$ns}Tabs-linksContainer-arrow {
           margin-bottom: 0;
+          padding: 0;
         }
 
         > .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
@@ -1224,21 +1232,6 @@
       > .#{$ns}Tabs-linksContainer {
         margin-bottom: calc(var(--Tabs-borderWidth) * -1);
 
-        &.#{$ns}Tabs-linksContainer--overflow
-          > .#{$ns}Tabs-linksContainer-main
-          > .#{$ns}Tabs-links
-          > .#{$ns}Tabs-link {
-          &:first-of-type {
-            border-left-width: 0;
-            border-top-left-radius: 0;
-          }
-
-          &:last-of-type {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-          }
-        }
-
         .#{$ns}Tabs-linksContainer-arrow {
           width: var(--Tabs--strong-arrow-size);
           margin-bottom: 0;
@@ -1250,14 +1243,14 @@
 
           &--left {
             padding-right: 0;
-            border-right-width: 0;
             border-top-left-radius: var(--Tabs-borderRadius);
+            margin-right: px2rem(8px);
           }
 
           &--right {
             padding-left: 0;
-            border-left-width: 0;
-            border-top-right-radius: var(--Tabs-borderRadius);
+            border-top-left-radius: var(--Tabs-borderRadius);
+            margin-left: px2rem(8px);
           }
         }
 
diff --git a/packages/amis-ui/scss/components/form/_date-range.scss b/packages/amis-ui/scss/components/form/_date-range.scss
index 472bd0a728e..d1cb8b22f83 100644
--- a/packages/amis-ui/scss/components/form/_date-range.scss
+++ b/packages/amis-ui/scss/components/form/_date-range.scss
@@ -257,12 +257,9 @@
 }
 
 .#{$ns}DateRangePicker-popover {
-  margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 .#{$ns}DateRangePicker-popup {
diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss
index 8dbb8315035..fdaf4b64fef 100644
--- a/packages/amis-ui/scss/components/form/_date.scss
+++ b/packages/amis-ui/scss/components/form/_date.scss
@@ -200,11 +200,9 @@
 
 .#{$ns}DatePicker-popover {
   margin: px2rem(2px) 0 0;
-
-  &.#{$ns}PopOver--leftTopLeftBottom,
-  &.#{$ns}PopOver--rightTopRightBottom {
-    margin: px2rem(-2px) 0 0;
-  }
+  border: var(--Form-select-outer-borderWidth) solid
+    var(--Form-input-onFocused-borderColor);
+  box-shadow: var(--Form-select-outer-boxShadow);
 }
 
 // 移动端输入框样式
diff --git a/packages/amis-ui/scss/components/form/_nested-select.scss b/packages/amis-ui/scss/components/form/_nested-select.scss
index 86743da5e13..e54305cf144 100644
--- a/packages/amis-ui/scss/components/form/_nested-select.scss
+++ b/packages/amis-ui/scss/components/form/_nested-select.scss
@@ -4,7 +4,7 @@
   .#{$ns}NestedSelect-menu {
     padding-top: px2rem(4px);
     padding-bottom: px2rem(4px);
-    box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
+    box-shadow: var(--Form-select-outer-boxShadow);
   }
 }
 
@@ -18,8 +18,6 @@
 
   &-optionArrowRight {
     display: inline-block;
-    padding-right: var(--Form-select-icon-rigin);
-
     svg {
       width: px2rem(10px);
       height: px2rem(10px);
@@ -29,6 +27,12 @@
     }
   }
 
+  &-optionArrowRight.is-disabled {
+    svg {
+      color: var(--text--muted-color);
+    }
+  }
+
   &-menuOuter {
     display: flex;
   }
@@ -56,19 +60,23 @@
     max-height: px2rem(175px);
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
-    border: var(--Form-select-outer-borderWidth) solid
-      var(--Form-input-onFocused-borderColor);
+    border-radius: var(--borderRadius);
     box-shadow: var(--Form-select-outer-boxShadow);
     overflow-y: auto;
     overflow-x: hidden;
-
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
     &:not(:first-child) {
       border-left: 0;
+      margin-left: px2rem(4px);
     }
 
     .#{$ns}NestedSelect-option {
       position: relative;
-      padding-left: var(--gap-md);
+      padding: var(--select-base-default-option-paddingTop)
+        var(--select-base-default-option-paddingRight)
+        var(--select-base-default-option-paddingBottom)
+        var(--select-base-default-option-paddingLeft);
       min-height: var(--select-base-default-option-line-height);
       line-height: var(--select-base-default-option-line-height);
       cursor: pointer;
@@ -122,3 +130,8 @@
     height: px2rem(340px);
   }
 }
+
+.#{$ns}NestedSelect-popover {
+  border: none;
+  box-shadow: none;
+}
diff --git a/packages/amis-ui/scss/components/form/_select.scss b/packages/amis-ui/scss/components/form/_select.scss
index 6b3753821c0..7f2f7c416c3 100644
--- a/packages/amis-ui/scss/components/form/_select.scss
+++ b/packages/amis-ui/scss/components/form/_select.scss
@@ -584,26 +584,15 @@
 }
 
 .#{$ns}Select-popover {
-  margin-top: calc(var(--Form-select-outer-borderWidth) * -1);
-
   background: var(--Form-select-menu-bg);
   color: var(--Form-select-menu-color);
   border: var(--Form-select-outer-borderWidth) solid
     var(--Form-input-onFocused-borderColor);
   box-shadow: var(--Form-select-outer-boxShadow);
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   // min-width: px2rem(100px);
 
   // PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
   // z-index: 10;
-
-  &.#{$ns}PopOver--leftTopLeftBottom {
-    margin-top: calc(
-      (var(--Form-select-popoverGap) - var(--Form-select-outer-borderWidth)) *
-        -1
-    );
-  }
 }
 
 .#{$ns}SelectControl {
diff --git a/packages/amis-ui/scss/components/form/_text.scss b/packages/amis-ui/scss/components/form/_text.scss
index 46fd4fc991d..164392304a6 100644
--- a/packages/amis-ui/scss/components/form/_text.scss
+++ b/packages/amis-ui/scss/components/form/_text.scss
@@ -319,7 +319,10 @@
     background: var(--Form-select-menu-bg);
     color: var(--Form-select-menu-color);
     border-radius: px2rem(2px);
-    box-shadow: var(--menu-box-shadow);
+    box-shadow: var(--Form-select-outer-boxShadow);
+    border: var(--Form-select-outer-borderWidth) solid
+      var(--Form-input-onFocused-borderColor);
+    padding: px2rem(4px) 0;
   }
 
   &-sugs {
@@ -328,13 +331,11 @@
   }
 
   &-sugItem {
-    padding: calc(
-        (
-            var(--Form-selectOption-height) - var(--Form-input-lineHeight) *
-              var(--Form-input-fontSize) - #{px2rem(2px)}
-          ) / 2
-      )
-      px2rem(12px);
+    padding: var(--select-base-default-option-paddingTop)
+      var(--select-base-default-option-paddingRight)
+      var(--select-base-default-option-paddingBottom)
+      var(--select-base-default-option-paddingLeft);
+    line-height: var(--select-base-default-option-line-height);
 
     svg {
       width: px2rem(16px);
diff --git a/packages/amis-ui/src/components/Tabs.tsx b/packages/amis-ui/src/components/Tabs.tsx
index ea5c2f0f5a5..fc2bd6b0ae6 100644
--- a/packages/amis-ui/src/components/Tabs.tsx
+++ b/packages/amis-ui/src/components/Tabs.tsx
@@ -738,7 +738,7 @@ export class Tabs extends React.Component<TabsProps, any> {
           disabled && 'Tabs-linksContainer-arrow--disabled'
         )}
       >
-        <i className={'iconfont icon-arrow-' + type} />
+        <Icon icon="right-arrow-bold" className="icon" />
       </div>
     ) : null;
   }
diff --git a/packages/amis/src/renderers/Form/NestedSelect.tsx b/packages/amis/src/renderers/Form/NestedSelect.tsx
index 4eee55e9877..a4676a0f31e 100644
--- a/packages/amis/src/renderers/Form/NestedSelect.tsx
+++ b/packages/amis/src/renderers/Form/NestedSelect.tsx
@@ -728,7 +728,11 @@ export default class NestedSelectControl extends React.Component<
                   </div>
 
                   {option.children && option.children.length ? (
-                    <div className={cx('NestedSelect-optionArrowRight')}>
+                    <div
+                      className={cx('NestedSelect-optionArrowRight', {
+                        'is-disabled': nodeDisabled
+                      })}
+                    >
                       <Icon icon="right-arrow-bold" className="icon" />
                     </div>
                   ) : null}