Merge pull request #80 from suyuan32/dev

fix: wrong style in dark mode modal
suyuan32 · Jul 27, 2023 · 76b002e · 76b002e
2 parents 4ecaa62 + 6d6f5c1
commit 76b002e
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 43 deletions.
diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue
@@ -145,6 +145,7 @@
         if (unref(fullScreenRef)) {
           return omit(attr, ['height', 'title']);
         }
+
         return omit(attr, 'title');
       });
 

diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
@@ -53,7 +53,7 @@
 
       let stopElResizeFn: AnyFunction = () => {};
 
-      useWindowSizeFn(setModalHeight.bind(null, false));
+      useWindowSizeFn(setModalHeight.bind(null));
 
       useMutationObserver(
         spinRef,

diff --git a/src/components/Modal/src/hooks/useModal.ts b/src/components/Modal/src/hooks/useModal.ts
@@ -4,6 +4,7 @@ import type {
   ModalProps,
   ReturnMethods,
   UseModalInnerReturnType,
+  RegisterFn,
 } from '../typing';
 import {
   ref,
@@ -97,7 +98,7 @@ export function useModal(): UseModalReturnType {
       getInstance()?.setModalProps({ visible: false });
     },
   };
-  return [register, methods];
+  return [register as RegisterFn, methods];
 }
 
 export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
