From 9d24e20a5bea097c1c28ae5b7ac11137b14cddd1 Mon Sep 17 00:00:00 2001
From: hailinxiao <hailinxiao@tencent.com>
Date: Tue, 29 Nov 2022 22:01:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feature:=20dialog,sideslider=20=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=89=8D=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/client/src/common/leave-confirm.js        | 34 +++++++++
 lib/client/src/components/lc-dialog/index.vue | 59 +++++++++++++++
 lib/client/src/components/lc-form/index.vue   | 66 +++++++++++++++++
 lib/client/src/components/lc-form/item.vue    | 21 ++++++
 .../src/components/lc-sideslider/index.vue    | 71 +++++++++++++++++++
 .../forms/edit-market-func-sideslider.vue     | 46 ++++++------
 .../methods/forms/form-items/api-data.vue     |  8 +--
 .../methods/forms/form-items/code.vue         |  8 +--
 .../methods/forms/form-items/detail.vue       | 38 +++++-----
 .../methods/forms/form-items/group.vue        |  8 +--
 .../methods/forms/form-items/market-token.vue |  8 +--
 .../methods/forms/form-items/market.vue       |  8 +--
 .../methods/forms/form-items/name.vue         |  8 +--
 .../methods/forms/form-items/project.vue      |  8 +--
 .../methods/forms/form-items/summary.vue      |  8 +--
 .../methods/forms/form-items/token.vue        |  8 +--
 lib/client/src/main.js                        | 10 +++
 .../system/components/template-dialog.vue     | 38 ++++++----
 .../src/views/system/project-manage/index.vue | 69 +++++++++++-------
 19 files changed, 405 insertions(+), 119 deletions(-)
 create mode 100644 lib/client/src/common/leave-confirm.js
 create mode 100644 lib/client/src/components/lc-dialog/index.vue
 create mode 100644 lib/client/src/components/lc-form/index.vue
 create mode 100644 lib/client/src/components/lc-form/item.vue
 create mode 100644 lib/client/src/components/lc-sideslider/index.vue

