fix: Modify UI reviews (opentiny#1786)

Author: xuanlid

packages/configurator/src/model-api-configurator/ModelApiConfigurator.vue

@@ -4,7 +4,7 @@
     trigger="manual"
     v-model="isShow"
     :visible-arrow="false"
-    :popper-class="['option-popper', 'fixed-left']"
+    :popper-class="['option-popper', 'fixed-left', 'model-function-popper']"
     :offset="isSecond ? 652 : 0"
     width="600"
   >
@@ -230,7 +230,7 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 8px 0 20px 0;
+    margin: 8px 16px 20px 16px;
     .right {
       svg {
         margin-left: 10px;
@@ -286,7 +286,10 @@ onMounted(() => {
 
     .model-param-wrap {
       .tiny-form {
-        padding: 12px;
+        padding: 12px 28px;
+      }
+      .tiny-collapse.tiny-collapse .tiny-collapse-item {
+        padding: 0 12px;
       }
     }
   }
@@ -318,3 +321,10 @@ onMounted(() => {
   color: var(--te-common-text-secondary);
 }
 </style>
+<style lang="less">
+.model-function-popper.model-function-popper.model-function-popper.model-function-popper {
+  border-radius: 0;
+  box-shadow: -6px 0px 3px 0px var(--te-configurator-common-panel-shadow-color);
+  padding: 0;
+}
+</style>

packages/configurator/src/model-configurator/ModelConfigurator.vue

@@ -6,7 +6,7 @@
         trigger="manual"
         v-model="isShow"
         :visible-arrow="false"
-        :popper-class="['option-popper', 'fixed-left']"
+        :popper-class="['option-popper', 'fixed-left', 'model-popper']"
       >
         <div class="model-title">
           <span>绑定模型数据</span>
@@ -424,27 +424,23 @@ onMounted(() => {
 .model-container {
   width: 100%;
   line-height: 28px;
-  background-color: var(--ti-lowcode-input-bg);
   &:hover {
     cursor: pointer;
   }
-  .model-name-warp {
-    border: 1px solid var(--ti-lowcode-component-input-border-color);
-  }
   .meta-model-title {
-    color: #808080;
+    color: var(--te-configurator-common-text-color-weaken);
   }
   .meta-array-wrap {
     font-size: 12px;
-    border: 1px solid #dbdbdb;
+    border: 1px solid var(--te-configurator-common-border-color);
     border-radius: 4px;
     display: block;
     :deep(.tiny-search) {
       padding: 0 10px;
       .tiny-search__line {
         border: none;
         border-radius: 0;
-        border-bottom: 1px solid var(--ti-search-input-border-color);
+        border-bottom: 1px solid var(--te-configurator-common-border-color);
       }
     }
     .meta-array-header {
@@ -567,3 +563,9 @@ onMounted(() => {
   }
 }
 </style>
+<style lang="less">
+.model-popper.model-popper.model-popper.model-popper {
+  border-radius: 0;
+  box-shadow: -6px 0px 3px 0px var(--te-configurator-common-panel-shadow-color);
+}
+</style>

packages/configurator/src/source-select-configurator/SourceSelectConfigurator.vue

@@ -204,12 +204,11 @@ export default {
 .source-container {
   width: 100%;
   line-height: 28px;
-  background-color: var(--ti-lowcode-input-bg);
   .source-img-wrap {
     position: relative;
     width: 150px;
     height: 96px;
-    background-color: var(--te-common-bg-container);
+    background-color: var(--te-configurator-container-bg-color);
     img {
       width: 100%;
       height: 100%;
@@ -232,7 +231,7 @@ export default {
         width: 70px;
         height: 22px;
         line-height: 22px;
-        border: 1px solid var(--te-common-bg-popover);
+        border: 1px solid var(--te-configurator-common-border-color);
         border-radius: 4px;
         text-align: center;
         color: var(--te-common-text-inverse);

packages/configurator/src/styles/vars.less

@@ -21,6 +21,8 @@
   --te-configurator-common-border-color-divider: var(--te-common-border-divider);
   --te-configurator-common-border-color: var(--te-common-border-default);
 
+  --te-configurator-common-panel-shadow-color: var(--te-common-shadow-panel);
+
   --te-configurator-button-group-bg-color-active: var(--te-common-bg-prompt);
   --te-configurator-button-group-bg-color: var(--te-common-bg-container);