@qc_info/qc_info_ui

内部项目使用方法

远程公共方法地址

#在.env中添加
 VITE_QC_INFO_URL= http://36.153.220.46:9029/qiankun/qc_info/qc-info.umd.js

# 远程公共方法使用
 组件自动注册 所有方法在 getCurrentInstance 中 $Utils

 //在 Vue 3 项目中使用 app 实例
 function loadQcInfo(app: any) {
     return new Promise((resolve, reject) => {
         const beforeLoad = Object.keys(window);
         const qcUrl =
             import.meta.env.VITE_QC_INFO_URL as string;

         if (!qcUrl) {
             console.warn('远程模块 URL 未在环境变量中定义 (VITE_QC_INFO_URL)');
             return resolve(null); // 或者 reject，根据你的错误处理策略
         }

         // 如果已经加载过，直接返回缓存的结果
         if (window.qcInfo) {
             console.log('使用已加载的远程模块');
             // 如果传入了 app 实例，直接注册组件
             if (app && typeof window.qcInfo.install === 'function') {
                 app.use(window.qcInfo);
             } else if (app && window.qcInfo.Info) {
                 app.component('Info', window.qcInfo.Info);
             }
             return resolve(window.qcInfo);
         }

         const script = document.createElement('script');
         script.src = qcUrl;

         Object.defineProperty(window, 'QcInfoModule', {
             set(value) {
                 console.log('捕获到远程模块注册 (QcInfoModule):', value);
                 if (value && typeof value.install === 'function') {
                     window.qcInfo = value;
                     if (app) {
                         app.use(window.qcInfo);
                     }
                 } else if (value && value.Info) {
                     window.qcInfo = value;
                     if (app) {
                         app.component('Info', value.Info);
                     }
                 } else if (value) {
                     window.qcInfo = value;
                 }
             },
             get() {
                 return window.qcInfo;
             },
             configurable: true,
         });

         script.onload = () => {
             if (window.qcInfo) {
                 console.log('远程模块可能已通过 Setter 或直接赋值加载:', window.qcInfo);
             }

             // 检查是否有新增的全局变量
             const afterLoad = Object.keys(window);
             const newGlobals = afterLoad.filter(
                 (key) => !beforeLoad.includes(key) && typeof window[key] === 'object'
             );

             console.log('检测到的新全局变量:', newGlobals);

             // 尝试提取模块内容
             let moduleExports: {
                 install ? : Function;Info ? : any
             } | null = null;

             // 检查常见的命名模式
             const moduleNames = ['qcInfo', 'QcInfo', 'qc_info', 'QC_INFO'];
             for (const name of moduleNames) {
                 if (window[name] && typeof window[name] === 'object') {
                     console.log(`找到模块全局变量: ${name}`);
                     moduleExports = window[name];
                     break;
                 }
             }

             // 检查新创建的全局变量
             if (!moduleExports && newGlobals.length > 0) {
                 for (const name of newGlobals) {
                     if (
                         window[name] &&
                         typeof window[name] === 'object' &&
                         (typeof window[name].install === 'function' || window[name].Info)
                     ) {
                         console.log(`从新全局变量中找到模块: ${name}`);
                         moduleExports = window[name];
                         break;
                     }
                 }
             }

             if (!moduleExports) {
                 console.log('尝试从全局作用域查找组件和安装方法');

                 // 检查是否直接导出了关键函数/组件
                 if (typeof window.install === 'function' || window.Info) {
                     console.log('找到全局安装方法或组件');
                     moduleExports = {
                         install: window.install ||
                             function(app) {
                                 if (window.Info) app.component('Info', window.Info);
                             },
                         Info: window.Info,
                     };
                 }
             }

             // 如果找到了模块导出，全局保存一份并返回
             if (moduleExports) {
                 window.qcInfo = moduleExports;

                 if (app) {
                     let installed = false;
                     if (typeof moduleExports.install === 'function') {
                         app.use(moduleExports);
                         console.log('自动将远程模块注册到 Vue 实例 ');
                         installed = true;
                     } else if (moduleExports.default && typeof moduleExports.default.install === 'function') {
                         //自动挂载远程模块
                         app.use(moduleExports.default);
                         //自动挂载远程公共方法
                         app.config.globalProperties.$Utils = moduleExports.Utils;
                         console.log('自动将远程模块注册到 Vue 实例 ');
                         installed = true;
                     }

                     if (!installed) {
                         if (moduleExports.Info) {
                             app.component('Info', moduleExports.Info);
                             console.log('自动将远程 Info 组件注册到 Vue 实例 (via module.Info)');
                         } else if (moduleExports.default && moduleExports.default.Info) {
                             app.component('Info', moduleExports.default.Info);
                             console.log('自动将远程 Info 组件注册到 Vue 实例 (via module.default.Info)');
                         }
                     }
                 }
                 return resolve(moduleExports);
             }

             console.error('无法识别远程模块的导出结构');
             resolve(null);
         };

         script.onerror = (err) => {
             console.error('加载远程模块失败:', err);
             reject(err);
         };

         document.head.appendChild(script);
     });
 }
 try {
     const qcModule = await loadQcInfo(app); // 传入 app 实例, 注册在 loadQcInfo 内部处理
     if (qcModule) {
         console.log('远程模块已成功加载并尝试注册:', qcModule);
     } else {
         console.warn('远程模块未能加载或注册，请检查配置和网络。');
     }
 } catch (err) {
     console.error(err);
 }

安装

npm install @qc_info/qc_info

使用

全局注册

import {
    createApp
} from 'vue'
import QcInfo from '@qc_info/qc_info'
import App from './App.vue'

const app = createApp(App)
app.use(QcInfo)
app.mount('#app')

组件使用

<template>
  <qc-info title="自定义标题">
    这里是信息内容
  </qc-info>
</template>

组件

Info

一个简单的信息展示组件。

属性

属性名	类型	默认值	说明
title	String	'信息'	信息标题

插槽

插槽名	说明
default	信息内容

开发

# 安装依赖
npm install

# 开发环境运行
npm run dev

# 构建
npm run build

许可证

MIT