chore: 子应用独立运行测试
This commit is contained in:
wangxuefeng
parent
8f14c9b2df
commit
946d66e456
@ -1,43 +1,29 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import RendererAdapter from '@sy/vue3-renderer-adapter';
|
||||
|
||||
import { VITE_RENDERER_URL } from '#/constants';
|
||||
import {
|
||||
LOW_CODE_APPLICATION_ID,
|
||||
LOW_CODE_PROJECT_ID,
|
||||
} from '#/constants/low-code';
|
||||
|
||||
// 微前端路由
|
||||
const moduleName = 'static-file';
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/static-file',
|
||||
name: moduleName,
|
||||
name: 'StaticFile',
|
||||
meta: {
|
||||
title: '静态文件管理',
|
||||
icon: 'ant-design:file',
|
||||
order: 2,
|
||||
title: '静态文件管理',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: `${moduleName}-list`,
|
||||
path: '/static-file/list',
|
||||
name: 'StaticFileList',
|
||||
component: RendererAdapter,
|
||||
meta: {
|
||||
icon: 'ant-design:file-text',
|
||||
title: '静态文件列表',
|
||||
keepAlive: false,
|
||||
icon: 'ant-design:file',
|
||||
},
|
||||
component: () =>
|
||||
h(RendererAdapter, {
|
||||
url: VITE_RENDERER_URL,
|
||||
name: 'y-code-platform-application-list',
|
||||
applicationId: LOW_CODE_APPLICATION_ID,
|
||||
projectId: LOW_CODE_PROJECT_ID,
|
||||
fileId: '7pfr394d6',
|
||||
}),
|
||||
props: {
|
||||
url: 'https://localhost:10012/?fileId=7pfr394d6&projectId=4',
|
||||
accessToken: localStorage.getItem('y-code-access-token'),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, ref, watch } from 'vue';
|
||||
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { useQuery } from '@tanstack/vue-query';
|
||||
import { jsonp, request } from '@vtj/utils';
|
||||
@ -7,77 +7,176 @@ import { createProvider } from '@vtj/web';
|
||||
import { ElLoading } from 'element-plus';
|
||||
import Postmate from 'postmate';
|
||||
|
||||
import { getFile } from './io';
|
||||
import { LowCodeService } from './service';
|
||||
// import * as VtjUI from '@vtj/ui'
|
||||
|
||||
// 响应式状态
|
||||
const renderer = ref();
|
||||
const lowCodeService = new LowCodeService();
|
||||
const isLoading = ref(false);
|
||||
const handshakeCompleted = ref(false);
|
||||
const accessToken = ref('');
|
||||
const urlParams = ref(parseUrlParams());
|
||||
const provider = ref(null);
|
||||
|
||||
// Postmate 握手协议
|
||||
const postmate = new Postmate.Model({
|
||||
sayHi: (data: any) => {
|
||||
console.log('sayHi', data);
|
||||
},
|
||||
});
|
||||
// 从 URL 解析参数
|
||||
function parseUrlParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const params = {
|
||||
fileId: urlParams.get('fileId') || '',
|
||||
projectId: Number(urlParams.get('projectId')) || -1,
|
||||
applicationId: Number(urlParams.get('applicationId')) || -1,
|
||||
name: urlParams.get('name') || '',
|
||||
};
|
||||
console.log('解析URL参数:', params);
|
||||
return params;
|
||||
}
|
||||
|
||||
// 数据模型
|
||||
const model = {
|
||||
name: '',
|
||||
applicationId: -1,
|
||||
projectId: -1,
|
||||
fileId: '',
|
||||
url: '',
|
||||
accessToken: '',
|
||||
// 初始化 Postmate 握手
|
||||
const initPostmateHandshake = async () => {
|
||||
const model = new Postmate.Model({
|
||||
sayHi: (data: any) => {
|
||||
console.log('sayHi', data);
|
||||
},
|
||||
});
|
||||
|
||||
return model.then((parent) => {
|
||||
// 只获取 accessToken
|
||||
accessToken.value = parent.model.accessToken || '';
|
||||
localStorage.setItem('y-code-access-token', accessToken.value);
|
||||
parent.emit('renderer-ready', 'y-code-renderer is ready');
|
||||
|
||||
// 更新请求配置
|
||||
if (accessToken.value) {
|
||||
initRequestConfig(accessToken.value);
|
||||
}
|
||||
|
||||
handshakeCompleted.value = true;
|
||||
return accessToken.value;
|
||||
});
|
||||
};
|
||||
|
||||
// 数据查询
|
||||
const { data: file, isFetching } = useQuery({
|
||||
queryKey: ['getFile'],
|
||||
queryFn: async () => {
|
||||
await postmate.then((parent) => {
|
||||
parent.emit('some-event', 'y-code-renderer is ready');
|
||||
Object.assign(model, parent.model);
|
||||
localStorage.setItem('y-code-access-token', model.accessToken || '');
|
||||
});
|
||||
// 初始化请求配置
|
||||
const initRequestConfig = (token: string) => {
|
||||
request.useRequest((req) => {
|
||||
req.headers.set('Authorization', `Bearer ${token}`);
|
||||
return req;
|
||||
});
|
||||
};
|
||||
|
||||
return getFile(model.fileId).then(() => {
|
||||
request.useRequest((req) => {
|
||||
req.headers.set('Authorization', `Bearer ${model.accessToken}`);
|
||||
return req;
|
||||
});
|
||||
console.log('import.meta.env.NODE_ENV', import.meta.env.NODE_ENV);
|
||||
const { provider, onReady } = createProvider({
|
||||
nodeEnv: import.meta.env.NODE_ENV,
|
||||
service: lowCodeService,
|
||||
project: { id: model.projectId },
|
||||
adapter: {
|
||||
request,
|
||||
jsonp,
|
||||
},
|
||||
});
|
||||
// 初始化低代码引擎 - 只初始化一次
|
||||
const initLowCodeEngine = async () => {
|
||||
// 如果已经初始化过，直接返回
|
||||
if (provider.value) return provider.value;
|
||||
|
||||
const token =
|
||||
accessToken.value || localStorage.getItem('y-code-access-token') || '';
|
||||
if (token) {
|
||||
initRequestConfig(token);
|
||||
}
|
||||
|
||||
const { provider: lowCodeProvider, onReady } = createProvider({
|
||||
nodeEnv: import.meta.env.NODE_ENV,
|
||||
service: lowCodeService,
|
||||
project: { id: urlParams.value.projectId },
|
||||
adapter: {
|
||||
request,
|
||||
jsonp,
|
||||
},
|
||||
});
|
||||
|
||||
provider.value = { provider: lowCodeProvider, onReady };
|
||||
return { provider: lowCodeProvider, onReady };
|
||||
};
|
||||
|
||||
// 获取渲染组件
|
||||
const getRenderComponent = async () => {
|
||||
isLoading.value = true;
|
||||
ElLoading.service({ text: '低代码文件加载中...' });
|
||||
|
||||
try {
|
||||
// 1. 确保低代码引擎已初始化
|
||||
const { provider: lowCodeProvider, onReady } = await initLowCodeEngine();
|
||||
|
||||
// 3. 获取渲染组件
|
||||
return new Promise<any>((resolve) => {
|
||||
onReady(async () => {
|
||||
const instance = getCurrentInstance();
|
||||
instance?.appContext.app.use(provider);
|
||||
renderer.value = await provider.getRenderComponent(model.fileId);
|
||||
instance?.appContext.app.use(lowCodeProvider);
|
||||
try {
|
||||
const renderComponent = await lowCodeProvider.getRenderComponent(
|
||||
urlParams.value.fileId,
|
||||
);
|
||||
console.log('渲染组件获取成功');
|
||||
resolve(renderComponent);
|
||||
} catch (error) {
|
||||
console.error('获取渲染组件失败:', error);
|
||||
resolve(null);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 加载状态监控
|
||||
watch(isFetching, (newVal) => {
|
||||
if (newVal) {
|
||||
ElLoading.service({ text: '低代码文件加载中...' });
|
||||
} else {
|
||||
} catch (error) {
|
||||
console.error('获取渲染组件过程出错:', error);
|
||||
return null;
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
ElLoading.service().close();
|
||||
}
|
||||
};
|
||||
|
||||
// 使用 useQuery 管理渲染组件（但不实际使用）
|
||||
const { data: rendererComponent } = useQuery({
|
||||
queryKey: ['getRenderer'],
|
||||
queryFn: getRenderComponent,
|
||||
enabled: false, // 初始不自动执行
|
||||
});
|
||||
|
||||
// 当组件挂载时，将渲染器组件赋值给 renderer
|
||||
watch(rendererComponent, (newVal) => {
|
||||
if (newVal) {
|
||||
renderer.value = newVal;
|
||||
console.log('渲染器组件已更新');
|
||||
}
|
||||
});
|
||||
|
||||
// 监听握手完成状态
|
||||
watch(handshakeCompleted, (newVal) => {
|
||||
if (newVal) {
|
||||
console.log('握手完成，开始获取渲染组件');
|
||||
getRenderComponent().then((component) => {
|
||||
if (component) {
|
||||
renderer.value = component;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 组件挂载后执行初始化
|
||||
onMounted(async () => {
|
||||
// 1. 初始化低代码引擎
|
||||
await initLowCodeEngine();
|
||||
|
||||
// 2. 开始获取渲染组件
|
||||
getRenderComponent().then((component) => {
|
||||
if (component) {
|
||||
renderer.value = component;
|
||||
}
|
||||
});
|
||||
|
||||
// 3. 同时启动握手过程，但不阻塞主流程
|
||||
initPostmateHandshake().catch((error) => {
|
||||
console.warn('握手失败:', error);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 20px">
|
||||
<component :is="renderer" v-if="renderer" />
|
||||
<div
|
||||
v-else-if="!isLoading"
|
||||
style="margin-top: 50px; color: red; text-align: center"
|
||||
>
|
||||
组件加载失败，请检查控制台日志
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user