diff --git a/lib/client/src/common/leave-confirm.js b/lib/client/src/common/leave-confirm.js
new file mode 100644
index 000000000..4255c6ae6
--- /dev/null
+++ b/lib/client/src/common/leave-confirm.js
@@ -0,0 +1,34 @@
+
+import Vue from 'vue'
+
+/**
+ * @desc 页面编辑状态未保存离开确认
+ * @param { String } message
+ * @returns { Promise }
+ */
+export const leaveConfirm = (message = '离开将会导致未保存信息丢失') => {
+    if (!window.leaveConfirm || window.leaveConfirm === 'dialog') {
+        return Promise.resolve(true)
+    }
+    const vm = new Vue()
+    const h = vm.$createElement
+    return new Promise((resolve, reject) => {
+        vm.$bkInfo({
+            title: '确认离开当前页？',
+            subHeader: h('p', {
+                style: {
+                    color: '#63656e',
+                    fontSize: '14px',
+                    textAlign: 'center'
+                }
+            }, message),
+            confirmFn: () => {
+                window.leaveConfirm = false
+                resolve(true)
+            },
+            cancelFn: () => {
+                reject(Error('cancel'))
+            }
+        })
+    })
+}
diff --git a/lib/client/src/components/lc-dialog/index.vue b/lib/client/src/components/lc-dialog/index.vue
new file mode 100644
index 000000000..c71b780a2
--- /dev/null
+++ b/lib/client/src/components/lc-dialog/index.vue
@@ -0,0 +1,59 @@
+<template>
+    <bk-dialog
+        ref="dialog"
+        v-bind="$attrs"
+        v-on="$listeners"
+        class="lc-dialog"
+        :before-close="beforeClose"
+        :value="value"
+        @input="handleInputValue">
+        <slot />
+        <template
+            v-if="$slots.footer"
+            #footer>
+            <slot name="footer" />
+        </template>
+    </bk-dialog>
+</template>
+<script>
+    import { leaveConfirm } from '@/common/leave-confirm'
+
+    export default {
+        name: 'LcDialog',
+        inheritAttrs: false,
+        props: {
+            value: Boolean
+        },
+        data () {
+            return {}
+        },
+        watch: {
+            value: {
+                handler (val) {
+                    if (val) {
+                        this.pageLeaveConfirmMemo = window.leaveConfirm
+                        window.leaveConfirm = 'dialog'
+                    }
+                },
+                immediate: true
+            }
+        },
+        created () {
+            this.pageLeaveConfirmMemo = false
+        },
+
+        methods: {
+            beforeClose () {
+                return leaveConfirm()
+            },
+            /**
+             * @desc 关闭弹框
+             */
+            handleInputValue () {
+                window.leaveConfirm = this.pageLeaveConfirmMemo
+                this.$emit('input', false)
+                this.$emit('change', false)
+            }
+        }
+    }
+</script>
diff --git a/lib/client/src/components/lc-form/index.vue b/lib/client/src/components/lc-form/index.vue
new file mode 100644
index 000000000..ff654f844
--- /dev/null
+++ b/lib/client/src/components/lc-form/index.vue
@@ -0,0 +1,66 @@
+<template>
+    <div
+        ref="form"
+        class="lc-form"
+        @click="handleApplyChange">
+        <bk-form
+            ref="bkForm"
+            :model="model"
+            v-bind="$attrs">
+            <slot />
+        </bk-form>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'LcForm',
+        inheritAttrs: false,
+        props: {
+            model: {
+                type: Object
+            }
+        },
+        data () {
+            return {
+                max: 0,
+                isApplyChange: false
+            }
+        },
+        watch: {
+            model: {
+                handler () {
+                    setTimeout(() => {
+                        if (this.isApplyChange) {
+                            window.leaveConfirm = true
+                        }
+                    })
+                },
+                deep: true
+            }
+        },
+        methods: {
+            /**
+             * @desc 标记用户是否主动操作过表单项
+             */
+            handleApplyChange () {
+                this.isApplyChange = true
+                console.log('handleApplyChangehandleApplyChange')
+            },
+            /**
+             * @desc 验证表单
+             */
+            validate () {
+                return this.$refs.bkForm.validate().catch((error) => {
+                    this.$refs.form.querySelector('.jb-form-item.is-error').scrollIntoView()
+                    return Promise.reject(error)
+                })
+            },
+            /**
+             * @desc 清除表单验证信息
+             */
+            clearError () {
+                this.$refs.bkForm.clearError()
+            }
+        }
+    }
+</script>
diff --git a/lib/client/src/components/lc-form/item.vue b/lib/client/src/components/lc-form/item.vue
new file mode 100644
index 000000000..87758b42d
--- /dev/null
+++ b/lib/client/src/components/lc-form/item.vue
@@ -0,0 +1,21 @@
+
+<template>
+    <bk-form-item
+        ref="bkFormItem"
+        class="lc-form-item"
+        v-bind="$attrs"
+        v-on="$listeners">
+        <slot />
+    </bk-form-item>
+</template>
+<script>
+    export default {
+        name: 'LcFormItem',
+        inheritAttrs: false,
+        methods: {
+            clearValidator () {
+                this.$refs.bkFormItem.clearValidator()
+            }
+        }
+    }
+</script>
diff --git a/lib/client/src/components/lc-sideslider/index.vue b/lib/client/src/components/lc-sideslider/index.vue
new file mode 100644
index 000000000..b04897a35
--- /dev/null
+++ b/lib/client/src/components/lc-sideslider/index.vue
@@ -0,0 +1,71 @@
+<template>
+    <bk-sideslider
+        ref="bkSideslider"
+        v-bind="$attrs"
+        class="lc-sideslider"
+        :is-show="isShow"
+        quick-close
+        transfer
+        :before-close="beforeClose"
+        @update:isShow="updateShow">
+        <template slot="header">
+            <slot name="header">
+                {{ title }}
+            </slot>
+        </template>
+        <template slot="content">
+            <slot name="content" />
+        </template>
+        <template
+            v-if="$slots.footer"
+            #footer>
+            <slot name="footer" />
+        </template>
+    </bk-sideslider>
+</template>
+<script>
+    import { leaveConfirm } from '@/common/leave-confirm'
+
+    export default {
+        name: 'LcSideslider',
+        inheritAttrs: false,
+        props: {
+            isShow: {
+                type: Boolean,
+                required: true
+            },
+            title: String
+        },
+        data () {
+            return {}
+        },
+        watch: {
+            isShow: {
+                handler (val) {
+                    if (val) {
+                        // 当页面可以进行编辑时，其中一项是通过sideslider来编辑的，需要先记录页面的编辑状态
+                        this.pageLeaveConfirmMemo = window.leaveConfirm
+                        window.leaveConfirm = 'dialog'
+                    }
+                },
+                immediate: true
+            }
+        },
+        created () {
+            this.pageLeaveConfirmMemo = false
+        },
+        methods: {
+            beforeClose () {
+                console.log('sideslier befor clse', window.leaveConfirm)
+                return leaveConfirm()
+            },
+            /**
+             * @desc 关闭弹层
+             */
+            updateShow () {
+                window.leaveConfirm = this.pageLeaveConfirmMemo
+                this.$emit('update:isShow', false)
+            }
+        }
+    }
+</script>
diff --git a/lib/client/src/components/methods/forms/edit-market-func-sideslider.vue b/lib/client/src/components/methods/forms/edit-market-func-sideslider.vue
index 1339249c8..f418bb738 100644
--- a/lib/client/src/components/methods/forms/edit-market-func-sideslider.vue
+++ b/lib/client/src/components/methods/forms/edit-market-func-sideslider.vue
@@ -1,11 +1,10 @@
 <template>
-    <bk-sideslider
+    <lc-sideslider
         :is-show="isShow"
         :quick-close="true"
         :width="1200"
         :title="form.id ? '编辑函数' : '新建函数'"
