diff --git a/.env.development b/.env.development
index a70988f..dc6093f 100644
--- a/.env.development
+++ b/.env.development
@@ -25,3 +25,6 @@ VITE_GLOB_API_URL_PREFIX=
 
 # 表单设计器微前端地址
 VITE_APP_SUB_form-design = '//localhost:7101'
+
+# 工作流设计器微前端地址
+VITE_APP_SUB_workflow-design = '//localhost:7102'
diff --git a/.env.production b/.env.production
index e9a39af..c4019fe 100644
--- a/.env.production
+++ b/.env.production
@@ -37,4 +37,7 @@ VITE_USE_PWA = false
 VITE_LEGACY = false
 
 # 表单设计器微前端地址
-VITE_APP_SUB_form-design = '//kicc.kanglailab.com:7101'
+VITE_APP_SUB_form-design = '//kicc.kanglailab.com:3001'
+
+# 工作流设计器微前端地址
+VITE_APP_SUB_workflow-design = '//kicc.kanglailab.com:3002'
diff --git a/.env.test b/.env.test
index 45470a6..b3e979d 100644
--- a/.env.test
+++ b/.env.test
@@ -40,3 +40,6 @@ VITE_LEGACY = false
 
 # 表单设计器微前端地址
 VITE_APP_SUB_form-design = '//192.168.3.10:7101'
