mky-vent-base/src/components/vent/micro/ventDoc.vue

<template>
  <div style="position: absolute; width: 100%; height: 100%">
    <a-spin class="loading-box" size="large" :spinning="loading" tip="正在加载，请稍等。。。" />
  </div>
  <MicroLoadError v-if="loadFailed" @retry="retryMount" />
  <div id="micro-vent-doc"></div>
</template>
<script lang="ts">
  import { ref, onMounted, onBeforeUnmount, defineComponent, unref } from 'vue';
  import { unmountMicroApps, mountMicroApp, activeApps } from '/@/qiankun';
  import { resetMicroContentWH } from '/@/utils/domUtils';
  import MicroLoadError from './MicroLoadError.vue';
  import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
  import { ErrorTypeEnum } from '/@/enums/exceptionEnum';

  export default defineComponent({
    name: 'VentDoc',
    components: { MicroLoadError },
    setup() {
      const loading = ref(true);
      // [SEC-20260913] 加载失败错误态：超时不再静默放行
      const loadFailed = ref(false);
      const startMount = () => {
        // 判断子应用是否存在，不存在注册
        // [fix-subapp-loading] try/finally 保证就绪等待始终启动（同 ventModal）
        try {
          mountMicroApp('micro-vent-doc');
        } finally {
          resetMicroContentWH(
            'micro-vent-doc',
            () => {
              loading.value = false;
            },
            () => {
              loadFailed.value = true;
              // 失败埋点：复用既有 errorLog store
              useErrorLogStoreWithOut().addErrorLogInfo({
                type: ErrorTypeEnum.RESOURCE,
                file: 'components/vent/micro/ventDoc.vue',
                name: 'MicroApp Load Timeout',
                message: '子应用 micro-vent-doc 加载超时',
                detail: 'resetMicroContentWH 等待容器内容超时',
              });
            }
          );
        }
      };
      const retryMount = () => {
        loadFailed.value = false;
        loading.value = true;
        startMount();
      };
      onMounted(startMount);

      onBeforeUnmount(async () => {
        await unmountMicroApps(['micro-vent-doc']);
      });

      return { loading, loadFailed, retryMount };
    },
  });
</script>
<style lang="less" scoped>
  .loading-box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  #micro-vent-doc {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
</style>