-        :before-close="confirmClose"
-        @hidden="handleClose">
+        @update:isShow="close">
         <section class="func-form-home" slot="content">
             <form-name :form.sync="form" ref="name" :function-list="functionList"></form-name>
             <form-detail :form.sync="form" ref="detail"></form-detail>
@@ -14,15 +13,21 @@
             <form-monaco :form.sync="form" :function-list="[]" class="mt20" ref="monaco"></form-monaco>
         </section>
         <section slot="footer" class="add-footer">
-            <bk-button theme="primary" @click="submitAddMarketFunc" :loading="isLoading">提交</bk-button>
+            <bk-button
+                theme="primary"
+                @click="submitAddMarketFunc"
+                :loading="isLoading">
+                提交
+            </bk-button>
             <bk-button @click="handleClose">取消</bk-button>
         </section>
-    </bk-sideslider>
+    </lc-sideslider>
 </template>
 
 <script>
     import mixins from './form-mixins'
     import { mapActions } from 'vuex'
+    import { leaveConfirm } from '@/common/leave-confirm'
 
     export default {
         mixins: [mixins],
@@ -44,7 +49,10 @@
                 'createFunction',
                 'updateFunction'
             ]),
-
+            close () {
+                this.$emit('update:isShow', false)
+                this.$emit('update:funcData', {})
+            },
             submitAddMarketFunc () {
                 this.validate().then((postData) => {
                     this.isLoading = true
@@ -52,9 +60,8 @@
                         ? this.updateFunction
                         : this.createFunction
                     curMethod(postData).then(() => {
-                        this.formChanged = false
+                        window.leaveConfirm = false
                         this.$emit('refresh')
-                        this.handleClose()
                     }).catch((err) => {
                         if (err?.code === 499) {
                             this
@@ -72,25 +79,18 @@
                         this.isLoading = false
                     })
                 }).catch((validator) => {
-                    this.$bkMessage({ message: validator.content || validator, theme: 'error' })
-                })
-            },
-
-            confirmClose () {
-                if (this.formChanged) {
-                    this.$bkInfo({
-                        title: '请确认是否关闭',
-                        subTitle: '存在未保存的函数，关闭后不会保存更改',
-                        confirmFn: this.handleClose
+                    this.$bkMessage({
+                        message: validator.content || validator,
+                        theme: 'error'
                     })
-                } else {
-                    this.handleClose()
-                }
+                })
             },
 
             handleClose () {
-                this.$emit('update:isShow', false)
-                this.$emit('update:funcData', {})
+                leaveConfirm('存在未保存的函数，关闭后不会保存更改')
+                    .then(() => {
+                        this.close()
+                    })
             }
         }
     }
diff --git a/lib/client/src/components/methods/forms/form-items/api-data.vue b/lib/client/src/components/methods/forms/form-items/api-data.vue
index 30429edb9..b7be8a072 100644
--- a/lib/client/src/components/methods/forms/form-items/api-data.vue
+++ b/lib/client/src/components/methods/forms/form-items/api-data.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item" v-if="form.funcType === 1">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item" v-if="form.funcType === 1">
+        <lc-form-item
             label="Api Data"
             property="funcApiData"
             error-display-type="normal"
@@ -15,8 +15,8 @@
                 :placeholder="`请输入请求体数据包，例如：{ name: {{name}}, age: 17 }`"
                 @input="(funcApiData) => updateValue({ funcApiData })">
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/code.vue b/lib/client/src/components/methods/forms/form-items/code.vue
index 008fc89b7..dbd7221cb 100644
--- a/lib/client/src/components/methods/forms/form-items/code.vue
+++ b/lib/client/src/components/methods/forms/form-items/code.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
+        <lc-form-item
             label="函数标识"
             :required="true"
             :rules="[requireRule('函数标识'), codeRepeatRule, codeRule, keyWordRule]"
@@ -12,8 +12,8 @@
                 :disabled="disabled"
                 @input="(funcCode) => updateValue({ funcCode })">
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/detail.vue b/lib/client/src/components/methods/forms/form-items/detail.vue
index 524b06efd..e71fbe72b 100644
--- a/lib/client/src/components/methods/forms/form-items/detail.vue
+++ b/lib/client/src/components/methods/forms/form-items/detail.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-detail">
-        <bk-form-item label="函数类型" property="funcType" class="func-form-item">
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-detail">
+        <lc-form-item label="函数类型" property="funcType" class="func-form-item">
             <bk-radio-group
                 :value="form.funcType"
                 @change="(funcType) => updateValue({ funcType })"
@@ -20,8 +20,8 @@
                     ></i>
                 </bk-radio-button>
             </bk-radio-group>
-        </bk-form-item>
-        <bk-form-item
+        </lc-form-item>
+        <lc-form-item
             label="函数调用参数"
             ref="funcParams"
             property="funcParams"
