diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
index 703417bdf..c0f99ce0e 100644
--- a/packages/common/component/BindI18n.vue
+++ b/packages/common/component/BindI18n.vue
@@ -169,11 +169,10 @@ export default {
 
 <style lang="less" scoped>
 .languageContent {
-  width: 254px;
-  border-radius: 5px;
   text-align: center;
   z-index: 99;
   margin-top: 5px;
+  margin-bottom: 16px;
 
   .tiny-svg {
     margin-right: 10px;
@@ -184,7 +183,6 @@ export default {
     }
   }
   .tiny-button {
-    margin-top: 10px;
     max-width: initial;
     padding: 0 12px;
     background-color: var(--ti-lowcode-tabs-border-color);
@@ -196,18 +194,24 @@ export default {
     }
   }
   .addNewLanguage {
-    padding: 0px 5px 5px;
     .tiny-input {
       display: flex;
       margin-bottom: 10px;
+      padding: 0 8px;
       align-items: center;
       label {
-        width: 80px;
+        text-wrap: nowrap;
+        text-align: left;
+        width: 50px;
       }
       display: flex;
     }
+    .tiny-input__inner {
+      flex: 1;
+    }
     .add-btns {
       text-align: right;
+      padding: 0 8px;
     }
   }
 }
diff --git a/packages/common/component/BlockDescription.vue b/packages/common/component/BlockDescription.vue
index ba8a0ea69..1d6fe295c 100644
--- a/packages/common/component/BlockDescription.vue
+++ b/packages/common/component/BlockDescription.vue
@@ -1,7 +1,10 @@
 <template>
-  <meta-description class="description" type="warning">
+  <meta-description class="description">
     <template #content>
-      <div @click="openBlockSetting" class="setting-block"><span class="add-icon">+</span>设置区块暴露属性</div>
+      <div class="setting-block" @click="openBlockSetting">
+        <svg-icon name="block-add-prop"></svg-icon>
+        <span>设置区块暴露属性</span>
+      </div>
     </template>
   </meta-description>
 </template>
@@ -33,17 +36,28 @@ export default {
 
 <style lang="less" scoped>
 .description {
-  border-color: var(--ti-lowcode-description-color);
+  font-size: 12px;
+
+  &.wrapper {
+    height: 32px;
+    padding: 0 12px;
+    border-left: 0;
+    box-shadow: none;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    background-color: var(--te-common-bg-container);
+  }
 
   .setting-block {
+    display: flex;
+    align-items: center;
+    gap: 4px;
     cursor: pointer;
   }
-  .add-icon {
-    padding: 0 3px;
-    margin: 0 5px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    border-radius: 50%;
-    background-color: var(--ti-lowcode-description-color);
+
+  .svg-icon {
+    font-size: 16px;
   }
 }
 </style>
diff --git a/packages/common/component/BlockLinkField.vue b/packages/common/component/BlockLinkField.vue
index b2ff541cb..a10bae958 100644
--- a/packages/common/component/BlockLinkField.vue
+++ b/packages/common/component/BlockLinkField.vue
@@ -1,14 +1,27 @@
 <template>
-  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover">
+  <tiny-popover class="block-link-field" popper-class="option-popper block-new-attr-popover" :visible-arrow="false">
     <template #reference>
-      <span class="link-icon">+</span>
+      <div>
+        <span class="icon-wrap bind-prop">
+          <svg-icon name="block-bind-prop"></svg-icon>
+        </span>
+        <span class="icon-wrap add-prop">
+          <svg-icon name="block-add-prop"></svg-icon>
+        </span>
+      </div>
     </template>
     <ul class="context-menu">
       <li v-if="isLinked" class="menu-item" @click="unLink(data)">取消关联</li>
-      <li v-else class="menu-item" @click="addProperty(data)">+ 新建属性</li>
-      <li class="menu-item" @click="openBlockSetting">管理属性</li>
-      <li v-for="item in properties" :key="item.property" class="menu-item">
-        {{ item.property }}
+      <li v-else class="menu-item" @click="addProperty(data)">
+        <svg-icon name="plus-circle"></svg-icon>
+        <span>创建并链接新属性</span>
+      </li>
+      <li class="menu-item" @click="openBlockSetting">
+        <svg-icon name="setting"></svg-icon>
+        <span>打开属性面板</span>
+      </li>
+      <li v-for="item in properties" :key="item.property" class="menu-item property">
+        <span>{{ item.property }}</span>
         <span v-if="item.property !== data?.linked?.blockProperty" class="link-item" @click="editProperty(item)">
           关联
         </span>
@@ -51,14 +64,12 @@ export default {
       state.newPropertyName = ''
 
       confirm({
-        title: '新建区块属性',
+        title: '属性名称',
         status: 'custom',
         message: {
           render() {
             return (
               <div>
-                <div>此新字段将自动链接到此属性</div>
-                <br />
                 <TinyInput placeholder="请输入字段名称" v-model={state.newPropertyName}></TinyInput>
               </div>
             )
@@ -141,49 +152,68 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-.link-icon {
-  width: 16px;
-  height: 16px;
-  margin: 0 5px;
-  border-radius: 50%;
-  line-height: 16px;
-  text-align: center;
-  color: var(--ti-lowcode-block-link-field-link-icon-color);
-  background-color: var(--ti-lowcode-block-link-field-link-icon-bg-color);
-  cursor: pointer;
-  &:hover {
-    transform: scale(1.2);
+.icon-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+
+  .svg-icon {
+    font-size: 14px;
+  }
+
+  &:hover .svg-icon {
+    transform: scale(1.25);
+  }
+
+  &.bind-prop {
+    z-index: 30;
+    &:hover {
+      z-index: 10;
+    }
+  }
+
+  &.add-prop {
+    z-index: 20;
+    &:hover {
+      z-index: 30;
+    }
   }
 }
 
 .context-menu {
   width: 200px;
-  padding: 3px 0;
+  padding: 8px 0;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   .menu-item {
+    line-height: 18px;
     color: var(--ti-lowcode-attr-popover-menu-item-color);
     display: flex;
-    justify-content: space-between;
-    padding: 6px 15px;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-attr-popover-menu-item-hover-bg-color);
     }
-
+    &.property {
+      justify-content: space-between;
+    }
     .link-item {
       cursor: pointer;
-      background-color: var(--ti-lowcode-attr-popover-menu-item-link-item-bg-color);
-      color: var(--ti-lowcode-attr-popover-menu-item-link-item-color);
-      padding: 2px 6px;
-      border-radius: 2px;
+      color: var(--te-common-text-emphasize);
     }
   }
+
+  .svg-icon {
+    font-size: 16px;
+  }
 }
 </style>
 <style lang="less">
-.tiny-popover.tiny-popper.block-new-attr-popover {
+.tiny-popover.tiny-popper.tiny-popper.block-new-attr-popover[x-placement] {
   // 这里不知为啥要添加 max-height，后续确认无用可删除
   max-height: 65vh;
   padding: 0;
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 57271c712..702860f0e 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -533,15 +533,13 @@ export default {
     line-height: 18px;
   }
 
-  .linked {
-    background-color: var(--ti-lowcode-meta-config-item-link-color);
-  }
-
   .item-input {
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
+    position: relative;
+    overflow: visible;
     &:has(.verify-failed) {
       align-items: flex-start;
     }
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 8a540260e..3560f5014 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -265,14 +265,6 @@ export default {
   height: 16px;
   line-height: 16px;
 }
-.popover-list {
-  ul li:first-child {
-    margin-top: 8px;
-  }
-  ul li:last-child {
-    margin-bottom: 8px;
-  }
-}
 .life-cycle-alert {
   color: var(--ti-lowcode-life-cycle-alert-color);
   margin-left: 20px;
@@ -280,8 +272,11 @@ export default {
 }
 
 .popover-list {
+  margin: 8px 0;
   li {
-    padding: 8px 30px 8px 16px;
+    padding: 0 12px;
+    margin: 0 -8px;
+    line-height: 24px;
     cursor: pointer;
     &:hover {
       background: var(--ti-lowcode-life-cycle-item-hover-bg);
diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
index dc066f056..30b2344e7 100644
--- a/packages/common/component/MetaListItem.vue
+++ b/packages/common/component/MetaListItem.vue
@@ -36,24 +36,14 @@
                 ></template>
 
                 <template #reference>
-                  <tiny-tooltip class="item" effect="dark" :content="item.title" placement="top">
-                    <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
-                  </tiny-tooltip>
+                  <icon-edit class="tiny-svg-size icon-edit" @click="btnClick($event, item.type)"></icon-edit>
                 </template>
               </tiny-popover>
             </template>
             <template v-else>
-              <tiny-tooltip
-                class="item"
-                effect="dark"
-                :content="item.title"
-                placement="top"
-                @click="btnClick($event, item.type)"
-              >
-                <span class="item-icon">
-                  <component :is="item.icon"></component>
-                </span>
-              </tiny-tooltip>
+              <span class="item-icon" @click="btnClick($event, item.type)">
+                <component :is="item.icon"></component>
+              </span>
             </template>
           </template>
         </slot>
diff --git a/packages/common/component/PluginBlockItemImg.vue b/packages/common/component/PluginBlockItemImg.vue
new file mode 100644
index 000000000..dbd9d61ed
--- /dev/null
+++ b/packages/common/component/PluginBlockItemImg.vue
@@ -0,0 +1,100 @@
+<template>
+  <div v-if="showCheckbox && displayTable" class="table-selection">
+    <tiny-checkbox :modelValue="props.checked" @change="handleCheck"></tiny-checkbox>
+  </div>
+  <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"></svg-icon>
+    <div v-if="showCheckbox && !displayTable" class="top-left">
+      <tiny-checkbox :modelValue="props.checked" @change="handleCheck"></tiny-checkbox>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Checkbox as TinyCheckbox } from '@opentiny/vue'
+import { defineEmits, defineProps } from 'vue'
+
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => ({})
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示多选框
+  showCheckbox: {
+    type: Boolean,
+    default: false
+  },
+  displayTable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['check'])
+
+const defaultImg =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA11JREFUaEPtmUvIVVUYhp83CIJKpIsOEsSBAxEiEAwqRDGDBCmRkCwhwQQbSANDEbwNgvgzxEIUCwRBEB2EgiQR5MA/RcHImRBKkYhYaAliULzxwT6y3O1zzv735Rx+PN/srP1d3ve7rLX2PmKSiyY5fkYEhl3BUQVGFaiZgQdayPZTwOvA7Jp+2zI/C5yV9FcnQJ7AB8DetqI35HdM0qZuBL4HFjYUqC03pyUteigIPMC0rXSW8Ws77YzSFRgRKJPdMjqtVcD2DOC6pH/LAKmq0zgB2+uAXcCTwD1gs6Q9VQH2s2uDwO/A00ngv4EnJP3TD0zneZaEt4GvJB3uZdcoAdsBPAjkZaakX8sQsP0ecDDR/UhSVLRQGiUQEWzfAKYl0e4CU8rMgu0XgXMFSNdJ+rKIQRsE1gBjwDPAbWCLpH39sm97CvADMLeL7kpJR/PPGieQ9PGzkm72A57oB7i3Ev1vsstjZylmaJmkU6nP1giUBZ613U5gW2LzGzAHiEE+kKz/AbwhaTwhPtyT2PZK4EiO8MuSop1iprYAHyfPrwDLJV3Kng+PgO3ngZ9y4NdL2p9rk93Ah8naj8AKSVdbayHb0c+PASck/VkwfI8CASQd2v2S1nfZbeI8WJU8O53NzLHkmt/MZc72IWB1Fuxi9Lekk7ms5oe27wXR9rfAksTPCWAqsCBbq0/A9qfAxoIsfgJ8Lum67e3AjkQnzo55kq71Gn7bATZ6/oWc7fRGCNgO4EGgm5wJEkB+P18qKbbNvmI73smDxHMFytUrYDtaJlonldgeg9TjPZBtlPRZX+SJgu2XgJiBmKNUqhGw/RpwPBvajsMvJG2wvTQjcf9dNYkYl7X3JwK+o2v7TeDrnO0FSfM7a/mvEoX7bbYVxjDNTJwdlvRuEix2o61xtQYeydbHJb1SBXziN8inB93EKmA7hifA32cNnJIU34/+J7ajCu8AccWOgb5ch0DY2o6DbVbmZ8IEAvyyBMR54FVJd+oCK2tf+SADfgbWJoHid4D/pWzwJvSqEgiQac/fAhZLipN1oFKVQB7kEknfDRR5FqwJAoUvGoMi0wSBQWEtE6f0LlTG2TB0ehKY9J/XJ/cfHMPoh7oxR/9S1s1gXftRBepmsK79qAJ1M1jX/j/bzulAKB9d1wAAAABJRU5ErkJggg=='
+
+const handleCheck = (v) => {
+  emit('check', v)
+}
+</script>
+
+<style lang="less" scoped>
+.table-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.block-item-img {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex: 1;
+  border-radius: 4px;
+  background-color: var(--ti-lowcode-component-block-list-item-active-bg);
+
+  .top-left {
+    display: flex;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+}
+
+:deep(.tiny-checkbox__label) {
+  padding: 0;
+}
+
+.item-image {
+  width: 84px;
+  height: 48px;
+  overflow: hidden;
+  object-fit: cover;
+}
+.item-default-img {
+  width: 84px;
+  height: 50px;
+  color: var(--te-common-bg-default);
+}
+
+.block-item-small-list .item-image {
+  width: 30px;
+  height: 30px;
+  min-width: 30px;
+}
+</style>
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index b05ff90cb..c1df2e4d2 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -1,7 +1,18 @@
 <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="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
+    :class="[
+      'block-list',
+      'lowcode-scrollbar',
+      { 'is-small-list': blockStyle === BlockStyles.Mini },
+      { isShortcutPanel }
+    ]"
     @mouseleave="state.hover = false"
   >
     <li v-if="showAddButton" class="block-item block-plus" @click="$emit('add')">
@@ -12,26 +23,33 @@
       v-for="(item, index) in state.data"
       :key="item.blockName"
       :draggable="!isBlockManage && showSettingIcon"
-      :class="['block-item', { 'is-disabled': showBlockDetail }, { 'block-item-small-list': blockStyle === 'mini' }]"
+      :class="[
+        'block-item',
+        { 'is-disabled': showBlockDetail },
+        { 'block-item-small-list': blockStyle === BlockStyles.Mini }
+      ]"
       :title="getTitle(item)"
       @mousedown.stop.left="blockClick({ event: $event, item, index })"
       @mouseover.stop="openBlockShotPanel(item, $event)"
       @mouseleave="handleBlockItemLeave"
     >
       <slot :data="item">
-        <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"></svg-icon>
-        </div>
+        <plugin-block-item-img
+          :item="item"
+          :show-checkbox="showCheckbox"
+          :checked="checked.some((block) => block.id === item.id)"
+          :display-table="blockStyle === BlockStyles.Mini"
+        ></plugin-block-item-img>
         <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>
+          <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">
@@ -119,11 +137,19 @@
 
 <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'
 import SvgButton from './SvgButton.vue'
 
+const BlockStyles = {
+  Default: 'default',
+  Mini: 'mini',
+  List: 'list'
+}
+
 const defaultImg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA11JREFUaEPtmUvIVVUYhp83CIJKpIsOEsSBAxEiEAwqRDGDBCmRkCwhwQQbSANDEbwNgvgzxEIUCwRBEB2EgiQR5MA/RcHImRBKkYhYaAliULzxwT6y3O1zzv735Rx+PN/srP1d3ve7rLX2PmKSiyY5fkYEhl3BUQVGFaiZgQdayPZTwOvA7Jp+2zI/C5yV9FcnQJ7AB8DetqI35HdM0qZuBL4HFjYUqC03pyUteigIPMC0rXSW8Ws77YzSFRgRKJPdMjqtVcD2DOC6pH/LAKmq0zgB2+uAXcCTwD1gs6Q9VQH2s2uDwO/A00ngv4EnJP3TD0zneZaEt4GvJB3uZdcoAdsBPAjkZaakX8sQsP0ecDDR/UhSVLRQGiUQEWzfAKYl0e4CU8rMgu0XgXMFSNdJ+rKIQRsE1gBjwDPAbWCLpH39sm97CvADMLeL7kpJR/PPGieQ9PGzkm72A57oB7i3Ev1vsstjZylmaJmkU6nP1giUBZ613U5gW2LzGzAHiEE+kKz/AbwhaTwhPtyT2PZK4EiO8MuSop1iprYAHyfPrwDLJV3Kng+PgO3ngZ9y4NdL2p9rk93Ah8naj8AKSVdbayHb0c+PASck/VkwfI8CASQd2v2S1nfZbeI8WJU8O53NzLHkmt/MZc72IWB1Fuxi9Lekk7ms5oe27wXR9rfAksTPCWAqsCBbq0/A9qfAxoIsfgJ8Lum67e3AjkQnzo55kq71Gn7bATZ6/oWc7fRGCNgO4EGgm5wJEkB+P18qKbbNvmI73smDxHMFytUrYDtaJlonldgeg9TjPZBtlPRZX+SJgu2XgJiBmKNUqhGw/RpwPBvajsMvJG2wvTQjcf9dNYkYl7X3JwK+o2v7TeDrnO0FSfM7a/mvEoX7bbYVxjDNTJwdlvRuEix2o61xtQYeydbHJb1SBXziN8inB93EKmA7hifA32cNnJIU34/+J7ajCu8AccWOgb5ch0DY2o6DbVbmZ8IEAvyyBMR54FVJd+oCK2tf+SADfgbWJoHid4D/pWzwJvSqEgiQac/fAhZLipN1oFKVQB7kEknfDRR5FqwJAoUvGoMi0wSBQWEtE6f0LlTG2TB0ehKY9J/XJ/cfHMPoh7oxR/9S1s1gXftRBepmsK79qAJ1M1jX/j/bzulAKB9d1wAAAABJRU5ErkJggg=='
 
@@ -132,6 +158,7 @@ export default {
     TinyProgress: Progress,
     IconPlus: iconPlus(),
     TinyTooltip: Tooltip,
+    PluginBlockItemImg,
     SvgButton,
     SearchEmpty
   },
@@ -145,7 +172,7 @@ export default {
     */
     blockStyle: {
       type: String,
-      default: 'default'
+      default: BlockStyles.Default
     },
     /*
     用于区分是否是区块管理侧的列表
@@ -191,11 +218,26 @@ export default {
     externalBlock: {
       type: Object,
       default: null
+    },
+    // 是否显示多选框
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    // 选中的区块
+    checked: {
+      type: Array,
+      default: () => []
+    },
+    gridColumns: {
+      type: Number,
+      default: 2
     }
   },
   emits: ['click', 'iconClick', 'add', 'deleteBlock', 'openVersionPanel', 'editBlock'],
   setup(props, { emit }) {
     const panelState = inject('panelState', {})
+    const blockUsers = inject('blockUsers')
     const state = reactive({
       activeIndex: -1,
       data: computed(() => props.data),
@@ -207,6 +249,8 @@ export default {
       timeoutId: null
     })
 
+    const users = computed(() => blockUsers?.value || [])
+
     const getParentNode = (el) => {
       while (el.nodeName !== 'LI') {
         el = el.parentNode
@@ -318,8 +362,10 @@ export default {
     )
 
     return {
+      BlockStyles,
       isShortcutPanel: panelState.isShortcutPanel,
       state,
+      users,
       getTitle,
       blockClick,
       iconClick,
@@ -332,7 +378,8 @@ export default {
       handleBlockItemLeave,
       handleSettingMouseOver,
       handleShowVersionMenu,
-      editBlock
+      editBlock,
+      format
     }
   }
 }
@@ -371,40 +418,70 @@ export default {
   }
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  background-color: var(--te-common-bg-container);
+  color: var(--te-common-text-secondary);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  & > div {
+    padding: 0 8px;
+    position: relative;
+  }
+
+  .col-time::before,
+  .col-created-by::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 10px;
+    background-color: var(--te-common-border-default);
+  }
+}
+
+.col-checkbox,
+.block-item-small-list:deep(.table-selection) {
+  width: 40px;
+}
+.col-checkbox:deep(.tiny-checkbox__label) {
+  padding: 0;
+}
+.col-name {
+  width: 35%;
+}
+.col-time {
+  width: 35%;
+}
+.col-created-by {
+  flex: 1;
+}
+
 .block-list {
   display: grid;
-  grid-template-columns: 50% 50%;
+  grid-template-columns: repeat(v-bind('gridColumns'), 1fr);
   position: relative;
-  flex: 1;
+  gap: 12px;
   overflow-y: auto;
   overflow-x: hidden;
   color: var(--ti-lowcode-common-secondary-text-color);
-  margin: 12px;
 
-  &.is-small-list {
-    grid-template-columns: 100%;
-    grid-template-rows: repeat(auto-fill, 30px);
-  }
   .block-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     height: 110px;
-    text-align: center;
     user-select: none;
-    margin-right: 6px;
-    margin-bottom: 12px;
-    .block-item-img {
-      line-height: 86px;
-      width: 100%;
-      height: 86px;
-      border-radius: 4px;
-      background-color: var(--ti-lowcode-component-block-list-item-active-bg);
-    }
-    &.block-item-small-list:nth-child(2) {
-      border-top: none;
-    }
+    gap: 6px;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     .publish-flag {
       position: absolute;
@@ -421,20 +498,16 @@ export default {
     }
 
     &.block-item-small-list {
-      flex-direction: row;
-      align-items: center;
-      height: 30px;
-      padding: 4px 10px;
-      .item-image {
-        width: 30px;
-        height: 30px;
-        min-width: 30px;
+      color: var(--te-common-text-primary);
+      gap: 0;
+      &:deep(.block-item-img) {
+        width: 54px;
+        height: 40px;
+        flex: unset;
+        margin-left: 8px;
       }
       .item-text {
-        text-align: left;
-        margin-top: 0;
-        margin-left: 4px;
-        color: var(--ti-lowcode-base-text-color-4);
+        width: calc(35% - 62px);
       }
       .publish-flag {
         position: static;
@@ -522,12 +595,6 @@ export default {
       }
     }
 
-    .item-image {
-      width: 100px;
-      height: 48px;
-      overflow: hidden;
-      object-fit: cover;
-    }
     .item-default-img {
       width: 84px;
       height: 50px;
@@ -535,10 +602,10 @@ export default {
     }
 
     .item-text {
-      color: var(--ti-lowcode-component-block-list-item-color);
+      color: var(--te-common-text-secondary);
       text-align: center;
-      flex: 1;
-      margin-top: 10px;
+      font-size: 12px;
+      line-height: 1.5;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
@@ -575,10 +642,6 @@ export default {
       top: 0;
     }
   }
-  .block-item:nth-child(even) {
-    margin-right: 0;
-    margin-left: 6px;
-  }
   .deploy {
     position: absolute;
     top: 10px;
@@ -664,16 +727,10 @@ export default {
 
   &.is-small-list {
     display: block;
-    grid-template-columns: initial;
 
     .block-item {
+      height: 54px;
       flex-direction: row;
-      border-right: none;
-    }
-
-    .item-image {
-      padding: 0;
-      flex-shrink: 0;
     }
 
     .item-text {
@@ -690,21 +747,16 @@ export default {
         font-size: 12px;
       }
     }
-  }
 
-  &.is-small-list {
-    .block-item {
-      height: 38px;
+    .cell {
+      padding: 0 8px;
+      text-align: start;
     }
-
-    .item-image {
-      font-size: 1.5em;
-      width: 27px;
-      height: 22px;
+    .cell-time {
+      width: 35%;
     }
-
-    .item-text {
-      width: calc(100% - 35px);
+    .cell-created-by {
+      flex: 1;
     }
   }
 }
diff --git a/packages/design-core/assets/block-add-prop.svg b/packages/design-core/assets/block-add-prop.svg
new file mode 100644
index 000000000..a5915a9d4
--- /dev/null
+++ b/packages/design-core/assets/block-add-prop.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#6E51E0;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<rect id="size" class="st0" width="132" height="132"/>
+<circle class="st1" cx="66.5" cy="66" r="66"/>
+<path id="合并" class="st2" d="M70.1,38.7v23.1h23c2.3,0,4.1,1.8,4.1,4.1c0,2.3-1.8,4.1-4.1,4.1h-23v23.1c0,2.3-1.8,4.1-4.1,4.1
+	c-2.3,0-4.1-1.8-4.1-4.1V70H38.8c-2.3,0-4.1-1.8-4.1-4.1c0-2.3,1.8-4.1,4.1-4.1h23.1V38.7c0-2.3,1.8-4.1,4.1-4.1
+	C68.3,34.6,70.1,36.4,70.1,38.7z"/>
+</svg>
diff --git a/packages/design-core/assets/block-bind-prop.svg b/packages/design-core/assets/block-bind-prop.svg
new file mode 100644
index 000000000..c0556885d
--- /dev/null
+++ b/packages/design-core/assets/block-bind-prop.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#6E51E0;}
+	.st2{fill:#FFFFFF;}
+</style>
+<rect id="size" class="st0" width="132" height="132"/>
+<circle id="椭圆_42" class="st1" cx="66" cy="66" r="49.5"/>
+<circle id="椭圆_43" class="st2" cx="66" cy="66" r="16.5"/>
+</svg>
diff --git a/packages/design-core/assets/text-copy-page.svg b/packages/design-core/assets/text-copy-page.svg
index 9a33f371c..5119c4245 100644
--- a/packages/design-core/assets/text-copy-page.svg
+++ b/packages/design-core/assets/text-copy-page.svg
@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 132 132" style="enable-background:new 0 0 132 132;" xml:space="preserve">
 <style type="text/css">
diff --git a/packages/plugins/block/src/BlockGroupArrange.vue b/packages/plugins/block/src/BlockGroupArrange.vue
index dc698a44e..f2ac355dc 100644
--- a/packages/plugins/block/src/BlockGroupArrange.vue
+++ b/packages/plugins/block/src/BlockGroupArrange.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="footer-toolbar">
-    <tiny-tooltip v-for="item in state.arrangeList" :key="item.id" effect="dark" :content="item.name" placement="top">
-      <span :class="['icon-wrap', { active: state.type === item.id }]" @click="typeClick(item.id)">
-        <svg-icon :name="item.svgName"></svg-icon>
-      </span>
-    </tiny-tooltip>
+    <span
+      v-for="item in state.arrangeList"
+      :key="item.id"
+      :class="['icon-wrap', { active: state.type === item.id }]"
+      @click="typeClick(item.id)"
+    >
+      <svg-icon :name="item.svgName"></svg-icon>
+    </span>
   </div>
 </template>
 
 <script>
 import { reactive } from 'vue'
-import { Tooltip } from '@opentiny/vue'
 
 export default {
-  components: {
-    TinyTooltip: Tooltip
-  },
+  components: {},
   props: {
     modelValue: {
       type: String,
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index fd2e9d437..7000b3f84 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -81,17 +81,18 @@
           </template>
         </tiny-search>
       </div>
-      <plugin-block-list
-        class="plugin-block-list"
-        :data="state.blockList"
-        :isBlockManage="true"
-        :showBlockShot="true"
-        :blockStyle="state.layout"
-        default-icon-tip="查看区块"
-        :externalBlock="externalBlock"
-        @editBlock="editBlock"
-        @iconClick="openSettingPanel"
-      ></plugin-block-list>
+      <div class="plugin-block-list">
+        <plugin-block-list
+          :data="state.blockList"
+          :isBlockManage="true"
+          :showBlockShot="true"
+          :blockStyle="state.layout"
+          default-icon-tip="查看区块"
+          :externalBlock="externalBlock"
+          @editBlock="editBlock"
+          @iconClick="openSettingPanel"
+        ></plugin-block-list>
+      </div>
       <block-setting></block-setting>
       <div class="block-footer">
         <tiny-dropdown trigger="click" @item-click="changeType">
@@ -477,6 +478,8 @@ export default {
 }
 .plugin-block-list {
   margin-bottom: 40px;
+  padding: 12px;
+  overflow-y: auto;
 }
 .block-footer {
   position: absolute;
diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js
index cc57bfbc7..3ede9939e 100644
--- a/packages/plugins/block/src/composable/useBlock.js
+++ b/packages/plugins/block/src/composable/useBlock.js
@@ -686,23 +686,17 @@ const sort = (blockList, type) => {
 }
 
 // 在可选区块列表里选择区块
-const check = (blockList, block) => {
-  const index = blockList.indexOf(block)
-
-  blockList.splice(index, 1)
-  selectedBlockArray.value.push(block)
+const check = (block) => {
+  if (selectedBlockArray.value.some((item) => item.id === block.id)) {
+    return
+  }
 
-  return blockList
+  selectedBlockArray.value = selectedBlockArray.value.concat(block)
 }
 
 // 取消选择区块
-const cancelCheck = (blockList, block) => {
-  const index = selectedBlockArray.value.indexOf(block)
-
-  selectedBlockArray.value.splice(index, 1)
-  blockList.push(block)
-
-  return blockList
+const cancelCheck = (block) => {
+  selectedBlockArray.value = selectedBlockArray.value.filter((item) => item.id !== block.id)
 }
 
 const getBlockAssetsByVersion = (block, version) => {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
index 8ca100b3c..20b1fa6bc 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
@@ -3,11 +3,9 @@
     <tiny-tabs v-model="state.type" tab-style="button-card">
       <tiny-tab-item v-for="item in state.arrangeList" :key="item.id" :name="item.id">
         <template #title>
-          <tiny-tooltip effect="dark" :content="item.name" placement="top">
-            <span class="button-icon-item" @click="typeClick(item.id)">
-              <svg-icon :name="item.svgName"></svg-icon>
-            </span>
-          </tiny-tooltip>
+          <span class="button-icon-item" @click="typeClick(item.id)">
+            <svg-icon :name="item.svgName"></svg-icon>
+          </span>
         </template>
       </tiny-tab-item>
     </tiny-tabs>
@@ -16,11 +14,10 @@
 
 <script>
 import { reactive, inject } from 'vue'
-import { Tooltip, Tabs, TabItem } from '@opentiny/vue'
+import { Tabs, TabItem } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTooltip: Tooltip,
     TinyTabs: Tabs,
     TinyTabItem: TabItem
   },
@@ -68,6 +65,9 @@ export default {
   text-align: center;
   height: 24px;
   line-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .footer-toolbar {
   .icon-wrap {
@@ -91,5 +91,10 @@ export default {
   .icon-wrap + .icon-wrap {
     margin-left: 8px;
   }
+
+  :deep(.tiny-tabs.tiny-tabs .tiny-tabs__item) {
+    width: 24px;
+    height: 24px;
+  }
 }
 </style>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
index 9624bbf64..cfa6ca0d4 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupPanel.vue
@@ -29,11 +29,11 @@
   </plugin-setting>
 </template>
 <script>
-import { nextTick, reactive, watch, inject } from 'vue'
+import { nextTick, reactive, watch, provide, inject, ref } from 'vue'
 import { Search } from '@opentiny/vue'
 import { iconSearch } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
-import { useApp, useBlock, useModal, useResource, useMaterial } from '@opentiny/tiny-engine-meta-register'
+import { useApp, useBlock, useModal, useResource, useMaterial, useNotify } from '@opentiny/tiny-engine-meta-register'
 import BlockGroupTransfer from './BlockGroupTransfer.vue'
 import BlockGroupFilters from './BlockGroupFilters.vue'
 
@@ -74,6 +74,8 @@ export default {
     const { message } = useModal()
     const appId = useApp().appInfoState.selectedId
     const panelState = inject('panelState', {})
+    const blockUsers = ref([])
+    provide('blockUsers', blockUsers)
 
     const state = reactive({
       searchValue: '',
@@ -112,9 +114,14 @@ export default {
               version: item.latestVersion
             })) || []
 
+          if (selectedBlocks.length === 0) {
+            return
+          }
+
           const blocks = [...resData, ...selectedBlocks]
 
-          requestUpdateGroup({
+          // 这里把异步请求 return，可以让下面的 catch 捕获到错误
+          return requestUpdateGroup({
             id: groupId,
             blocks,
             app: appId
@@ -128,6 +135,10 @@ export default {
             state.searchValue = ''
             selectedBlockArray.value.length = 0
             useResource().fetchResource({ isInit: false }) // 添加区块分组，不需要重新init页面或者区块。
+            useNotify({
+              message: '添加区块成功',
+              type: 'success'
+            })
           })
         })
         .catch((error) => {
@@ -220,6 +231,7 @@ export default {
             : []
         state.filters[2].children =
           results[2].status === 'fulfilled' ? results[2].value.map((item) => ({ name: item })) : []
+        blockUsers.value = state.filters[1].children
       })
     }
 
@@ -252,7 +264,7 @@ export default {
     margin-bottom: 12px;
   }
   .transfer-order-search {
-    width: 296px;
+    flex: 1;
   }
 }
 :deep(.plugin-setting-header) {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index 580b39415..3a76ac523 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -8,18 +8,17 @@
       <block-group-arrange v-model="state.displayType" :arrangeList="state.arrangeList"></block-group-arrange>
     </div>
     <div class="block-add-transfer-body">
-      <block-group-transfer-panel
-        title="可选区块列表"
-        :selectedNums="state.blockList.length"
+      <block-list
+        v-bind="$attrs"
         :blockList="state.blockList"
-        @check="leftCheck"
-      ></block-group-transfer-panel>
-      <block-group-transfer-panel
-        title="已选区块列表"
-        :selectedNums="state.selectedBlocks.length"
-        :blockList="state.selectedBlocks"
-        @check="rightCheck"
-      ></block-group-transfer-panel>
+        :trigger-check="true"
+        :show-block-shot="false"
+        :showSettingIcon="false"
+        :show-checkbox="true"
+        :checked="selectedBlockArray"
+        :grid-columns="6"
+        @check="checkBlock"
+      ></block-list>
     </div>
   </div>
 </template>
@@ -27,14 +26,14 @@
 <script>
 import { computed, onMounted, provide, reactive, watch } from 'vue'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
-import BlockGroupTransferPanel from './BlockGroupTransferPanel.vue'
+import BlockList from './BlockList.vue'
 import BlockGroupArrange from './BlockGroupArrange.vue'
 import { Select, Option } from '@opentiny/vue'
 import { fetchBlockById } from './http.js'
 
 export default {
   components: {
-    BlockGroupTransferPanel,
+    BlockList,
     BlockGroupArrange,
     TinySelect: Select,
     TinyOption: Option
@@ -45,7 +44,7 @@ export default {
       default: () => []
     }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const { cancelCheck, check, selectedBlockArray, sort } = useBlock()
 
     const sortList = [
@@ -82,7 +81,6 @@ export default {
       displayType: 'grid',
       selectedSort: sortList[0].id,
       blockList: props.blockList,
-      selectedBlocks: selectedBlockArray.value,
       sortList,
       arrangeList
     })
@@ -96,7 +94,12 @@ export default {
       state.blockList = sort(state.blockList, type)
     }
 
-    const leftCheck = (block) => {
+    const checkBlock = (block) => {
+      if (selectedBlockArray.value.some((item) => item.id === block.id)) {
+        cancelCheck(block)
+        return
+      }
+
       // 添加区块时，默认添加区块最新版本
       if (!block.latestVersion) {
         fetchBlockById(block.id).then((blockDetail) => {
@@ -106,20 +109,14 @@ export default {
             message({ message: `${blockDetail.label}区块缺少历史记录，请重新发布区块`, status: 'error' })
           } else {
             block.latestVersion = blockDetail?.histories[historyLength - 1]?.version
-            emit('update:blockList', check(state.blockList, block))
+            check(block)
           }
         })
       } else {
-        emit('update:blockList', check(state.blockList, block))
+        check(block)
       }
     }
 
-    const rightCheck = (block) => {
-      const blockList = cancelCheck(state.blockList, block)
-
-      emit('update:blockList', blockList)
-    }
-
     watch(
       () => props.blockList,
       (value) => {
@@ -141,8 +138,8 @@ export default {
 
     return {
       state,
-      leftCheck,
-      rightCheck
+      selectedBlockArray,
+      checkBlock
     }
   }
 }
@@ -158,11 +155,8 @@ export default {
 
   .block-add-transfer-body {
     min-height: calc(100% - 42px);
-    padding: 10px 0;
-    display: grid;
-    grid-template-columns: 48% 48%;
-    column-gap: 4%;
-    overflow: hidden;
+    margin-top: 12px;
+    overflow-y: auto;
   }
 
   .block-add-transfer-footer {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 198d29162..40c148fb5 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -7,6 +7,9 @@
     :block-style="state.displayType"
     :show-block-detail="state.showDetailPanel"
     :show-block-shot="state.showShot"
+    :show-checkbox="showCheckbox"
+    :checked="checked"
+    :grid-columns="gridColumns"
     default-icon-tip="查看区块详情信息"
     @click="blockClick"
     @iconClick="openDetail"
@@ -46,6 +49,20 @@ export default {
     showBlockShot: {
       type: Boolean,
       default: true
+    },
+    // 是否显示多选框
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    },
+    // 选中的区块
+    checked: {
+      type: Array,
+      default: () => []
+    },
+    gridColumns: {
+      type: Number,
+      default: 2
     }
   },
   emits: ['check', 'close'],
diff --git a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
index f4da05ffa..0b15791e4 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockPanel.vue
@@ -4,7 +4,9 @@
     <tiny-search v-model="state.searchValue" clearable placeholder="请输入关键字搜索">
       <template #prefix> <tiny-icon-search /> </template>
     </tiny-search>
-    <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
+    <div class="block-list">
+      <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>
+    </div>
   </div>
   <!-- TODO: vue 版本升级到 3.5+ 之后，支持 defer，就不需要 rightPanelRef 了 -->
   <teleport defer to=".material-right-panel" v-if="rightPanelRef">
@@ -183,4 +185,9 @@ export default {
     }
   }
 }
+
+.block-list {
+  padding: 12px;
+  overflow-y: auto;
+}
 </style>
diff --git a/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue b/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
index 0a5b46425..9d23d755a 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
@@ -1,21 +1,28 @@
 <template>
   <plugin-setting v-if="panel.created" v-show="panel.show" :title="state.title" class="version-list-panel">
     <template #header>
-      <tiny-button type="primary" @click="selectVersion">确定</tiny-button>
       <close-icon class="close-icon" @click="closePanel"></close-icon>
     </template>
     <template #content>
-      <tiny-grid ref="versionGrid" :data="state.backupList" :show-header="false" class="stripe-tiny-grid">
-        <tiny-grid-column type="radio" width="60"></tiny-grid-column>
-        <tiny-grid-column show-overflow>
+      <tiny-grid ref="versionGrid" :data="state.backupList" :highlight-hover-row="false">
+        <tiny-grid-column field="version" title="版本号"></tiny-grid-column>
+        <tiny-grid-column title="发布时间">
           <template v-slot="{ row }">
-            <block-history-template
-              :is-block-manage="true"
-              :blockHistory="row"
-              :currentVersion="selectedBlock.current_version"
-            ></block-history-template>
+            <span>{{ format(row.updated_at, 'yyyy/MM/dd hh:mm:ss') }}</span>
           </template>
         </tiny-grid-column>
+        <tiny-grid-column field="message" title="发布描述"></tiny-grid-column>
+        <tiny-grid-column title="操作">
+          <template v-slot="{ row }">
+            <tiny-button
+              type="text"
+              text="回退"
+              class="fallback-btn"
+              :disabled="isCurrentVersion(row)"
+              @click="handleChangeVersion(row)"
+            ></tiny-button
+          ></template>
+        </tiny-grid-column>
         <template #empty>
           <search-empty :isShow="true" />
         </template>
@@ -27,7 +34,8 @@
 <script>
 import { reactive, watch, ref } from 'vue'
 import { Grid, GridColumn, Button } from '@opentiny/vue'
-import { PluginSetting, CloseIcon, BlockHistoryTemplate, SearchEmpty } from '@opentiny/tiny-engine-common'
+import { format } from '@opentiny/vue-renderless/common/date'
+import { PluginSetting, CloseIcon, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useBlock, useModal } from '@opentiny/tiny-engine-meta-register'
 import { fetchBlockById, requestGroupBlockVersion } from './http'
 import { useVersionSelectPanel } from './js/usePanel'
@@ -38,7 +46,6 @@ export default {
     TinyGridColumn: GridColumn,
     TinyButton: Button,
     PluginSetting,
-    BlockHistoryTemplate,
     CloseIcon,
     SearchEmpty
   },
@@ -64,9 +71,7 @@ export default {
         })
     }
 
-    const selectVersion = () => {
-      const selectedRow = versionGrid.value.getRadioRow()
-
+    const handleChangeVersion = (selectedRow) => {
       if (selectedRow) {
         confirm({
           title: '修改区块版本',
@@ -109,13 +114,19 @@ export default {
       }
     })
 
+    const isCurrentVersion = (blockHistory) => {
+      return blockHistory?.version === selectedBlock.value.current_version
+    }
+
     return {
       state,
       selectedBlock,
-      selectVersion,
       versionGrid,
       panel,
-      closePanel
+      closePanel,
+      format,
+      isCurrentVersion,
+      handleChangeVersion
     }
   }
 }
@@ -127,25 +138,16 @@ export default {
     color: var(--ti-lowcode-component-block-version-list-panel-title-color);
   }
 }
-.stripe-tiny-grid {
-  :deep(.tiny-grid__body-wrapper) {
-    .tiny-grid-body__row {
-      &,
-      &:not(.row__hover):nth-child(2n) {
-        background: var(--ti-lowcode-component-block-version-list-item-bg);
-      }
-      &:last-child {
-        .tiny-grid-body__column {
-          border-bottom: 1px solid var(--ti-lowcode-component-block-version-list-item-border-color);
-        }
-      }
-      .tiny-grid-body__column {
-        border-top: 1px solid var(--ti-lowcode-component-block-version-list-item-border-color);
-      }
-    }
-  }
-}
 .close-icon {
   margin-left: 16px;
 }
+.tiny-button.tiny-button {
+  &.fallback-btn {
+    min-width: unset;
+    padding: 0;
+  }
+  &.tiny-button--text.is-disabled {
+    color: var(--ti-button-text-color-disabled);
+  }
+}
 </style>
diff --git a/packages/plugins/page/src/PageFolderSetting.vue b/packages/plugins/page/src/PageFolderSetting.vue
index 3c509875a..5f2f8d5ad 100644
--- a/packages/plugins/page/src/PageFolderSetting.vue
+++ b/packages/plugins/page/src/PageFolderSetting.vue
@@ -208,9 +208,25 @@ export default {
 <style lang="less" scoped>
 .pageFolder-plugin-setting {
   :deep(.plugin-setting-header) {
+    border: 0;
     .close-plugin-setting-icon {
       margin-left: 8px;
     }
+    .button-group {
+      column-gap: 2px;
+      .tiny-button {
+        width: 40px;
+        padding: 0;
+        min-width: 40px;
+      }
+    }
+  }
+  :deep(.plugin-setting-content) {
+    padding: 0 0 16px 0;
+  }
+
+  :deep(.tiny-collapse) {
+    border-bottom: 0;
   }
 }
 </style>
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index b70704e5f..4c3cfaed5 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -425,6 +425,10 @@ export default {
   :deep(.plugin-setting-content) {
     padding: 0 0 16px 0;
   }
+
+  :deep(.tiny-collapse) {
+    border-bottom: 0;
+  }
 }
 
 .life-cycles-container {
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 21bad3e19..0c3b7c188 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -25,8 +25,7 @@
           :filter-node-method="filterPageTreeData"
           :render-content="renderContent"
           :expand-on-click-node="false"
-          :shrink-icon="shrinkIcon"
-          :expand-icon="expandIcon"
+          :icon="nullIcon"
           node-key="id"
         ></tiny-tree>
       </div>
@@ -262,38 +261,28 @@ export default {
     }
 
     const renderContent = (h, { node, data }) => {
-      if (!data.isPage && !data.children) {
-        data.trueFolder = true
-      } else {
-        data.trueFolder = false
-      }
-
       const isPageLocked = getCanvasStatus(data.occupier).state === PAGE_STATUS.Lock
-      const pageEditIcon = isPageLocked ? (
-        <SvgIcon
-          class="page-edit-icon"
-          name="locked-outline"
-          onMousedown={(e) => openSettingPanel(e, node, isPageLocked)}
-        ></SvgIcon>
-      ) : null
 
       return (
         <span class="tiny-tree-node__label" onMousedown={(e) => nodeClick(e, node)}>
-          <span class="page-name-label" title={node.label}>
-            {data.isPage ? <SvgIcon name="text-page-common" class="icon-page"></SvgIcon> : null}
-            {data.trueFolder ? <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon> : null}
-            <span class="label">{node.label}</span>
-          </span>
+          {data.isPage ? (
+            <SvgIcon name="text-page-common" class="icon-page"></SvgIcon>
+          ) : (
+            <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon>
+          )}
+          <span class="label">{node.label}</span>
           <span class="icons">
-            {data.isPage ? pageEditIcon : null}
-            {data.isHome ? (
-              <span class="home">
-                <SvgIcon class="page-edit-icon" name="text-page-home"></SvgIcon>
-              </span>
+            {data.isPage && isPageLocked ? (
+              <SvgIcon
+                class="page-edit-icon"
+                name="locked"
+                onMousedown={(e) => openSettingPanel(e, node, isPageLocked)}
+              ></SvgIcon>
             ) : null}
+            {data.isHome ? <SvgIcon class="page-edit-icon" name="text-page-home"></SvgIcon> : null}
             <SvgIcon
               name="setting"
-              class="setting  page-edit-icon"
+              class="setting page-edit-icon"
               onMousedown={(e) => openSettingPanel(e, node, isPageLocked)}
             ></SvgIcon>
           </span>
@@ -325,9 +314,7 @@ export default {
       emit('add')
     }
 
-    const expandIcon = <SvgIcon name="text-page-folder-closed" class="folder-icon"></SvgIcon>
-
-    const shrinkIcon = <SvgIcon name="text-page-folder" class="folder-icon"></SvgIcon>
+    const nullIcon = <span></span>
 
     return {
       createPublicPage,
@@ -341,8 +328,7 @@ export default {
       getPageTreeRefs,
       IconFolderOpened: IconFolderOpened(),
       IconFolderClosed: IconFolderClosed(),
-      shrinkIcon,
-      expandIcon
+      nullIcon
     }
   }
 }
@@ -375,6 +361,13 @@ export default {
       margin-left: 6px;
     }
   }
+  :deep(.tiny-collapse-item) {
+    border-left: 0;
+    border-right: 0;
+  }
+  :deep(.tiny-collapse-item__content) {
+    padding: 0 0 12px 0;
+  }
 }
 
 .page-manage-collapse.page-manage-collapse {
@@ -384,132 +377,51 @@ export default {
 }
 
 .app-manage-tree {
-  :deep(.label) {
-    margin-right: 10px;
-    margin-left: 20px;
-  }
   :deep(.tiny-tree) {
-    background: var(--ti-lowcode-page-manage-tree-node-background-color);
-    color: var(--ti-lowcode-page-manage-tree-color);
+    .tiny-tree-node__label {
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      flex: 1;
 
-    .tiny-tree-node {
-      &:hover {
-        background-color: var(--ti-lowcode-page-manage-page-tree-background-hover-color);
+      & > .svg-icon {
+        margin-right: 4px;
       }
-      &.is-current,
-      &.is-current .tiny-tree-node__content,
-      &.is-current .tiny-tree-node__content-box {
-        color: var(--ti-lowcode-page-manage-tree-color);
-        background-color: var(--ti-lowcode-page-manage-page-tree-background-active-color);
-        &:hover {
-          background-color: var(--ti-lowcode-page-manage-page-tree-background-hover-color);
-        }
-        & > .tiny-tree-node__content-left {
-          font-weight: 700;
-        }
-        .tree-node-icon {
-          width: 0;
-        }
+      .svg-icon {
+        color: var(--te-common-icon-secondary);
       }
-    }
-    .tiny-tree-node__label {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      height: 24px;
-      line-height: 24px;
-      color: var(--ti-lowcode-page-manage-tree-node-label-color);
-      .page-edit-icon {
-        font-size: 16px;
+      & .label {
+        font-size: 12px;
+        flex: 1;
       }
     }
-    .tiny-tree-node__content {
-      height: 32px;
-      &::before {
-        content: '';
-        width: 12px;
-        height: 100%;
-        // 页面拖拽功能没上，先不显示拖拽图标
-        // background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTMycHgiIGhlaWdodD0iMTMycHgiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNhZGIwYjg7fQo8L3N0eWxlPgo8cGF0aCBpZD0iaWNvbi3np7vliqgiIGNsYXNzPSJzdDAiIGQ9Ik0xMCwzQzkuNCwzLDksMi42LDksMnMwLjQtMSwxLTFjMC42LDAsMSwwLjQsMSwxUzEwLjYsMywxMCwzeiBNNiwzQzUuNCwzLDUsMi42LDUsMiYjMTA7JiM5O3MwLjQtMSwxLTFzMSwwLjQsMSwxUzYuNiwzLDYsM3ogTTEwLDdDOS40LDcsOSw2LjYsOSw2czAuNC0xLDEtMWMwLjYsMCwxLDAuNCwxLDFTMTAuNiw3LDEwLDd6IE02LDdDNS40LDcsNSw2LjYsNSw2czAuNC0xLDEtMSYjMTA7JiM5O3MxLDAuNCwxLDFTNi42LDcsNiw3eiBNMTAsMTFjLTAuNiwwLTEtMC40LTEtMWMwLTAuNiwwLjQtMSwxLTFjMC42LDAsMSwwLjQsMSwxQzExLDEwLjYsMTAuNiwxMSwxMCwxMXogTTYsMTFjLTAuNiwwLTEtMC40LTEtMSYjMTA7JiM5O2MwLTAuNiwwLjQtMSwxLTFzMSwwLjQsMSwxQzcsMTAuNiw2LjYsMTEsNiwxMXogTTEwLDE1Yy0wLjYsMC0xLTAuNC0xLTFzMC40LTEsMS0xYzAuNiwwLDEsMC40LDEsMVMxMC42LDE1LDEwLDE1eiBNNiwxNSYjMTA7JiM5O2MtMC42LDAtMS0wLjQtMS0xczAuNC0xLDEtMXMxLDAuNCwxLDFTNi42LDE1LDYsMTV6Ii8+Cjwvc3ZnPg==);
-        background-size: 12px 32px;
-        background-repeat: no-repeat;
-        background-position: 3px 3px;
-        cursor: ns-resize;
-        opacity: 0.35;
-        visibility: hidden;
-      }
-      &:hover {
-        border-radius: 0;
-        .icons {
-          .setting {
-            display: inline-block;
-            font-size: 16px;
-          }
-        }
 
-        &::before {
-          visibility: visible;
-        }
-      }
-      .folder-icon {
-        color: var(--ti-lowcode-page-manage-content-tips-color);
-      }
+    .tree-node-icon {
+      margin-right: 0;
     }
 
-    .page-name-label {
-      display: flex;
-      align-items: center;
-      .icon-page {
-        margin-right: -15px;
-      }
-      .label {
-        display: inline-block;
-        max-width: 160px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 12px;
-      }
+    .svg-icon {
+      width: 14px;
+      height: 14px;
     }
 
     .icons {
       display: flex;
       align-items: center;
-      padding-right: 12px;
-      font-size: 16px;
-
-      .page-status {
-        display: block;
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        background: green;
-      }
-
-      .page-status.locked {
-        background: red;
-      }
-
-      .home {
-        margin-left: 5px;
-      }
+      gap: 4px;
+    }
 
-      .setting {
-        display: none;
-        margin-left: 6px;
-      }
+    .tiny-tree-node.is-leaf .tiny-tree-node__content {
+      padding-left: 0;
+    }
 
-      svg {
-        color: var(--ti-lowcode-page-manage-content-tips-color);
-        &:hover {
-          color: var(--ti-lowcode-page-manage-svg-hover-color);
+    .tiny-tree-node.is-current {
+      & > .tiny-tree-node__content {
+        & > div > .tiny-tree-node__content-box {
+          background-color: var(--te-common-bg-container);
         }
       }
     }
-
-    .tiny-tree-node__expand-icon:not(.is-leaf) {
-      margin-left: 12px;
-      margin-right: 6px;
-    }
   }
 }
 </style>
diff --git a/packages/settings/props/src/Main.vue b/packages/settings/props/src/Main.vue
index 3d4e81ede..3b64f75aa 100644
--- a/packages/settings/props/src/Main.vue
+++ b/packages/settings/props/src/Main.vue
@@ -43,6 +43,6 @@ export default {
 
 <style lang="less" scoped>
 .block-description {
-  margin: 10px;
+  margin: 12px;
 }
 </style>