diff --git a/bk.config.js b/bk.config.js
index 98475e05c..cc0d0916e 100644
--- a/bk.config.js
+++ b/bk.config.js
@@ -45,7 +45,8 @@ module.exports = {
                     VueI18n: path.resolve(__dirname, './node_modules/vue-i18n')
                 },
                 fallback: {
-                    buffer: require.resolve('buffer')
+                    buffer: require.resolve('buffer'),
+                    vm: require.resolve('vm-browserify')
                 }
             },
             devServer: {
diff --git a/lib/client/src/api/pureAxios.js b/lib/client/src/api/pureAxios.js
index c44412bf7..5a16e3b2b 100644
--- a/lib/client/src/api/pureAxios.js
+++ b/lib/client/src/api/pureAxios.js
@@ -105,7 +105,11 @@ async function getPromise (method, url, data, userConfig = {}) {
         try {
             const response = await axiosRequest
             Object.assign(config, response.config || {})
-            handleResponse({ config, response, resolve, reject })
+            if (Object.prototype.hasOwnProperty.call(response, 'code') && response.code !== 0) {
+                reject(response)
+            } else {
+                handleResponse({ config, response, resolve, reject })
+            }
         } catch (error) {
             Object.assign(config, error.config)
             reject(error)
diff --git a/lib/client/src/common/ai.js b/lib/client/src/common/ai.js
index 00c254d36..d5b01f249 100644
--- a/lib/client/src/common/ai.js
+++ b/lib/client/src/common/ai.js
@@ -56,8 +56,8 @@ export class Ai {
         this.pushPrompt(this.systemPrompt, 'system')
     }
 
-    receiveMessage (message) {
-        this.content += message
+    receiveMessage (message, cover) {
+        this.content = cover ? message : this.content + message
         const cmdIndex = this.content.indexOf('``')
         const aiMessage = cmdIndex > 0 ? this.content.slice(0, cmdIndex).trim() : this.content
         // 触发消息更新
@@ -65,6 +65,10 @@ export class Ai {
     }
 
     async endReceiveMessage () {
+        if (!this.content.trim()) {
+            this.handleApiError('模型调用失败，返回空文本')
+            return
+        }
         this.pushPrompt(this.content, 'assistant')
         // 触发指令
         const cmdIndex = this.content.indexOf('``')
@@ -127,27 +131,44 @@ export class Ai {
             while (true) {
                 try {
                     const { value, done } = await reader.read()
-                    if (done) break
-                    const values = (temp + value.toString()).split(/(?<=})\s*(?={"result")/)
+                    // 接口异常处理
+                    if (!response.ok) {
+                        this.handleApiError(value || response.statusText)
+                        break
+                    }
+                    // 接口完成
+                    if (done) {
+                        this.endReceiveMessage()
+                        break
+                    }
+                    const values = (temp + value.toString()).split('\n')
                     values.forEach((value) => {
-                        const item = value.trim()
+                        const item = value.replace('data:', '').trim()
                         if (isJSON(item)) {
                             const {
+                                event,
+                                content,
+                                cover,
                                 result,
-                                data,
                                 message
                             } = JSON.parse(item)
-                            if (result === true) {
-                                const choice = data?.result?.choices?.[0]
-                                if (!choice) {
-                                    this.handleApiError('模型调用失败，返回对象为空')
-                                } else if (choice.finish_reason) {
-                                    this.endReceiveMessage()
-                                } else if (choice.delta.content) {
-                                    this.receiveMessage(choice.delta.content)
-                                }
-                            } else {
+
+                            // 业务错误处理
+                            if (result === false || response.status !== 200) {
                                 this.handleApiError(message || '模型调用失败')
+                                return
+                            }
+
+                            switch (event) {
+                                case 'text':
+                                    this.receiveMessage(content, cover)
+                                    break
+                                case 'done':
+                                    this.endReceiveMessage()
+                                    break
+                                case 'error':
+                                    this.handleApiError(message || '模型调用失败')
+                                    break
                             }
                             temp = ''
                         } else if (item) {
@@ -182,7 +203,7 @@ export class Ai {
                 if (!choice) {
                     this.handleApiError('模型调用失败，返回对象为空')
                 } else {
-                    this.receiveMessage(choice.message.content)
+                    this.receiveMessage(choice.delta.content)
                     this.endReceiveMessage()
                 }
             } else {
diff --git a/lib/client/src/common/util.js b/lib/client/src/common/util.js
index 9269ddaa6..cb42167b2 100644
--- a/lib/client/src/common/util.js
+++ b/lib/client/src/common/util.js
@@ -11,6 +11,7 @@
 
 import { messageSuccess } from '@/common/bkmagic'
 import domToImage from './dom-to-image'
+import DOMPurify from 'dompurify'
 import Vue from 'vue'
 import LC from '@/element-materials/core'
 import store from '@/store'
@@ -1025,3 +1026,8 @@ export const isJSON = (str) => {
         return false
     }
 }
+
+export const filterImgSrc = (src) => {
+    src?.replaceAll('console', '')?.replaceAll('logout', '')
+    return DOMPurify.sanitize(src)
+}
diff --git a/lib/client/src/components/methods/forms/form-items/children/debug/param.vue b/lib/client/src/components/methods/forms/form-items/children/debug/param.vue
index e3e3d3578..f98838c01 100644
--- a/lib/client/src/components/methods/forms/form-items/children/debug/param.vue
+++ b/lib/client/src/components/methods/forms/form-items/children/debug/param.vue
@@ -98,7 +98,8 @@
                             break
                         case 'array':
                         case 'object':
-                            renderVal = getValueFromString(val)
+                            // renderVal = getValueFromString(val)
+                            renderVal = val
                             break
                         case 'number':
                             renderVal = Number(val)
diff --git a/lib/client/src/components/project/create-page-dialog.vue b/lib/client/src/components/project/create-page-dialog.vue
index 226591eeb..1a616bd2a 100644
--- a/lib/client/src/components/project/create-page-dialog.vue
+++ b/lib/client/src/components/project/create-page-dialog.vue
@@ -112,6 +112,10 @@
                 type: String,
                 default: ''
             },
+            useCustomSave: {
+                type: Boolean,
+                default: false
+            },
             // form和flow的数据管理页需要填写默认的pageCode和pageName，带上formId或flowId
             initPageData: {
                 type: Object,
@@ -249,7 +253,7 @@
             },
             handleConfirmClick () {
                 // 判断是不是流程页面或流程管理页面
-                if (['FLOW', 'FLOW_MANAGE'].includes(this.nocodeType)) {
+                if (this.useCustomSave || ['FLOW', 'FLOW_MANAGE'].includes(this.nocodeType)) {
                     this.$emit('save')
                 } else {
                     this.save()
@@ -284,12 +288,7 @@
                         content.push(JSON.parse(template.content))
                         templateFormData = { previewImg: template.previewImg, content: JSON.stringify(content) }
                     }
-                    
-                    const formData = {
-                        pageName: this.formData.pageName,
-                        pageCode: this.formData.pageCode
-                    }
-                    
+
                     const payload = {
                         data: {
                             pageData: Object.assign({}, this.formData, templateFormData),
@@ -307,7 +306,7 @@
                     const res = await this.$store.dispatch('page/create', payload)
                     if (res) {
                         // 页面不是流程页面或流程管理页面
-                        if (!['FLOW', 'FLOW_MANAGE'].includes(this.nocodeType)) {
+                        if (!this.useCustomSave && !['FLOW', 'FLOW_MANAGE'].includes(this.nocodeType)) {
                             this.$bkMessage({
                                 theme: 'success',
                                 message: this.$t('新建页面成功')
diff --git a/lib/client/src/components/project/page-from-template.vue b/lib/client/src/components/project/page-from-template.vue
index 523f21a0c..63081ee6c 100644
--- a/lib/client/src/components/project/page-from-template.vue
+++ b/lib/client/src/components/project/page-from-template.vue
@@ -73,6 +73,7 @@
     import PreivewErrImg from '@/images/preview-error.png'
     import { PAGE_TEMPLATE_TYPE } from '@/common/constant'
     import TemplateEditDialog from '@/views/project/template-manage/components/template-edit-dialog'
+    import { filterImgSrc } from '@/common/util'
 
     export default {
         name: 'page-from-template',
@@ -160,7 +161,7 @@
             },
             getPreviewImg (previewImg) {
                 if (previewImg && previewImg.length > 20) {
-                    return previewImg
+                    return filterImgSrc(previewImg)
                 }
                 return PreivewErrImg
             },
diff --git a/lib/client/src/components/render/pc/render-component.js b/lib/client/src/components/render/pc/render-component.js
index aa2e64ac5..473b1f8a5 100644
--- a/lib/client/src/components/render/pc/render-component.js
+++ b/lib/client/src/components/render/pc/render-component.js
@@ -19,6 +19,7 @@ import WidgetVanPicker from './widget/van-picker'
 import WidgetFormContainer from './widget/form-container'
 import WidgetDataManageContainer from './widget/data-manage-container/form-data-manage/edit/index'
 import WidgetFlowManageContainer from './widget/flow-manage-container/edit/index'
+import WidgetFlowWorkbenchContainer from './widget/flow-workbench-container/edit/index'
 import WidgetVanTab from './widget/van-tab'
 import BkCharts from './widget/bk-charts/bk-charts'
 import Chart from './widget/chart/chart'
@@ -53,6 +54,7 @@ export default {
         WidgetFormContainer,
         WidgetDataManageContainer,
         WidgetFlowManageContainer,
+        WidgetFlowWorkbenchContainer,
         WidgetVanTab,
         BkLuckyCanvas
     },
diff --git a/lib/client/src/components/render/pc/tools/lesscode-tool/hooks/use-check-form-engine.js b/lib/client/src/components/render/pc/tools/lesscode-tool/hooks/use-check-form-engine.js
index eb6ddb391..6a6b46fda 100644
--- a/lib/client/src/components/render/pc/tools/lesscode-tool/hooks/use-check-form-engine.js
+++ b/lib/client/src/components/render/pc/tools/lesscode-tool/hooks/use-check-form-engine.js
@@ -1,3 +1,3 @@
 export default function (type) {
-    return ['widget-form-container', 'widget-data-manage-container'].includes(type)
+    return ['widget-form-container', 'widget-data-manage-container', 'widget-flow-manage-container', 'widget-flow-workbench-container'].includes(type)
 }
diff --git a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/edit/components/table/index.postcss b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/edit/components/table/index.postcss
index f24612b54..a2b5d5465 100644
--- a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/edit/components/table/index.postcss
+++ b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/edit/components/table/index.postcss
@@ -3,9 +3,6 @@
 
     /* v3 table 样式 */
     .bk-lesscode-table {
-        .bk-lesscode-table-head table th.column_fixed {
-            background: inherit;
-        }
         .bk-lesscode-table-body {
             overflow: visible;
         }
diff --git a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/components/table/index.js b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/components/table/index.js
index d0c64afe3..eaf6255ec 100644
--- a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/components/table/index.js
+++ b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/components/table/index.js
@@ -181,9 +181,10 @@ export default {
         return h({
             component: 'bk-table',
             props: {
+                border: framework === 'vue2' ? false : ['outer', 'row'],
                 data: this.tableData,
                 pagination: this.pagination,
-                remotePagination: true,
+                remotePagination: true
             },
             on: {
                 'page-change': (val) => {
@@ -193,6 +194,7 @@ export default {
                     self.handlePageChange(val)
                 },
                 'page-limit-change': (val) => {
+                    self.pagination.current = 1
                     self.handlePageLimitChange(val)
                 }
             },
diff --git a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.js b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.js
index 50f5ac31d..87474ce3c 100644
--- a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.js
+++ b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.js
@@ -69,7 +69,7 @@ export default {
             component: 'div',
             class: 'widget-data-manage-container',
             children: this.loading ? null : [
-                h({
+                (this.buttons.length > 0 || this.filters.length > 0) ? h({
                     component: 'div',
                     class: 'data-manage-operate-area',
                     children: [
@@ -97,7 +97,7 @@ export default {
                             ]
                         }) : null
                     ]
-                }),
+                }) : null,
                 (this.hideFilters || this.filters.length === 0) ? null : h({
                     component: filters,
                     props: {
diff --git a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.postcss b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.postcss
index 69560815a..6cc449154 100644
--- a/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.postcss
+++ b/lib/client/src/components/render/pc/widget/data-manage-container/form-data-manage/preview/index.postcss
@@ -27,4 +27,10 @@
             color: #3a84ff;
         }
     }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
 }
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss b/lib/client/src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss
index 217443933..c5953efda 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/edit/flow-manage-container.postcss
@@ -4,6 +4,10 @@
     background: #FFFFFF;
     border: 1px dashed #CCCCCC;
     overflow: hidden;
+    .flow-manage-title {
+        font-size: 16px;
+        color: #313238;
+    }
     &.empty{
         padding: 24px 32px;
         background: #F9F8FC;
@@ -28,7 +32,8 @@
             pointer-events: auto !important;
         }
     }
-    .process-render {
+    .process-render * {
+        pointer-events: auto !important;
         .filter-render-wrapper {
             padding: 16px 24px;
             background: #FAFBFC;
@@ -120,4 +125,10 @@
             }
         }
     }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
 }
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js b/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js
index 4026edfe5..0de18a064 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/edit/index.js
@@ -1,10 +1,11 @@
 import { h } from 'bk-lesscode-render'
 import cloneDeep from 'lodash.clonedeep'
+import http from '@/api/pureAxios'
+import LC from '@/element-materials/core'
+import processOverview from '../preview/components/process-overview'
 import formDataTable from '../../data-manage-container/form-data-manage/edit/components/table'
 import tableFilters from '../../data-manage-container/form-data-manage/edit/components/table-filters'
-import LC from '@/element-materials/core'
 import formDataButtons from '../../data-manage-container/form-data-manage/edit/components/form-data-buttons'
-import http from '@/api/pureAxios'
 import { FORM_SYS_FIELD, FIELDS_NOT_DISPLAYED_IN_TABLE } from '../../data-manage-container/form-data-manage/constants'
 import './flow-manage-container.postcss'
 
@@ -20,6 +21,7 @@ export default {
     data () {
         return {
             loading: false,
+            tplName: '',
             activeTab: 'process',
             nodeDataList: [], // 节点数据节点列表
             activeNode: '',
@@ -86,6 +88,8 @@ export default {
             // 将 currentProps 转换为一个 Map，以便快速查找
             const currentPropsMap = new Map(currentProps.map(node => [node.id, node]))
 
+            this.tplName = data.name
+
             // 将后端返回的节点数据与当前组件的 props 数据进行合并，以便能够正确的展示人工节点的配置信息
             this.nodeDataList = manualNodes.map(node => {
                 const currentNodeProps = currentPropsMap.get(node.id) || {}
@@ -102,7 +106,7 @@ export default {
                     ...currentNodeProps
                 }
             })
-            
+
             // 如果当前组件的 props 数据中没有人工节点数据，则将第一个节点的 id 设置为 activeNode
             this.activeNode = this.nodeDataList[0]?.id || ''
             this.loading = false
@@ -229,91 +233,16 @@ export default {
             })
         }
 
-        const filterFormItem = [
-            { label: this.$t('创建人'), component: 'bk-input', placeholder: this.$t('请输入创建人') },
-            { label: this.$t('创建时间'), component: 'bk-input', placeholder: this.$t('请输入创建时间') },
-            { label: this.$t('状态'), component: 'bk-select', placeholder: this.$t('请选择状态') }
-        ]
-
         const processRender = () =>
             h({
                 component: 'div',
                 class: 'process-render',
                 children: [
                     h({
-                        component: 'div',
-                        class: 'filter-render-wrapper',
-                        children: [
-                            h({
-                                component: 'bk-form',
-                                props: {
-                                    'form-type': 'vertical'
-                                },
-                                children: filterFormItem.map((item, index) =>
-                                    h({
-                                        component: 'bk-form-item',
-                                        props: {
-                                            label: item.label,
-                                            extCls: index === 0 ? '' : 'ml10',
-                                            class: index === 0 ? '' : 'ml10'
-                                        },
-                                        children: [
-                                            h({
-                                                component: item.component,
-                                                props: {
-                                                    placeholder: item.placeholder
-                                                }
-                                            })
-                                        ]
-                                    })
-                                )
-                            }),
-                            h({
-                                component: 'div',
-                                class: 'filter-btn-area mt20',
-                                children: [
-                                    h({
-                                        component: 'bk-button',
-                                        props: {
-                                            theme: 'primary'
-                                        },
-                                        children: [this.$t('查询')]
-                                    }),
-                                    h({
-                                        component: 'bk-button',
-                                        class: 'ml10',
-                                        props: {
-                                            theme: 'default'
-                                        },
-                                        children: [this.$t('重置')]
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    h({
-                        component: 'bk-table',
-                        class: 'mt20',
+                        component: processOverview,
                         props: {
-                            data: []
-                        },
-                        children: [
-                            ...filterFormItem.map((item, index) =>
-                                h({
-                                    component: 'bk-table-column',
-                                    props: {
-                                        label: item.label,
-                                        index: index
-                                    }
-                                })
-                            ),
-                            h({
-                                component: 'bk-table-column',
-                                props: {
-                                    label: self.$t('操作')
-                                }
-                            })
-                        ]
+                            id: self.propsData.id
+                        }
                     })
                 ]
             })
@@ -361,6 +290,11 @@ export default {
 
         const getElements = () => {
             return [
+                h({
+                    component: 'div',
+                    class: 'flow-manage-title',
+                    children: [`${this.tplName}流程管理`]
+                }),
                 h({
                     component: 'bk-tab',
                     props: {
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.js b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.js
index 543bd6a3d..b899da150 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.js
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.js
@@ -8,14 +8,21 @@ import './process-overview.postcss'
 
 export default {
     props: {
+        // 是否为流程工作台容器，流程工作台容器展示项目下所有任务
+        isWorkbench: {
+            type: Boolean,
+            default: false
+        },
+        // 指定流程模板，流程管理容器需要
         id: {
             type: String,
-            required: true
+            required: false
         }
     },
     data () {
         return {
             formData: {
+                tplName: '',
                 createUser: '',
                 time: [],
                 id: ''
@@ -56,7 +63,9 @@ export default {
                 }
             })
             this.loading = true
-            const res = await http.get(`/flow/tpl/${this.id}/task/list`, { params: {
+
+            const url = this.isWorkbench ? '/flow/task/list' : `/flow/tpl/${this.id}/task/list`
+            const res = await http.get(url, { params: {
                 page: this.pagination.current,
                 pageSize: this.pagination.limit,
                 ...query
@@ -72,12 +81,12 @@ export default {
 
         const filterFormItem = [
             {
-                label: this.$t('id'),
+                label: this.$t('任务ID'),
                 component: 'bk-input',
                 property: 'id',
                 name: 'id',
                 props: {
-                    placeholder: this.$t('请输入id'),
+                    placeholder: this.$t('请输入任务ID'),
                     ...(framework === 'vue3' ? { modelValue: this.formData.id } : { value: this.formData.id })
                 },
                 on: framework === 'vue3' ? {
@@ -96,7 +105,7 @@ export default {
                 property: 'createUser',
                 name: 'createUser',
                 props: {
-                    placeholder: this.$t('请输入创建时间'),
+                    placeholder: this.$t('请输入创建人'),
                     ...(framework === 'vue3' ? { modelValue: this.formData.createUser } : { value: this.formData.createUser })
                 },
                 on: framework === 'vue3' ? {
@@ -134,6 +143,42 @@ export default {
                     }
                 }
             },
+            {
+                label: this.$t('执行人'),
+                component: 'bk-input',
+                property: 'executor',
+                name: 'createUser',
+                props: {},
+                on: framework === 'vue3' ? {
+                    'update:modelValue': (value) => {
+                        self.formData.createUser = value
+                    }
+                } : {
+                    'input': (value) => {
+                        self.formData.createUser = value
+                    }
+                }
+            },
+            {
+                label: this.$t('执行时间'),
+                component: 'bk-date-picker',
+                property: 'startTime',
+                name: 'time',
+                props: {},
+                on: {
+                    'change': (value) => {
+                        self.formData.time = value
+                    }
+                },
+                scopedSlots: {
+                    default: ({ row }) => {
+                        return h({
+                            component: 'div',
+                            children: [dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')]
+                        })
+                    }
+                }
+            },
             {
                 label: this.$t('状态'),
                 component: 'bk-select',
@@ -154,7 +199,7 @@ export default {
                 },
                 scopedSlots: {
                     default: ({ row }) => {
-                        return h({
+                        return row.status ? h({
                             component: 'div',
                             class: 'flow-status-item',
                             children: [h({
@@ -165,7 +210,7 @@ export default {
                                 class: 'flow-status-text',
                                 children: [statusMap[row.status]]
                             })]
-                        })
+                        }) : '--'
                     }
                 },
                 children: self.statusList.map(status => (h({
@@ -180,6 +225,28 @@ export default {
             }
         ]
 
+        if (this.isWorkbench) {
+            filterFormItem.splice(1, 0, {
+                label: this.$t('流程'),
+                component: 'bk-input',
+                property: 'tplName',
+                name: 'tpl.name',
+                props: {
+                    placeholder: this.$t('请输入流程名称'),
+                    ...(framework === 'vue3' ? { modelValue: this.formData.tplName } : { value: this.formData.tplName })
+                },
+                on: framework === 'vue3' ? {
+                    'update:modelValue': (value) => {
+                        self.formData.tplName = value
+                    }
+                } : {
+                    'input': (value) => {
+                        self.formData.tplName = value
+                    }
+                }
+            })
+        }
+
         return h({
             component: 'div',
             class: 'process-render',
@@ -194,30 +261,26 @@ export default {
                                 'form-type': 'vertical',
                                 'model': this.formData
                             },
-                            children: filterFormItem.map((item, index) =>
-                                item.property === 'status'
-                                    ? null
-                                    : h({
-                                        component: 'bk-form-item',
-                                        props: {
-                                            label: item.label,
-                                            extCls: index === 0 ? '' : 'ml10',
-                                            class: index === 0 ? '' : 'ml10',
-                                            property: item.property
+                            children: filterFormItem.filter((item) => !['executor', 'startTime', 'status'].includes(item.property)).map((item, index) => h({
+                                component: 'bk-form-item',
+                                props: {
+                                    label: item.label,
+                                    extCls: index === 0 ? '' : 'ml10',
+                                    class: index === 0 ? '' : 'ml10',
+                                    property: item.property
+                                },
+                                children: [
+                                    h({
+                                        component: item.component,
+                                        props: item.props,
+                                        style: {
+                                            width: '100%'
                                         },
-                                        children: [
-                                            h({
-                                                component: item.component,
-                                                props: item.props,
-                                                style: {
-                                                    width: '100%'
-                                                },
-                                                children: item.children ? item.children : [],
-                                                on: item.on
-                                            })
-                                        ]
+                                        children: item.children ? item.children : [],
+                                        on: item.on
                                     })
-                            )
+                                ]
+                            }))
                         }),
                         h({
                             component: 'div',
@@ -231,6 +294,7 @@ export default {
                                     children: [this.$t('查询')],
                                     on: {
                                         click: () => {
+                                            self.pagination.current = 1
                                             self.getTableData()
                                         }
                                     }
@@ -245,10 +309,12 @@ export default {
                                     on: {
                                         click: () => {
                                             self.formData = {
+                                                tplName: '',
                                                 createUser: '',
                                                 time: [],
                                                 id: ''
                                             }
+                                            self.pagination.current = 1
                                             self.getTableData()
                                         }
                                     }
@@ -261,6 +327,7 @@ export default {
                     component: 'bk-table',
                     class: 'mt20',
                     props: {
+                        border: framework === 'vue2' ? false : ['outer'],
                         data: self.tableData,
                         pagination: self.pagination,
                         remotePagination: true
@@ -271,6 +338,7 @@ export default {
                             self.getTableData()
                         },
                         'page-limit-change': (limit) => {
+                            self.pagination.current = 1
                             self.pagination.limit = limit
                             self.getTableData()
                         }
@@ -280,6 +348,7 @@ export default {
                             self.getTableData()
                         },
                         'page-limit-change': (limit) => {
+                            self.pagination.current = 1
                             self.pagination.limit = limit
                             self.getTableData()
                         }
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss
index 4bebedf61..0b20a1138 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/components/process-overview.postcss
@@ -1,4 +1,6 @@
 .process-render {
+    background: #ffffff;
+
     .filter-render-wrapper {
         padding: 16px 24px;
         background: #FAFBFC;
@@ -9,6 +11,7 @@
         .bk-form-item, .bk-lesscode-form-item {
             flex: 1;
             margin-top: 0 !important;
+            margin-bottom: 0 !important;
         }
     }
     .edit-text {
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js
index 76113959e..d55d87387 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.js
@@ -22,6 +22,7 @@ export default {
     data () {
         return {
             loading: false,
+            tplName: '',
             activeTab: 'process',
             activeNode: '',
             nodeDataList: []
@@ -32,7 +33,7 @@ export default {
             return this.nodeDataList.find(item => item.id === this.activeNode)
         },
         allFields () {
-            const list = this.currentNodeTab?.fields.map(item => Object.assign({}, item, { system: false }))
+            const list = this.currentNodeTab?.fields.map(item => Object.assign({}, item, { system: false })) || []
             FORM_SYS_FIELD.forEach(item => {
                 const { id, name, key, type } = item
                 list.push({ id, type, system: true, configure: { key, name } })
@@ -84,7 +85,8 @@ export default {
                     ...currentNodeProps
                 }
             })
-                    
+
+            this.tplName = data.name
             // 如果当前组件的 props 数据中没有人工节点数据，则将第一个节点的 id 设置为 activeNode
             if (this.nodeDataList) {
                 if (!this.activeNode) {
@@ -165,9 +167,9 @@ export default {
         const renderFilters = () => h({
             component: filters,
             props: {
-                fields: this.allFields,
-                filters: this.currentNodeTab?.filters,
-                queryData: self.currentNodeTab.queryData
+                fields: self.allFields,
+                filters: self.currentNodeTab?.filters,
+                queryData: self.currentNodeTab?.queryData
             },
             on: {
                 query: (val) => {
@@ -180,10 +182,10 @@ export default {
             component: table,
             props: {
                 fields: this.allFields,
-                queryData: self.currentNodeTab.queryData,
-                tableName: self.currentNodeTab.tableName,
-                tableRowActions: self.currentNodeTab.tableRowActions,
-                tableColsExclude: self.currentNodeTab.tableColsExclude
+                queryData: self.currentNodeTab?.queryData,
+                tableName: self.currentNodeTab?.tableName,
+                tableRowActions: self.currentNodeTab?.tableRowActions,
+                tableColsExclude: self.currentNodeTab?.tableColsExclude
             }
         })
 
@@ -234,7 +236,7 @@ export default {
                                     )
                             }),
                             renderOperateArea(),
-                            this.currentNodeTab?.hideFilters ? '' : renderFilters(),
+                            (this.currentNodeTab && !this.currentNodeTab.hideFilters && this.currentNodeTab.filters.length > 0) ? renderFilters() : '',
                             this.currentNodeTab?.tableName ? renderTable() : ''
                         ]
                     })
@@ -243,6 +245,11 @@ export default {
 
         const getElements = () => {
             return [
+                h({
+                    component: 'div',
+                    class: 'flow-manage-title',
+                    children: [`${self.tplName}流程管理`]
+                }),
                 h({
                     component: 'bk-tab',
                     props: {
diff --git a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss
index eec557833..1d01a4fbb 100644
--- a/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss
+++ b/lib/client/src/components/render/pc/widget/flow-manage-container/preview/index.postcss
@@ -1,58 +1,66 @@
-.node-tab-wrapper {
-    .bk-tab, .bk-lesscode-tab {
-        padding: 4px;
-        max-width: calc(100% - 250px);
-        background: #f0f1f5;
-        border-radius: 2px;
-        margin-bottom: 20px;
-        .bk-tab-section {
-            display: none;
-        }
-        .bk-tab-header {
+.flow-manage-wrapper {
+    padding: 20px 24px;
+    background: #ffffff;
+    .flow-manage-title {
+        font-size: 16px;
+        color: #313238;
+    }
+    .node-tab-wrapper {
+        .bk-tab, .bk-lesscode-tab {
+            padding: 4px;
+            max-width: calc(100% - 250px);
             background: #f0f1f5;
-            background-image: none !important;
-            height: 25px !important;
-            border: none;
-            .bk-tab-label-list {
-                height: 100% !important;
-                display: flex;
-                align-items: center;
-
+            border-radius: 2px;
+            margin-bottom: 20px;
+            .bk-tab-section {
+                display: none;
             }
-            .bk-tab-label {
-                font-size: 12px;
+            .bk-tab-header {
+                background: #f0f1f5;
+                background-image: none !important;
+                height: 25px !important;
+                border: none;
+                .bk-tab-label-list {
+                    height: 100% !important;
+                    display: flex;
+                    align-items: center;
+
+                }
+                .bk-tab-label {
+                    font-size: 12px;
+                }
+                .bk-tab-label-item {
+                    border: none !important;
+                    line-height: 25px;
+                    font-size: 12px;
+                }
             }
-            .bk-tab-label-item {
-                border: none !important;
-                line-height: 25px;
-                font-size: 12px;
+            .bk-tab-label-wrapper {
+                .bk-tab-scroll-controller {
+                    height: 33px !important;
+                    background: #f5f7fa;
+                    color: #979ba5;
+                    &:hover {
+                        background: #eaebf0;
+                        color: #63656e;
+                    }
+                }
             }
         }
-        .bk-tab-label-wrapper {
-            .bk-tab-scroll-controller {
-                height: 33px !important;
-                background: #f5f7fa;
-                color: #979ba5;
-                &:hover {
-                    background: #eaebf0;
-                    color: #63656e;
+        .bk-lesscode-tab {
+            .bk-lesscode-tab-header {
+                line-height: 20px !important;
+                padding: 4px !important;
+                border-bottom: 0px !important;
+                font-size: 12px;
+                .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
+                    border-radius: 2px 2px 0 0 ;
                 }
             }
-        }
-    }
-    .bk-lesscode-tab {
-        .bk-lesscode-tab-header {
-            line-height: 20px !important;
-            padding: 4px !important;
-            border-bottom: 0px !important;
-            font-size: 12px;
-            .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
-                border-radius: 2px 2px 0 0 ;
+            .bk-lesscode-tab-content {
+                display: none;
             }
         }
-        .bk-lesscode-tab-content {
-            display: none;
-        }
     }
     .header-operate-area {
         position: relative;
@@ -79,4 +87,10 @@
             color: #3a84ff;
         }
     }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
 }
\ No newline at end of file
diff --git a/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.js b/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.js
new file mode 100644
index 000000000..e0887d8bb
--- /dev/null
+++ b/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.js
@@ -0,0 +1,53 @@
+import { h } from 'bk-lesscode-render'
+import LC from '@/element-materials/core'
+import processOverview from '../../flow-manage-container/preview/components/process-overview'
+import './index.postcss'
+
+export default {
+    name: 'widget-flow-workbench-container-edit',
+    inheritAttrs: false,
+    props: {
+        componentData: {
+            type: Object,
+            required: true
+        }
+    },
+    data () {
+        return {}
+    },
+    mounted () {
+        LC.addEventListener('update', this.updateCallBack)
+    },
+    beforeDestroy () {
+        LC.removeEventListener('update', this.updateCallBack)
+    },
+    methods: {
+        updateCallBack (event) {
+            if (event.target.componentId === this.componentData.componentId) {
+                this.$forceUpdate()
+            }
+        }
+    },
+    render (render) {
+        h.init(render)
+
+        return h({
+            component: 'div',
+            class: ['flow-process-table'],
+            children: [
+                h({
+                    component: 'div',
+                    class: 'container-title',
+                    children: ['我的流程任务']
+                }),
+                h({
+                    component: processOverview,
+                    props: {
+                        ref: 'process',
+                        isWorkbench: true
+                    }
+                })
+            ]
+        })
+    }
+}
diff --git a/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.postcss b/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.postcss
new file mode 100644
index 000000000..267c6df59
--- /dev/null
+++ b/lib/client/src/components/render/pc/widget/flow-workbench-container/edit/index.postcss
@@ -0,0 +1,31 @@
+.flow-process-table {
+    padding: 20px 24px;
+    background: #FFFFFF;
+    border: 1px dashed #CCCCCC;
+    .container-title {
+        margin-bottom: 12px;
+        font-size: 16px;
+        color: #313238;
+    }
+    .filter-render-wrapper {
+        padding: 16px 24px;
+        background: #FAFBFC;
+    }
+
+    .bk-form-vertical, .bk-lesscode-form--vertical {
+        display: flex;
+        .bk-form-item, .bk-lesscode-form-item {
+            flex: 1;
+            margin-top: 0 !important;
+        }
+    }
+    .process-render * {
+        pointer-events: auto !important;
+    }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.js b/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.js
new file mode 100644
index 000000000..d0ea3db69
--- /dev/null
+++ b/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.js
@@ -0,0 +1,38 @@
+import { h } from 'bk-lesscode-render'
+import './index.postcss'
+import processOverview from '../../flow-manage-container/preview/components/process-overview'
+
+export default {
+    name: 'widget-flow-workbench-container-preview',
+    props: {
+        componentData: {
+            type: Object,
+            required: true
+        }
+    },
+    data () {
+        return {}
+    },
+    render (render) {
+        h(render)
+
+        return h({
+            component: 'div',
+            class: ['widget-flow-workbench-container'],
+            children: [
+                h({
+                    component: 'div',
+                    class: 'container-title',
+                    children: ['我的流程任务']
+                }),
+                h({
+                    component: processOverview,
+                    props: {
+                        ref: 'process',
+                        isWorkbench: true
+                    }
+                })
+            ]
+        })
+    }
+}
diff --git a/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.postcss b/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.postcss
new file mode 100644
index 000000000..e6d0b15e6
--- /dev/null
+++ b/lib/client/src/components/render/pc/widget/flow-workbench-container/preview/index.postcss
@@ -0,0 +1,15 @@
+.widget-flow-workbench-container {
+    padding: 20px 24px;
+    background: #ffffff;
+    .container-title {
+        margin-bottom: 12px;
+        font-size: 16px;
+        color: #313238;
+    }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/client/src/components/render/pc/widget/table/table-column.js b/lib/client/src/components/render/pc/widget/table/table-column.js
index a845f6f35..5499bde9e 100644
--- a/lib/client/src/components/render/pc/widget/table/table-column.js
+++ b/lib/client/src/components/render/pc/widget/table/table-column.js
@@ -219,7 +219,7 @@ export default {
             component: self.columnType,
             props: {
                 formatter: self.bkTableFormatter,
-                renderHeader: self.renderHeader,
+                renderHeader: self.$props.type === 'selection' ? undefined : self.renderHeader,
                 ...self.$props,
                 type: self.$props.type
             },
diff --git a/lib/client/src/element-materials/core/static/create-node.js b/lib/client/src/element-materials/core/static/create-node.js
index 25461cee4..74c637c99 100644
--- a/lib/client/src/element-materials/core/static/create-node.js
+++ b/lib/client/src/element-materials/core/static/create-node.js
@@ -3,8 +3,8 @@ import getMaterial from './get-material'
 
 import Node from '../Node'
 
-export const createNode = (type, name) => {
-    const material = getMaterial(type, name)
+export const createNode = (type, name, framework) => {
+    const material = getMaterial(type, name, framework)
     if (!material) {
         throw new Error(window.i18n.t('不支持的组件 * {0} *', [type]))
     }
diff --git a/lib/client/src/element-materials/core/static/get-material.js b/lib/client/src/element-materials/core/static/get-material.js
index f6bb3a507..c584d8737 100644
--- a/lib/client/src/element-materials/core/static/get-material.js
+++ b/lib/client/src/element-materials/core/static/get-material.js
@@ -56,13 +56,14 @@ export const unregisterMaterial = () => {
     })
 }
 
-export default function (type, name) {
+export default function (type, name, customFramework) {
     /** bk-charts hack config settings
      * bk-charts存在同type，但是配置不同的情况
      *  - 在面板拖拽时，已经由hacker.js处理，因此有些地方可能不会传入name
      *  - 在右侧props属性面板渲染时，会传入name，获取准确的配置
      */
-    const elementMaterials = framework === 'vue2' ? vue2ElementMaterials : vue3ElementMaterials
+    const materialFramework = customFramework || framework
+    const elementMaterials = materialFramework === 'vue2' ? vue2ElementMaterials : vue3ElementMaterials
     // 同一个type名称，对应不同组件，需要根据name进一步区分
     const sameTypeArr = ['bk-charts', 'chart', 'echarts', 'bk-input', 'bk-radio-group', 'widget-van-picker']
 
@@ -80,7 +81,7 @@ export default function (type, name) {
         return _.cloneDeep(material)
     }
 
-    const material = materialMap[framework][type]
+    const material = materialMap[materialFramework][type]
     if (!material) {
         return null
     }
diff --git a/lib/client/src/element-materials/materials/vue2/bk/data-manage-container/index.js b/lib/client/src/element-materials/materials/vue2/bk/data-manage-container/index.js
index 89dfbf702..3d1ed99ba 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/data-manage-container/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/data-manage-container/index.js
@@ -12,6 +12,14 @@ export default {
     ],
     renderStyles: {},
     props: {
+        flowTplId: { // 流程模板id
+            type: 'hidden',
+            val: ''
+        },
+        nodeId: { // 流程节点的id
+            type: 'hidden',
+            val: ''
+        },
         formId: {
             type: 'hidden',
             val: ''
diff --git a/lib/client/src/element-materials/materials/vue2/bk/flow-workbench-container/index.js b/lib/client/src/element-materials/materials/vue2/bk/flow-workbench-container/index.js
new file mode 100644
index 000000000..fbb08f6a2
--- /dev/null
+++ b/lib/client/src/element-materials/materials/vue2/bk/flow-workbench-container/index.js
@@ -0,0 +1,15 @@
+export default {
+    name: 'flow-workbench-container',
+    type: 'widget-flow-workbench-container',
+    displayName: '流程工作台容器',
+    icon: 'bk-drag-icon bk-drag-flow',
+    group: '容器',
+    order: 1,
+    events: [],
+    styles: [
+        'size',
+        'margin'
+    ],
+    renderStyles: {},
+    props: {}
+}
diff --git a/lib/client/src/element-materials/materials/vue2/bk/form-container/index.js b/lib/client/src/element-materials/materials/vue2/bk/form-container/index.js
index 9e7e14811..0dd6f8740 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/form-container/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/form-container/index.js
@@ -15,6 +15,9 @@ export default {
         dataSource: {
             type: 'hidden',
             val: {
+                action: 'submitData', // 提交按钮的行为，submitData(存储数据)、executeFlow(流程提单)
+                flowTplId: '', // 流程模板id, action为executeFlow时需要
+                nodeId: '', // 流程第一个节点为人工节点，该节点的id, action为executeFlow时需要
                 type: 'NEW_FORM', // NEW_FORM、USE_FORM
                 relatedId: '', // 关联id，引用或复用的表单id
                 id: '', // 表单id，若为复用类型则取所复用表单id
@@ -32,8 +35,8 @@ export default {
         actions: {
             type: 'hidden',
             val: {
-                submit: false,
-                reset: false
+                submit: true,
+                reset: true
             }
         }
     }
diff --git a/lib/client/src/element-materials/materials/vue2/bk/index.js b/lib/client/src/element-materials/materials/vue2/bk/index.js
index b526e6a31..2f8f10a0d 100644
--- a/lib/client/src/element-materials/materials/vue2/bk/index.js
+++ b/lib/client/src/element-materials/materials/vue2/bk/index.js
@@ -16,6 +16,7 @@ import column from './column'
 import formContainer from './form-container'
 import dataManageContainer from './data-manage-container'
 import flowManageContainer from './flow-manage-container'
+import flowWorkbenchContainer from './flow-workbench-container'
 
 import input from './input'
 import textarea from './input-textarea'
@@ -101,6 +102,7 @@ const bkComponents = Object.seal([
     formContainer,
     dataManageContainer,
     flowManageContainer,
+    flowWorkbenchContainer,
     mdEditor,
     paragraph,
     button,
diff --git a/lib/client/src/element-materials/materials/vue3/bk/data-manage-container/index.js b/lib/client/src/element-materials/materials/vue3/bk/data-manage-container/index.js
index 89dfbf702..3d1ed99ba 100644
--- a/lib/client/src/element-materials/materials/vue3/bk/data-manage-container/index.js
+++ b/lib/client/src/element-materials/materials/vue3/bk/data-manage-container/index.js
@@ -12,6 +12,14 @@ export default {
     ],
     renderStyles: {},
     props: {
+        flowTplId: { // 流程模板id
+            type: 'hidden',
+            val: ''
+        },
+        nodeId: { // 流程节点的id
+            type: 'hidden',
+            val: ''
+        },
         formId: {
             type: 'hidden',
             val: ''
diff --git a/lib/client/src/element-materials/materials/vue3/bk/flow-workbench-container/index.js b/lib/client/src/element-materials/materials/vue3/bk/flow-workbench-container/index.js
new file mode 100644
index 000000000..fbb08f6a2
--- /dev/null
+++ b/lib/client/src/element-materials/materials/vue3/bk/flow-workbench-container/index.js
@@ -0,0 +1,15 @@
+export default {
+    name: 'flow-workbench-container',
+    type: 'widget-flow-workbench-container',
+    displayName: '流程工作台容器',
+    icon: 'bk-drag-icon bk-drag-flow',
+    group: '容器',
+    order: 1,
+    events: [],
+    styles: [
+        'size',
+        'margin'
+    ],
+    renderStyles: {},
+    props: {}
+}
diff --git a/lib/client/src/element-materials/materials/vue3/bk/form-container/index.js b/lib/client/src/element-materials/materials/vue3/bk/form-container/index.js
index 9e7e14811..3275df9aa 100644
--- a/lib/client/src/element-materials/materials/vue3/bk/form-container/index.js
+++ b/lib/client/src/element-materials/materials/vue3/bk/form-container/index.js
@@ -15,6 +15,9 @@ export default {
         dataSource: {
             type: 'hidden',
             val: {
+                action: 'submitData', // 提交按钮的行为，submitData(存储数据)、executeFlow(流程提单)
+                flowTplId: '', // 流程模板id, action为executeFlow时需要
+                nodeId: '', // 流程第一个节点为人工节点，该节点的id，action为executeFlow时需要
                 type: 'NEW_FORM', // NEW_FORM、USE_FORM
                 relatedId: '', // 关联id，引用或复用的表单id
                 id: '', // 表单id，若为复用类型则取所复用表单id
@@ -32,8 +35,8 @@ export default {
         actions: {
             type: 'hidden',
             val: {
-                submit: false,
-                reset: false
+                submit: true,
+                reset: true
             }
         }
     }
diff --git a/lib/client/src/element-materials/materials/vue3/bk/index.js b/lib/client/src/element-materials/materials/vue3/bk/index.js
index 4e1a894f9..730212178 100644
--- a/lib/client/src/element-materials/materials/vue3/bk/index.js
+++ b/lib/client/src/element-materials/materials/vue3/bk/index.js
@@ -24,6 +24,7 @@ import collapse from './collapse'
 import colorPicker from './color-picker'
 import dataManageContainer from './data-manage-container'
 import flowManageContainer from './flow-manage-container'
+import flowWorkbenchContainer from './flow-workbench-container'
 import datePicker from './date-picker'
 import dialog from './dialog'
 import divider from './divider'
@@ -102,6 +103,7 @@ const bkComponents = Object.seal([
     colorPicker,
     dataManageContainer,
     flowManageContainer,
+    flowWorkbenchContainer,
     datePicker,
     dialog,
     divider,
diff --git a/lib/client/src/element-materials/modifier/component/data-manage-container/index.vue b/lib/client/src/element-materials/modifier/component/data-manage-container/index.vue
index b1c6171b9..52a7828b7 100644
--- a/lib/client/src/element-materials/modifier/component/data-manage-container/index.vue
+++ b/lib/client/src/element-materials/modifier/component/data-manage-container/index.vue
@@ -96,6 +96,29 @@
                 this.loading = false
             },
             handleDataManageSelectForm (val) {
+                const regex = /^flow-tpl-(?<tplId>\d+)-(?<nodeId>[a-z0-9]+)$/;
+                const form = this.formList.find(formItem => formItem.id === val)
+                if (form) {
+                    const match = form.componentId.match(regex);
+                    if (match && match.groups.tplId && match.groups.nodeId) {
+                        const tplId = Number(match.groups.tplId)
+                        this.activeNode.setProp('flowTplId', {
+                            ...this.activeNode.renderProps.flowTplId,
+                            code: tplId,
+                            renderValue: tplId
+                        })
+                        this.activeNode.setProp('nodeId', {
+                            ...this.activeNode.renderProps.nodeId,
+                            code: match.groups.nodeId,
+                            renderValue: match.groups.nodeId
+                        })
+                    }
+                }
+                this.activeNode.setProp('tableName', {
+                    ...this.activeNode.renderProps.tableName,
+                    code: form.tableName,
+                    renderValue: form.tableName
+                })
                 this.activeNode.setProp('formId', {
                     ...this.activeNode.renderProps.formId,
                     code: val,
diff --git a/lib/client/src/element-materials/modifier/component/form-container/components/data-source.vue b/lib/client/src/element-materials/modifier/component/form-container/components/data-source.vue
index e49d8bbb3..b5eadbc62 100644
--- a/lib/client/src/element-materials/modifier/component/form-container/components/data-source.vue
+++ b/lib/client/src/element-materials/modifier/component/form-container/components/data-source.vue
@@ -1,27 +1,59 @@
 <template>
     <prop-group :title="$t('表单数据')">
         <div class="data-source-setting">
+            <section>
+                <span
+                    v-bk-tooltips="{
+                        width: 400,
+                        allowHtml: true,
+                        content: `${$t('表单点击提交按钮后的后续行为。')}<br/>
+                        ${$t('数据存储：将填写的表单数据存入数据表；')}<br/>
+                        ${$t('流程提单：执行流程并将表单数据注入执行的上下文中。可选择的流程需要满足第一个节点为人工节点，且已配置表单。')}`
+                    }"
+                    class="g-prop-sub-title subline g-mt8 g-mb6">{{ $t('表单行为') }}</span>
+                <div class="bk-button-group">
+                    <bk-button
+                        v-for="action in ACTION_LIST"
+                        :key="action.value"
+                        :class="['type-btn-item', { 'is-selected': localVal.action === action.value }]"
+                        @click="handleActionChange(action.value)">
+                        <span class="btn-text">{{ action.label }}</span>
+                    </bk-button>
+                    <bk-select
+                        v-if="localVal.action === 'executeFlow'"
+                        :value="localVal.flowTplId"
+                        style="margin-top: 10px;"
+                        :clearable="false"
+                        :placeholder="$t('请选择流程')"
+                        @selected="handleSelectFlowTpl">
+                        <bk-option v-for="tpl in flowTplList" :key="tpl.id" :id="tpl.id" :name="tpl.name" />
+                    </bk-select>
+                </div>
+            </section>
             <section class="bk-button-group">
-                <bk-button
-                    :class="['type-btn-item', { 'is-selected': localVal.type === 'NEW_FORM' }]"
-                    @click="handleTypeChange('NEW_FORM')">
-                    <span class="btn-text">{{ $t('新建表') }}</span>
-                </bk-button>
-                <bk-popconfirm
-                    :title="$t('确认切换成复用？')"
-                    :content="$t('切换后将会替换掉表单容器后的所有内容，且不支持更改，请谨慎操作！')"
-                    width="288"
-                    trigger="click"
-                    placement="bottom-end"
-                    class="type-btn-item"
-                    :disabled="localVal.type === 'USE_FORM'"
-                    @confirm="handleReuseconfirm">
+                <span class="g-prop-sub-title g-mt8 g-mb6">{{ $t('数据源') }}</span>
+                <div>
                     <bk-button
-                        :class="{ 'is-selected': localVal.type === 'USE_FORM' }"
-                        @click="handleTypeChange('USE_FORM')">
-                        <span v-bk-tooltips.top="$t('可以通过“复用已有的表” 进行表单渲染以及数据存储')" class="btn-text subline">{{ $t('复用已有表') }}</span>
+                        :class="['type-btn-item', { 'is-selected': localVal.type === 'NEW_FORM', 'is-disabled': localVal.action === 'executeFlow' }]"
+                        @click="handleTypeChange('NEW_FORM')">
+                        <span class="btn-text">{{ $t('新建表') }}</span>
                     </bk-button>
-                </bk-popconfirm>
+                    <bk-popconfirm
+                        :title="$t('确认切换成复用？')"
+                        :content="$t('切换后将会替换掉表单容器后的所有内容，且不支持更改，请谨慎操作！')"
+                        width="288"
+                        trigger="click"
+                        placement="bottom-end"
+                        class="type-btn-item"
+                        :disabled="localVal.type === 'USE_FORM'"
+                        @confirm="handleReuseconfirm">
+                        <bk-button
+                            :class="{ 'is-selected': localVal.type === 'USE_FORM' }"
+                            @click="handleTypeChange('USE_FORM')">
+                            <span v-bk-tooltips.top="$t('可以通过“复用已有的表” 进行表单渲染以及数据存储')" class="btn-text subline">{{ $t('复用已有表') }}</span>
+                        </bk-button>
+                    </bk-popconfirm>
+                </div>
             </section>
             <section v-if="localVal.type === 'NEW_FORM'">
                 <span
@@ -64,6 +96,7 @@
                     size="small"
                     :loading="formListLoading"
                     :clearable="false"
+                    :disabled="localVal.action === 'executeFlow'"
                     @toggle="handleSelectOpen"
                     @selected="handleSeletedRelatedForm">
                     <bk-option
@@ -108,9 +141,15 @@
         },
         data () {
             return {
+                ACTION_LIST: [
+                    { label: window.i18n.t('数据存储'), value: 'submitData', desc: '' },
+                    { label: window.i18n.t('流程提单'), value: 'executeFlow', desc: '' }
+                ],
                 localVal: { ...this.value },
                 formListLoading: false,
-                formList: []
+                formList: [],
+                flowTplListLoading: false,
+                flowTplList: []
             }
         },
         computed: {
@@ -122,8 +161,12 @@
                 this.localVal = { ...val }
             }
         },
+        created () {
+            this.localVal = { action: 'submitData', flowTplId: '', nodeId: '', ...this.value }
+        },
         mounted () {
             this.getFormList()
+            this.getFlowTplList()
         },
         methods: {
             async getFormList () {
@@ -136,8 +179,53 @@
                 this.formList = res
                 this.formListLoading = false
             },
+            async getFlowTplList () {
+                this.flowTplListLoading = true
+                const res = await this.$store.dispatch('flow/tpl/getTplList', { projectId: this.$route.params.projectId })
+                this.flowTplList = res.list.filter(tpl => {
+                    const node = this.getFlowTplFirstTaskNode(tpl)
+                    // 第一个任务节点为人工节点类型，且配置了表单
+                    return node && node.type === 'Manual' && node.config.formType
+                })
+                this.flowTplListLoading = false
+            },
+            getFlowTplFirstTaskNode (tpl) {
+                const nodes = JSON.parse(tpl.nodes || '[]')
+                const edges = JSON.parse(tpl.edges || '[]')
+                const startNode = nodes.find(node => node.type === 'Start')
+                const firstEdge = edges.find(edge => edge.source.cell === startNode.id)
+                if (firstEdge && firstEdge.target.cell) {
+                    const targetNode = nodes.find(node => node.id === firstEdge.target.cell)
+                    if (targetNode) return targetNode
+                }
+                return null
+            },
+            handleActionChange (val) {
+                this.localVal.action = val
+                if (val === 'executeFlow') {
+                    this.localVal.type = 'USE_FORM'
+                }
+                this.localVal.flowTplId = ''
+                this.localVal.nodeId = ''
+                this.localVal.relatedId = ''
+                this.$emit('updateFields', [])
+                this.change()
+            },
+            handleSelectFlowTpl (val) {
+                const flowTpl = this.flowTplList.find(tpl => tpl.id === val)
+                if (flowTpl) {
+                    const node = this.getFlowTplFirstTaskNode(flowTpl)
+                    if (node && node.type === 'Manual') {
+                        const { formId, formType, relatedId } = node.config
+                        this.localVal.flowTplId = flowTpl.id
+                        this.localVal.nodeId = node.id
+                        const nodeFormId = formType === 'USE_FORM' ? relatedId : formId
+                        this.handleSeletedRelatedForm(nodeFormId)
+                    }
+                }
+            },
             handleTypeChange (val) {
-                if (this.localVal.type === val || val === 'USE_FORM') {
+                if ((val === 'NEW_FORM' && this.localVal.action === 'executeFlow') || this.localVal.type === val || val === 'USE_FORM') {
                     return
                 }
                 this.localVal.type = val
diff --git a/lib/client/src/element-materials/modifier/component/form-container/components/operate-actions.vue b/lib/client/src/element-materials/modifier/component/form-container/components/operate-actions.vue
index 20af13171..40e3d9a60 100644
--- a/lib/client/src/element-materials/modifier/component/form-container/components/operate-actions.vue
+++ b/lib/client/src/element-materials/modifier/component/form-container/components/operate-actions.vue
@@ -1,8 +1,8 @@
 <template>
     <prop-group :title="$t('表单操作')">
         <div class="operate-actions-setting">
-            <bk-checkbox :value="value.submit" @change="handleChange('submit', $event)">{{ $t('显示提交按钮') }}</bk-checkbox>
-            <bk-checkbox :value="value.reset" @change="handleChange('reset', $event)">{{ $t('显示重置按钮') }}</bk-checkbox>
+            <bk-checkbox :value="value.submit" @change="handleChange('submit', $event)">{{ $t('提交按钮') }}</bk-checkbox>
+            <bk-checkbox :value="value.reset" @change="handleChange('reset', $event)">{{ $t('重置按钮') }}</bk-checkbox>
         </div>
     </prop-group>
 </template>
diff --git a/lib/client/src/element-materials/modifier/component/form/components/form-button-setting.vue b/lib/client/src/element-materials/modifier/component/form/components/form-button-setting.vue
index 6fbbd20e7..6a8e516b4 100644
--- a/lib/client/src/element-materials/modifier/component/form/components/form-button-setting.vue
+++ b/lib/client/src/element-materials/modifier/component/form/components/form-button-setting.vue
@@ -4,11 +4,11 @@
             {{ $t('表单操作项配置') }} </div>
         <div class="form-btn-list">
             <div class="list-item">
-                <span class="list-span">{{ $t('显示提交按钮') }}</span>
+                <span class="list-span">{{ $t('提交按钮') }}</span>
                 <bk-switcher size="small" theme="primary" v-model="btnSetting['SHOW_SUBMIT_BTN']" @change="(val) => changeShowButton('SHOW_SUBMIT_BTN', val)"></bk-switcher>
             </div>
             <div class="list-item">
-                <span class="list-span">{{ $t('显示取消按钮') }}</span>
+                <span class="list-span">{{ $t('取消按钮') }}</span>
                 <bk-switcher size="small" theme="primary" v-model="btnSetting['SHOW_CANCEL_BTN']" @change="(val) => changeShowButton('SHOW_CANCEL_BTN', val)"></bk-switcher>
             </div>
         </div>
diff --git a/lib/client/src/form-engine/fields/table/index.js b/lib/client/src/form-engine/fields/table/index.js
index 9c74a4f76..11c82aee9 100644
--- a/lib/client/src/form-engine/fields/table/index.js
+++ b/lib/client/src/form-engine/fields/table/index.js
@@ -154,7 +154,7 @@ export default {
                 cols.push(h({
                     component: 'bk-table-column',
                     props: {
-                        // fixed: 'right'
+                        fixed: 'right',
                         label: '操作',
                         index: 99999
                     },
diff --git a/lib/client/src/form-engine/renderer/index.js b/lib/client/src/form-engine/renderer/index.js
index b3b7e3cac..8accf624e 100644
--- a/lib/client/src/form-engine/renderer/index.js
+++ b/lib/client/src/form-engine/renderer/index.js
@@ -307,6 +307,7 @@ export default {
                 return
             }
 
+            // 流程管理容器，人工节点处理侧滑面板保存按钮需要自定义调用
             if (typeof this.submitFn === 'function') {
                 this.submitFn(this.value)
                 return
@@ -314,21 +315,31 @@ export default {
 
             try {
                 this.pending = true
-                const formattedVal = []
-                Object.keys(this.value).forEach(key => {
-                    const val = this.value[key]
-                    const field = this.fields.find(item => item.configure.key === key)
-                    if (Array.isArray(val) && field.type !== 'table') {
-                        formattedVal.push({ key, value: val.join(',') })
-                    } else {
-                        formattedVal.push({ key, value: val })
-                    }
-                })
-                await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
-                this.$bkMessage({
-                    theme: 'success',
-                    message: this.$t('表单数据添加成功')
-                })
+                const { action, flowTplId, nodeId } = this.dataSource
+                if (action === 'executeFlow') {
+                    const res = await this.$http.post(`/flow/tpl/${flowTplId}/createAndExecuteTask`)
+                    await this.$http.post(`/flow/task/${res.data.id}/manual_node/${nodeId}/submit`, this.value)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: this.$t('流程提单成功')
+                    })
+                } else {
+                    const formattedVal = []
+                    Object.keys(this.value).forEach(key => {
+                        const val = this.value[key]
+                        const field = this.fields.find(item => item.configure.key === key)
+                        if (Array.isArray(val) && field.type !== 'table') {
+                            formattedVal.push({ key, value: val.join(',') })
+                        } else {
+                            formattedVal.push({ key, value: val })
+                        }
+                    })
+                    await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: this.$t('表单数据添加成功')
+                    })
+                }
             } catch (e) {
                 console.error(e)
             } finally {
diff --git a/lib/client/src/locales/lang/en.json b/lib/client/src/locales/lang/en.json
index 9708c3eb6..f59a6c2d0 100644
--- a/lib/client/src/locales/lang/en.json
+++ b/lib/client/src/locales/lang/en.json
@@ -220,7 +220,7 @@
   "确认删除流程提单页面？": "Confirm deletion flow bill of lading page?",
   "删除该流程提单页面，对应的流程数据不会删除": "Delete the flow bill of lading page, the corresponding flow data will not be deleted",
   "流程提单页将同步被删除，": "The flow bill of lading page will be deleted synchronously. ",
-  "已生成的关联数据表及表数据将继续保留": "The generated associated data tables and table data will continue to be retained.",
+  "已生成的关联表单页容器组件将被移除，关联数据管理页容器组件、关联数据表及表数据将继续保留": "The generated associated form page container component will be removed, while the associated data management page container component, associated data tables, and table data will remain.",
   "确认删除表单配置？": "Confirm deletion of form configuration?",
   "{0}_表单": "{0}_form",
   "保存成功": "Saved Successfully",
@@ -262,6 +262,17 @@
   "流程节点不存在": "flow node does not exist.",
   "流程边不存在": "flow edge does not exist.",
   "表单配置": "Form Configuration",
+  "新建关联": "Create Related Page",
+  "关联表单页": "Associated Form Page",
+  "关联数据管理页": "Associated Data page",
+  "关联流程管理页": "Associate Flow Manage Page",
+  "表单行为": "Sumbit Action",
+  "数据存储": "Save Data",
+  "流程提单": "Create Ticket",
+  "请选择流程": "Please Select Flow Template",
+  "表单点击提交按钮后的后续行为。": "The subsequent actions after clicking the submit button on the form.",
+  "数据存储：将填写的表单数据存入数据表；": "Data storage: Store the data filled in the form in the data table;",
+  "流程提单：执行流程并将表单数据注入执行的上下文中。可选择的流程需要满足第一个节点为人工节点，且已配置表单。": "Process bill of lading: Execute the process and inject form data into the execution context. The selectable process needs to meet the requirement that the first node is a human node and the form has been configured.",
   "表单预览": "Form Preview",
   "当前流程节点中已绑定表单不可复用": "The bound form in the current flow node cannot be reused",
   "请输入表单名称": "Enter the form name",
@@ -992,8 +1003,8 @@
   "基于数据的真假性，来控制是否【显示】该组件（通过设置内联样式的 display CSS 属性来工作）": "Based on the authenticity of the data, to control whether to [display] the component (by setting the display CSS property of the inline style to work)",
   "基于数据的真假性，来控制是否【渲染】该组件（通过控制是否绘制 DOM 元素来工作）": "Based on the authenticity of the data, to control whether to [render] the component (work by controlling whether to draw DOM elements)",
   "当鼠标指向页面元素时给出简单的提示，需传入提示的字符串": "When the mouse points to a page element, a simple prompt is given, and the prompt string needs to be passed in",
-  "显示取消按钮": "Show Cancel Button",
-  "显示提交按钮": "Show Submit Button",
+  "取消按钮": "Cancel Button",
+  "提交按钮": "Submit Button",
   "暂无可添加事件": "There are no events to add",
   "添加事件": "Add Event",
   "编辑函数时，可以使用 lesscode.指令值，必须通过编辑器自动补全功能选择对应属性指令值，来获取或者修改当前页面中配置了指令的组件属性值": "When editing a function,  you can use the \"lesscode.\" instruction value, and you must select the corresponding attribute instruction value through the editor's auto-completion function to obtain or modify the component attribute value configured with the instruction in the current page.",
diff --git a/lib/client/src/locales/lang/zh-cn.json b/lib/client/src/locales/lang/zh-cn.json
index 235d3257f..e34506239 100644
--- a/lib/client/src/locales/lang/zh-cn.json
+++ b/lib/client/src/locales/lang/zh-cn.json
@@ -225,7 +225,7 @@
   "保存成功": "保存成功",
   "确认删除吗": "确认删除吗？",
   "确认删除流程提单页面？": "确认删除流程提单页面？",
-  "已生成的关联数据表及表数据将继续保留": "已生成的关联数据表及表数据将继续保留",
+  "已生成的关联表单页容器组件将被移除，关联数据管理页容器组件、关联数据表及表数据将继续保留": "已生成的关联表单页容器组件将被移除，关联数据管理页容器组件、关联数据表及表数据将继续保留",
   "流程提单页将同步被删除，": "流程提单页将同步被删除，",
   "删除该流程提单页面，对应的流程数据不会删除": "删除该流程提单页面，对应的流程数据不会删除",
   "确认删除表单配置？": "确认删除表单配置？",
@@ -269,6 +269,17 @@
   "复用": "复用",
   "已有表单": "已有表单",
   "表单配置": "表单配置",
+  "新建关联": "新建关联",
+  "关联表单页": "关联表单页",
+  "关联数据管理页": "关联数据管理页",
+  "关联流程管理页": "关联流程管理页",
+  "表单行为": "表单行为",
+  "数据存储": "数据存储",
+  "流程提单": "流程提单",
+  "请选择流程": "请选择流程",
+  "表单点击提交按钮后的后续行为。": "表单点击提交按钮后的后续行为。",
+  "数据存储：将填写的表单数据存入数据表；": "数据存储：将填写的表单数据存入数据表；",
+  "流程提单：执行流程并将表单数据注入执行的上下文中。可选择的流程需要满足第一个节点为人工节点，且已配置表单。": "流程提单：执行流程并将表单数据注入执行的上下文中。可选择的流程需要满足第一个节点为人工节点，且已配置表单。",
   "流程模板不存在": "流程模板不存在",
   "流程节点不存在": "流程节点不存在",
   "流程边不存在": "流程边不存在",
@@ -1011,8 +1022,8 @@
   "添加事件": "添加事件",
   "关闭后，该事件不生效": "关闭后，该事件不生效",
   "可添加丰富的事件，以实现复杂的业务需求": "可添加丰富的事件，以实现复杂的业务需求",
-  "显示取消按钮": "显示取消按钮",
-  "显示提交按钮": "显示提交按钮",
+  "取消按钮": "取消按钮",
+  "提交按钮": "提交按钮",
   "表单操作项配置": "表单操作项配置",
   "弹窗关闭后未保存的数据将会丢失，请确认关闭": "弹窗关闭后未保存的数据将会丢失，请确认关闭",
   "字段名称：以英文字符、下划线开头；只允许英文字符、数字、下划线": "字段名称：以英文字符、下划线开头；只允许英文字符、数字、下划线",
diff --git a/lib/client/src/preview/component.js b/lib/client/src/preview/component.js
index 6e6a5b5e8..98ecc7502 100644
--- a/lib/client/src/preview/component.js
+++ b/lib/client/src/preview/component.js
@@ -26,6 +26,7 @@ import chart from '@/components/render/pc/widget/chart/chart'
 import WidgetFormContainer from '@/form-engine/renderer/index'
 import WidgetDataManageContainer from '@/components/render/pc/widget/data-manage-container/form-data-manage/preview'
 import WidgetFlowManageContainer from '@/components/render/pc/widget/flow-manage-container/preview'
+import WidgetFlowWorkbenchContainer from '@/components/render/pc/widget/flow-workbench-container/preview'
 import processForm from '@/components/flow-form-comp/process-form'
 import dataManage from '@/components/flow-form-comp/data-manage'
 import BkLuckyCanvas from '@/components/render/pc/widget/bk-lucky-canvas'
@@ -86,6 +87,7 @@ const registerSysComponents = () => {
         registerComponent('widget-form-container', WidgetFormContainer)
         registerComponent('widget-data-manage-container', WidgetDataManageContainer)
         registerComponent('widget-flow-manage-container', WidgetFlowManageContainer)
+        registerComponent('widget-flow-workbench-container', WidgetFlowWorkbenchContainer)
         registerComponent('bk-lucky-canvas', BkLuckyCanvas)
         install(mavonEditor)
         resolve()
diff --git a/lib/client/src/store/modules/flow/tpl.js b/lib/client/src/store/modules/flow/tpl.js
index 4a7e1f378..bd1e547a8 100644
--- a/lib/client/src/store/modules/flow/tpl.js
+++ b/lib/client/src/store/modules/flow/tpl.js
@@ -22,6 +22,10 @@ export default {
         getTplList ({ state }, params) {
             return http.get(`${prefix}/tpl`, { params }).then(response => response.data)
         },
+        // 获取包含流程工作台容器的页面
+        getRelatedWokbenchPages () {
+            return http.get(`${prefix}/queryRelatedWorkbenchPages`).then(response => response.data)
+        },
         // 创建流程
         createFlowTpl ({ state }, params) {
             return http.post(`${prefix}/tpl`, params).then(response => response.data)
@@ -38,6 +42,18 @@ export default {
         archiveFlowTpl ({ state }, params) {
             return http.put(`${prefix}/archive`, params).then(response => response.data)
         },
+        // 获取流程关联页面
+        getRelatedPages ({ state }, { tplId, params }) {
+            return http.post(`${prefix}/tpl/${tplId}/queryRelatedPages`, params).then(response => response.data)
+        },
+        // 更新流程关联页面
+        updateRelatedPages ({ state }, { tplId, params }) {
+            return http.post(`${prefix}/updateRelatedPages`, params).then(response => response.data)
+        },
+        // 更新流程关联页面内容
+        updateRelatedPageContent ({ state }, { params }) {
+            return http.post(`${prefix}/tpl/related/updateRelatedPageContent`, params).then(response => response.data)
+        },
         // 部署流程
         updateDeployStatus ({ state }, { id, deployed }) {
             return http.post(`${prefix}/tpl/${id}/updateDeployStatus`, { deployed }).then(response => response.data)
diff --git a/lib/client/src/views/index/components/header-operate/common/use-save-form-container.js b/lib/client/src/views/index/components/header-operate/common/use-save-form-container.js
index 77e2b4d30..77c78d001 100644
--- a/lib/client/src/views/index/components/header-operate/common/use-save-form-container.js
+++ b/lib/client/src/views/index/components/header-operate/common/use-save-form-container.js
@@ -22,16 +22,27 @@ const getFormContainerComponents = (nodes) => {
 const checkFormConfig = (nodes) => {
     const configErrors = []
     const relatedIdEmpty = []
+    const fieldsEmpty = []
     nodes.forEach(node => {
         const dataSource = node.renderProps.dataSource.code
+        const fields = node.renderProps.fields.code
         const { type, relatedId } = dataSource
         if (type === 'USE_FORM' && !relatedId) {
-            relatedIdEmpty.push(node.componentId)
+            if (!relatedId) {
+                relatedIdEmpty.push(node.componentId)
+            }
+        } else {
+            if (fields.length === 0) {
+                fieldsEmpty.push(node.componentId)
+            }
         }
     })
     if (relatedIdEmpty.length > 0) {
         configErrors.push(`组件${relatedIdEmpty.map(item => '【' + item + '】').join(', ')}的表单数据源为复用数据表方式，但没有选择数据表`)
     }
+    if (fieldsEmpty.length > 0) {
+        configErrors.push(`组件${fieldsEmpty.map(item => '【' + item + '】').join(', ')}的表单数据源为新建表方式，但没有配置表单字段`)
+    }
     return configErrors
 }
 
diff --git a/lib/client/src/views/index/components/material-panel/components/panel-ai/index.vue b/lib/client/src/views/index/components/material-panel/components/panel-ai/index.vue
index 77033ea50..7f13d0c1b 100644
--- a/lib/client/src/views/index/components/material-panel/components/panel-ai/index.vue
+++ b/lib/client/src/views/index/components/material-panel/components/panel-ai/index.vue
@@ -174,7 +174,7 @@
                     pushMessage(RoleType.Assistant, `请提供以下信息：${result.join('、')}`, '')
                     // 上下文携带完整对话
                     aiHelper.pushPrompt(userInput, 'user')
-                    aiHelper.pushPrompt(`请提供以下信息：${result.join('、')}`, 'system')
+                    aiHelper.pushPrompt(`请提供以下信息：${result.join('、')}`, 'assistant')
                 } else {
                     // 返回loading message
                     currentMessage.value = pushMessage(RoleType.Assistant, '正在努力生成中，请稍等', MessageStatus.Loading)
diff --git a/lib/client/src/views/index/components/material-panel/components/panel-form-engine/index.vue b/lib/client/src/views/index/components/material-panel/components/panel-form-engine/index.vue
index 70e3e3981..e51b4ac0b 100644
--- a/lib/client/src/views/index/components/material-panel/components/panel-form-engine/index.vue
+++ b/lib/client/src/views/index/components/material-panel/components/panel-form-engine/index.vue
@@ -6,9 +6,7 @@
             @on-change="handleSearch" />
         <section class="materials-container">
             <group-box v-show="widgetList.length > 0" group-name="容器" :list="containerMaterials">
-                <render-component :data="containerMaterials[0]" />
-                <render-component :data="containerMaterials[1]" />
-                <render-component :data="containerMaterials[2]" />
+                <render-component v-for="material in containerMaterials" :key="material.type" :data="material" />
             </group-box>
             <formEngineMaterial :list="widgetList" />
         </section>
@@ -55,7 +53,7 @@
         },
         {
             group: '容器',
-            icon: 'bk-drag-icon bk-drag-zidingyibiaoge',
+            icon: 'bk-drag-icon bk-drag-rongqi',
             name: 'form-container',
             type: 'widget-flow-manage-container',
             displayName: '流程管理容器',
@@ -67,6 +65,21 @@
             ],
             renderStyles: {},
             props: {}
+        },
+        {
+            group: '容器',
+            icon: 'bk-drag-icon bk-drag-flow',
+            name: 'flow-workbench-container',
+            type: 'widget-flow-workbench-container',
+            displayName: '流程工作台容器',
+            order: 1,
+            events: [],
+            styles: [
+                'size',
+                'margin'
+            ],
+            renderStyles: {},
+            props: {}
         }
     ]
 
diff --git a/lib/client/src/views/index/components/material-panel/components/panel-template/index.vue b/lib/client/src/views/index/components/material-panel/components/panel-template/index.vue
index b0e8cae3a..fd2eb9643 100644
--- a/lib/client/src/views/index/components/material-panel/components/panel-template/index.vue
+++ b/lib/client/src/views/index/components/material-panel/components/panel-template/index.vue
@@ -39,7 +39,7 @@
                         }"
                         :key="templateIndex">
                         <div class="item-img">
-                            <img :src="template.previewImg" />
+                            <img :src="filterImg(template.previewImg)" />
                             <div
                                 v-if="type === 'market' && !template.hasInstall"
                                 class="mask">
@@ -77,6 +77,7 @@
     import SearchBox from '../common/search-box'
     import SelectTab from '../common/select-tab'
     import { mapGetters } from 'vuex'
+    import { filterImgSrc } from '@/common/util'
 
     export default {
         name: 'template-panel',
@@ -209,6 +210,9 @@
             createFallback (list, index) {
                 return LC.parseTemplate(JSON.parse(list[index].content))
             },
+            filterImg (src) {
+                return filterImgSrc(src)
+            },
             /**
              * @desc tab 切换
              * @param { String } tab
diff --git a/lib/client/src/views/project/data-source-manage/data-operation/children/ai-sql-input.vue b/lib/client/src/views/project/data-source-manage/data-operation/children/ai-sql-input.vue
index 9ffd279e5..f556987fe 100644
--- a/lib/client/src/views/project/data-source-manage/data-operation/children/ai-sql-input.vue
+++ b/lib/client/src/views/project/data-source-manage/data-operation/children/ai-sql-input.vue
@@ -73,6 +73,10 @@
                 
                 if (currentMessage.content?.includes('SELECT')) {
                     currentMessage.content = currentMessage.content?.replace('```sql', '')?.replace('```', '')
+                    currentMessage.content = currentMessage.content?.trim()
+                    if (!currentMessage.content?.endsWith(';')) {
+                        currentMessage.content = currentMessage.content + ';'
+                    }
                     currentMessage.status = 'success'
                     props.generateSql(currentMessage.content)
                 } else {
@@ -105,30 +109,21 @@
 
             const getTableInfoPrompt = () => {
                 let sysPromt = ''
-                sysPromt += getTableStructure()
-                sysPromt += '\n - If you can generate the sql, return the sql only, otherwise, you should return explanation in Chinese'
-                return sysPromt
-            }
-
-            const addSqlPrompt = () => {
                 const tables = props.tableData || []
                 if (tables.length === 0) {
-                    const noDataPrompt = 'There are no data tables in the database， you should return "数据库中没有任何的数据表, 请先创建" now'
-                    aiHelper.pushPrompt(noDataPrompt, 'system')
+                    sysPromt = 'There are no data tables in the database， you should return "数据库中没有任何的数据表, 请先创建" now'
                 } else {
                     let tablePrompt = ''
                     tablePrompt += getTableStructure()
                     tablePrompt += '\n - If you can generate the sql, return the sql only, otherwise, you should return explanation in Chinese'
-                    aiHelper.pushPrompt(tablePrompt, 'system')
+                    sysPromt = tablePrompt
                 }
+                return sysPromt
             }
 
             const handleUserInput = () => {
                 if (isLoading.value || !content.value) return
 
-                // 根据数据库中的数据，动态添加prompt
-                addSqlPrompt()
-
                 // 记录输入的数据
                 const userInput = content.value
                 pushMessage('user', userInput)
@@ -142,12 +137,15 @@
                 aiHelper.chat(`help me solve this task:\n ${userInput}`)
             }
 
+            // 只能发送一条systemprompt
+            const tableInfoPrompt = getTableInfoPrompt()
+
             const aiHelper = new Ai({
                 handlerStart,
                 handleEnd,
                 handleMessage,
                 handleApiError,
-                systemPrompt,
+                systemPrompt: systemPrompt + tableInfoPrompt,
                 type: 'sql'
             })
             return {
diff --git a/lib/client/src/views/project/data-source-manage/data-operation/children/sql-query.vue b/lib/client/src/views/project/data-source-manage/data-operation/children/sql-query.vue
index d54f739f0..cf0608641 100644
--- a/lib/client/src/views/project/data-source-manage/data-operation/children/sql-query.vue
+++ b/lib/client/src/views/project/data-source-manage/data-operation/children/sql-query.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <ai-sql-input v-if="isAiValid" :table-data="tableData" :generate-sql="generateAiSql" />
+        <ai-sql-input :key='JSON.stringify(tableData)' v-if="isAiValid" :table-data="tableData" :generate-sql="generateAiSql" />
         <bk-divider></bk-divider>
         <section class="sql-query">
             <monaco
diff --git a/lib/client/src/views/project/data-source-manage/data-operation/children/system-sql-prompt.txt b/lib/client/src/views/project/data-source-manage/data-operation/children/system-sql-prompt.txt
index 344846ee5..64a2a7c48 100644
--- a/lib/client/src/views/project/data-source-manage/data-operation/children/system-sql-prompt.txt
+++ b/lib/client/src/views/project/data-source-manage/data-operation/children/system-sql-prompt.txt
@@ -6,5 +6,5 @@ You must adhere to the following rules:
 - If the user's question has nothing to do with the sql generation, tell the user to only ask questions related to the sql generation in Chinese.
 - only generate query type sql statements, if ask you to generate other type sql statements like "ALTER、CREATE、INSERT、UPDATE DELETE DROP", return '只允许生成查询类型语句'
 - The table name and column name used in your sql must be obtained from the following. If you cannot find the corresponding table name or column name, please return table *** or column *** not found and I will tell you the tableName and columns you can use.
-- If you you can generate sql correctly, please return the result that starts with 'SELECT', don't start with '```sql' and end with '```'
-
+- If you you can generate sql correctly, please return the result that starts with 'SELECT', don't start with '```sql' and end with '```' and don't return anything other before the sql, only return the final sql.
+- Please ends with ';'
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/index.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/index.vue
index 8e0ebb7b2..4fdaa1551 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/index.vue
@@ -13,16 +13,18 @@
                 :nodes="nodes"
                 :edges="edges"
                 :detail="detail.data"
+                :is-first-and-manual-node="isFirstAndManualNode"
+                @close="handleClose"
                 @change="handleChange"
                 @update="handleUpdate" />
             <div class="save-btn">
-                <bk-button theme="primary" @click="handleSave">{{ $t('保存') }}</bk-button>
+                <bk-button theme="primary" :loading="savePending" @click="handleSave">{{ $t('保存') }}</bk-button>
             </div>
         </div>
     </div>
 </template>
 <script>
-    import { defineComponent, ref, computed, onMounted, getCurrentInstance } from 'vue'
+    import { defineComponent, ref, provide, computed, onMounted, getCurrentInstance } from 'vue'
     import { NODES } from '../render-graph/constants'
     import { useStore } from '@/store'
     import ManualNode from './manual-node/index.vue'
@@ -62,6 +64,8 @@
 
             const detailCopy = ref({})
             const nodeFormRef = ref(null)
+            const saveHandlers = ref(new Set()) // 子组件自定义保存处理函数集合
+            const savePending = ref(false)
 
             const nodeTypeName = computed(() => {
                 if (props.detail.data.type) {
@@ -72,6 +76,16 @@
                 return ''
             })
 
+            // 是否为流程的第一个任务节点，且为人工节点类型
+            const isFirstAndManualNode = computed(() => {
+                const startNode = props.nodes.find(node => node.type === 'Start')
+                const firstEdge = props.edges.find(edge => edge.source.cell === startNode.id)
+                if (firstEdge && firstEdge.target.cell === props.detail.data.id) {
+                    return true
+                }
+                return false
+            })
+
             onMounted(() => {
                 detailCopy.value = JSON.parse(JSON.stringify(props.detail.data))
             })
@@ -90,20 +104,35 @@
             }
 
             const handleSave = async () => {
-                await nodeFormRef.value.validate()
-                detailCopy.value.isDraft = false
-                await store.dispatch('flow/tpl/updateNode', { id: props.tplId, data: detailCopy.value })
-                emit('update', detailCopy.value)
-                instance.proxy.$bkMessage({
-                    theme: 'success',
-                    message: window.i18n.t('保存成功')
-                })
+                try {
+                    savePending.value = true
+                    await nodeFormRef.value.validate()
+                    detailCopy.value.isDraft = false
+                    await Promise.all(Array.from(saveHandlers.value).map(handler => handler()))
+                    await store.dispatch('flow/tpl/updateNode', { id: props.tplId, data: detailCopy.value })
+                    emit('update', detailCopy.value)
+                    instance.proxy.$bkMessage({
+                        theme: 'success',
+                        message: window.i18n.t('保存成功')
+                    })
+                } catch (e) {
+                    console.error(e.message || e)
+                } finally {
+                    savePending.value = false
+                }
             }
 
+            provide('saveContext', {
+                register: (saver) => saveHandlers.value.add(saver),
+                unregister: (saver) => saveHandlers.value.delete(saver)
+            });
+
             return {
                 nodeConfigCompMap,
                 nodeTypeName,
                 nodeFormRef,
+                savePending,
+                isFirstAndManualNode,
                 handleClose,
                 handleChange,
                 handleSave,
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/bound-detail.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/bound-detail.vue
index b02d89efc..4659a6297 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/bound-detail.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/bound-detail.vue
@@ -1,30 +1,65 @@
 <template>
     <div v-bkloading="{ loading: formListLoading }" class="bound-detail-section">
-        <div class="title-area">
+        <div class="detail-section-title">
             <h5 class="form-name">{{ formDetail.formName }}</h5>
             <div class="method-tag">{{ typeNameMap[formType] }}</div>
         </div>
-        <div class="bound-form-table">
-            {{ $t('关联数据表：') }}
-            <a v-if="formDetail.tableName" class="form-table-name" target="_blank" :href="tableDetailUrl">{{ formDetail.tableName }}</a>
-        </div>
-        <div class="operate-btns">
-            <i
-                v-bk-tooltips.top="$t('编辑表单')"
-                class="bk-drag-icon bk-drag-edit edit-icon"
-                @click="handleBtnClick('edit')">
-            </i>
-            <i
-                v-bk-tooltips.top="$t('预览表单')"
-                class="bk-drag-icon bk-drag-visible-eye preview-icon"
-                @click="handleBtnClick('preview')">
-            </i>
-            <i
-                v-bk-tooltips.top="$t('删除表单')"
-                class="bk-icon icon-delete"
-                style="font-size: 12px;"
-                @click="handleBtnClick('delete')">
-            </i>
+        <div class="detail-section-content">
+            <div class="bound-info-form">
+                <div class="label">{{ $t('关联数据表：') }}</div>
+                <div class="content">
+                    <div class="form-bound-wrapper">
+                        <a class="form-table-name" target="_blank" :href="tableDetailUrl">{{ formDetail.tableName }}</a>
+                        <div class="btns">
+                            <i
+                                v-bk-tooltips.top="$t('编辑表单')"
+                                class="bk-drag-icon bk-drag-edit edit-icon"
+                                @click="handleBtnClick('edit')">
+                            </i>
+                            <i
+                                v-bk-tooltips.top="$t('预览表单')"
+                                class="bk-drag-icon bk-drag-visible-eye preview-icon"
+                                @click="handleBtnClick('preview')">
+                            </i>
+                            <i
+                                v-bk-tooltips.top="$t('删除表单')"
+                                class="bk-icon icon-delete delete-icon"
+                                style="font-size: 12px;"
+                                @click="handleBtnClick('delete')">
+                            </i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 流程第一个节点为人工节点时，才有该表单项 -->
+            <div v-if="isFirstAndManualNode" class="bound-info-form">
+                <div class="label">{{ $t('关联表单页：') }}</div>
+                <div class="content">
+                    <PageBoundEditor
+                        type="widget-form-container"
+                        :is-tag-view-mode="true"
+                        :tpl-id="tplId"
+                        :node-id="nodeId"
+                        :formId="formType === 'USE_FORM' ? relatedId : formId"
+                        :fields="fields"
+                        :pages="containerPages.formContainer"
+                        @update="handleUpdateContainerPages('formContainer', $event)" />
+                </div>
+            </div>
+            <div class="bound-info-form">
+                <div class="label">{{ $t('关联数据管理页：') }}</div>
+                <div class="content">
+                    <PageBoundEditor
+                        type="widget-data-manage-container"
+                        :is-tag-view-mode="true"
+                        :tpl-id="tplId"
+                        :node-id="nodeId"
+                        :formId="formType === 'USE_FORM' ? relatedId : formId"
+                        :pages="containerPages.dataManageContainer"
+                        :fields="fields"
+                        @update="handleUpdateContainerPages('dataManageContainer', $event)" />
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -32,13 +67,21 @@
     import { defineComponent, ref, computed, onMounted } from 'vue'
     import { useStore } from '@/store'
     import { useRoute, useRouter } from '@/router'
+    import PageBoundEditor from './page-bound-editor.vue'
 
     export default defineComponent({
         name: 'BoundDetailSection',
+        components: {
+            PageBoundEditor
+        },
         props: {
+            tplId: Number,
+            nodeId: String,
             formType: String,
             formId: Number,
-            relatedId: Number
+            relatedId: Number,
+            containerPages: Object,
+            isFirstAndManualNode: Boolean
         },
         setup (props, { emit }) {
 
@@ -63,6 +106,14 @@
                 return {}
             })
 
+            const fields = computed(() => {
+                if (formDetail.value.content) {
+                    return JSON.parse(formDetail.value.content)
+                }
+                return []
+            })
+
+            // 关联数据表跳转链接
             const tableDetailUrl = computed(() => {
                 if (formDetail.value) {
                     const route = router.resolve({ name: 'dataManage', query: { tableName: formDetail.value.tableName } })
@@ -75,6 +126,7 @@
                 getFormList()
             })
 
+            // 获取表单列表
             const getFormList = async() => {
                 formListLoading.value = true
                 const params = {
@@ -85,6 +137,13 @@
                 formListLoading.value = false
             }
 
+            const handleUpdateContainerPages = (type, { pages, refresh }) => {
+                emit('updateContainerPages', {
+                    pages: { ...props.containerPages, [type]: pages.slice()},
+                    refresh
+                })
+            }
+
             const handleBtnClick = (action) => {
                 if (action === 'edit') {
                     emit('edit')
@@ -98,8 +157,10 @@
                 typeNameMap,
                 formListLoading,
                 formDetail,
+                fields,
                 tableDetailUrl,
-                handleBtnClick
+                handleBtnClick,
+                handleUpdateContainerPages
             }
         }
     })
@@ -107,10 +168,10 @@
 <style lang="postcss" scoped>
     .bound-detail-section {
         position: relative;
-        padding: 10px 100px 12px 24px;
+        padding: 10px 24px 12px 24px;
         border: 1px solid #c4c6cc;
         border-radius: 2px;
-        .title-area {
+        .detail-section-title {
             display: flex;
             align-items: center;
             h5 {
@@ -134,39 +195,63 @@
                 transform: scale(0.83);
             }
         }
-        .bound-form-table {
-            margin-top: 4px;
+        .detail-section-content {
+            margin-top: 12px;
+        }
+        .bound-info-form {
+            display: flex;
+            align-items: flex-start;
             font-size: 12px;
             color: #63656e;
-            .form-table-name {
-                min-width: 80px;
-                max-width: 168px;
-                color: #3a84ff;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
+            &:not(:first-of-type) {
+                margin-top: 4px;
             }
-        }
-        .operate-btns {
-            position: absolute;
-            top: 50%;
-            right: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: 70px;
-            transform: translateY(-50%);
-            i {
-                cursor: pointer;
-                &:hover {
+            .label {
+                flex-shrink: 0;
+                width: 140px;
+                text-align: right;
+            }
+            .content {
+                flex: 1;
+                overflow: hidden;
+                .form-bound-wrapper {
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden;
+                    &:hover {
+                        .btns {
+                            display: flex;
+                        }
+                    }
+                }
+                .form-table-name {
                     color: #3a84ff;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .btns {
+                    display: none;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-left: 4px;
+                    height: 30px;
+                    i {
+                        cursor: pointer;
+                        &:hover {
+                            color: #3a84ff;
+                        }
+                    }
+                    .edit-icon {
+                        font-size: 20px;
+                    }
+                    .preview-icon {
+                        font-size: 16px;
+                    }
+                    .delete-icon {
+                        margin-left: 4px;
+                    }
                 }
-            }
-            .edit-icon {
-                font-size: 20px;
-            }
-            .preview-icon {
-                font-size: 16px;
             }
         }
     }
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/index.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/index.vue
index 579cacddf..769331617 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/index.vue
@@ -8,9 +8,14 @@
             @selected="emit('select', $event)" />
         <bound-detail
             v-else
+            :tpl-id="tplId"
+            :node-id="nodeId"
             :form-type="config.formType"
             :form-id="config.formId"
             :related-id="config.relatedId"
+            :container-pages="containerPages"
+            :is-first-and-manual-node="isFirstAndManualNode"
+            @updateContainerPages="emit('updateContainerPages', $event)"
             @preview="handleOpenPreview"
             @edit="handleOpenEdit"
             @delete="emit('delete')" />
@@ -31,17 +36,26 @@
             PreviewFormDialog,
         },
         props: {
+            tplId: Number,
+            nodeId: String,
             nodes: {
                 type: Array,
                 default: () => []
             },
+            containerPages: {
+                type: Object,
+                default: () => ({
+                    formContainer: [],
+                    dataManageContainer: []
+                })
+            },
             config: {
                 type: Object,
                 default: () => ({})
-            }
+            },
+            isFirstAndManualNode: Boolean
         },
         setup (props, { emit }) {
-
             const previewDialogData = ref({
                 show: false,
                 fields: []
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/page-bound-editor.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/page-bound-editor.vue
new file mode 100644
index 000000000..23f2593d5
--- /dev/null
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/form-binding-config/page-bound-editor.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="page-bound-editor">
+    <bk-select
+        v-if="isEditMode || !isTagViewMode"
+        :value="pages"
+        ref="selectRef"
+        multiple
+        display-tag
+        auto-height
+        searchable
+        @toggle="handleSelectToggle"
+        @change="handleChange">
+        <bk-option v-for="option in pageList" :key="option.pageId" :id="option.pageId" :name="option.pageName" />
+        <div slot="extension" class="selector-extension" @click="handleCreatePage">
+            <i class="bk-icon icon-plus-circle"></i>
+            {{ $t('新建关联') }}
+        </div>
+    </bk-select>
+    <div v-else class="bound-pages-view">
+      <div class="page-tags">
+        <TagsViewer
+            v-if="relatedPageNames.length > 0"
+            :tags="relatedPageNames"
+            :max-width="445"
+            @tagClick="handlePageTagClick" />
+        <template v-else>--</template>
+      </div>
+      <i class="bk-drag-icon bk-drag-edit edit-icon" @click="handleEdit" />
+    </div>
+    <CreatePageDialog ref="createPageDialogRef" platform="PC" :use-custom-save="true" @save="onCreatePageConfirm" />
+  </div>
+</template>
+
+<script>
+    import { defineComponent, ref, computed, nextTick } from 'vue'
+    import { useStore } from '@/store'
+    import { useRouter } from '@/router'
+    import { createNode } from '@/element-materials/core/static/create-node'
+    import TagsViewer from '../../../../components/tags-viewer.vue'
+    import CreatePageDialog from '@/components/project/create-page-dialog.vue'
+
+    export default defineComponent({
+        name: 'PageBoundEditor',
+        components: {
+            TagsViewer,
+            CreatePageDialog
+        },
+        props: {
+            isTagViewMode: Boolean, // 查看态是否用标签模式展示
+            type: String,
+            tplId: Number,
+            formId: Number,
+            nodeId: String,
+            nodes: {
+                type: Array,
+                default: () => []
+            },
+            fields: {
+                type: Array,
+                default: () => []
+            },
+            pages: {
+                type: Array,
+                default: () => []
+            }
+        },
+        setup (props, { emit }) {
+            const store = useStore()
+            const router = useRouter()
+
+            const isEditMode = ref(false)
+            const selectRef = ref(null)
+            const createPageDialogRef = ref(null)
+
+            const projectId = computed(() => store.getters['project/currentProjectId'])
+            const pageList = computed(() => store.state.route.layoutPageList.filter(item => item.pageType === 'PC'))
+            const relatedPageNames = computed(() => {
+                return props.pages.map(item => {
+                    const page = pageList.value.find(page => page.pageId === item)
+                    return page ? page.pageName : item
+                })
+            })
+
+            const handleEdit = () => {
+                isEditMode.value = true
+                nextTick(() => {
+                  selectRef.value.show()
+                })
+            }
+
+            const handleSelectToggle = (val) => {
+                if (val === false) {
+                    isEditMode.value = false
+                }
+            }
+
+            const handleCreatePage = () => {
+                createPageDialogRef.value.isShow = true
+            }
+
+            // 新建页面弹窗点击确定按钮后的回调，新建页面后将容器组件配置更新到页面content字段
+            const onCreatePageConfirm = async () => {
+                const pageDetail = await createPageDialogRef.value.save()
+
+                const config = createNode(props.type, store.getters['project/projectDetail'].framework).toJSON()
+                if (props.type === 'widget-flow-manage-container') {
+                    const nodeList = props.nodes.filter(node => node.type === 'Manual').map(node => ({
+                        ...node,
+                        label: node.config.name,
+                        hideFilters: false,
+                        buttons: [],
+                        filters: [],
+                        fields: [],
+                        tableColsExclude: [],
+                        tableRowActions: [],
+                        queryData: {},
+                    }))
+
+                    config.renderProps.id.code = props.tplId
+                    config.renderProps.id.renderValue = props.tplId
+                    config.renderProps.nodeList.code = nodeList
+                    config.renderProps.nodeList.renderValue = nodeList
+                } else if (props.type === 'widget-form-container') {
+                    const dataSource = {
+                        action: 'executeFlow',
+                        flowTplId: props.tplId,
+                        nodeId: props.nodeId,
+                        type: "USE_FORM",
+                        relatedId: props.formId,
+                        id: '',
+                        tableName: ''
+                    }
+                    config.renderProps.dataSource.code = dataSource
+                    config.renderProps.dataSource.renderValue = dataSource
+                    config.renderProps.fields.code = props.fields
+                    config.renderProps.fields.renderValue = props.fields
+                } else if (props.type === 'widget-data-manage-container') {
+                    config.renderProps.flowTplId.code = props.tplId
+                    config.renderProps.flowTplId.renderValue = props.tplId
+                    config.renderProps.nodeId.code = props.nodeId
+                    config.renderProps.nodeId.renderValue = props.nodeId
+                    config.renderProps.formId.code = props.formId
+                    config.renderProps.formId.renderValue = props.formId
+                }
+
+                await store.dispatch('flow/tpl/updateRelatedPageContent', {
+                    params: {
+                        pageId: pageDetail.id,
+                        content: JSON.stringify([config])
+                    }
+                })
+                createPageDialogRef.value.isShow = false
+
+                store.dispatch('route/getProjectPageRoute', {
+                    projectId: projectId.value,
+                    versionId: store.getters['projectVersion/currentVersionId']
+                })
+
+                emit('update', { pages: [...props.pages, pageDetail.id], refresh: true })
+
+                const { href } = router.resolve({ name: 'new', params: { project: projectId.value, pageId: pageDetail.id } })
+                window.open(href, '_blank')
+            }
+
+            const handleChange = (pages) => {
+                emit('update', { pages, refresh: false })
+            }
+
+            const handlePageTagClick = (val) => {
+                const page = pageList.value.find(page => page.pageName === val);
+                if (page) {
+                    // 新标签页打开页面编辑画布
+                    window.open(`/project/${projectId.value}/page/${page.pageId}/`, '_blank')
+                }
+            }
+
+            return {
+                isEditMode,
+                pageList,
+                relatedPageNames,
+                selectRef,
+                createPageDialogRef,
+                handleEdit,
+                handleSelectToggle,
+                handleChange,
+                handleCreatePage,
+                handlePageTagClick,
+                onCreatePageConfirm
+            }
+        }
+    })
+
+</script>
+<style lang="postcss" scoped>
+    .bound-pages-view {
+      display: flex;
+      align-items: center;
+      &:hover {
+        .edit-icon {
+            display: inline-block;
+        }
+      }
+    }
+    .edit-icon {
+        display: none;
+        font-size: 20px;
+        cursor: pointer;
+        &:hover {
+            color: #3a84ff;
+        }
+    }
+    .selector-extension {
+        text-align: center;
+        cursor: pointer;
+    }
+</style>
\ No newline at end of file
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/index.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/index.vue
index 3fbf5249d..effccbf98 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/index.vue
@@ -10,13 +10,18 @@
                 <node-processor :processor="nodeData.config.processor" @change="handleChange('processor', $event)" />
             </form-section>
             <form-section :title="$t('表单配置')">
-                <bk-form-item>
+                <bk-form-item property="formType" error-display-type="normal">
                     <form-binding-config
+                        :tpl-id="tplId"
+                        :node-id="nodeData.id"
                         :nodes="nodes"
                         :config="nodeData.config"
+                        :container-pages="containerPages"
+                        :is-first-and-manual-node="isFirstAndManualNode"
                         @edit="handleOpenNodeFieldsEdit"
                         @select="handleSelectBinding"
-                        @delete="handleDeleteBinding" />
+                        @delete="handleDeleteBinding"
+                        @updateContainerPages="handleUpdateContainerPages" />
                 </bk-form-item>
             </form-section>
         </bk-form>
@@ -29,12 +34,14 @@
             :form-type="nodeFieldsCanvasData.data.formType"
             :form-id="nodeFieldsCanvasData.data.formId"
             :related-id="nodeFieldsCanvasData.data.relatedId"
+            @backToFlow="emit('close')"
             @close="nodeFieldsCanvasData.show = false"
             @saved="handleFieldsCanvasFormSaved" />
     </div>
 </template>
 <script>
-    import { defineComponent, ref, getCurrentInstance } from 'vue'
+    import { inject, defineComponent, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+    import { difference, cloneDeep } from 'lodash'
     import FormSection from '../components/form-section.vue'
     import NodeName from '../components/node-name.vue'
     import NodeProcessor from '../components/node-processor.vue'
@@ -43,6 +50,7 @@
     import { useStore } from '@/store'
     import { useRoute } from '@/router'
     import { uuid } from '@/common/util'
+    import { createNode } from '@/element-materials/core/static/create-node'
 
     export default defineComponent({
         name: 'ManualNodeConfig',
@@ -63,9 +71,12 @@
             detail: {
                 type: Object,
                 default: () => ({})
-            }
+            },
+            isFirstAndManualNode: Boolean
         },
         setup (props, { emit }) {
+            const { register, unregister } = inject('saveContext')
+
             const store = useStore()
             const route = useRoute()
             const instance = getCurrentInstance()
@@ -77,11 +88,27 @@
                         message: window.i18n.t('必填项'),
                         trigger: 'blur'
                     }
+                ],
+                formType: [
+                    {
+                        required: true,
+                        message: window.i18n.t('人工节点表单配置不能为空'),
+                        trigger: 'blur'
+                    }
                 ]
             }
 
             const nodeData = ref(JSON.parse(JSON.stringify(props.detail)))
             const basicFormRef = ref(null)
+            const relatedPages = ref({ // 关联页面原数据
+                formContainer: [],
+                dataManageContainer: []
+            })
+            const relatedPagesLoading = ref(false)
+            const containerPages = ref({ // 关联页面编辑数据
+                formContainer: [],
+                dataManageContainer: []
+            })
             const nodeFieldsCanvasData = ref({
                 show: false,
                 data: {
@@ -91,6 +118,14 @@
                 }
             })
 
+            onMounted(() => {
+                getRelatedPages()
+                register(saveRelatedPages)
+            })
+            onUnmounted(() => {
+                unregister(saveRelatedPages)
+            })
+
             const handleOpenNodeFieldsEdit = ({ formType, formId, relatedId }) => {
                 nodeFieldsCanvasData.value = {
                     show: true,
@@ -125,7 +160,7 @@
                     width: 600,
                     extCls: 'delete-page-dialog',
                     title: window.i18n.t('确认删除表单配置？'),
-                    subTitle: window.i18n.t('已生成的关联数据表及表数据将继续保留'),
+                    subTitle: window.i18n.t('已生成的关联表单页容器组件将被移除，关联数据管理页容器组件、关联数据表及表数据将继续保留'),
                     theme: 'danger',
                     confirmLoading: true,
                     confirmFn: async () => {
@@ -134,11 +169,122 @@
                         nodeData.value.config.relatedId = 0
                         nodeData.value.isDraft = true
                         updateNodeBinding(true)
+                        // 移除关联页面对应的表单容器
+                        containerPages.value.formContainer = []
+                        saveRelatedPages()
                         return true
                     }
                 })
             }
 
+             // 获取关联页面列表
+             const getRelatedPages = async() => {
+                relatedPagesLoading.value = true
+                const res = await store.dispatch('flow/tpl/getRelatedPages', {
+                    tplId: props.tplId,
+                    params: {
+                        versionId: store.getters['projectVersion/currentVersionId'],
+                        containers: ['formContainer', 'dataManageContainer'],
+                        nodeId: nodeData.value.id
+                    }
+                })
+
+                relatedPages.value = {
+                    formContainer: (res.formContainer || []).map(item => item.id),
+                    dataManageContainer: (res.dataManageContainer || []).map(item => item.id)
+                }
+                containerPages.value = cloneDeep(relatedPages.value)
+                relatedPagesLoading.value = false
+            }
+
+            const handleUpdateContainerPages = ({ pages, refresh }) => {
+                containerPages.value = pages
+                if (refresh) {
+                    relatedPages.value = cloneDeep(containerPages.value)
+                }
+            }
+
+            const getPagesDiffConfig = async () => {
+                const diff = {
+                    added: {},
+                    removed: {
+                        formContainer: [],
+                        dataManageContainer: []
+                    }
+                }
+                const { formType, formId, relatedId } = nodeData.value.config
+                const nodeFormId = formType === 'USE_FORM' ? relatedId : formId
+
+                const formList = await store.dispatch('nocode/form/getNewFormList', {
+                    projectId: route.params.projectId,
+                    versionId: store.getters['projectVersion/currentVersionId'],
+                })
+                const formDetail = formList.find(form => form.id === nodeFormId)
+
+                for (let containerType in containerPages.value) {
+                    const addedIds = difference(containerPages.value[containerType], relatedPages.value[containerType])
+                    const removedIds = difference(relatedPages.value[containerType], containerPages.value[containerType])
+                    if (addedIds.length > 0) {
+
+                        addedIds.forEach(pageId => {
+                            const type = containerType === 'formContainer' ? 'widget-form-container' : 'widget-data-manage-container'
+                            const config = createNode(type, store.getters['project/projectDetail'].framework).toJSON()
+
+                            if (containerType === 'formContainer') {
+                                const dataSource = {
+                                    action: 'executeFlow',
+                                    flowTplId: props.tplId,
+                                    nodeId: nodeData.value.id,
+                                    type: "USE_FORM",
+                                    relatedId: nodeFormId,
+                                    id: '',
+                                    tableName: ''
+                                }
+                                const fields = JSON.parse(formDetail.content || '[]')
+                                config.renderProps.dataSource.code = dataSource
+                                config.renderProps.dataSource.renderValue = dataSource
+                                config.renderProps.fields.code = fields
+                                config.renderProps.fields.renderValue = fields
+                            } else {
+                                config.renderProps.flowTplId.code = props.tplId
+                                config.renderProps.flowTplId.renderValue = props.tplId
+                                config.renderProps.nodeId.code = nodeData.value.id
+                                config.renderProps.nodeId.renderValue = nodeData.value.id
+                                config.renderProps.formId.code = nodeFormId
+                                config.renderProps.formId.renderValue = nodeFormId
+                            }
+
+                            if (!diff.added[pageId]) {
+                                diff.added[pageId] = [config]
+                            } else {
+                                diff.added[pageId].push(config)
+                            }
+                        })
+                    }
+                    if (removedIds.length > 0) {
+                        diff.removed[containerType] = removedIds.map(id => ({
+                            pageId: id,
+                            nodeId: nodeData.value.id
+                        }))
+                    }
+                }
+                return diff
+            }
+
+            const saveRelatedPages = async() => {
+                const pagesDiffConfig = await getPagesDiffConfig()
+
+                await store.dispatch('flow/tpl/updateRelatedPages', {
+                    params: {
+                        versionId: store.getters['projectVersion/currentVersionId'],
+                        tplId: props.tplId,
+                        added: pagesDiffConfig.added,
+                        removed: pagesDiffConfig.removed
+                    }
+                })
+                relatedPages.value = cloneDeep(containerPages.value)
+            }
+
             // 表单画布编辑后保存
             const handleFieldsCanvasFormSaved = ({ formId, formType }) => {
                 nodeFieldsCanvasData.value.data.formId = formId
@@ -176,13 +322,17 @@
                 rules,
                 nodeData,
                 basicFormRef,
+                containerPages,
+                relatedPagesLoading,
                 nodeFieldsCanvasData,
                 handleSelectBinding,
                 handleDeleteBinding,
                 handleOpenNodeFieldsEdit,
+                handleUpdateContainerPages,
                 handleFieldsCanvasFormSaved,
                 handleChange,
-                validate
+                validate,
+                emit
             }
         }
     })
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/node-fields-canvas/index.vue b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/node-fields-canvas/index.vue
index 91b87dd61..114e45a87 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/node-fields-canvas/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/canvas/node-detail/manual-node/node-fields-canvas/index.vue
@@ -10,7 +10,9 @@
                         :node-name="nodeName"
                         :form-name="formName"
                         :editable="editable"
-                        @change="formName = $event" />
+                        @change="formName = $event"
+                        @backToFlow="handleBack(true)"
+                        @backToNode="handleBack" />
                 </div>
                 <div class="operate-btns">
                     <save-btn
@@ -120,13 +122,17 @@
                 loading.value = false
             }
 
-            const handleBack = () => {
+            const handleBack = (isBackToFlow = false) => {
                 instance.proxy.$bkInfo({
                     title: window.i18n.t('确认离开'),
                     okText: window.i18n.t('离开'),
                     subTitle: window.i18n.t('您将离开画布编辑页面，请确认相应修改已保存'),
                     confirmFn: async () => {
-                        emit('close')
+                        if (isBackToFlow) {
+                            emit('backToFlow')
+                        } else {
+                            emit('close')
+                        }
                     }
                 })
             }
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/components/tags-viewer.vue b/lib/client/src/views/project/flow-manage/tpl-edit/components/tags-viewer.vue
new file mode 100644
index 000000000..828ca499a
--- /dev/null
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/components/tags-viewer.vue
@@ -0,0 +1,124 @@
+<template>
+    <div class="tags-viewer" ref="tagsViewerRef">
+        <div class="tag-items-wrapper" ref="tagListRef">
+            <bk-tag v-for="tag in visibleTags" :key="tag" v-bk-overflow-tips @click="handleClick(tag)">
+                {{ tag }}
+            </bk-tag>
+            <bk-popover v-if="hiddenTags.length > 0" theme="light" :max-width="500">
+                <bk-tag ref="moreTagRef" class="more-tag"> +{{ hiddenTags.length }} </bk-tag>
+                <template #content>
+                    <div class="more-tags-content">
+                        <bk-tag v-for="tag in hiddenTags" :key="tag" @click="handleClick(tag)">{{ tag }}</bk-tag>
+                    </div>
+                </template>
+            </bk-popover>
+        </div>
+    </div>
+</template>
+<script>
+    import { defineComponent, ref, watch, onMounted, nextTick } from 'vue'
+
+    export default defineComponent({
+        name: 'TagsViewer',
+        props: {
+            tags: Array,
+            maxWidth: Number
+        },
+        setup(props, { emit }) {
+            const visibleTags = ref([])
+            const hiddenTags = ref(props.tags.slice())
+            const tagsViewerRef = ref(null)
+            const tagListRef = ref(null)
+            const moreTagRef = ref(null)
+
+            watch(() => props.tags, async() => {
+                visibleTags.value = []
+                hiddenTags.value = props.tags.slice()
+                await nextTick()
+                calcLayout()
+            })
+
+            onMounted(() => {
+                calcLayout()
+            })
+
+            const calcLayout = async() => {
+                const containerWidth = typeof props.maxWidth === 'number' ? props.maxWidth : (tagsViewerRef.value?.offsetWidth || 0)
+                if (containerWidth === 0) return
+
+
+                for(let i = 0; i < props.tags.length; i++) {
+                    if (tagListRef.value?.offsetWidth < containerWidth) {
+                        if (hiddenTags.value.length > 0) {
+                            const tag = hiddenTags.value.shift()
+                            visibleTags.value.push(tag)
+                        }
+                        await nextTick();
+                        if (tagListRef.value?.offsetWidth > containerWidth) {
+                            // 至少显示1个tag标签
+                            if (i > 0) {
+                                const lastTag = visibleTags.value.pop()
+                                hiddenTags.value.unshift(lastTag)
+                            } else {
+                                tagListRef.value.style.width = `${containerWidth}px`
+                            }
+                            break;
+                        }
+                    } else {
+                        tagListRef.value.style.width = `${containerWidth}px`
+                        break;
+                    }
+                }
+            };
+
+            const handleClick = (tag) => {
+                emit('tagClick', tag)
+            }
+
+            return {
+                visibleTags,
+                hiddenTags,
+                tagsViewerRef,
+                tagListRef,
+                moreTagRef,
+                handleClick
+            }
+        },
+    })
+</script>
+<style lang="postcss" scoped>
+    .tags-viewer {
+        width: 100%;
+        overflow: hidden;
+    }
+    .tag-items-wrapper {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        height: 100%;
+        overflow: hidden;
+        & > .bk-tooltip {
+            flex-shrink: 0;
+        }
+        & > .bk-tag {
+            overflow: hidden;
+        }
+    }
+    .bk-tag {
+        flex: 0 1 auto;
+        margin-left: 0;
+        min-width: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+
+    }
+    .more-tags-content {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        .bk-tag {
+            flex-shrink: 0;
+        }
+    }
+</style>
diff --git a/lib/client/src/views/project/flow-manage/tpl-edit/config/index.vue b/lib/client/src/views/project/flow-manage/tpl-edit/config/index.vue
index c66db25df..e57726fd0 100644
--- a/lib/client/src/views/project/flow-manage/tpl-edit/config/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-edit/config/index.vue
@@ -19,6 +19,14 @@
                             :placeholder="$t('请输入流程模板名称')"
                             :show-word-limit="true" />
                     </bk-form-item>
+                    <bk-form-item :label="$t('关联流程管理页')">
+                            <PageBoundEditor
+                                type="widget-flow-manage-container"
+                                :pages="flowContainerPages"
+                                :tpl-id="tplDetail.id"
+                                :nodes="JSON.parse(tplDetail.nodes || '[]')"
+                                @update="handleUpdateFlowContainerPages"/>
+                    </bk-form-item>
                 </section>
                 <section class="form-section">
                     <h4>
@@ -53,12 +61,16 @@
     </section>
 </template>
 <script>
+    import { mapState, mapGetters } from 'vuex'
+    import { createNode } from '@/element-materials/core/static/create-node'
     import NotifyTypeConfig from './notify-type-config.vue'
+    import PageBoundEditor from '../canvas/node-detail/manual-node/form-binding-config/page-bound-editor.vue'
 
     export default {
         name: 'FlowTplConfig',
         components: {
-            NotifyTypeConfig
+            NotifyTypeConfig,
+            PageBoundEditor
         },
         props: {
             tplDetail: {
@@ -79,6 +91,10 @@
                     },
                     summary: ''
                 },
+                relatedPages: [],
+                relatedPagesLoading: false,
+                flowContainerPages: [],
+                createRelatedPageShow: false,
                 pending: false,
                 rules: {
                     name: [
@@ -91,6 +107,18 @@
                 }
             }
         },
+        computed: {
+            ...mapState({
+                pageList: state => state.route.layoutPageList.filter(item => item.pageType === 'PC')
+                
+            }),
+            ...mapGetters('projectVersion', {
+                versionId: 'currentVersionId'
+            }),
+            ...mapGetters('project', {
+                projectDetail: 'projectDetail'
+            })
+        },
         watch: {
             tplDetail: {
                 handler (val) {
@@ -104,10 +132,47 @@
                 immediate: true
             }
         },
+        mounted () {
+            this.getRelatedPages()
+        },
         methods: {
+            async getRelatedPages () {
+                this.relatedPagesLoading = true
+                const { flowManageContainer } = await this.$store.dispatch('flow/tpl/getRelatedPages', {
+                    tplId: this.tplDetail.id,
+                    params: {
+                        versionId: this.versionId,
+                        containers: ['flowManageContainer'],
+                    }
+                })
+                this.relatedPages = flowManageContainer.map(page => page.id)
+                this.flowContainerPages = this.relatedPages.slice()
+                this.relatedPagesLoading = false
+            },
+            handleUpdateFlowContainerPages ({ pages, refresh }) {
+                this.flowContainerPages = pages
+                if (refresh) {
+                    this.relatedPages = [...pages]
+                }
+            },
             handleNotifyChange (val) {
                 this.formData.notifyConfig = val
             },
+            getPagesDiff () {
+                const setA = new Set(this.relatedPages);
+                const setB = new Set(this.flowContainerPages);
+
+                const added = Array.from(setB).filter(x => !setA.has(x));
+                const removed = Array.from(setA).filter(x => !setB.has(x));
+
+                return { added, removed };
+            },
+            getFlowManageContainerConfig () {
+                const config = createNode('widget-flow-manage-container', this.projectDetail.framework).toJSON()
+                config.renderProps.id.code = this.tplDetail.id
+                config.renderProps.id.renderValue = this.tplDetail.id
+                return config
+            },
             async handleSave () {
                 await this.$refs.configForm.validate()
                 const { name, notifyConfig, summary } = this.formData
@@ -117,7 +182,31 @@
                     summary,
                     notifyConfig: JSON.stringify(notifyConfig)
                 }
-                this.$store.dispatch('flow/tpl/updateFlowTpl', data)
+                await this.$store.dispatch('flow/tpl/updateFlowTpl', data)
+
+                // 更新关联页面
+                const pagesDiff = this.getPagesDiff()
+                if (pagesDiff.added.length || pagesDiff.removed.length) {
+                    await this.$store.dispatch('flow/tpl/updateRelatedPages', {
+                        params: {
+                            versionId: this.versionId,
+                            tplId: this.tplDetail.id,
+                            added: pagesDiff.added.reduce((acc, cur) => {
+                                const config = this.getFlowManageContainerConfig()
+                                if (acc[cur]) {
+                                    acc[cur].push(config)
+                                } else {
+                                    acc[cur] = [config]
+                                }
+                                return acc
+                            }, {}),
+                            removed: {
+                               flowManageContainer: pagesDiff.removed.map(pageId => ({ pageId }))
+                            }
+                        }
+                    })
+                    this.relatedPages = this.flowContainerPages.slice()
+                }
                 this.$bkMessage({
                     theme: 'success',
                     message: '保存成功'
diff --git a/lib/client/src/views/project/flow-manage/tpl-list/index.vue b/lib/client/src/views/project/flow-manage/tpl-list/index.vue
index 8506c1102..316ee13f4 100644
--- a/lib/client/src/views/project/flow-manage/tpl-list/index.vue
+++ b/lib/client/src/views/project/flow-manage/tpl-list/index.vue
@@ -7,7 +7,23 @@
             :closable="true">
         </bk-alert>
         <div class="operation-area">
-            <bk-button theme="primary" @click="isCreateDialogShow = true">{{ $t('新建') }}</bk-button>
+            <div class="btns-wrapper">
+                <bk-button theme="primary" @click="isCreateDialogShow = true">{{ $t('新建') }}</bk-button>
+                <bk-select
+                    v-model="workbenchRelatedIds"
+                    multiple
+                    searchable
+                    class="workbench-related-select"
+                    :popover-width="300"
+                    @toggle="handleWorkbenchSelectToggle">
+                    <bk-button slot="trigger" :loading="workbenchPagesLoading">{{ `${$t('关联流程工作台页')}（${workbenchPages.length}）` }}</bk-button>
+                    <bk-option v-for="option in pageListOptions" :key="option.pageId" :id="option.pageId" :name="option.pageName" />
+                    <div slot="extension" class="selector-extension" @click="$refs.createPageDialogRef.isShow = true">
+                        <i class="bk-icon icon-plus-circle"></i>
+                        {{ $t('新建关联') }}
+                    </div>
+                </bk-select>
+            </div>
             <div class="search-wrapper">
                 <bk-input
                     v-model="keyword"
@@ -54,13 +70,22 @@
                     </div>
                 </template>
             </bk-table-column>
+            <bk-table-column :label="$t('关联流程管理页')">
+                <template slot-scope="{ row }">
+                    <TagsViewer
+                        v-if="row.flowManagePages.length"
+                        :tags="row.flowManagePages.map(item => item.name)"
+                        @tagClick="handlePageClick($event, row.flowManagePages)" />
+                    <template v-else>--</template>
+                </template>
+            </bk-table-column>
             <bk-table-column :label="$t('table_创建人')" property="createUser"></bk-table-column>
             <bk-table-column :label="$t('table_创建时间')" show-overflow-tooltip>
                 <template slot-scope="{ row }">
                     {{ row.createTime | timeFormatter }}
                 </template>
             </bk-table-column>
-            <bk-table-column :label="$t('操作')" width="140">
+            <bk-table-column :label="$t('操作')" fixed="right" width="140">
                 <template slot-scope="{ row }">
                     <router-link
                         class="link-btn"
@@ -87,14 +112,18 @@
             <empty-status slot="empty" :type="emptyType" @clearSearch="handlerClearSearch"></empty-status>
         </bk-table>
         <create-flow-dialog :show.sync="isCreateDialogShow"></create-flow-dialog>
+        <create-page-dialog ref="createPageDialogRef" platform="PC" :use-custom-save="true" @save="handleCreateWorkbenchPageConfirm" />
     </div>
 </template>
 <script>
     import dayjs from 'dayjs'
     import { mapGetters } from 'vuex'
     import { getRouteFullPath } from 'shared/route'
-    import CreateFlowDialog from './create-flow-dialog.vue'
     import { renderHeaderAddTitle } from '@/common/util'
+    import { createNode } from '@/element-materials/core/static/create-node'
+    import CreatePageDialog from '@/components/project/create-page-dialog.vue'
+    import CreateFlowDialog from './create-flow-dialog.vue'
+    import TagsViewer from '../tpl-edit/components/tags-viewer.vue'
 
     export default {
         name: 'flowList',
@@ -104,10 +133,15 @@
             }
         },
         components: {
-            CreateFlowDialog
+            CreatePageDialog,
+            CreateFlowDialog,
+            TagsViewer,
         },
         data () {
             return {
+                workbenchPagesLoading: false,
+                workbenchPages: [],
+                workbenchRelatedIds: [],
                 flowList: [],
                 pageRouteList: [],
                 listLoading: true,
@@ -126,32 +160,41 @@
         },
         computed: {
             ...mapGetters('projectVersion', { versionId: 'currentVersionId' }),
+            ...mapGetters('project', { projectDetail: 'projectDetail' }),
             projectId () {
                 return this.$route.params.projectId
             },
-            routeMap () {
-                const routeMap = {}
-                this.pageRouteList.forEach((route) => {
-                    const { id, pageId, layoutId } = route
-                    routeMap[pageId] = {
-                        id,
-                        pageId,
-                        layoutId,
-                        fullPath: id ? getRouteFullPath(route) : null
+            pageListOptions () {
+                const pageList = this.pageRouteList.slice()
+                const pinToTopPages = []
+                this.workbenchPages.forEach((page) => {
+                    const index = pageList.findIndex(item => page.id === item.id)
+                    if (index > -1) {
+                        const page = pageList.splice(index, 1)[0]
+                        pinToTopPages.push(page)
                     }
                 })
-                return routeMap
+                return [...pinToTopPages, ...pageList]
             }
         },
         mounted () {
-            this.getPageRouteList()
-            this.getFlowList()
+            this.initData()
         },
         methods: {
+            async initData () {
+                await this.getWorkbenchPages()
+                this.getPageRouteList()
+                this.getFlowList()
+            },
+            async getWorkbenchPages () {
+                this.workbenchPagesLoading = true
+                this.workbenchPages = await this.$store.dispatch('flow/tpl/getRelatedWokbenchPages')
+                this.workbenchRelatedIds = this.workbenchPages.map(page => page.id)
+                this.workbenchPagesLoading = false
+            },
             async getPageRouteList () {
                 this.pageRouteListLoading = true
-                const res = await this.$store.dispatch('route/query', { projectId: this.projectId, versionId: this.versionId || '' })
-                this.pageRouteList = res
+                this.pageRouteList = await this.$store.dispatch('route/query', { projectId: this.projectId, versionId: this.versionId || '' })
                 this.pageRouteListLoading = false
             },
             async getFlowList () {
@@ -173,6 +216,66 @@
                 this.pagination.count = count
                 this.listLoading = false
             },
+            handleWorkbenchPageClick (id) {
+                window.open(`/project/${this.projectId}/page/${id}/`, '_blank')
+            },
+            async handleWorkbenchSelectToggle (val) {
+                if (!val) {
+                    const setA = new Set(this.workbenchPages.map(page => page.id));
+                    const setB = new Set(this.workbenchRelatedIds);
+                    const addedIds = Array.from(setB).filter(x => !setA.has(x));
+                    const removedIds = Array.from(setA).filter(x => !setB.has(x));
+
+                    if (addedIds.length === 0 && removedIds.length === 0) {
+                        return
+                    }
+
+                    await this.$store.dispatch('flow/tpl/updateRelatedPages', {
+                        params: {
+                            versionId: this.versionId,
+                            added: addedIds.reduce((acc, cur) => {
+                                const config = createNode('widget-flow-workbench-container', this.projectDetail.framework).toJSON()
+                                if (acc[cur]) {
+                                    acc[cur].push(config)
+                                } else {
+                                    acc[cur] = [config]
+                                }
+                                return acc
+                            }, {}),
+                            removed: {
+                                flowWorkbenchContainer: removedIds.map(pageId => ({ pageId })),
+                            }
+                        }
+                    })
+                    this.getWorkbenchPages()
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: this.$t('更新成功')
+                    })
+                }
+            },
+            async handleCreateWorkbenchPageConfirm () {
+                // 新建页面弹窗点击确定按钮后的回调，新建页面后将容器组件配置更新到页面content字段
+                const pageDetail = await this.$refs.createPageDialogRef.save()
+                const config = createNode('widget-flow-workbench-container', this.projectDetail.framework).toJSON()
+                await this.$store.dispatch('flow/tpl/updateRelatedPageContent', {
+                    params: {
+                        pageId: pageDetail.id,
+                        content: JSON.stringify([config])
+                    }
+                })
+                this.$refs.createPageDialogRef.isShow = false
+
+                this.$store.dispatch('route/getProjectPageRoute', {
+                    projectId: this.projectId,
+                    versionId: this.versionId
+                })
+
+                this.getWorkbenchPages()
+
+                const { href } = this.$router.resolve({ name: 'new', params: { project: this.projectId, pageId: pageDetail.id } })
+                window.open(href, '_blank')
+            },
             async handleArchiveConfirm () {
                 const params = {
                     id: this.archiveId,
@@ -204,16 +307,17 @@
                 this.pagination.current = 1
                 this.getFlowList()
             },
-            handlePreviewPage (pageId, pageCode) {
-                const route = this.routeMap[pageId]
-                const versionPath = `${this.versionId ? `/version/${this.versionId}` : ''}`
-                const routerUrl = `/preview/project/${this.projectId}${versionPath}${route.fullPath}?pageCode=${pageCode}`
-                window.open(routerUrl, '_blank')
-            },
             handlerClearSearch (searchName) {
                 this.keyword = searchName
                 this.getFlowList()
             },
+            handlePageClick (val, pageList) {
+                const page = pageList.find(page => page.name === val);
+                if (page) {
+                    // 新标签页打开页面编辑画布
+                    window.open(`/project/${this.$route.params.projectId}/page/${page.id}/`, '_blank')
+                }
+            },
             renderHeaderAddTitle
         }
     }
@@ -228,6 +332,20 @@
         align-items: center;
         justify-content: space-between;
         margin-bottom: 20px;
+        .btns-wrapper {
+            display: flex;
+            align-items: center;
+            .bk-button:not(:last-child) {
+                margin-right: 8px;
+            }
+            .workbench-related-select {
+                border: none;
+            }
+        }
+    }
+    .selector-extension {
+        text-align: center;
+        cursor: pointer;
     }
     .search-wrapper {
         display: flex;
diff --git a/lib/client/src/views/project/template-manage/components/render-template.vue b/lib/client/src/views/project/template-manage/components/render-template.vue
index 312876093..3161a5cf9 100644
--- a/lib/client/src/views/project/template-manage/components/render-template.vue
+++ b/lib/client/src/views/project/template-manage/components/render-template.vue
@@ -72,6 +72,7 @@
     import templateImportDialog from './template-import-dialog'
     import templateMixin from './template-mixin'
     import typeSelect from '@/components/project/type-select'
+    import { filterImgSrc } from '@/common/util'
 
     export default {
         components: {
@@ -257,7 +258,7 @@
             },
             getPreviewImg (previewImg) {
                 if (previewImg && previewImg.length > 30) {
-                    return previewImg
+                    return filterImgSrc(previewImg)
                 }
                 return preivewErrImg
             },
diff --git a/lib/client/src/views/system/template-market.vue b/lib/client/src/views/system/template-market.vue
index 5d00d6074..3be88975a 100644
--- a/lib/client/src/views/system/template-market.vue
+++ b/lib/client/src/views/system/template-market.vue
@@ -223,6 +223,7 @@
     import PagePreviewThumb from '@/components/project/page-preview-thumb.vue'
     import { PROJECT_TEMPLATE_TYPE, PAGE_TEMPLATE_TYPE } from '@/common/constant'
     import { parseFuncAndVar } from '@/common/parse-function-var'
+    import { filterImgSrc } from '@/common/util'
     import LC from '@/element-materials/core'
     import frameworkTag from '@/components/framework-tag.vue'
     import {
@@ -433,7 +434,7 @@
             },
             getPreviewImg (previewImg) {
                 if (previewImg && previewImg.length > 20) {
-                    return previewImg
+                    return filterImgSrc(previewImg)
                 }
                 return preivewErrImg
             },
diff --git a/lib/server/controller/component.js b/lib/server/controller/component.js
index c28372bc6..5d7925b00 100644
--- a/lib/server/controller/component.js
+++ b/lib/server/controller/component.js
@@ -395,8 +395,8 @@ export const create = async (ctx) => {
 // 只修改componenent表字段
 export const updateData = async (ctx) => {
     try {
-        const { id, ...fields } = ctx.request.body
-        const res = await ComponentModel.updateById(id, fields)
+        const { id, categoryId } = ctx.request.body
+        const res = await ComponentModel.updateById(id, { categoryId })
         ctx.send({
             code: 0,
             message: 'success',
diff --git a/lib/server/controller/data-source.js b/lib/server/controller/data-source.js
index c252e7644..90e0f91d2 100644
--- a/lib/server/controller/data-source.js
+++ b/lib/server/controller/data-source.js
@@ -167,6 +167,7 @@ export default class DataSourceController {
     @ProjectAuthorization({})
     @Get('/getSqlRecords')
     async getSqlRecords (
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId,
         @QueryParams({ name: 'ids' }) ids
     ) {
         const sqlIdArray = (ids || '').split(',')
@@ -174,6 +175,7 @@ export default class DataSourceController {
             tableFileName: TABLE_FILE_NAME.DATA_TABLE_MODIFY_RECORD,
             query: {
                 deleteFlag: 0,
+                projectId,
                 id: sqlIdArray
             }
         })
@@ -222,13 +224,27 @@ export default class DataSourceController {
 
     // 删除表结构
     @OutputJson()
-    @ProjectResAuthorization({ tableName: 'DATA_TABLE', getResourceId: ctx => ctx.request.body.ids && ctx.request.body.ids[0] })
+    @ProjectResAuthorization({ tableName: 'DATA_TABLE', getResourceId: ctx => ctx.request.body?.ids && ctx.request.body?.ids[0] })
     @Put('/deleteTable')
     async deleteTable (
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId,
         @BodyParams({ name: 'ids', require: true }) ids,
         @BodyParams({ name: 'records', require: true }) records,
         @BodyParams({ name: 'thirdPartDBId', default: 0 }) thirdPartDBId
     ) {
+        const { list } = await LCDataService.get({
+            tableFileName: TABLE_FILE_NAME.DATA_TABLE,
+            query: {
+                projectId
+            }
+        })
+        const listIds = list.map((item) => item.id)
+        ids.forEach(id => {
+            if (listIds.indexOf(id) === -1) {
+                throw new global.BusinessError(`含有非法id: ${id}`, -1, 500)
+                return
+            }
+        })
         const data = await LCDataService.bulkSoftDelete(TABLE_FILE_NAME.DATA_TABLE, ids)
         records.forEach((record) => {
             record.sql = decodeSql(record.sql)
diff --git a/lib/server/controller/flow.js b/lib/server/controller/flow.js
index 3bd49c9fa..a9aa0342e 100644
--- a/lib/server/controller/flow.js
+++ b/lib/server/controller/flow.js
@@ -28,16 +28,38 @@ import {
     ProjectAuthorization,
     ProjectResAuthorization
 } from '../decorator'
+import PageModel from '../model/page'
 import { LCDataService, TABLE_FILE_NAME } from '../service/common/data-service'
 import httpConf from '../conf/http'
 import v3Conf from '../conf/v3'
 import { transFlowTplToBkFlowPipelineTree } from '../utils/flow'
+import { getTaskList } from '../service/business/flow'
 
+const bkflowApiGatewayName = global.BKFLOW_API_GATEWAY_NAME
 const authorization = {
     bk_app_code: v3Conf.APP_ID,
     bk_app_secret: v3Conf.APP_SECRET
 }
 
+const CONTAINER_TYPE_MAP = {
+    flowManageContainer: 'widget-flow-manage-container',
+    flowWorkbenchContainer: 'widget-flow-workbench-container',
+    formContainer: 'widget-form-container',
+    dataManageContainer: 'widget-data-manage-container'
+}
+
+const CHECK_CONDITIONS = {
+    [CONTAINER_TYPE_MAP.flowManageContainer]: (comp, tplId) => 
+        comp.renderProps?.id?.code === Number(tplId),
+    [CONTAINER_TYPE_MAP.flowWorkbenchContainer]: () => true,
+    [CONTAINER_TYPE_MAP.formContainer]: (comp, tplId, nodeId) => 
+        comp.renderProps?.dataSource?.code?.flowTplId === Number(tplId) && 
+        comp.renderProps?.dataSource?.code?.nodeId === nodeId,
+    [CONTAINER_TYPE_MAP.dataManageContainer]: (comp, tplId, nodeId) => 
+        comp.renderProps?.flowTplId?.code === Number(tplId) && 
+        comp.renderProps?.nodeId?.code === nodeId
+}
+
 // bkflow网关的预发布环境名称为stage，需要特殊处理
 const stageName = httpConf.stageName === 'stag' ? 'stage' : httpConf.stageName
 
@@ -48,7 +70,7 @@ export const createAppBkFlowSpace = async ({ projectId, name, appCode, superuser
     if (!spaceData) {
         try {
             const response = await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowApiGatewayName,
                 path: `/create_space/`,
                 method: 'post',
                 authorization: {
@@ -107,6 +129,38 @@ export default class FlowController {
             pageSize,
             query
         })
+        const pages = await PageModel.getProjectPages(projectId)
+
+        function hasFlowContainer(components, tplId) {
+            return components.some(comp => {
+                if (comp.type === CONTAINER_TYPE_MAP.flowManageContainer && CHECK_CONDITIONS[comp.type]?.(comp, tplId)) {
+                    return true;
+                }
+                return comp.renderSlots?.default?.length && hasFlowContainer(comp.renderSlots.default, tplId);
+            });
+        }
+
+        list.forEach(tpl => {
+            const pageMap = new Map();
+
+            pages.forEach(page => {
+                if (pageMap.has(page.id)) return;
+
+                try {
+                    const components = JSON.parse(page.content || '[]');
+                    if (hasFlowContainer(components, tpl.id)) {
+                        pageMap.set(page.id, {
+                            id: page.id,
+                            name: page.pageName,
+                            pageCode: page.pageCode
+                        });
+                    }
+                } catch (e) {
+                    console.error('页面内容解析失败:', page.id, e);
+                }
+            });
+            tpl.flowManagePages = Array.from(pageMap.values())
+        })
         return { list, count }
     }
 
@@ -289,6 +343,176 @@ export default class FlowController {
         }
         return LCDataService.update(TABLE_FILE_NAME.FLOW_TPL, { id: tplId, edges: JSON.stringify(edges), deployed: 0 })
     }
+    // 查询包含流程工作台的页面
+    @OutputJson()
+    @ProjectAuthorization({})
+    @Get('/queryRelatedWorkbenchPages')
+    async queryRelatedWorkbenchPages (
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId
+    ) {
+        const relatedPages = []
+        // 项目下所有页面
+        const pages = await PageModel.getProjectPages(projectId)
+
+        pages.forEach(page => {
+            try {
+                const components = JSON.parse(page.content || '[]')
+
+                // 递归遍历组件树
+                const traverse = (list) => {
+                    for (const comp of list) {
+                        if (comp.type == 'widget-flow-workbench-container') {
+                            const { id, pageName: name, pageCode } = page
+                            relatedPages.push({ id, name, pageCode })
+                            break
+                        }
+
+                        // 递归处理子组件
+                        if (comp.renderSlots?.default?.length) {
+                            traverse(comp.renderSlots.default)
+                        }
+                    }
+                }
+
+                traverse(components)
+            } catch (e) {
+                console.error('Invalid component JSON:', e)
+            }
+        })
+
+        return relatedPages
+    }
+
+    // 查询流程关联的页面信息
+    @OutputJson()
+    @ProjectAuthorization({})
+    @Post('/tpl/:tplId/queryRelatedPages')
+    async queryFlowRelatedPages (
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId,
+        @PathParams({ name: 'tplId', require: true }) tplId,
+        @BodyParams({ name: 'versionId', required: true }) versionId,
+        @BodyParams({ name: 'containers', require: true, default: [] }) containers, // 数组类型，可选值：flowManageContainer(流程管理容器)、formContainer(表单容器)、dataManageContainer(数据管理容器)
+        @BodyParams({ name: 'nodeId' }) nodeId, // containers包含formContainer、dataManageContainer时必需
+    ) {
+        const flowDetail = await LCDataService.findOne(TABLE_FILE_NAME.FLOW_TPL, { id: tplId })
+        if (!flowDetail) {
+            throw new global.BusinessError(global.i18n.t('流程模板不存在'), -1)
+        }
+        // 检查nodeId是否存在于当前流程
+        const nodes = JSON.parse(flowDetail.nodes || '[]')
+        if (nodeId && nodes.findIndex(n => n.id === nodeId) === -1) {
+            throw new global.BusinessError(global.i18n.t('流程节点不存在'), -1)
+        }
+
+        // 项目下所有页面
+        const pages = await PageModel.getProjectPages(projectId, versionId)
+
+        const relatedPages = containers.reduce((acc, type) => {
+            acc[type] = []
+            return acc
+        }, {})
+    
+        // 转换为组件类型集合
+        const targetComponentTypes = new Set(containers.map(c => CONTAINER_TYPE_MAP[c]))
+    
+        pages.forEach(page => {
+            try {
+                const components = JSON.parse(page.content || '[]')
+                const remainingTypes = new Set(targetComponentTypes)
+
+                // 递归遍历组件树
+                const traverse = (list) => {
+                    for (const comp of list) {
+                        if (remainingTypes.size === 0) return
+
+                        // 类型匹配检查
+                        if (remainingTypes.has(comp.type)) {
+                            const containerType = containers.find(c => CONTAINER_TYPE_MAP[c] === comp.type)
+
+                            if (CHECK_CONDITIONS[comp.type]?.(comp, tplId, nodeId)) {
+                                const { id, pageName: name, pageCode } = page
+                                relatedPages[containerType].push({ id, name, pageCode })
+                                remainingTypes.delete(comp.type)
+                            }
+                        }
+
+                        // 递归处理子组件
+                        if (comp.renderSlots?.default?.length) {
+                            traverse(comp.renderSlots.default);
+                        }
+                    }
+                }
+
+                traverse(components)
+            } catch (e) {
+                console.error('Invalid component JSON:', e);
+            }
+        })
+
+        return relatedPages
+    }
+
+    // 更新流程关联页面的配置
+    @OutputJson()
+    @ProjectAuthorization({})
+    @Post('/updateRelatedPages')
+    async updateRelatedPages (
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId,
+        @BodyParams({ name: 'tplId' }) tplId,
+        @BodyParams({ name: 'added' }) added, // 页面新增加的容器，{ [key: number]: Array<containerConfig> }
+        @BodyParams({ name: 'removed' }) removed // 页面删除的容器, { [key: flowManageContainer|flowWorkbenchContainer|dataManageContainer|formContainer]: Array<{ pageId: number; nodeId?: string; }> }
+    ) {
+        for(const [pageId, configs] of Object.entries(added)) {
+            const page = await LCDataService.findOne(TABLE_FILE_NAME.PAGE, { id: pageId })
+            if (page) {
+                const components = JSON.parse(page.content || '[]')
+                components.push(...configs)
+                await LCDataService.update(TABLE_FILE_NAME.PAGE, { id: pageId, content: JSON.stringify(components) })
+            }
+        }
+
+        for(const [containerType, configs] of Object.entries(removed)) {
+            for(const config of configs) {
+                const { pageId, nodeId } = config
+                const page = await LCDataService.findOne(TABLE_FILE_NAME.PAGE, { id: pageId })
+                if (page) {
+                    const content = JSON.parse(page.content || '[]')
+                    const removeContainer = (components) => {
+                        return components.filter(comp => {
+                            if (comp.type === CONTAINER_TYPE_MAP[containerType] && CHECK_CONDITIONS[comp.type]?.(comp, tplId, nodeId)) {
+                                return false
+                            }
+                            if (comp.renderSlots?.default?.length) {
+                                comp.renderSlots.default = removeContainer(comp.renderSlots.default)
+                            }
+
+                            return true
+                        })
+                    }
+                    const newComponents = removeContainer(content)
+                    await LCDataService.update(TABLE_FILE_NAME.PAGE, { id: pageId, content: JSON.stringify(newComponents) })
+                }
+            }
+        }
+
+        return {}
+    }
+
+    // 更新流程关联页面的内容
+    @OutputJson()
+    @ProjectAuthorization({})
+    @Post('/tpl/related/updateRelatedPageContent')
+    async updateRelatedPageContent (
+        @BodyParams({ name: 'pageId', require: true }) pageId,
+        @BodyParams({ name: 'content', require: true }) content
+    ) {
+        const page = await LCDataService.findOne(TABLE_FILE_NAME.PAGE, { id: pageId })
+        if (page) {
+            return await LCDataService.update(TABLE_FILE_NAME.PAGE, { id: pageId, content: content })
+        }
+
+        throw new global.BusinessError(global.i18n.t('更新页面内容失败'), -1)
+    }
 
     // 创建并执行流程任务
     @OutputJson()
@@ -318,7 +542,7 @@ export default class FlowController {
         const { bkFlowSpaceId } = await LCDataService.findOne(TABLE_FILE_NAME.PROJECT_BKFLOW_SPACE, { projectId: 0 })
 
         const bkFlowTaskDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/create_task_without_template`,
             method: 'post',
             authorization: {
@@ -352,7 +576,7 @@ export default class FlowController {
                 edges: flowDetail.edges
             })
             await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowApiGatewayName,
                 path: `/space/${bkFlowSpaceId}/task/${bkFlowTaskDetail.data.id}/operate_task/start/`,
                 method: 'post',
                 authorization: {
@@ -371,6 +595,60 @@ export default class FlowController {
         }
     }
 
+    // 获取项目下所有流程的任务列表
+    @OutputJson()
+    @ProjectAuthorization({})
+    @Get('/task/list')
+    async getProjectTaskList (
+        @CookieParams({ name: global.AUTH_NAME }) bkToken,
+        @HeaderParams({ name: 'x-project-id', require: true }) projectId,
+        @QueryParams({ name: 'id' }) id, // 任务id
+        @QueryParams({ name: 'tplName', default: '' }) tplName,
+        @QueryParams({ name: 'createAtStart' }) createAtStart,
+        @QueryParams({ name: 'createAtEnd' }) createAtEnd,
+        @QueryParams({ name: 'createUser' }) createUser,
+        @QueryParams({ name: 'page', default: 1 }) page,
+        @QueryParams({ name: 'pageSize', default: 10 }) pageSize,
+    ) {
+        const [list, count] = await getTaskList({
+            projectId,
+            id,
+            tplName,
+            createAtStart,
+            createAtEnd,
+            createUser,
+            page,
+            pageSize
+        })
+
+
+        const taskIds = list.map(item => item.bkFlowTaskId)
+
+        const { bkFlowSpaceId } = await LCDataService.findOne(TABLE_FILE_NAME.PROJECT_BKFLOW_SPACE, { projectId: 0 })
+
+        // 调用BkFlow接口查询任务的执行状态
+        const tasksStatusRes = await execApiGateWay({
+            apiName: bkflowApiGatewayName,
+            path: `/space/${bkFlowSpaceId}/get_tasks_states/`,
+            method: 'post',
+            authorization: {
+                ...authorization,
+                [global.AUTH_NAME]: bkToken
+            },
+            apiUrlTemp: httpConf.apiGateWayUrlTmpl,
+            stageName,
+            data: {
+                task_ids: taskIds
+            }
+        })
+
+        list.forEach(task => {
+            task.status = tasksStatusRes.data[task.bkFlowTaskId]?.state || ''
+        })
+
+        return { list, count }
+    }
+
     // 获取流程任务列表
     @OutputJson()
     @ProjectAuthorization({})
@@ -386,7 +664,7 @@ export default class FlowController {
         @QueryParams({ name: 'createAtEnd' }) createAtEnd,
         @QueryParams({ name: 'createUser' }) createUser,
     ) {
-        const query = { tplId }
+        const query = { tplId, projectId }
 
         if (id) {
             query.id = id
@@ -400,24 +678,6 @@ export default class FlowController {
             query.createTime = Between(createAtStart, createAtEnd)
         }
 
-        // 调用BkFlow接口查询任务列表
-        // @todo 目前是拉取全量列表，需要bkflow支持按状态查询任务列表
-        // const bkFlowTaskList = await execApiGateWay({
-        //     apiName: 'bkflow-eng-svc',
-        //     path: `/space/${bkFlowSpaceId}/get_task_list/`,
-        //     method: 'get',
-        //     authorization: {
-        //         ...authorization,
-        //         [global.AUTH_NAME]: bkToken
-        //     },
-        //     apiUrlTemp: httpConf.apiGateWayUrlTmpl,
-        //     stageName,
-        //     data: {
-        //         scope_type: 'project_tpl',
-        //         scope_value: `${projectId}_${tplId}`
-        //     }
-        // })
-
         const { list, count } = await LCDataService.get({
             tableFileName: TABLE_FILE_NAME.FLOW_TASK,
             page,
@@ -432,7 +692,7 @@ export default class FlowController {
 
         // 调用BkFlow接口查询任务的执行状态
         const tasksStatusRes = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/get_tasks_states/`,
             method: 'post',
             authorization: {
@@ -476,34 +736,39 @@ export default class FlowController {
             const taskNodes = nodes.filter(item => !['Start', 'End'].includes(item.type))
 
             if (taskNodes.some(item => item.isDraft)) {
+                console.log('taskNodes=============>', taskNodes)
                 throw new global.BusinessError(global.i18n.t('部署失败，请检查接节点、连线配置是否完整'), -1)
             }
             console.log('准备请求 =====')
 
             const pipelineTree = transFlowTplToBkFlowPipelineTree(projectId, nodes, edges)
             const { bkFlowSpaceId } = await LCDataService.findOne(TABLE_FILE_NAME.PROJECT_BKFLOW_SPACE, { projectId: 0 })
-            const res = await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
-                path: `/space/${bkFlowSpaceId}/validate_pipeline_tree`,
-                method: 'post',
-                authorization: {
-                    ...authorization,
-                    [global.AUTH_NAME]: bkToken
-                },
-                apiUrlTemp: httpConf.apiGateWayUrlTmpl,
-                stageName,
-                data: {
-                    pipeline_tree: pipelineTree
+            try {
+                const res = await execApiGateWay({
+                    apiName: bkflowApiGatewayName,
+                    path: `/space/${bkFlowSpaceId}/validate_pipeline_tree`,
+                    method: 'post',
+                    authorization: {
+                        ...authorization,
+                        [global.AUTH_NAME]: bkToken
+                    },
+                    apiUrlTemp: httpConf.apiGateWayUrlTmpl,
+                    stageName,
+                    data: {
+                        pipeline_tree: pipelineTree
+                    }
+                })
+    
+                console.log('validate_pipeline_tree==============>', res)
+    
+                if (res.result) {
+                    await LCDataService.update(TABLE_FILE_NAME.FLOW_TPL, { id: tplId, deployed: 1 })
+                    return { ...flowDetail, deployed: 1 }
+                } else {
+                    throw new global.BusinessError(res.message, -1)
                 }
-            })
-
-            console.log('validate_pipeline_tree==============>', res)
-
-            if (res.result) {
-                await LCDataService.update(TABLE_FILE_NAME.FLOW_TPL, { id: tplId, deployed: 1 })
-                return { ...flowDetail, deployed: 1 }
-            } else {
-                throw new global.BusinessError(global.i18n.t('部署失败，请检查接节点、连线配置是否完整'), -1)
+            } catch (e) {
+                throw new global.BusinessError(e, -1)
             }
         }
         await LCDataService.update(TABLE_FILE_NAME.FLOW_TPL, { id: tplId, deployed: 0 })
@@ -525,7 +790,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -562,7 +827,7 @@ export default class FlowController {
             if (runningStateNodes.length > 0) {
                 // 任务模板详情数据，比较节点id
                 const taskTplDetail = await execApiGateWay({
-                    apiName: 'bkflow-eng-svc',
+                    apiName: bkflowApiGatewayName,
                     path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
                     method: 'get',
                     authorization: {
@@ -602,7 +867,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -615,7 +880,7 @@ export default class FlowController {
 
         // 任务模板详情数据
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -694,7 +959,7 @@ export default class FlowController {
         const { bkFlowSpaceId } = await LCDataService.findOne(TABLE_FILE_NAME.PROJECT_BKFLOW_SPACE, { projectId: 0 })
 
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowApiGatewayName,
             path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -715,7 +980,7 @@ export default class FlowController {
 
         if (bkFlowNodeId) {
             const res =  await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowApiGatewayName,
                 path: `/space/${bkFlowSpaceId}/task/${taskItem.bkFlowTaskId}/node/${bkFlowNodeId}/operate_node/callback/`,
                 method: 'post',
                 authorization: {
diff --git a/lib/server/controller/mock-data.js b/lib/server/controller/mock-data.js
index 39c91970a..44d4a66e8 100644
--- a/lib/server/controller/mock-data.js
+++ b/lib/server/controller/mock-data.js
@@ -18,12 +18,6 @@ import {
 
 const METHODS_WITH_DATA = ['post', 'put', 'patch']
 
-function strToJson (str) {
-    // eslint-disable-next-line no-new-func
-    const json = (new Function('return ' + str))()
-    return json
-}
-
 const Data = {
     async getApiData (ctx) {
         try {
@@ -49,7 +43,7 @@ const Data = {
             }
 
             // 请求携带的数据
-            const httpData = typeof apiData === 'string' ? strToJson(apiData || '{}') : apiData
+            const httpData = apiData
             if (METHODS_WITH_DATA.includes(type)) {
                 httpConf.data = httpData
             } else {
diff --git a/lib/server/controller/page-template.js b/lib/server/controller/page-template.js
index 3da668b2f..647b39119 100644
--- a/lib/server/controller/page-template.js
+++ b/lib/server/controller/page-template.js
@@ -1,5 +1,6 @@
 import { getConnection, getRepository } from 'typeorm'
 import PageTemplate from '../model/entities/page-template'
+import { checkProjectPerm } from '../service/common/project-auth'
 import * as TemplateCategoryModel from '../model/page-template-category'
 import * as PageTemplateModel from '../model/page-template'
 import Func from '../model/entities/func'
@@ -109,6 +110,14 @@ export const detail = async (ctx) => {
     try {
         const { id } = ctx.request.query
         const template = await PageTemplateModel.findById(id) || {}
+        if (template.isOffcial === 0) {
+            const projectId = template.belongProjectId
+            const res = await checkProjectPerm(ctx, projectId)
+            if (res.code > 0) {
+                ctx.send(res)
+                return
+            }
+        }
         ctx.send({
             code: 0,
             message: 'success',
diff --git a/lib/server/controller/page.js b/lib/server/controller/page.js
index 701849ea0..90134ef74 100644
--- a/lib/server/controller/page.js
+++ b/lib/server/controller/page.js
@@ -350,7 +350,7 @@ export const copyPage = async (ctx) => {
         const newPageData = Object.assign(prePage, { pageName: postName, pageCode, pageRoute: newPageRoute, id: undefined })
 
         // 页面使用的layout
-        const { layoutId } = await getRepository(PageRoute).findOne({ pageId: pageData.id })
+        const { layoutId } = await getRepository(PageRoute).findOne({ pageId })
         const layoutInst = await getRepository(LayoutInst).findOne(layoutId)
         const fullPath = `${layoutInst.routePath}/${newPageData.pageRoute}`
 
diff --git a/lib/server/controller/project.js b/lib/server/controller/project.js
index fe1d7f04e..3a67b7819 100644
--- a/lib/server/controller/project.js
+++ b/lib/server/controller/project.js
@@ -84,7 +84,7 @@ module.exports = {
         const { layouts: layoutData, ...projectData } = ctx.request.body
         const userInfo = ctx.session.userInfo
         projectData.createUser = userInfo.username
-        projectData.id = null;
+        projectData.id = null
         const userProjectRoleData = {
             userId: userInfo.id,
             roleId: 1
@@ -197,7 +197,7 @@ module.exports = {
             query.params = { q: `%${q}%` }
         }
 
-        if(filter === 'archive') {
+        if (filter === 'archive') {
             query.condition.push('project.archiveFlag = 1')
         } else {
             query.condition.push('project.archiveFlag = 0')
@@ -488,6 +488,7 @@ module.exports = {
     async createDemoProject (ctx, data) {
         const { userInfo, projectData, bkTicket } = data
         projectData.createUser = userInfo.username
+        projectData.id = null
         const userProjectRoleData = {
             userId: userInfo.id,
             roleId: 1
diff --git a/lib/server/controller/release.js b/lib/server/controller/release.js
index 1f2897990..97dc0ba8d 100644
--- a/lib/server/controller/release.js
+++ b/lib/server/controller/release.js
@@ -298,7 +298,7 @@ const Realease = {
 
             // bkflow给部署的应用授权
             await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: global.BKFLOW_API_GATEWAY_NAME,
                 apiUrlTemp: httpConf.apiGateWayUrlTmpl,
                 path: '/grant_apigw_permissions_to_app/',
                 method: 'post',
diff --git a/lib/server/controller/serverless-web.js b/lib/server/controller/serverless-web.js
deleted file mode 100644
index 81399d859..000000000
--- a/lib/server/controller/serverless-web.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-import { getPreviewDataService } from '../service/business/preview-db-service'
-import {
-    getAllGroupAndFunction
-} from '../service/business/function'
-import { Controller, All, Ctx } from '../decorator'
-
-// 用于 serverless web function 在预览环境使用
-@Controller('/api/serverless')
-export default class ServerlessController {
-    @All('/projectId/:projectId/funcCode/:funcCode')
-    async serverlessWebApi (@Ctx() ctx) {
-        let dataService
-        try {
-            const { projectId, funcCode } = ctx.params || {}
-            dataService = await getPreviewDataService(projectId)
-
-            const funcGroupList = await getAllGroupAndFunction(projectId)
-            const curFunc = funcGroupList.map(group => group.children).flat().find(func => func.funcCode === funcCode)
-            const funcBody = curFunc.funcBody || ''
-
-            const Fn = Function
-            const asyncFunction = new Fn('return Object.getPrototypeOf(async function(){}).constructor')()
-            return await asyncFunction('ctx', 'dataService', funcBody)(ctx, dataService)
-        } catch (error) {
-            throw error
-        } finally {
-            if (dataService) await dataService.close()
-        }
-    }
-}
diff --git a/lib/server/custom-global.js b/lib/server/custom-global.js
index c0a9f7012..c924bcd50 100644
--- a/lib/server/custom-global.js
+++ b/lib/server/custom-global.js
@@ -49,6 +49,8 @@ global.IAM_ENABLE = process.env.NODE_ENV !== 'development'
 global.NOTICE_CENTER_ENABLE = process.env.NOTICE_CENTER_ENABLE ?? true
 // lesscode网关名称
 global.LESSCODE_API_GATEWAY_NAME = process.env.API_GATEWAY_NAME || 'bk-lesscode'
+// bkflow网关名称
+global.BKFLOW_API_GATEWAY_NAME = process.env.BKFLOW_API_GATEWAY_NAME || (global.AUTH_NAME === 'bk_token' ? 'bk-flow-engine' : 'bkflow-eng-svc')
 
 const loadEnv = (filePath) => {
     if (fs.existsSync(filePath)) {
diff --git a/lib/server/model/entities/flow-task.js b/lib/server/model/entities/flow-task.js
index b76db5318..df4869b0d 100644
--- a/lib/server/model/entities/flow-task.js
+++ b/lib/server/model/entities/flow-task.js
@@ -9,8 +9,9 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import { Entity, Column } from 'typeorm'
+import { Entity, Column, JoinColumn, ManyToOne } from 'typeorm'
 import Base from './base'
+import FlowTpl from './flow-tpl'
 
 @Entity({ name: 'flow_task', comment: '应用创建的任务' })
 export default class extends Base {
@@ -18,6 +19,10 @@ export default class extends Base {
     @Column({ type: 'int' })
     tplId
 
+    @ManyToOne(() => FlowTpl)
+    @JoinColumn({ name: 'tplId' })
+    tpl
+
     // 应用id
     @Column({ type: 'int' })
     projectId
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
index fa835749d..ecc552359 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
@@ -7,14 +7,19 @@ import './process-overview.postcss'
 
 export default {
     props: {
+        isWorkbench: {
+            type: Boolean,
+            default: false
+        },
         id: {
             type: String,
-            required: true
+            required: false
         }
     },
     data () {
         return {
             formData: {
+                tplName: '',
                 id: '',
                 creator: '',
                 time: [],
@@ -56,7 +61,8 @@ export default {
                     query[key] = val
                 }
             })
-            const res = await http.get(`/flow/tpl/${this.id}/task/list`, { params: {
+            const url = this.isWorkbench ? '/flow/task/list' : `/flow/tpl/${this.id}/task/list`
+            const res = await http.get(url, { params: {
                 page: this.pagination.current,
                 pageSize: this.pagination.limit,
                 ...query
@@ -158,6 +164,24 @@ export default {
             }
         ]
 
+        if (this.isWorkbench) {
+            filterFormItem.splice(1, 0, {
+                label: this.$t('流程'),
+                component: 'bk-input',
+                property: 'tplName',
+                name: 'tplName',
+                props: {
+                    placeholder: this.$t('请输入流程名称'),
+                    value: this.formData.tplName
+                },
+                on: {
+                    'input': (value) => {
+                        self.formData.tplName = value
+                    }
+                }
+            })
+        }
+
         return h('div', {
             class: 'process-render'
         }, [
@@ -198,6 +222,7 @@ export default {
                         },
                         on: {
                             click: () => {
+                                self.pagination.current = 1
                                 self.getTableData()
                             }
                         }
@@ -214,6 +239,7 @@ export default {
                                     time: [],
                                     status: ''
                                 }
+                                self.pagination.current = 1
                                 self.getTableData()
                             }
                         }
@@ -232,6 +258,7 @@ export default {
                         self.getTableData()
                     },
                     'page-limit-change': (limit) => {
+                        self.pagination.current = 1
                         self.pagination.limit = limit
                         self.getTableData()
                     }
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.js
index 1fba87f47..7b4c6125b 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.js
@@ -44,7 +44,10 @@ export default {
             hideFilters: false,
 
             // 节点数据列表
-            nodeDataList: []
+            nodeDataList: [],
+
+            // 流程名称
+            tplName: ''
         }
     },
     computed: {
@@ -56,7 +59,7 @@ export default {
         // 所有字段
         allFields () {
             // 获取当前节点的字段列表
-            const list = this.currentNodeTab?.fields.map(item => Object.assign({}, item, { system: false }))
+            const list = this.currentNodeTab?.fields.map(item => Object.assign({}, item, { system: false })) || []
 
             // 添加系统字段
             FORM_SYS_FIELD.forEach(item => {
@@ -88,7 +91,7 @@ export default {
         // 获取当前流程模板的所有人工节点数据
         async getNodesList () {
             this.loading = true
-            const { nodes } = flowTplListMap[this.id]
+            const { nodes, name } = flowTplListMap[this.id]
             const manualNodes = nodes.filter(node => node.type === 'Manual')
             const currentProps = cloneDeep(this.nodeList)
 
@@ -111,6 +114,7 @@ export default {
                     ...currentNodeProps
                 }
             })
+            this.tplName = name
 
             // 如果当前组件的 props 数据中没有人工节点数据，则将第一个节点的 id 设置为 activeNode
             if (this.nodeDataList.length) {
@@ -192,7 +196,7 @@ export default {
             props: {
                 fields: this.allFields,
                 filters: this.currentNodeTab?.filters,
-                queryData: self.currentNodeTab.queryData
+                queryData: self.currentNodeTab?.queryData
             },
             on: {
                 query: (val) => {
@@ -205,10 +209,10 @@ export default {
         const renderTable = () => h(table, {
             props: {
                 fields: this.allFields,
-                queryData: self.currentNodeTab.queryData,
-                tableName: self.currentNodeTab.tableName,
-                tableRowActions: self.currentNodeTab.tableRowActions,
-                tableColsExclude: self.currentNodeTab.tableColsExclude
+                queryData: self.currentNodeTab?.queryData,
+                tableName: self.currentNodeTab?.tableName,
+                tableRowActions: self.currentNodeTab?.tableRowActions,
+                tableColsExclude: self.currentNodeTab?.tableColsExclude
             }
         })
 
@@ -264,6 +268,7 @@ export default {
         // 获取元素
         const getElements = () => {
             return [
+                h('div', { class: 'flow-manage-title'}, [`${self.tplName}流程管理`]),
                 h('bk-tab', {
                     props: {
                         active: self.activeTab,
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.postcss b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
index eec557833..5204c84c6 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
@@ -1,58 +1,67 @@
-.node-tab-wrapper {
-    .bk-tab, .bk-lesscode-tab {
-        padding: 4px;
-        max-width: calc(100% - 250px);
-        background: #f0f1f5;
-        border-radius: 2px;
-        margin-bottom: 20px;
-        .bk-tab-section {
-            display: none;
-        }
-        .bk-tab-header {
+.flow-manage-wrapper {
+    padding: 20px 24px;
+    background: #ffffff;
+    .flow-manage-title {
+        font-size: 16px;
+        color: #313238;
+    }
+    .node-tab-wrapper {
+        .bk-tab, .bk-lesscode-tab {
+            padding: 4px;
+            max-width: calc(100% - 250px);
             background: #f0f1f5;
-            background-image: none !important;
-            height: 25px !important;
-            border: none;
-            .bk-tab-label-list {
-                height: 100% !important;
-                display: flex;
-                align-items: center;
-
+            border-radius: 2px;
+            margin-bottom: 20px;
+            .bk-tab-section {
+                display: none;
             }
-            .bk-tab-label {
-                font-size: 12px;
+            .bk-tab-header {
+                background: #f0f1f5;
+                background-image: none !important;
+                height: 25px !important;
+                border: none;
+                .bk-tab-label-list {
+                    height: 100% !important;
+                    display: flex;
+                    align-items: center;
+
+                }
+                .bk-tab-label {
+                    font-size: 12px;
+                }
+                .bk-tab-label-item {
+                    border: none !important;
+                    line-height: 25px;
+                    font-size: 12px;
+                }
             }
-            .bk-tab-label-item {
-                border: none !important;
-                line-height: 25px;
-                font-size: 12px;
+            .bk-tab-label-wrapper {
+                .bk-tab-scroll-controller {
+                    height: 33px !important;
+                    background: #f5f7fa;
+                    color: #979ba5;
+                    &:hover {
+                        background: #eaebf0;
+                        color: #63656e;
+                    }
+                }
             }
         }
-        .bk-tab-label-wrapper {
-            .bk-tab-scroll-controller {
-                height: 33px !important;
-                background: #f5f7fa;
-                color: #979ba5;
-                &:hover {
-                    background: #eaebf0;
-                    color: #63656e;
+        .bk-lesscode-tab {
+            .bk-lesscode-tab-header {
+                line-height: 20px !important;
+                padding: 4px !important;
+                border-bottom: 0px !important;
+                font-size: 12px;
+                .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
+                    border-radius: 2px 2px 0 0 ;
                 }
             }
-        }
-    }
-    .bk-lesscode-tab {
-        .bk-lesscode-tab-header {
-            line-height: 20px !important;
-            padding: 4px !important;
-            border-bottom: 0px !important;
-            font-size: 12px;
-            .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
-                border-radius: 2px 2px 0 0 ;
+            .bk-lesscode-tab-content {
+                display: none;
             }
         }
-        .bk-lesscode-tab-content {
-            display: none;
-        }
+        
     }
     .header-operate-area {
         position: relative;
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.js
new file mode 100644
index 000000000..7f3d6d6ae
--- /dev/null
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.js
@@ -0,0 +1,16 @@
+import processOverview from '../flow-manage-container/components/process-overview'
+import './index.postcss'
+
+export default {
+    name: 'widget-flow-workbench-container-preview',
+    inheritAttrs: false,
+    render (h) {
+        return h('div',
+            { class: 'widget-flow-workbench-container' },
+            [
+                h('div', { class: 'container-title' }, ['我的流程任务']),
+                h(processOverview, { props: { isWorkbench: true } })
+            ]
+        )
+    }
+}
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss
new file mode 100644
index 000000000..e6d0b15e6
--- /dev/null
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss
@@ -0,0 +1,15 @@
+.widget-flow-workbench-container {
+    padding: 20px 24px;
+    background: #ffffff;
+    .container-title {
+        margin-bottom: 12px;
+        font-size: 16px;
+        color: #313238;
+    }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/fields/member/index.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
index 338f31e42..28a2acb2e 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
@@ -35,11 +35,11 @@ export default {
                 }
             },
             immadiate: true
-        },
+        }
     },
     created () {
         if (process.env.BK_USER_MANAGE_HOST) {
-            this.host = process.env.BK_USER_MANAGE_HOST
+            this.host = process.env.BK_USER_MANAGE_HOST.replace(/^https?:/i, '')
         } else {
             this.getUserManageUrl()
         }
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/renderer/index.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/renderer/index.js
index 72d068467..82c40bb78 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/renderer/index.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/form-engine/renderer/index.js
@@ -300,21 +300,31 @@ export default {
 
             try {
                 this.pending = true
-                const formattedVal = []
-                Object.keys(this.value).forEach(key => {
-                    const val = this.value[key]
-                    const field = this.fields.find(item => item.configure.key === key)
-                    if (Array.isArray(val) && field.type !== 'table') {
-                        formattedVal.push({ key, value: val.join(',') })
-                    } else {
-                        formattedVal.push({ key, value: val })
-                    }
-                })
-                await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
-                this.$bkMessage({
-                    theme: 'success',
-                    message: window.i18n.t('表单数据添加成功')
-                })
+                const { action, flowTplId, nodeId } = this.dataSource
+                if (action === 'executeFlow') {
+                    const res = await this.$http.post(`/flow/tpl/${flowTplId}/createAndExecuteTask`)
+                    await this.$http.post(`/flow/task/${res.data.id}/manual_node/${nodeId}/submit`, this.value)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: window.i18n.t('流程提单成功')
+                    })
+                } else {
+                    const formattedVal = []
+                    Object.keys(this.value).forEach(key => {
+                        const val = this.value[key]
+                        const field = this.fields.find(item => item.configure.key === key)
+                        if (Array.isArray(val) && field.type !== 'table') {
+                            formattedVal.push({ key, value: val.join(',') })
+                        } else {
+                            formattedVal.push({ key, value: val })
+                        }
+                    })
+                    await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: window.i18n.t('表单数据添加成功')
+                    })
+                }
             } catch (e) {
                 console.error(e)
             } finally {
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/patch/widget-table-column.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/patch/widget-table-column.js
index 8385df9d7..ce94f2ebf 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/components/patch/widget-table-column.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/components/patch/widget-table-column.js
@@ -219,7 +219,7 @@ export default {
             {
                 props: {
                     formatter: self.bkTableFormatter,
-                    renderHeader: self.renderHeader,
+                    renderHeader: self.type === 'selection' ? undefined : self.renderHeader,
                     render: self.renderHeader,
                     ...self.$props
                 },
diff --git a/lib/server/project-template/vue2/project-init-code/lib/client/src/main.js b/lib/server/project-template/vue2/project-init-code/lib/client/src/main.js
index 42200cd1f..a888b0f32 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/client/src/main.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/client/src/main.js
@@ -25,6 +25,7 @@ import widgetBkVision from '@/components/patch/widget-bk-vision.vue'
 import widgetFormContainer from '@/components/form-engine/renderer/index.js'
 import widgetDataManageContainer from '@/components/data-manage-container/form-data-manage/index.js'
 import widgetFlowManageContainer from '@/components/flow-manage-container/index.js'
+import widgetFlowWorkbenchContainer from '@/components/flow-workbench-container/index.js'
 ${importElementLib}
 import pureAxios from '@/api/pureAxios.js'
 ${importVantLib}
@@ -43,6 +44,7 @@ Vue.component('widget-bk-table', widgetBkTable)
 Vue.component('widgetFormContainer', widgetFormContainer)
 Vue.component('widgetDataManageContainer', widgetDataManageContainer)
 Vue.component('widgetFlowManageContainer', widgetFlowManageContainer)
+Vue.component('widgetFlowWorkbenchContainer', widgetFlowWorkbenchContainer)
 Vue.component('auth-button', AuthButton)
 Vue.use(mavonEditor)
 ${useLuckyCanvas}
diff --git a/lib/server/project-template/vue2/project-init-code/lib/server/controller/flow.js b/lib/server/project-template/vue2/project-init-code/lib/server/controller/flow.js
index 6221656a2..3872e7c0c 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/server/controller/flow.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/server/controller/flow.js
@@ -32,6 +32,7 @@ import { transFlowTplToBkFlowPipelineTree } from '../util/flow/index'
 
 const spaceId = '${spaceId}'
 
+const bkflowGwName = global.BKFLOW_API_GATEWAY_NAME
 // bkflow的预发布环境名称为stage
 const bkflowGwStage = apiGateWayConfig.stageName === 'stag' ? 'stage' : apiGateWayConfig.stageName
  
@@ -51,7 +52,7 @@ export default class FlowController {
         const taskName = `${flowDetail.name}_${dayjs().format('YYYYMMDDHHmmss')}`
 
         const bkFlowTaskDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/create_task_without_template`,
             method: 'post',
             authorization: {
@@ -86,7 +87,7 @@ export default class FlowController {
                 }
             )
             await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowGwName,
                 path: `/space/${spaceId}/task/${bkFlowTaskDetail.data.id}/operate_task/start/`,
                 method: 'post',
                 authorization: {
@@ -104,6 +105,66 @@ export default class FlowController {
         }
     }
 
+        // 获取项目下所有流程的任务列表
+    @OutputJson()
+    @Get('/task/list')
+    async getProjectTaskList (
+        @CookieParams({ name: global.AUTH_NAME }) bkToken,
+        @QueryParams({ name: 'id' }) id, // 任务id
+        @QueryParams({ name: 'tplName', default: '' }) tplName,
+        @QueryParams({ name: 'createAtStart' }) createAtStart,
+        @QueryParams({ name: 'createAtEnd' }) createAtEnd,
+        @QueryParams({ name: 'createUser' }) createUser,
+        @QueryParams({ name: 'page', default: 1 }) page,
+        @QueryParams({ name: 'pageSize', default: 10 }) pageSize,
+    ) {
+        const query = { deleteFlag: 0 }
+
+        if (id) {
+            query.id = id
+        }
+
+        if (createUser) {
+            query.createUser = createUser
+        }
+
+        if (createAtStart && createAtEnd) {
+            query.createTime = Between(createAtStart, createAtEnd)
+        }
+
+        const { list, count } = await dataService.get({
+            tableFileName: 'flow-task',
+            page,
+            pageSize,
+            query
+        })
+
+
+        const taskIds = list.map(item => item.bkFlowTaskId)
+
+        // 调用BkFlow接口查询任务的执行状态
+        const tasksStatusRes = await execApiGateWay({
+            apiName: bkflowGwName,
+            path: `/space/${spaceId}/get_tasks_states/`,
+            method: 'post',
+            authorization: {
+                ...token,
+                [global.AUTH_NAME]: bkToken
+            },
+            stageName: bkflowGwStage,
+            data: {
+                task_ids: taskIds
+            }
+        })
+
+        list.forEach(task => {
+            task.status = tasksStatusRes.data[task.bkFlowTaskId]?.state || ''
+            task.tplName = flowTplListMap[task.tplId]?.name || ''
+        })
+
+        return { list, count }
+    }
+
     // 获取流程任务列表
     @OutputJson()
     @Get('/tpl/:tplId/task/list')
@@ -142,7 +203,7 @@ export default class FlowController {
 
         // 调用BkFlow接口查询任务的执行状态
         const tasksStatusRes = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/get_tasks_states/`,
             method: 'post',
             authorization: {
@@ -174,7 +235,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -210,7 +271,7 @@ export default class FlowController {
             if (runningStateNodes.length > 0) {
                 // 任务模板详情数据，比较节点id
                 const taskTplDetail = await execApiGateWay({
-                    apiName: 'bkflow-eng-svc',
+                    apiName: bkflowGwName,
                     path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
                     method: 'get',
                     authorization: {
@@ -246,7 +307,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -258,7 +319,7 @@ export default class FlowController {
 
         // 任务模板详情数据
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -334,7 +395,7 @@ export default class FlowController {
         const taskItem = await dataService.findOne('flow-task', { id: taskId })
 
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -354,7 +415,7 @@ export default class FlowController {
 
         if (bkFlowNodeId) {
             const res =  await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowGwName,
                 path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/node/${bkFlowNodeId}/operate_node/callback/`,
                 method: 'post',
                 authorization: {
diff --git a/lib/server/project-template/vue2/project-init-code/lib/server/controller/mock-data.js b/lib/server/project-template/vue2/project-init-code/lib/server/controller/mock-data.js
index e6346d56c..be682c291 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/server/controller/mock-data.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/server/controller/mock-data.js
@@ -9,12 +9,6 @@ import {
 
 const METHODS_WITH_DATA = ['post', 'put', 'patch']
 
-function strToJson (str) {
-    // eslint-disable-next-line no-new-func
-    const json = (new Function('return ' + str))()
-    return json
-}
-
 @Controller('/api/data')
 export default class DataController {
     @OutputJson({ decorator: false })
@@ -46,7 +40,7 @@ export default class DataController {
         }
 
         // 请求携带的数据
-        const httpData = typeof apiData === 'string' ? strToJson(apiData || '{}') : apiData
+        const httpData = apiData
         if (METHODS_WITH_DATA.includes(type)) {
             httpConf.data = httpData
         } else {
diff --git a/lib/server/project-template/vue2/project-init-code/lib/server/custom-global.js b/lib/server/project-template/vue2/project-init-code/lib/server/custom-global.js
index 57230fc43..0f6b22d21 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/server/custom-global.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/server/custom-global.js
@@ -38,6 +38,8 @@ global.ITSM_APP_CODE = process.env.BKPAAS_ENGINE_REGION === 'ieod' ? 'bkc-itsm'
 global.BKPAAS_ENGINE_REGION = process.env.BKPAAS_ENGINE_REGION === 'ieod' ? 'ieod' : 'default'
 // 是否对接权限中心
 global.IAM_ENABLE = process.env.NODE_ENV !== 'development'
+// bkflow网关名称
+global.BKFLOW_API_GATEWAY_NAME = process.env.BKFLOW_API_GATEWAY_NAME || (global.AUTH_NAME === 'bk_token' ? 'bk-flow-engine' : 'bkflow-eng-svc')
 
 const loadEnv = (filePath) => {
     if (fs.existsSync(filePath)) {
diff --git a/lib/server/project-template/vue2/project-init-code/lib/server/service/data-service.js b/lib/server/project-template/vue2/project-init-code/lib/server/service/data-service.js
index c17753a20..1f879aac7 100644
--- a/lib/server/project-template/vue2/project-init-code/lib/server/service/data-service.js
+++ b/lib/server/project-template/vue2/project-init-code/lib/server/service/data-service.js
@@ -279,7 +279,7 @@ export function getDataService (name = 'default', customEntityMap) {
          * @returns 新增结果
          */
         async bulkAdd (tableFileName, dataList) {
-            dataList.forEach(item =>{
+            dataList.forEach(item => {
                 item.id = null
             })
             const repository = getRepositoryByName(tableFileName)
diff --git a/lib/server/project-template/vue2/project-init-code/package.json b/lib/server/project-template/vue2/project-init-code/package.json
index b4b81ac33..c042bd08c 100644
--- a/lib/server/project-template/vue2/project-init-code/package.json
+++ b/lib/server/project-template/vue2/project-init-code/package.json
@@ -117,7 +117,7 @@
     "caniuse-lite": "~1.0.30000974",
     "chalk": "~2.4.2",
     "change-case": "~4.1.1",
-    "cheerio": "~1.0.0-rc.3",
+    "cheerio": "1.0.0-rc.2",
     "chokidar": "~3.2.1",
     "co-views": "~2.1.0",
     "cookie": "~0.4.0",
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
index d6eda73ce..9abae63dd 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/components/process-overview.js
@@ -8,13 +8,18 @@ import './process-overview.postcss'
 
 export default defineComponent({
     props: {
+        isWorkbench: {
+            type: Boolean,
+            default: false
+        },
         id: {
             type: String,
-            required: true
+            required: false
         }
     },
     setup (props) {
         const formData = ref({
+            tplName: '',
             id: '',
             creator: '',
             time: [],
@@ -51,7 +56,8 @@ export default defineComponent({
                     query[key] = val
                 }
             })
-            const res = await http.get(`/flow/tpl/${props.id}/task/list`, { params: {
+            const url = props.isWorkbench ? '/flow/task/list' : `/flow/tpl/${props.id}/task/list`
+            const res = await http.get(url, { params: {
                 page: pagination.value.current,
                 pageSize: pagination.value.limit,
                 ...query
@@ -80,12 +86,12 @@ export default defineComponent({
 
         const filterFormItem = [
             {
-                label: 'id',
+                label: window.i18n.t('任务ID'),
                 component: 'bk-input',
                 property: 'id',
                 name: 'id',
                 props: {
-                    placeholder: this.$t('请输入id'),
+                    placeholder: window.i18n.t('请输入任务ID'),
                     modelValue: this.formData.id,
                     'onUpdate:modelValue': (value) => {
                         self.formData.id = value
@@ -158,6 +164,24 @@ export default defineComponent({
             }
         ]
 
+        if (this.isWorkbench) {
+            filterFormItem.splice(1, 0, {
+                label: window.i18n.t('流程'),
+                component: 'bk-input',
+                property: 'tplName',
+                name: 'tplName',
+                props: {
+                    placeholder: window.i18n.t('请输入流程名称'),
+                    modelValue: this.formData.tplName
+                },
+                on: {
+                    'update:modelValue': (value) => {
+                        self.formData.tplName = value
+                    }
+                }
+            })
+        }
+
         return h('div', {
             class: 'process-render'
         }, [
@@ -191,6 +215,7 @@ export default defineComponent({
                     h(resolveComponent('bk-button'), {
                         theme: 'primary',
                         onClick: () => {
+                            self.pagination.current = 1
                             self.getTableData()
                         }
                     }, [this.$t('查询')]),
@@ -203,6 +228,7 @@ export default defineComponent({
                                 time: [],
                                 status: ''
                             }
+                            self.pagination.current = 1
                             self.getTableData()
                         }
                     }, [this.$t('重置')])
@@ -220,6 +246,7 @@ export default defineComponent({
                         self.getTableData()
                     },
                     onPageLimitChange: (limit) => {
+                        self.pagination.current = 1
                         self.pagination.limit = limit
                         self.getTableData()
                     }
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.js
index 9a451740f..f341dc5a2 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.js
@@ -35,6 +35,7 @@ export default defineComponent({
         const activeNode = ref('')
         const nodeDataList = ref([])
         const processRef = ref(null)
+        const tplName = ref('')
 
         const currentNodeTab = computed(() => {
             return nodeDataList.value.find(item => item.id === activeNode.value)
@@ -51,7 +52,7 @@ export default defineComponent({
 
         const getNodesList = async () => {
             loading.value = true
-            const { nodes } = flowTplListMap[id.value]
+            const { nodes, name } = flowTplListMap[id.value]
             const manualNodes = nodes.filter(node => node.type === 'Manual')
             const currentProps = cloneDeep(nodeList.value)
             const currentPropsMap = new Map(currentProps.map(node => [node.id, node]))
@@ -70,6 +71,7 @@ export default defineComponent({
                     ...currentNodeProps
                 }
             })
+            tplName.value = name
 
             if (nodeDataList.value.length) {
                 if (!activeNode.value) {
@@ -140,7 +142,7 @@ export default defineComponent({
         const renderFilters = () => h(filters, {
             fields: allFields.value,
             filters: currentNodeTab.value?.filters,
-            queryData: currentNodeTab.value.queryData,
+            queryData: currentNodeTab.value?.queryData,
             onQuery: (val) => {
                 currentNodeTab.value.queryData = val
             }
@@ -148,17 +150,17 @@ export default defineComponent({
 
         const renderTable = () => h(table, {
             fields: allFields.value,
-            queryData: currentNodeTab.value.queryData,
-            tableName: currentNodeTab.value.tableName,
-            tableRowActions: currentNodeTab.value.tableRowActions,
-            tableColsExclude: currentNodeTab.value.tableColsExclude
+            queryData: currentNodeTab.value?.queryData,
+            tableName: currentNodeTab.value?.tableName,
+            tableRowActions: currentNodeTab.value?.tableRowActions,
+            tableColsExclude: currentNodeTab.value?.tableColsExclude
         })
 
         const tabPanelList = [
             {
                 label: window.i18n.t('流程总览'),
                 name: 'process',
-                children: [h(processOverview, { id: id.value, ref: 'process' })]
+                children: [h(processOverview, { id: id.value })]
             },
             {
                 label: window.i18n.t('节点数据'),
@@ -190,6 +192,7 @@ export default defineComponent({
 
         const getElements = () => {
             return [
+                h('div', { class: 'flow-manage-title' }, [`${tplName.value}流程管理`]),
                 h(resolveComponent('bk-tab'), {
                     active: activeTab.value,
                     type: 'unborder-card',
@@ -197,7 +200,6 @@ export default defineComponent({
                     'onUpdate:active': (val) => {
                         activeTab.value = val
                         val === 'node' && getFormDetail()
-                        val === 'process' && processRef.value?.getTableData()
                     }
                 }, tabPanelList.map((panel, index) =>
                     h(resolveComponent('bk-tab-panel'), {
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.postcss b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
index e8d1adbe6..b44853eb9 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-manage-container/index.postcss
@@ -1,16 +1,24 @@
-.node-tab-wrapper {
-    .bk-tab, .bk-lesscode-tab {
-        .bk-tab-header, .bk-lesscode-tab-header {
-            line-height: 20px !important;
-            padding: 4px !important;
-            border-bottom: 0px !important;
-            font-size: 12px;
-            .bk-tab-header-item.bk-tab-header--active, .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
-                border-radius: 2px 2px 0 0 ;
+.flow-manage-wrapper {
+    padding: 20px 24px;
+    background: #ffffff;
+    .flow-manage-title {
+        font-size: 16px;
+        color: #313238;
+    }
+    .node-tab-wrapper {
+        .bk-tab, .bk-lesscode-tab {
+            .bk-tab-header, .bk-lesscode-tab-header {
+                line-height: 20px !important;
+                padding: 4px !important;
+                border-bottom: 0px !important;
+                font-size: 12px;
+                .bk-tab-header-item.bk-tab-header--active, .bk-lesscode-tab-header-item.bk-lesscode-tab-header--active {
+                    border-radius: 2px 2px 0 0 ;
+                }
+            }
+            .bk-tab-content, .bk-lesscode-tab-content {
+                display: none;
             }
-        }
-        .bk-tab-content, .bk-lesscode-tab-content {
-            display: none;
         }
     }
     .header-operate-area {
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.js
new file mode 100644
index 000000000..6fadecb56
--- /dev/null
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.js
@@ -0,0 +1,17 @@
+import { defineComponent, h } from 'vue'
+import processOverview from '../flow-manage-container/components/process-overview'
+import './index.postcss'
+
+export default defineComponent({
+    name: 'widget-flow-workbench-container-preview',
+    inheritAttrs: false,
+    setup () {
+        return () => h('div',
+            { class: 'widget-flow-workbench-container' },
+            [
+                h('div', { class: 'container-title' }, ['我的流程任务']),
+                h(processOverview, { isWorkbench: true })
+            ]
+        )
+    }
+})
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss
new file mode 100644
index 000000000..e6d0b15e6
--- /dev/null
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/flow-workbench-container/index.postcss
@@ -0,0 +1,15 @@
+.widget-flow-workbench-container {
+    padding: 20px 24px;
+    background: #ffffff;
+    .container-title {
+        margin-bottom: 12px;
+        font-size: 16px;
+        color: #313238;
+    }
+    .bk-lesscode-table {
+        border-bottom: 1px solid #dcdee5;
+        .bk-lesscode-table-body tbody tr td {
+            border-bottom-color: #dcdee5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/fields/member/index.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
index b09297fbc..75b8d32e0 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/fields/member/index.js
@@ -37,11 +37,11 @@ export default {
                 }
             },
             immadiate: true
-        },
+        }
     },
-    onMounted () {
+    created () {
         if (process.env.BK_USER_MANAGE_HOST) {
-            this.host = process.env.BK_USER_MANAGE_HOST
+            this.host = process.env.BK_USER_MANAGE_HOST.replace(/^https?:/i, '')
         } else {
             this.getUserManageUrl()
         }
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/renderer/index.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/renderer/index.js
index 93053b476..eba92d095 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/renderer/index.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/components/form-engine/renderer/index.js
@@ -301,21 +301,31 @@ export default {
 
             try {
                 this.pending = true
-                const formattedVal = []
-                Object.keys(this.value).forEach(key => {
-                    const val = this.value[key]
-                    const field = this.fields.find(item => item.configure.key === key)
-                    if (Array.isArray(val) && field.type !== 'table') {
-                        formattedVal.push({ key, value: val.join(',') })
-                    } else {
-                        formattedVal.push({ key, value: val })
-                    }
-                })
-                await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
-                this.$bkMessage({
-                    theme: 'success',
-                    message: window.i18n.t('表单数据添加成功')
-                })
+                const { action, flowTplId, nodeId } = this.dataSource
+                if (action === 'executeFlow') {
+                    const res = await this.$http.post(`/flow/tpl/${flowTplId}/createAndExecuteTask`)
+                    await this.$http.post(`/flow/task/${res.data.id}/manual_node/${nodeId}/submit`, this.value)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: window.i18n.t('流程提单成功')
+                    })
+                } else {
+                    const formattedVal = []
+                    Object.keys(this.value).forEach(key => {
+                        const val = this.value[key]
+                        const field = this.fields.find(item => item.configure.key === key)
+                        if (Array.isArray(val) && field.type !== 'table') {
+                            formattedVal.push({ key, value: val.join(',') })
+                        } else {
+                            formattedVal.push({ key, value: val })
+                        }
+                    })
+                    await this.$http.post(`/data-source/user/tableName/${this.tableName}?formId=${this.formId}`, formattedVal)
+                    this.$bkMessage({
+                        theme: 'success',
+                        message: window.i18n.t('表单数据添加成功')
+                    })
+                }
             } catch (e) {
                 console.error(e)
             } finally {
diff --git a/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js b/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
index 61b7b18c2..e94811fb7 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/client/src/main.js
@@ -22,7 +22,8 @@ import widgetTableColumn from '@/components/patch/widget-table-column.js'
 import widgetBkTable from '@/components/patch/widget-bk-table.vue'
 import widgetBkVision from '@/components/patch/widget-bk-vision.vue'
 import widgetFormContainer from '@/components/form-engine/renderer/index.js'
-import widgetFlowContainer from '@/components/flow-manage-container/index.js'
+import widgetFlowManageContainer from '@/components/flow-manage-container/index.js'
+import widgetFlowWorkbenchContainer from '@/components/flow-workbench-container/index.js'
 import widgetDataManageContainer from '@/components/data-manage-container/form-data-manage/index.js'
 
 import pureAxios from '@/api/pureAxios.js'
@@ -48,7 +49,8 @@ auth.requestCurrentUser().then(user => {
         global.mainComponent.component('widget-table-column', widgetTableColumn)
         global.mainComponent.component('widget-bk-table', widgetBkTable)
         global.mainComponent.component('widget-form-container', widgetFormContainer)
-        global.mainComponent.component('widget-flow-manage-container', widgetFlowContainer)
+        global.mainComponent.component('widget-flow-manage-container', widgetFlowManageContainer)
+        global.mainComponent.component('widget-flow-workbench-container', widgetFlowWorkbenchContainer)
         global.mainComponent.component('widget-data-manage-container', widgetDataManageContainer)
         global.mainComponent.component('auth-button', AuthButton)
         ${useVantWidget}
diff --git a/lib/server/project-template/vue3/project-init-code/lib/server/controller/flow.js b/lib/server/project-template/vue3/project-init-code/lib/server/controller/flow.js
index c4326f5b9..4713eff34 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/server/controller/flow.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/server/controller/flow.js
@@ -32,6 +32,7 @@ import { transFlowTplToBkFlowPipelineTree } from '../util/flow/index'
 
 const spaceId = '${spaceId}'
 
+const bkflowGwName = global.BKFLOW_API_GATEWAY_NAME
 // bkflow的预发布环境名称为stage
 const bkflowGwStage = apiGateWayConfig.stageName === 'stag' ? 'stage' : apiGateWayConfig.stageName
  
@@ -51,7 +52,7 @@ export default class FlowController {
         const taskName = `${flowDetail.name}_${dayjs().format('YYYYMMDDHHmmss')}`
 
         const bkFlowTaskDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/create_task_without_template`,
             method: 'post',
             authorization: {
@@ -86,7 +87,7 @@ export default class FlowController {
                 }
             )
             await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowGwName,
                 path: `/space/${spaceId}/task/${bkFlowTaskDetail.data.id}/operate_task/start/`,
                 method: 'post',
                 authorization: {
@@ -104,6 +105,66 @@ export default class FlowController {
         }
     }
 
+    // 获取项目下所有流程的任务列表
+    @OutputJson()
+    @Get('/task/list')
+    async getProjectTaskList (
+        @CookieParams({ name: global.AUTH_NAME }) bkToken,
+        @QueryParams({ name: 'id' }) id, // 任务id
+        @QueryParams({ name: 'tplName', default: '' }) tplName,
+        @QueryParams({ name: 'createAtStart' }) createAtStart,
+        @QueryParams({ name: 'createAtEnd' }) createAtEnd,
+        @QueryParams({ name: 'createUser' }) createUser,
+        @QueryParams({ name: 'page', default: 1 }) page,
+        @QueryParams({ name: 'pageSize', default: 10 }) pageSize,
+    ) {
+        const query = { deleteFlag: 0 }
+
+        if (id) {
+            query.id = id
+        }
+
+        if (createUser) {
+            query.createUser = createUser
+        }
+
+        if (createAtStart && createAtEnd) {
+            query.createTime = Between(createAtStart, createAtEnd)
+        }
+
+        const { list, count } = await dataService.get({
+            tableFileName: 'flow-task',
+            page,
+            pageSize,
+            query
+        })
+
+
+        const taskIds = list.map(item => item.bkFlowTaskId)
+
+        // 调用BkFlow接口查询任务的执行状态
+        const tasksStatusRes = await execApiGateWay({
+            apiName: bkflowGwName,
+            path: `/space/${spaceId}/get_tasks_states/`,
+            method: 'post',
+            authorization: {
+                ...token,
+                [global.AUTH_NAME]: bkToken
+            },
+            stageName: bkflowGwStage,
+            data: {
+                task_ids: taskIds
+            }
+        })
+
+        list.forEach(task => {
+            task.status = tasksStatusRes.data[task.bkFlowTaskId]?.state || ''
+            task.tplName = flowTplListMap[task.tplId]?.name || ''
+        })
+
+        return { list, count }
+    }
+
     // 获取流程任务列表
     @OutputJson()
     @Get('/tpl/:tplId/task/list')
@@ -142,7 +203,7 @@ export default class FlowController {
 
         // 调用BkFlow接口查询任务的执行状态
         const tasksStatusRes = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/get_tasks_states/`,
             method: 'post',
             authorization: {
@@ -174,7 +235,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -210,7 +271,7 @@ export default class FlowController {
             if (runningStateNodes.length > 0) {
                 // 任务模板详情数据，比较节点id
                 const taskTplDetail = await execApiGateWay({
-                    apiName: 'bkflow-eng-svc',
+                    apiName: bkflowGwName,
                     path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
                     method: 'get',
                     authorization: {
@@ -246,7 +307,7 @@ export default class FlowController {
 
         // 任务执行详情数据
         const taskExecDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_states/`,
             method: 'get',
             authorization: {
@@ -258,7 +319,7 @@ export default class FlowController {
 
         // 任务模板详情数据
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -334,7 +395,7 @@ export default class FlowController {
         const taskItem = await dataService.findOne('flow-task', { id: taskId })
 
         const taskTplDetail = await execApiGateWay({
-            apiName: 'bkflow-eng-svc',
+            apiName: bkflowGwName,
             path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/get_task_detail/`,
             method: 'get',
             authorization: {
@@ -354,7 +415,7 @@ export default class FlowController {
 
         if (bkFlowNodeId) {
             const res =  await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: bkflowGwName,
                 path: `/space/${spaceId}/task/${taskItem.bkFlowTaskId}/node/${bkFlowNodeId}/operate_node/callback/`,
                 method: 'post',
                 authorization: {
diff --git a/lib/server/project-template/vue3/project-init-code/lib/server/controller/mock-data.js b/lib/server/project-template/vue3/project-init-code/lib/server/controller/mock-data.js
index e6346d56c..be682c291 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/server/controller/mock-data.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/server/controller/mock-data.js
@@ -9,12 +9,6 @@ import {
 
 const METHODS_WITH_DATA = ['post', 'put', 'patch']
 
-function strToJson (str) {
-    // eslint-disable-next-line no-new-func
-    const json = (new Function('return ' + str))()
-    return json
-}
-
 @Controller('/api/data')
 export default class DataController {
     @OutputJson({ decorator: false })
@@ -46,7 +40,7 @@ export default class DataController {
         }
 
         // 请求携带的数据
-        const httpData = typeof apiData === 'string' ? strToJson(apiData || '{}') : apiData
+        const httpData = apiData
         if (METHODS_WITH_DATA.includes(type)) {
             httpConf.data = httpData
         } else {
diff --git a/lib/server/project-template/vue3/project-init-code/lib/server/custom-global.js b/lib/server/project-template/vue3/project-init-code/lib/server/custom-global.js
index 57230fc43..0f6b22d21 100644
--- a/lib/server/project-template/vue3/project-init-code/lib/server/custom-global.js
+++ b/lib/server/project-template/vue3/project-init-code/lib/server/custom-global.js
@@ -38,6 +38,8 @@ global.ITSM_APP_CODE = process.env.BKPAAS_ENGINE_REGION === 'ieod' ? 'bkc-itsm'
 global.BKPAAS_ENGINE_REGION = process.env.BKPAAS_ENGINE_REGION === 'ieod' ? 'ieod' : 'default'
 // 是否对接权限中心
 global.IAM_ENABLE = process.env.NODE_ENV !== 'development'
+// bkflow网关名称
+global.BKFLOW_API_GATEWAY_NAME = process.env.BKFLOW_API_GATEWAY_NAME || (global.AUTH_NAME === 'bk_token' ? 'bk-flow-engine' : 'bkflow-eng-svc')
 
 const loadEnv = (filePath) => {
     if (fs.existsSync(filePath)) {
diff --git a/lib/server/project-template/vue3/project-init-code/package.json b/lib/server/project-template/vue3/project-init-code/package.json
index a68f09cb6..cd994d7ea 100644
--- a/lib/server/project-template/vue3/project-init-code/package.json
+++ b/lib/server/project-template/vue3/project-init-code/package.json
@@ -116,7 +116,7 @@
     "caniuse-lite": "~1.0.30000974",
     "chalk": "~2.4.2",
     "change-case": "~4.1.1",
-    "cheerio": "~1.0.0-rc.3",
+    "cheerio": "1.0.0-rc.2",
     "chokidar": "~3.2.1",
     "co-views": "~2.1.0",
     "cookie": "~0.4.0",
diff --git a/lib/server/router/component.js b/lib/server/router/component.js
index 5439aafd1..f65eb4781 100644
--- a/lib/server/router/component.js
+++ b/lib/server/router/component.js
@@ -47,7 +47,7 @@ router.use(['/using', '/create', '/version-detail'], async (ctx, next) => {
 })
 
 // 校验projectId跟资源id
-router.use(['/update', '/updateData', '/off', '/online', 'scope', '/delete', '/page-useing-version'], async (ctx, next) => {
+router.use(['/update', '/off', '/online', '/scope', '/delete', '/page-useing-version'], async (ctx, next) => {
     const tableName = 'COMP'
 
     const resourceId = ['POST', 'PUT'].includes(ctx.request.method)
@@ -55,7 +55,7 @@ router.use(['/update', '/updateData', '/off', '/online', 'scope', '/delete', '/p
         : (ctx.request.query?.id || ctx.request.query?.compId)
     
     // 校验header获参数中获传过来的projceId，与根据传过来的资源id反差出来的projectId是否一致
-    const projectId = await findRealProjectId(ctx, { tableName, resourceId } )
+    const projectId = await findRealProjectId(ctx, { tableName, resourceId })
     if (!projectId) {
         ctx.send({
             code: 500,
@@ -69,6 +69,38 @@ router.use(['/update', '/updateData', '/off', '/online', 'scope', '/delete', '/p
     }
 })
 
+// 需要同时校验组件id跟categoryId
+router.use(['/updateData'], async (ctx, next) => {
+    const { id, categoryId } = ctx.request.body
+    
+    let tableName = 'COMP'
+    let resourceId = id
+    let projectId = await findRealProjectId(ctx, { tableName, resourceId })
+    if (!projectId) {
+        ctx.send({
+            code: 500,
+            message: global.i18n.t('projectId非法'),
+            data: null
+        })
+        return
+    } else {
+        await handleProjectPerm(ctx, () => {}, projectId)
+    }
+
+    tableName = 'COMP_CATEGORY'
+    resourceId = categoryId
+    projectId = await findRealProjectId(ctx, { tableName, resourceId })
+    if (!projectId) {
+        ctx.send({
+            code: 500,
+            message: global.i18n.t('projectId非法'),
+            data: null
+        })
+    } else {
+        await handleProjectPerm(ctx, next, projectId)
+    }
+})
+
 router.get('/list', list)
 router.get('/useing', useing)
 router.get('/detail', detail)
diff --git a/lib/server/router/page.js b/lib/server/router/page.js
index 27c787b07..a55a94afc 100644
--- a/lib/server/router/page.js
+++ b/lib/server/router/page.js
@@ -34,10 +34,30 @@ const router = new Router({
     prefix: '/api/page'
 })
 
-router.use(['/getList', '/create', '/getDeletePageCodes'], async (ctx, next) => {
+router.use(['/getList', '/getDeletePageCodes'], async (ctx, next) => {
     await handleProjectPerm(ctx, next)
 })
 
+router.use(['/create'], async (ctx, next) => {
+    const tableName = 'LAYOUT_INST'
+    const resourceKey = 'id'
+    const resourceId = ctx.request.body.layout?.id
+    
+    // 校验header获参数中获传过来的projceId，与根据传过来的资源id反差出来的projectId是否一致
+    const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey })
+    if (!projectId) {
+        ctx.send({
+            code: 500,
+            message: global.i18n.t('projectId非法'),
+            data: null
+        })
+        return
+        await next()
+    } else {
+        await handleProjectPerm(ctx, next, projectId)
+    }
+})
+
 const hasPageIdRoutes = ['/update', '/copy', '/delete', '/detail', '/updatePageActive', '/occupyPage']
 router.use(hasPageIdRoutes, async (ctx, next) => {
     const tableName = 'PROJECT_PAGE'
diff --git a/lib/server/router/route.js b/lib/server/router/route.js
index 379709fe7..99f8ec524 100644
--- a/lib/server/router/route.js
+++ b/lib/server/router/route.js
@@ -28,14 +28,79 @@ const router = new Router({
 })
 
 // 只校验projectId
-const checkList = ['/query/:projectId', '/project/:projectId/page', '/project/:id', '/project/:id/tree', '/bind-page-route']
+const checkList = ['/query/:projectId', '/project/:projectId/page', '/project/:id/tree']
 router.use(checkList, async (ctx, next) => {
     await handleProjectPerm(ctx, next)
 })
 
+router.use(['/project/:id'], async (ctx, next) => {
+    if (ctx.request.method === 'POST') {
+        const tableName = 'LAYOUT_INST'
+        const resourceKey = 'id'
+        const resourceId = ctx.request.body.pageRoute?.layoutId
+        const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey })
+        if (!projectId) {
+            ctx.send({
+                code: 500,
+                message: global.i18n.t('projectId非法'),
+                data: null
+            })
+            return
+            await next()
+        } else {
+            await handleProjectPerm(ctx, next, projectId)
+        }
+    } else {
+        await handleProjectPerm(ctx, next)
+    }
+})
+
+router.use(['/bind-page-route'], async (ctx, next) => {
+    const { pageId, routeId } = ctx.request.body
+    if (!pageId && !routeId) {
+        await handleProjectPerm(ctx, next)
+    }
+    
+    if (pageId) {
+        const tableName = 'PROJECT_PAGE'
+        const resourceKey = 'pageId'
+        const resourceId = pageId
+        const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey })
+        if (!projectId) {
+            ctx.send({
+                code: 500,
+                message: global.i18n.t('projectId非法'),
+                data: null
+            })
+            return
+            await next()
+        } else {
+            await handleProjectPerm(ctx, next, projectId)
+        }
+    }
+
+    if (routeId) {
+        const tableName = 'PAGE_ROUTE'
+        const resourceKey = 'routeId'
+        const resourceId = routeId
+        const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey })
+        if (!projectId) {
+            ctx.send({
+                code: 500,
+                message: global.i18n.t('projectId非法'),
+                data: null
+            })
+            return
+            await next()
+        } else {
+            await handleProjectPerm(ctx, next, projectId)
+        }
+    }
+})
+
 // 校验projectId跟资源id
 router.use(['/save-page-route', '/remove'], async (ctx, next) => {
-    let tableName = 'PAGE_ROUTE'
+    const tableName = 'PAGE_ROUTE'
     let resourceKey = 'id'
     let resourceId = ctx.request.body?.pageRoute?.id
 
@@ -45,7 +110,7 @@ router.use(['/save-page-route', '/remove'], async (ctx, next) => {
     }
     
     // 校验header获参数中获传过来的projceId，与根据传过来的资源id反差出来的projectId是否一致
-    const projectId = await findRealProjectId(ctx, { tableName, resourceKey, resourceId } )
+    const projectId = await findRealProjectId(ctx, { tableName, resourceKey, resourceId })
     if (!projectId) {
         ctx.send({
             code: 500,
@@ -66,7 +131,7 @@ router.use(['/get-page-route/:pageId', '/update-page-route/:pageId'], async (ctx
     const resourceId = ctx.request.body?.pageId || ctx.params?.pageId
     
     // 校验header获参数中获传过来的projceId，与根据传过来的资源id反差出来的projectId是否一致
-    const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey } )
+    const projectId = await findRealProjectId(ctx, { tableName, resourceId, resourceKey })
     if (!projectId) {
         ctx.send({
             code: 500,
diff --git a/lib/server/service/business/flow.js b/lib/server/service/business/flow.js
index 5990019eb..76064de29 100644
--- a/lib/server/service/business/flow.js
+++ b/lib/server/service/business/flow.js
@@ -8,9 +8,10 @@
  * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations under the License.
  */
-
+import { getRepository, Between, Like } from 'typeorm'
+import FlowTask from '../../model/entities/flow-task'
 import { execApiGateWay } from '@bkui/apigateway-nodejs-sdk'
-import { LCDataService, TABLE_FILE_NAME } from '../common/data-service'
+import { LCDataService, TABLE_FILE_NAME, transformQuery } from '../common/data-service'
 import httpConf from '../../conf/http'
 import v3Conf from '../../conf/v3'
 
@@ -27,7 +28,7 @@ export const createBkFlowSpace = async () => {
             }
 
             const response = await execApiGateWay({
-                apiName: 'bkflow-eng-svc',
+                apiName: global.BKFLOW_API_GATEWAY_NAME,
                 path: `/create_space/`,
                 method: 'post',
                 authorization: {
@@ -63,3 +64,52 @@ export const createBkFlowSpace = async () => {
 
     return spaceData
 }
+
+export const getTaskList = (parmas) => {
+
+    const {
+        projectId,
+        id,
+        tplName,
+        createAtStart,
+        createAtEnd,
+        createUser,
+        page = 0,
+        pageSize = 10
+    } = parmas
+
+    const query = {
+        projectId,
+        deleteFlag: 0
+    }
+
+    if (id) {
+        query.id = id
+    }
+
+    if (tplName) {
+        query.tpl = {
+            name: Like(`%${tplName}%`)
+        }
+    }
+
+    if (createUser) {
+        query.createUser = createUser
+    }
+
+    if (createAtStart && createAtEnd) {
+        query.createTime = Between(createAtStart, createAtEnd)
+    }
+
+    const queryObject = transformQuery(query)
+
+    const queryBuilder = getRepository(FlowTask)
+        .createQueryBuilder('flowTask')
+        .leftJoinAndSelect('flowTask.tpl', 'flowTpl')
+        // .addSelect(['flowTask.id AS taskId', 'flowTask.name AS taskName', 'flowTpl.id AS tpl_id', 'flowTpl.name AS tplName'])
+        .where(queryObject)
+        .orderBy("flowTask.id", "DESC")
+        .skip((page - 1) * pageSize)
+        .take(pageSize)
+    return queryBuilder.getManyAndCount(); // 获取扁平化结果
+}
diff --git a/lib/server/service/common/ai.js b/lib/server/service/common/ai.js
index 8eed5c6a7..e83487ea8 100644
--- a/lib/server/service/common/ai.js
+++ b/lib/server/service/common/ai.js
@@ -25,11 +25,17 @@ export const createChat = (bkToken) => {
         path: '/aidev/intelligence/chat_completion/',
         method: 'post',
         data: {
+            version: 'v2',
             session_id: 'lesscodeAiSession',
             variables: {},
             session_history: [],
             llm: process.env.BK_LLM,
             app_collection: 'default_chat_completion'
+        },
+        config: {
+            headers: {
+                'aidev-ticket': bkToken
+            }
         }
     })
 }
@@ -42,6 +48,7 @@ export const createChat = (bkToken) => {
  */
 export const prompt = async (bkToken, prompts) => {
     const data = {
+        version: 'v2',
         session_id: 'lesscodeAiSession',
         session_history: prompts.slice(0, -1),
         chat_prompts: prompts.slice(-1),
@@ -59,7 +66,12 @@ export const prompt = async (bkToken, prompts) => {
         apiName: 'bkaidev',
         path: `/aidev/intelligence/chat_completion/${data.session_id}/`,
         method: 'patch',
-        data
+        data,
+        config: {
+            headers: {
+                'aidev-ticket': bkToken
+            }
+        }
     })
 }
 
@@ -72,6 +84,7 @@ export const prompt = async (bkToken, prompts) => {
  */
 export const streamPrompt = (bkToken, prompts) => {
     const data = {
+        version: 'v2',
         session_id: 'lesscodeAiSession',
         session_history: prompts.slice(0, -1),
         chat_prompts: prompts.slice(-1),
@@ -94,7 +107,10 @@ export const streamPrompt = (bkToken, prompts) => {
         method: 'patch',
         data,
         config: {
-            responseType: 'stream'
+            responseType: 'stream',
+            headers: {
+                'aidev-ticket': bkToken
+            }
         }
     })
 }
diff --git a/lib/server/service/common/data-service.js b/lib/server/service/common/data-service.js
index 30f5942a9..ca95971c9 100644
--- a/lib/server/service/common/data-service.js
+++ b/lib/server/service/common/data-service.js
@@ -55,7 +55,7 @@ files.forEach((name) => {
  * 修改查询参数为typeorm需要的结构
  * @param {Object} query 查询参数
  */
-function transformQuery (query) {
+export function transformQuery (query) {
     return Object.keys(query).reduce((acc, key) => {
         const value = query[key]
         const type = Object.prototype.toString.call(value)
diff --git a/lib/server/service/common/db-engine-service.js b/lib/server/service/common/db-engine-service.js
index f83cb0d52..047982092 100644
--- a/lib/server/service/common/db-engine-service.js
+++ b/lib/server/service/common/db-engine-service.js
@@ -48,9 +48,9 @@ class DBEngineService {
      * @param sql 传入sql会执行sql字符串
      * @returns 执行结果 Array
      */
-    async execSql (sql) {
+    async execSql (sql, params = []) {
         const pool = this.getPoolPromise()
-        const [res] = await pool.query(sql)
+        const [res] = await pool.query(sql, params)
         this.close()
         return res
     }
@@ -60,7 +60,7 @@ class DBEngineService {
      * 自动嵌套事务
      * @param sqls
      */
-    async execMultSql (sqls) {
+    async execMultSql (sqls, params = []) {
         // build sql array
         const sqlArr = util.splitSql(sqls)
         // connect and exec sql
@@ -69,8 +69,8 @@ class DBEngineService {
         try {
             // 嵌套事务
             await pool.query('START TRANSACTION;')
-            for (const sql of sqlArr) {
-                const [execResult] = await pool.query(sql)
+            for (let i = 0; i < sqlArr.length; i++) {
+                const [execResult] = await pool.query(sqlArr[i], params[i] || [])
                 res.push(execResult)
             }
             await pool.query('COMMIT;')
diff --git a/lib/server/service/common/online-db-service.js b/lib/server/service/common/online-db-service.js
index 2c65672b9..e7645770d 100644
--- a/lib/server/service/common/online-db-service.js
+++ b/lib/server/service/common/online-db-service.js
@@ -12,7 +12,7 @@ import { MIGRATION_TABLE_NAME } from '../../../shared/data-source'
 import v3Config from '../../conf/v3'
 import http from '../../utils/http'
 import { LCDataService, TABLE_FILE_NAME } from './data-service'
-
+import { escapeTableName } from '../../../shared/util'
 /**
  * 操作线上环境数据库服务
  */
@@ -34,19 +34,20 @@ export default class OnlineService {
 
     // 展示表详情
     async describeTables (tableNames, database) {
-        const nameSqlFilter = tableNames.join('\',\'')
+        const placeholders = tableNames.map(() => '?').join(',')
+        const escapedTableNames = tableNames.map(escapeTableName)
         const columnSql = `
             SELECT * FROM INFORMATION_SCHEMA.TABLES t
             LEFT JOIN INFORMATION_SCHEMA.COLUMNS c
             ON t.TABLE_NAME = c.TABLE_NAME
-            WHERE t.TABLE_NAME IN ('${nameSqlFilter}') AND t.TABLE_SCHEMA = '${database}' AND c.TABLE_SCHEMA = '${database}'
+            WHERE t.TABLE_NAME IN (${placeholders}) AND t.TABLE_SCHEMA = ? AND c.TABLE_SCHEMA = ?
             ORDER BY t.CREATE_TIME DESC, c.ORDINAL_POSITION ASC;
         `
         const indexSql = `
-            SELECT * FROM INFORMATION_SCHEMA.STATISTICS WHERE TABLE_NAME IN ('${nameSqlFilter}');
+            SELECT * FROM INFORMATION_SCHEMA.STATISTICS WHERE TABLE_NAME IN (${placeholders});
         `
-        const columnsList = await this.dbEngine.execSql(columnSql)
-        const indexList = await this.dbEngine.execSql(indexSql)
+        const columnsList = await this.dbEngine.execSql(columnSql, [...escapedTableNames, database, database])
+        const indexList = await this.dbEngine.execSql(indexSql, [...escapedTableNames])
         const tableList = columnsList.reduce((acc, cur) => {
             if (cur.TABLE_NAME === MIGRATION_TABLE_NAME) return acc
 
@@ -124,12 +125,35 @@ export default class OnlineService {
 
     // 分页获取表数据
     async getTableData (tableName, page, pageSize, filterKey, filterValue, sortKey, sortValue) {
-        const where = `${filterKey && filterValue ? `WHERE \`${filterKey}\` LIKE '%${filterValue}%'` : ''}`
-        const orderBy = `ORDER BY ${sortKey || 'id'} ${sortValue || 'DESC'}`
-        const [list, foundRows = []] = await this.dbEngine.execMultSql(`
-            SELECT SQL_CALC_FOUND_ROWS * FROM \`${tableName}\` ${where} ${orderBy} LIMIT ${(page - 1) * pageSize},${pageSize};
+        tableName = escapeTableName(tableName)
+        const where = filterKey && filterValue ? 'WHERE ?? LIKE ?' : ''
+        const finalSortKey = sortKey || 'id'
+        const finalSortValue = (sortValue || 'DESC').toUpperCase()
+        const orderBy = `ORDER BY ?? ${finalSortValue}`
+
+        if (!['ASC', 'DESC'].includes(finalSortValue)) {
+            throw new Error('Invalid sort direction')
+        }
+
+        const sql = `
+            SELECT SQL_CALC_FOUND_ROWS * FROM \`${escapeTableName(tableName)}\` ${where} ${orderBy} LIMIT ?, ?;
             SELECT FOUND_ROWS();
-        `)
+        `
+        const params = [
+            // 第一条 SQL 的参数
+            [
+                ...(filterKey && filterValue ? [
+                    filterKey, // WHERE ?? 的参数
+                    `%${filterValue}%` // LIKE ? 的参数
+                ] : []),
+                finalSortKey, // ORDER BY ?? 的参数
+                (page - 1) * pageSize, // LIMIT 的第一个参数
+                +pageSize // LIMIT 的第二个参数
+            ],
+            // 第二条 SQL 不需要参数
+            []
+        ]
+        const [list, foundRows = []] = await this.dbEngine.execMultSql(sql, params)
         const rows = foundRows[0] || {}
         const count = Object.values(rows)[0] || 0
         return { list, count }
@@ -137,12 +161,35 @@ export default class OnlineService {
 
     // 获取表所有的数据
     async getTableAllData (tableName, filterKey, filterValue, sortKey, sortValue) {
-        const where = `${filterKey && filterValue ? `WHERE \`${filterKey}\` LIKE '%${filterValue}%'` : ''}`
-        const orderBy = `ORDER BY ${sortKey || 'id'} ${sortValue || 'DESC'}`
-        const [list, foundRows = []] = await this.dbEngine.execMultSql(`
-            SELECT SQL_CALC_FOUND_ROWS * FROM  \`${tableName}\` ${where} ${orderBy};
+        tableName = escapeTableName(tableName)
+        const where = filterKey && filterValue ? 'WHERE ?? LIKE ?' : ''
+        const finalSortKey = sortKey || 'id'
+        const finalSortValue = (sortValue || 'DESC').toUpperCase()
+        const orderBy = `ORDER BY ?? ${finalSortValue}`
+
+        if (!['ASC', 'DESC'].includes(finalSortValue)) {
+            throw new Error('Invalid sort direction')
+        }
+
+        const sql = `
+            SELECT SQL_CALC_FOUND_ROWS * FROM \`${escapeTableName(tableName)}\` ${where} ${orderBy};
             SELECT FOUND_ROWS();
-        `)
+        `
+
+        const params = [
+            // 第一条 SQL 的参数
+            [
+                ...(filterKey && filterValue ? [
+                    filterKey, // WHERE ?? 的参数
+                    `%${filterValue}%` // LIKE ? 的参数
+                ] : []),
+                finalSortKey // ORDER BY ?? 的参数
+            ],
+            // 第二条 SQL 不需要参数
+            []
+        ]
+
+        const [list, foundRows = []] = await this.dbEngine.execMultSql(sql, params)
         const rows = foundRows[0] || {}
         const count = Object.values(rows)[0] || 0
         return { list, count }
diff --git a/lib/shared/page-code/common/utils.js b/lib/shared/page-code/common/utils.js
index 36d1fec01..eedc0d7e8 100644
--- a/lib/shared/page-code/common/utils.js
+++ b/lib/shared/page-code/common/utils.js
@@ -1,5 +1,5 @@
 import { paramCase } from 'change-case'
-import { unitFilter } from '../../util'
+import { unitFilter, removeIllegalWords, sandboxRun } from '../../util'
 
 import safeStringify from '../../../client/src/common/json-safe-stringify'
 
@@ -9,12 +9,13 @@ import safeStringify from '../../../client/src/common/json-safe-stringify'
  * @returns { String } 类型
  */
 export function getValueType (val) {
-    const Fn = Function
+    val = removeIllegalWords(val)
     let type = 'undefined'
     // 用户输入的不符合规范的json，按照字符串处理
     try {
-        type = new Fn(`return typeof ${val}`)()
+        type = sandboxRun(`typeof ${val}`)
     } catch (error) {
+        console.log(error, 'run type error')
     }
     return type
 }
diff --git a/lib/shared/util.js b/lib/shared/util.js
index 7d44c4744..1ac29740a 100644
--- a/lib/shared/util.js
+++ b/lib/shared/util.js
@@ -16,6 +16,7 @@ import {
     encode,
     decode
 } from 'js-base64'
+const vm = require('vm')
 
 // 转b64
 export const encodeBase64 = (string) => {
@@ -32,10 +33,25 @@ export const isMatchFramework = (f1, f2) => {
     return (f1 || 'vue2') === (f2 || 'vue2')
 }
 
+// 在真正执行new fn 之前， 去除一些非法字符
+export const removeIllegalWords = (val) => {
+    const words = ['Function', 'function', 'mainModule', 'child_process', 'process.', '.exec', 'global', 'fs', 'eval', 'curl', '=>', 'return', 'require(', 'import ', 'var ', '()', 'spawn', 'execFile']
+    let newVal = val
+    words.forEach(word => {
+        // 替换成xxxx字符串
+        newVal = newVal.replaceAll(word, 'xxxxxxxxxxx')
+    })
+    if (newVal !== val) {
+        console.log('过滤处理字符: ', val)
+    }
+    return newVal
+}
+
 // 从字符串中提取真正的内容
 export const getValueFromString = (val) => {
-    const Fn = Function
-    return new Fn(`return ${val}`)()
+    // val = removeIllegalWords(val)
+    // return sandboxRun(val)
+    return val
 }
 
 export const generatorMenu = (() => {
@@ -319,6 +335,11 @@ export function arrayGroupBy (list, groupId) {
     return groupedBy
 }
 
+// 过滤tablename的非法字符
+export function escapeTableName (tableName) {
+    return tableName.replace(/[^a-zA-Z0-9_-]/g, '')
+}
+
 /**
  * 将多条sql拆分成sql数组
  * @param {*} sqlString sql语句
@@ -413,3 +434,22 @@ export const getLesscodeVarCode = (value) => {
     }
     return ''
 }
+
+// 沙箱执行code
+export const sandboxRun = (code) => {
+    try {
+        // 1. 创建隔离的沙箱环境（无全局访问权限）
+        const context = vm.createContext(Object.create({}))
+
+        // 2. 执行参数限制
+        const BLACKLIST = ['process', 'fs', 'child_process', 'eval']
+        if (BLACKLIST.some(kw => code.includes(kw))) throw new Error('禁止操作')
+
+        console.log(code, 'sanbox result', vm.runInContext(code, context))
+        return vm.runInContext(code, context, {
+            timeout: 500
+        })
+    } catch (error) {
+        console.log('sandbox err:', error)
+    }
+}
diff --git a/package.json b/package.json
index b63332eab..7186f424f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lesscode",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -74,7 +74,7 @@
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-private-methods": "7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@bkui/apigateway-nodejs-sdk": "0.0.1-beta.52",
+    "@bkui/apigateway-nodejs-sdk": "0.0.2",
     "@blueking/ai-blueking": "^0.3.18",
     "@blueking/babel-preset-bk": "^2.1.0-beta.10",
     "@blueking/bkcharts": "^2.0.11-alpha.5",
@@ -113,7 +113,7 @@
     "caniuse-lite": "~1.0.30000974",
     "chalk": "~2.4.2",
     "change-case": "~4.1.1",
-    "cheerio": "~1.0.0-rc.2",
+    "cheerio": "1.0.0-rc.2",
     "co-views": "~2.1.0",
     "compressing": "^1.6.3",
     "continuation-local-storage": "~3.2.1",
@@ -210,6 +210,7 @@
     "typescript": "^4.4.3",
     "unzipper": "~0.10.11",
     "vant": "^2.12.39",
+    "vm-browserify": "^1.1.2",
     "vue": "~2.7.14",
     "vue-content-loader": "~0.2.3",
     "vue-echarts": "^5.0.0-beta.0",