fix(@vben/web-ele): fixed some style issues in dark mode (#4298)

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

@@ -36,6 +36,8 @@ export class DrawerApi {
       isOpen: false,
       loading: false,
       modal: true,
+      showCancelButton: true,
+      showConfirmButton: true,
       title: '',
     };
 

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

@@ -50,6 +50,16 @@ export interface DrawerProps {
    * @default true
    */
   modal?: boolean;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancelButton?: boolean;
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirmButton?: boolean;
   /**
    * 弹窗标题
    */

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

@@ -54,6 +54,8 @@ const cancelText = usePriorityValue('cancelText', props, state);
 const confirmText = usePriorityValue('confirmText', props, state);
 const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
 const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
+const showCancelButton = usePriorityValue('showCancelButton', props, state);
+const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
 
 watch(
   () => showLoading.value,
@@ -167,12 +169,17 @@ function pointerDownOutside(e: Event) {
       >
         <slot name="prepend-footer"></slot>
         <slot name="footer">
-          <VbenButton variant="ghost" @click="() => drawerApi?.onCancel()">
+          <VbenButton
+            v-if="showCancelButton"
+            variant="ghost"
+            @click="() => drawerApi?.onCancel()"
+          >
             <slot name="cancelText">
               {{ cancelText || $t('cancel') }}
             </slot>
           </VbenButton>
           <VbenButton
+            v-if="showConfirmButton"
             :loading="confirmLoading"
             @click="() => drawerApi?.onConfirm()"
           >

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

@@ -40,6 +40,8 @@ export class ModalApi {
       isOpen: false,
       loading: false,
       modal: true,
+      showCancelButton: true,
+      showConfirmButton: true,
       title: '',
     };
 

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

@@ -75,6 +75,16 @@ export interface ModalProps {
    * @default true
    */
   modal?: boolean;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancelButton?: boolean;
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirmButton?: boolean;
   /**
    * 弹窗标题
    */

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

@@ -69,6 +69,8 @@ const draggable = usePriorityValue('draggable', props, state);
 const fullscreenButton = usePriorityValue('fullscreenButton', props, state);
 const closeOnClickModal = usePriorityValue('closeOnClickModal', props, state);
 const closeOnPressEscape = usePriorityValue('closeOnPressEscape', props, state);
+const showCancelButton = usePriorityValue('showCancelButton', props, state);
+const showConfirmButton = usePriorityValue('showConfirmButton', props, state);
 
 const shouldFullscreen = computed(
   () => (fullscreen.value && header.value) || isMobile.value,
@@ -238,12 +240,17 @@ function pointerDownOutside(e: Event) {
       >
         <slot name="prepend-footer"></slot>
         <slot name="footer">
-          <VbenButton variant="ghost" @click="() => modalApi?.onCancel()">
+          <VbenButton
+            v-if="showCancelButton"
+            variant="ghost"
+            @click="() => modalApi?.onCancel()"
+          >
             <slot name="cancelText">
               {{ cancelText || $t('cancel') }}
             </slot>
           </VbenButton>
           <VbenButton
+            v-if="showConfirmButton"
             :loading="confirmLoading"
             @click="() => modalApi?.onConfirm()"
           >