diff --git a/examples/views/tabs/TabsTest.vue b/examples/views/tabs/TabsTest.vue
index ce5c5dac..b05a694d 100644
--- a/examples/views/tabs/TabsTest.vue
+++ b/examples/views/tabs/TabsTest.vue
@@ -43,7 +43,7 @@
     </p>
 
     <p>
-      <vxe-tabs modelValue="3" type="round-card" :height="300" show-close padding>
+      <vxe-tabs v-model="val4" type="round-card" :height="300" show-close padding @tab-load="tabToadEvent">
         <vxe-tab-pane title="xxxf地方799991" name="1">xxxx</vxe-tab-pane>
         <vxe-tab-pane title="xxxf地方79999f地方7999956756765657557562" name="2" icon="vxe-icon-pc">cccc</vxe-tab-pane>
         <vxe-tab-pane title="xxx45f地方7999965475673" name="3" icon="vxe-icon-pc">vvvv</vxe-tab-pane>
@@ -67,6 +67,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
+const val4 = ref('3')
+const tabToadEvent = (p: any) => {
+  console.log(p)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/package.json b/package.json
index 6c902b77..f597ff73 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.90",
+  "version": "4.0.91",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
diff --git a/packages/form-design/src/form-design.ts b/packages/form-design/src/form-design.ts
index 00a77b96..460cf88c 100644
--- a/packages/form-design/src/form-design.ts
+++ b/packages/form-design/src/form-design.ts
@@ -401,6 +401,7 @@ export default defineComponent({
 
     createSettingForm()
     updateWidgetConfigs()
+
     if (props.config) {
       loadConfig(props.config)
     }
diff --git a/packages/form-design/src/form-view.ts b/packages/form-design/src/form-view.ts
index 54c0d41d..1e091e15 100644
--- a/packages/form-design/src/form-view.ts
+++ b/packages/form-design/src/form-view.ts
@@ -14,10 +14,7 @@ export default defineComponent({
   name: 'VxeFormView',
   props: {
     modelValue: Object as PropType<VxeFormViewPropTypes.ModelValue>,
-    config: {
-      type: Object as PropType<VxeFormViewPropTypes.Config>,
-      default: () => ({})
-    },
+    config: Object as PropType<VxeFormViewPropTypes.Config>,
     viewRender: Object as PropType<VxeFormViewPropTypes.ViewRender>,
     createFormConfig: Function as PropType<VxeFormViewPropTypes.CreateFormConfig>
   },
@@ -59,6 +56,13 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeFormViewConstructor & VxeFormViewPrivateMethods
 
+    const clearConfig = () => {
+      return loadConfig({
+        formConfig: {},
+        widgetData: []
+      })
+    }
+
     const loadConfig = (config: VxeFormDesignDefines.FormDesignConfig | null) => {
       if (config) {
         const { formConfig, widgetData } = config
@@ -68,45 +72,37 @@ export default defineComponent({
       return nextTick()
     }
 
-    const loadFormConfig = (formConfig: VxeFormProps) => {
-      const { viewRender } = props
-      const { createFormConfig } = props
-      const params: VxeFormViewDefines.CreateFormConfigParams = { viewRender, formConfig }
-      if (createFormConfig) {
-        reactData.formConfig = createFormConfig(params)
-      } else {
-        const { name } = viewRender || {}
-        const compConf = renderer.get(name) || {}
-        const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
-        reactData.formConfig = Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params))
+    const parseConfig = (config: VxeFormDesignDefines.FormDesignConfig | null) => {
+      const { formConfig, widgetData } = config || {}
+      const widgetObjList = parseWidgetData(widgetData || [])
+      return {
+        ...parseForm(widgetObjList),
+        formConfig: parseFormConfig(formConfig || {}),
+        widgetData: widgetObjList
       }
-      return nextTick()
     }
 
-    const loadWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
-      reactData.widgetObjList = (widgetData || []).map(item => configToWidget(item))
-      updateWidgetInfo()
-      return nextTick()
-    }
-
-    const getWidgetDefaultValue = (widget: VxeFormDesignDefines.WidgetObjItem) => {
-      switch (widget.name) {
-        case 'subtable':
-          return []
+    const parseFormConfig = (formConfig: VxeFormProps) => {
+      const { viewRender, createFormConfig } = props
+      const params: VxeFormViewDefines.CreateFormConfigParams = { viewRender, formConfig }
+      if (createFormConfig) {
+        return createFormConfig(params)
       }
-      return null
+      const { name } = viewRender || {}
+      const compConf = renderer.get(name) || {}
+      const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
+      return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params))
     }
 
-    const getWidgetDefaultRule = () => {
-      return [
-        { required: true, content: '该填写该字段！' }
-      ]
+    const loadFormConfig = (formConfig: VxeFormProps) => {
+      reactData.formConfig = parseFormConfig(formConfig)
+      return nextTick()
     }
 
-    const updateWidgetInfo = () => {
+    const parseForm = (widgetObjList: VxeFormDesignDefines.WidgetObjItem[]) => {
       const formData: VxeFormPropTypes.Data = {}
       const formRules: VxeFormPropTypes.Rules = {}
-      XEUtils.eachTree(reactData.widgetObjList, widget => {
+      XEUtils.eachTree(widgetObjList, widget => {
         const { name, field, required } = widget
         const compConf = renderer.get(name) || {}
         const createWidgetFieldValue = compConf.createFormDesignWidgetFieldValue
@@ -121,8 +117,37 @@ export default defineComponent({
           formRules[field] = getWidgetDefaultRule()
         }
       }, { children: 'children' })
+      return {
+        formData,
+        formRules
+      }
+    }
+
+    const parseWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
+      return (widgetData || []).map(item => configToWidget(item))
+    }
+
+    const loadWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
+      const widgetObjList = parseWidgetData(widgetData)
+      reactData.widgetObjList = widgetObjList
+      const { formData, formRules } = parseForm(widgetObjList)
       reactData.formRules = formRules
       emit('update:modelValue', Object.assign(formData, props.modelValue))
+      return nextTick()
+    }
+
+    const getWidgetDefaultValue = (widget: VxeFormDesignDefines.WidgetObjItem) => {
+      switch (widget.name) {
+        case 'subtable':
+          return []
+      }
+      return null
+    }
+
+    const getWidgetDefaultRule = () => {
+      return [
+        { required: true, content: '该填写该字段！' }
+      ]
     }
 
     const updateItemStatus = (widget: VxeFormDesignDefines.WidgetObjItem, value: any) => {
@@ -161,7 +186,9 @@ export default defineComponent({
 
     const formViewMethods: FormViewMethods = {
       dispatchEvent,
+      clearConfig,
       loadConfig,
+      parseConfig,
       loadFormConfig,
       loadWidgetData,
       updateItemStatus,
@@ -244,7 +271,9 @@ export default defineComponent({
                 })
               }),
               footerSlot
-                ? h(VxeFormItemComponent, {}, {
+                ? h(VxeFormGatherComponent, {
+                  span: 24
+                }, {
                   default () {
                     return footerSlot({})
                   }
@@ -258,11 +287,13 @@ export default defineComponent({
 
     $xeFormView.renderVN = renderVN
 
-    watch(() => props.config, () => {
-      loadConfig(props.config)
+    watch(() => props.config, (value) => {
+      loadConfig(value || {})
     })
 
-    loadConfig(props.config)
+    if (props.config) {
+      loadConfig(props.config)
+    }
 
     provide('$xeFormView', $xeFormView)
 
diff --git a/packages/form-design/widget-input/input-view.ts b/packages/form-design/widget-input/input-view.ts
index da469ca8..43f9780e 100644
--- a/packages/form-design/widget-input/input-view.ts
+++ b/packages/form-design/widget-input/input-view.ts
@@ -41,7 +41,8 @@ export const WidgetInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h('input', {
diff --git a/packages/form-design/widget-select/select-view.ts b/packages/form-design/widget-select/select-view.ts
index bd2bd6e6..8794087a 100644
--- a/packages/form-design/widget-select/select-view.ts
+++ b/packages/form-design/widget-select/select-view.ts
@@ -59,7 +59,8 @@ export const WidgetSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h('select', {
diff --git a/packages/form-design/widget-textarea/textarea-view.ts b/packages/form-design/widget-textarea/textarea-view.ts
index 70dcdd84..1c5b8ae1 100644
--- a/packages/form-design/widget-textarea/textarea-view.ts
+++ b/packages/form-design/widget-textarea/textarea-view.ts
@@ -41,7 +41,8 @@ export const WidgetTextareaViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h('textarea', {
diff --git a/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts b/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts
index bbb9d0e8..f4985e3f 100644
--- a/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts
+++ b/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeCheckboxGroupViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeCheckboxGroupComponent, {
diff --git a/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts b/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts
index 50c0403b..b3f37c0a 100644
--- a/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts
+++ b/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeDatePickerViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeDatePickerComponent, {
diff --git a/packages/form-design/widget-vxe-input/vxe-input-view.ts b/packages/form-design/widget-vxe-input/vxe-input-view.ts
index 3ff39bcb..6a30c373 100644
--- a/packages/form-design/widget-vxe-input/vxe-input-view.ts
+++ b/packages/form-design/widget-vxe-input/vxe-input-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h(VxeInputComponent, {
diff --git a/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts b/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts
index e377f73b..2a62d4c5 100644
--- a/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts
+++ b/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeNumberInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeNumberInputComponent, {
diff --git a/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts b/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts
index 5191f7c8..ec0dcaf0 100644
--- a/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts
+++ b/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeRadioGroupViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeRadioGroupComponent, {
diff --git a/packages/form-design/widget-vxe-select/vxe-select-view.ts b/packages/form-design/widget-vxe-select/vxe-select-view.ts
index 084e730c..3753d78d 100644
--- a/packages/form-design/widget-vxe-select/vxe-select-view.ts
+++ b/packages/form-design/widget-vxe-select/vxe-select-view.ts
@@ -42,7 +42,8 @@ export const WidgetVxeSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeSelectComponent, {
diff --git a/packages/form-design/widget-vxe-switch/vxe-switch-view.ts b/packages/form-design/widget-vxe-switch/vxe-switch-view.ts
index de78ec2c..fdb1b1e7 100644
--- a/packages/form-design/widget-vxe-switch/vxe-switch-view.ts
+++ b/packages/form-design/widget-vxe-switch/vxe-switch-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeSwitchViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h(VxeSwitchComponent, {
diff --git a/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts b/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts
index d8686c1f..f01104d0 100644
--- a/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts
+++ b/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeTextareaViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeTextareaComponent, {
diff --git a/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts b/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts
index 58a26d49..41b3a9f5 100644
--- a/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts
+++ b/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts
@@ -42,7 +42,8 @@ export const WidgetVxeTreeSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeTreeSelectComponent, {
diff --git a/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts b/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts
index 825bc850..62db0d55 100644
--- a/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts
+++ b/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeUploadFileViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeUploadComponent, {
diff --git a/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts b/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts
index 91f5e91d..2ee3b74b 100644
--- a/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts
+++ b/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeUploadImageViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeUploadComponent, {
diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts
index b2bbc6a0..ee905084 100644
--- a/packages/form/src/render.ts
+++ b/packages/form/src/render.ts
@@ -1,4 +1,4 @@
-import { h } from 'vue'
+import { createCommentVNode, h, VNode } from 'vue'
 import { getIcon, renderer } from '../../ui'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -37,8 +37,8 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
   const params = { data, readonly, disabled, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid }
   const titleSlot = slots ? slots.title : null
-  const contVNs = []
-  const titVNs = []
+  const extraSlot = slots ? slots.extra : null
+  const titVNs: VNode[] = []
   if (titlePrefix) {
     titVNs.push(
       (titlePrefix.content || titlePrefix.message)
@@ -58,11 +58,6 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
       class: 'vxe-form--item-title-label'
     }, titleSlot ? $xeForm.callSlot(titleSlot, params) : (rftTitle ? getSlotVNs(rftTitle(itemRender, params)) : getFuncText(item.title)))
   )
-  contVNs.push(
-    h('div', {
-      class: 'vxe-form--item-title-content'
-    }, titVNs)
-  )
   const fixVNs = []
   if (titleSuffix) {
     fixVNs.push(
@@ -77,10 +72,17 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
         : renderSuffixIcon(titleSuffix)
     )
   }
-  contVNs.push(
+  return [
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs),
     h('div', {
       class: 'vxe-form--item-title-postfix'
-    }, fixVNs)
-  )
-  return contVNs
+    }, fixVNs),
+    extraSlot
+      ? h('div', {
+        class: 'vxe-form--item-title-extra'
+      }, $xeForm.callSlot(extraSlot, params))
+      : createCommentVNode()
+  ]
 }
diff --git a/packages/list-design/src/default-setting-data.ts b/packages/list-design/src/default-setting-data.ts
index cfb65fa6..7a9b75d6 100644
--- a/packages/list-design/src/default-setting-data.ts
+++ b/packages/list-design/src/default-setting-data.ts
@@ -15,6 +15,8 @@ export const getDefaultSettingFormData = (): VxeListDesignDefines.DefaultSetting
     showSeq: true,
     mobileDefaultView: 'list',
     pcDefaultView: 'list',
-    activeBtnList: []
+    toolbarButtonList: [],
+    toolbarToolList: [],
+    activeButtonList: []
   }
 }
diff --git a/packages/list-design/src/default-setting-form.ts b/packages/list-design/src/default-setting-form.ts
index 7a51f5ae..6236a0f8 100644
--- a/packages/list-design/src/default-setting-form.ts
+++ b/packages/list-design/src/default-setting-form.ts
@@ -1,11 +1,15 @@
 import { h, defineComponent, ref, inject, createCommentVNode, computed } from 'vue'
 import { getIcon, getI18n } from '@vxe-ui/core'
 import VxeFormComponent from '../../form/src/form'
+// import VxeFormGatherComponent from '../../form/src/form-gather'
 import VxeFormItemComponent from '../../form/src/form-item'
+// import VxeTabsComponent from '../../tabs/src/tabs'
+// import VxeTabPaneComponent from '../../tabs/src/tab-pane'
 import VxeTextComponent from '../../text/src/text'
 import VxeSelectComponent from '../../select/src/select'
 import VxeSwitchComponent from '../../switch/src/switch'
 import VxeRadioGroupComponent from '../../radio/src/group'
+// import VxeButtonComponent from '../../button/src/button'
 
 import type { VxeListDesignConstructor, VxeListDesignPrivateMethods, VxeTableDefines } from '../../../types'
 
@@ -22,17 +26,6 @@ export const DefaultFieldSettingFormComponent = defineComponent({
 
     const { reactData: listDesignReactData } = $xeListDesign
 
-    const refSeqOpts = ref([
-      { label: '显示', value: true },
-      { label: '隐藏', value: false }
-    ])
-
-    // const refCheckboxOpts = ref([
-    //   { label: '自动', value: 'auto' },
-    //   { label: '显示', value: true },
-    //   { label: '隐藏', value: false }
-    // ])
-
     const changeVisible = (item: VxeTableDefines.ColumnOptions) => {
       item.visible = !item.visible
       listDesignReactData.listTableColumns = listDesignReactData.listTableColumns.slice(0)
@@ -103,52 +96,28 @@ export const DefaultFieldSettingFormComponent = defineComponent({
       }, {
         default () {
           return [
-            h(VxeFormItemComponent, {
-              title: '查询条件'
-            }, {
-              default () {
-                return [
-                  h('div', {
-                    class: 'vxe-list-design--widget-form-empty-data'
-                  }, [
-                    h('span', {}, '暂无查询条件')
-                  ])
-                ]
-              }
-            }),
-            h(VxeFormItemComponent, {
-              title: '通用字段'
-            }, {
-              default () {
-                const { formData } = listDesignReactData
-                return [
-                  h('div', {
-                    class: 'vxe-list-design--widget-form-item-prop-list'
-                  }, [
-                    h('span', {}, '序号列'),
-                    h(VxeRadioGroupComponent, {
-                      modelValue: formData.showSeq,
-                      options: refSeqOpts.value,
-                      'onUpdate:modelValue' (val) {
-                        formData.showSeq = val
-                      }
-                    })
-                  ])
-                  // h('div', {
-                  //   class: 'vxe-list-design--widget-form-item-prop-list'
-                  // }, [
-                  //   h('span', {}, '多选列'),
-                  //   h(VxeRadioGroupComponent, {
-                  //     modelValue: formData.showCheckbox,
-                  //     options: refCheckboxOpts.value,
-                  //     'onUpdate:modelValue' (val) {
-                  //       formData.showCheckbox = val
-                  //     }
-                  //   })
-                  // ])
-                ]
-              }
-            }),
+            // h(VxeFormItemComponent, {
+            //   title: '查询条件'
+            // }, {
+            //   extra () {
+            //     return h(VxeButtonComponent, {
+            //       mode: 'text',
+            //       status: 'primary',
+            //       icon: getIcon().FORM_DESIGN_PROPS_ADD,
+            //       disabled: true,
+            //       content: '新增'
+            //     })
+            //   },
+            //   default () {
+            //     return [
+            //       h('div', {
+            //         class: 'vxe-list-design--widget-form-empty-data'
+            //       }, [
+            //         h('span', {}, '暂无查询条件')
+            //       ])
+            //     ]
+            //   }
+            // }),
             h(VxeFormItemComponent, {
               title: '列表字段'
             }, {
@@ -163,6 +132,125 @@ export const DefaultFieldSettingFormComponent = defineComponent({
   }
 })
 
+// const renderDefaultCellActiveButton = () => {
+//   return h(VxeFormItemComponent, {
+//     title: '功能按钮'
+//   }, {
+//     extra () {
+//       return h(VxeButtonComponent, {
+//         mode: 'text',
+//         status: 'primary',
+//         icon: getIcon().FORM_DESIGN_PROPS_ADD,
+//         disabled: true,
+//         content: '新增'
+//       })
+//     },
+//     default () {
+//       return h('div', {
+//         class: 'vxe-list-design--widget-form-empty-data'
+//       }, [
+//         h('span', {}, '无操作按钮')
+//       ])
+//     }
+//   })
+// }
+
+// const renderDefaultPcButtonConfigs = () => {
+//   return [
+//     renderDefaultCellActiveButton(),
+//     h(VxeFormItemComponent, {
+//       title: '工具栏左侧按钮'
+//     }, {
+//       extra () {
+//         return h(VxeButtonComponent, {
+//           mode: 'text',
+//           status: 'primary',
+//           icon: getIcon().FORM_DESIGN_PROPS_ADD,
+//           disabled: true,
+//           content: '新增'
+//         })
+//       },
+//       default () {
+//         return h('div', {
+//           class: 'vxe-list-design--widget-form-empty-data'
+//         }, [
+//           h('span', {}, '无操作按钮')
+//         ])
+//       }
+//     }),
+//     h(VxeFormItemComponent, {
+//       title: '工具栏右侧按钮'
+//     }, {
+//       extra () {
+//         return h(VxeButtonComponent, {
+//           mode: 'text',
+//           status: 'primary',
+//           icon: getIcon().FORM_DESIGN_PROPS_ADD,
+//           disabled: true,
+//           content: '新增'
+//         })
+//       },
+//       default () {
+//         return h('div', {
+//           class: 'vxe-list-design--widget-form-empty-data'
+//         }, [
+//           h('span', {}, '无操作按钮')
+//         ])
+//       }
+//     })
+//   ]
+// }
+
+// const renderDefaultPcButtonTabPane = () => {
+//   return h(VxeTabPaneComponent, {
+//     name: 'pc',
+//     icon: getIcon().FORM_DESIGN_PROPS_PC,
+//     title: '电脑端'
+//   }, {
+//     default () {
+//       return [
+//         h(VxeFormComponent, {
+//           span: 24,
+//           vertical: true,
+//           titleBold: true
+//         }, {
+//           default () {
+//             return renderDefaultPcButtonConfigs()
+//           }
+//         })
+//       ]
+//     }
+//   })
+// }
+
+// const renderDefaultMobileButtonConfigs = () => {
+//   return [
+//     renderDefaultCellActiveButton()
+//   ]
+// }
+
+// const renderDefaultMobileButtonTabPane = () => {
+//   return h(VxeTabPaneComponent, {
+//     name: 'mobile',
+//     icon: getIcon().FORM_DESIGN_PROPS_MOBILE,
+//     title: '移动端'
+//   }, {
+//     default () {
+//       return [
+//         h(VxeFormComponent, {
+//           span: 24,
+//           vertical: true,
+//           titleBold: true
+//         }, {
+//           default () {
+//             return renderDefaultMobileButtonConfigs()
+//           }
+//         })
+//       ]
+//     }
+//   })
+// }
+
 export const DefaultListSettingFormComponent = defineComponent({
   name: 'DefaultListSettingForm',
   props: {},
@@ -176,10 +264,23 @@ export const DefaultListSettingFormComponent = defineComponent({
 
     const { props: listDesignProps, reactData: listDesignReactData } = $xeListDesign
 
+    // const activeBtnTab = ref('pc')
+
     const renderViewList = ref([
       { label: '列表视图', value: 'list', isExpand: false }
     ])
 
+    const refSeqOpts = ref([
+      { label: '显示', value: true },
+      { label: '隐藏', value: false }
+    ])
+
+    const refCheckboxOpts = ref([
+      { label: '默认', value: 'auto' },
+      { label: '是', value: true },
+      { label: '否', value: false }
+    ])
+
     const disableView = computed(() => {
       const { formData } = listDesignReactData
       return [formData.listView.enabled, formData.ganttView.enabled, formData.chartView.enabled].filter(enabled => enabled).length <= 1
@@ -279,16 +380,65 @@ export const DefaultListSettingFormComponent = defineComponent({
               }
             }),
             h(VxeFormItemComponent, {
-              title: '功能按钮'
+              title: '列配置'
             }, {
               default () {
-                return h('div', {
-                  class: 'vxe-list-design--widget-form-empty-data'
-                }, [
-                  h('span', {}, '无操作按钮')
-                ])
+                const { formData } = listDesignReactData
+                return [
+                  h('div', {
+                    class: 'vxe-list-design--widget-form-item-prop-list'
+                  }, [
+                    h('span', {}, '显示序号'),
+                    h(VxeRadioGroupComponent, {
+                      modelValue: formData.showSeq,
+                      options: refSeqOpts.value,
+                      'onUpdate:modelValue' (val) {
+                        formData.showSeq = val
+                      }
+                    })
+                  ]),
+                  h('div', {
+                    class: 'vxe-list-design--widget-form-item-prop-list'
+                  }, [
+                    h('span', {}, '批量操作'),
+                    h(VxeRadioGroupComponent, {
+                      modelValue: formData.showCheckbox,
+                      options: refCheckboxOpts.value,
+                      'onUpdate:modelValue' (val) {
+                        formData.showCheckbox = val
+                      }
+                    })
+                  ])
+                ]
               }
             })
+            // showPc && showMobile
+            //   ? h(VxeFormItemComponent, {
+            //     title: '按钮配置'
+            //   }, {
+            //     default () {
+            //       return h(VxeTabsComponent, {
+            //         modelValue: activeBtnTab.value,
+            //         'onUpdate:modelValue' (val) {
+            //           activeBtnTab.value = val
+            //         }
+            //       }, {
+            //         default () {
+            //           return [
+            //             renderDefaultPcButtonTabPane(),
+            //             renderDefaultMobileButtonTabPane()
+            //           ]
+            //         }
+            //       })
+            //     }
+            //   })
+            //   : h(VxeFormGatherComponent, {
+            //     span: 24
+            //   }, {
+            //     default () {
+            //       return showMobile ? renderDefaultMobileButtonConfigs() : renderDefaultPcButtonConfigs()
+            //     }
+            //   })
           ]
         }
       })
diff --git a/packages/list-design/src/layout-preview.ts b/packages/list-design/src/layout-preview.ts
index 9955436c..75d65b43 100644
--- a/packages/list-design/src/layout-preview.ts
+++ b/packages/list-design/src/layout-preview.ts
@@ -1,13 +1,17 @@
-import { defineComponent, h, resolveComponent, inject, ref, watch, onMounted } from 'vue'
+import { defineComponent, h, inject, ref, watch, onMounted, createCommentVNode, nextTick, computed } from 'vue'
+import { VxeUI } from '../../ui'
+import { errLog } from '../../ui/src/log'
 import VxeFormComponent from '../../form/src/form'
 
-import { VxeListDesignConstructor, VxeListDesignPrivateMethods, VxeGridComponent, VxeTablePropTypes, VxeGridInstance } from '../../../types'
+import { VxeListDesignConstructor, VxeListDesignPrivateMethods, VxeGridComponent, VxeTablePropTypes, VxeGridInstance, VxeGridPropTypes } from '../../../types'
 
 export default defineComponent({
   name: 'ListDesignLayoutView',
   props: {},
   emits: [],
   setup () {
+    const VxeTableGridComponent = VxeUI.getComponent<VxeGridComponent>('VxeGrid')
+
     const $xeListDesign = inject<(VxeListDesignConstructor & VxeListDesignPrivateMethods) | null>('$xeListDesign', null)
 
     if (!$xeListDesign) {
@@ -20,6 +24,19 @@ export default defineComponent({
 
     const tableData = ref<VxeTablePropTypes.Data>([])
 
+    const tableColumn = computed(() => {
+      const { formData, listTableColumns } = listDesignReactData
+      const cols: VxeGridPropTypes.Columns = []
+      if (formData.showSeq) {
+        cols.push({
+          type: 'seq',
+          width: 70
+        })
+      }
+      cols.push(...listTableColumns)
+      return cols
+    })
+
     const updateTableData = () => {
       const { listTableColumns } = listDesignReactData
       const data: Record<string, any>[] = [{}, {}]
@@ -46,8 +63,16 @@ export default defineComponent({
       updateTableData()
     })
 
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      nextTick(() => {
+        if (!VxeTableGridComponent) {
+          errLog('vxe.error.reqComp', ['vxe-grid'])
+        }
+      })
+    }
+
     return () => {
-      const { searchFormItems, listTableColumns } = listDesignReactData
+      const { searchFormItems } = listDesignReactData
 
       return h('div', {
         class: 'vxe-list-design--preview'
@@ -77,22 +102,27 @@ export default defineComponent({
             h('div', {
               class: 'vxe-list-design--preview-title'
             }, '列表字段'),
-            h(resolveComponent('vxe-grid') as VxeGridComponent, {
-              ref: refGrid,
-              columns: listTableColumns,
-              data: tableData.value,
-              showOverflow: true,
-              columnConfig: {
-                minWidth: 80,
-                isHover: true
-              },
-              scrollX: {
-                enabled: false
-              },
-              scrollY: {
-                enabled: false
-              }
-            })
+            VxeTableGridComponent
+              ? h(VxeTableGridComponent, {
+                ref: refGrid,
+                columns: tableColumn.value,
+                data: tableData.value,
+                showOverflow: true,
+                border: true,
+                columnConfig: {
+                  minWidth: 80
+                },
+                rowConfig: {
+                  isHover: true
+                },
+                scrollX: {
+                  enabled: false
+                },
+                scrollY: {
+                  enabled: false
+                }
+              })
+              : createCommentVNode()
           ])
         ])
       ])
diff --git a/packages/list-design/src/list-design.ts b/packages/list-design/src/list-design.ts
index c64b5202..271ca899 100644
--- a/packages/list-design/src/list-design.ts
+++ b/packages/list-design/src/list-design.ts
@@ -19,10 +19,7 @@ export default defineComponent({
       type: [String, Number] as PropType<VxeListDesignPropTypes.Height>,
       default: () => getConfig().listDesign.height
     },
-    config: {
-      type: Object as PropType<VxeListDesignPropTypes.Config>,
-      default: () => ({})
-    },
+    config: Object as PropType<VxeListDesignPropTypes.Config>,
     showPc: {
       type: Boolean as PropType<VxeListDesignPropTypes.ShowPc>,
       default: () => getConfig().listDesign.showPc
@@ -129,11 +126,15 @@ export default defineComponent({
         setSearchItems(searchItems)
       }
       if (listColumns) {
-        reactData.listTableColumns = configToListColumns(listColumns)
+        reactData.listTableColumns = parseTableColumn(listColumns)
       }
       return nextTick()
     }
 
+    const parseTableColumn = (listColumns: VxeListDesignDefines.ListColumnObjItem[]) => {
+      return configToListColumns(listColumns)
+    }
+
     const loadFormConfig = (data: any) => {
       reactData.formData = Object.assign({}, data)
       return nextTick()
@@ -153,7 +154,7 @@ export default defineComponent({
     }
 
     const setListColumns = (listColumns: VxeListDesignDefines.ListColumnObjItem[]) => {
-      reactData.listTableColumns = configToListColumns(listColumns)
+      reactData.listTableColumns = parseTableColumn(listColumns)
       return nextTick()
     }
 
@@ -190,8 +191,10 @@ export default defineComponent({
       },
       loadConfig,
       clearConfig () {
-        reactData.searchFormItems = []
-        reactData.listTableColumns = []
+        loadConfig({
+          searchItems: [],
+          listColumns: []
+        })
         createSettingForm()
         return nextTick()
       }
@@ -236,6 +239,7 @@ export default defineComponent({
     })
 
     createSettingForm()
+
     if (props.config) {
       loadConfig(props.config)
     }
diff --git a/packages/list-design/src/list-view.ts b/packages/list-design/src/list-view.ts
index e61fa8a9..d8a9f076 100644
--- a/packages/list-design/src/list-view.ts
+++ b/packages/list-design/src/list-view.ts
@@ -1,36 +1,73 @@
-import { defineComponent, ref, PropType, h, reactive, resolveComponent, provide, watch, nextTick } from 'vue'
-import { createEvent } from '../../ui'
+import { defineComponent, ref, PropType, h, reactive, provide, watch, nextTick, computed } from 'vue'
+import { VxeUI, getConfig, createEvent } from '../../ui'
+import { errLog } from '../../ui/src/log'
+import { toCssUnit } from '../../ui/src/dom'
+import { getSlotVNs } from '../../ui/src/vn'
+import VxeLoadingComponent from '../../loading/src/loading'
 import XEUtils from 'xe-utils'
 
-import type { ListViewReactData, ListViewPrivateRef, VxeListViewPropTypes, VxeGridComponent, VxeListViewEmits, VxeListViewPrivateComputed, VxeListViewConstructor, VxeListDesignDefines, ListViewMethods, ListViewPrivateMethods, VxeListViewPrivateMethods } from '../../../types'
+import type { ListViewReactData, ListViewPrivateRef, VxeListViewPropTypes, VxeGridComponent, VxeGridInstance, VxeGridPropTypes, VxeGridProps, VxeListViewEmits, VxeListViewPrivateComputed, VxeListViewConstructor, VxeListDesignDefines, ListViewMethods, ListViewPrivateMethods, VxeListViewPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeListView',
   props: {
-    config: {
-      type: Object as PropType<VxeListViewPropTypes.Config>,
-      default: () => ({})
+    config: Object as PropType<VxeListViewPropTypes.Config>,
+    height: {
+      type: [String, Number] as PropType<VxeListViewPropTypes.Height>,
+      default: () => getConfig().listView.height
     },
-    data: Array as PropType<VxeListViewPropTypes.Data>,
+    loading: Boolean as PropType<VxeListViewPropTypes.Loading>,
+    gridOptions: Object as PropType<VxeListViewPropTypes.GridOptions>,
+    gridEvents: Object as PropType<VxeListViewPropTypes.GridEvents>,
     viewRender: Object as PropType<VxeListViewPropTypes.ViewRender>
   },
   emits: [
-
   ] as VxeListViewEmits,
   setup (props, context) {
-    const { emit } = context
+    const VxeTableGridComponent = VxeUI.getComponent<VxeGridComponent>('VxeGrid')
+
+    const { emit, slots } = context
 
     const xID = XEUtils.uniqueId()
 
     const refElem = ref<HTMLDivElement>()
+    const refGrid = ref<VxeGridInstance>()
 
     const reactData = reactive<ListViewReactData>({
       searchFormItems: [],
       listTableColumns: []
     })
 
+    const computeGridOptions = computed<VxeGridProps>(() => {
+      const { gridOptions } = props
+      const { listTableColumns } = reactData
+      const gridOpts = gridOptions || {}
+      const columnOpts = Object.assign({
+        minWidth: 80
+      }, gridOpts.columnConfig)
+      let proxyOpts: VxeGridPropTypes.ProxyConfig | undefined
+      if (gridOpts.proxyConfig) {
+        proxyOpts = Object.assign({ autoLoad: false }, gridOpts.proxyConfig)
+      }
+      return Object.assign({}, gridOpts, {
+        columns: listTableColumns,
+        columnConfig: columnOpts,
+        proxyConfig: proxyOpts
+      })
+    })
+
+    const computeGridEvents = computed<VxeGridProps>(() => {
+      const { gridEvents } = props
+      const ons: Record<string, any> = {}
+      XEUtils.each(gridEvents, (fn, key) => {
+        ons[XEUtils.camelCase(`on-${key}`)] = fn
+      })
+      return ons
+    })
+
     const refMaps: ListViewPrivateRef = {
-      refElem
+      refElem,
+      refGrid
     }
 
     const computeMaps: VxeListViewPrivateComputed = {
@@ -71,14 +108,64 @@ export default defineComponent({
       return []
     }
 
+    const clearConfig = () => {
+      reactData.searchFormItems = []
+      reactData.listTableColumns = []
+      return nextTick()
+    }
+
     const loadConfig = (config: Partial<VxeListDesignDefines.ListDesignConfig> | null) => {
       if (config) {
-        setSearchItems(config.searchItems || [])
-        reactData.listTableColumns = configToListColumns(config.listColumns || [])
+        const { formConfig, searchItems, listColumns } = config
+        setSearchItems(searchItems || [])
+        loadListColumns(listColumns || [], formConfig || {})
       }
       return nextTick()
     }
 
+    const parseFormItems = (searchItems: VxeListDesignDefines.SearchItemObjItem[]) => {
+      const formItems = configToSearchItems(searchItems || [])
+      return formItems
+    }
+
+    const parseTableColumn = (listColumns: VxeListDesignDefines.ListColumnObjItem[], formConfig?: VxeListDesignDefines.DefaultSettingFormDataObjVO) => {
+      const formOpts = Object.assign({}, formConfig)
+      const columns: VxeGridPropTypes.Columns = configToListColumns(listColumns || [])
+      if (formOpts.showSeq) {
+        columns.unshift({
+          type: 'seq',
+          width: 70
+        })
+      }
+      return columns
+    }
+
+    const parseConfig = (config: Partial<VxeListDesignDefines.ListDesignConfig> | null) => {
+      const { formConfig, searchItems, listColumns } = config || {}
+      return {
+        formItems: parseFormItems(searchItems || []),
+        tableColumns: parseTableColumn(listColumns || [], formConfig)
+      }
+    }
+
+    const commitProxy = (code: string, ...args: any[]) => {
+      const $grid = refGrid.value
+      if ($grid) {
+        return $grid.commitProxy(code, ...args)
+      }
+      return Promise.resolve()
+    }
+
+    const loadListColumns = (listColumns: VxeListDesignDefines.ListColumnObjItem[], formConfig: any) => {
+      reactData.listTableColumns = parseTableColumn(listColumns || [], formConfig)
+      nextTick(() => {
+        const gridOptions = computeGridOptions.value
+        if (gridOptions.proxyConfig) {
+          commitProxy('reload')
+        }
+      })
+    }
+
     const setSearchItems = (searchItems: VxeListDesignDefines.SearchItemObjItem[]) => {
       reactData.searchFormItems = configToSearchItems(searchItems)
       return nextTick()
@@ -88,7 +175,10 @@ export default defineComponent({
       dispatchEvent (type, params, evnt) {
         emit(type, createEvent(evnt, { $listView: $xeListView }, params))
       },
-      loadConfig
+      clearConfig,
+      loadConfig,
+      parseConfig,
+      commitProxy
     }
 
     const listViewPrivateMethods: ListViewPrivateMethods = {
@@ -97,34 +187,65 @@ export default defineComponent({
     Object.assign($xeListView, listViewMethods, listViewPrivateMethods)
 
     const renderVN = () => {
-      const { data } = props
-      const { listTableColumns } = reactData
+      const { height, loading } = props
+      const gridSlot = slots.grid
+      const gridOptions = computeGridOptions.value
+      const gridEvents = computeGridEvents.value
+
       return h('div', {
         ref: refElem,
-        class: ['vxe-list-view']
-      }, [
-        h('div', {}, [
-          h(resolveComponent('vxe-grid') as VxeGridComponent, {
-            columns: listTableColumns,
-            data: data,
-            columnConfig: {
-              minWidth: 80
+        class: ['vxe-list-view', {
+          'is--loading': loading
+        }],
+        style: height
+          ? {
+              height: toCssUnit(height)
             }
-          })
-        ])
+          : null
+      }, [
+        h('div', {
+          class: 'vxe-list-view--body'
+        }, [
+          gridSlot
+            ? h('div', {
+              class: 'vxe-list-view--grid-wrapper'
+            }, getSlotVNs(gridSlot({ $listView: $xeListView })))
+            : h(VxeTableGridComponent, Object.assign({}, gridOptions, gridEvents, {
+              ref: refGrid
+            }), Object.assign({}, slots, {
+              default: undefined
+            }))
+        ]),
+        /**
+         * 加载中
+         */
+        h(VxeLoadingComponent, {
+          class: 'vxe-list-view--loading',
+          modelValue: loading
+        })
       ])
     }
 
     $xeListView.renderVN = renderVN
 
-    watch(() => props.config, () => {
-      loadConfig(props.config)
+    watch(() => props.config, (value) => {
+      loadConfig(value || {})
     })
 
-    loadConfig(props.config)
+    if (props.config) {
+      loadConfig(props.config)
+    }
 
     provide('$xeListView', $xeListView)
 
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      nextTick(() => {
+        if (!VxeTableGridComponent) {
+          errLog('vxe.error.reqComp', ['vxe-grid'])
+        }
+      })
+    }
+
     return $xeListView
   },
   render () {
diff --git a/packages/tabs/src/tabs.ts b/packages/tabs/src/tabs.ts
index 1f06208a..6d0e7cfe 100644
--- a/packages/tabs/src/tabs.ts
+++ b/packages/tabs/src/tabs.ts
@@ -45,7 +45,7 @@ export default defineComponent({
     const reactData = reactive<TabsReactData>({
       staticTabs: [],
       activeName: props.modelValue,
-      initNames: props.modelValue ? [props.modelValue] : [],
+      initNames: [],
       lintLeft: 0,
       lintWidth: 0,
       isTabOver: false
@@ -141,9 +141,10 @@ export default defineComponent({
       emit(type, createEvent(evnt, { $tabs: $xeTabs }, params))
     }
 
-    const addInitName = (name: VxeTabsPropTypes.ModelValue) => {
+    const addInitName = (name: VxeTabsPropTypes.ModelValue, evnt: Event | null) => {
       const { initNames } = reactData
       if (name && !initNames.includes(name)) {
+        dispatchEvent('tab-load', { name }, evnt)
         initNames.push(name)
         return true
       }
@@ -154,7 +155,7 @@ export default defineComponent({
       if (list) {
         list.forEach((item) => {
           if (item && item.preload) {
-            addInitName(item.name)
+            addInitName(item.name, null)
           }
         })
       }
@@ -169,20 +170,17 @@ export default defineComponent({
         dispatchEvent('tab-click', { name }, evnt)
         return
       }
-      const isInit = addInitName(name)
       const value = name
       reactData.activeName = name
       emit('update:modelValue', value)
       dispatchEvent('tab-click', { name }, evnt)
+      addInitName(name, evnt)
       if (name !== activeName) {
         if (!beforeMethod || beforeMethod({ $tabs: $xeTabs, name, oldName: activeName, newName: name })) {
           dispatchEvent('change', { value, name, oldName: activeName, newName: name }, evnt)
         } else {
           dispatchEvent('tab-change-fail', { value, name, oldName: activeName, newName: name }, evnt)
         }
-        if (isInit) {
-          dispatchEvent('tab-load', { name }, evnt)
-        }
       }
     }
 
@@ -283,9 +281,41 @@ export default defineComponent({
       })
     }
 
+    const createHandlePrevNextTab = (isNext: boolean) => {
+      return () => {
+        const { activeName } = reactData
+        const tabOptions = computeTabOptions.value
+        const tabStaticOptions = computeTabStaticOptions.value
+        const list = tabStaticOptions.length ? tabStaticOptions : tabOptions
+        const index = XEUtils.findIndexOf(list, item => item.name === activeName)
+        if (index > -1) {
+          let item: VxeTabPaneProps | null = null
+          if (isNext) {
+            if (index < list.length - 1) {
+              item = list[index + 1]
+            }
+          } else {
+            if (index > 0) {
+              item = list[index - 1]
+            }
+          }
+          if (item) {
+            const name = item.name
+            const value = name
+            reactData.activeName = name
+            emit('update:modelValue', value)
+            addInitName(name, null)
+          }
+        }
+        return nextTick()
+      }
+    }
+
     const tabsMethods: TabsMethods = {
       dispatchEvent,
-      scrollToTab
+      scrollToTab,
+      prevTab: createHandlePrevNextTab(false),
+      nextTab: createHandlePrevNextTab(true)
     }
 
     const tabsPrivateMethods: TabsPrivateMethods = {
@@ -451,7 +481,7 @@ export default defineComponent({
     }
 
     watch(() => props.modelValue, (val) => {
-      addInitName(val)
+      addInitName(val, null)
       reactData.activeName = val
     })
 
@@ -502,6 +532,7 @@ export default defineComponent({
 
     provide('$xeTabs', $xeTabs)
 
+    addInitName(props.modelValue, null)
     initDefaultName()
 
     return $xeTabs
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 33d96efe..c643173c 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -134,6 +134,7 @@ setConfig({
     height: 400,
     showPc: true
   },
+  listView: {},
   list: {
     // size: null,
     scrollY: {
@@ -328,6 +329,7 @@ setIcon({
   FORM_DESIGN_STYLE_SETTING: iconPrefix + 'layout',
   FORM_DESIGN_PROPS_PC: iconPrefix + 'pc',
   FORM_DESIGN_PROPS_MOBILE: iconPrefix + 'mobile',
+  FORM_DESIGN_PROPS_ADD: iconPrefix + 'add',
   FORM_DESIGN_WIDGET_ADD: iconPrefix + 'square-plus-fill',
   FORM_DESIGN_WIDGET_COPY: iconPrefix + 'copy',
   FORM_DESIGN_WIDGET_DELETE: iconPrefix + 'delete',
diff --git a/styles/components/form.scss b/styles/components/form.scss
index e7e8cfbd..5685c97d 100644
--- a/styles/components/form.scss
+++ b/styles/components/form.scss
@@ -78,6 +78,13 @@
   .vxe-form--item-title-label {
     vertical-align: middle;
   }
+  .vxe-form--item-title-extra {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: right;
+    flex-grow: 1;
+  }
 }
 
 .vxe-form--item-trigger-node {
diff --git a/styles/components/list-design.scss b/styles/components/list-design.scss
index eca43750..0504a5f3 100644
--- a/styles/components/list-design.scss
+++ b/styles/components/list-design.scss
@@ -1,10 +1,12 @@
 @import './list-item/all.scss';
 
 .vxe-list-design {
+  position: relative;
   display: flex;
   flex-direction: column;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
+  overflow: auto;
 }
 
 .vxe-list-design {
diff --git a/styles/components/list-view.scss b/styles/components/list-view.scss
index e69de29b..fa074ad9 100644
--- a/styles/components/list-view.scss
+++ b/styles/components/list-view.scss
@@ -0,0 +1,16 @@
+.vxe-list-view {
+  position: relative;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  overflow: auto;
+  &.is--loading {
+    .vxe-list-view--body {
+      visibility: hidden;
+    }
+  }
+}
+.vxe-list-view--body,
+.vxe-list-view--grid-wrapper {
+  height: 100%;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/types/components/button.d.ts b/types/components/button.d.ts
index 3e657338..2a15477e 100644
--- a/types/components/button.d.ts
+++ b/types/components/button.d.ts
@@ -207,21 +207,15 @@ export interface VxeButtonSlots {
   /**
    * 自定义按钮内容
    */
-  default: (params: {
-    [key: string]: any
-  }) => any
+  default: (params: Record<string, any>) => any
   /**
    * 自定义自定义图标
    */
-  icon: (params: {
-    [key: string]: any
-  }) => any
+  icon: (params: Record<string, any>) => any
   /**
    * 自定义下拉按钮
    */
-  dropdowns: (params: {
-    [key: string]: any
-  }) => any
+  dropdowns: (params: Record<string, any>) => any
 }
 
 export const Button: typeof VxeButton
diff --git a/types/components/card.d.ts b/types/components/card.d.ts
index 6dd323ff..dd6b226e 100644
--- a/types/components/card.d.ts
+++ b/types/components/card.d.ts
@@ -76,6 +76,12 @@ export namespace VxeCardSlotTypes {
 
 export interface VxeCardSlots {
   default: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  header: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  title: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  extra: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  footer: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  left: (params: VxeCardSlotTypes.DefaultSlotParams) => any
+  right: (params: VxeCardSlotTypes.DefaultSlotParams) => any
 }
 
 export const Card: typeof VxeCard
diff --git a/types/components/form-design.d.ts b/types/components/form-design.d.ts
index 05bd84bb..37c903b3 100644
--- a/types/components/form-design.d.ts
+++ b/types/components/form-design.d.ts
@@ -75,17 +75,53 @@ export interface FormDesignInternalData {
 
 export interface FormDesignMethods {
   dispatchEvent(type: ValueOf<VxeFormDesignEmits>, params: any, evnt: Event): void
+  /**
+   * 创建一个指定类型的控件
+   */
   createWidget (name: string): VxeFormDesignDefines.WidgetObjItem
+  /**
+   * 创建一个空的占位控件
+   */
   createEmptyWidget (): VxeFormDesignDefines.WidgetObjItem
+  /**
+   * 获取所有配置
+   */
   getConfig (): VxeFormDesignDefines.FormDesignConfig
+  /**
+   * 清除所有配置
+   */
   clearConfig (): Promise<any>
+  /**
+   * 加载配置
+   */
   loadConfig (config: Partial<VxeFormDesignDefines.FormDesignConfig>): Promise<any>
+  /**
+   * 获取表单配置
+   */
   getFormConfig(): VxeFormDesignPropTypes.FormData
+  /**
+   * 加载表单配置
+   */
   loadFormConfig (formData: VxeFormDesignPropTypes.FormData): Promise<any>
+  /**
+   * 获取表单配置绑定的数据
+   */
   getFormData(): Record<string, any>
+  /**
+   * 获取控件配置列表
+   */
   getWidgetData (): VxeFormDesignDefines.WidgetObjItem[]
+  /**
+   * 加载控件配置
+   */
   loadWidgetData (widgetData: VxeFormDesignDefines.WidgetObjItem[]): Promise<any>
+  /**
+   * 刷新控件预览视图
+   */
   refreshPreviewView(): Promise<any>
+  /**
+   * 弹出样式配置面板
+   */
   openStyleSetting(): Promise<any>
 }
 export interface VxeFormDesignMethods extends FormDesignMethods { }
@@ -124,8 +160,8 @@ export namespace VxeFormDesignDefines {
   }
 
   export interface FormDesignConfig {
-    formConfig: VxeFormDesignPropTypes.FormData
-    widgetData: WidgetObjItem[]
+    formConfig?: VxeFormDesignPropTypes.FormData
+    widgetData?: WidgetObjItem[]
   }
 
   export interface WidgetConfigGroup {
diff --git a/types/components/form-item.d.ts b/types/components/form-item.d.ts
index 8f0445cd..120b0193 100644
--- a/types/components/form-item.d.ts
+++ b/types/components/form-item.d.ts
@@ -130,6 +130,7 @@ export namespace VxeFormItemPropTypes {
   export type Slots = {
     title?: string | ((params: FormItemTitleRenderParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
     default?: string | ((params: FormItemContentRenderParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
+    extra?: string | ((params: FormItemExtraRenderParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
   }
 }
 
@@ -275,6 +276,8 @@ export interface FormItemTitleRenderParams {
   property: string
 }
 
+export interface FormItemExtraRenderParams extends FormItemTitleRenderParams {}
+
 /**
  * 项内容渲染参数
  */
@@ -343,6 +346,7 @@ export interface VxeFormItemSlots {
    * 自定义标题模板
    */
   title: (params: VxeFormItemSlotTypes.DefaultSlotParams) => any
+  extra: (params: VxeFormItemSlotTypes.DefaultSlotParams) => any
 }
 
 export const FormItem: typeof VxeFormItem
diff --git a/types/components/form-view.d.ts b/types/components/form-view.d.ts
index 67dae9a3..5fdb9851 100644
--- a/types/components/form-view.d.ts
+++ b/types/components/form-view.d.ts
@@ -52,11 +52,42 @@ export interface FormViewReactData {
 
 export interface FormViewMethods {
   dispatchEvent(type: ValueOf<VxeFormViewEmits>, params: any, evnt: Event): void
+  /**
+   * 清除所有配置
+   */
+  clearConfig (): Promise<any>
+  /**
+   * 加载配置
+   */
   loadConfig (config: VxeFormDesignDefines.FormDesignConfig): Promise<any>
-  loadFormConfig (formData: VxeFormProps): Promise<any>
+  /**
+   * 解析配置
+   */
+  parseConfig (config: VxeFormDesignDefines.FormDesignConfig): {
+    formConfig: VxeFormProps
+    formRules: VxeFormPropTypes.Rules
+    formData: VxeFormPropTypes.Data
+    widgetData: VxeFormDesignDefines.WidgetObjItem[]
+  }
+  /**
+   * 加载表单配置
+   */
+  loadFormConfig (formConfig: VxeFormProps): Promise<any>
+  /**
+   * 加载控件配置
+   */
   loadWidgetData (widgetData: VxeFormDesignDefines.WidgetObjItem[]): Promise<any>
+  /**
+   * 更新控件状态
+   */
   updateItemStatus(widget: VxeFormDesignDefines.WidgetObjItem, value: any): Promise<any>
+  /**
+   * 设置指定控件值
+   */
   setItemValue(widget: VxeFormDesignDefines.WidgetObjItem, value: any): Promise<any>
+  /**
+   * 获取指定控件值
+   */
   getItemValue(widget: VxeFormDesignDefines.WidgetObjItem): any
 }
 export interface VxeFormViewMethods extends FormViewMethods { }
diff --git a/types/components/list-design.d.ts b/types/components/list-design.d.ts
index 35e8f25d..7c3347ca 100644
--- a/types/components/list-design.d.ts
+++ b/types/components/list-design.d.ts
@@ -55,13 +55,37 @@ export interface ListDesignReactData<D = VxeListDesignDefines.DefaultSettingForm
 
 export interface ListDesignMethods {
   dispatchEvent(type: ValueOf<VxeListDesignEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 加载表单设计器配置
+   */
   loadFormDesignConfig(config: Partial<VxeFormDesignDefines.FormDesignConfig>): Promise<any>
+  /**
+   * 获取列表的搜索区配置
+   */
   getSearchItems(): VxeListDesignDefines.SearchItemObjItem[]
+  /**
+   * 加载列表的搜索区配置
+   */
   setSearchItems(searchItems: VxeListDesignDefines.SearchItemObjItem[]): Promise<any>
+  /**
+   * 获取列表的列配置
+   */
   getListColumns(): VxeListDesignDefines.ListColumnObjItem[]
+  /**
+   * 加载列表的列配置
+   */
   setListColumns(listColumns: VxeListDesignDefines.ListColumnObjItem[]): Promise<any>
+  /**
+   * 获取所有配置
+   */
   getConfig (): VxeListDesignDefines.ListDesignConfig
+  /**
+   * 清除所有配置
+   */
   clearConfig (): Promise<any>
+  /**
+   * 加载配置
+   */
   loadConfig(config: Partial<VxeListDesignDefines.ListDesignConfig>): Promise<any>
 }
 export interface VxeListDesignMethods extends ListDesignMethods { }
@@ -77,8 +101,8 @@ export namespace VxeListDesignDefines {
     $listDesign: VxeListDesignConstructor
   }
 
-  export interface ListDesignConfig {
-    formConfig: any
+  export interface ListDesignConfig<FC = DefaultSettingFormDataObjVO> {
+    formConfig: FC
     searchItems: SearchItemObjItem[]
     listColumns: ListColumnObjItem[]
   }
@@ -94,9 +118,22 @@ export namespace VxeListDesignDefines {
     visible: boolean
   }
 
-  export interface DefaultSettingFormActiveBtnItem {
+  export interface DefaultSettingFormToolbarButton {
     content?: string
     icon?: string
+    type: 'custom' | ''
+  }
+
+  export interface DefaultSettingFormToolbarTool {
+    content?: string
+    icon?: string
+    type: 'custom' | ''
+  }
+
+  export interface DefaultSettingFormActiveButton {
+    content?: string
+    icon?: string
+    type: 'custom' | ''
   }
 
   export interface DefaultSettingFormDataObjVO {
@@ -113,7 +150,9 @@ export namespace VxeListDesignDefines {
     showSeq: boolean
     mobileDefaultView: 'list' | 'gantt' | 'chart'
     pcDefaultView: 'list' | 'gantt' | 'chart'
-    activeBtnList: DefaultSettingFormActiveBtnItem[]
+    toolbarButtonList: DefaultSettingFormToolbarButton[]
+    toolbarToolList: DefaultSettingFormToolbarTool[]
+    activeButtonList: DefaultSettingFormActiveButton[]
   }
 }
 
diff --git a/types/components/list-view.d.ts b/types/components/list-view.d.ts
index e3ca04da..297bb540 100644
--- a/types/components/list-view.d.ts
+++ b/types/components/list-view.d.ts
@@ -1,6 +1,7 @@
 import { RenderFunction, SetupContext, Ref, ComponentPublicInstance, DefineComponent } from 'vue'
 import { defineVxeComponent, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
 import { VxeListDesignDefines } from './list-design'
+import { VxeGridInstance, VxeGridPropTypes, VxeGridProps, VxeGridListeners } from './grid'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -9,30 +10,38 @@ export type VxeListViewComponent = DefineComponent<VxeListViewProps, VxeListView
 
 export type VxeListViewInstance = ComponentPublicInstance<VxeListViewProps, VxeListViewConstructor>
 
-export interface VxeListViewConstructor extends VxeComponentBaseOptions, VxeListViewMethods {
+export interface VxeListViewConstructor<D = any> extends VxeComponentBaseOptions, VxeListViewMethods<D> {
   props: VxeListViewProps
   context: SetupContext<VxeListViewEmits>
   reactData: ListViewReactData
-  getRefMaps(): ListViewPrivateRef
+  getRefMaps(): ListViewPrivateRef<D>
   getComputeMaps(): ListViewPrivateComputed
   renderVN: RenderFunction
 }
 
-export interface ListViewPrivateRef {
+export interface ListViewPrivateRef<D = any> {
   refElem: Ref<HTMLDivElement | undefined>
+  refGrid: Ref<VxeGridInstance<D> | undefined>
 }
-export interface VxeListViewPrivateRef extends ListViewPrivateRef { }
+export interface VxeListViewPrivateRef<D = any> extends ListViewPrivateRef<D> { }
 
 export namespace VxeListViewPropTypes {
   export type Config = null | VxeListDesignDefines.ListDesignConfig
-  export type Data = any[]
+  export type Loading = boolean
+  export type Height = string | number
+  export type GridOptions<D = any> = Omit<VxeGridProps<D>, 'columns'>
+  export type GridEvents<D = any> = VxeGridListeners<D>
   export type ViewRender = {
     name?: string
   }
 }
 
-export type VxeListViewProps = {
+export type VxeListViewProps<D = any> = {
   config?: VxeListViewPropTypes.Config
+  loading?: VxeListViewPropTypes.Loading
+  height?: VxeListViewPropTypes.Height
+  gridOptions?: VxeListViewPropTypes.GridOptions<D>
+  gridEvents?: VxeListViewPropTypes.GridEvents<D>
   viewRender?: VxeListViewPropTypes.ViewRender
 }
 
@@ -42,14 +51,33 @@ export interface VxeListViewPrivateComputed extends ListViewPrivateComputed { }
 
 export interface ListViewReactData {
   searchFormItems: VxeListDesignDefines.SearchItemObjItem[]
-  listTableColumns: VxeListDesignDefines.ListColumnObjItem[]
+  listTableColumns: VxeGridPropTypes.Columns
 }
 
-export interface ListViewMethods {
+export interface ListViewMethods<D = any> {
   dispatchEvent(type: ValueOf<VxeListViewEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 清除所有配置
+   */
+  clearConfig(): Promise<any>
+  /**
+   * 加载配置
+   */
   loadConfig(config: VxeListDesignDefines.ListDesignConfig): Promise<any>
+  /**
+   * 解析配置
+   */
+  parseConfig(config: VxeListDesignDefines.ListDesignConfig): {
+    formItems: VxeListDesignDefines.SearchItemObjItem[]
+    tableColumns: VxeGridPropTypes.Columns
+  }
+  /**
+   * 给 Grid 数据代理提交指令
+   * @param code 指令编码
+   */
+  commitProxy(code: string, ...args: any[]): Promise<any>
 }
-export interface VxeListViewMethods extends ListViewMethods { }
+export interface VxeListViewMethods<D = any> extends ListViewMethods<D> { }
 
 export interface ListViewPrivateMethods { }
 export interface VxeListViewPrivateMethods extends ListViewPrivateMethods { }
@@ -74,6 +102,9 @@ export namespace VxeListViewSlotTypes {
 
 export interface VxeListViewSlots {
   default: (params: VxeListViewSlotTypes.DefaultSlotParams) => any
+  grid: (params: VxeListViewSlotTypes.DefaultSlotParams) => any
+
+  [key: string]: (params: Record<string, any>) => any
 }
 
 export const ListView: typeof VxeListView
diff --git a/types/components/table.d.ts b/types/components/table.d.ts
index 51e07321..9cb4507d 100644
--- a/types/components/table.d.ts
+++ b/types/components/table.d.ts
@@ -58,7 +58,10 @@ export type VxeTableDataRow = VxeTablePropTypes.Row
 
 export namespace VxeTablePropTypes {
   export type Size = VxeComponentSizeType
-  export type ID = string
+  export type ID = string | ((params: {
+    $table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
+    $grid: VxeGridConstructor<D> | null | undefined
+  }) => string | number | null)
 
   export interface Row {
     [key: string]: any
@@ -2014,6 +2017,7 @@ export type VxeTableProps<D = any> = {
 
 export interface TablePrivateComputed<D = any> {
   computeSize: ComputedRef<VxeTablePropTypes.Size>
+  computeTableId: ComputedRef<string>
   computeValidOpts: ComputedRef<VxeTablePropTypes.ValidOpts<D>>
   computeSXOpts: ComputedRef<VxeTablePropTypes.SXOpts>
   computeSYOpts: ComputedRef<VxeTablePropTypes.SYOpts>
diff --git a/types/components/tabs.d.ts b/types/components/tabs.d.ts
index c4ca3b99..79f678fa 100644
--- a/types/components/tabs.d.ts
+++ b/types/components/tabs.d.ts
@@ -78,7 +78,18 @@ export interface TabsReactData {
 
 export interface TabsMethods {
   dispatchEvent(type: ValueOf<VxeTabsEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 定位到指定页签
+   */
   scrollToTab(name: VxeTabsPropTypes.ModelValue): Promise<any>
+  /**
+   * 切换到上一个页签
+   */
+  prevTab(): Promise<any>
+  /**
+   * 切换到下一个页签
+   */
+  nextTab(): Promise<any>
 }
 export interface VxeTabsMethods extends TabsMethods { }
 
diff --git a/types/ui/global-icon.d.ts b/types/ui/global-icon.d.ts
index b8bff84b..89cbac48 100644
--- a/types/ui/global-icon.d.ts
+++ b/types/ui/global-icon.d.ts
@@ -112,6 +112,7 @@ declare module '@vxe-ui/core' {
     FORM_DESIGN_STYLE_SETTING?: string
     FORM_DESIGN_PROPS_PC?: string
     FORM_DESIGN_PROPS_MOBILE?: string
+    FORM_DESIGN_PROPS_ADD?: string
     FORM_DESIGN_WIDGET_ADD?: string
     FORM_DESIGN_WIDGET_COPY?: string
     FORM_DESIGN_WIDGET_DELETE?: string
diff --git a/types/ui/renderer.d.ts b/types/ui/renderer.d.ts
index 35af7540..c5063a5f 100644
--- a/types/ui/renderer.d.ts
+++ b/types/ui/renderer.d.ts
@@ -813,15 +813,33 @@ declare module '@vxe-ui/core' {
   }
 }
 
-// 表单设计器
+// 列表设计器
 declare module '@vxe-ui/core' {
   export interface VxeGlobalRendererOptions {
     /**
      * 列表设计器 - 创建设计器-表单属性数据
      */
     createListDesignSettingFormConfig?(params: VxeGlobalRendererHandles.CreateListDesignSettingFormConfigParams): Record<string, any>
+
+    // listDesignSettingActiveButtonName?: string
+    // listDesignSettingActiveButtonMethod?:(params: VxeGlobalRendererHandles.ListDesignSettingActiveButtonMethodParams) => void
+    // renderListDesignSettingActiveButtonFormView?(renderOpts: any, params: any): VxeComponentSlotType | VxeComponentSlotType[]
+
+    // listDesignSettingToolbarButtonName?: string
+    // listDesignSettingToolbarButtonMethod?:(params: VxeGlobalRendererHandles.ListDesignSettingToolbarButtonMethodParams) => void
+    // renderListDesignSettingToolbarButtonFormView?(renderOpts: any, params: any): VxeComponentSlotType | VxeComponentSlotType[]
+
+    // listDesignSettingToolbarToolName?: string
+    // listDesignSettingToolbarToolMethod?:(params: VxeGlobalRendererHandles.ListDesignSettingToolbarToolMethodParams) => void
+    // renderListDesignSettingToolbarToolFormView?(renderOpts: any, params: any): VxeComponentSlotType | VxeComponentSlotType[]
   }
   export namespace VxeGlobalRendererHandles {
     export interface CreateListDesignSettingFormConfigParams {}
+
+    // export interface ListDesignSettingActiveButtonMethodParams {}
+
+    // export interface ListDesignSettingToolbarButtonMethodParams {}
+
+    // export interface ListDesignSettingToolbarToolMethodParams {}
   }
 }