@@ -34,9 +34,9 @@
                 v-model="form.funcParams"
                 @change="(val) => tagChange('funcParams', val)">
             </dynamic-tag>
-        </bk-form-item>
+        </lc-form-item>
         <template v-if="form.funcType === 1">
-            <bk-form-item
+            <lc-form-item
                 label="Api"
                 property="apiChoosePath"
                 error-display-type="normal"
@@ -48,8 +48,8 @@
                     :disabled="disabled"
                     @change="handleSelectApi"
                 ></choose-api>
-            </bk-form-item>
-            <bk-form-item
+            </lc-form-item>
+            <lc-form-item
                 label="请求地址"
                 property="funcApiUrl"
                 error-display-type="normal"
@@ -64,8 +64,8 @@
                     :disabled="disableEditUrl"
                     @change="(funcApiUrl) => updateValue({ funcApiUrl })"
                 ></bk-input>
-            </bk-form-item>
-            <bk-form-item
+            </lc-form-item>
+            <lc-form-item
                 label="请求类型"
                 property="funcMethod"
                 error-display-type="normal"
@@ -86,14 +86,14 @@
                         :name="apiMethodName">
                     </bk-option>
                 </bk-select>
-            </bk-form-item>
+            </lc-form-item>
             <bk-button
-                class="get-remote-response bk-form-item func-form-item"
+                class="get-remote-response lc-form-item func-form-item"
                 size="small"
                 :loading="isLoadingResponse"
                 @click="getRemoteResponse"
             >获取接口返回数据</bk-button>
-            <bk-form-item
+            <lc-form-item
                 v-if="METHODS_WITHOUT_DATA.includes(form.funcMethod)"
                 label="请求参数"
                 property="remoteParams"
@@ -106,8 +106,8 @@
                     :variable-list="variableList"
                     @change="(apiQuery) => updateValue({ apiQuery })"
                 ></query-params>
-            </bk-form-item>
-            <bk-form-item
+            </lc-form-item>
+            <lc-form-item
                 v-else
                 label="请求参数"
                 property="remoteParams"
@@ -121,8 +121,8 @@
                     @change="(apiBody) => updateValue({ apiBody })"
                 >
                 </body-params>
-            </bk-form-item>
-            <bk-form-item
+            </lc-form-item>
+            <lc-form-item
                 label="接口返回数据参数名"
                 ref="remoteParams"
                 property="remoteParams"
@@ -135,7 +135,7 @@
                     v-model="form.remoteParams"
                     @change="(val) => tagChange('remoteParams', val)">
                 </dynamic-tag>
-            </bk-form-item>
+            </lc-form-item>
         </template>
         <bk-dialog
             width="1000"
@@ -148,7 +148,7 @@
                 :value="showFuncResponse.code"
             />
         </bk-dialog>
-    </bk-form>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/group.vue b/lib/client/src/components/methods/forms/form-items/group.vue
index 8d0f6a59f..ae8111592 100644
--- a/lib/client/src/components/methods/forms/form-items/group.vue
+++ b/lib/client/src/components/methods/forms/form-items/group.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
+        <lc-form-item
             label="所属分类"
             property="funcGroupId"
             error-display-type="normal"
@@ -21,8 +21,8 @@
                     :name="option.groupName">
                 </bk-option>
             </bk-select>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/market-token.vue b/lib/client/src/components/methods/forms/form-items/market-token.vue
index cd1064b22..82e78bdfb 100644
--- a/lib/client/src/components/methods/forms/form-items/market-token.vue
+++ b/lib/client/src/components/methods/forms/form-items/market-token.vue
@@ -1,13 +1,13 @@
 <template>
-    <bk-form :label-width="110" :model="copyForm" ref="funcForm" :form-type="formType" v-if="copyForm.funcType === 1">
-        <bk-form-item property="withToken" class="token-item">
+    <lc-form :label-width="110" :model="copyForm" ref="funcForm" :form-type="formType" v-if="copyForm.funcType === 1">
+        <lc-form-item property="withToken" class="token-item">
             <bk-checkbox :true-value="1"
                 :false-value="0"
                 v-model="copyForm.withToken"
                 @change="(val) => updateValue('withToken', val)"
             >蓝鲸应用认证</bk-checkbox>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/market.vue b/lib/client/src/components/methods/forms/form-items/market.vue
index 5f7b72fcd..b8aa27b51 100644
--- a/lib/client/src/components/methods/forms/form-items/market.vue
+++ b/lib/client/src/components/methods/forms/form-items/market.vue
@@ -1,7 +1,7 @@
 <template>
     <section>
-        <bk-form :label-width="130" ref="funcForm" :form-type="formType" class="func-market-home">
-            <bk-form-item label="从函数市场导入">
+        <lc-form :label-width="130" ref="funcForm" :form-type="formType" class="func-market-home">
+            <lc-form-item label="从函数市场导入">
                 <bk-select
                     @toggle="getMarketFuncs"
                     @selected="changeMarketFunc"
