From e4bbc68c23c36cf1c24d661590d814125eaef8e2 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 11 Sep 2022 17:10:25 +0800
Subject: [PATCH] perf: improve modal component style

---
 .../src/components/modal/Modal.story.vue      | 19 +++++---
 .../components/src/components/modal/Modal.vue | 44 +++++++++++--------
 .../contents/attachments/AttachmentList.vue   |  8 ++--
 .../components/AttachmentPoliciesModal.vue    |  4 +-
 .../components/AttachmentUploadModal.vue      |  4 +-
 .../CoreSelectorProvider.vue                  | 21 ++++-----
 src/modules/contents/pages/SinglePageList.vue |  8 ++--
 src/modules/contents/posts/PostList.vue       |  8 ++--
 .../posts/components/PostPreviewModal.vue     | 15 ++++---
 .../posts/tags/components/TagEditingModal.vue |  8 ++--
 .../users/components/UserEditingModal.vue     |  4 +-
 11 files changed, 76 insertions(+), 67 deletions(-)

diff --git a/packages/components/src/components/modal/Modal.story.vue b/packages/components/src/components/modal/Modal.story.vue
index 115bb55d..5ad96e84 100644
--- a/packages/components/src/components/modal/Modal.story.vue
+++ b/packages/components/src/components/modal/Modal.story.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { IconArrowLeft, IconArrowRight } from "@/icons/icons";
 import { VButton } from "../../components/button";
 import { VModal } from "../../components/modal";
 import { VSpace } from "../../components/space";
@@ -13,7 +14,7 @@ function initState() {
 }
 </script>
 <template>
-  <Story :init-state="initState" title="Modal">
+  <Story :init-state="initState" title="Modal" class="h-full">
     <template #default="{ state }">
       <VButton type="secondary" @click="state.visible = true">打开</VButton>
       <VModal