+
+# 工作流设计器微前端地址
+VITE_APP_SUB_workflow-design = '//192.168.3.10:7102'
diff --git a/src/api/platform/workflow/controller/model.ts b/src/api/platform/workflow/controller/model.ts
new file mode 100644
index 0000000..fa3ebcb
--- /dev/null
+++ b/src/api/platform/workflow/controller/model.ts
@@ -0,0 +1,29 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+ * author wangxiang4
+ */
+import { WorkflowModelResult, WorkflowModelParams, WorkflowModel } from '/@/api/platform/workflow/entity/workflowModel';
+import { defHttp } from '/@/utils/http/axios';
+import { downloadByUrl } from '/@/utils/file/download';
+import { useGlobSetting } from '/@/hooks/setting';
+const { apiUrl } = useGlobSetting();
+
+enum Api {
+  list = '/workflow_proxy/workflow/model/list',
+  getBpmnXml = '/workflow_proxy/workflow/model/getBpmnXml',
+  del = '/workflow_proxy/workflow/model/remove',
+  copy = '/workflow_proxy/workflow/model/copy',
+  deploy = '/workflow_proxy/workflow/model/deploy',
+  save = '/workflow_proxy/workflow/model/saveModel',
+  bpmnXmlDownload = '/workflow_proxy/workflow/model/bpmnXmlDownload'
+}
+
+export const listModel = (params?: Partial<WorkflowModelParams>) => defHttp.get<WorkflowModelResult>({url: Api.list, params}, { isReturnResultResponse: true });
+export const getModel = (modelId: string) => defHttp.get<string>({url: `${Api.getBpmnXml}/${modelId}` });
+export const delModel = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
+export const copyModel = (modelId: string)=> defHttp.post({ url: `${Api.copy}/${modelId}` });
+export const deployModel = (modelId: string, category: string)=> defHttp.post({ url: Api.deploy, params: { id: modelId, category } });
+export const saveModel = (modelId: string, params: Recordable)=> defHttp.post({url: `${Api.save}/${modelId}`, data: params});
+export const bpmnXmlDownload = (modelId: string, fileName?: string) => Promise.resolve(downloadByUrl({ url: `${apiUrl}${Api.bpmnXmlDownload}/${modelId}`, fileName: fileName }));
+
diff --git a/src/api/platform/workflow/controller/process.ts b/src/api/platform/workflow/controller/process.ts
new file mode 100644
index 0000000..20e9007
--- /dev/null
+++ b/src/api/platform/workflow/controller/process.ts
@@ -0,0 +1,43 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+ * author wangxiang4
+ */
+import { ProcessDefinitionInfoResult } from '/@/api/platform/workflow/entity/processDefinitionInfo';
+import { ProcessInstanceInfoResult } from '/@/api/platform/workflow/entity/processInstanceInfo';
+import { Workflow } from '/@/api/platform/workflow/entity/workflow';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/workflow_proxy/workflow/process/list',
+  exist = '/workflow_proxy/workflow/process/exist',
+  runList = '/workflow_proxy/workflow/process/runList',
+  historyList = '/workflow_proxy/workflow/process/historyList',
+  getFlowChart = '/workflow_proxy/workflow/process/getFlowChart',
+  setProcessCategory = '/workflow_proxy/workflow/process/setProcessCategory',
+  setProcessInstanceStatus = '/workflow_proxy/workflow/process/setProcessInstanceStatus',
+  removeDeployment = '/workflow_proxy/workflow/process/removeDeployment',
+  removeProcessInstance = '/workflow_proxy/workflow/process/removeProcessInstance',
+  undoProcessInstance = '/workflow_proxy/workflow/process/undoProcessInstance',
+  stopProcessInstance = '/workflow_proxy/workflow/process/stopProcessInstance',
+  queryProcessStatus = '/workflow_proxy/workflow/process/queryProcessStatus',
+  selfProcessInstanceList = '/workflow_proxy/workflow/process/selfProcessInstanceList',
+  startProcessDefinition = '/workflow_proxy/workflow/process/startProcessDefinition',
+  removeHistoryProcessIns = '/workflow_proxy/workflow/process/removeHistoryProcessIns',
+}
+
+export const listProcessDef = (params?: Recordable) => defHttp.get<ProcessDefinitionInfoResult>({ url: Api.list, params }, { isReturnResultResponse: true });
+export const exist = (processDefKey: string) => defHttp.get<string>({url: `${Api.exist}/${processDefKey}` });
+export const listProcessRun = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.runList, params }, { isReturnResultResponse: true });
+export const listProcessHistory = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.historyList, params }, { isReturnResultResponse: true });
+export const getFlowChart = (processDefId: string) => defHttp.get<string>({url: `${Api.getFlowChart}/${processDefId}` });
+export const setProcessCategory = (processDefKeys: string | string[], category: string) => defHttp.put({url: Api.setProcessCategory, params: { processDefKeys, category } });
+export const setProcessInstanceStatus = (processDefKeys: string | string[], status: string) =>  defHttp.put({url: Api.setProcessInstanceStatus, params: { processDefKeys, status } });
+export const removeDeployment = (ids: string) => defHttp.delete({ url: `${Api.removeDeployment}/${ids}` });
+export const removeProcessInstance = (processDefKeys: string | string[], reason: string) => defHttp.delete({url: Api.removeProcessInstance, params: { processDefKeys, reason } });
+export const undoProcessInstance = (processInsId: string) => defHttp.put({ url: `${Api.undoProcessInstance}/${processInsId}` });
+export const stopProcessInstance = (processInsId: string, message: string) => defHttp.put({ url: Api.stopProcessInstance, params: { processInsId, message } });
+export const queryProcessStatus = (processInsId: string) => defHttp.get({ url: `${Api.queryProcessStatus}/${processInsId}`} );
+export const selfProcessInstanceList = (params: Recordable) => defHttp.get({ url: Api.selfProcessInstanceList, params });
+export const startProcessDefinition = (workflow: Workflow) => defHttp.post({ url: Api.startProcessDefinition, data: workflow });
+export const removeHistoryProcessIns = (ids: string) => defHttp.delete({ url: `${Api.removeHistoryProcessIns}${ids}` });
diff --git a/src/api/platform/workflow/entity/activityCommentInfo.ts b/src/api/platform/workflow/entity/activityCommentInfo.ts
new file mode 100644
index 0000000..53048eb
--- /dev/null
+++ b/src/api/platform/workflow/entity/activityCommentInfo.ts
@@ -0,0 +1,7 @@
+export interface ActivityCommentInfo {
+  mesName: string;
+  mesCode: string;
+  mesLevel: string;
+  message: string;
+  [key: string]: any;
+}
diff --git a/src/api/platform/workflow/entity/historicActivityInstance.ts b/src/api/platform/workflow/entity/historicActivityInstance.ts
new file mode 100644
index 0000000..6533a96
--- /dev/null
+++ b/src/api/platform/workflow/entity/historicActivityInstance.ts
@@ -0,0 +1,19 @@
+export interface HistoricActivityInstance {
+  id: string;
+  activityId: string;
+  activityName: string;
+  activityType: string;
+  processDefinitionId: string;
+  processInstanceId: string;
+  executionId: string;
+  taskId: string;
+  calledProcessInstanceId: string;
+  assignee: string;
+  startTime: string;
+  endTime: string;
+  durationInMillis: string;
+  deleteReason: string;
+  tenantId: string;
+  time: string;
+  [key: string]: any;
+}
diff --git a/src/api/platform/workflow/entity/historyTaskInfo.ts b/src/api/platform/workflow/entity/historyTaskInfo.ts
new file mode 100644
index 0000000..9f1f595
--- /dev/null
+++ b/src/api/platform/workflow/entity/historyTaskInfo.ts
@@ -0,0 +1,28 @@
+import type { R } from '/#/axios';
+import type { Page } from '/@/api/common/data/entity';
+import type { TaskInfo } from './taskInfo';
+
+export type HistoryTaskInfoParams = Page & HistoryTaskInfo;
+
+export interface HistoryTaskInfo {
+  id: string;
+  name: string;
+  assignee: string;
+  executionId: string;
+  taskDefKey: string;
+  processDefId: string;
+  processInsId: string;
+  processDefName: string;
+  rollBack: boolean;
+  comment: string;
+  mesName: string;
+  mesCode: string;
+  mesLevel: string;
+  createTime: string;
+  endTime: string;
+  taskInfo: TaskInfo;
+  vars: Recordable;
+  [key:string]: any;
+}
+
+export type HistoryTaskInfoResult = R<HistoryTaskInfo[]>;
diff --git a/src/api/platform/workflow/entity/processDefinitionInfo.ts b/src/api/platform/workflow/entity/processDefinitionInfo.ts
new file mode 100644
index 0000000..b9e34fd
--- /dev/null
+++ b/src/api/platform/workflow/entity/processDefinitionInfo.ts
@@ -0,0 +1,20 @@
+import type { R } from '/#/axios';
+import type { Page } from '/@/api/common/data/entity';
+
+export type ProcessDefinitionInfoParams = Page & ProcessDefinitionInfo;
+
+export interface ProcessDefinitionInfo {
+  id: string;
+  category: string;
+  key: string;
+  name: string;
+  version: string;
+  resourceName: string;
+  diagramResourceName: string;
+  deploymentId: string;
+  suspend: string;
+  deploymentTime: number;
+  [key:string]: any;
+}
+
+export type ProcessDefinitionInfoResult = R<ProcessDefinitionInfo[]>;
diff --git a/src/api/platform/workflow/entity/processInstanceInfo.ts b/src/api/platform/workflow/entity/processInstanceInfo.ts
new file mode 100644
index 0000000..85e1cde
--- /dev/null
+++ b/src/api/platform/workflow/entity/processInstanceInfo.ts
@@ -0,0 +1,28 @@
+import type { R } from '/#/axios';
+import type { Page } from '/@/api/common/data/entity';
+import type { TaskInfo } from './taskInfo';
+import type { HistoryTaskInfo } from './historyTaskInfo';
+
+export type ProcessInstanceInfoParams = Page & ProcessInstanceInfo;
+
+export interface ProcessInstanceInfo {
+  processInsId: string;
+  processDefId: string;
+  processDefKey: string;
+  processDefName: string;
+  version: number;
+  startTime: string;
+  endTime: string;
+  activityId: string;
+  taskName: string;
+  deleteReason: string;
+  taskInfo: TaskInfo;
+  mesName: string;
+  mesCode: string;
+  mesLevel: string;
+  historyTaskInfo: HistoryTaskInfo;
+  vars: Recordable;
+  [key:string]: any;
+}
+
+export type ProcessInstanceInfoResult = R<ProcessInstanceInfo[]>;
diff --git a/src/api/platform/workflow/entity/taskInfo.ts b/src/api/platform/workflow/entity/taskInfo.ts
new file mode 100644
index 0000000..38b9fd8
--- /dev/null
+++ b/src/api/platform/workflow/entity/taskInfo.ts
@@ -0,0 +1,19 @@
+import type { R } from '/#/axios';
+import type { Page } from '/@/api/common/data/entity';
+
+export type TaskInfoParams = Page & TaskInfo;
+
+export interface TaskInfo {
+  id: string;
+  name: string;
+  assignee: string;
+  executionId: string;
+  taskDefKey: string;
+  createTime: string;
+  processDefId: string;
+  processInsId: string;
+  processDefKey: string;
+  [key:string]: any;
+}
+
+export type TaskInfoResult = R<TaskInfo[]>;
diff --git a/src/api/platform/workflow/entity/workflow.ts b/src/api/platform/workflow/entity/workflow.ts
new file mode 100644
index 0000000..3563bbe
--- /dev/null
+++ b/src/api/platform/workflow/entity/workflow.ts
@@ -0,0 +1,23 @@
+import type { ActivityCommentInfo } from './activityCommentInfo';
+import type { HistoricActivityInstance } from './historicActivityInstance';
+
+export interface Workflow {
+  taskId: string;
+  taskName: string;
+  taskDefKey: string;
+  assignee: string;
+  assigneeName: string;
+  formKey: string;
+  formType: string;
+  formReadOnly: boolean;
+  title: string;
+  processInsId: string;
+  processDefId: string;
+  processDefKey: string;
+  businessId: string;
+  businessTable: string;
+  vars: Recordable;
+  activityCommentInfo: ActivityCommentInfo;
+  historicActivityInstance: HistoricActivityInstance;
+  [key:string]: any;
+}
diff --git a/src/api/platform/workflow/entity/workflowModel.ts b/src/api/platform/workflow/entity/workflowModel.ts
new file mode 100644
index 0000000..74c2ef0
--- /dev/null
+++ b/src/api/platform/workflow/entity/workflowModel.ts
@@ -0,0 +1,26 @@
+import type { R } from '/#/axios';
+import type { Page } from '/@/api/common/data/entity';
+import type { ProcessDefinitionInfo } from './processDefinitionInfo';
+
+export type WorkflowModelParams = Page & WorkflowModel;
+
+export interface WorkflowModel {
+  id: string;
+  name: string;
+  modelKey: string;
+  description: string;
+  modelComment: string;
+  createTime: string;
+  createById: string;
+  updateTime: string;
+  updateById: string;
+  version: number;
+  modelEditorJson: string;
+  thumbnail: Blob;
+  modelType: number;
+  tenantId: string;
+  processDefinition: ProcessDefinitionInfo;
+  [key:string]: any;
+}
+
+export type WorkflowModelResult = R<WorkflowModel[]>;
diff --git a/src/api/platform/workflow/extension/controller/processCategory.ts b/src/api/platform/workflow/extension/controller/processCategory.ts
new file mode 100644
index 0000000..cd2f7dd
--- /dev/null
+++ b/src/api/platform/workflow/extension/controller/processCategory.ts
@@ -0,0 +1,25 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+ * author wangxiang4
+ */
+import { FormCategory, FormCategoryParams, FormCategoryResult } from '/@/api/platform/workflow/extension/entity/formCategory';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/workflow_proxy/workflow/extension/formCategory/list',
+  get = '/workflow_proxy/workflow/extension/formCategory',
+  save = '/workflow_proxy/workflow/extension/formCategory/save',
+  edit = '/workflow_proxy/workflow/extension/formCategory/update',
+  del = '/workflow_proxy/workflow/extension/formCategory/remove',
+}
+
+export const listFormCategory = (params?: Partial<FormCategoryParams>) => defHttp.get({ url: Api.list, params });
+
+export const addFormCategory = (params: Partial<FormCategory>)=> defHttp.post({ url: Api.save ,data: params });
+
+export const editFormCategory = (params: Partial<FormCategory>) => defHttp.put({ url: Api.edit, data: params });
+
+export const getFormCategory = (id: string) => defHttp.get<FormCategory>({ url: `${Api.get}/${id}` });
+
+export const delFormCategory = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
diff --git a/src/api/platform/workflow/extension/entity/processCategory.ts b/src/api/platform/workflow/extension/entity/processCategory.ts
new file mode 100644
index 0000000..ec1ad15
--- /dev/null
+++ b/src/api/platform/workflow/extension/entity/processCategory.ts
@@ -0,0 +1,10 @@
+import type { R } from '/#/axios';
+import type { TreeEntity, Page } from '/@/api/common/data/entity';
+
+export type FormCategoryParams = Page & FormCategory;
+
+export interface FormCategory extends TreeEntity<FormCategory> {
+  [key: string]: any;
+}
+
+export type FormCategoryResult = R<FormCategory[]>;
diff --git a/src/views/workflow/model/helper/ProcessCategoryModal.vue b/src/views/workflow/model/helper/ProcessCategoryModal.vue
new file mode 100644
index 0000000..8b91f87
--- /dev/null
+++ b/src/views/workflow/model/helper/ProcessCategoryModal.vue
@@ -0,0 +1,60 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="720px"
+    minHeight="100px"
+    @register="registerModal"
+    @ok="handleSubmit"
+  >
+    待实现
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+/**
+ * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+ * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+ * author wangxiang4
+ */
+import { ref, unref } from 'vue';
+import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+
+/** 通用变量统一声明区域 */
+const tag = ref<Nullable<string>>('');
+/** https://v3.cn.vuejs.org/api/options-data.html#emits */
+const emit = defineEmits(['success', 'register']);
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+  // 处理设置数据
+  tag.value = data._tag;
+  const rootTree = { id: '0', name: '顶级分类', children: [] };
+
+  const id = data.record?.id;
+
+  const props: Partial<ModalProps> = { confirmLoading: false };
+  props.title = '设置流程表单分类';
+  // 尾部:设置处理后的最终配置数据
+  setModalProps(props);
+});
+
+/** 处理弹出框提交 */
+async function handleSubmit() {
+  try {
+    // 处理提交之前逻辑
+    setModalProps({ confirmLoading: true });
+    // 采用tag标签区分操作
+    switch (unref(tag)) {
+      case 'add':
+
+        break;
+      case 'edit':
+
+        break;
+    }
+    // 处理提交完成之后逻辑
+    closeModal();
+    emit('success');
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>
diff --git a/src/views/workflow/model/helper/WorkflowModelDesign.vue b/src/views/workflow/model/helper/WorkflowModelDesign.vue
new file mode 100644
index 0000000..0d6f724
--- /dev/null
+++ b/src/views/workflow/model/helper/WorkflowModelDesign.vue
@@ -0,0 +1,116 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    defaultFullscreen
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    @register="registerModal"
+    @visible-change="handleVisibleChange"
+  >
+    <div id="formDesign"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { loadMicroApp, MicroApp } from 'qiankun';
+  import { getSubDefineProps } from '/@/qiankun/state';
+  import { GlStateEnum } from '/@/enums/microAppEnum';
+  import { useMicroAppStore } from '/@/store/modules/microApp';
+  import { apps } from '/@/qiankun/apps';
+  import { addFormDefinitionJson, editFormDefinitionJson, getFormDefinitionJson } from '/@/api/platform/workflow/extension/controller/formDefinitionJson';
+  import { FormDefinitionJson } from '/@/api/platform/workflow/extension/entity/formDefinitionJson';
+  import { FORM_DESIGN_APP_COMPONENTS } from '/@/enums/microAppEnum';
+
+  interface TableState {
+    tag: string;
+    formDesignApp: MicroApp;
+    form: Partial<FormDefinitionJson>;
+  }
+
+  const state = reactive<TableState>({
+    tag: '',
+    formDesignApp: undefined!,
+    form: {
+      id: undefined!,
+      formDefinitionId: undefined!,
+      json: undefined!,
+      version: undefined!,
+      status: undefined!,
+      isPrimary: undefined!
+    },
+  });
+
+  const formDesignProps = {
+    undoRedo: false,
+    style: { height: 'calc(100vh - 160px)' },
+    toolbar: ['clear', 'preview'],
+    options: {}
+  };
+  const emit = defineEmits(['success', 'register']);
+  const microAppStore = useMicroAppStore();
+  const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
+    changeLoading();
+    state.formDesignApp = loadMicroApp(Object.assign({} , apps.find(item => item.name == 'form-design'), {
+      container: '#formDesign',
+      props: {
+        ...getSubDefineProps(),
+        // 表单设计器props
+        [GlStateEnum.FORM_DESIGN_APP_PROPS_KEY]: formDesignProps
+      }
+    }), { sandbox: { experimentalStyleIsolation: true }});
+    state.formDesignApp.mountPromise.then(() => {
+      changeLoading(false);
+    });
+    // 处理清除脏数据
+    state.form = {};
+    formDesignProps.options = {};
+    state.tag = data._tag;
+    const id = data.record?.id;
+    state.form.formDefinitionId = data.record?.formDefinitionId;
+    // 处理设置数据
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    switch (state.tag) {
+      case 'add':
+        props.title = '新增流程表单';
+        break;
+      case 'edit':
+        props.title = '编辑流程表单';
+        state.form = await getFormDefinitionJson(id);
+        state.form?.json && (formDesignProps.options = state.form.json);
+        break;
+    }
+    setModalProps(props);
+  });
+
+  function handleVisibleChange(visible: boolean) {
+    !visible && state.formDesignApp.unmount();
+  }
+
+  /** 处理弹出框提交 */
+  async function handleSubmitForm(status: string) {
+    try {
+      const formDesignApp: Recordable = microAppStore.getFormDesignApp(FORM_DESIGN_APP_COMPONENTS.DESIGN),
+            formRef: Recordable = formDesignApp.getRef().$refs['form-design'];
+      state.form.json =  formRef.getWidgetFormJson();
+      state.form.status = status;
+      state.form.isPrimary = '1';
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (state.tag) {
+        case 'add':
+          await addFormDefinitionJson(state.form);
+          break;
+        case 'edit':
+          await editFormDefinitionJson(state.form);
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
diff --git a/src/views/workflow/model/index.vue b/src/views/workflow/model/index.vue
new file mode 100644
index 0000000..3884eb8
--- /dev/null
+++ b/src/views/workflow/model/index.vue
@@ -0,0 +1,253 @@
+<template>
+  <div>
+    <BasicTable
+      @register="registerTable"
+      @selection-change="handleSelectionChange"
+    >
+      <template #tableTitle>
+        <a-button
+          type="primary"
+          @click="handleModelAdd"
+        >新增</a-button>
+        <a-button
+          danger
+          type="primary"
+          :disabled="state.multiple"
+          @click="handleDel()"
+        >删除</a-button>
+        <a-button
+          type="primary"
+          :disabled="state.single"
+          @click="setProcessCategory"
+        >设置分类</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                icon: 'fa6-regular:pen-to-square',
+                onClick: handleDesign.bind(null, record)
+              },
+              {
+                label: '发布',
+                icon: 'ant-design:delete-outlined',
+                onClick: handleDeploy.bind(null, record)
+              }]"
+            :dropDownActions="[
+              {
+                label: '激活',
+                icon: 'ant-design:delete-outlined',
+                ifShow: record.processDefinition?.suspend===true,
+                onClick: handleProcessActive.bind(null, record)
+              },
+              {
+                label: '挂起',
+                icon: 'ant-design:delete-outlined',
+                ifShow: record.processDefinition?.suspend===false,
+                onClick: handleProcessSuspend.bind(null, record)
+              },
+              {
+                label: '导出',
+                icon: 'ant-design:delete-outlined',
+                onClick: handleExportXml.bind(null, record)
+              },
+              {
+                label: '复制',
+                icon: 'ant-design:delete-outlined',
+                onClick: handleCopy.bind(null, record)
+              },
+              {
+                label: '删除',
+                icon: 'ant-design:delete-outlined',
+                onClick: handleDel.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <WorkflowModelDesign @register="registerWorkflowModelDesign" @success="handleRefreshTable"/>
+  </div>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent, reactive, toRaw } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { listModel, delModel, copyModel, getModel, bpmnXmlDownload, deployModel } from '/@/api/platform/workflow/controller/model';
+  import { setProcessInstanceStatus } from '/@/api/platform/workflow/controller/process';
+  import { useModal } from '/@/components/Modal';
+  import { columns, searchFormSchema } from './model.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import WorkflowModelDesign from './helper/WorkflowModelDesign.vue';
+
+  interface TableState {
+    ids: string[];
+    single: boolean;
+    multiple: boolean;
+  }
+  export default defineComponent({
+    name: 'WorkflowModel',
+    components: {
+      BasicTable,
+      TableAction,
+      WorkflowModelDesign,
+    },
+    setup() {
+      const state = reactive<TableState>({
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+      });
+      const { createConfirm, createMessage } = useMessage();
+      const [registerWorkflowModelDesign , { openModal: openWorkflowModelDesign }] = useModal();
+      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+        api: listModel,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3
+        },
+        rowSelection: { type: 'checkbox' },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        },
+        handleSearchInfoFn: () => clearSelectedRowKeys()
+      });
+
+      function handleSelectionChange(selection?: Recordable) {
+        const rowSelection = toRaw(selection?.keys) || [];
+        state.ids = rowSelection;
+        state.single = rowSelection.length != 1;
+        state.multiple = !rowSelection.length;
+      }
+
+      function  setProcessCategory() {
+
+      }
+
+      function  handleModelAdd() {
+        openWorkflowModelDesign(true,{ _tag: 'add' });
+      }
+
+      function  handleDesign(record?: Recordable) {
+        record = record || { id: toRaw(state.ids) };
+        openWorkflowModelDesign(true, { _tag: 'edit', record });
+      }
+
+      function handleDeploy(record?: Recordable) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确认要发布流程吗？',
+          onOk: async () => {
+            await deployModel(record?.id, record?.category || '未分类');
+            createMessage.success('发布成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      function handleProcessActive(record?: Recordable) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确认要激活该流程吗?',
+          onOk: async () => {
+            await setProcessInstanceStatus(record?.modelKey, 'active');
+            createMessage.success('激活成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      function handleProcessSuspend(record?: Recordable) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确认要挂起该流程吗?',
+          onOk: async () => {
+            await setProcessInstanceStatus(record?.modelKey, 'suspend');
+            createMessage.success('挂起成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      function handleExportXml(record?: Recordable) {
+        bpmnXmlDownload(record?.id);
+      }
+
+      function handleCopy(record?: Recordable) {
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确定复制该流程吗？',
+          onOk: async () => {
+            await copyModel(record?.id);
+            createMessage.success('复制成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      async function handleDel(record?: Recordable) {
+        const ids = record?.id || toRaw(state.ids);
+        createConfirm({
+          iconType: 'warning',
+          title: '警告',
+          content: '确定删除该流程吗?删除流程会级联删除已经存在的实例与历史数据，且不可恢复，请谨慎操作!',
+          onOk: async () => {
+            await delModel(ids);
+            createMessage.success('删除成功!');
+            handleRefreshTable();
+          }
+        });
+      }
+
+      function handleRefreshTable() {
+        clearSelectedRowKeys();
+        reload();
+      }
+
+      return {
+        state,
+        registerTable,
+        handleDel,
+        handleSelectionChange,
+        handleRefreshTable,
+        registerWorkflowModelDesign,
+        setProcessCategory,
+        handleModelAdd,
+        handleDesign,
+        handleExportXml,
+        handleCopy,
+        handleProcessActive,
+        handleProcessSuspend,
+        handleDeploy
+      };
+    }
+  });
+</script>
diff --git a/src/views/workflow/model/model.data.ts b/src/views/workflow/model/model.data.ts
new file mode 100644
index 0000000..c265f35
--- /dev/null
+++ b/src/views/workflow/model/model.data.ts
@@ -0,0 +1,64 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '流程名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '流程KEY',
+    dataIndex: ['formCategory', 'name'],
+  },
+  {
+    title: '分类',
+    dataIndex: ['formDefinitionJson', 'version'],
+    width: 200,
+    customRender: ({ record }) => {
+      return record.formDefinitionJson?.version ?
+        h(Tag, {color: 'success'}, () => record.formDefinitionJson?.version):
+        h(Tag, {color: 'red'}, () => '暂无版本号');
+    }
+  },
+  {
+    title: '流程版本',
+    dataIndex:  ['formDefinitionJson', 'status'],
+    width: 200,
+    customRender: ({ record }) => {
+      return  record.formDefinitionJson?.status == '1' ?
+        h(Tag, { color: 'success' }, () => '已发布'):
+        h(Tag, { color: 'red' }, () => '未发布');
+    }
+  },
+  {
+    title: '流程状态',
+    dataIndex: ['formDefinitionJson', 'isPrimary'],
+    width: 200,
+    customRender: ({ record }) => {
+      return  record.formDefinitionJson?.isPrimary == '1' ?
+        h(Tag, { color: 'success' }, () => '主版本'):
+        h(Tag, { color: 'red' }, () => '非主版本');
+    }
+  },
+  {
+    title: '更新时间',
+    dataIndex: ['formDefinitionJson', 'isPrimary'],
+    width: 200,
+    customRender: ({ record }) => {
+      return  record.formDefinitionJson?.isPrimary == '1' ?
+        h(Tag, { color: 'success' }, () => '主版本'):
+        h(Tag, { color: 'red' }, () => '非主版本');
+    }
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '流程名称',
+    field: 'categoryId',
+    slot: 'categoryId',
+    component: 'Input',
+    colProps: { span: 8 }
+  }
+];