diff --git a/index.html b/index.html
index 1593304..6ed143e 100644
--- a/index.html
+++ b/index.html
@@ -10,10 +10,16 @@
 	/>
 	<title><%= title %></title>
 	<link rel="icon" href="/favicon.ico"/>
+
+	<!-- 外置:todo 待排除 -->
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
 	<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/index.js" charset="utf-8"></script>
 	<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
 	<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.1"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.css">
+	<script src="https://cdn.jsdelivr.net/npm/loquat-form-design@1.2.6/lib/loquat-form-design.umd.min.js"></script>
+
+
 </head>
 <body>
 <script>
diff --git a/src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue b/src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
new file mode 100644
index 0000000..df15b85
--- /dev/null
+++ b/src/views/common/workflow/extension/form/helper/WorkflowFormDesign.vue
@@ -0,0 +1,101 @@
+<template>
+  <BasicModal v-bind="$attrs"
+              width="720px"
+              @register="registerModal"
+              @ok="handleSubmit"
+  >
+    <loquat-form-design ref="loquat-form-design"
+                        style="height:calc(100vh - 133px)"
+                        :toolbar="['clear', 'preview']"
+                        :options="state.options"
+                        :custom-fields="state.customFields"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+
+  interface TableState {
+    tag: string;
+    options: Recordable;
+    customFields: Recordable[];
+  }
+
+  const state = reactive<TableState>({
+    tag: '',
+    options: {},
+    customFields: [{
+      title: '自定义字段',
+      list: [
+        {
+          title: '分割线',
+          type: 'custom',
+          component: 'el-divider',
+          icon: 'iconfont icon-divider',
+          label: '',
+          propExclude: true,
+          labelWidth: 0,
+          params: {
+            html: '<h3 style="color:red">分割线标题</h3>',
+            contentPosition: 'left'
+          }
+        },
+        {
+          title: '警告',
+          type: 'custom',
+          component: 'el-alert',
+          icon: 'el-icon-warning',
+          label: '',
+          propExclude: true,
+          labelWidth: 0,
+          params: {
+            title: '警告警告警告警告',
+            type: 'success'
+          },
+          events: {
+            close () {
+              console.log('alert关闭事件');
+            }
+          }
+        }
+      ]
+    }],
+  });
+
+  const emit = defineEmits(['success', 'register']);
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    state.tag = data._tag;
+    const id = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    switch (state.tag) {
+      case 'add':
+        props.title = '新增流程表单';
+        break;
+      case 'edit':
+        props.title = '编辑流程表单';
+        break;
+    }
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (state.tag) {
+        case 'add':
+          break;
+        case 'edit':
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/common/workflow/extension/form/index.vue b/src/views/common/workflow/extension/form/index.vue
index 7e3ed40..fdfd1c0 100644
--- a/src/views/common/workflow/extension/form/index.vue
+++ b/src/views/common/workflow/extension/form/index.vue
@@ -76,7 +76,7 @@
               {
                 label: '设计',
                 icon: 'fa-solid:mortar-pestle',
-                onClick: handleEdit.bind(null, record)
+                onClick: handleWorkFlowFormDesign.bind(null, record)
               },
               {
                 label: '修改',
@@ -101,21 +101,19 @@
       </template>
     </BasicTable>
     <FormModal @register="registerModal" @success="handleRefreshTable"/>
+    <WorkflowFormDesign @register="registerWorkflowFormModal" @success="handleRefreshTable"/>
   </PageWrapper>
 </template>
 
 <script lang="ts">
   import { defineComponent, reactive, toRaw, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import {
-    listFormDefinition,
-    delFormDefinition,
-    getFormDefinition,
-  } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
+  import { listFormDefinition, delFormDefinition, } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { useModal } from '/@/components/Modal';
   import FormModal from './FormModal.vue';
+  import WorkflowFormDesign from './helper/WorkflowFormDesign.vue';
   import { columns, searchFormSchema } from './form.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { listToTree } from '/@/utils/helper/treeHelper';
@@ -142,6 +140,7 @@
       PlusOutlined,
       FormOutlined,
       DeleteOutlined,
+      WorkflowFormDesign,
     },
     setup() {
 
@@ -160,7 +159,7 @@
 
       const { createConfirm, createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
-      const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
+      const [registerWorkflowFormModal , { openModal: openWorkflowFormModal }] = useModal();
       const [registerTable, { reload, clearSelectedRowKeys, getForm }] = useTable({
         title: '流程表单列表',
         api: listFormDefinition,
@@ -234,6 +233,12 @@
         reload();
       }
 
+      /** 处理工作流表单设计 */
+      function handleWorkFlowFormDesign (row) {
+        const record = row.formDefinitionJson || {};
+        openWorkflowFormModal(true, { _tag: 'add', record });
+      }
+
       function handleSelect(selectedKeys: string[]) {
         getForm().setFieldsValue({
           categoryId: selectedKeys[0]
@@ -244,13 +249,14 @@
         state,
         registerTable,
         registerModal,
-        registerResetPwdModal,
+        registerWorkflowFormModal,
         handleAdd,
         handleEdit,
         handleDel,
         handleSelectionChange,
         handleRefreshTable,
         handleSelect,
+        handleWorkFlowFormDesign
       };
     }
   });
