diff --git a/frontend/pc/src/utils/use-modal-close-confirmation.js b/frontend/pc/src/utils/use-modal-close-confirmation.js
new file mode 100644
index 000000000..19a550429
--- /dev/null
+++ b/frontend/pc/src/utils/use-modal-close-confirmation.js
@@ -0,0 +1,11 @@
+export default function useModalCloseConfirmation(title, subTitle) {
+  return new Promise(resolve => {
+    window.app.$bkInfo({
+      title: title || '确认离开当前页？',
+      subTitle: subTitle || '离开会导致未保存信息丢失',
+      okText: '离开',
+      confirmFn: () => resolve(true),
+      cancelFn: () => resolve(false),
+    });
+  });
+}
diff --git a/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue b/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue
index 6f3fc00d0..dc33a3f10 100644
--- a/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue
+++ b/frontend/pc/src/views/processManagement/apiConfigure/addApiInfo.vue
@@ -69,25 +69,28 @@
         :property="'name'">
         <bk-input maxlength="120"
           :placeholder="$t(`m.systemConfig['请输入接口名称']`)"
-          v-model="directory.formInfo.name">
+          v-model="directory.formInfo.name"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item :label="$t(`m.systemConfig['负责人：']`)">
-        <member-select v-model="directory.formInfo.ownersInputValue"></member-select>
+        <member-select v-model="directory.formInfo.ownersInputValue" @change="$emit('change')"></member-select>
       </bk-form-item>
       <bk-form-item
         :label="$t(`m.systemConfig['函数名称']`)">
         <!-- eslint-disable vue/camelcase -->
         <bk-input
           :placeholder="$t(`m.systemConfig['请输入函数名称']`)"
-          v-model="directory.formInfo.func_name">
+          v-model="directory.formInfo.func_name"
+          @change="$emit('change')">
         </bk-input>
         <!-- eslint-enable -->
       </bk-form-item>
       <bk-form-item
         :label="$t(`m.systemConfig['接口路径']`)">
         <bk-input v-model="directory.formInfo.road" placeholder="please input path"
-          :disabled="(directory.formInfo.category === 'component' || directory.formInfo.category === 'buffet_component') && typeInfo !== 'ADD'">
+          :disabled="(directory.formInfo.category === 'component' || directory.formInfo.category === 'buffet_component') && typeInfo !== 'ADD'"
+          @change="$emit('change')">
           <template slot="prepend">
             <bk-dropdown-menu class="group-text"
               @show="dropdownShow"
@@ -114,7 +117,8 @@
         :label="$t(`m.systemConfig['版本号']`)">
         <bk-input
           :placeholder="$t(`m.systemConfig['请输入版本号']`)"
-          v-model="directory.formInfo.version">
+          v-model="directory.formInfo.version"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item
@@ -123,7 +127,8 @@
           :placeholder="$t(`m.systemConfig['请输入API描述']`)"
           :type="'textarea'"
           :rows="3"
-          v-model="directory.formInfo.desc">
+          v-model="directory.formInfo.desc"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
     </bk-form>
@@ -301,6 +306,7 @@
         this.directory.formInfo.name = dataItem.label;
         this.directory.formInfo.version = dataItem.version || 'v1';
         this.directory.formInfo.category = dataItem.category;
+        this.$emit('change');
       },
       changeCode(id) {
         // 切换 清空
@@ -318,6 +324,7 @@
         };
         const dataItem = this.treeList.slice(1).filter(item => item.id === id)[0];
         this.$parent.$parent.$parent.getChannelPathList(dataItem.code);
