From 15597a15440a74aceed21134eb43d1794a0e47d4 Mon Sep 17 00:00:00 2001
From: xuanlid <51027603+xuanlid@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:39:50 +0800
Subject: [PATCH] fix: Modify UI review comments (#941)

* 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 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 UI review comments in i18n

* 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

* fix:Modify Code Font in bridge/state

* fix:Modify button in header

* fix: Modify button in state

* fix:Modify Font Size in datasource

* fix: Modify icon in lifecycle/blockEvent

* fix: Modify validate in dialog

* fix: modify second-panel and tree styles

* fix: Modify tree componentType

* fix: Modify the fixed column style of the table

* fix: Modify top save and more

* fix:Modify code style in state

* fix:Modify the block list in block

* fix: Modify remote panel

* fix: Modify the icon to tips and gray background

* fix:Modify global popover and toolTip

* fix:Modify open-delay to a constant
---
 .../common/component/BlockDeployDialog.vue    |   1 +
 packages/common/component/I18nInput.vue       |  10 +-
 packages/common/component/LifeCycles.vue      |  23 +++-
 packages/common/component/MonacoEditor.vue    |  16 ++-
 packages/common/component/PluginBlockList.vue |   3 +-
 packages/common/component/PluginSetting.vue   |  21 ++--
 packages/common/component/SvgButton.vue       |  19 ++-
 .../toolbar-built-in/ToolbarBaseButton.vue    |   7 +-
 packages/layout/src/ToolbarCollapse.vue       |  13 +-
 packages/plugins/block/src/BlockEventList.vue |  17 ++-
 .../plugins/block/src/BlockPropertyList.vue   |  17 ++-
 packages/plugins/block/src/Main.vue           |  13 +-
 .../src/DataSourceFieldCheckRanger.vue        |  50 ++++----
 .../datasource/src/DataSourceFieldForm.vue    |   2 +-
 .../datasource/src/DataSourceFieldList.vue    |   4 +-
 .../plugins/datasource/src/DataSourceList.vue |   2 +
 .../datasource/src/DataSourceRecordList.vue   |   7 +-
 .../src/DataSourceRemoteAutoload.vue          |   6 +-
 .../src/DataSourceRemoteDataAdapter.vue       |   7 +-
 .../src/DataSourceRemoteDataResult.vue        |   7 +-
 .../datasource/src/DataSourceRemoteForm.vue   |   3 +-
 .../datasource/src/DataSourceRemotePanel.vue  |  26 ++--
 .../datasource/src/RemoteDataAdapterForm.vue  |   8 +-
 packages/plugins/i18n/src/Main.vue            |  30 +++--
 .../src/meta/block/src/BlockGroup.vue         |  42 +++----
 .../materials/src/meta/component/src/Main.vue |   4 +-
 packages/plugins/state/src/CreateStore.vue    |  11 +-
 packages/plugins/state/src/CreateVariable.vue |   2 +-
 packages/plugins/state/src/DataSourceList.vue |   6 +-
 packages/plugins/state/src/EditorI18nTool.vue |   7 +-
 packages/plugins/state/src/StateTips.vue      |   4 +-
 packages/plugins/tree/src/Main.vue            |  28 ++---
 packages/theme/base/src/component-common.less |  46 ++++++-
 packages/toolbars/fullscreen/src/Main.vue     |   2 +-
 packages/toolbars/generate-code/meta.js       |   2 +-
 packages/toolbars/lang/src/Main.vue           |   2 +-
 packages/toolbars/media/src/Main.vue          |   2 -
 packages/toolbars/save/src/Main.vue           | 118 +++++++++---------
 packages/utils/src/constants/index.js         |   4 +
 39 files changed, 339 insertions(+), 253 deletions(-)

diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index f304a59db..dd2b911f7 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -14,6 +14,7 @@
       label-align
       :model="formState"
       :rules="formRules"
+      validate-type="text"
     >
       <tiny-form-item label="版本号" prop="version">
         <tiny-input v-model="formState.version" placeholder="请输入X.Y.Z格式版本号，如1.0.0"></tiny-input>
diff --git a/packages/common/component/I18nInput.vue b/packages/common/component/I18nInput.vue
index a155923a1..137fc3287 100644
--- a/packages/common/component/I18nInput.vue
+++ b/packages/common/component/I18nInput.vue
@@ -26,7 +26,7 @@
           </div>
 
           <template #reference>
-            <icon-language :class="['icon-language', { isBind }]"></icon-language>
+            <svg-icon name="internationalization" :class="['icon-language', { isBind }]"></svg-icon>
           </template>
         </tiny-popover>
       </template>
@@ -38,7 +38,7 @@
 import { computed, ref, watchEffect } from 'vue'
 import { useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { Input, Popover } from '@opentiny/vue'
-import { IconClose, IconLanguage } from '@opentiny/vue-icon'
+import { IconClose } from '@opentiny/vue-icon'
 import BindI18n from './BindI18n.vue'
 
 export default {
@@ -47,8 +47,7 @@ export default {
     TinyInput: Input,
     BindI18n,
     TinyPopover: Popover,
-    IconClose: IconClose(),
-    IconLanguage: IconLanguage()
+    IconClose: IconClose()
   },
   inheritAttrs: false,
   props: {
@@ -139,6 +138,9 @@ export default {
     right: 0;
   }
 }
+.icon-language {
+  color: var(--te-common-icon-secondary);
+}
 </style>
 
 <style>
diff --git a/packages/common/component/LifeCycles.vue b/packages/common/component/LifeCycles.vue
index 2458841c2..cf9b15aaf 100644
--- a/packages/common/component/LifeCycles.vue
+++ b/packages/common/component/LifeCycles.vue
@@ -21,13 +21,18 @@
   <div class="life-cycle-tips">{{ lifeCycleTips }}</div>
   <meta-list-items :optionsList="Object.keys(state.bindLifeCycles)" :draggable="false">
     <template #content="{ data }">
-      <div>
+      <div class="life-cycle-content-item">
         {{ data }}
       </div>
     </template>
     <template #operate="{ data }">
-      <svg-button name="setting-outline" tips="编辑" placement="top" @click="openLifeCyclesPanel(data)"></svg-button>
-      <svg-button name="delete" tips="删除" placement="top" @click="deleteLifeCycle(data)"></svg-button>
+      <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>
     </template>
   </meta-list-items>
   <tiny-dialog-box v-model:visible="state.showLifeCyclesDialog" fullscreen :title="state.title" :append-to-body="true">
@@ -268,12 +273,20 @@ export default {
   margin-left: 20px;
   margin-right: 20px;
 }
+.life-cycle-content-item {
+  color: var(--te-common-text-primary);
+}
+.opt-button {
+  width: auto;
+  &:last-child {
+    margin-right: var(--te-base-space-3x);
+  }
+}
 
 .popover-list {
-  margin: 8px 0;
   li {
     padding: 0 12px;
-    margin: 0 -8px;
+    margin: 0 -16px;
     line-height: 24px;
     cursor: pointer;
     &:hover {
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 8c6fc8582..27a3f47c1 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -8,14 +8,19 @@
         </div>
         <div :class="['buttons', { fullscreen: fullscreen }]" id="icon-buttons">
           <slot name="buttons"></slot>
-          <tiny-tooltip v-if="showFormatBtn && options.language === 'json'" content="格式化" placement="top">
+          <tiny-tooltip
+            v-if="showFormatBtn && options.language === 'json'"
+            content="格式化"
+            placement="top"
+            :open-delay="OPEN_DELAY.Default"
+          >
             <public-icon name="json" @click="formatCode"></public-icon>
           </tiny-tooltip>
           <span v-if="showFullScreenBtn">
-            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top">
+            <tiny-tooltip v-if="!fullscreen" content="全屏" placement="top" :open-delay="OPEN_DELAY.Default">
               <public-icon name="full-screen" @click="switchFullScreen(true)"></public-icon>
             </tiny-tooltip>
-            <tiny-tooltip v-else content="退出全屏" placement="top">
+            <tiny-tooltip v-else content="退出全屏" placement="top" :open-delay="OPEN_DELAY.Default">
               <public-icon name="cancel-full-screen" @click="switchFullScreen(false)"></public-icon>
             </tiny-tooltip>
           </span>
@@ -39,6 +44,8 @@ import { computed, ref, onActivated, onDeactivated } from 'vue'
 import { Tooltip } from '@opentiny/vue'
 import PublicIcon from './PublicIcon.vue'
 import VueMonaco from './VueMonaco.vue'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -122,7 +129,8 @@ export default {
       fullscreen,
       switchFullScreen,
       getValue,
-      formatCode
+      formatCode,
+      OPEN_DELAY
     }
   }
 }
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 04a566d6d..3709f8973 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -741,7 +741,6 @@ export default {
     box-sizing: border-box;
     cursor: pointer;
     &:hover {
-      background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
       color: var(--ti-lowcode-common-primary-text-color);
     }
     .list-item-icon {
@@ -752,7 +751,7 @@ export default {
       color: var(--te-common-icon-secondary);
     }
     .list-item-svg:hover {
-      background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
+      background-color: transparent;
     }
   }
 }
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index c4e13912d..e9a1846b4 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -9,15 +9,14 @@
       </slot>
       <div class="button-group-wrap">
         <slot name="header">
-          <div v-if="showIfFullScreen" class="cursor" @click="fullScreen">
-            <icon-fullscreen v-if="!state.isFullScreen" class="icon-fullscreen"></icon-fullscreen>
-            <icon-minscreen v-if="state.isFullScreen" class="icon-minscreen"></icon-minscreen>
-            <span class="full-screen-label">{{ getFullScreenLabel(state.isFullScreen) }}</span>
-          </div>
           <tiny-button v-if="!isIconButton" type="info" @click="$emit('save')" class="plugin-save">保存</tiny-button>
           <tiny-button v-if="isIconButton" :icon="icon" type="info" @click="$emit('add')">
             {{ iconButtonText }}
           </tiny-button>
+          <div v-if="showIfFullScreen" class="cursor" @click="fullScreen">
+            <svg-icon v-if="!state.isFullScreen" name="full-screen"></svg-icon>
+            <svg-icon v-if="state.isFullScreen" name="cancel-full-screen"></svg-icon>
+          </div>
           <icon-close class="icon-close close" @click="$emit('cancel')"></icon-close>
         </slot>
       </div>
@@ -32,7 +31,7 @@
 <script>
 import { reactive, watchEffect } from 'vue'
 import { Button } from '@opentiny/vue'
-import { iconPlus, iconFullscreen, iconMinscreen, iconClose } from '@opentiny/vue-icon'
+import { iconPlus, iconClose } from '@opentiny/vue-icon'
 
 const EVENTS = {
   FULL_SCREEN_CHANGE: 'fullScreenChange',
@@ -45,8 +44,6 @@ const EVENTS = {
 export default {
   components: {
     TinyButton: Button,
-    IconFullscreen: iconFullscreen(),
-    IconMinscreen: iconMinscreen(),
     IconClose: iconClose()
   },
   props: {
@@ -114,8 +111,6 @@ export default {
       state,
       fullScreen,
       getFullScreenLabel,
-      IconFullscreen: iconFullscreen(),
-      IconMinscreen: iconMinscreen(),
       IconClose: iconClose()
     }
   }
@@ -125,7 +120,7 @@ export default {
 <style lang="less" scoped>
 .plugin-setting {
   position: absolute;
-  left: calc(var(--base-left-panel-width) - 6px);
+  left: var(--base-left-panel-width);
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
@@ -136,6 +131,7 @@ export default {
   &:not(.second-panel) {
     box-shadow: 6px 0px 3px 0px rgba(0, 0, 0, 0.05);
     border-right: none;
+    border-left: none;
   }
   &.full-screen {
     width: var(--base-collection-panel-full-screen-width);
@@ -154,11 +150,12 @@ export default {
   }
 
   .cursor {
+    margin-left: 12px;
     cursor: pointer;
   }
 
   .close {
-    margin-left: 16px;
+    margin-left: 12px;
     cursor: pointer;
   }
 
diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue
index 7008a42ba..85b71d9ba 100644
--- a/packages/common/component/SvgButton.vue
+++ b/packages/common/component/SvgButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="svg-button" @click="$emit('click', $event)">
+  <span class="svg-button" :class="{ 'svg-button-hover': hoverBgColor }" @click="$emit('click', $event)">
     <tiny-tooltip effect="dark" :content="tips" :placement="placement">
       <component :is="name" v-if="isTinyIcon" />
       <svg-icon v-else :name="name"></svg-icon>
@@ -27,6 +27,10 @@ export default {
     name: {
       type: String,
       default: 'add'
+    },
+    hoverBgColor: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['click'],
@@ -45,17 +49,13 @@ export default {
   width: 24px;
   height: 24px;
   font-size: 16px;
-  color: var(--ti-lowcode-component-svg-button-color);
+  color: var(--te-common-icon-secondary);
   border: 1px solid transparent;
   border-radius: 4px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  &:hover {
-    color: var(--ti-lowcode-component-svg-button-hover-color);
-    background-color: var(--ti-lowcode-component-svg-button-hover-bg-color);
-  }
   &.active {
     color: var(--ti-lowcode-component-svg-button-active-color);
     background-color: var(--ti-lowcode-component-svg-button-active-bg-color);
@@ -68,4 +68,11 @@ export default {
     outline: none;
   }
 }
+.svg-button-hover {
+  color: var(--te-common-icon-primary);
+  &:hover {
+    color: var(--te-common-icon-primary);
+    background-color: var(--te-common-bg-prompt);
+  }
+}
 </style>
diff --git a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
index 67d4de388..57b6ad041 100644
--- a/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
+++ b/packages/common/component/toolbar-built-in/ToolbarBaseButton.vue
@@ -56,9 +56,8 @@ export default {
     right: 2px;
     z-index: 100;
   }
-}
-
-.save-title {
-  margin: 0 6px;
+  .svg-icon.svg-icon.svg-icon {
+    color: var(--te-common-icon-primary);
+  }
 }
 </style>
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
index 4bbce01ac..1d648c253 100644
--- a/packages/layout/src/ToolbarCollapse.vue
+++ b/packages/layout/src/ToolbarCollapse.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-popover :visible-arrow="false" width="140" trigger="hover">
+  <tiny-popover :visible-arrow="false" width="140" trigger="click" :open-delay="OPEN_DELAY.Default">
     <template #reference>
       <span class="toolbar-ellipsis">
         <svg-icon name="ellipsis"></svg-icon>
@@ -25,6 +25,8 @@
 import { Popover } from '@opentiny/vue'
 import { IconPopup } from '@opentiny/vue-icon'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -39,7 +41,8 @@ export default {
   },
   setup() {
     return {
-      getMergeMeta
+      getMergeMeta,
+      OPEN_DELAY
     }
   }
 }
@@ -60,13 +63,14 @@ export default {
 }
 
 .collapse-content {
-  margin: 8px 4px;
   .empty-bar {
     font-size: 12px;
 
     .toolbar-list-button {
       height: 24px;
       line-height: 24px;
+      margin: 0 -16px;
+      padding: 0 16px;
 
       &:hover {
         background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);
@@ -81,13 +85,12 @@ export default {
 
     .icon-hides {
       margin-right: 8px;
-      color: var(--te-common-icon-secondary);
+      color: var(--te-common-icon-primary);
     }
   }
 }
 
 .collapse-content .empty-bar:last-child {
-  margin-bottom: 4px;
   .empty-line {
     display: none;
   }
diff --git a/packages/plugins/block/src/BlockEventList.vue b/packages/plugins/block/src/BlockEventList.vue
index 25bedb507..8b496e27a 100644
--- a/packages/plugins/block/src/BlockEventList.vue
+++ b/packages/plugins/block/src/BlockEventList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="add-button">
-    <tiny-button @click="addEvent"> <icon-plus class="icon-plus"></icon-plus>添加</tiny-button>
+    <tiny-button @click="addEvent"> <svg-icon name="add"></svg-icon>添加</tiny-button>
   </div>
   <meta-list-items class="list" :optionsList="list" :draggable="false">
     <template #content="{ data }">
@@ -9,8 +9,8 @@
       </div>
     </template>
     <template #operate="{ data }">
-      <svg-button name="to-edit" tips="编辑" placement="top" @click="setEdit(data)"></svg-button>
-      <svg-button name="delete" tips="删除" placement="top" @click="delBlockEvent(data.name)"></svg-button>
+      <svg-button class="opt-button" :hoverBgColor="false" name="to-edit" @click="setEdit(data)"></svg-button>
+      <svg-button class="opt-button" :hoverBgColor="false" name="delete" @click="delBlockEvent(data.name)"></svg-button>
     </template>
   </meta-list-items>
 </template>
@@ -18,7 +18,6 @@
 <script>
 import { computed } from 'vue'
 import { Button as TinyButton } from '@opentiny/vue'
-import { iconPlus } from '@opentiny/vue-icon'
 import { MetaListItems, SvgButton } from '@opentiny/tiny-engine-common'
 import {
   getEditBlockEvents,
@@ -33,8 +32,7 @@ export default {
   components: {
     TinyButton,
     MetaListItems,
-    SvgButton,
-    IconPlus: iconPlus()
+    SvgButton
   },
   setup() {
     const list = computed(() => Object.entries(getEditBlockEvents() || {}).map(([name, event]) => ({ name, event })))
@@ -68,6 +66,7 @@ export default {
 
 .item-text {
   flex: 1;
+  color: var(--te-common-text-primary);
 }
 .item-text.active {
   font-weight: 700;
@@ -86,4 +85,10 @@ export default {
     stroke: var(--te-common-text-weaken);
   }
 }
+.opt-button {
+  width: auto;
+  &:last-child {
+    margin-right: var(--te-base-space-3x);
+  }
+}
 </style>
diff --git a/packages/plugins/block/src/BlockPropertyList.vue b/packages/plugins/block/src/BlockPropertyList.vue
index c94ba9bf2..476ae54da 100644
--- a/packages/plugins/block/src/BlockPropertyList.vue
+++ b/packages/plugins/block/src/BlockPropertyList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="add-button">
     <tiny-button @click="addProperty">
-      <icon-plus class="icon-plus"></icon-plus>
+      <svg-icon name="add"></svg-icon>
       <span>添加</span>
     </tiny-button>
   </div>
@@ -12,8 +12,8 @@
       </div>
     </template>
     <template #operate="{ data }">
-      <svg-button name="to-edit" tips="编辑" placement="top" @click="handleEdit(data)"></svg-button>
-      <svg-button name="delete" tips="删除" placement="top" @click="del(data)"></svg-button>
+      <svg-button name="to-edit" class="opt-button" :hoverBgColor="false" @click="handleEdit(data)"></svg-button>
+      <svg-button name="delete" class="opt-button" :hoverBgColor="false" @click="del(data)"></svg-button>
     </template>
   </meta-list-items>
 </template>
@@ -21,7 +21,6 @@
 <script>
 import { computed } from 'vue'
 import { Button as TinyButton } from '@opentiny/vue'
-import { iconPlus } from '@opentiny/vue-icon'
 import { remove } from '@opentiny/vue-renderless/common/array'
 import { MetaListItems, SvgButton } from '@opentiny/tiny-engine-common'
 import {
@@ -36,8 +35,7 @@ export default {
   components: {
     TinyButton,
     SvgButton,
-    MetaListItems,
-    IconPlus: iconPlus()
+    MetaListItems
   },
   setup() {
     const list = computed(() => getEditBlockPropertyList() || [])
@@ -107,4 +105,11 @@ export default {
     stroke: var(--te-common-text-weaken);
   }
 }
+.opt-button {
+  color: var(--te-common-icon-secondary);
+  width: auto;
+  &:last-child {
+    margin-right: var(--te-base-space-3x);
+  }
+}
 </style>
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index fbadabfe9..40bca495e 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -37,7 +37,12 @@
             <div class="block-item">
               <span>{{ item.name }}</span>
               <div class="item-btns">
-                <svg-button class="item-icon" name="to-edit" title="编辑" @click.stop="editCategory(item)"></svg-button>
+                <svg-button
+                  class="item-icon"
+                  name="to-edit"
+                  :hoverBgColor="false"
+                  @click.stop="editCategory(item)"
+                ></svg-button>
                 <tiny-popover
                   :modelValue="state.currentDeleteGroupId === item.id"
                   placement="right"
@@ -64,7 +69,7 @@
                       v-if="!item.blocks.length"
                       class="item-icon"
                       name="delete"
-                      title="删除"
+                      :hoverBgColor="false"
                       @click.stop="handleShowDeleteModal(item.id)"
                     ></svg-button>
                   </template>
@@ -500,9 +505,9 @@ export default {
   bottom: 0;
   left: -6px;
   right: 0;
-  padding: 10px 16px;
+  padding: 8px 16px;
   background-color: var(--ti-lowcode-component-search-bg);
-  box-shadow: 0 -2px 12px 0 var(--te-base-box-shadow-rgba-2);
+  border-top: 1px solid var(--te-common-border-divider);
   color: var(--ti-lowcode-component-block-list-item-color);
   display: flex;
   justify-content: space-between;
diff --git a/packages/plugins/datasource/src/DataSourceFieldCheckRanger.vue b/packages/plugins/datasource/src/DataSourceFieldCheckRanger.vue
index 5d2506977..6b3a58267 100644
--- a/packages/plugins/datasource/src/DataSourceFieldCheckRanger.vue
+++ b/packages/plugins/datasource/src/DataSourceFieldCheckRanger.vue
@@ -1,43 +1,35 @@
 <!--录入数据的字符范围-->
 <template>
   <div class="collection-field-num">
-    <tiny-row gutter="0">
-      <tiny-col :span="6">
-        <div class="collection-field-item">
-          <tiny-form-item
-            prop="format.min"
-            :label="type === 'string' ? '最少输入字符数（包含空格）' : '最小值'"
-            label-width="300px"
-          >
-            <tiny-numeric v-model="formData.format.min" controls-position="right"></tiny-numeric>
-          </tiny-form-item>
-        </div>
-      </tiny-col>
-      <tiny-col :span="6">
-        <div class="collection-field-item">
-          <tiny-form-item
-            prop="format.max"
-            :label="type === 'string' ? '最多输入字符数（包含空格）' : '最大值'"
-            label-width="300px"
-          >
-            <tiny-numeric v-model="formData.format.max" controls-position="right"></tiny-numeric>
-          </tiny-form-item>
-        </div>
-      </tiny-col>
-    </tiny-row>
+    <div class="collection-field-item">
+      <tiny-form-item
+        prop="format.min"
+        :label="type === 'string' ? '最少输入字符数（包含空格）' : '最小值'"
+        label-width="300px"
+      >
+        <tiny-numeric v-model="formData.format.min" controls-position="right"></tiny-numeric>
+      </tiny-form-item>
+    </div>
+    <div class="collection-field-item">
+      <tiny-form-item
+        prop="format.max"
+        :label="type === 'string' ? '最多输入字符数（包含空格）' : '最大值'"
+        label-width="300px"
+      >
+        <tiny-numeric v-model="formData.format.max" controls-position="right"></tiny-numeric>
+      </tiny-form-item>
+    </div>
   </div>
 </template>
 
 <script>
 import { inject } from 'vue'
-import { Numeric, FormItem, Row, Col } from '@opentiny/vue'
+import { Numeric, FormItem } from '@opentiny/vue'
 import { formDataInjectionSymbols } from './DataSourceFieldForm.vue'
 export default {
   components: {
     TinyNumeric: Numeric,
-    TinyFormItem: FormItem,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyFormItem: FormItem
   },
   props: {
     type: {
@@ -57,6 +49,7 @@ export default {
 
 <style lang="less" scoped>
 .collection-field-item {
+  width: 50%;
   .field-item-tip {
     padding-left: 5px;
     color: var(--ti-lowcode-datasource-description-error-color);
@@ -72,6 +65,7 @@ export default {
   color: var(--ti-lowcode-datasource-dialog-font-color);
 }
 .collection-field-num {
+  display: flex;
   align-items: center;
   justify-content: space-between;
 }
diff --git a/packages/plugins/datasource/src/DataSourceFieldForm.vue b/packages/plugins/datasource/src/DataSourceFieldForm.vue
index 3d8ddc007..80dcc828b 100644
--- a/packages/plugins/datasource/src/DataSourceFieldForm.vue
+++ b/packages/plugins/datasource/src/DataSourceFieldForm.vue
@@ -209,7 +209,7 @@ export default {
     .field-cell-name {
       margin-left: 5px;
       font-weight: bold;
-      font-size: 15px;
+      font-size: var(--te-base-font-size-base);
       .description {
         color: var(--ti-lowcode-datasource-input-icon-color);
         margin-left: 5px;
diff --git a/packages/plugins/datasource/src/DataSourceFieldList.vue b/packages/plugins/datasource/src/DataSourceFieldList.vue
index 06dfdaa7f..b4c68a079 100644
--- a/packages/plugins/datasource/src/DataSourceFieldList.vue
+++ b/packages/plugins/datasource/src/DataSourceFieldList.vue
@@ -20,10 +20,10 @@
     </div>
     <div class="field-operation" v-if="!field.editable">
       <div class="field-handler" @click="openFieldForm(index)">
-        <svg-button name="to-edit" tips="编辑" placement="top" @click="handleEdit(data)"></svg-button>
+        <svg-button name="to-edit" :hoverBgColor="false" @click="handleEdit(data)"></svg-button>
       </div>
       <div class="field-handler" @click="deleteField($event, field)">
-        <svg-button tips="删除" name="text-source-delete"></svg-button>
+        <svg-button :hoverBgColor="false" name="text-source-delete"></svg-button>
       </div>
     </div>
   </data-source-field-form>
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 566ea8154..c5b5ecd53 100644
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@@ -14,6 +14,7 @@
           <div class="item-handler">
             <svg-button
               class="set-page"
+              :hoverBgColor="false"
               tips="编辑静态数据"
               name="data-edit"
               @mousedown.stop.prevent="openRecordListPanel(item, index)"
@@ -21,6 +22,7 @@
             </svg-button>
             <svg-button
               class="set-page"
+              :hoverBgColor="false"
               tips="设置数据源"
               name="text-source-setting"
               @mousedown.stop.prevent="openDataSourceForm(item, index)"
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 48008ea1f..a00c1b1b0 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -597,12 +597,14 @@ export default {
     }
   }
   .download {
-    margin: 0 12px;
-    text-decoration: underline;
+    text-decoration: none;
     display: inline-block;
     font-size: 12px;
     text-align: left;
     padding: 0;
+    &:hover {
+      text-decoration: underline;
+    }
     color: var(--te-common-text-primary);
     .icon-download {
       margin: 0 1px 4px 0;
@@ -633,6 +635,7 @@ export default {
     align-items: center;
     .svg-icon {
       margin-right: 10px;
+      color: var(--te-common-icon-secondary);
     }
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteAutoload.vue b/packages/plugins/datasource/src/DataSourceRemoteAutoload.vue
index 628b22f6f..e04c69d66 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteAutoload.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteAutoload.vue
@@ -39,14 +39,12 @@ export default {
 <style lang="less" scoped>
 .request-load {
   display: flex;
-  margin-bottom: 15px;
-  margin-top: 10px;
+  margin-bottom: 12px;
+  margin-top: 12px;
 
   .use-service {
     color: var(--ti-lowcode-datasource-color);
     font-size: 12px;
-    margin-top: 2px;
-    padding-left: 8px;
 
     span {
       color: var(--ti-lowcode-datasource-description-warning-color);
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataAdapter.vue b/packages/plugins/datasource/src/DataSourceRemoteDataAdapter.vue
index dd409d4a4..56b80c801 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataAdapter.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataAdapter.vue
@@ -97,6 +97,9 @@ export default {
 
 <style lang="less" scoped>
 .send-service {
+  .use-service {
+    margin-bottom: 0;
+  }
   :deep(.tiny-alert) {
     .tiny-alert__content {
       .tiny-alert__description {
@@ -106,8 +109,8 @@ export default {
     }
   }
   .life-cycle-alert {
-    font-size: 11px;
-    color: var(--ti-lowcode-datasource-tip-color);
+    font-size: var(--te-base-font-size-base);
+    color: var(--te-common-text-weaken);
   }
 }
 </style>
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
index e15f0e9c0..1eb2103f4 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
@@ -89,12 +89,11 @@ export default {
 .response-data {
   position: relative;
   .resonse-header {
-    padding: 10px;
-    margin-bottom: 16px;
+    margin-bottom: 12px;
 
     .life-cycle-alert {
-      font-size: 11px;
-      color: var(--ti-lowcode-datasource-tip-color);
+      font-size: var(--te-base-font-size-base);
+      color: var(--te-common-text-weaken);
     }
     .title {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
diff --git a/packages/plugins/datasource/src/DataSourceRemoteForm.vue b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
index fe2f01614..174d5fda5 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteForm.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
@@ -113,7 +113,8 @@ export default {
     }
     :deep(.border-input) {
       input {
-        border-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
         border-left: none;
       }
     }
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index 6d4d4f580..99a6f7fef 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -251,7 +251,6 @@ export default {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
     }
     .send {
-      margin-bottom: 14px;
     }
     .tip-dot {
       padding-left: 4px;
@@ -271,16 +270,11 @@ export default {
     :deep(.send-service) {
       text-align: right;
       border-top: 1px solid var(--ti-lowcode-datasource-tabs-border-color);
-      padding: 20px 10px;
-      margin-bottom: 10px;
+      padding: 12px 0px 0px;
 
       .use-service {
         text-align: left;
         padding-top: 5px;
-
-        div {
-          margin-bottom: 5px;
-        }
       }
 
       .title {
@@ -301,10 +295,28 @@ export default {
       overflow-y: scroll;
       :deep(.tiny-tabs.tiny-tabs--button-card .tiny-tabs__item) {
         border-radius: 4px;
+        &:hover {
+          color: var(--te-common-text-primary);
+        }
       }
       :deep(.tiny-tabs__content) {
         margin: 12px 0;
       }
+      :deep(.is-active) {
+        .tiny-tabs__item__title {
+          color: var(--te-common-text-primary);
+        }
+      }
+    }
+    :deep(.tiny-collapse) {
+      .tiny-collapse-item:first-child {
+        border-top: 0;
+      }
+      .tiny-collapse-item__header {
+        .tiny-collapse-item__word-overflow {
+          margin: var(--te-common-vertical-item-spacing-normal) 0px 0;
+        }
+      }
     }
   }
 }
diff --git a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
index 88f1be948..d1896f39c 100644
--- a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
+++ b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
@@ -54,12 +54,11 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 8px 12px;
-  margin-top: 12px;
-  font-size: 12px;
+  padding: 12px 0;
+  font-size: var(--te-base-font-size-base);
 
   div {
-    color: var(--te-common-text-secondary);
+    color: var(--te-common-text-primary);
   }
 
   .icon-del {
@@ -71,7 +70,6 @@ export default {
 .monaco-editor {
   min-height: 120px;
   height: 100%;
-  margin-top: 8px;
   border: 1px solid var(--te-common-border-divider);
   border-radius: 4px;
 }
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index e7cb06285..3b26c782a 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -78,14 +78,12 @@
           <tiny-grid-column width="90" field="operation" title="操作">
             <template v-slot="data">
               <div v-if="editingRow !== data.row" class="i18n-opera">
-                <tiny-tooltip class="item" effect="dark" placement="bottom" content="编辑" :open-delay="500">
-                  <span class="icon">
-                    <svg-icon name="to-edit" @click.stop="openEditor($event, data.row)"></svg-icon>
-                  </span>
-                </tiny-tooltip>
-                <tiny-tooltip class="item" effect="dark" placement="bottom" :open-delay="500">
+                <span class="icon">
+                  <svg-icon name="to-edit" @click.stop="openEditor($event, data.row)"></svg-icon>
+                </span>
+                <tiny-tooltip class="item" effect="dark" placement="bottom" :open-delay="OPEN_DELAY.Default">
                   <template #content>
-                    <div style="padding: 10px 20px">
+                    <div>
                       复制键值（唯一标识）<br />
                       {{ data.row.key }}
                     </div>
@@ -104,11 +102,9 @@
                     </template>
                   </tiny-popover>
                 </tiny-tooltip>
-                <tiny-tooltip class="item" effect="dark" placement="bottom" content="删除" :open-delay="500">
-                  <span class="icon">
-                    <svg-icon name="delete" @click="openDeletePopover(data.row)"></svg-icon>
-                  </span>
-                </tiny-tooltip>
+                <span class="icon">
+                  <svg-icon name="delete" @click="openDeletePopover(data.row)"></svg-icon>
+                </span>
               </div>
             </template>
           </tiny-grid-column>
@@ -130,8 +126,9 @@ 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'
-import { utils } from '@opentiny/tiny-engine-utils'
+import { utils, constants } from '@opentiny/tiny-engine-utils'
 import { BASE_URL } from '@opentiny/tiny-engine-common/js/environments'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -330,9 +327,9 @@ export default {
       copyRowIndex.value = rowIndex
       try {
         await toClipboard(row.key)
-        copyTipContent.value = '复制成功！'
+        copyTipContent.value = '复制成功'
       } catch (e) {
-        copyTipContent.value = '复制失败！'
+        copyTipContent.value = '复制失败'
       } finally {
         setTimeout(() => {
           copyRowIndex.value = ''
@@ -428,7 +425,8 @@ export default {
       isEditMode,
       editingRow,
       batchDelete,
-      docsUrl
+      docsUrl,
+      OPEN_DELAY
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
index 30bcd258f..abf841d96 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -34,26 +34,22 @@
             <tiny-input ref="editFormItemRef" v-model="state.groupNameModel.value" placeholder="请输入新的分组名称">
               <template #suffix>
                 <div class="confirm-btns">
-                  <tiny-tooltip class="action-item" effect="dark" content="确定" placement="bottom" :open-delay="500">
-                    <tiny-button
-                      type="text"
-                      size="mini"
-                      :icon="TinyIconYes"
-                      id="confirmChangeGroupName"
-                      class="confirm-btns-item"
-                      @click.stop="handleChangeGroupName(item.value)"
-                    ></tiny-button>
-                  </tiny-tooltip>
-                  <tiny-tooltip class="action-item" effect="dark" content="取消" placement="bottom" :open-delay="500">
-                    <tiny-button
-                      type="text"
-                      size="mini"
-                      :icon="TinyIconClose"
-                      id="cancelChangeGroupName"
-                      class="confirm-btns-item"
-                      @click.stop="state.currentEditId = null"
-                    ></tiny-button>
-                  </tiny-tooltip>
+                  <tiny-button
+                    type="text"
+                    size="mini"
+                    :icon="TinyIconYes"
+                    id="confirmChangeGroupName"
+                    class="confirm-btns-item"
+                    @click.stop="handleChangeGroupName(item.value)"
+                  ></tiny-button>
+                  <tiny-button
+                    type="text"
+                    size="mini"
+                    :icon="TinyIconClose"
+                    id="cancelChangeGroupName"
+                    class="confirm-btns-item"
+                    @click.stop="state.currentEditId = null"
+                  ></tiny-button>
                 </div>
               </template>
             </tiny-input>
@@ -66,7 +62,7 @@
               id="updateGroupName"
               class="option-btn"
               name="to-edit"
-              tips="编辑"
+              :hoverBgColor="false"
               @click.stop="updateGroup(item.value)"
             ></svg-button>
             <tiny-popover
@@ -105,7 +101,7 @@
                   id="deleteGroup"
                   class="option-btn"
                   name="delete"
-                  tips="删除"
+                  :hoverBgColor="false"
                   @click.stop="handleShowDeleteModal(item.value.groupId)"
                 ></svg-button>
               </template>
@@ -138,7 +134,6 @@ import {
   FormItem as TinyFormItem,
   DialogBox,
   Button,
-  Tooltip,
   Notify,
   Popover
 } from '@opentiny/vue'
@@ -159,7 +154,6 @@ export default {
     SvgButton,
     TinyDialogBox: DialogBox,
     TinyButton: Button,
-    TinyTooltip: Tooltip,
     TinyPopover: Popover
   },
   props: {
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index c45ea3c31..06c98dc05 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -193,7 +193,9 @@ export default {
     .tiny-collapse-item.is-active + .tiny-collapse-item {
       margin-top: 0;
     }
-
+    :deep(.tiny-collapse-item__header .tiny-collapse-item__word-overflow) {
+      margin: var(--te-common-vertical-item-spacing-normal) 0px var(--te-common-vertical-form-label-spacing);
+    }
     .components-items {
       .item {
         cursor: pointer;
diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index 57261ce75..925d023d6 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -261,7 +261,7 @@ export default {
   :deep(.toolbar) {
     position: absolute;
     z-index: 99;
-    right: 20px;
+    right: 12px;
   }
   .stores {
     padding: 12px;
@@ -278,6 +278,15 @@ export default {
     color: var(--ti-lowcode-toolbar-icon-color);
     display: flex;
   }
+  :deep(.tiny-collapse-item__wrap) {
+    padding: 0 12px;
+    .tiny-collapse-item__content {
+      padding: 0;
+      .tiny-form-item:first-child {
+        padding-bottom: 12px;
+      }
+    }
+  }
 }
 
 .create-content-description {
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index be4bcaa05..eb8693d68 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -423,7 +423,7 @@ export default {
   :deep(.toolbar) {
     position: absolute;
     z-index: 99;
-    right: 20px;
+    right: 12px;
   }
   .var {
     padding: 12px 12px 0 12px;
diff --git a/packages/plugins/state/src/DataSourceList.vue b/packages/plugins/state/src/DataSourceList.vue
index e06b97427..ba4b21a5d 100644
--- a/packages/plugins/state/src/DataSourceList.vue
+++ b/packages/plugins/state/src/DataSourceList.vue
@@ -9,9 +9,9 @@
             <span class="name">{{ key }}</span>
           </div>
           <div class="item-head-right">
-            <svg-button name="to-edit" tips="编辑" @click="openPanel(OPTION_TYPE.UPDATE, key)"></svg-button>
-            <svg-button name="copy" tips="复制" @click="openPanel(OPTION_TYPE.COPY, key)"></svg-button>
-            <svg-button name="delete" tips="删除" @click="confirmClick(key)"></svg-button>
+            <svg-button name="to-edit" :hoverBgColor="false" @click="openPanel(OPTION_TYPE.UPDATE, key)"></svg-button>
+            <svg-button name="copy" :hoverBgColor="false" @click="openPanel(OPTION_TYPE.COPY, key)"></svg-button>
+            <svg-button name="delete" :hoverBgColor="false" @click="confirmClick(key)"></svg-button>
           </div>
         </div>
       </li>
diff --git a/packages/plugins/state/src/EditorI18nTool.vue b/packages/plugins/state/src/EditorI18nTool.vue
index 28efda959..757f3ac97 100644
--- a/packages/plugins/state/src/EditorI18nTool.vue
+++ b/packages/plugins/state/src/EditorI18nTool.vue
@@ -28,7 +28,7 @@
     </div>
 
     <template #reference>
-      <tiny-tooltip content="插入国际化词条" placement="top">
+      <tiny-tooltip content="插入国际化词条" placement="top" :open-delay="OPEN_DELAY.Default">
         <svg-icon name="internationalization" @click="openPopover"></svg-icon>
       </tiny-tooltip>
     </template>
@@ -41,6 +41,8 @@ import { Button, Popover, Tooltip } from '@opentiny/vue'
 import { iconClose } from '@opentiny/vue-icon'
 import { BindI18n } from '@opentiny/tiny-engine-common'
 import { useTranslate } from '@opentiny/tiny-engine-meta-register'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export default {
   components: {
@@ -115,7 +117,8 @@ export default {
       onClosePopover,
       createI18n,
       handleChooseI18n,
-      handleConfirm
+      handleConfirm,
+      OPEN_DELAY
     }
   }
 }
diff --git a/packages/plugins/state/src/StateTips.vue b/packages/plugins/state/src/StateTips.vue
index 973922f3f..41d010e5e 100644
--- a/packages/plugins/state/src/StateTips.vue
+++ b/packages/plugins/state/src/StateTips.vue
@@ -13,12 +13,12 @@
 
 <style lang="less" scoped>
 .tips {
-  font-size: 11px;
+  font-size: 12px;
   line-height: 18px;
   margin-top: 8px;
   border-radius: 4px;
   padding: 8px 14px;
   background: var(--te-common-bg-container);
-  color: var(--ti-lowcode-datasource-tip-color);
+  color: var(--te-common-text-weaken);
 }
 </style>
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 9ec9aaf8a..130cc688a 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -29,7 +29,7 @@
                 @mouseleave="mouseleave(data.row)"
                 @click="checkElement(data.row)"
               >
-                <span class="tree-content">
+                <span class="tree-content" :class="{ 'node-isblock': data.row?.componentType === 'Block' }">
                   <!-- <span class="node-icon">
                     <component :is="getIcon(data.row)" style="width: 1em; height: 1em"></component>
                   </span> -->
@@ -311,12 +311,9 @@ export default {
     border-top: 1px solid var(--ti-lowcode-tree-border-color);
 
     .tree-handle {
+      font-size: var(--te-base-font-size-2);
       svg {
-        color: var(--ti-lowcode-tree-icon-color);
-
-        &:hover {
-          color: var(--ti-lowcode-tree-hover-icon-color);
-        }
+        color: var(--te-common-icon-secondary);
       }
     }
   }
@@ -341,11 +338,6 @@ export default {
         }
       }
     }
-    .high-light-node {
-      .tree-handle svg {
-        color: var(--ti-lowcode-tree-selected-color);
-      }
-    }
   }
 
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) {
@@ -364,27 +356,23 @@ export default {
     line-height: inherit;
   }
   :deep(.high-light-node) {
-    background: var(--ti-lowcode-tree-selected-bg) !important;
+    background: var(--te-common-bg-container) !important;
 
     :deep(.eyeOpen) {
       display: block !important;
     }
   }
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) {
-    color: var(--ti-lowcode-tree-color);
+    color: var(--te-common-text-primary);
     padding: 0 12px;
     height: 24px !important;
     line-height: 24px;
     .tree-content {
       font-size: 12px;
     }
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column) {
-    color: var(--ti-lowcode-tree-selected-color);
-    font-weight: bold;
-  }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column .tiny-grid-tree__node-btn) {
-    color: var(--ti-lowcode-tree-selected-color);
+    .node-isblock {
+      color: var(--te-common-color-prompt-secondary);
+    }
   }
 }
 </style>
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index 38927966f..81d629128 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -12,6 +12,9 @@
       font-size: var(--te-base-font-size-1);
       color: var(--te-common-text-weaken);
     }
+    .tiny-input__suffix {
+      top: 50%;
+    }
     .tiny-input__inner {
       padding-right: 30px;
     }
@@ -41,7 +44,7 @@
     margin: 8px 12px 4px 12px;
     > div {
       color: var(--te-common-text-emphasize);
-      font-size: var(--te-base-font-size-1);
+      font-size: var(--te-base-font-size-base);
     }
   }
   // 下拉选项框
@@ -536,12 +539,12 @@
 
 // 12、popover气泡卡片
 .tiny-popover.tiny-popover.tiny-popper[x-placement] {
-  padding: 0px 8px;
+  padding: 12px 16px;
   font-size: var(--te-base-font-size-base);
   color: var(--te-common-text-primary);
   background-color: var(--te-common-bg-popover);
   border: 0;
-  box-shadow: 0 8px 24px 0 var(--te-base-box-shadow-rgba-2);
+  box-shadow: 0 -2px 12px 0 var(--te-base-box-shadow-rgba-2);
 
   height: auto;
 }
@@ -691,12 +694,12 @@
   &.tiny-tooltip__popper {
     background: var(--te-common-bg-popover);
     color: var(--te-common-text-primary);
-    box-shadow: 0 0 20px 0 var(--te-base-box-shadow-rgba-2);
+    box-shadow: 0 -2px 12px 0 var(--te-base-box-shadow-rgba-2);
     &[class*='is-'] {
       background: var(--te-common-bg-popover);
       color: var(--te-common-text-primary);
       font-size: var(--te-base-font-size-base);
-      padding: 12px;
+      padding: 12px 16px;
       &[x-placement^='top'] {
         .popper__arrow {
           border-top-color: var(--te-common-bg-popover);
@@ -734,7 +737,7 @@
 }
 
 // 18、表单
-.tiny-form.tiny-form {
+.tiny-form.tiny-form.tiny-form {
   .tiny-form-item {
     margin-bottom: 12px;
     &:last-of-type {
@@ -751,12 +754,25 @@
   }
   .tiny-form-item.is-text.is-no-asterisk.tiny-form-item--default {
     margin-bottom: 12px;
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
   }
   .tiny-form-item__error--block {
     padding-top: 4px;
   }
   .tiny-form-item__error {
     font-size: var(--te-base-font-size-base);
+    color: var(--te-common-color-error);
+  }
+  .tiny-form-item.is-error .tiny-input__inner,
+  .tiny-form-item.is-error .tiny-input__inner:focus,
+  .tiny-form-item.is-error .tiny-textarea,
+  .tiny-form-item.is-error .tiny-textarea:focus,
+  .tiny-form-item.is-error .tiny-textarea__inner,
+  .tiny-form-item.is-error .tiny-textarea__inner:focus {
+    border-color: var(--te-common-color-error);
+    background-color: var(--te-base-red-10);
   }
 }
 .tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label.tiny-form-item__label {
@@ -771,6 +787,18 @@
 .tiny-form-item__label.tiny-form-item__label {
   padding-right: 16px;
 }
+.tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label.tiny-form-item__label {
+  padding-left: 0;
+}
+.tiny-form--label-left.label-align
+  .tiny-form-item.is-required
+  ~ .tiny-form-item
+  .tiny-form-item__label.tiny-form-item__label {
+  padding-left: 0;
+}
+.tiny-form-item__label.tiny-form-item__label {
+  padding-right: 16px;
+}
 
 // 19、表格
 .tiny-grid__wrapper.tiny-grid__wrapper.tiny-grid__wrapper {
@@ -779,6 +807,9 @@
     background-color: var(--te-common-bg-default);
     color: var(--te-common-text-primary);
     cursor: pointer;
+    th.fixed__column {
+      background-color: var(--te-common-bg-container);
+    }
     .tiny-grid__header-wrapper {
       background-color: var(--te-common-bg-container);
       .tiny-grid__header {
@@ -848,6 +879,9 @@
           }
           &:hover {
             background-color: var(--te-common-bg-container);
+            .fixed__column {
+              background-color: var(--te-common-bg-container);
+            }
           }
           .tiny-grid-default-input {
             height: 24px;
diff --git a/packages/toolbars/fullscreen/src/Main.vue b/packages/toolbars/fullscreen/src/Main.vue
index c6be230a8..3547cf0a6 100644
--- a/packages/toolbars/fullscreen/src/Main.vue
+++ b/packages/toolbars/fullscreen/src/Main.vue
@@ -1,6 +1,6 @@
 <template>
   <toolbar-base
-    :content="!isFullscreen ? '全屏' : '退出全屏'"
+    :content="!isFullscreen ? '切换全屏' : '退出全屏'"
     :icon="iconName"
     :options="options"
     @click-api="fullscreen"
diff --git a/packages/toolbars/generate-code/meta.js b/packages/toolbars/generate-code/meta.js
index d9c0bbe11..8258083bc 100644
--- a/packages/toolbars/generate-code/meta.js
+++ b/packages/toolbars/generate-code/meta.js
@@ -4,7 +4,7 @@ export default {
   title: 'generate-code',
   options: {
     icon: {
-      default: 'generate-code'
+      default: 'flow-download'
     },
     renderType: 'button'
   }
diff --git a/packages/toolbars/lang/src/Main.vue b/packages/toolbars/lang/src/Main.vue
index a4c215bcf..ccf273c74 100644
--- a/packages/toolbars/lang/src/Main.vue
+++ b/packages/toolbars/lang/src/Main.vue
@@ -1,6 +1,6 @@
 <template>
   <toolbar-base
-    content="画布中英文切换"
+    content="中英文切换"
     :icon="options.icon.default || options.icon"
     :options="options"
     @click-api="changeLang"
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index 07cf4cfa7..3f059af9f 100644
--- a/packages/toolbars/media/src/Main.vue
+++ b/packages/toolbars/media/src/Main.vue
@@ -479,7 +479,6 @@ export default {
   }
 }
 .media-content {
-  padding: 12px 8px;
   line-height: 18px;
   .media-title {
     font-weight: 600;
@@ -493,7 +492,6 @@ export default {
 }
 
 .content-wrap {
-  padding: 20px 12px;
   .title {
     font-weight: 600;
     margin-bottom: 16px;
diff --git a/packages/toolbars/save/src/Main.vue b/packages/toolbars/save/src/Main.vue
index c60980d9d..24fd0963f 100644
--- a/packages/toolbars/save/src/Main.vue
+++ b/packages/toolbars/save/src/Main.vue
@@ -1,56 +1,56 @@
 <template>
   <div class="toolbar-save">
-    <tiny-popover :visible-arrow="false" width="203" trigger="hover">
-      <template #reference>
-        <toolbar-base
-          :content="isLoading ? '保存中' : '保存'"
-          :icon="options.icon.default || options.icon"
-          :options="{ ...options, showDots: !isSaved() }"
-          @click-api="openApi"
-        >
-          <template #button>
+    <toolbar-base
+      :content="isLoading ? '保存中' : '保存'"
+      :icon="options.icon.default || options.icon"
+      :options="{ ...options, showDots: !isSaved() }"
+      @click-api="openApi"
+    >
+      <template #button>
+        <tiny-popover :visible-arrow="false" width="203" trigger="click" :open-delay="OPEN_DELAY.Default">
+          <template #reference>
             <svg-icon :name="iconExpand"></svg-icon>
           </template>
-          <template #default>
-            <tiny-dialog-box
-              class="dialog-box"
-              :modal="false"
-              :fullscreen="true"
-              :append-to-body="true"
-              :visible="state.visible"
-              title="Schema 本地与线上差异"
-              @update:visible="state.visible = $event"
-            >
-              <vue-monaco
-                v-if="state.visible"
-                ref="editor"
-                class="monaco-editor"
-                :diffEditor="true"
-                :options="editorOptions"
-                :value="state.code"
-                :original="state.originalCode"
-              ></vue-monaco>
-              <template #footer>
-                <tiny-button @click="close">取 消</tiny-button>
-                <tiny-button type="primary" @click="saveApi">保 存</tiny-button>
-              </template>
-            </tiny-dialog-box>
+          <div class="save-style">
+            <div class="save-setting">保存设置</div>
+            <tiny-checkbox v-model="state.checked" name="tiny-checkbox">自动保存</tiny-checkbox>
+            <div class="save-time">
+              <div class="save-time-label">保存间隔</div>
+              <tiny-select v-model="state.timeValue" :options="delayOptions" :disabled="!state.checked" autocomplete>
+              </tiny-select>
+            </div>
+            <div class="save-button-group">
+              <tiny-button type="primary" @click="autoSave">设置并保存</tiny-button>
+            </div>
+          </div>
+        </tiny-popover>
+      </template>
+      <template #default>
+        <tiny-dialog-box
+          class="dialog-box"
+          :modal="false"
+          :fullscreen="true"
+          :append-to-body="true"
+          :visible="state.visible"
+          title="Schema 本地与线上差异"
+          @update:visible="state.visible = $event"
+        >
+          <vue-monaco
+            v-if="state.visible"
+            ref="editor"
+            class="monaco-editor"
+            :diffEditor="true"
+            :options="editorOptions"
+            :value="state.code"
+            :original="state.originalCode"
+          ></vue-monaco>
+          <template #footer>
+            <tiny-button @click="close">取 消</tiny-button>
+            <tiny-button type="primary" @click="saveApi">保 存</tiny-button>
           </template>
-        </toolbar-base>
+        </tiny-dialog-box>
       </template>
-      <div class="save-style">
-        <div class="save-setting">保存设置</div>
-        <tiny-checkbox v-model="state.checked" name="tiny-checkbox">自动保存</tiny-checkbox>
-        <div class="save-time">
-          <div class="save-time-label">保存间隔</div>
-          <tiny-select v-model="state.timeValue" :options="delayOptions" :disabled="!state.checked" autocomplete>
-          </tiny-select>
-        </div>
-        <div class="save-button-group">
-          <tiny-button type="primary" @click="autoSave">设置并保存</tiny-button>
-        </div>
-      </div>
-    </tiny-popover>
+    </toolbar-base>
   </div>
 </template>
 
@@ -62,6 +62,8 @@ import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { ToolbarBase } from '@opentiny/tiny-engine-common'
 import { openCommon, saveCommon } from './js/index'
 import { isLoading } from './js/index'
+import { constants } from '@opentiny/tiny-engine-utils'
+const { OPEN_DELAY } = constants
 
 export const api = {
   saveCommon,
@@ -156,7 +158,8 @@ export default {
       openApi,
       saveApi,
       delayOptions,
-      autoSave
+      autoSave,
+      OPEN_DELAY
     }
   }
 }
@@ -176,6 +179,10 @@ export default {
 }
 
 .toolbar-save {
+  .icon-down-arrow.icon-down-arrow {
+    margin-left: var(--te-base-space-2x);
+    margin-right: var(--te-base-space-0);
+  }
   .save-button {
     background-color: var(--ti-lowcode-toolbar-button-bg);
     border: none;
@@ -200,7 +207,7 @@ export default {
 }
 
 .save-style {
-  padding: 20px 12px;
+  padding: 8px 4px;
   font-size: 12px;
 
   .save-setting {
@@ -218,6 +225,7 @@ export default {
     display: flex;
     .save-time-label {
       width: 60px;
+      color: var(--te-common-text-secondary);
     }
 
     .tiny-select {
@@ -233,15 +241,6 @@ export default {
 
   .save-button-group {
     text-align: right;
-
-    :deep(.tiny-button) {
-      min-width: 40px;
-      padding: 0 8px;
-      height: 26px;
-      line-height: 24px;
-      border: 0;
-      border-radius: 4px;
-    }
   }
 }
 
@@ -276,4 +275,7 @@ export default {
   color: var(--ti-lowcode-canvas-handle-hover-bg);
   padding: 0 5px;
 }
+.save-style .save-time .tiny-input__inner {
+  height: 24px !important;
+}
 </style>
diff --git a/packages/utils/src/constants/index.js b/packages/utils/src/constants/index.js
index f1f2c1c27..0dfe314f9 100644
--- a/packages/utils/src/constants/index.js
+++ b/packages/utils/src/constants/index.js
@@ -75,6 +75,10 @@ export const BLOCK_OPENNESS = {
   Special: 2
 }
 
+export const OPEN_DELAY = {
+  Default: 500
+}
+
 /**
  * 当前浏览器标签页中 BroadcastChannel 的唯一 id
  * 为了避免在同一个浏览器下打开不同设计器应用造成的消息错乱