test: 应用通信添加基座 adapter 信息
This commit is contained in:
wangxuefeng
parent
9f15b89fff
commit
b8b8ddc467
@ -25,8 +25,8 @@ const routes: RouteRecordRaw[] = [
|
||||
},
|
||||
props: {
|
||||
// url: 'https://y-code-renderer.shiyue.com/',
|
||||
url: `${VITE_RENDERER_URL}?fileId=7pfr394d6&projectId=4`,
|
||||
// url: `${VITE_RENDERER_URL}`,
|
||||
// url: `${VITE_RENDERER_URL}?fileId=7pfr394d6&projectId=4`,
|
||||
url: `${VITE_RENDERER_URL}`,
|
||||
// accessToken: localStorage.getItem('y-code-access-token'),
|
||||
fileId: '7pfr394d6',
|
||||
projectId: 4,
|
||||
|
||||
@ -4,12 +4,22 @@ import { getCurrentInstance, onMounted, ref, watch } from 'vue';
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { jsonp, request } from '@vtj/utils';
|
||||
import { createProvider } from '@vtj/web';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import { ElLoading, ElMessage } from 'element-plus';
|
||||
|
||||
import { LowCodeService } from './service';
|
||||
|
||||
// 从 wujie props 获取数据
|
||||
const wujieProps = window.$wujie?.props || {};
|
||||
// 定义 wujie props 的类型
|
||||
interface WujieProps {
|
||||
accessToken?: string;
|
||||
applicationId?: number | string;
|
||||
fileId?: string;
|
||||
name?: string;
|
||||
projectId?: number | string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 从 wujie props 获取数据，提供默认值
|
||||
const wujieProps: WujieProps = window.$wujie?.props || {};
|
||||
console.log('wujie props:', wujieProps);
|
||||
|
||||
// 文件加载时，清空一次 sessionStorage
|
||||
@ -19,38 +29,69 @@ sessionStorage.clear();
|
||||
const renderer = ref();
|
||||
const lowCodeService = new LowCodeService();
|
||||
const isLoading = ref(false);
|
||||
const accessToken = ref(wujieProps.accessToken || '');
|
||||
const urlParams = ref({
|
||||
fileId: wujieProps.fileId || '',
|
||||
projectId: Number(wujieProps.projectId) || -1,
|
||||
applicationId: Number(wujieProps.applicationId) || -1,
|
||||
name: wujieProps.name || '',
|
||||
});
|
||||
const provider = ref(null);
|
||||
const loadingInstance = ref(null);
|
||||
|
||||
// 初始化请求配置
|
||||
const initRequestConfig = (token: string) => {
|
||||
if (!token) return;
|
||||
|
||||
request.useRequest((req) => {
|
||||
req.headers.set('Authorization', `Bearer ${token}`);
|
||||
return req;
|
||||
});
|
||||
};
|
||||
|
||||
// 显示加载中
|
||||
const showLoading = (text = '低代码文件加载中...') => {
|
||||
if (loadingInstance.value) return;
|
||||
|
||||
loadingInstance.value = ElLoading.service({ text });
|
||||
};
|
||||
|
||||
// 隐藏加载中
|
||||
const hideLoading = () => {
|
||||
if (loadingInstance.value) {
|
||||
loadingInstance.value.close();
|
||||
loadingInstance.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 校验必要参数
|
||||
const validateProps = () => {
|
||||
const { fileId, projectId } = wujieProps;
|
||||
|
||||
if (!fileId) {
|
||||
ElMessage.error('缺少必要参数：fileId');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!projectId) {
|
||||
ElMessage.error('缺少必要参数：projectId');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 初始化低代码引擎 - 只初始化一次
|
||||
const initLowCodeEngine = async () => {
|
||||
// 如果已经初始化过，直接返回
|
||||
if (provider.value) return provider.value;
|
||||
|
||||
const token = accessToken.value;
|
||||
if (token) {
|
||||
initRequestConfig(token);
|
||||
sessionStorage.setItem('y-code-access-token', token);
|
||||
// 校验参数
|
||||
if (!validateProps()) {
|
||||
throw new Error('参数校验失败');
|
||||
}
|
||||
|
||||
// 初始化请求配置
|
||||
initRequestConfig(wujieProps.accessToken);
|
||||
|
||||
try {
|
||||
const { provider: lowCodeProvider, onReady } = createProvider({
|
||||
nodeEnv: import.meta.env.NODE_ENV,
|
||||
service: lowCodeService,
|
||||
project: { id: urlParams.value.projectId },
|
||||
project: { id: Number(wujieProps.projectId) || -1 },
|
||||
adapter: {
|
||||
request,
|
||||
jsonp,
|
||||
@ -59,12 +100,19 @@ const initLowCodeEngine = async () => {
|
||||
|
||||
provider.value = { provider: lowCodeProvider, onReady };
|
||||
return { provider: lowCodeProvider, onReady };
|
||||
} catch (error) {
|
||||
console.error('初始化低代码引擎失败:', error);
|
||||
ElMessage.error('初始化低代码引擎失败');
|
||||
return Promise.reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取渲染组件
|
||||
const getRenderComponent = async () => {
|
||||
if (!validateProps()) return null;
|
||||
|
||||
isLoading.value = true;
|
||||
ElLoading.service({ text: '低代码文件加载中...' });
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
// 1. 确保低代码引擎已初始化
|
||||
@ -77,12 +125,13 @@ const getRenderComponent = async () => {
|
||||
instance?.appContext.app.use(lowCodeProvider);
|
||||
try {
|
||||
const renderComponent = await lowCodeProvider.getRenderComponent(
|
||||
urlParams.value.fileId,
|
||||
wujieProps.fileId,
|
||||
);
|
||||
console.log('渲染组件获取成功');
|
||||
resolve(renderComponent);
|
||||
} catch (error) {
|
||||
console.error('获取渲染组件失败:', error);
|
||||
ElMessage.error('获取渲染组件失败');
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
@ -92,15 +141,17 @@ const getRenderComponent = async () => {
|
||||
return null;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
ElLoading.service().close();
|
||||
hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
// 使用 useQuery 管理渲染组件
|
||||
const { data: rendererComponent } = useQuery({
|
||||
queryKey: ['getRenderer'],
|
||||
const { data: rendererComponent, isError } = useQuery({
|
||||
queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
|
||||
queryFn: getRenderComponent,
|
||||
enabled: false, // 初始不自动执行
|
||||
retry: 1, // 失败后重试一次
|
||||
staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
|
||||
});
|
||||
|
||||
// 当组件挂载时，将渲染器组件赋值给 renderer
|
||||
@ -111,31 +162,59 @@ watch(rendererComponent, (newVal) => {
|
||||
}
|
||||
});
|
||||
|
||||
// 向父应用发送状态消息
|
||||
const notifyParent = (event: string, data?: any) => {
|
||||
if (window.$wujie?.bus) {
|
||||
window.$wujie.bus.$emit(event, data);
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载后执行初始化
|
||||
onMounted(async () => {
|
||||
// 通知父应用已准备就绪
|
||||
if (window.$wujie) {
|
||||
window.$wujie.bus.$emit('ready', 'y-code-renderer is ready');
|
||||
}
|
||||
notifyParent('ready', 'y-code-renderer is ready');
|
||||
|
||||
// 初始化低代码引擎并获取渲染组件
|
||||
try {
|
||||
await initLowCodeEngine();
|
||||
getRenderComponent().then((component) => {
|
||||
|
||||
const component = await getRenderComponent();
|
||||
if (component) {
|
||||
renderer.value = component;
|
||||
notifyParent('render-success');
|
||||
} else {
|
||||
notifyParent('render-fail', 'Failed to get component');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化过程出错:', error);
|
||||
notifyParent('render-fail', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 20px">
|
||||
<component :is="renderer" :wujie-props="wujieProps" />
|
||||
<!-- <div
|
||||
v-else-if="!isLoading"
|
||||
style="margin-top: 50px; color: red; text-align: center"
|
||||
>
|
||||
<div class="renderer-container">
|
||||
<component :is="renderer" v-if="renderer" :wujie-props="wujieProps" />
|
||||
|
||||
<div v-else-if="!isLoading && isError" class="error-message">
|
||||
组件加载失败，请检查参数和网络连接
|
||||
</div>
|
||||
|
||||
<div v-else-if="!isLoading" class="error-message">
|
||||
组件加载失败，请检查控制台日志
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.renderer-container {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 50px;
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,8 @@ import { onBeforeUnmount, onMounted } from 'vue';
|
||||
|
||||
import WujieVue from 'wujie-vue3';
|
||||
|
||||
import { version } from '/package.json';
|
||||
|
||||
const props = defineProps<{
|
||||
[key: string]: any;
|
||||
accessToken?: string;
|
||||
@ -33,16 +35,47 @@ const handleMessage = (data: any) => {
|
||||
console.log('收到子应用消息:', data);
|
||||
};
|
||||
|
||||
// 准备传递给子应用的数据
|
||||
const subAppProps = {
|
||||
...props,
|
||||
adapterInfo: {
|
||||
version,
|
||||
},
|
||||
};
|
||||
|
||||
// 监听子应用的事件
|
||||
const handleReady = (data: any) => {
|
||||
console.log('子应用就绪:', data);
|
||||
// 可以在这里执行一些操作
|
||||
};
|
||||
|
||||
const handleRenderSuccess = () => {
|
||||
console.log('子应用渲染成功');
|
||||
// 通知父应用
|
||||
};
|
||||
|
||||
const handleRenderFail = (error: any) => {
|
||||
console.error('子应用渲染失败:', error);
|
||||
// 处理错误情况
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 注册事件监听
|
||||
bus.$on('message', handleMessage);
|
||||
bus.$on('ready', handleReady);
|
||||
bus.$on('render-success', handleRenderSuccess);
|
||||
bus.$on('render-fail', handleRenderFail);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 移除所有事件监听
|
||||
bus.$off('message', handleMessage);
|
||||
bus.$off('ready', handleReady);
|
||||
bus.$off('render-success', handleRenderSuccess);
|
||||
bus.$off('render-fail', handleRenderFail);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
{{ 1 }}
|
||||
<div style="width: 100%; height: 100%">
|
||||
<WujieVue
|
||||
:id="name"
|
||||
@ -53,7 +86,7 @@ onBeforeUnmount(() => {
|
||||
:degrade="degrade"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:props="props"
|
||||
:props="subAppProps"
|
||||
:before-load="beforeLoad"
|
||||
:after-mount="afterMount"
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user