+        this.$emit('change');
       },
       dropdownShow() {
         this.isDropdownShow = true;
diff --git a/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue b/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue
index be695425c..c1270546b 100644
--- a/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue
+++ b/frontend/pc/src/views/processManagement/apiConfigure/apiTable.vue
@@ -195,13 +195,16 @@
     <bk-sideslider
       :is-show.sync="entryInfo.show"
       :title="entryInfo.title"
-      :width="entryInfo.width">
+      :width="entryInfo.width"
+      :quick-close="true"
+      :before-close="handleBeforeClose">
       <div slot="content" style="padding: 20px" v-if="entryInfo.show">
         <add-api-info
           :first-level-info="firstLevelInfo"
           :path-list="pathList"
           :tree-list="treeList"
-          :type-info="typeInfo">
+          :type-info="typeInfo"
+          @change="isFormChanged = true">
         </add-api-info>
       </div>
     </bk-sideslider>
@@ -212,6 +215,7 @@
   import { errorHandler } from '../../../utils/errorHandler';
   import addApiInfo from './addApiInfo.vue';
   import permission from '@/mixins/permission.js';
+  import useModalCloseConfirmation from '@/utils/use-modal-close-confirmation';
   import Empty from '../../../components/common/Empty.vue';
 
   export default {
@@ -289,6 +293,7 @@
         fileVal: '',
         typeInfo: '',
         searchtoggle: false,
+        isFormChanged: false,
       };
     },
     computed: {
@@ -360,6 +365,7 @@
           ? this.$t('m.systemConfig["新增接口"]') : this.$t('m.systemConfig["接入接口"]');
         this.$refs.apiDropdown.hide();
         this.entryInfo.show = !this.entryInfo.show;
+        this.isFormChanged = false;
       },
       dropdownShow() {
         this.isDropdownShow = true;
@@ -523,6 +529,13 @@
       exportFlow(item) {
         window.open(`${window.SITE_URL}api/postman/remote_api/${item.id}/exports/`);
       },
+      async handleBeforeClose() {
+        if (this.isFormChanged) {
+          const result = await useModalCloseConfirmation();
+          return result;
+        }
+        return true;
+      },
     },
   };
 </script>
diff --git a/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue b/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue
index 7c0bd043d..8bbc8c060 100644
--- a/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue
+++ b/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/addField/index.vue
@@ -37,8 +37,10 @@
           :property="'prevId'"
           :error-display-type="'normal'"
           :ext-cls="'bk-mt0-item'">
-          <bk-select v-model="formInfo.prevId"
-            searchable>
+          <bk-select
+            v-model="formInfo.prevId"
+            searchable
+            @change="$emit('change')">
             <bk-option v-for="option in prevNodeList"
               :key="option.id"
               :id="option.id"
@@ -73,7 +75,8 @@
         <bk-input
           v-model="formInfo.key"
           :placeholder="$t(`m.treeinfo['请输入唯一标识']`)"
-          :disabled="typeof changeInfo.id === 'number' || changeInfo.is_builtin || changeInfo.source === 'TABLE'">
+          :disabled="typeof changeInfo.id === 'number' || changeInfo.is_builtin || changeInfo.source === 'TABLE'"
+          @change="$emit('change')">
         </bk-input>
       </bk-form-item>
       <bk-form-item
@@ -116,7 +119,7 @@
         v-if="formInfo.regex === 'ASSOCIATED_FIELD_VALIDATION' && !isEditPublic">
         <div class="bk-form-content" style="margin-left: 0">
           <p class="bk-form-p">{{$t(`m.newCommon["字段间关系"]`)}}</p>
-          <bk-radio-group v-model="formInfo.regex_config.rule.type">
+          <bk-radio-group v-model="formInfo.regex_config.rule.type" @change="$emit('change')">
             <bk-radio :value="'and'" :ext-cls="'mr20'">{{$t(`m.treeinfo['且']`)}}</bk-radio>
             <bk-radio :value="'or'">{{$t(`m.treeinfo['或']`)}}</bk-radio>
           </bk-radio-group>
@@ -128,7 +131,8 @@
           <bk-select style="width: 120px"
             :ext-cls="'field-valid-select'"
             v-model="expression.condition"
-            :clearable="false">
+            :clearable="false"
+            @change="$emit('change')">
             <bk-option v-for="option in betweenList"
               :key="option.id"
               :id="option.typeName"
@@ -164,7 +168,8 @@
           <bk-input
             v-model="formInfo.customRegex"
             :disabled="(changeInfo.is_builtin || changeInfo.source === 'TABLE') && formInfo.key !== 'bk_biz_id'"