@@ -21,7 +22,17 @@ function initState() {
         :fullscreen="state.fullscreen"
         :title="state.title"
         :width="state.width"
+        :mount-to-body="true"
       >
+        <template #actions>
+          <span>
+            <IconArrowLeft role="button" />
+          </span>
+
+          <span>
+            <IconArrowRight role="button" />
+          </span>
+        </template>
         <div class="flex flex-col">
           <img class="w-full" src="https://ryanc.cc/avatar" />
           <img class="w-full" src="https://ryanc.cc/avatar" />
@@ -38,11 +49,5 @@ function initState() {
         </template>
       </VModal>
     </template>
-    <template #controls="{ state }">
-      <HstCheckbox v-model="state.visible" title="Visible" />
-      <HstText v-model="state.title" title="Title" />
-      <HstNumber v-model="state.width" title="Width" />
-      <HstCheckbox v-model="state.fullscreen" title="Fullscreen" />
-    </template>
   </Story>
 </template>
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 1340e9d3..f959657d 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -97,14 +97,14 @@ watch(
           :style="contentStyles"
           class="modal-content transform transition-all"
         >
-          <div v-if="$slots.header || title" class="modal-header">
+          <div v-if="$slots.header || title" class="modal-header group">
             <slot name="header">
               <div class="modal-header-title">{{ title }}</div>
-              <div class="modal-header-actions flex flex-row">
+              <div class="modal-header-actions">
                 <slot name="actions"></slot>
-                <div class="modal-header-action" @click="handleClose()">
+                <span class="bg-gray-50" @click="handleClose()">
                   <IconClose />
-                </div>
+                </span>
               </div>
             </slot>
           </div>
@@ -159,25 +159,33 @@ watch(
     .modal-header {
       @apply flex
       justify-between
-      border-b;
+      border-b
+      items-center
+      select-none;
+      padding: 10px 16px;
 
       .modal-header-title {
-        @apply self-center
-        text-base
-        font-bold;
-        padding: 12px 16px;
+        @apply text-base
+        font-medium;
       }
 
       .modal-header-actions {
-        @apply self-center
-        h-full;
-        .modal-header-action {
-          @apply cursor-pointer;
-          padding: 12px 16px;
-
-          &:hover {
-            @apply bg-gray-100;
-          }
+        @apply flex
+        flex-row
+        gap-2;
+        span {
+          @apply cursor-pointer 
+          rounded-full 
+          w-7 
+          h-7 
+          inline-flex 
+          items-center 
+          justify-center 
+          hover:bg-gray-100
+          select-none
+          text-gray-600
+          hover:text-gray-900
+          group-hover:hidden;
         }
       }
     }
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index cfe7705a..3eafb259 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -182,12 +182,12 @@ onMounted(() => {
     @close="onDetailModalClose"
   >
     <template #actions>
-      <div class="modal-header-action" @click="handleSelectPrevious">
+      <span @click="handleSelectPrevious">
         <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="handleSelectNext">
+      </span>
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </AttachmentDetailModal>
   <AttachmentUploadModal
diff --git a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
index 0033f019..0af57ca5 100644
--- a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
@@ -103,9 +103,9 @@ watch(
   >
     <template #actions>
       <FloatingDropdown>
-        <div v-tooltip="`添加存储策略`" class="modal-header-action">
+        <span v-tooltip="`添加存储策略`">
           <IconAddCircle />
-        </div>
+        </span>
         <template #popper>
           <div class="w-72 p-4">
             <ul class="space-y-1">
diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
index 2eb96115..88dbb73a 100644
--- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
@@ -82,11 +82,11 @@ watch(
   >
     <template #actions>
       <FloatingDropdown>
-        <div v-tooltip="`选择存储策略`" class="modal-header-action">
+        <span v-tooltip="`选择存储策略`">
           <span class="text-sm">
             {{ selectedPolicy?.spec.displayName || "无存储策略" }}
           </span>
-        </div>
+        </span>
         <template #popper>
           <div class="w-72 p-4">
             <ul class="space-y-1">
diff --git a/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue b/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
index ae424fcb..0be884d5 100644
--- a/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
+++ b/src/modules/contents/attachments/components/selector-providers/CoreSelectorProvider.vue
@@ -179,27 +179,22 @@ await handleFetchAttachments();
     @close="selectedAttachment = undefined"
   >
     <template #actions>
-      <div
+      <span
         v-if="selectedAttachment && selectedAttachments.has(selectedAttachment)"
-        class="modal-header-action"
         @click="handleSelect(selectedAttachment)"
       >
         <IconCheckboxFill />
-      </div>
-      <div
-        v-else
-        class="modal-header-action"
-        @click="handleSelect(selectedAttachment)"
-      >
+      </span>
+      <span v-else @click="handleSelect(selectedAttachment)">
         <IconCheckboxCircle />
-      </div>
+      </span>
 
-      <div class="modal-header-action" @click="handleSelectPrevious">
+      <span @click="handleSelectPrevious">
         <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="handleSelectNext">
+      </span>
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </AttachmentDetailModal>
 </template>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 160b7bf3..56e3f675 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -201,12 +201,12 @@ const handleSelectUser = (user?: User) => {
     @close="onSettingModalClose"
   >
     <template #actions>
-      <div class="modal-header-action" @click="handleSelectPrevious">
+      <span @click="handleSelectPrevious">
         <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="handleSelectNext">
+      </span>
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </SinglePageSettingModal>
   <VCard :body-class="['!p-0']" class="rounded-none border-none shadow-none">
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index c5776ad4..daa24466 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -330,12 +330,12 @@ function handleContributorFilterItemChange(user?: User) {
     @close="onSettingModalClose"
   >
     <template #actions>
-      <div class="modal-header-action" @click="handleSelectPrevious">
+      <span @click="handleSelectPrevious">
         <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="handleSelectNext">
+      </span>
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </PostSettingModal>
   <VPageHeader title="文章">
diff --git a/src/modules/contents/posts/components/PostPreviewModal.vue b/src/modules/contents/posts/components/PostPreviewModal.vue
index 4cd747f4..1b1f4683 100644
--- a/src/modules/contents/posts/components/PostPreviewModal.vue
+++ b/src/modules/contents/posts/components/PostPreviewModal.vue
@@ -34,13 +34,14 @@ const onVisibleChange = (visible: boolean) => {
     @update:visible="onVisibleChange"
   >
     <template #actions>
-      <a
-        class="modal-header-action"
-        href="https://halo.run/archives/halo-154-released.html"
-        target="_blank"
-      >
-        <IconLink />
-      </a>
+      <span>
+        <a
+          href="https://halo.run/archives/halo-154-released.html"
+          target="_blank"
+        >
+          <IconLink />
+        </a>
+      </span>
     </template>
     <div class="flex h-full items-center justify-center">
       <iframe
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index d7056456..cf821608 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -137,12 +137,12 @@ watch(
     @update:visible="onVisibleChange"
   >
     <template #actions>
-      <div class="modal-header-action" @click="emit('previous')">
+      <span @click="emit('previous')">
         <IconArrowLeft />
-      </div>
-      <div class="modal-header-action" @click="emit('next')">
+      </span>
+      <span @click="emit('next')">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
     <FormKit
       id="tag-form"
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index f0e66792..d4ee7acb 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -187,10 +187,10 @@ const handleRawModeChange = () => {
     @update:visible="onVisibleChange"
   >
     <template #actions>
-      <div class="modal-header-action" @click="handleRawModeChange">
+      <span @click="handleRawModeChange">
         <IconCodeBoxLine v-if="!rawMode" />
         <IconEye v-else />
-      </div>
+      </span>
     </template>
 
     <VCodemirror v-show="rawMode" v-model="raw" height="50vh" language="yaml" />