feat: block ui redesign

packages/common/component/PluginBlockList.vue

@@ -15,19 +15,20 @@
         { 'block-item-small-list': blockStyle === 'mini' }
       ]"
       :title="getTitle(item)"
-      @mousedown.stop.left="blockClick({ event: $event, item, index })"
       @mouseover.stop="openBlockShotPanel(item, $event)"
       @mouseleave="handleBlockItemLeave"
     >
       <slot :data="item">
-        <img
-          v-if="item.screenshot"
-          class="item-image"
-          :src="item.screenshot || defaultImg"
-          draggable="false"
-          @error="$event.target.src = defaultImg"
-        />
-        <svg-icon v-else class="item-image item-default-img" name="block-default-img"></svg-icon>
+        <div class="block-item-img">
+          <img
+            v-if="item.screenshot"
+            class="item-image"
+            :src="item.screenshot || defaultImg"
+            draggable="false"
+            @error="$event.target.src = defaultImg"
+          />
+          <svg-icon v-else class="item-image item-default-img" name="block-default-img"></svg-icon>
+        </div>
         <div class="item-text">
           <div class="item-name">{{ item.name_cn || item.label || item.content?.fileName }}</div>
           <div v-if="blockStyle === 'list'" class="item-description">{{ item.description }}</div>
@@ -45,13 +46,48 @@
         <div v-if="isBlockManage && !item.is_published" class="publish-flag">未发布</div>
 
         <div v-if="isBlockManage" class="block-detail">
-          <tiny-tooltip effect="dark" :content="defaultIconTip" placement="top">
+          <!-- <tiny-tooltip effect="dark" :content="defaultIconTip" placement="top">
             <icon-setting
               class="block-detail-icon"
               @mouseover.stop="iconSettingMove"
               @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
             ></icon-setting>
-          </tiny-tooltip>
+          </tiny-tooltip> -->
+          <tiny-popover
+            placement="bottom-end"
+            width="151"
+            append-to-body
+            trigger="manual"
+            :modelValue="state.hoverItemId === item.id && state.currentShowMenuId === item.id"
+            :visible-arrow="false"
+            popper-class="popper-options block-setting-popover"
+          >
+            <template #reference>
+              <svg-button
+                name="ellipsis"
+                class="block-detail-icon"
+                @click="handleShowVersionMenu(item)"
+                @mouseover.stop="iconSettingMove"
+                @mousedown.stop.prevent=""
+              ></svg-button>
+            </template>
+            <template #default>
+              <div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
+                <ul class="list">
+                  <li
+                    class="list-item"
+                    @mouseover.stop="iconSettingMove"
+                    @mousedown.stop.prevent="iconClick({ event: $event, item, index })"
+                  >
+                    <span>设置</span>
+                  </li>
+                  <li class="list-item" @mousedown.stop.left="blockClick({ event: $event, item, index })">
+                    <span>编辑</span>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </tiny-popover>
         </div>
         <div
           v-else-if="showSettingIcon"
@@ -128,8 +164,8 @@
 
 <script>
 import { computed, watch, inject, reactive } from 'vue'
-import { iconSetting, iconPlus } from '@opentiny/vue-icon'
-import { Tooltip, Progress, Popover } from '@opentiny/vue'
+import { iconPlus } from '@opentiny/vue-icon'
+import { Progress, Popover } from '@opentiny/vue'
 import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
 