@@ -21,8 +21,8 @@
                     </bk-option>
                 </bk-select>
                 <i class="bk-icon icon-info mt10">可使用函数市场模板快速创建，注意：选择后会覆盖当前函数的数据</i>
-            </bk-form-item>
-        </bk-form>
+            </lc-form-item>
+        </lc-form>
         <h5 class="func-title">函数信息</h5>
     </section>
 </template>
diff --git a/lib/client/src/components/methods/forms/form-items/name.vue b/lib/client/src/components/methods/forms/form-items/name.vue
index 97bbd486a..6261a2990 100644
--- a/lib/client/src/components/methods/forms/form-items/name.vue
+++ b/lib/client/src/components/methods/forms/form-items/name.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType">
+        <lc-form-item
             label="函数名称"
             property="funcName"
             error-display-type="normal"
@@ -13,8 +13,8 @@
                 @input="(funcName) => updateValue({ funcName })"
             >
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/project.vue b/lib/client/src/components/methods/forms/form-items/project.vue
index 14e60f324..713c7183b 100644
--- a/lib/client/src/components/methods/forms/form-items/project.vue
+++ b/lib/client/src/components/methods/forms/form-items/project.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-bottom">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-bottom">
+        <lc-form-item
             :rules="[requireRule('应用')]"
             label="应用"
             property="projectId"
@@ -18,8 +18,8 @@
                     :name="option.projectName">
                 </bk-option>
             </bk-select>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/summary.vue b/lib/client/src/components/methods/forms/form-items/summary.vue
index 59164711a..019ec61dc 100644
--- a/lib/client/src/components/methods/forms/form-items/summary.vue
+++ b/lib/client/src/components/methods/forms/form-items/summary.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
-        <bk-form-item
+    <lc-form :label-width="180" :model="form" ref="funcForm" :form-type="formType" class="func-form-item">
+        <lc-form-item
             label="函数简介"
             property="funcSummary"
             error-display-type="normal"
@@ -15,8 +15,8 @@
                 :value="form.funcSummary"
                 @input="(funcSummary) => updateValue({ funcSummary })">
             </bk-input>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/components/methods/forms/form-items/token.vue b/lib/client/src/components/methods/forms/form-items/token.vue
index fd4b79804..1b2fe86d8 100644
--- a/lib/client/src/components/methods/forms/form-items/token.vue
+++ b/lib/client/src/components/methods/forms/form-items/token.vue
@@ -1,6 +1,6 @@
 <template>
-    <bk-form :label-width="110" :model="form" ref="funcForm" :form-type="formType" v-if="form.funcType === 1">
-        <bk-form-item property="withToken" class="token-item">
+    <lc-form :label-width="110" :model="form" ref="funcForm" :form-type="formType" v-if="form.funcType === 1">
+        <lc-form-item property="withToken" class="token-item">
             <bk-checkbox
                 :key="hasToken"
                 :true-value="1"
@@ -10,8 +10,8 @@
                 v-bk-tooltips="tokenContent"
                 @change="updateToken"
             >蓝鲸应用认证</bk-checkbox>
-        </bk-form-item>
-    </bk-form>
+        </lc-form-item>
+    </lc-form>
 </template>
 
 <script>
diff --git a/lib/client/src/main.js b/lib/client/src/main.js
index c6c5f583d..e9f939005 100644
--- a/lib/client/src/main.js
+++ b/lib/client/src/main.js
@@ -35,6 +35,10 @@ import AuthButton from '@/components/auth/button.vue'
 import AuthComponent from '@/components/auth/component'
 import AuthRouterLink from '@/components/auth/router-link.vue'
 import NotExist from '@/components/not-exist.vue'
+import LcDialog from '@/components/lc-dialog/index.vue'
+import LcForm from '@/components/lc-form/index.vue'
+import LcFormItem from '@/components/lc-form/item.vue'
+import LcSideslider from '@/components/lc-sideslider/index.vue'
 
 import targetData from '@/common/targetData.js'
 import pureAxios from '@/api/pureAxios.js'
@@ -72,6 +76,12 @@ Vue.component('auth-button', AuthButton)
 Vue.component('auth-component', AuthComponent)
 Vue.component('auth-router-link', AuthRouterLink)
 Vue.component('not-exist', NotExist)
