From c8dbd2422c47fddd6811fbf2cad030f7b15a4271 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 17 Feb 2023 14:52:13 +0800
Subject: [PATCH] feat: add layer-closeable prop for modal (#861)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature

#### What this PR does / why we need it:

VModal 组件支持设置是否允许点击蒙层以关闭模态框，并将所有包含表单的模态框设置为不允许点击蒙层关闭。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3328

#### Screenshots:

![2023-02-17 12 08 56](https://user-images.githubusercontent.com/21301288/219547318-d7c59742-8546-4bc8-9d49-fcff4053602f.gif)


#### Special notes for your reviewer:

测试方式：

1. 打开 Console 端任意一个表单模态框，测试点击表单外部区域是否会关闭弹框。

#### Does this PR introduce a user-facing change?


```release-note
优化 Console 端部分包含表单的模态框，默认不允许点击外部区域关闭模态框。
```
---
 .../src/components/dialog/Dialog.vue          |  7 ++++-
 .../components/src/components/modal/Modal.vue | 28 +++++++++++++++++--
 .../global-search/GlobalSearchModal.vue       |  1 +
 src/components/preview/UrlPreviewModal.vue    |  1 +
 .../components/AttachmentDetailModal.vue      |  1 +
 .../components/AttachmentPoliciesModal.vue    |  1 +
 .../components/AttachmentSelectorModal.vue    |  1 +
 .../posts/components/PostPreviewModal.vue     |  1 +
 src/modules/dashboard/Dashboard.vue           |  1 +
 9 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/dialog/Dialog.vue b/packages/components/src/components/dialog/Dialog.vue
index 5ca6c389..7a273b1c 100644
--- a/packages/components/src/components/dialog/Dialog.vue
+++ b/packages/components/src/components/dialog/Dialog.vue
@@ -90,7 +90,12 @@ const handleClose = () => {
 };
 </script>
 <template>
-  <VModal :visible="visible" :width="450" @close="handleCancel()">
+  <VModal
+    :visible="visible"
+    :width="450"
+    :layer-closable="true"
+    @close="handleCancel()"
+  >
     <div class="flex justify-between items-start py-2 mb-2">
       <div class="flex flex-row items-center gap-3">
         <component
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index b9e319b0..84c00420 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
     bodyClass?: string[];
     mountToBody?: boolean;
     centered?: boolean;
+    layerClosable?: boolean;
   }>(),
   {
     visible: false,
@@ -22,6 +23,7 @@ const props = withDefaults(
     bodyClass: undefined,
     mountToBody: false,
     centered: true,
+    layerClosable: false,
   }
 );
 
@@ -52,6 +54,19 @@ function handleClose() {
   emit("close");
 }
 
+const focus = ref(false);
+
+function handleClickLayer() {
+  if (props.layerClosable) {
+    handleClose();
+    return;
+  }
+  focus.value = true;
+  setTimeout(() => {
+    focus.value = false;
+  }, 300);
+}
+
 watch(
   () => props.visible,
   () => {
@@ -85,7 +100,11 @@ watch(
         @before-enter="rootVisible = true"
         @after-leave="rootVisible = false"
       >
-        <div v-show="visible" class="modal-layer" @click.stop="handleClose()" />
+        <div
+          v-show="visible"
+          class="modal-layer"
+          @click.stop="handleClickLayer()"
+        />
       </transition>
       <transition
         enter-active-class="ease-out duration-200"
@@ -98,7 +117,8 @@ watch(
         <div
           v-show="visible"
           :style="contentStyles"
-          class="modal-content transform transition-all"
+          class="modal-content transform transition-all duration-300"
+          :class="{ 'modal-focus': focus }"
         >
           <div v-if="$slots.header || title" class="modal-header group">
             <slot name="header">
@@ -163,6 +183,10 @@ watch(
     width: calc(100vw - 20px);
     max-height: calc(100vh - 5rem);
 
+    &.modal-focus {
+      @apply scale-[1.02];
+    }
+
     .modal-header {
       @apply flex
       justify-between
diff --git a/src/components/global-search/GlobalSearchModal.vue b/src/components/global-search/GlobalSearchModal.vue
index 4db61583..9efaa520 100644
--- a/src/components/global-search/GlobalSearchModal.vue
+++ b/src/components/global-search/GlobalSearchModal.vue
@@ -372,6 +372,7 @@ const onVisibleChange = (visible: boolean) => {
     :mount-to-body="true"
     :width="650"
     :centered="false"
+    :layer-closable="true"
     @update:visible="onVisibleChange"
   >
     <div id="search-input" class="border-b border-gray-100 px-4 py-2.5">
diff --git a/src/components/preview/UrlPreviewModal.vue b/src/components/preview/UrlPreviewModal.vue
index 706ff6da..08fd413e 100644
--- a/src/components/preview/UrlPreviewModal.vue
+++ b/src/components/preview/UrlPreviewModal.vue
@@ -32,6 +32,7 @@ const onVisibleChange = (visible: boolean) => {
     :visible="visible"
     fullscreen
     :title="title"
+    :layer-closable="true"
     @update:visible="onVisibleChange"
   >
     <template #actions>
diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 0dfda502..72a17967 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -75,6 +75,7 @@ const onVisibleChange = (visible: boolean) => {
     :visible="visible"
     :width="1000"
     :mount-to-body="mountToBody"
+    :layer-closable="true"
     height="calc(100vh - 20px)"
     @update:visible="onVisibleChange"
   >
diff --git a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
index f8c3b571..d0b4cc98 100644
--- a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
@@ -122,6 +122,7 @@ watch(
     :width="750"
     title="存储策略"
     :body-class="['!p-0']"
+    :layer-closable="true"
     @update:visible="onVisibleChange"
   >
     <template #actions>
diff --git a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
index d9dd8317..b1c36814 100644
--- a/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentSelectorModal.vue
@@ -87,6 +87,7 @@ const handleConfirm = () => {
     :visible="visible"
     :width="1240"
     :mount-to-body="true"
+    :layer-closable="true"
     title="选择附件"
     height="calc(100vh - 20px)"
     @update:visible="onVisibleChange"
diff --git a/src/modules/contents/posts/components/PostPreviewModal.vue b/src/modules/contents/posts/components/PostPreviewModal.vue
index 1b1f4683..d3c56137 100644
--- a/src/modules/contents/posts/components/PostPreviewModal.vue
+++ b/src/modules/contents/posts/components/PostPreviewModal.vue
@@ -29,6 +29,7 @@ const onVisibleChange = (visible: boolean) => {
   <VModal
     :body-class="['!p-0']"
     :visible="visible"
+    :layer-closable="true"
     fullscreen
     title="文章预览"
     @update:visible="onVisibleChange"
diff --git a/src/modules/dashboard/Dashboard.vue b/src/modules/dashboard/Dashboard.vue
index 0ae49147..eb28681c 100644
--- a/src/modules/dashboard/Dashboard.vue
+++ b/src/modules/dashboard/Dashboard.vue
@@ -58,6 +58,7 @@
     v-model:visible="widgetsModal"
     height="calc(100vh - 20px)"
     :width="1280"
+    :layer-closable="true"
     title="小组件"
   >
     <VTabbar