@@ -139,8 +175,6 @@ const defaultImg =
 export default {
   components: {
     TinyProgress: Progress,
-    TinyTooltip: Tooltip,
-    IconSetting: iconSetting(),
     IconPlus: iconPlus(),
     TinyPopover: Popover,
     SvgButton,
@@ -385,6 +419,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
   color: var(--ti-lowcode-common-secondary-text-color);
+  margin: 12px 0 0 12px;
 
   &.is-small-list {
     grid-template-columns: 100%;
@@ -395,14 +430,17 @@ export default {
     flex-direction: column;
     align-items: center;
     position: relative;
-    height: 96px;
-    padding: 10px;
-    border-right: 1px solid var(--ti-lowcode-component-block-list-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-component-block-list-border-color);
+    height: 105px;
     text-align: center;
     user-select: none;
-    &:nth-child(-n + 2) {
-      border-top: 1px solid var(--ti-lowcode-component-block-list-border-color);
+    margin-right: 12px;
+    margin-bottom: 12px;
+    .block-item-img {
+      line-height: 82px;
+      width: 106px;
+      height: 82px;
+      border-radius: 4px;
+      background-color: var(--ti-lowcode-component-block-list-item-active-bg);
     }
     &.block-item-small-list:nth-child(2) {
       border-top: none;
@@ -436,6 +474,7 @@ export default {
         text-align: left;
         margin-top: 0;
         margin-left: 4px;
+        color: var(--ti-lowcode-base-text-color-4);
       }
       .publish-flag {
         position: static;
@@ -487,7 +526,6 @@ export default {
     }
 
     &:not(.is-disabled):hover {
-      background-color: var(--ti-lowcode-component-block-list-item-active-bg);
       cursor: pointer;
 
       .block-detail,
@@ -548,14 +586,14 @@ export default {
       visibility: hidden;
       position: absolute;
       top: 4px;
-      right: 4px;
+      right: 8px;
       z-index: 9;
       &.is-current-visible-icon {
         visibility: visible;
       }
 
       .block-detail-icon {
-        color: var(--ti-lowcode-component-block-list-setting-btn-color);
+        color: var(--ti-lowcode-base-gray-50);
         &:hover {
           cursor: pointer;
           color: var(--ti-lowcode-component-block-list-setting-btn-hover-color);

packages/common/component/PluginSetting.vue

@@ -166,12 +166,14 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 49px;
+    height: 40px;
+    line-height: 40px;
     font-size: 14px;
     line-height: 18px;
     color: var(--ti-lowcode-plugin-panel-title-color);
     padding: 0 20px;
     border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
+    margin-bottom: -6px;
     .plugin-setting-header-title {
       font-size: 12px;
       font-weight: 700;

packages/plugins/block/src/BlockConfig.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-form ref="blockForm" class="block-setting-content" :model="formData" :rules="rules">
+  <tiny-form ref="blockForm" class="block-setting-content" label-position="top" :model="formData" :rules="rules">
     <tiny-form-item label="区块名称" prop="name_cn">
       <div>
         <tiny-input
@@ -273,15 +273,24 @@ export default {
 
 <style lang="less" scoped>
 .block-setting-content {
-  padding: 16px 20px 16px 0;
+  padding: 6px 12px 6px 12px;
   :deep(.tiny-form-item__error) {
     display: none;
   }
+  :deep(.tiny-form-item) {
+    margin-bottom: 10px;
+  }
+  :deep(.tiny-form-item__label) {
+    font-size: 12px;
+  }
 
   .description {
     margin-top: 10px;
     font-size: 12px;
   }
+  .global-desc-info {
+    font-size: 11px;
+  }
 }
 
 .block-tag-create {
@@ -296,10 +305,11 @@ export default {
   }
 
   .tiny-button.button-new-tag {
-    height: 28px;
+    height: 24px;
     line-height: 20px;
     padding-top: 0;
     padding-bottom: 0;
+    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
   }
 
   .tiny-input {
@@ -318,7 +328,7 @@ export default {
     }
   }
   :deep(.tiny-input__inner) {
-    height: 26px;
+    height: 24px;
   }
 }
 .block-openness {

packages/plugins/block/src/BlockEvent.vue

@@ -1,4 +1,5 @@
 <template>
+  <tiny-alert type="simple" description="了解有关事件设置的更多信息" class="block-alert"></tiny-alert>
   <tiny-row>
     <tiny-col :span="6">
       <block-event-list></block-event-list>
@@ -16,7 +17,7 @@
 
 <script>
 import { computed, reactive } from 'vue'
-import { Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { Row as TinyRow, Col as TinyCol, Alert as TinyAlert } from '@opentiny/vue'
 import BlockGuide from './BlockGuide.vue'
 import BlockEventList from './BlockEventList.vue'
 import BlockEventForm from './BlockEventForm.vue'
@@ -26,6 +27,7 @@ export default {
   components: {
     TinyRow,
     TinyCol,
+    TinyAlert,
     BlockGuide,
     BlockEventList,
     BlockEventForm
@@ -53,4 +55,15 @@ export default {
 .form {
   margin-top: 45px;
 }
+.block-alert {
+  color: var(--ti-lowcode-life-cycle-alert-color);
+  height: 28px;
+  padding: 6px;
+  border: 0;
+  font-size: 11px;
+  margin-bottom: 12px;
+  :deep(.tiny-alert__close) {
+    top: 7px;
+  }
+}
 </style>

packages/plugins/block/src/BlockEventList.vue

@@ -75,6 +75,9 @@ export default {
   margin-left: 8px;
 }
 .add-button {
-  padding: 8px 0;
+  padding: 0 0 8px 0;
+  :deep(.tiny-button) {
+    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+  }
 }
 </style>

packages/plugins/block/src/BlockProperty.vue

@@ -1,4 +1,5 @@
 <template>
+  <tiny-alert type="simple" description="了解有关属性设置的更多信息" class="block-alert"></tiny-alert>
   <div class="property-container">
     <block-property-list v-if="!isEdit"></block-property-list>
     <block-property-form v-else></block-property-form>
@@ -16,12 +17,14 @@ import BlockGuide from './BlockGuide.vue'
 import BlockPropertyList from './BlockPropertyList.vue'
 import BlockPropertyForm from './BlockPropertyForm.vue'
 import { getEditProperty } from './js/blockSetting'
+import { Alert } from '@opentiny/vue'
 
 export default {
   components: {
     BlockGuide,
     BlockPropertyList,
-    BlockPropertyForm
+    BlockPropertyForm,
+    TinyAlert: Alert
   },
   props: {
     showVideo: {
@@ -36,3 +39,16 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+.block-alert {
+  color: var(--ti-lowcode-life-cycle-alert-color);
+  height: 28px;
+  padding: 6px;
+  border: 0;
+  font-size: 11px;
+  margin-bottom: 12px;
+  :deep(.tiny-alert__close) {
+    top: 7px;
+  }
+}
+</style>

packages/plugins/block/src/BlockPropertyList.vue

@@ -88,6 +88,7 @@ export default {
   padding-bottom: 16px;
   :deep(.tiny-button) {
     margin-right: 5px;
+    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
   }
   .plus-icon {
     width: 16px;