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

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider :locale="getAntdLocale">
+  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -11,11 +11,15 @@
   import { AppProvider } from '@/components/Application';
   import { useTitle } from '@/hooks/web/useTitle';
   import { useLocale } from '@/locales/useLocale';
+
   import 'dayjs/locale/zh-cn';
+  import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
 
   // support Multi-language
   const { getAntdLocale } = useLocale();
 
+  const { isDark, darkTheme } = useDarkModeTheme();
+
   // Listening to page changes and dynamically changing site titles
   useTitle();
 </script>

src/components/Form/src/components/FormItem.vue

@@ -159,7 +159,10 @@
         const joinLabel = Reflect.has(props.schema, 'rulesMessageJoinLabel')
           ? rulesMessageJoinLabel
           : globalRulesMessageJoinLabel;
-        const defaultMsg = createPlaceholderMessage(component) + `${joinLabel ? label : ''}`;
+        const assertLabel = joinLabel ? label : '';
+        const defaultMsg = component
+          ? createPlaceholderMessage(component) + assertLabel
+          : assertLabel;
 
         function validator(rule: any, value: any) {
           const msg = rule.message || defaultMsg;
@@ -382,8 +385,8 @@
       }
 
       return () => {
-        const { colProps = {}, colSlot, renderColContent, component } = props.schema;
-        if (!componentMap.has(component)) {
+        const { colProps = {}, colSlot, renderColContent, component, slot } = props.schema;
+        if (!componentMap.has(component) && !slot) {
           return null;
         }
 

src/components/Modal/src/index.less

@@ -64,7 +64,7 @@
   &-close {
     width: auto !important;
     outline: none;
-    background: #fff !important;
+    background: transparent !important;
     font-weight: normal;
   }
 

src/hooks/setting/useDarkModeTheme.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import { theme } from 'ant-design-vue';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { ThemeEnum } from '/@/enums/appEnum';
+
+export function useDarkModeTheme() {
+  const { getDarkMode } = useRootSetting();
+  const { darkAlgorithm } = theme;
+  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+  const darkTheme = {
+    algorithm: [darkAlgorithm],
+  };
+
+  return {
+    isDark,
+    darkTheme,
+  };
+}