fix: Modify UI review comments

packages/common/component/BlockDeployDialog.vue

@@ -10,7 +10,7 @@
     <tiny-form
       ref="deployBlockRef"
       label-position="left"
-      label-width="100px"
+      label-width="90px"
       label-align
       :model="formState"
       :rules="formRules"
@@ -24,7 +24,7 @@
       <tiny-form-item label="保存设置" prop="needToSave" class="form-item-save">
         <tiny-checkbox v-model="formState.needToSave">发布成功后保存最新数据</tiny-checkbox>
       </tiny-form-item>
-      <tiny-form-item label="schema比对">
+      <tiny-form-item label="schema比对" class="schema-compare">
         <tiny-button class="compare-button" type="text" @click="changeCompare"> 查看本次发布的改动点 </tiny-button>
         <tiny-popover
           placement="top"
@@ -254,6 +254,11 @@ export default {
     line-height: 0;
   }
 }
+.schema-compare {
+  :deep(.tiny-button) {
+    padding-left: 0;
+  }
+}
 .compare-button {
   padding-left: 0;
   padding-right: 8px;

packages/common/component/PluginBlockList.vue

@@ -1,10 +1,4 @@
 <template>
-  <div v-if="blockStyle === BlockStyles.Mini" class="header">
-    <div class="col-checkbox"></div>
-    <div class="col-name">区块名称</div>
-    <div class="col-time">创建时间</div>
-    <div class="col-created-by">创建人</div>
-  </div>
   <ul
     v-if="state.data.length || showAddButton"
     :class="[
@@ -45,13 +39,6 @@
           <div v-if="blockStyle === BlockStyles.List" class="item-description">{{ item.description }}</div>
         </div>
 
-        <div v-if="blockStyle === BlockStyles.Mini" class="cell cell-time">
-          <span>{{ format(item.created_at, 'yyyy/MM/dd hh:mm:ss') }}</span>
-        </div>
-        <div v-if="blockStyle === BlockStyles.Mini" class="cell cell-created-by">
-          <span>{{ users.find((user) => user.id === item.createdBy)?.name || item.id }}</span>
-        </div>
-
         <div v-if="item.isShowProgress" class="progress-bar">
           <tiny-progress
             :text-inside="true"
@@ -507,7 +494,7 @@ export default {
         margin-left: 8px;
       }
       .item-text {
-        width: calc(35% - 62px);
+        width: 50%;
       }
       .publish-flag {
         position: static;
@@ -527,6 +514,9 @@ export default {
           }
         }
       }
+      &:hover {
+        background-color: var(--te-common-bg-container);
+      }
     }
     &:nth-child(even) {
       border-right: 0;

packages/layout/src/DesignPlugins.vue

@@ -201,6 +201,9 @@ export default {
     :deep(.tiny-tabs__nav.is-show-active-bar) .tiny-tabs__item {
       margin-right: 0;
     }
+    :deep(.tiny-tabs.tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap-not-separator::after) {
+      background-color: transparent;
+    }
   }
 }
 

packages/layout/src/DesignSettings.vue

@@ -105,7 +105,7 @@ export default {
       }
 
       .tiny-tabs__item__title {
-        padding-bottom: 2px;
+        padding-bottom: 6px;
       }
     }
 

packages/plugins/block/src/BlockGroupArrange.vue