+Vue.component('LcDialog', LcDialog)
+Vue.component('LcForm', LcForm)
+Vue.component('LcFormItem', LcFormItem)
+Vue.component('LcSideslider', LcSideslider)
+
+window.leaveConfirm = false
 
 auth.requestCurrentUser().then(user => {
     injectCSRFTokenToHeaders()
diff --git a/lib/client/src/views/system/components/template-dialog.vue b/lib/client/src/views/system/components/template-dialog.vue
index 60f95485c..dee78ceaa 100644
--- a/lib/client/src/views/system/components/template-dialog.vue
+++ b/lib/client/src/views/system/components/template-dialog.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <bk-dialog v-model="isShow"
+        <lc-dialog v-model="isShow"
             render-directive="if"
             theme="primary"
             width="1080"
@@ -14,7 +14,12 @@
             <div slot="header">
                 <span slot="header">
                     从模板新建应用
-                    <i class="bk-icon icon-info-circle" style="font-size: 14px;" v-bk-tooltips.top="{ content: '创建lesscode应用时，会同步在蓝鲸开发者中心创建应用的default模块' }"></i>
+                    <i
+                        class="bk-icon icon-info-circle"
+                        style="font-size: 14px;"
+                        v-bk-tooltips.top="{
+                            content: '创建lesscode应用时，会同步在蓝鲸开发者中心创建应用的default模块'
+                        }"></i>
                 </span>
             </div>
             <div class="layout-left">
@@ -63,31 +68,31 @@
                 </div>
             </div>
             <div class="layout-right">
-                <bk-form ref="templateForm" :label-width="150" :rules="formRules" :model="formData" :form-type="'vertical'">
-                    <bk-form-item label="当前已选模板" property="templateName" error-display-type="normal">
+                <lc-form ref="templateForm" :label-width="150" :rules="formRules" :model="formData" :form-type="'vertical'">
+                    <lc-form-item label="当前已选模板" property="templateName" error-display-type="normal">
                         <bk-input readonly v-model.trim="formData.templateName"
                             placeholder="模板名称">
                         </bk-input>
-                    </bk-form-item>
-                    <bk-form-item label="应用名称" required property="projectName" error-display-type="normal">
+                    </lc-form-item>
+                    <lc-form-item label="应用名称" required property="projectName" error-display-type="normal">
                         <bk-input maxlength="60" v-model.trim="formData.projectName"
                             placeholder="由汉字，英文字母，数字组成，20个字符以内">
                         </bk-input>
-                    </bk-form-item>
-                    <bk-form-item label="应用ID" required property="projectCode" error-display-type="normal">
+                    </lc-form-item>
+                    <lc-form-item label="应用ID" required property="projectCode" error-display-type="normal">
                         <bk-input maxlength="60" v-model.trim="formData.projectCode"
                             placeholder="由小写字母组成，长度小于16个字符，该ID将作为自定义组件前缀，创建后不可更改">
                         </bk-input>
-                    </bk-form-item>
-                    <bk-form-item label="应用简介" required property="projectDesc" error-display-type="normal">
+                    </lc-form-item>
+                    <lc-form-item label="应用简介" required property="projectDesc" error-display-type="normal">
                         <bk-input
                             v-model.trim="formData.projectDesc"
                             :type="'textarea'"
                             :rows="3"
                             :maxlength="100">
                         </bk-input>
-                    </bk-form-item>
-                </bk-form>
+                    </lc-form-item>
+                </lc-form>
             </div>
             <div class="dialog-footer" slot="footer">
                 <bk-button
@@ -96,13 +101,14 @@
                     @click="handleCreateConfirm">确定</bk-button>
                 <bk-button @click="handleDialogCancel" :disabled="loading">取消</bk-button>
             </div>
-        </bk-dialog>
+        </lc-dialog>
     </section>
 </template>
 
 <script>
     import PagePreviewThumb from '@/components/project/page-preview-thumb.vue'
     import { PROJECT_TEMPLATE_TYPE } from '@/common/constant'
+    import { leaveConfirm } from '@/common/leave-confirm'
 
     const defaultFormData = {
         templateName: '',
@@ -195,6 +201,7 @@
 
                     this.messageSuccess('应用创建成功')
                     this.isShow = false
+                    window.leaveConfirm = false
 
                     setTimeout(() => {
                         this.$emit('to-page', projectId)
@@ -251,7 +258,10 @@
                 }
             },
             handleDialogCancel () {
-                this.isShow = false
+                leaveConfirm()
+                    .then(() => {
+                        this.isShow = false
+                    })
             },
             handleDialogToggle () {
                 if (this.isShow) {
diff --git a/lib/client/src/views/system/project-manage/index.vue b/lib/client/src/views/system/project-manage/index.vue
index e101fb6d5..74b53233a 100644
--- a/lib/client/src/views/system/project-manage/index.vue
+++ b/lib/client/src/views/system/project-manage/index.vue
@@ -120,7 +120,8 @@
             </div>
         </div>
 
-        <bk-dialog v-model="dialog.create.visible"
+        <lc-dialog
+            v-model="dialog.create.visible"
             render-directive="if"
             theme="primary"
             width="750"
@@ -134,30 +135,30 @@
                 {{ isCopy ? '复制应用' : '创建应用' }}
                 <i class="bk-icon icon-info-circle" style="font-size: 14px;" v-bk-tooltips.top="{ content: '创建lesscode应用时，会同步在蓝鲸开发者中心创建应用的default模块' }"></i>
             </span>
-            <bk-form ref="createForm" :label-width="86" :rules="dialog.create.formRules" :model="dialog.create.formData">
-                <bk-form-item label="应用名称" required property="projectName" error-display-type="normal">
+            <lc-form ref="createForm" :label-width="86" :rules="dialog.create.formRules" :model="dialog.create.formData">
+                <lc-form-item label="应用名称" required property="projectName" error-display-type="normal">
                     <bk-input maxlength="60" v-model.trim="dialog.create.formData.projectName"
                         placeholder="由汉字，英文字母，数字组成，20个字符以内">
                     </bk-input>
-                </bk-form-item>
-                <bk-form-item label="应用ID" required property="projectCode" error-display-type="normal">
+                </lc-form-item>
+                <lc-form-item label="应用ID" required property="projectCode" error-display-type="normal">
                     <bk-input maxlength="60" v-model.trim="dialog.create.formData.projectCode"
                         placeholder="由小写字母组成，长度小于16个字符，该ID将作为自定义组件前缀，创建后不可更改">
                     </bk-input>
-                </bk-form-item>
-                <bk-form-item label="应用简介" required property="projectDesc" error-display-type="normal">
+                </lc-form-item>
+                <lc-form-item label="应用简介" required property="projectDesc" error-display-type="normal">
                     <bk-input
                         v-model.trim="dialog.create.formData.projectDesc"
                         :type="'textarea'"
                         :rows="3"
                         :maxlength="100">
                     </bk-input>
-                </bk-form-item>
-                <bk-form-item label="导航布局" style="margin-top: 10px" v-if="!isCopy" error-display-type="normal">
+                </lc-form-item>
+                <lc-form-item label="导航布局" style="margin-top: 10px" v-if="!isCopy" error-display-type="normal">
                     <span class="layout-desc">可多选，作为创建应用页面时可供选择的导航布局，便于在应用中统一配置导航</span>
                     <layout-thumb-list :list="defaultLayoutList" @change-checked="handleLayoutChecked" @set-default="handleLayoutDefault" />
-                </bk-form-item>
-            </bk-form>
+                </lc-form-item>
+            </lc-form>
             <div class="dialog-footer" slot="footer">
                 <bk-button
                     theme="primary"
@@ -165,9 +166,10 @@
                     @click="handleCreateConfirm">确定</bk-button>
                 <bk-button @click="handleCreateCancel" :disabled="dialog.create.loading">取消</bk-button>
             </div>
-        </bk-dialog>
+        </lc-dialog>
 
-        <bk-dialog v-model="dialog.rename.visible"
+        <lc-dialog
+            v-model="dialog.rename.visible"
             theme="primary"
             title="重命名"
             width="600"
@@ -175,15 +177,15 @@
             :auto-close="false"
             header-position="left"
             @after-leave="handleRenameDialogAfterLeave">
-            <bk-form ref="renameForm" class="rename-form" :label-width="90" :rules="dialog.rename.formRules" :model="dialog.rename.formData">
-                <bk-form-item label="应用名称" required property="projectName" error-display-type="normal">
+            <lc-form ref="renameForm" class="rename-form" :label-width="90" :rules="dialog.rename.formRules" :model="dialog.rename.formData">
+                <lc-form-item label="应用名称" required property="projectName" error-display-type="normal">
                     <bk-input ref="projectRenameInput"
                         maxlength="60"
                         v-model="dialog.rename.formData.projectName"
                         placeholder="由汉字，英文字母，数字组成，20个字符以内">
                     </bk-input>
-                </bk-form-item>
-            </bk-form>
+                </lc-form-item>
+            </lc-form>
             <div class="dialog-footer" slot="footer">
                 <bk-button
                     theme="primary"
@@ -192,9 +194,9 @@
                     @click="handleRenameConfirm">确定</bk-button>
                 <bk-button @click="handleRenameCancel" :disabled="dialog.rename.loading">取消</bk-button>
             </div>
-        </bk-dialog>
+        </lc-dialog>
 
-        <bk-dialog v-model="dialog.delete.visible"
+        <lc-dialog v-model="dialog.delete.visible"
             render-directive="if"
             theme="primary"
             ext-cls="delete-dialog-wrapper"
@@ -204,16 +206,16 @@
             :mask-close="false"
             :auto-close="false"
             @value-change="handleDeleteDialogToggle">
-            <bk-form ref="deleteForm" class="delete-form" :label-width="0" :rules="dialog.delete.formRules" :model="dialog.delete.formData">
+            <lc-form ref="deleteForm" class="delete-form" :label-width="0" :rules="dialog.delete.formRules" :model="dialog.delete.formData">
                 <p class="confirm-name">请输入<em title="复制名称">“{{activatedProject.projectName}}”</em>确认</p>
-                <bk-form-item property="projectName" error-display-type="normal">
+                <lc-form-item property="projectName" error-display-type="normal">
                     <bk-input
                         maxlength="60"
                         v-model="dialog.delete.formData.projectName"
                         placeholder="请输入应用名称">
                     </bk-input>
-                </bk-form-item>
-            </bk-form>
+                </lc-form-item>
+            </lc-form>
             <div class="dialog-footer" slot="footer">
                 <bk-button
                     theme="danger"
@@ -221,7 +223,7 @@
                     @click="handleDeleteConfirm">删除</bk-button>
                 <bk-button @click="handleDeleteCancel" :disabled="dialog.delete.loading">取消</bk-button>
             </div>
-        </bk-dialog>
+        </lc-dialog>
 
         <template-dialog ref="templateDialog" @preview="handlePreview" @to-page="handleGotoPage"></template-dialog>
 
@@ -245,6 +247,7 @@
     import SetTemplateDialog from '../components/set-template-dialog.vue'
     import relativeTime from 'dayjs/plugin/relativeTime'
     import 'dayjs/locale/zh-cn'
+    import { leaveConfirm } from '@/common/leave-confirm'
 
     dayjs.extend(relativeTime)
     dayjs.locale('zh-cn')
@@ -486,6 +489,7 @@
 
                     this.messageSuccess('应用创建成功')
                     this.dialog.create.visible = false
+                    window.leaveConfirm = false
 
                     setTimeout(() => {
                         this.handleGotoPage(projectId)
@@ -535,6 +539,7 @@
 
                     this.messageSuccess('重命名成功')
                     this.dialog.rename.visible = false
+                    window.leaveConfirm = false
 
                     const activeProject = this.projectList.find(project => project.id === id)
                     if (activeProject) {
@@ -558,6 +563,7 @@
 
                     this.messageSuccess('删除成功')
                     this.dialog.delete.visible = false
+                    window.leaveConfirm = false
 
                     this.getProjectList()
                 } catch (e) {
@@ -588,13 +594,22 @@
                 layout.isDefault = 1
             },
             handleCreateCancel () {
-                this.dialog.create.visible = false
+                leaveConfirm()
+                    .then(() => {
+                        this.dialog.create.visible = false
+                    })
             },
             handleRenameCancel () {
-                this.dialog.rename.visible = false
+                leaveConfirm()
+                    .then(() => {
+                        this.dialog.rename.visible = false
+                    })
             },
             handleDeleteCancel () {
-                this.dialog.delete.visible = false
+                leaveConfirm()
+                    .then(() => {
+                        this.dialog.delete.visible = false
+                    })
             },
             handleCreateDialogToggle () {
                 this.dialog.create.formData = { ...defaultCreateFormData }

From d4c59ee5e0b1370db6f01566c633fb15ab0fdcf2 Mon Sep 17 00:00:00 2001
From: hailinxiao <hailinxiao@tencent.com>
Date: Tue, 6 Dec 2022 17:13:27 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feature:=20dialog,sideslider=20=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=89=8D=E7=A1=AE=E8=AE=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/client/src/router/index.js | 53 ++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/lib/client/src/router/index.js b/lib/client/src/router/index.js
index 9a7dfc745..067820736 100644
--- a/lib/client/src/router/index.js
+++ b/lib/client/src/router/index.js
@@ -9,12 +9,14 @@
  * specific language governing permissions and limitations under the License.
  */
 
+import _ from 'lodash'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 import store from '@/store'
 import preload from '@/common/preload'
 import { IAM_ACTION } from 'shared/constant'
+import { leaveConfirm } from '@/common/leave-confirm'
 
 Vue.use(VueRouter)
 
@@ -593,6 +595,57 @@ router.afterEach(async (to, from) => {
     }
 })
 
+const routerPush = router.push
+const routerReplace = router.replace
+
+// url 路由切换时
+// 检测页面数据的编辑状态——弹出确认框提示用户确认
+router.push = (params, callback = () => {}) => {
+    // 检测当前路由自定义离开确认交互
+    leaveConfirm()
+        .then(() => {
+            routerPush.call(router, params)
+        }, () => {
+            callback()
+        })
+}
+// url 路由切换时
+// 检测页面数据的编辑状态——弹出确认框提示用户确认
+router.replace = (params, callback = () => {}) => {
+    // 检测当前路由自定义离开确认交互
+    leaveConfirm().then(() => {
+        routerReplace.call(router, params)
+    }, () => {
+        callback()
+    })
+}
+// 浏览器路由回退时
+router.afterEach(() => {
+    history.pushState(null, null, document.URL)
+    const callback = () => {
+        leaveConfirm()
+            .then(() => {
+                window.removeEventListener('popstate', callback)
+                window.history.go(-2)
+            })
+            .catch(() => {
+                history.pushState(null, null, document.URL)
+            })
+    }
+
+    window.addEventListener('popstate', callback)
+
+    const currentRoute = _.last(router.currentRoute.matched)
+    if (currentRoute && currentRoute.instances.default) {
+        const routerDefault = currentRoute.instances.default
+        setTimeout(() => {
+            routerDefault.$once('hook:beforeDestroy', () => {
+                window.removeEventListener('popstate', callback)
+            })
+        })
+    }
+})
+
 export const useRouter = () => router
 
 export const useRoute = () => router.currentRoute