Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -29,6 +29,7 @@ export class ModalApi {
     } = options;
 
     const defaultState: ModalState = {
+      bordered: false,
       centered: false,
       class: '',
       closeOnClickModal: true,

packages/@core/ui-kit/popup-ui/src/modal/modal.ts

@@ -3,15 +3,22 @@ import type { ModalApi } from './modal-api';
 import type { Component, Ref } from 'vue';
 
 export interface ModalProps {
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  bordered?: boolean;
   /**
    * 取消按钮文字
    */
   cancelText?: string;
+
   /**
    * 是否居中
    * @default false
    */
   centered?: boolean;
+
   class?: string;
   /**
    * 是否显示右上角的关闭按钮

packages/@core/ui-kit/popup-ui/src/modal/modal.vue

@@ -52,6 +52,7 @@ const { isMobile } = useIsMobile();
 const state = props.modalApi?.useStore?.();
 
 const {
+  bordered,
   cancelText,
   centered,
   class: modalClass,
@@ -170,9 +171,11 @@ function handleFocusOutside(e: Event) {
       ref="contentRef"
       :class="
         cn(
-          'border-border left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col border p-0',
+          'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] w-[520px] flex-col p-0 sm:rounded-2xl',
           modalClass,
           {
+            'border-border border': bordered,
+            'shadow-3xl': !bordered,
             'left-0 top-0 size-full max-h-full !translate-x-0 !translate-y-0':
               shouldFullscreen,
             'top-1/2 !-translate-y-1/2': centered && !shouldFullscreen,
@@ -195,8 +198,9 @@ function handleFocusOutside(e: Event) {
         ref="headerRef"
         :class="
           cn(
-            'border-b px-5 py-4',
+            'px-5 py-4',
             {
+              'border-b': bordered,
               hidden: !header,
               'cursor-move select-none': shouldDraggable,
             },