diff --git a/src/common/index.ts b/src/common/index.ts
index 9ebf66f74289bca5bd503bbac9a84b0153197ad0..11cbd066255b94e7071160f0f9bc051e21d3ad51 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -30,6 +30,7 @@ import { IBizCoopAlert } from './coop-alert/coop-alert';
 import { CustomTheme } from './custom-theme/custom-theme';
 import { IBizCarouselCard } from './carousel-card/carousel-card';
 import { IBizEmojiSelect } from './emoji-select/emoji-select';
+import { IBizQuickEdit } from './quick-edit/quick-edit';
 
 export * from './col/col';
 export * from './row/row';
@@ -44,6 +45,7 @@ export { DoingNotice } from './doing-notice/doing-notice';
 export const IBizCommonComponents = {
   install: (v: App): void => {
     v.component(IBizControlBase.name, IBizControlBase);
+    v.component(IBizQuickEdit.name, IBizQuickEdit);
     v.component(IBizEmojiSelect.name, IBizEmojiSelect);
     v.component(IBizIcon.name, IBizIcon);
     v.component(DoingNotice.name, DoingNotice);
diff --git a/src/common/quick-edit/quick-edit.scss b/src/common/quick-edit/quick-edit.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f63e0cd753e972b38dfcd989985698b6a8ea32b7
--- /dev/null
+++ b/src/common/quick-edit/quick-edit.scss
@@ -0,0 +1,8 @@
+@include b('quick-edit') {
+  
+  @include e('footer') {
+    display: flex;
+    justify-content: end;
+    padding: getCssVar('spacing', 'tight');
+  }
+}
\ No newline at end of file
diff --git a/src/common/quick-edit/quick-edit.tsx b/src/common/quick-edit/quick-edit.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c8806f17254fbba625e0450064e40275358dc75d
--- /dev/null
+++ b/src/common/quick-edit/quick-edit.tsx
@@ -0,0 +1,141 @@
+import { defineComponent, PropType, Ref, ref } from 'vue';
+import {
+  IDEEditForm,
+  IDEEditFormItem,
+  IDEFormDetail,
+  IDEFormItem,
+} from '@ibiz/model-core';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import {
+  EventBase,
+  IModalData,
+  EditFormController,
+  findChildFormDetails,
+} from '@ibiz-template/runtime';
+import './quick-edit.scss';
+
+export const IBizQuickEdit = defineComponent({
+  name: 'IBizQuickEdit',
+  props: {
+    context: {
+      type: Object as PropType<IContext>,
+      required: true,
+    },
+    params: {
+      type: Object as PropType<IParams>,
+      required: true,
+    },
+    modelData: {
+      type: Object as PropType<IDEEditForm>,
+    },
+  },
+  emits: {
+    close: (_modalData: IModalData) => true,
+  },
+  setup(props, { emit }) {
+    const ns = useNamespace('quick-edit');
+    const controller: Ref<EditFormController | undefined> = ref(undefined);
+    const editItemModel: IDEFormItem[] = [];
+
+    /**
+     * 递归查找编辑项
+     *
+     * @param {IDEFormDetail} detail
+     */
+    const findEditItem = (detail: IDEFormDetail): void => {
+      const childern = findChildFormDetails(detail);
+      childern.forEach(child => {
+        if (child.detailType === 'FORMITEM' && !(child as IDEFormItem).hidden) {
+          editItemModel.push(child);
+        }
+        findEditItem(child);
+      });
+    };
+
+    /**
+     * 初始化
+     *
+     */
+    const init = (): void => {
+      if (props.modelData) {
+        props.modelData.deformPages?.forEach(child => {
+          findEditItem(child);
+        });
+      }
+    };
+
+    init();
+
+    /**
+     * 控制器创建完成
+     *
+     * @param {EventBase} event
+     */
+    const onCreated = (event: EventBase): void => {
+      controller.value = event.ctrl as EditFormController;
+    };
+
+    /**
+     * 获取编辑项数据
+     *
+     */
+    const getEditItemData = (): IData => {
+      const data: IData = {};
+      const item = (controller.value as IData).getDiffData();
+      editItemModel.forEach(formItem => {
+        const uiKey = formItem.id!.toLowerCase();
+        const deKey =
+          formItem.fieldName || (formItem as IDEEditFormItem).appDEFieldId!;
+        if (item[uiKey]) {
+          data[deKey] = item[uiKey];
+        }
+      });
+      return data;
+    };
+
+    /**
+     * 确认
+     *
+     */
+    const onConfirm = (): void => {
+      let data: IData[] | undefined;
+      if (controller.value) {
+        const item = getEditItemData();
+        if (Object.keys(item).length > 0) {
+          data = [item];
+        }
+      }
+      emit('close', { ok: true, data });
+    };
+
+    /**
+     * 取消
+     *
+     */
+    const onCancel = (): void => {
+      emit('close', { ok: false });
+    };
+
+    return { ns, onCreated, onConfirm, onCancel };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <iBizControlShell
+          params={this.params}
+          context={this.context}
+          modelData={this.modelData}
+          onCreated={this.onCreated}
+        ></iBizControlShell>
+        <div class={this.ns.e('footer')}>
+          <el-button text onClick={this.onCancel}>
+            {ibiz.i18n.t('app.cancel')}
+          </el-button>
+          <el-button onClick={this.onConfirm}>
+            {ibiz.i18n.t('app.confirm')}
+          </el-button>
+        </div>
+      </div>
+    );
+  },
+});