refactor: 重构微前端相关代码

master
钟良源 1 month ago
parent 1a1281bcdd
commit 3048bfa2e7

@ -12,61 +12,4 @@ window.React = React;
// 是否是线上演示环境
window.IS_ONLINE = !!import.meta.env.VITE_IS_ONLINE;
// micro-app 类型声明
declare global {
interface Window {
__MICRO_APP_NAME__?: string;
__MICRO_APP_ENVIRONMENT__?: boolean;
__MICRO_APP_BASE_ROUTE__?: string;
microApp?: {
addDataListener: (callback: (data: Record<string, unknown>) => void, autoTrigger?: boolean) => void;
removeDataListener: (callback: (data: Record<string, unknown>) => void) => void;
getData: () => Record<string, unknown>;
dispatch: (data: Record<string, unknown>) => void;
};
}
}
let root: ReactDOM.Root | null = null;
// 渲染函数
function render() {
const container = document.getElementById('root');
if (container) {
root = ReactDOM.createRoot(container);
root.render(<App />);
}
}
// 卸载函数
function unmount() {
if (root) {
root.unmount();
root = null;
}
}
// 判断是否在 micro-app 环境中
if (window.__MICRO_APP_ENVIRONMENT__) {
console.log('[label-app] 运行在微前端环境中');
// 监听主应用数据
if (window.microApp) {
window.microApp.addDataListener((data) => {
console.log('[label-app] 收到主应用数据:', data);
});
}
} else {
// 独立运行
render();
}
// 导出生命周期函数
export async function mount() {
console.log('[label-app] mount');
render();
}
export async function unmountApp() {
console.log('[label-app] unmount');
unmount();
}
ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

@ -1,5 +1,5 @@
<template>
<div class="container-canvas" :style="{ padding: config ? '20px' : '', height: config ? '100%' : '' }">
<div class="container-canvas" :style="{ padding: config ? '20px' : '' }">
<micro-app
iframe
name="label-app"
@ -81,6 +81,7 @@ onMounted(() => {
//
rootUrl.value = isProd ? appUrl : devUrl;
baseUrl.value = rootUrl.value ? `${rootUrl.value}${commonUrl}` : '';
console.log('baseUrl:', baseUrl.value)
});
const handleDataListener = (props: any) => {

Loading…
Cancel
Save