@@ -133,7 +134,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   });
 
   return [
-    register,
+    register as RegisterFn,
     {
       changeLoading: (loading = true) => {
         getInstance()?.setModalProps({ loading });

diff --git a/src/components/Modal/src/hooks/useModalDrag.ts b/src/components/Modal/src/hooks/useModalDrag.ts
@@ -1,5 +1,6 @@
-import { Ref, unref, watchEffect } from 'vue';
+import { Ref, ref, unref, watchEffect } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
 export interface UseModalDragMoveContext {
   draggable: Ref<boolean>;
@@ -13,9 +14,18 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
   };
   const drag = (wrap: any) => {
     if (!wrap) return;
+
+    const { getDarkMode } = useRootSetting();
+
+    const classPrefix = ref<string>('.ant');
+
+    if (getDarkMode.value == 'dark') {
+      classPrefix.value = '.dark';
+    }
+
     wrap.setAttribute('data-drag', unref(context.draggable));
-    const dialogHeaderEl = wrap.querySelector('.ant-modal-header');
-    const dragDom = wrap.querySelector('.ant-modal');
+    const dialogHeaderEl = wrap.querySelector(classPrefix.value + '-modal-header');
+    const dragDom = wrap.querySelector(classPrefix.value + '-modal');
 
     if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
 
@@ -26,8 +36,9 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
       // 鼠标按下，计算当前元素距离可视区的距离
       const disX = e.clientX;
       const disY = e.clientY;
+
       const screenWidth = document.body.clientWidth; // body当前宽度
-      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
+      const screenHeight = window.innerHeight;
 
       const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
       const dragDomheight = dragDom.offsetHeight; // 对话框高度
@@ -64,7 +75,7 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
           left = maxDragDomLeft;
         }
 
-        if (-top > minDragDomTop) {
+        if (-top >= minDragDomTop) {
           top = -minDragDomTop;
         } else if (top > maxDragDomTop) {
           top = maxDragDomTop;
@@ -82,7 +93,16 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
   };
 
   const handleDrag = () => {
-    const dragWraps = document.querySelectorAll('.ant-modal-wrap');
+    const { getDarkMode } = useRootSetting();
+
+    const classPrefix = ref<string>('.ant');
+
+    if (getDarkMode.value == 'dark') {
+      classPrefix.value = '.dark';
+    }
+
+    const dragWraps = document.querySelectorAll(classPrefix.value + '-modal-wrap');
+
     for (const wrap of Array.from(dragWraps)) {
       if (!wrap) continue;
       const display = getStyle(wrap, 'display');

diff --git a/src/components/Modal/src/hooks/useModalFullScreen.ts b/src/components/Modal/src/hooks/useModalFullScreen.ts
@@ -7,7 +7,6 @@ export interface UseFullScreenContext {
 }
 
 export function useFullScreen(context: UseFullScreenContext) {
-  // const formerHeightRef = ref(0);
   const fullScreenRef = ref(false);
 
   const getWrapClassName = computed(() => {
@@ -18,26 +17,6 @@ export function useFullScreen(context: UseFullScreenContext) {
   function handleFullScreen(e: Event) {
     e && e.stopPropagation();
     fullScreenRef.value = !unref(fullScreenRef);
-
-    // const modalWrapper = unref(context.modalWrapperRef);
-
-    // if (!modalWrapper) return;
-
-    // const wrapperEl = modalWrapper.$el as HTMLElement;
-    // if (!wrapperEl) return;
-    // const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;
-
-    // if (!modalWrapSpinEl) return;
-
-    // if (!unref(formerHeightRef) && unref(fullScreenRef)) {
-    //   formerHeightRef.value = modalWrapSpinEl.offsetHeight;
-    // }
-
-    // if (unref(fullScreenRef)) {
-    //   modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`;
-    // } else {
-    //   modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
-    // }
   }
   return { getWrapClassName, handleFullScreen, fullScreenRef };
 }
diff --git a/src/components/Modal/src/index.less b/src/components/Modal/src/index.less
@@ -13,6 +13,19 @@
       height: 100%;
     }
   }
+
+  .dark-modal {
+    top: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100%;
+
+    &-content {
+      height: 100%;
+    }
+  }
 }
 
 .ant-modal {
@@ -125,3 +138,114 @@
     top: 10px;
   }
 }
+
+.dark-modal {
+  width: 520px;
+  padding-bottom: 0;
+
+  .dark-modal-body > .scrollbar {
+    padding: 14px;
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: bold;
+
+    .base-title {
+      cursor: move !important;
+    }
+  }
+
+  .dark-modal-body {
+    padding: 0;
+
+    > .scrollbar > .scrollbar__bar.is-horizontal {
+      display: none;
+    }
+  }
+
+  &-large {
+    top: 60px;
+
+    &--mini {
+      top: 16px;
+    }
+  }
+
+  &-header {
+    padding: 16px;
+  }
+
+  &-content {
+    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+  }
+
+  &-footer {
+    button + button {
+      margin-left: 10px;
+    }
+  }
+
+  &-close {
+    font-weight: normal;
+    outline: none;
+  }
+
+  &-close-x {
+    display: inline-block;
+    width: 96px;
+    height: 56px;
+    line-height: 56px;
+  }
+
+  &-confirm-body {
+    .dark-modal-confirm-content {
+      // color: #fff;
+
+      > * {
+        color: @text-color-help-dark;
+      }
+    }
+  }
+
+  &-confirm-confirm.error .dark-modal-confirm-body > .darkicon {
+    color: @error-color;
+  }
+
+  &-confirm-btns {
+    .dark-btn:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-confirm-info {
+    .dark-modal-confirm-body > .darkicon {
+      color: @warning-color;
+    }
+  }
+
+  &-confirm-confirm.success {
+    .dark-modal-confirm-body > .darkicon {
+      color: @success-color;
+    }
+  }
+}
+
+.dark-modal-confirm .dark-modal-body {
+  padding: 24px !important;
+}
+@media screen and (max-height: 600px) {
+  .dark-modal {
+    top: 60px;
+  }
+}
+@media screen and (max-height: 540px) {
+  .dark-modal {
+    top: 30px;
+  }
+}
+@media screen and (max-height: 480px) {
+  .dark-modal {
+    top: 10px;
+  }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -2,8 +2,8 @@ import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router'
 import type { App, Component } from 'vue';
 
 import { unref } from 'vue';
-import { isObject } from '/@/utils/is';
-import { cloneDeep } from 'lodash-es';
+import { intersectionWith, isEqual, mergeWith, unionWith } from 'lodash-es';
+import { isArray, isObject } from '/@/utils/is';
 
 export const noop = () => {};
 
@@ -33,14 +33,51 @@ export function setObjToUrlParams(baseUrl: string, obj: any): string {
   return /\?$/.test(baseUrl) ? baseUrl + parameters : baseUrl.replace(/\/?$/, '?') + parameters;
 }
 
-// 深度合并
-export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
-  let key: string;
-  const res: any = cloneDeep(src);
-  for (key in target) {
-    res[key] = isObject(res[key]) ? deepMerge(res[key], target[key]) : target[key];
+/**
+ * Recursively merge two objects.
+ * 递归合并两个对象。
+ *
+ * @param source The source object to merge from. 要合并的源对象。
+ * @param target The target object to merge into. 目标对象，合并后结果存放于此。
+ * @param mergeArrays How to merge arrays. Default is "replace".
+ *        如何合并数组。默认为replace。
+ *        - "union": Union the arrays. 对数组执行并集操作。
+ *        - "intersection": Intersect the arrays. 对数组执行交集操作。
+ *        - "concat": Concatenate the arrays. 连接数组。
+ *        - "replace": Replace the source array with the target array. 用目标数组替换源数组。
+ * @returns The merged object. 合并后的对象。
+ */
+export function deepMerge<T extends object | null | undefined, U extends object | null | undefined>(
+  source: T,
+  target: U,
+  mergeArrays: 'union' | 'intersection' | 'concat' | 'replace' = 'replace',
+): T & U {
+  if (!target) {
+    return source as T & U;
+  }
+  if (!source) {
+    return target as T & U;
   }
-  return res;
+  return mergeWith({}, source, target, (sourceValue, targetValue) => {
+    if (isArray(targetValue) && isArray(sourceValue)) {
+      switch (mergeArrays) {
+        case 'union':
+          return unionWith(sourceValue, targetValue, isEqual);
+        case 'intersection':
+          return intersectionWith(sourceValue, targetValue, isEqual);
+        case 'concat':
+          return sourceValue.concat(targetValue);
+        case 'replace':
+          return targetValue;
+        default:
+          throw new Error(`Unknown merge array strategy: ${mergeArrays as string}`);
+      }
+    }
+    if (isObject(targetValue) && isObject(sourceValue)) {
+      return deepMerge(sourceValue, targetValue, mergeArrays);
+    }
+    return undefined;
+  });
 }
 
 export function openWindow(

diff --git a/src/views/mcms/emailProvider/index.vue b/src/views/mcms/emailProvider/index.vue
@@ -127,8 +127,8 @@
       const [registerModal, { openModal }] = useModal();
 
       const [registerForm, { validate }] = useForm({
-        labelWidth: 140,
-        baseColProps: { span: 24 },
+        labelWidth: 100,
+        baseColProps: { span: 18 },
         schemas: formSchema,
         showActionButtonGroup: false,
         labelAlign: 'right',

diff --git a/src/views/mcms/smsProvider/index.vue b/src/views/mcms/smsProvider/index.vue
@@ -128,9 +128,9 @@
       const [registerModal, { openModal }] = useModal();
 
       const [registerForm, { validate }] = useForm({
-        labelWidth: 140,
+        labelWidth: 100,
         labelAlign: 'right',
-        baseColProps: { span: 24 },
+        baseColProps: { span: 18 },
         schemas: formSchema,
         showActionButtonGroup: false,
       });