diff --git a/src/components/base/modal/Modal.story.vue b/src/components/base/modal/Modal.story.vue
index 26d016ed1..aaf0a894b 100644
--- a/src/components/base/modal/Modal.story.vue
+++ b/src/components/base/modal/Modal.story.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { VButton } from "@/components/base/button";
 import { VModal } from "@/components/base/modal";
+import { VSpace } from "@/components/base/space";
 
 function initState() {
   return {
@@ -26,7 +27,15 @@ function initState() {
           <img src="https://ryanc.cc/avatar" class="w-full" />
           <img src="https://halo.run/logo" class="w-full" />
         </div>
-        <VButton type="secondary" @click="state.visible = false">关闭</VButton>
+
+        <template #footer>
+          <VSpace>
+            <VButton type="primary" @click="state.visible = false" loading
+              >确定</VButton
+            >
+            <VButton @click="state.visible = false">取消</VButton>
+          </VSpace>
+        </template>
       </VModal>
     </template>
     <template #controls="{ state }">
diff --git a/src/components/base/modal/Modal.vue b/src/components/base/modal/Modal.vue
index c5574115a..83f15c3b3 100644
--- a/src/components/base/modal/Modal.vue
+++ b/src/components/base/modal/Modal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { VButton } from "../button";
 import { computed } from "vue";
 import { IconClose } from "@/core/icons";
 
@@ -72,10 +71,8 @@ function handleClose() {
           <div class="modal-body">
             <slot />
           </div>
-          <div class="modal-footer">
-            <slot name="footer">
-              <VButton @click="handleClose">关闭</VButton>
-            </slot>
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer" />
           </div>
         </div>
       </div>