fix: Modify UI review comments

packages/common/component/BlockHistoryList.vue

@@ -1,26 +1,31 @@
 <template>
-  <ul>
-    <li v-for="item in history" :key="item.id" class="item">
-      <block-history-template :blockHistory="item" :is-block-manage="isBlockManage"></block-history-template>
-      <span class="item-icon">
-        <span @click="$emit('preview', item)"
-          ><svg-button class="svg-item-icon" name="text-page-review"></svg-button><span>预览</span></span
-        >
-        <span v-if="!isBlockManage" @click="$emit('restore', item)"
-          ><svg-button class="svg-item-icon" name="text-page-revert"></svg-button><span>还原</span></span
-        >
-      </span>
-    </li>
-  </ul>
+  <tiny-grid v-if="history.length" :data="history" height="300">
+    <tiny-grid-column v-if="isBlockManage" field="version" title="版本号">
+      <template v-slot="data">
+        {{ data.row.version }}
+        <span v-if="data.row.version === lastVersion.versions" class="version-v">最新</span>
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="updated_at" title="发布时间">
+      <template v-slot="data">
+        {{ format(data.row.updated_at, 'yyyy/MM/dd hh:mm:ss') }}
+      </template>
+    </tiny-grid-column>
+    <tiny-grid-column field="message" title="描述"></tiny-grid-column>
+    <tiny-grid-column width="90" field="operation" title="操作">
+      <template v-slot="data">
+        <span class="operation-text" @click="$emit('preview', data.row)">预览</span>
+        <span v-if="!isBlockManage" class="operation-text" @click="$emit('restore', data.row)">还原</span>
+      </template>
+    </tiny-grid-column>
+  </tiny-grid>
   <div v-if="!history.length" class="empty">暂无数据</div>
 </template>
 
 <script setup>
 import { defineEmits, defineProps } from 'vue'