-            :placeholder="$t(`m.treeinfo['请输入正则规则']`)">
+            :placeholder="$t(`m.treeinfo['请输入正则规则']`)"
+            @change="$emit('change')">
           </bk-input>
         </bk-form-item>
       </template>
@@ -276,7 +281,7 @@
         <bk-form-item :ext-cls="'bk-halfline-item bk-halfline-margin bk-mt20-item'"
           :label="$t(`m.treeinfo['布局要求']`)"
           :required="true">
-          <bk-radio-group v-model="formInfo.layout">
+          <bk-radio-group v-model="formInfo.layout" @change="$emit('change')">
             <template v-for="(layout, layoutIndex) in globalChoise.layout_type">
               <bk-radio :ext-cls="'mr20'"
                 :key="layoutIndex"
@@ -290,7 +295,7 @@
         <bk-form-item :ext-cls="'bk-halfline-item bk-mt20-item'"
           :label="$t(`m.treeinfo['字段必填']`)"
           :required="true">
-          <bk-radio-group v-model="formInfo.validate">
+          <bk-radio-group v-model="formInfo.validate" @change="$emit('change')">
             <template v-for="(validate, validateIndex) in globalChoise.validate_type">
               <bk-radio :ext-cls="'mr20'"
                 :key="validateIndex"
@@ -308,13 +313,15 @@
         <textarea
           class="bk-form-textarea bk-textarea-tanble bk-halfline-item bk-halfline-margin field-input-tips"
           :placeholder="$t(`m.treeinfo['请输入字段填写说明']`)"
-          v-model.trim="formInfo.desc">
+          v-model.trim="formInfo.desc"
+          @change="$emit('change')">
                 </textarea>
         <p class="field-tips-checkbox" style="margin-left: 335px;">
           <bk-checkbox
             :true-value="trueStatus"
             :false-value="falseStatus"
-            v-model="formInfo.is_tips">
+            v-model="formInfo.is_tips"
+            @change="$emit('change')">
             {{ $t('m.treeinfo["添加额外提示说明"]') }}
           </bk-checkbox>
         </p>
@@ -328,8 +335,9 @@
           <textarea
             class="bk-form-textarea bk-textarea-tanble bk-halfline-item bk-halfline-margin"
             :placeholder="$t(`m.treeinfo['请输入，用于鼠标经过提示']`)"
-            v-model.trim="formInfo.tips">
-                    </textarea>
+            v-model.trim="formInfo.tips"
+            @change="$emit('change')">
+          </textarea>
           <p class="bk-label-tips">
             <span v-bk-tooltips.top="(formInfo.tips || $t(`m.treeinfo['字段释疑填填看哦']`))">
               {{ $t('m.treeinfo["效果预览"]') }}
@@ -345,7 +353,8 @@
           :ext-cls="'bk-mt20-item'">
           <bk-switcher v-model="formInfo.show_type"
             size="small"
-            :disabled="changeInfo.key === 'title'">
+            :disabled="changeInfo.key === 'title'"
+            @change="$emit('change')">
           </bk-switcher>
         </bk-form-item>
         <template v-if="formInfo.show_type">
@@ -670,6 +679,7 @@
         } else {
           this.isShowDataSource = false;
         }
+        this.$emit('change');
       },
       openDataSource() {
         this.isShowDataSource = true;
@@ -680,6 +690,7 @@
           keyElement.validator.content = '';
           keyElement.validator.state = '';
         }
+        this.$emit('change');
       },
       // 初始化赋值数据
       initData() {
@@ -839,6 +850,7 @@
       },
       // 改变字段类型，需要进行操作
       async changeType() {
+        this.$emit('change');
         // 改变字段类型，清空正则规则表达式
         this.formInfo.regex = 'EMPTY';
         this.formInfo.customRegex = '';
@@ -902,6 +914,7 @@
           });
       },
       onRegexFieldChange(key, expression) {
+        this.$emit('change');
         // system 表示系统内置条件，field 表示来源节点
         const systemCondition = ['system_time'];
         expression.source = systemCondition.includes(key) ? 'system' : 'field';
@@ -930,6 +943,7 @@
         }
       },
       changeApiInfo(val) {
+        this.$emit('change');
         this.apiDetail = val;
       },
       // rpc数据
