diff --git a/materials/components/MsBigWheel.json b/materials/components/MsBigWheel.json
index 622dfda31..4bd786e79 100644
--- a/materials/components/MsBigWheel.json
+++ b/materials/components/MsBigWheel.json
@@ -1,11 +1,11 @@
 {
   "id": 77,
-  "version": " 0.3.2",
+  "version": " 0.8.8",
   "name": {
     "zh_CN": "转盘抽奖"
   },
   "component": "BigWheel",
-  "icon": "button",
+  "icon": "ms-big-wheel",
   "description": "大转盘抽奖",
   "doc_url": "",
   "screenshot": "",
@@ -14,9 +14,9 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.2",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
-    "css": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/style.css",
+    "version": "0.8.8",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.8/lib/ms-ui.es.js",
+    "css": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.8/lib/style.css",
     "dependencies": null,
     "exportName": "BigWheel"
   },
diff --git a/materials/components/MsEtfHot.json b/materials/components/MsEtfHot.json
index ed54432fe..2b1acd031 100644
--- a/materials/components/MsEtfHot.json
+++ b/materials/components/MsEtfHot.json
@@ -1,6 +1,6 @@
 {
   "id": 85,
-  "version": " 0.1.0",
+  "version": " 0.8.2",
   "name": {
     "zh_CN": "EFT热榜"
   },
@@ -14,8 +14,8 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.1",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.1/lib/ms-ui.es.js",
+    "version": "0.8.2",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
     "css": null,
     "dependencies": {},
     "exportName": "EtfHot"
diff --git a/materials/components/MsHeader.json b/materials/components/MsHeader.json
index 359a072de..b75dcc207 100644
--- a/materials/components/MsHeader.json
+++ b/materials/components/MsHeader.json
@@ -1,6 +1,6 @@
 {
   "id": 76,
-  "version": " 0.3.0",
+  "version": " 0.8.4",
   "name": {
     "zh_CN": "页面导航"
   },
@@ -14,8 +14,8 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.2",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
+    "version": "0.8.4",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.4/lib/ms-ui.es.js",
     "css": null,
     "dependencies": null,
     "exportName": "Header"
@@ -216,10 +216,10 @@
           {
             "property": "bgColor",
             "type": "string",
-            "defaultValue": "",
+            "defaultValue": "#ffffff",
             "label": {
               "text": {
-                "zh_CN": "bgColor"
+                "zh_CN": "导航背景颜色"
               }
             },
             "cols": 12,
@@ -228,9 +228,9 @@
             "readOnly": false,
             "disabled": false,
             "widget": {
-              "component": "MetaInput",
+              "component": "MetaColor",
               "props": {
-                "placeholder": "请输入rgba颜色值"
+                "placeholder": "请输入背景颜色"
               }
             },
             "description": {
diff --git a/materials/components/MsMarquee.json b/materials/components/MsMarquee.json
index 392d1b2f1..3176a05c3 100644
--- a/materials/components/MsMarquee.json
+++ b/materials/components/MsMarquee.json
@@ -1,6 +1,6 @@
 {
   "id": 78,
-  "version": " 0.3.0",
+  "version": " 0.8.2",
   "name": {
     "zh_CN": "九宫格抽奖"
   },
@@ -15,7 +15,7 @@
   "npm": {
     "package": "ms-ui-lib",
     "version": "0.8.1",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.1/lib/ms-ui.es.js",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
     "css": null,
     "dependencies": {
       "@nutui/nutui-bingo": "^1.0.7"
diff --git a/materials/components/MsNineSquare.json b/materials/components/MsNineSquare.json
index 1e0375602..da2d78bfb 100644
--- a/materials/components/MsNineSquare.json
+++ b/materials/components/MsNineSquare.json
@@ -1,6 +1,6 @@
 {
   "id": 79,
-  "version": " 0.3.0",
+  "version": " 0.8.2",
   "name": {
     "zh_CN": "卡牌抽奖"
   },
@@ -14,8 +14,8 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.1",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.1/lib/ms-ui.es.js",
+    "version": "0.8.2",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
     "css": null,
     "dependencies": {
       "@nutui/nutui-bingo": "^1.0.7"
diff --git a/materials/components/MsScoreTaskList.json b/materials/components/MsScoreTaskList.json
index d5ac3d779..c84427947 100644
--- a/materials/components/MsScoreTaskList.json
+++ b/materials/components/MsScoreTaskList.json
@@ -1,6 +1,6 @@
 {
   "id": 82,
-  "version": " 0.8.2",
+  "version": " 0.8.1",
   "name": {
     "zh_CN": "任务列表"
   },
@@ -14,8 +14,8 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.2",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
+    "version": "0.8.1",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.1/lib/ms-ui.es.js",
     "css": null,
     "dependencies": {
       "@nutui/nutui-bingo": "^1.0.7"
@@ -25,7 +25,7 @@
   "group": "ms-ui-lib",
   "category": "活动组件",
   "configure": {
-    "loop": true,
+    "loop": false,
     "condition": true,
     "styles": true,
     "isContainer": false,
diff --git a/materials/components/MsSlotMachine.json b/materials/components/MsSlotMachine.json
index 9c031cc96..c97321b98 100644
--- a/materials/components/MsSlotMachine.json
+++ b/materials/components/MsSlotMachine.json
@@ -1,6 +1,6 @@
 {
   "id": 80,
-  "version": " 0.5.0",
+  "version": " 0.8.2",
   "name": {
     "zh_CN": "老虎机抽奖"
   },
@@ -14,8 +14,8 @@
   "dev_mode": "proCode",
   "npm": {
     "package": "ms-ui-lib",
-    "version": "0.8.1",
-    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.1/lib/ms-ui.es.js",
+    "version": "0.8.2",
+    "script": "https://npm.onmicrosoft.cn/ms-ui-lib@0.8.2/lib/ms-ui.es.js",
     "css": null,
     "dependencies": {
       "@nutui/nutui-bingo": "^1.0.7"
diff --git a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
index 851c9a155..28a861d55 100644
--- a/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
+++ b/mockServer/src/mock/get/app-center/v1/apps/schema/918.json
@@ -1690,7 +1690,7 @@
         ],
         "fileName": "createVm",
         "meta": {
-          "id": 1977,
+          "id": "NTJ4MjvqoVj8OVsc",
           "parentId": "0",
           "group": "staticPages",
           "occupier": {
diff --git a/packages/canvas/src/components/container/container.js b/packages/canvas/src/components/container/container.js
index ec547a887..0d438fd5d 100644
--- a/packages/canvas/src/components/container/container.js
+++ b/packages/canvas/src/components/container/container.js
@@ -320,19 +320,19 @@ export const scrollToNode = (element) => {
   if (element) {
     const container = getDocument().documentElement
     const { clientWidth, clientHeight } = container
-    const { x, y, width, height } = element.getBoundingClientRect()
+    const { left, right, top, bottom, width, height } = element.getBoundingClientRect()
     const option = {}
 
-    if (x < 0) {
-      option.left = container.scrollLeft + x - SCROLL_MARGIN
-    } else if (x > clientWidth) {
-      option.left = x + width - clientWidth + SCROLL_MARGIN
+    if (right < 0) {
+      option.left = container.scrollLeft + left - SCROLL_MARGIN
+    } else if (left > clientWidth) {
+      option.left = container.scrollLeft + left - clientWidth + width + SCROLL_MARGIN
     }
 
-    if (y < 0) {
-      option.top = container.scrollTop + y - SCROLL_MARGIN
-    } else if (y > clientHeight) {
-      option.top = y + height - clientHeight + SCROLL_MARGIN
+    if (bottom < 0) {
+      option.top = container.scrollTop + top - SCROLL_MARGIN
+    } else if (top > clientHeight) {
+      option.top = container.scrollTop + top - clientHeight + height + SCROLL_MARGIN
     }
 
     if (typeof option.left === 'number' || typeof option.top === 'number') {
diff --git a/packages/common/component/BlockDeployDialog.vue b/packages/common/component/BlockDeployDialog.vue
index f5aa6c96c..5a6e19482 100644
--- a/packages/common/component/BlockDeployDialog.vue
+++ b/packages/common/component/BlockDeployDialog.vue
@@ -49,7 +49,7 @@
       :modal="false"
       :fullscreen="true"
       :append-to-body="true"
-      title="Schema 本地与线上差异"
+      title="Schema 线上与本地差异"
     >
       <vue-monaco
         v-if="state.compareVisible"
@@ -82,8 +82,9 @@ import {
   FormItem as TinyFormItem
 } from '@opentiny/vue'
 import { theme } from '@opentiny/tiny-engine-controller/adapter'
-import { useLayout } from '@opentiny/tiny-engine-controller'
+import { useLayout, useNotify } from '@opentiny/tiny-engine-controller'
 import { getSchema, setSchema } from '@opentiny/tiny-engine-canvas'
+import { constants } from '@opentiny/tiny-engine-utils'
 import VueMonaco from './VueMonaco.vue'
 
 export default {
@@ -106,6 +107,7 @@ export default {
   },
   emits: ['update:visible'],
   setup(props, { emit, attrs }) {
+    const { COMPONENT_NAME } = constants
     const formState = reactive({
       deployInfo: '',
       version: '',
@@ -212,10 +214,20 @@ export default {
     }
 
     const save = () => {
-      const pageSchema = JSON.parse(state.newCode)
-      setSchema(pageSchema)
-
-      close()
+      if (!state.newCode) {
+        close()
+        return
+      }
+      try {
+        const pageSchema = JSON.parse(state.newCode)
+        setSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
+        close()
+      } catch (err) {
+        useNotify({
+          type: 'error',
+          message: '代码静态检查有错误，请先修改后再保存'
+        })
+      }
     }
 
     return {
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index e4e6b25b4..1df056a09 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -1,5 +1,6 @@
 <template>
   <ul
+    v-if="state.data.length"
     :class="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
     @mouseleave="state.hover = false"
   >
@@ -122,12 +123,14 @@
       </div>
     </div>
   </ul>
+  <search-empty :isShow="!state.data.length" />
 </template>
 
 <script>
 import { computed, watch, inject, reactive } from 'vue'
 import { iconSetting, iconPlus } from '@opentiny/vue-icon'
 import { Tooltip, Progress, Popover } from '@opentiny/vue'
+import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
 
 const defaultImg =
@@ -140,7 +143,8 @@ export default {
     IconSetting: iconSetting(),
     IconPlus: iconPlus(),
     TinyPopover: Popover,
-    SvgButton
+    SvgButton,
+    SearchEmpty
   },
   props: {
     data: {
diff --git a/packages/common/component/SaveNewBlock.vue b/packages/common/component/SaveNewBlock.vue
index 3ca22e1aa..d27d9f854 100644
--- a/packages/common/component/SaveNewBlock.vue
+++ b/packages/common/component/SaveNewBlock.vue
@@ -1,6 +1,13 @@
 <template>
   <div>
-    <tiny-dialog-box :append-to-body="true" :visible="visible" title="新建区块" width="500" @close="cancel">
+    <tiny-dialog-box
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      :visible="visible"
+      title="新建区块"
+      width="500"
+      @close="cancel"
+    >
       <tiny-form
         show-message
         :model="formData"
diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue
new file mode 100644
index 000000000..de010835d
--- /dev/null
+++ b/packages/common/component/SearchEmpty.vue
@@ -0,0 +1,19 @@
+<template>
+  <div v-if="isShow" class="empty-wrap">
+    <svg-icon class="empty-icon" name="empty"></svg-icon>
+    <p class="empty-text">暂无数据</p>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    /**
+     * 控制搜索空数据显示
+     */
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
diff --git a/packages/common/index.js b/packages/common/index.js
index cab3818fe..2fcb94fcc 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -79,6 +79,7 @@ import BlockDeployDialog from './component/BlockDeployDialog.vue'
 import ProgressBar from './component/ProgressBar.vue'
 import MetaButtonGroup from './component/MetaButtonGroup.vue'
 import MetaTableColumns from './component/MetaTableColumns.vue'
+import SearchEmpty from './component/SearchEmpty.vue'
 
 import i18n, { i18nKeyMaps } from '@opentiny/tiny-engine-controller/js/i18n'
 
@@ -145,7 +146,8 @@ export const MetaComponents = {
   MetaIpSection,
   MetaRelatedEditor,
   MetaRelatedColumns,
-  MetaTableColumns
+  MetaTableColumns,
+  SearchEmpty
 }
 
 export {
@@ -206,5 +208,6 @@ export {
   BindI18n,
   BlockDeployDialog,
   ProgressBar,
-  MetaTableColumns
+  MetaTableColumns,
+  SearchEmpty
 }
diff --git a/packages/design-core/package.json b/packages/design-core/package.json
index 902086058..18b620a40 100644
--- a/packages/design-core/package.json
+++ b/packages/design-core/package.json
@@ -92,7 +92,7 @@
     "monaco-editor": "0.33.0",
     "prettier": "2.7.1",
     "sortablejs": "^1.14.0",
-    "vue": "^3.4.15",
+    "vue": "3.4.23",
     "vue-i18n": "^9.9.0"
   },
   "devDependencies": {
diff --git a/packages/design-core/src/App.vue b/packages/design-core/src/App.vue
index e8c169a28..79229c77f 100644
--- a/packages/design-core/src/App.vue
+++ b/packages/design-core/src/App.vue
@@ -154,6 +154,7 @@ export default {
     }
   }
   .tiny-engine-right-wrap {
+    position: relative;
     z-index: 4;
   }
   :deep(.monaco-editor .suggest-widget) {
diff --git a/packages/design-core/vite.config.js b/packages/design-core/vite.config.js
index 6dde1bcf8..ec621cb4c 100644
--- a/packages/design-core/vite.config.js
+++ b/packages/design-core/vite.config.js
@@ -130,7 +130,7 @@ const config = {
 
 const importMapVersions = {
   prettier: '2.7.1',
-  vue: '3',
+  vue: '3.4.23',
   tinyVue: '~3.11'
 }
 
diff --git a/packages/plugins/bridge/src/BridgeManage.vue b/packages/plugins/bridge/src/BridgeManage.vue
index 8fec03404..22d0bba50 100644
--- a/packages/plugins/bridge/src/BridgeManage.vue
+++ b/packages/plugins/bridge/src/BridgeManage.vue
@@ -6,7 +6,11 @@
         clearable
         placeholder="请输入关键字搜索"
         @update:modelValue="searchBridgeData"
-      ></tiny-search>
+      >
+        <template #prefix>
+          <tiny-icon-search />
+        </template>
+      </tiny-search>
     </div>
     <div class="list">
       <div
@@ -19,10 +23,7 @@
         <div class="item-label">{{ item.name }}</div>
         <svg-icon class="setting-icon" name="setting" @click.stop="openEdit(item, index)"></svg-icon>
       </div>
-      <div v-if="!list.length" class="empty-wrap">
-        <svg-icon class="empty-icon" name="empty"></svg-icon>
-        <p class="empty-text">暂无数据</p>
-      </div>
+      <search-empty :isShow="!list.length" />
     </div>
   </div>
 </template>
@@ -30,6 +31,8 @@
 <script>
 import { watchEffect, ref, reactive } from 'vue'
 import { Search } from '@opentiny/vue'
+import { iconSearch } from '@opentiny/vue-icon'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import {
   RESOURCE_TYPE,
   ACTION_TYPE,
@@ -44,7 +47,9 @@ import {
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch: Search,
+    TinyIconSearch: iconSearch(),
+    SearchEmpty
   },
   props: {
     name: {
diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue
index b88637614..9e6942e63 100644
--- a/packages/plugins/data/src/DataSourceList.vue
+++ b/packages/plugins/data/src/DataSourceList.vue
@@ -15,7 +15,7 @@
         </div>
       </li>
     </ul>
-    <div v-if="!filteredKey.length" class="data-source-list-blank"><span>查询结果为空</span></div>
+    <search-empty :isShow="!filteredKey.length" />
   </div>
 </template>
 
@@ -25,14 +25,15 @@ import { useModal } from '@opentiny/tiny-engine-controller'
 import { useResource } from '@opentiny/tiny-engine-controller'
 import { findExpressionInAppSchema } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { SvgButton } from '@opentiny/tiny-engine-common'
+import { SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { STATE, OPTION_TYPE } from './js/constants'
 
 const { COMPONENT_NAME } = constants
 
 export default {
   components: {
-    SvgButton
+    SvgButton,
+    SearchEmpty
   },
   props: {
     modelValue: {
diff --git a/packages/plugins/data/src/Main.vue b/packages/plugins/data/src/Main.vue
index daf6bd489..0b1e1b729 100644
--- a/packages/plugins/data/src/Main.vue
+++ b/packages/plugins/data/src/Main.vue
@@ -15,8 +15,13 @@
         :modelValue="query"
         class="left-filter"
         placeholder="请输入搜索条件"
+        clearable
         @update:modelValue="search"
-      ></tiny-search>
+      >
+        <template #prefix>
+          <tiny-icon-search />
+        </template>
+      </tiny-search>
       <div class="add-btn">
         <tiny-button @click="openPanel(OPTION_TYPE.ADD)">{{
           activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量'
@@ -76,6 +81,7 @@ import {
   useHelp
 } from '@opentiny/tiny-engine-controller'
 import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
+import { iconSearch } from '@opentiny/vue-icon'
 import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
 import CreateVariable from './CreateVariable.vue'
@@ -94,7 +100,8 @@ export default {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
     CreateStore,
-    LinkButton
+    LinkButton,
+    TinyIconSearch: iconSearch()
   },
   setup(props, { emit }) {
     const variableRef = ref(null)
diff --git a/packages/plugins/datasource/src/DataSourceField.vue b/packages/plugins/datasource/src/DataSourceField.vue
index 9763b4aa9..06bceb5ae 100644
--- a/packages/plugins/datasource/src/DataSourceField.vue
+++ b/packages/plugins/datasource/src/DataSourceField.vue
@@ -13,16 +13,11 @@
     </span>
     <div class="section">
       <div class="field-list">
-        <!-- 字段列表 -->
-        <data-source-field-list
-          ref="fieldList"
-          v-model="state.fields"
-          @update:modelValue="$emit('update:modelValue', state.fields)"
-        ></data-source-field-list>
         <div v-if="state.showNewFieldForm" class="new-field-form">
           <data-source-field-type @cancel="closeFieldType" @select="selectFieldType"></data-source-field-type>
           <data-source-field-form
             ref="fieldForm"
+            :modelValue="modelValue"
             :field="state.field"
             :editable="true"
             :is-open="false"
@@ -30,6 +25,12 @@
             @save="saveFieldForm"
           ></data-source-field-form>
         </div>
+        <!-- 字段列表 -->
+        <data-source-field-list
+          ref="fieldList"
+          v-model="state.fields"
+          @update:modelValue="$emit('update:modelValue', state.fields)"
+        ></data-source-field-list>
       </div>
     </div>
   </div>
@@ -113,7 +114,7 @@ export default {
 
       if (name && title) {
         field.type = state.field.type
-        state.fields.push(field)
+        state.fields.unshift(field)
         emit('update:modelValue', state.fields)
       }
 
diff --git a/packages/plugins/datasource/src/DataSourceFieldForm.vue b/packages/plugins/datasource/src/DataSourceFieldForm.vue
index 8bcef0a4d..9768b47ec 100644
--- a/packages/plugins/datasource/src/DataSourceFieldForm.vue
+++ b/packages/plugins/datasource/src/DataSourceFieldForm.vue
@@ -66,6 +66,10 @@ export default {
     isOpen: {
       type: Boolean,
       default: true
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['save', 'cancel'],
@@ -98,7 +102,9 @@ export default {
     const handleCancel = () => {
       emit('cancel')
     }
-
+    const uniqueName = () => {
+      return props.modelValue.some((item) => item.name === state.field.name)
+    }
     const saveField = () => {
       form.value.validate((valid) => {
         if (valid) {
@@ -116,6 +122,10 @@ export default {
 
         return
       }
+      if (uniqueName() && rule.field === 'name') {
+        callback(new Error('该字段已存在，请重新输入'))
+        return
+      }
       callback()
     }
 
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 93ee92284..55174cd7d 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -11,16 +11,31 @@
   >
     <template #content>
       <div class="actions">
-        <tiny-link class="addButton" :underline="false" :disabled="!allowCreate" @click.stop="insertNewData"
+        <tiny-link
+          type="primary"
+          class="addButton"
+          :underline="false"
+          :disabled="!allowCreate"
+          @click.stop="insertNewData"
           ><icon-plusCircle class="tiny-svg-size icon-plusCircle"></icon-plusCircle>新增静态数据</tiny-link
         >
-        <tiny-link class="importButton" :underline="false" :disabled="!allowCreate" @click.stop="showImportModal(true)"
+        <tiny-link
+          type="primary"
+          class="importButton"
+          :underline="false"
+          :disabled="!allowCreate"
+          @click.stop="showImportModal(true)"
           ><icon-import class="tiny-svg-size icon-import"></icon-import>批量导入</tiny-link
         >
-        <tiny-button class="box-all-delete" type="text" :disabled="state.isBatchDeleteDisable" @click.stop="batchDelete"
-          ><span class="all-delete">批量删除</span></tiny-button
+        <tiny-link
+          type="primary"
+          class="box-all-delete"
+          :underline="false"
+          :disabled="state.isBatchDeleteDisable"
+          @click.stop="batchDelete"
+          ><span class="all-delete">批量删除</span></tiny-link
         >
-        <tiny-link class="download" :underline="false" @click="download"
+        <tiny-link type="primary" class="download" :underline="false" @click="download"
           ><icon-download class="tiny-svg-size icon-download"></icon-download>下载导入模板</tiny-link
         >
       </div>
@@ -80,7 +95,7 @@
 <script lang="jsx">
 import { reactive, ref, watchEffect, watch, computed } from 'vue'
 import { camelize, capitalize } from '@vue/shared'
-import { Grid, Pager, Button, Input, Numeric, DatePicker, Switch, Slider, Link } from '@opentiny/vue'
+import { Grid, Pager, Input, Numeric, DatePicker, Switch, Slider, Link } from '@opentiny/vue'
 import { IconPlusCircle, IconImport } from '@opentiny/vue-icon'
 import { PluginSetting } from '@opentiny/tiny-engine-common'
 import { utils } from '@opentiny/tiny-engine-utils'
@@ -104,7 +119,6 @@ export const close = () => {
 export default {
   components: {
     TinyGrid: Grid,
-    TinyButton: Button,
     PluginSetting,
     TinyPager: Pager,
     DataSourceRecordUpload,
@@ -595,14 +609,13 @@ export default {
   align-items: center;
   margin: 16px 0 30px 0;
   .box-all-delete {
-    margin: -3px 5px 0 5px;
+    margin: 1px 5px 0 5px;
     .all-delete {
       font-size: 14px;
     }
   }
   .download {
     margin: 0 12px;
-    color: var(--ti-lowcode-datasource-common-text-main-color);
     font-size: 14px;
     .icon-download {
       margin: 0 1px 4px 0;
@@ -611,7 +624,6 @@ export default {
   }
   .addButton {
     margin: 0 12px;
-    color: var(--ti-lowcode-datasource-common-text-main-color);
     font-size: 14px;
     .icon-plusCircle {
       margin: 0 1px 4px 0;
@@ -620,7 +632,6 @@ export default {
   }
   .importButton {
     margin: 0 12px;
-    color: var(--ti-lowcode-datasource-common-text-main-color);
     font-size: 14px;
     .icon-import {
       margin: 0 1px 4px 0;
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index 83e6b1de7..9382de958 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -110,10 +110,7 @@
           </tiny-grid-column>
           <template #empty>
             <div v-if="isLoading" id="empty-loading-box" class="i18n-loading"></div>
-            <div v-else class="empty-wrap">
-              <svg-icon class="empty-icon" name="empty"></svg-icon>
-              <p class="empty-text">暂无数据</p>
-            </div>
+            <search-empty isShow="!isLoading" />
           </template>
         </tiny-grid>
       </div>
@@ -126,7 +123,7 @@ import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveCompo
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow } from '@opentiny/vue-icon'
-import { PluginPanel, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, LinkButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useTranslate, useApp, useModal, getGlobalConfig, useHelp } from '@opentiny/tiny-engine-controller'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -143,7 +140,8 @@ export default {
     PluginPanel,
     LinkButton,
     TinySelect: Select,
-    TinyFileUpload: FileUpload
+    TinyFileUpload: FileUpload,
+    SearchEmpty
   },
   setup() {
     // 组件库iconLoadingShadow图标不能切换颜色，因此不同主题用不同icon
diff --git a/packages/plugins/materials/src/block/BlockVersionSelect.vue b/packages/plugins/materials/src/block/BlockVersionSelect.vue
index 67f42499a..90edd5b23 100644
--- a/packages/plugins/materials/src/block/BlockVersionSelect.vue
+++ b/packages/plugins/materials/src/block/BlockVersionSelect.vue
@@ -17,10 +17,7 @@
           </template>
         </tiny-grid-column>
         <template #empty>
-          <div class="empty-wrap">
-            <svg-icon class="empty-icon" name="empty"></svg-icon>
-            <p class="empty-text">暂无数据</p>
-          </div>
+          <search-empty :isShow="true" />
         </template>
       </tiny-grid>
     </template>
@@ -30,7 +27,7 @@
 <script>
 import { reactive, watch, ref } from 'vue'
 import { Grid, GridColumn, Button } from '@opentiny/vue'
-import { PluginSetting, CloseIcon, BlockHistoryTemplate } from '@opentiny/tiny-engine-common'
+import { PluginSetting, CloseIcon, BlockHistoryTemplate, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useBlock, useModal } from '@opentiny/tiny-engine-controller'
 import { fetchBlockById, requestGroupBlockVersion } from './http'
 import { useVersionSelectPanel } from './js/usePanel'
@@ -42,7 +39,8 @@ export default {
     TinyButton: Button,
     PluginSetting,
     BlockHistoryTemplate,
-    CloseIcon
+    CloseIcon,
+    SearchEmpty
   },
   setup() {
     const { confirm } = useModal()
diff --git a/packages/plugins/materials/src/block/Main.vue b/packages/plugins/materials/src/block/Main.vue
index 62145e121..b573586c0 100644
--- a/packages/plugins/materials/src/block/Main.vue
+++ b/packages/plugins/materials/src/block/Main.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="blocks-wrap">
     <block-group v-model="state.groups" @changeGroup="changeGroup"></block-group>
-    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索">
+    <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>
diff --git a/packages/plugins/materials/src/component/Main.vue b/packages/plugins/materials/src/component/Main.vue
index ac4c9ccdc..0fd38da4b 100644
--- a/packages/plugins/materials/src/component/Main.vue
+++ b/packages/plugins/materials/src/component/Main.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="components-wrap">
-    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" @update:modelValue="change">
+    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" clearable @update:modelValue="change">
       <template #prefix> <icon-search /> </template>
     </tiny-search>
     <tiny-collapse v-model="state.activeName" class="lowcode-scrollbar">
@@ -14,24 +14,25 @@
             >
               <li class="component-item">
                 <div class="component-item-component">
-                  <tiny-image v-if="child?.icon?.toLowerCase().startsWith('http')" :src="child?.icon" fit="contain"></tiny-image>
-                  <svg-icon v-else :name="child?.icon?.toLowerCase() || 'row'"></svg-icon>
+                  <svg-icon :name="child?.icon?.toLowerCase() || 'row'"></svg-icon>
                 </div>
                 <span class="component-item-name" :title="child.name?.zh_CN || child.name">{{
-                  child.name?.zh_CN || child.name 
+                  child.name?.zh_CN || child.name
                 }}</span>
               </li>
             </canvas-drag-item>
           </template>
         </ul>
       </tiny-collapse-item>
+      <search-empty :isShow="!state.components.length" />
     </tiny-collapse>
   </div>
 </template>
 
 <script>
 import { inject, onMounted, reactive, ref } from 'vue'
-import { Collapse, CollapseItem, Search, Image } from '@opentiny/vue'
+import { Collapse, CollapseItem, Search } from '@opentiny/vue'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { iconSearch } from '@opentiny/vue-icon'
 import { useResource } from '@opentiny/tiny-engine-controller'
 import { CanvasDragItem, addComponent } from '@opentiny/tiny-engine-canvas'
@@ -42,8 +43,8 @@ export default {
     IconSearch: iconSearch(),
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
-    TinyImage: Image,
-    CanvasDragItem
+    CanvasDragItem,
+    SearchEmpty
   },
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'
diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue
index 178a5bcb3..58c60567c 100644
--- a/packages/plugins/page/src/PageHistory.vue
+++ b/packages/plugins/page/src/PageHistory.vue
@@ -32,6 +32,9 @@ export default {
 
       if (pageId) {
         fetchPageHistory(pageId + params).then((data) => {
+          if (!data) {
+            return
+          }
           data.forEach((item) => {
             item.backupTitle = item.message
             item.backupTime = getDateFromNow(new Date(item.time))
diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue
index 8183978e1..d6cbdc9c8 100644
--- a/packages/plugins/page/src/PageTree.vue
+++ b/packages/plugins/page/src/PageTree.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="jsx">
-import { reactive, ref, watchEffect } from 'vue'
+import { reactive, ref, watchEffect, nextTick } from 'vue'
 import { Search, Tree, Collapse, CollapseItem } from '@opentiny/vue'
 import { IconFolderOpened, IconFolderClosed } from '@opentiny/vue-icon'
 import { useCanvas, useApp, useModal, usePage, useBreadcrumb, useLayout } from '@opentiny/tiny-engine-controller'
@@ -79,7 +79,6 @@ export default {
       collapseValue: [STATIC_PAGE_GROUP_ID, COMMON_PAGE_GROUP_ID],
       currentNodeData: {}
     })
-
     const formatTreeData = (data, parentId, id) => {
       const originObj = { [ROOT_ID]: { id: ROOT_ID, name: '站点根目录', children: [] } }
       const treeArr = []
@@ -106,6 +105,16 @@ export default {
       return pageSettingState.treeDataMapping
     }
 
+    const searchPageData = (value) => {
+      if (Array.isArray(pageTreeRefs?.value)) {
+        nextTick(() => {
+          pageTreeRefs.value.forEach((item) => {
+            item?.filter(value)
+          })
+        })
+      }
+    }
+
     const refreshPageList = async (appId, data) => {
       const pagesData = data ? data : await fetchPageList(appId)
 
@@ -136,6 +145,7 @@ export default {
       const firstGroupTreeData = formatTreeData([...firstGroupData.data], 'parentId', 'id')
       firstGroupData.data = firstGroupTreeData[ROOT_ID].children
       pageSettingState.pages = [firstGroupData, secondGroupData]
+      searchPageData(state.pageSearchValue)
       return pageSettingState.pages
     }
 
@@ -297,14 +307,6 @@ export default {
       }
     })
 
-    const searchPageData = (value) => {
-      if (Array.isArray(pageTreeRefs?.value)) {
-        pageTreeRefs.value.forEach((item) => {
-          item?.filter(value)
-        })
-      }
-    }
-
     const filterPageTreeData = (value, data) => {
       if (!value) return true
 
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 703172a73..5bc33a035 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -1,8 +1,9 @@
 <template>
-  <teleport to="body">
-    <div :style="{ top: modal.top + 'px', left: modal.left + 'px' }" class="modal-wrapper">
+  <teleport to=".tiny-engine-right-wrap">
+    <div class="modal-wrapper">
       <div class="modal-mask" @click="$emit('close')"></div>
-      <div class="modal-content">
+
+      <div :style="{ top: modal.top - 30 + 'px' }" class="modal-content">
         <slot></slot>
       </div>
     </div>
@@ -47,31 +48,26 @@ export default {
 
 <style lang="less" scoped>
 .modal-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  margin-top: 10px;
-  width: calc(var(--base-right-panel-width) - 24px);
-  z-index: 9999;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
   .modal-mask {
-    position: fixed;
+    position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
-    left: calc(100% - var(--base-right-panel-width));
-    background: rgba(33, 33, 33, 0.65);
+    left: 0;
+    background: rgba(0, 0, 0, 0.2);
     z-index: 9999;
   }
 
   .modal-content {
-    position: relative;
-    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 16px;
     z-index: 10000;
     padding: 8px;
     color: var(--ti-lowcode-toolbar-breadcrumb-color);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
-    border-radius: 4px;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
     background-color: var(--ti-lowcode-toolbar-bg);
     overflow: auto;
     max-height: 100%;
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index 2053fe590..c739468e4 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -1,5 +1,6 @@
 <template>
   <TinyButton class="reset-btn" @click="reset">{{ text }}</TinyButton>
+  <span class="reset-desc">重置后将恢复到初始值。</span>
 </template>
 
 <script>
@@ -12,7 +13,7 @@ export default {
   props: {
     text: {
       type: String,
-      default: 'Reset'
+      default: '重置'
     }
   },
   emits: ['reset'],
@@ -36,4 +37,10 @@ export default {
   border: 0;
   border: 1px solid var(--ti-lowcode-toolbar-border-color);
 }
+.reset-desc {
+  display: block;
+  padding: 8px 4px;
+  text-align: center;
+  color: var(--ti-lowcode-common-third-text-color);
+}
 </style>
diff --git a/packages/settings/styles/src/js/parser.js b/packages/settings/styles/src/js/parser.js
index c8712c72e..b56a9f668 100644
--- a/packages/settings/styles/src/js/parser.js
+++ b/packages/settings/styles/src/js/parser.js
@@ -248,7 +248,9 @@ export const stringify = (originParseList, styleObject, config = {}) => {
 
       // 在 styleObject  的，可能有改动，所以需要用 styleObject 拼接
       for (const [key, value] of Object.entries(styleObject[item.selectors].rules)) {
-        str += `${key}: ${value};\n`
+        if (![null, undefined].includes(value)) {
+          str += `${key}: ${value};\n`
+        }
       }
     }
     str += '}\n'