perf: improve modal component style

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>

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
+        @apply text-base
-        text-base
+        font-medium;
-        font-bold;
-        padding: 12px 16px;
       }
 
       .modal-header-actions {
-        @apply self-center
+        @apply flex
-        h-full;
+        flex-row
-        .modal-header-action {
+        gap-2;
-          @apply cursor-pointer;
+        span {
-          padding: 12px 16px;
+          @apply cursor-pointer 
-
+          rounded-full 
-          &:hover {
+          w-7 
-            @apply bg-gray-100;
+          h-7 
-          }
+          inline-flex 
+          items-center 
+          justify-center 
+          hover:bg-gray-100
+          select-none
+          text-gray-600
+          hover:text-gray-900
+          group-hover:hidden;
         }
       }
     }

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>
+      </span>
-      <div class="modal-header-action" @click="handleSelectNext">
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </AttachmentDetailModal>
   <AttachmentUploadModal

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">

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">

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>
+      </span>
-      <div
+      <span v-else @click="handleSelect(selectedAttachment)">
-        v-else
-        class="modal-header-action"
-        @click="handleSelect(selectedAttachment)"
-      >
         <IconCheckboxCircle />
-      </div>
+      </span>
 
-      <div class="modal-header-action" @click="handleSelectPrevious">
+      <span @click="handleSelectPrevious">
         <IconArrowLeft />
-      </div>
+      </span>
-      <div class="modal-header-action" @click="handleSelectNext">
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </AttachmentDetailModal>
 </template>

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>
+      </span>
-      <div class="modal-header-action" @click="handleSelectNext">
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </SinglePageSettingModal>
   <VCard :body-class="['!p-0']" class="rounded-none border-none shadow-none">

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>
+      </span>
-      <div class="modal-header-action" @click="handleSelectNext">
+      <span @click="handleSelectNext">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
   </PostSettingModal>
   <VPageHeader title="文章">

src/modules/contents/posts/components/PostPreviewModal.vue

@@ -34,13 +34,14 @@ const onVisibleChange = (visible: boolean) => {
     @update:visible="onVisibleChange"
   >
     <template #actions>
-      <a
+      <span>
-        class="modal-header-action"
+        <a
-        href="https://halo.run/archives/halo-154-released.html"
+          href="https://halo.run/archives/halo-154-released.html"
-        target="_blank"
+          target="_blank"
-      >
+        >
-        <IconLink />
+          <IconLink />
-      </a>
+        </a>
+      </span>
     </template>
     <div class="flex h-full items-center justify-center">
       <iframe

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>
+      </span>
-      <div class="modal-header-action" @click="emit('next')">
+      <span @click="emit('next')">
         <IconArrowRight />
-      </div>
+      </span>
     </template>
     <FormKit
       id="tag-form"

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" />