@@ -48,25 +48,23 @@ export default {
 <style lang="less" scoped>
 .footer-toolbar {
   .icon-wrap {
-    width: 20px;
-    height: 20px;
-    color: var(--ti-lowcode-text-color);
+    width: 24px;
+    height: 24px;
+    color: var(--te-common-icon-secondary);
     font-size: 16px;
-    border-radius: 2px;
+    border-radius: 4px;
+    background-color: var(--te-common-bg-container);
+    border: 1px solid var(--te-common-bg-container);
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     transition: 0.3s;
-    &:hover {
-      color: var(--ti-lowcode-common-primary-color);
-    }
     &.active {
-      color: var(--ti-lowcode-common-primary-color);
+      border: 1px solid var(--te-common-border-active);
+      color: var(--te-common-text-primary);
+      background-color: var(--te-common-bg-default);
     }
   }
-  .icon-wrap + .icon-wrap {
-    margin-left: 8px;
-  }
 }
 </style>

packages/plugins/block/src/Main.vue

@@ -488,9 +488,20 @@ export default {
   right: 0;
   padding: 10px 16px;
   background-color: var(--ti-lowcode-component-search-bg);
+  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.16);
   color: var(--ti-lowcode-component-block-list-item-color);
   display: flex;
   justify-content: space-between;
+  :deep(.tiny-dropdown) {
+    color: var(--te-common-text-primary);
+    .tiny-dropdown__trigger:not(.tiny-dropdown__caret-button):not(.is-disabled):hover {
+      color: var(--te-common-text-primary);
+    }
+    .tiny-dropdown__suffix-inner {
+      color: var(--te-common-icon-secondary);
+      height: 10px;
+    }
+  }
   .footer-layout {
     font-size: 12px;
     color: var(--ti-lowcode-component-block-list-item-color);

packages/plugins/block/src/SaveNewBlock.vue

@@ -13,7 +13,7 @@
         :model="formData"
         :rules="rules"
         ref="formRef"
-        label-width="120px"
+        label-width="100px"
         :label-align="true"
         label-position="left"
         validate-type="text"

packages/plugins/bridge/src/BridgeSetting.vue

@@ -364,11 +364,11 @@ export default {
 }
 
 .code-preview {
-  font-size: 14px;
+  font-size: 12px;
   line-height: 20px;
-  color: var(--ti-lowcode-birdge-code-preview-color);
-  background-color: var(--ti-lowcode-birdge-code-preview-bg-color);
-  border-radius: 6px;
+  background: var(--te-common-bg-container);
+  color: var(--te-common-text-weaken);
+  border-radius: 4px;
 
   & .pre-title {
     font-family: Microsoft YaHei;

packages/plugins/datasource/src/Main.vue

@@ -16,7 +16,10 @@
       ></svg-button>
     </template>
     <template #content>
-      <tiny-button class="add-data-source" @click="openDataSourceFormPanel()"> 添加数据源 </tiny-button>
+      <tiny-button class="add-data-source" @click="openDataSourceFormPanel()">
+        <svg-icon name="add" class="add-data-source-icon"></svg-icon>
+        <span class="add-data-source-text">添加数据源</span>
+      </tiny-button>
       <data-source-list @edit="openDataSourceFormPanel"></data-source-list>
     </template>
   </plugin-panel>
@@ -155,11 +158,21 @@ export default {
 }
 .add-data-source {
   margin: 0 12px 12px 12px;
+  height: 24px;
   color: var(--ti-lowcode-data-source-color);
 
   &:hover {
     color: var(--ti-lowcode-meta-codeEditor-hover-color);
-    border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
+    border-color: var(--te-common-border-hover);
+  }
+  .add-data-source-icon {
+    font-size: 16px;
+    color: var(--te-common-icon-secondary);
+    margin-right: 4px;
+    vertical-align: sub;
+  }
+  .add-data-source-text {
+    display: inline-block;
   }
 }
 :deep(.help-box) {

packages/plugins/i18n/src/Main.vue

@@ -18,7 +18,9 @@
         </tiny-input>
       </div>
       <div class="btn-box">
-        <tiny-button @click="openEditor($event, {})"><icon-plus class="btn-icon"></icon-plus>添加词条</tiny-button>
+        <tiny-button @click="openEditor($event, {})">
+          <svg-icon name="add" class="btn-icon"></svg-icon>添加词条
+        </tiny-button>
         <tiny-button class="middle-btn" @click="batchDelete" :disabled="!selectedRowLength"
           ><svg-icon class="btn-icon" name="delete"></svg-icon>删除</tiny-button
         >
@@ -124,7 +126,7 @@
 import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveComponent } from 'vue'
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
-import { iconLoadingShadow, iconPlus, iconUpload } from '@opentiny/vue-icon'
+import { iconLoadingShadow, iconUpload } from '@opentiny/vue-icon'
 import { PluginPanel, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useTranslate, useModal, useHelp, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
@@ -143,7 +145,6 @@ export default {
     TinySelect: Select,
     TinyFileUpload: FileUpload,
     SearchEmpty,
-    IconPlus: iconPlus(),
     IconUpload: iconUpload()
   },
   setup() {
@@ -432,6 +433,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.plugin-panel-i18n {
+  box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
+}
 .stripe-tiny-grid {
   word-wrap: break-word;
   #empty-loading-box {
@@ -468,6 +472,14 @@ export default {
   .tiny-select {
     width: 210px;
   }
+  :deep(.tiny-input) {
+    .tiny-input__prefix {
+      line-height: 1;
+    }
+    &.tiny-input-prefix .tiny-input__inner {
+      padding: 0 8px 0 26px;
+    }
+  }
 }
 
 .btn-box {
@@ -478,21 +490,23 @@ export default {
   display: flex;
   align-items: center;
   .btn-icon {
-    margin-right: 6px;
-    color: var(--ti-lowcode-i18n-icon-color);
+    font-size: 16px;
+    color: var(--te-common-icon-secondary);
+    margin-right: 4px;
   }
   .middle-btn {
     margin-left: 0;
   }
-  :deep(.tiny-file-upload) {
-    margin-right: 8px;
+  :deep(.tiny-button.is-disabled) {
+    background-color: var(--te-common-bg-disabled);
+    color: var(--te-common-text-disabled);
   }
   :deep(.tiny-button--default) {
     height: 24px;
     line-height: 24px;
     display: flex;
     align-items: center;
-    border: 1px solid var(--ti-lowcode-i18n-button-border-color);
+    border: 1px solid var(--te-common-border-prompt);
     border-radius: 4px;
   }
   span {
@@ -510,7 +524,7 @@ export default {
   }
   .download-btn {
     cursor: pointer;
-    text-decoration: underline;
+    text-decoration: none;
     display: inline-block;
     font-size: 12px;
     text-align: left;
@@ -522,6 +536,9 @@ export default {
     .tiny-button.tiny-button--text {
       color: var(--ti-lowcode-base-text-color);
     }
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
 
@@ -574,6 +591,7 @@ export default {
     display: flex;
     justify-content: space-between;
     :deep(.icon) {
+      color: var(--te-common-icon-secondary);
       svg {
         font-size: 16px;
       }

packages/plugins/materials/src/meta/component/src/Main.vue

@@ -136,13 +136,17 @@ export default {
     padding: 12px;
   }
 
+  :deep(.tiny-collapse-item__content) {
+    padding: 0 var(--te-common-vertical-form-label-spacing) 4px;
+  }
+
   .component-group {
     display: grid;
     width: 100%;
     color: var(--ti-lowcode-materials-component-list-color);
 
     .component-item {
-      padding: 12px 0;
+      padding: 0 0 var(--te-common-vertical-form-label-spacing);
       text-align: center;
       user-select: none;
       cursor: move;

packages/plugins/materials/src/meta/layout/src/Main.vue

@@ -104,6 +104,16 @@ export default {
   }
 }
 
+:deep(.tiny-tabs__item:first-child) {
+  border-top-left-radius: var(--te-base-border-radius-1);
+  border-bottom-left-radius: var(--te-base-border-radius-1);
+}
+
+:deep(.tiny-tabs__item:last-child) {
+  border-top-right-radius: var(--te-base-border-radius-1);
+  border-bottom-right-radius: var(--te-base-border-radius-1);
+}
+
 .tiny-collapse {
   flex: 1;
   overflow-y: scroll;

packages/plugins/schema/src/Main.vue

@@ -141,20 +141,22 @@ export default {
 
 <style lang="less" scoped>
 #source-code {
-  width: 45vw;
+  width: 50vw;
   height: calc(100% - var(--base-top-panel-height));
-  padding: 12px;
+  padding: 12px 0;
   position: fixed;
   top: var(--base-top-panel-height);
   left: 41px;
   background: var(--ti-lowcode-common-component-bg);
-  box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
+  box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
   z-index: 1000;
   .source-code-header {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
+    align-items: center;
+    border-bottom: 1px solid var(--ti-lowcode-base-split-color-1);
     margin-bottom: 12px;
+    padding: 0 12px 12px;
   }
   .title {
     color: var(--ti-lowcode-plugin-panel-title-color);
@@ -164,7 +166,6 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: 10px;
     .icon-wrap {
       .tiny-button {
         width: 40px;
@@ -194,6 +195,7 @@ export default {
     height: calc(100% - 42px);
     border: 1px solid var(--ti-lowcode-base-gray-101);
     border-radius: 4px;
+    margin: 0 12px;
   }
   .code-edit-content {
     height: 100%;