fix(projects): 修复useModal组件主题色失效问题

src/components/common/Modal/index.vue

@@ -1,20 +1,27 @@
 <template>
-  <NModal
-    v-model:show="show"
-    v-bind="getModalProps"
-    :loading="loading"
-    @positive-click="positiveClick"
-    @negative-click="negativeClick"
-  >
-    {{ isFunction(props.content) ? props.content() : props.content }}
-  </NModal>
+  <app-provider>
+    <n-modal
+      v-model:show="show"
+      v-bind="getModalProps"
+      :loading="loading"
+      @positive-click="positiveClick"
+      @negative-click="negativeClick"
+    >
+      <template v-if="!isVNode(SlotContent)">
+        {{ SlotContent }}
+      </template>
+      <component :is="SlotContent" v-else />
+    </n-modal>
+  </app-provider>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, isVNode } from 'vue';
+import type { VNode } from 'vue';
 import { NModal } from 'naive-ui';
 import type { ModalProps } from 'naive-ui';
 import { omit, isFunction } from 'lodash-es';
+import AppProvider from '@/AppProvider.vue';
 
 export interface HookModalProps extends Partial<ModalProps> {
   closeModal?: () => void;
@@ -26,6 +33,12 @@ const props = withDefaults(defineProps<HookModalProps>(), {
 
 /** 重组NModal的props */
 const getModalProps = computed(() => omit(props, ['onPositiveClick', 'onNegativeClick']));
+const SlotContent = computed(() => {
+  if (isFunction(props.content)) {
+    return isVNode(props.content()) ? (props.content() as VNode) : (props.content() as any);
+  }
+  return props.content as string;
+});
 
 const loading = ref(false);
 const show = computed({

src/hooks/common/useModal.ts

@@ -11,7 +11,7 @@ export default function useModal() {
     if (modalInstance) {
       return modalInstance;
     }
-    const container = document.createElement('template');
+    const container = document.createElement('div');
     const VNode = createVNode(Modal);
     VNode.appContext = appContext;
     render(VNode, container);

src/views/component/modal/index.vue

@@ -18,13 +18,19 @@
           <n-button @click="handleShow">来吧</n-button>
         </n-card>
       </n-grid-item>
+      <n-grid-item>
+        <n-card title="渲染一个组件" class="min-h-180px">
+          <n-button @click="handleRender">来吧</n-button>
+        </n-card>
+      </n-grid-item>
     </n-grid>
   </n-card>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { NCard, NGrid, NGridItem, NModal, NButton } from 'naive-ui';
+import { ComponentTable } from '@/views';
 import { useModal } from '@/hooks';
 
 const visible = ref(false);
@@ -49,5 +55,18 @@ function handleShow() {
     negativeText: '算了'
   });
 }
+
+function handleRender() {
+  showModal({
+    title: '渲染个组件试试',
+    content: () => h(ComponentTable),
+    maskClosable: true,
+    preset: 'card',
+    bordered: false,
+    overlayStyle: {
+      width: '600px'
+    }
+  });
+}
 </script>
 <style lang="scss" scoped></style>