@@ -938,6 +952,7 @@
       },
       // 上传文件模板
       handleFile(e) {
+        this.$emit('change');
         const fileInfo = e.target.files[0];
         const maxSize = 100000;
         const fileSize = fileInfo.size / 1024;
diff --git a/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue b/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue
index 029056ecc..200cbc5b4 100644
--- a/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue
+++ b/frontend/pc/src/views/processManagement/processDesign/nodeConfigue/components/fieldConfig.vue
@@ -150,8 +150,10 @@
     <!-- 新增字段 -->
     <bk-sideslider
       :is-show.sync="sliderInfo.show"
+      :quick-close="true"
       :title="sliderInfo.title"
-      :width="sliderInfo.width">
+      :width="sliderInfo.width"
+      :before-close="handleBeforeClose">
       <div class="p20" slot="content" v-if="sliderInfo.show">
         <add-field
           :change-info="changeInfo"
@@ -163,6 +165,7 @@
           :is-edit-public="isEditPublic"
           :workflow="flowInfo ? flowInfo.id : 0"
           :state="configur.id ? configur.id : 0"
+          @change="isFormChanged = true"
           @closeShade="closeShade">
         </add-field>
       </div>
@@ -193,6 +196,7 @@
 <script>
   import draggable from 'vuedraggable';
   import apiFieldsWatch from '../../../../commonMix/api_fields_watch';
+  import useModalCloseConfirmation from '../../../../../utils/use-modal-close-confirmation';
   import fieldPreview from './fieldPreview.vue';
   import addField from '../addField';
   import inheritState from './inheritState';
@@ -275,6 +279,7 @@
         addOrigin: {
           isOther: false,
         },
+        isFormChanged: false,
       };
     },
     computed: {
@@ -380,6 +385,13 @@
       updateInfo() {
         this.cacheFieldsIndexInfo();
       },
+      async handleBeforeClose() {
+        if (this.isFormChanged) {
+          const result = await useModalCloseConfirmation();
+          return result;
+        }
+        return true;
+      },
       // 新增编辑弹窗
       closeShade() {
         this.sliderInfo.show = false;
@@ -443,6 +455,7 @@
         this.$store.dispatch(url, params).then((res) => {
           this.nodesList = res.data;
           this.sliderInfo.show = true;
+          this.isFormChanged = false;
         })
           .catch((res) => {
             errorHandler(res, this);
diff --git a/frontend/pc/src/views/processManagement/publicTrigger/addTrigger.vue b/frontend/pc/src/views/processManagement/publicTrigger/addTrigger.vue
index fae4f2f39..ac8cb4bd8 100644
--- a/frontend/pc/src/views/processManagement/publicTrigger/addTrigger.vue
+++ b/frontend/pc/src/views/processManagement/publicTrigger/addTrigger.vue
@@ -36,10 +36,10 @@
           data-test-id="trigger-input-name"
           :required="true"
           :property="'name'">
-          <bk-input v-model="formData.name" :placeholder="$t(`m.trigger['请输入触发器名称']`)"></bk-input>
+          <bk-input v-model="formData.name" :placeholder="$t(`m.trigger['请输入触发器名称']`)" @change="$emit('change')"></bk-input>
         </bk-form-item>
         <bk-form-item :label="$t(`m.trigger['是否启用']`)">
-          <bk-switcher data-test-id="triggers_switcher_isUseTrigger" v-model="formData.is_enabled" size="small"></bk-switcher>
+          <bk-switcher data-test-id="triggers_switcher_isUseTrigger" v-model="formData.is_enabled" size="small" @change="$emit('change')"></bk-switcher>
         </bk-form-item>
         <!-- <template v-if="!originInfoToTrigger.id">
           <bk-form-item :label="$t(`m.trigger['基础模型']`)">
@@ -63,7 +63,8 @@
             :type="'textarea'"
             :rows="3"
             :maxlength="100"
-            v-model="formData.desc">
+            v-model="formData.desc"
+            @change="$emit('change')">
           </bk-input>
         </bk-form-item>
       </bk-form>
@@ -100,7 +101,7 @@
           :required="true"
           :property="'signal'"
           style="width: 300px;">
-          <bk-select data-test-id="triggers_select_choiceEvent" v-model="formData.signal" :placeholder="$t(`m.trigger['请选择触发事件']`)">
+          <bk-select data-test-id="triggers_select_choiceEvent" v-model="formData.signal" :placeholder="$t(`m.trigger['请选择触发事件']`)" @change="$emit('change')">
             <bk-option-group
               v-for="(group, index) in triggerEventList"
               :name="group.name"
@@ -129,7 +130,8 @@
                   v-if="item.nameChange">
                   <bk-input style="width: 260px; display: inline-block;"
                     :clearable="true"
-                    v-model="item.name">
+                    v-model="item.name"
+                    @change="$emit('change')">
                   </bk-input>
                   <span class="bk-input-submit" @click.stop="handleClickName(item, 'submit')">{{$t(`m.trigger['确认']`)}}</span>
                   <span class="bk-input-submit" @click.stop="handleClickName(item, 'close')">{{$t(`m.trigger['取消']`)}}</span>
@@ -152,7 +154,7 @@
                 <!-- 条件触发开关 -->
                 <div class="bk-condition-switch">
                   <span class="mr5">{{$t(`m.trigger['条件触发']`)}}</span>
-                  <bk-switcher data-test-id="triggers_switcher_conditionTriggered" v-model="item.triggerStatus" size="small"></bk-switcher>
+                  <bk-switcher data-test-id="triggers_switcher_conditionTriggered" v-model="item.triggerStatus" size="small" @change="$emit('change')"></bk-switcher>
                 </div>
               </div>
               <div v-show="item.showContent">
@@ -596,17 +598,20 @@
       addRule() {
         const valueItem = JSON.parse(JSON.stringify(this.ruleItem));
         this.rulesList.push(valueItem);
+        this.$emit('change');
       },
       deleteRule(index) {
         if (this.rulesList.length === 1) {
           return;
         }
         this.rulesList.splice(index, 1);
+        this.$emit('change');
       },
       // 修改name
       changeName(item) {
         item.historyName = item.name;
         item.nameChange = true;
+        this.$emit('change');
       },
       handleClickName(item, type) {
         item.nameChange = false;
diff --git a/frontend/pc/src/views/processManagement/taskTemplate/components/commonTriggerList.vue b/frontend/pc/src/views/processManagement/taskTemplate/components/commonTriggerList.vue
index 1b43213f4..8ad7ca896 100644
--- a/frontend/pc/src/views/processManagement/taskTemplate/components/commonTriggerList.vue
+++ b/frontend/pc/src/views/processManagement/taskTemplate/components/commonTriggerList.vue
@@ -137,7 +137,9 @@
         <bk-sideslider
           :is-show.sync="triggerSliderInfo.isShow"
           :title="triggerSliderInfo.title"
-          :width="triggerSliderInfo.width">
+          :width="triggerSliderInfo.width"
+          :quick-close="true"
+          :before-close="handleBeforeClose">
           <div slot="content" v-bkloading="{ isLoading: triggerSliderInfo.addLoading }" style="min-height: 300px;">
             <add-trigger
               v-if="triggerSliderInfo.isShow"
@@ -145,7 +147,8 @@
               :trigger-info="triggerSliderInfo.item"
               :origin-info-to-trigger="originInfoToTrigger"
               @closeTrigger="triggerSliderInfo.isShow = false"
-              @getList="getBoundTriggerList">
+              @getList="getBoundTriggerList"
+              @change="isFormChanged = true">
             </add-trigger>
           </div>
         </bk-sideslider>
@@ -156,7 +159,8 @@
 <script>
   import addTrigger from '../../publicTrigger/addTrigger.vue';
   import collapseTransition from '@/utils/collapse-transition.js';
-  import { errorHandler } from '../../../../utils/errorHandler';
+  import useModalCloseConfirmation from '@/utils/use-modal-close-confirmation';
+  import { errorHandler } from '@/utils/errorHandler';
 
   export default {
     name: 'commonTriggerList',
@@ -226,6 +230,7 @@
         sourceType: '',
         senderId: '',
         triggerEventListFilter: '',
+        isFormChanged: false,
       };
     },
     computed: {
@@ -371,6 +376,7 @@
           this.triggerSliderInfo.item = item;
           this.triggerSliderInfo.isShow = true;
         }
+        this.isFormChanged = false;
       },
       citeTrigger() {
         const params = {
@@ -469,6 +475,13 @@
         this.triggerDialogInfo.searchKey = '';
         this.getPublicTriggerList();
       },
+      async handleBeforeClose() {
+        if (this.isFormChanged) {
+          const result = await useModalCloseConfirmation();
+          return result;
+        }
+        return true;
+      },
     },
   };
 </script>
diff --git a/frontend/pc/src/views/service/serviceList.vue b/frontend/pc/src/views/service/serviceList.vue
index 1657760ab..abf47cdd0 100644
--- a/frontend/pc/src/views/service/serviceList.vue
+++ b/frontend/pc/src/views/service/serviceList.vue
@@ -1007,6 +1007,7 @@
                 theme: 'success',
               });
               this.getList(1);
