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="84px"
       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"
@@ -66,20 +53,16 @@
         <div v-if="isBlockManage" class="block-detail">
           <div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
             <ul class="list">
-              <tiny-tooltip content="编辑" placement="top">
-                <li class="list-item" @mousedown.stop.left="editBlock({ event: $event, item, index })">
-                  <svg-button class="list-item-svg" name="to-edit"> </svg-button>
-                </li>
-              </tiny-tooltip>
-              <tiny-tooltip content="设置" placement="top">
-                <li
-                  class="list-item"
-                  @mouseover.stop="iconSettingMove"
-                  @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
-                >
-                  <svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
-                </li>
-              </tiny-tooltip>
+              <li class="list-item" @mousedown.stop.left="editBlock({ event: $event, item, index })">
+                <svg-button class="list-item-svg" name="to-edit"> </svg-button>
+              </li>
+              <li
+                class="list-item"
+                @mouseover.stop="iconSettingMove"
+                @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
+              >
+                <svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
+              </li>
             </ul>
           </div>
         </div>
@@ -507,7 +490,7 @@ export default {
         margin-left: 8px;
       }
       .item-text {
-        width: calc(35% - 62px);
+        width: 50%;
       }
       .publish-flag {
         position: static;
@@ -527,6 +510,9 @@ export default {
           }
         }
       }
+      &:hover {
+        background-color: var(--te-common-bg-container);
+      }
     }
     &:nth-child(even) {
       border-right: 0;

packages/layout/src/DesignPlugins.vue

@@ -227,6 +227,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/CategoryEdit.vue

@@ -12,7 +12,7 @@
       show-message
       :model="formData"
       :rules="rules"
-      label-width="80px"
+      label-width="64px"
       :label-align="true"
       label-position="left"
       validate-type="text"

packages/plugins/block/src/Main.vue

@@ -488,9 +488,23 @@ 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;
+    }
+  }
+  :deep(.tiny-dropdown-menu) {
+    padding: var(--te-common-vertical-form-label-spacing) 0;
+  }
   .footer-layout {
     font-size: 12px;
     color: var(--ti-lowcode-component-block-list-item-color);
@@ -511,6 +525,17 @@ export default {
   height: 24px;
   line-height: 24px;
 }
+:deep(.tiny-dropdown-item) {
+  &:not(.is-disabled):active,
+  &:not(.is-disabled):hover,
+  &:focus {
+    background-color: var(--te-common-bg-container);
+    color: var(--te-common-text-primary);
+  }
+}
+:deep(.tiny-dropdown-menu.tiny-popper[x-placement^='top']) {
+  padding: var(--te-common-vertical-form-label-spacing) 0;
+}
 </style>
 
 <style lang="less">
@@ -551,4 +576,7 @@ export default {
     margin-top: 22px;
   }
 }
+.tiny-dropdown-menu.tiny-dropdown-menu {
+  padding: var(--te-common-vertical-form-label-spacing) 0;
+}
 </style>

packages/plugins/block/src/SaveNewBlock.vue

@@ -13,7 +13,7 @@
         :model="formData"
         :rules="rules"
         ref="formRef"
-        label-width="120px"
+        label-width="64px"
         :label-align="true"
         label-position="left"
         validate-type="text"
@@ -24,7 +24,7 @@
         <tiny-form-item label="区块ID" prop="label">
           <TinyInput v-model="formData.label" placeholder="请输入区块ID"></TinyInput>
         </tiny-form-item>
-        <tiny-form-item label="请选择区块分类" prop="group">
+        <tiny-form-item label="区块分类" prop="group">
           <tiny-select v-model="formData.group" :options="categoryList" placeholder="请选择" @change="changeCategory">
           </tiny-select>
         </tiny-form-item>

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;
       }