wip: antdv 4.0

src/components/Basic/index.ts

@@ -1,8 +1,9 @@
 import basicArrow from './src/BasicArrow.vue'
-import basicTitle from './src/BasicTitle.vue'
 import basicHelp from './src/BasicHelp.vue'
+import basicTitle from './src/BasicTitle.vue'
+
 import { withInstall } from '@/utils'
 
 export const BasicArrow = withInstall(basicArrow)
-export const BasicTitle = withInstall(basicTitle)
 export const BasicHelp = withInstall(basicHelp)
+export const BasicTitle = withInstall(basicTitle)

src/components/Basic/src/BasicTitle.vue

@@ -50,7 +50,7 @@ const getClass = computed(() => [
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
-  color: @text-color-base;
+  // color: @text-color-base;
   cursor: pointer;
   user-select: none;
 

src/components/Drawer/src/BasicDrawer.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup inheritAttrs="false">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed, getCurrentInstance, nextTick, ref, toRaw, unref, watch } from 'vue'
 import { Drawer } from 'ant-design-vue'
@@ -13,6 +13,8 @@ import { isFunction, isNumber } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useAttrs } from '@/hooks/core/useAttrs'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps(basicProps)
 const emit = defineEmits(['visible-change', 'ok', 'close', 'register'])
 
@@ -52,10 +54,8 @@ const getProps = computed((): DrawerProps => {
     const detailCls = `${prefixCls}__detail`
     opt.class = wrapClassName ? `${wrapClassName} ${detailCls}` : detailCls
 
-    if (!getContainer) {
-      // TODO type error?
+    if (!getContainer)
       opt.getContainer = `.${prefixVar}-layout-content` as any
-    }
   }
   return opt as DrawerProps
 })

src/components/Modal/src/index.less

@@ -50,6 +50,7 @@
   }
 
   &-content {
+    padding: 12px 8px !important;
     box-shadow:
       0 4px 8px 0 rgb(0 0 0 / 20%),
       0 6px 20px 0 rgb(0 0 0 / 19%);
@@ -62,7 +63,9 @@
   }
 
   &-close {
+    width: auto !important;
     font-weight: normal;
+    // background: #fff !important;
     outline: none;
   }
 
@@ -73,21 +76,37 @@
     line-height: 56px;
   }
 
-  &-confirm-body {
-    .ant-modal-confirm-content {
-      // color: #fff;
+  // &-confirm-body {
+  //   .ant-modal-confirm-content {
+  //     // color: #fff;
 
-      > * {
-        color: @text-color-help-dark;
-      }
-    }
-  }
+  //     > * {
+  //       color: @text-color-help-dark;
+  //     }
+  //   }
+  // }
+
+  // &-confirm-confirm.error .ant-modal-confirm-body > .anticon {
+  //   color: @error-color;
+  // }
 
   &-confirm-btns {
     .ant-btn:last-child {
       margin-right: 0;
     }
   }
+
+  // &-confirm-info {
+  //   .ant-modal-confirm-body > .anticon {
+  //     color: @warning-color;
+  //   }
+  // }
+
+  // &-confirm-confirm.success {
+  //   .ant-modal-confirm-body > .anticon {
+  //     color: @success-color;
+  //   }
+  // }
 }
 
 .ant-modal-confirm .ant-modal-body {

src/components/Table/src/BasicTable.vue

@@ -340,7 +340,7 @@ emit('register', tableAction, formActions)
       width: 100%;
       padding: 12px 10px 6px;
       margin-bottom: 16px;
-      background-color: @component-background;
+      // background-color: @component-background;
       border-radius: 2px;
     }
   }
@@ -353,7 +353,7 @@ emit('register', tableAction, formActions)
 
   .ant-table-wrapper {
     padding: 6px;
-    background-color: @component-background;
+    // background-color: @component-background;
     border-radius: 2px;
 
     .ant-table-title {