+              this.updateDirTree();
             })
               .catch((res) => {
                 errorHandler(res, this);
diff --git a/frontend/pc/src/views/ticket/allTicket/index.vue b/frontend/pc/src/views/ticket/allTicket/index.vue
index 17c402237..223853ee9 100644
--- a/frontend/pc/src/views/ticket/allTicket/index.vue
+++ b/frontend/pc/src/views/ticket/allTicket/index.vue
@@ -56,7 +56,7 @@
             @orderingClick="orderingClick"
             @handlePageLimitChange="handlePageLimitChange"
             @handlePageChange="handlePageChange"
-            @clearSearch="$refs.advancedSearch[0].onClearClick()">
+            @clearSearch="handleTableClearSearch">
           </table-content>
         </div>
       </div>
@@ -342,6 +342,9 @@
       evaluationSubmitSuccess() {
         this.getAllTicketList();
       },
+      handleTableClearSearch() {
+        this.$refs.advancedSearch.onClearClick();
+      },
     },
   };
 </script>
diff --git a/frontend/pc/src/views/ticket/details/taskInfo/dealTask.vue b/frontend/pc/src/views/ticket/details/taskInfo/dealTask.vue
index afa193bad..88f5055ad 100644
--- a/frontend/pc/src/views/ticket/details/taskInfo/dealTask.vue
+++ b/frontend/pc/src/views/ticket/details/taskInfo/dealTask.vue
@@ -486,10 +486,10 @@
 
             // 总结信息
             if (this.taskInfo.status === 'FINISHED') {
-              this.confirmFields =                            res.data.fields.confirm_fields.filter(item => !this.specialFieldTypes.includes(item.type));
-              this.confirmTaskTemplateFields =                            res.data.fields.confirm_fields.filter(item => ['SOPS_TEMPLATE', 'DEVOPS_TEMPLATE'].includes(item.type));
+              this.confirmFields = res.data.fields.confirm_fields.filter(item => !this.specialFieldTypes.includes(item.type));
+              this.confirmTaskTemplateFields = res.data.fields.confirm_fields.filter(item => ['SOPS_TEMPLATE', 'DEVOPS_TEMPLATE'].includes(item.type));
             } else {
-              this.confirmFields =                            res.data.fields.confirm_fields.filter(item => item.type !== 'COMPLEX-MEMBERS');
+              this.confirmFields = res.data.fields.confirm_fields.filter(item => item.type !== 'COMPLEX-MEMBERS');
             }
             this.confirmFields.forEach((item) => {
               if (item.type === 'CASCADE') {