-import { SvgButton } from '../index'
-
-// 引入组件在template上使用
-import BlockHistoryTemplate from './BlockHistoryTemplate.vue'
+import { format } from '@opentiny/vue-renderless/common/date'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 defineProps({
   history: {
@@ -30,67 +35,33 @@ defineProps({
   isBlockManage: {
     type: Boolean,
     default: false
+  },
+  lastVersion: {
+    type: Object,
+    default: () => ({})
   }
 })
 
 defineEmits(['preview', 'restore'])
 </script>
 
 <style lang="less" scoped>
-.item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0px 16px;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid
-      var(--ti-lowcode-component-block-history-list-item-border-color, --ti-lowcode-tabs-border-color);
-  }
-
-  &:hover {
-    background-color: var(--ti-lowcode-component-block-history-list-item-hover-bg);
-    .item-icon {
-      display: block;
-    }
-  }
+.version-v {
+  font-size: 12px;
+  padding: 2px 8px;
+  margin-left: 5px;
+  background-color: var(--te-common-bg-tag);
+  color: var(--te-common-color-success);
+  border-radius: var(--te-base-border-radius-1);
 }
-
-.item-icon {
-  display: none;
-  > span {
-    border: 1px solid var(--ti-lowcode-component-block-history-list-item-btn-border-color);
-    height: 28px;
-    color: var(--ti-lowcode-component-block-history-list-item-btn-color);
-    font-size: 12px;
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    transition: 0.3s;
-    padding: 0 10px;
-    .svg-item-icon {
-      color: var(--ti-lowcode-component-block-history-list-item-btn-color);
-    }
-    .svg-item-icon:hover {
-      color: var(--ti-lowcode-component-block-history-list-item-btn-hover-color);
-    }
-    &:hover {
-      color: var(--ti-lowcode-component-block-history-list-item-btn-hover-color);
-      background: var(--ti-lowcode-component-block-history-list-item-btn-hover-bg);
-    }
-
-    &:last-child {
-      margin-left: 4px;
-    }
-    > span {
-      margin-left: 4px;
-    }
+.operation-text {
+  color: var(--te-common-text-emphasize);
+  & + .operation-text {
+    margin-left: 8px;
   }
 }
 
 .empty {
-  color: var(--ti-lowcode-common-empty-text-color);
+  color: var(--te-common-text-weaken);
 }
 </style>

packages/common/component/BlockLinkField.vue

@@ -65,7 +65,6 @@ export default {
 
       confirm({
         title: '属性名称',
-        status: 'custom',
         message: {
           render() {
             return (

packages/common/component/ButtonGroup.vue

@@ -8,12 +8,25 @@
 .button-group {
   display: grid;
   grid-auto-flow: column;
-  column-gap: 8px;
+  column-gap: 4px;
   align-items: center;
 
   :deep(.svg-button),
   :deep(.tiny-button) {
     margin: 0;
   }
+  :deep(.tiny-button) {
+    padding: 0;
+    min-width: 40px;
+  }
+  :deep(.tiny-button + .svg-button) {
+    margin-left: 4px;
+  }
+  :deep(.tiny-button + .tiny-button) {
+    margin-left: 8px;
+  }
+  :deep(.tiny-button.tiny-button.tiny-button--default) {
+    border-color: var(--te-common-border-secondary);
+  }
 }
 </style>

packages/common/component/LifeCycles.vue

@@ -1,8 +1,16 @@
 <template>
   <div class="life-cycle">
-    <tiny-popover v-model="state.showPopover" placement="bottom-end" trigger="hover" popperClass="option-popper">
+    <tiny-popover
+      v-model="state.showPopover"
+      placement="bottom-end"
+      trigger="hover"
+      popperClass="option-popper"
+      :open-delay="OPEN_DELAY.Default"
+    >
       <template #reference>
-        <tiny-button class="life-cycle-btn"><svg-icon name="add"></svg-icon>添加页面生命周期 </tiny-button>
+        <tiny-button class="life-cycle-btn"
+          ><svg-icon name="add"></svg-icon>{{ isPage ? '添加页面生命周期' : '添加区块生命周期' }}
+        </tiny-button>
       </template>
       <div class="popover-list">
         <ul>
@@ -19,23 +27,33 @@
     </tiny-popover>
   </div>
   <div class="life-cycle-tips">{{ lifeCycleTips }}</div>
-  <meta-list-items :optionsList="Object.keys(state.bindLifeCycles)" :draggable="false">
+  <meta-list-items
+    :optionsList="Object.keys(state.bindLifeCycles)"
+    :draggable="false"
+    :class="{ 'life-cycle-content-list': Object.keys(state.bindLifeCycles).length }"
+  >
     <template #content="{ data }">
       <div class="life-cycle-content-item">
         {{ data }}
       </div>
     </template>
     <template #operate="{ data }">
-      <svg-button
-        class="opt-button"
-        :hoverBgColor="false"
-        name="text-source-setting"
-        @click="openLifeCyclesPanel(data)"
-      ></svg-button>
-      <svg-button class="opt-button" :hoverBgColor="false" name="delete" @click="deleteLifeCycle(data)"></svg-button>
+      <svg-button :hoverBgColor="false" name="setting" @click="openLifeCyclesPanel(data)"></svg-button>
+      <svg-button :hoverBgColor="false" name="delete" @click="deleteLifeCycle(data)"></svg-button>
     </template>
   </meta-list-items>
-  <tiny-dialog-box v-model:visible="state.showLifeCyclesDialog" fullscreen :title="state.title" :append-to-body="true">
+  <tiny-dialog-box v-model:visible="state.showLifeCyclesDialog" fullscreen :show-close="false" :append-to-body="true">
+    <template #title>
+      <div class="bind-dialog-title">
+        <div class="bind-dialog-text">
+          {{ isPage ? '添加页面生命周期' : '添加区块生命周期' }}
+        </div>
+        <div class="bind-dialog-btn">
+          <tiny-button type="info" @click="editorConfirm">保存</tiny-button>
+          <svg-button name="close" @click="state.showLifeCyclesDialog = false"></svg-button>
+        </div>
+      </div>
+    </template>
     <div v-if="state.showLifeCyclesDialog" class="dialog-content">
       <div class="dialog-content-left">
         <tiny-search placeholder="搜索" @update:modelValue="searchLifeCyclesList"></tiny-search>
@@ -62,12 +80,7 @@
       </div>
     </div>
 
-    <template #footer>
-      <div class="bind-dialog-footer">
-        <tiny-button @click="state.showLifeCyclesDialog = false">取 消</tiny-button>
-        <tiny-button type="info" @click="editorConfirm">确 定</tiny-button>
-      </div>
-    </template>
+    <template #footer> </template>
   </tiny-dialog-box>
 </template>
 
@@ -82,6 +95,8 @@ import VueMonaco from './VueMonaco.vue'
 import { initCompletion } from '../js/completion'
 import { initLinter, lint } from '../js/linter'
 import { SvgButton } from '../index'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -237,7 +252,8 @@ export default {
       deleteLifeCycle,
       editorConfirm,
       editorDidMount,
-      handleEditorChange
+      handleEditorChange,
+      OPEN_DELAY
     }
   }
 }
@@ -264,10 +280,13 @@ export default {
 }
 .life-cycle-tips {
   color: var(--ti-lowcode-life-cycle-alert-color);
-  margin: 4px 0 12px 0;
+  margin: 4px 0 0;
   height: 16px;
   line-height: 16px;
 }
+.life-cycle-content-list {
+  margin-top: 12px;
+}
 .life-cycle-alert {
   color: var(--ti-lowcode-life-cycle-alert-color);
   margin-left: 20px;
@@ -277,9 +296,8 @@ export default {
   color: var(--te-common-text-primary);
 }
 .opt-button {
-  width: auto;
   &:last-child {
-    margin-right: var(--te-base-space-3x);
+    margin-right: var(--te-base-space-2x);
   }
 }
 
@@ -358,4 +376,22 @@ export default {
   align-items: center;
   margin-top: 20px;
 }
+.bind-dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  .bind-dialog-text {
+    color: var(--te-common-text-primary);
+    font-size: var(--te-base-font-size-1);
+  }
+  .bind-dialog-btn {
+    display: flex;
+    align-items: center;
+    .tiny-button {
+      margin-right: 8px;
+      min-width: 40px;
+    }
+  }
+}
 </style>

packages/common/component/MetaCodeEditor.vue

@@ -267,7 +267,7 @@ export default {
   width: 100%;
   display: flex;
   text-align: center;
-  .tiny-button.edit-btn {
+  .tiny-button.tiny-button.edit-btn {
     color: var(--te-common-text-primary);
     border-color: var(--te-common-border-default);
     flex: 1;
@@ -291,6 +291,7 @@ export default {
 .btn-box {
   display: flex;
   justify-content: flex-end;
+  width: 100%;
   &:has(.format-btn) {
     justify-content: space-between;
   }
@@ -304,6 +305,7 @@ export default {
   height: 24px;
   padding: 4px;
   padding-left: 10px;
+  padding-right: 12px;
   border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
   border-radius: var(--te-base-border-radius-1);
 

packages/common/component/MetaListItem.vue

@@ -61,9 +61,6 @@
     @update:visible="isShow = $event"
   >
     <span class="switch-tip">
-      <span>
-        <svg-icon name="warning"></svg-icon>
-      </span>
       <span>确定删除吗？</span>
     </span>
     <template #footer>
@@ -292,6 +289,7 @@ export default {
       &.right {
         float: left;
         text-align: right;
+        margin-right: 8px;
       }
     }
   }
@@ -302,20 +300,14 @@ export default {
   .icon-close {
     position: absolute;
     top: 6px;
-    right: 6px;
+    right: 10px;
   }
 }
 .add-options {
-  overflow-y: scroll;
-  padding: 20px 0 20px 2px;
+  overflow-y: auto;
+  max-height: calc(100vh - 94px); // 94为头部高度和底部高度
   &.top {
     margin-bottom: 0;
   }
-  &::-webkit-scrollbar-track-piece {
-    background: var(--ti-lowcode-toolbar-bg);
-  }
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
 }
 </style>