fix: Modify UI review comments (#916)

* fix:Modify Code Font in bridge/state

* fix:modify the block list style in block

* fix:Modify schema panel style

* fix:Modify tabs in materials

* fix:Modify global dialog, modal and search

* fix:Modify the component list style in materials

* fix:Modify button style

* fix:Modify search in i18n

* fix: Modify UI in Schema Panel

* fix:Modify dialog style and i18n Panel shadow

* fix:Modify the component list style in materials

* fix:Modify the block list style in block

* fix: Modify modal style

* fix: Modify modal in clean

* fix: Modify modal in block

* fix: Modify the block list and modal in block

* fix: modify the block list in block

* fix: modify font size

* fix: Modify global button

* fix: delete comment code

* fix: change plugin-icon-js.svg

Author: xuanlid

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -121,7 +121,6 @@ export default {
         useModal().confirm({
           title: '提示',
           message: renderMsg,
-          status: 'info',
           exec: callback,
           cancel: callback,
           hide: () => {

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"
@@ -34,7 +34,7 @@
           content="区块本地schema和线上新版本schema进行比对"
         >
           <template #reference>
-            <icon-help-circle></icon-help-circle>
+            <svg-icon name="plugin-icon-plugin-help"></svg-icon>
           </template>
         </tiny-popover>
       </tiny-form-item>
@@ -71,7 +71,6 @@
 
 <script>
 import { reactive, ref, watch } from 'vue'
-import { iconHelpCircle } from '@opentiny/vue-icon'
 import {
   Checkbox as TinyCheckbox,
   Input as TinyInput,
@@ -88,7 +87,6 @@ import VueMonaco from './VueMonaco.vue'
 export default {
   components: {
     TinyCheckbox,
-    IconHelpCircle: iconHelpCircle(),
     TinyButton,
     TinyDialogBox,
     TinyForm,
@@ -254,7 +252,15 @@ export default {
     line-height: 0;
   }
 }
+.schema-compare {
+  .tiny-button.tiny-button {
+    padding-left: 0;
+    padding-right: 4px;
+    font-size: 12px;
+  }
+}
 .compare-button {
+  font-size: 12px;
   padding-left: 0;
   padding-right: 8px;
   line-height: 28px;

packages/common/component/LifeCycles.vue

@@ -2,7 +2,7 @@
   <div class="life-cycle">
     <tiny-popover v-model="state.showPopover" placement="bottom-end" trigger="hover" popperClass="option-popper">
       <template #reference>
-        <tiny-button class="life-cycle-btn"><icon-plus class="icon-plus"></icon-plus>添加页面生命周期 </tiny-button>
+        <tiny-button class="life-cycle-btn"><svg-icon name="add"></svg-icon>添加页面生命周期 </tiny-button>
       </template>
       <div class="popover-list">
         <ul>
@@ -72,7 +72,7 @@ import { Button, DialogBox, Popover, Search } from '@opentiny/vue'
 import { useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import MetaListItems from './MetaListItems.vue'
-import { iconYes, iconPlus } from '@opentiny/vue-icon'
+import { iconYes } from '@opentiny/vue-icon'
 import VueMonaco from './VueMonaco.vue'
 import { initCompletion } from '../js/completion'
 import { initLinter, lint } from '../js/linter'
@@ -87,8 +87,7 @@ export default {
     MonacoEditor: VueMonaco,
     SvgButton,
     MetaListItems,
-    IconYes: iconYes(),
-    IconPlus: iconPlus()
+    IconYes: iconYes()
   },
 
   props: {

packages/common/component/PluginBlockList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div v-if="blockStyle === BlockStyles.Mini" class="header">
-    <div class="col-checkbox" v-if="showCheckbox">
+  <div v-if="blockStyle === BlockStyles.Mini && showCheckbox" class="header">
+    <div class="col-checkbox">
       <select-all :allItems="data" :selected="checked" :hidden-label="true" @select-all="handleSelectAll"></select-all>
     </div>
     <div class="col-name">区块名称</div>
@@ -18,7 +18,7 @@
     @mouseleave="state.hover = false"
   >
     <li v-if="showAddButton" class="block-item block-plus" @click="$emit('add')">
-      <span class="block-plus-icon"><icon-plus></icon-plus></span>
+      <span class="block-plus-icon"><svg-icon name="add"></svg-icon></span>
       <div class="item-text">添加区块</div>
     </li>
     <li
@@ -47,13 +47,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"
@@ -68,20 +61,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>
@@ -140,7 +129,6 @@
 <script>
 import { computed, watch, inject, reactive } from 'vue'
 import { format } from '@opentiny/vue-renderless/common/date'
-import { iconPlus } from '@opentiny/vue-icon'
 import { Progress, Tooltip } from '@opentiny/vue'
 import PluginBlockItemImg from './PluginBlockItemImg.vue'
 import SearchEmpty from './SearchEmpty.vue'
@@ -159,7 +147,6 @@ const defaultImg =
 export default {
   components: {
     TinyProgress: Progress,
-    IconPlus: iconPlus(),
     TinyTooltip: Tooltip,
     PluginBlockItemImg,
     SvgButton,
@@ -503,16 +490,17 @@ export default {
 
     .publish-flag {
       position: absolute;
-      left: 2px;
-      top: 2px;
+      left: 4px;
+      top: 4px;
       text-align: center;
       display: block;
-      color: var(--ti-lowcode-common-secondary-text-color);
+      color: var(--te-common-text-primary);
       font-size: 12px;
-      background-color: var(--ti-lowcode-component-block-list-item-tag-bg);
-      padding: 2px;
-      border-radius: 4px 0 4px 0;
+      background-color: var(--te-common-bg-prompt);
+      padding: 2px 4px;
+      border-radius: 2px;
       transform: scale(0.9);
+      min-width: 45px;
     }
 
     &.block-item-small-list {
@@ -525,7 +513,7 @@ export default {
         margin-left: 8px;
       }
       .item-text {
-        width: calc(35% - 62px);
+        width: 50%;
       }
       .publish-flag {
         position: static;
@@ -545,6 +533,9 @@ export default {
           }
         }
       }
+      &:hover {
+        background-color: var(--te-common-bg-container);
+      }
     }
     &:nth-child(even) {
       border-right: 0;
@@ -602,7 +593,7 @@ export default {
       .item-text {
         font-size: 12px;
       }
-      .tiny-svg {
+      .svg-icon {
         font-size: 24px;
         color: var(--ti-lowcode-component-svg-button-color);
       }

packages/design-core/assets/plugin-icon-js.svg

@@ -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;
+    }
   }
 }
 
@@ -303,6 +306,13 @@ export default {
       svg {
         font-size: 18px;
       }
+      .public-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 26px;
+        height: 26px;
+      }
     }
   }
 }

packages/layout/src/DesignPlugins.vue

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

packages/layout/src/DesignSettings.vue

@@ -47,26 +47,24 @@ export default {
 
 <style lang="less" scoped>
 .footer-toolbar {
+  border-radius: 4px;
+  background-color: var(--te-common-bg-container);
   .icon-wrap {
-    width: 20px;
-    height: 20px;
-    color: var(--ti-lowcode-text-color);
+    width: 24px;
+    height: 24px;
+    color: var(--te-common-text-weaken);
     font-size: 16px;
-    border-radius: 2px;
     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);
+      border-radius: 4px;
+      background-color: var(--te-common-bg-default);
     }
   }
-  .icon-wrap + .icon-wrap {
-    margin-left: 8px;
-  }
 }
 </style>

packages/plugins/block/src/BlockGroupArrange.vue

@@ -186,10 +186,9 @@ export default {
 
     const deleteBlock = () => {
       const title = '删除区块'
-      const status = 'custom'
       const message = '您确认删除该区块吗?'
 
-      confirm({ title, status, message, exec: removeBlock })
+      confirm({ title, message, exec: removeBlock })
     }
 
     const updateBlock = () => {
@@ -209,12 +208,10 @@ export default {
           }
         }
         const title = '保存区块'
-        const status = 'custom'
         const message = '您确认修改并保存该区块吗?'
 
         confirm({
           title,
-          status,
           message,
           exec: async () => {
             const currentId = useBlock().getCurrentBlock()?.id

packages/plugins/block/src/BlockSetting.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"