feat: 数据接口管理弹窗增加取消按钮，并增加ESC关闭弹窗

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false" :close-on-esc="false">
+  <n-modal
+    class="go-chart-data-pond-control"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :close-on-esc="true"
+    :onEsc="onEsc"
+  >
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
       <template #header></template>
       <template #header-extra> </template>
@@ -29,7 +35,10 @@
               </n-icon>
             </template>
           </n-button>
-          <n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
+          <div>
+            <n-button class="go-mr-3" @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle">保存 & 发送请求</n-button>
+          </div>
         </n-space>
       </template>
     </n-card>
@@ -82,9 +91,12 @@ const pondData = computed(() => {
   return data[0]
 })
 
-watch(() => props.modelShow, (newValue) => {
+watch(
-  modelShowRef.value = newValue
+  () => props.modelShow,
-})
+  newValue => {
+    modelShowRef.value = newValue
+  }
+)
 
 watch(
   () => pondData.value,
@@ -189,7 +201,7 @@ const deletePond = (targetData: RequestDataPondItemType) => {
 }
 
 // 关闭
-const closeHandle = () => {
+const closeAndSendHandle = () => {
   // 将所选内容赋值给对象
   if (pondData.value) {
     targetData.value.request = {
@@ -200,6 +212,14 @@ const closeHandle = () => {
   emit('update:modelShow', false)
   emit('sendHandle')
 }
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue

@@ -10,7 +10,11 @@
     >
       <!-- 源地址 -->
       <setting-item name="前置 URL">
-        <n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例：http://127.0.0.1/"></n-input>
+        <n-input
+          v-model:value.trim="requestOriginUrl"
+          :disabled="editDisabled"
+          placeholder="例：http://127.0.0.1/"
+        ></n-input>
       </setting-item>
       <setting-item name="更新间隔，为 0 只会初始化">
         <n-input-group>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
+  <n-modal
+    class="go-chart-data-request"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :closeOnEsc="true"
+    :onEsc="onEsc"
+  >
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -21,7 +27,10 @@
               {{ requestContentTypeObj[requestContentType] }}
             </n-tag>
           </div>
-          <n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
+          <div>
+            <n-button class="go-mr-3" @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
+          </div>
         </n-space>
       </template>
     </n-card>
@@ -70,6 +79,10 @@ const closeAndSendHandle = () => {
   emit('update:modelShow', false)
   emit('sendHandle')
 }
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue

@@ -1,5 +1,11 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShowRef" :mask-closable="false" :closeOnEsc="false">
+  <n-modal
+    class="go-chart-data-request"
+    v-model:show="modelShowRef"
+    :mask-closable="false"
+    :closeOnEsc="true"
+    :onEsc="onEsc"
+  >
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -17,7 +23,7 @@
       <template #action>
         <n-space justify="space-between">
           <n-space v-if="targetDataRequest">
-            <n-tag  :bordered="false" type="primary">名称：</n-tag>
+            <n-tag :bordered="false" type="primary">名称：</n-tag>
             <n-input
               v-model:value="targetDataRequest.dataPondName"
               ref="inputInstRef"
@@ -60,10 +66,12 @@ const pondName = ref()
 const inputInstRef = ref()
 const modelShowRef = ref(false)
 
-watch(() => props.modelShow, (newValue) => {
+watch(
-  modelShowRef.value = newValue
+  () => props.modelShow,
-})
+  newValue => {
-
+    modelShowRef.value = newValue
+  }
+)
 
 const closeHandle = () => {
   emit('update:modelShow', false)
@@ -85,6 +93,10 @@ const closeAndSendHandle = () => {
     }
   })
 }
+
+const onEsc = () => {
+  closeHandle()
+}
 </script>
 
 <style lang="scss" scoped>

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <!-- mask-closable 暂时是失效的，不知道为啥 -->
   <n-modal
     class="go-modal-box"
     v-model:show="showRef"
+    :mask-closable="true"
     @afterLeave="closeHandle"
   >
     <n-card hoverable size="small">