chore: 依赖调整
This commit is contained in:
parent
e329f77cb2
commit
b76b9e9013
@ -15,17 +15,17 @@
|
|||||||
"typecheck": "vue-tsc --noEmit --skipLibCheck"
|
"typecheck": "vue-tsc --noEmit --skipLibCheck"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vtj/core": "^0.11.2",
|
"@vtj/core": "^0.11.5",
|
||||||
"@vtj/designer": "0.11.2",
|
"@vtj/designer": "0.11.5",
|
||||||
"@vtj/icons": "0.11.2",
|
"@vtj/icons": "0.11.5",
|
||||||
"@vtj/local": "^0.11.2",
|
"@vtj/local": "^0.11.5",
|
||||||
"@vtj/materials": "^0.11.2",
|
"@vtj/materials": "^0.11.5",
|
||||||
"@vtj/node": "0.11.1",
|
"@vtj/node": "0.11.2",
|
||||||
"@vtj/pro": "^0.11.2",
|
"@vtj/pro": "^0.11.5",
|
||||||
"@vtj/renderer": "^0.11.2",
|
"@vtj/renderer": "^0.11.5",
|
||||||
"@vtj/ui": "^0.11.2",
|
"@vtj/ui": "^0.11.5",
|
||||||
"@vtj/utils": "0.11.2",
|
"@vtj/utils": "0.11.5",
|
||||||
"@vtj/web": "^0.11.2",
|
"@vtj/web": "^0.11.5",
|
||||||
"axios": "^1.8.1",
|
"axios": "^1.8.1",
|
||||||
"element-plus": "^2.9.4",
|
"element-plus": "^2.9.4",
|
||||||
"licia-es": "^1.46.0",
|
"licia-es": "^1.46.0",
|
||||||
@ -38,7 +38,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/postmate": "catalog:",
|
"@types/postmate": "catalog:",
|
||||||
"@vtj/cli": "^0.11.1",
|
"@vtj/cli": "^0.11.2",
|
||||||
"vite": "catalog:",
|
"vite": "catalog:",
|
||||||
"vite-plugin-mkcert": "catalog:",
|
"vite-plugin-mkcert": "catalog:",
|
||||||
"vitest": "catalog:"
|
"vitest": "catalog:"
|
||||||
|
@ -1,35 +0,0 @@
|
|||||||
import path from 'node:path';
|
|
||||||
|
|
||||||
import { defineConfig, loadEnv } from '@farmfe/core';
|
|
||||||
import vue from '@vitejs/plugin-vue';
|
|
||||||
import mkcert from 'vite-plugin-mkcert';
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
export default defineConfig(({ mode }) => {
|
|
||||||
console.log('mode', mode);
|
|
||||||
const env = loadEnv(mode, process.cwd(), ['VITE_']);
|
|
||||||
const isDev = env.VITE_NODE_ENV === 'development';
|
|
||||||
|
|
||||||
return {
|
|
||||||
server: isDev
|
|
||||||
? {
|
|
||||||
port: Number(env.VITE_PORT),
|
|
||||||
cors: true,
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
// @ts-ignore coding
|
|
||||||
vitePlugins: [vue(), mkcert({ source: 'coding' })],
|
|
||||||
compilation: {
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': path.resolve(process.cwd(), 'src'),
|
|
||||||
$vtj: path.resolve(process.cwd(), '.vtj'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
define: {
|
|
||||||
// 注入环境变量到客户端
|
|
||||||
'process.env': JSON.stringify(env),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
});
|
|
@ -14,33 +14,30 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iframe-resizer/child": "^5.3.3",
|
"@iframe-resizer/child": "^5.3.3",
|
||||||
"@sentry/vue": "^9.5.0",
|
"@sentry/vue": "^9.7.0",
|
||||||
"@sy/web-vitals": "workspace:*",
|
"@sy/web-vitals": "workspace:*",
|
||||||
"@tanstack/vue-query": "^5.66.9",
|
"@tanstack/vue-query": "^5.69.0",
|
||||||
"@vtj/charts": "^0.11.2",
|
"@vtj/charts": "^0.11.5",
|
||||||
"@vtj/core": "^0.11.2",
|
"@vtj/core": "^0.11.5",
|
||||||
"@vtj/icons": "0.11.2",
|
"@vtj/icons": "0.11.5",
|
||||||
"@vtj/materials": "^0.11.2",
|
"@vtj/materials": "^0.11.5",
|
||||||
"@vtj/pro": "^0.11.2",
|
"@vtj/pro": "^0.11.5",
|
||||||
"@vtj/renderer": "^0.11.2",
|
"@vtj/renderer": "^0.11.5",
|
||||||
"@vtj/ui": "^0.11.2",
|
"@vtj/ui": "^0.11.5",
|
||||||
"@vtj/utils": "^0.11.2",
|
"@vtj/utils": "^0.11.5",
|
||||||
"@vtj/web": "^0.11.2",
|
"@vtj/web": "^0.11.5",
|
||||||
"axios": "catalog:",
|
"axios": "catalog:",
|
||||||
"core-js": "^3.40.0",
|
"core-js": "catalog:",
|
||||||
"element-plus": "catalog:",
|
"element-plus": "catalog:",
|
||||||
"licia-es": "catalog:",
|
"licia-es": "catalog:",
|
||||||
"postmate": "catalog:",
|
"postmate": "catalog:",
|
||||||
"rrweb": "2.0.0-alpha.4",
|
|
||||||
"vue": "catalog:",
|
"vue": "catalog:",
|
||||||
"vue-router": "catalog:"
|
"vue-router": "catalog:"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@farmfe/cli": "catalog:",
|
|
||||||
"@farmfe/core": "catalog:",
|
|
||||||
"@types/postmate": "catalog:",
|
"@types/postmate": "catalog:",
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "catalog:",
|
||||||
"@vtj/cli": "^0.11.1",
|
"@vtj/cli": "^0.11.2",
|
||||||
"vite": "catalog:",
|
"vite": "catalog:",
|
||||||
"vite-plugin-mkcert": "catalog:"
|
"vite-plugin-mkcert": "catalog:"
|
||||||
}
|
}
|
||||||
|
@ -10,22 +10,28 @@ import { LowCodeService } from './service';
|
|||||||
|
|
||||||
// 定义 wujie props 的类型
|
// 定义 wujie props 的类型
|
||||||
interface WujieProps {
|
interface WujieProps {
|
||||||
// 增加一个 axios 请求拦截器
|
|
||||||
interceptors?: {
|
interceptors?: {
|
||||||
request?: (config: any) => any;
|
request?: (config: any) => any;
|
||||||
response?: (response: any) => any;
|
response?: (response: any) => any;
|
||||||
};
|
};
|
||||||
accessToken?: string;
|
// 必填参数
|
||||||
|
fileId: string;
|
||||||
|
projectId: number | string;
|
||||||
|
// 可选参数
|
||||||
applicationId?: number | string;
|
applicationId?: number | string;
|
||||||
fileId?: string;
|
|
||||||
name?: string;
|
name?: string;
|
||||||
projectId?: number | string;
|
|
||||||
[key: string]: any;
|
[key: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 从 wujie props 获取数据,提供默认值
|
// 定义必要的初始化参数
|
||||||
const wujieProps: WujieProps = window.$wujie?.props;
|
interface InitParams {
|
||||||
console.log('wujie props:', wujieProps);
|
// 必填参数
|
||||||
|
fileId: string;
|
||||||
|
projectId: number | string;
|
||||||
|
// 可选参数
|
||||||
|
applicationId?: number | string;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
// 响应式状态
|
// 响应式状态
|
||||||
const renderer = ref();
|
const renderer = ref();
|
||||||
@ -33,29 +39,68 @@ const lowCodeService = new LowCodeService();
|
|||||||
const isLoading = ref(false);
|
const isLoading = ref(false);
|
||||||
const provider = ref(null);
|
const provider = ref(null);
|
||||||
const loadingInstance = ref(null);
|
const loadingInstance = ref(null);
|
||||||
|
const errorMessage = ref('');
|
||||||
|
const initParams = ref<InitParams | null>(null);
|
||||||
|
|
||||||
|
// 判断是否为wujie子应用
|
||||||
|
const isWujieSubApp = window.$wujie !== undefined;
|
||||||
|
|
||||||
|
// 从URL解析查询参数
|
||||||
|
const getParamsFromUrl = (): Partial<InitParams> => {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
return {
|
||||||
|
fileId: params.get('fileId') || undefined,
|
||||||
|
projectId: params.get('projectId') || undefined,
|
||||||
|
applicationId: params.get('applicationId') || undefined,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 按优先级获取初始化参数
|
||||||
|
const getInitParams = (): InitParams | null => {
|
||||||
|
// 1. 优先从wujie props获取
|
||||||
|
if (isWujieSubApp && window.$wujie?.props) {
|
||||||
|
const props = window.$wujie.props;
|
||||||
|
// 确保必填参数存在
|
||||||
|
if (props.fileId && props.projectId) {
|
||||||
|
console.log('使用wujie props初始化渲染器');
|
||||||
|
return props as InitParams;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 其次从URL参数获取
|
||||||
|
const urlParams = getParamsFromUrl();
|
||||||
|
if (urlParams.fileId && urlParams.projectId) {
|
||||||
|
console.log('使用URL参数初始化渲染器:', urlParams);
|
||||||
|
return urlParams as InitParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 都不满足,返回null
|
||||||
|
console.error('无法获取初始化参数');
|
||||||
|
errorMessage.value = '无法获取初始化参数,请检查无界配置或URL参数';
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 检查参数是否有效
|
||||||
|
const isValidParams = (params: InitParams | null): params is InitParams => {
|
||||||
|
return !!params && !!params.fileId && !!params.projectId;
|
||||||
|
};
|
||||||
|
|
||||||
// 初始化请求配置
|
// 初始化请求配置
|
||||||
const initRequestConfig = (token: string) => {
|
const initRequestConfig = () => {
|
||||||
if (!token) return;
|
// 处理请求拦截器
|
||||||
|
if (initParams.value?.interceptors?.request) {
|
||||||
if (wujieProps.interceptors?.request) {
|
request.useRequest(initParams.value.interceptors.request);
|
||||||
request.useRequest(wujieProps.interceptors.request);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (wujieProps.interceptors?.response) {
|
// 处理响应拦截器
|
||||||
request.useResponse(wujieProps.interceptors.response);
|
if (initParams.value?.interceptors?.response) {
|
||||||
|
request.useResponse(initParams.value.interceptors.response);
|
||||||
}
|
}
|
||||||
|
|
||||||
request.useRequest((req) => {
|
|
||||||
req.headers.set('Authorization', `Bearer ${token}`);
|
|
||||||
return req;
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 显示加载中
|
// 显示加载中
|
||||||
const showLoading = (text = '低代码文件加载中...') => {
|
const showLoading = (text = '低代码文件加载中...') => {
|
||||||
if (loadingInstance.value) return;
|
if (loadingInstance.value) return;
|
||||||
|
|
||||||
loadingInstance.value = ElLoading.service({ text });
|
loadingInstance.value = ElLoading.service({ text });
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -72,14 +117,21 @@ const initLowCodeEngine = async () => {
|
|||||||
// 如果已经初始化过,直接返回
|
// 如果已经初始化过,直接返回
|
||||||
if (provider.value) return provider.value;
|
if (provider.value) return provider.value;
|
||||||
|
|
||||||
|
// 检查参数是否有效
|
||||||
|
if (!isValidParams(initParams.value)) {
|
||||||
|
const error = new Error('缺少必要参数:fileId 和 projectId');
|
||||||
|
errorMessage.value = error.message;
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
// 初始化请求配置
|
// 初始化请求配置
|
||||||
initRequestConfig(wujieProps.accessToken);
|
initRequestConfig();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const { provider: lowCodeProvider, onReady } = createProvider({
|
const { provider: lowCodeProvider, onReady } = createProvider({
|
||||||
nodeEnv: import.meta.env.NODE_ENV,
|
nodeEnv: import.meta.env.NODE_ENV,
|
||||||
service: lowCodeService,
|
service: lowCodeService,
|
||||||
project: { id: Number(wujieProps.projectId) },
|
project: { id: Number(initParams.value.projectId) },
|
||||||
adapter: {
|
adapter: {
|
||||||
request,
|
request,
|
||||||
jsonp,
|
jsonp,
|
||||||
@ -90,6 +142,7 @@ const initLowCodeEngine = async () => {
|
|||||||
return { provider: lowCodeProvider, onReady };
|
return { provider: lowCodeProvider, onReady };
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('初始化低代码引擎失败:', error);
|
console.error('初始化低代码引擎失败:', error);
|
||||||
|
errorMessage.value = '初始化低代码引擎失败';
|
||||||
ElMessage.error('初始化低代码引擎失败');
|
ElMessage.error('初始化低代码引擎失败');
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
}
|
}
|
||||||
@ -97,6 +150,11 @@ const initLowCodeEngine = async () => {
|
|||||||
|
|
||||||
// 获取渲染组件
|
// 获取渲染组件
|
||||||
const getRenderComponent = async () => {
|
const getRenderComponent = async () => {
|
||||||
|
if (!isValidParams(initParams.value)) {
|
||||||
|
errorMessage.value = '缺少必要参数:fileId 和 projectId';
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
isLoading.value = true;
|
isLoading.value = true;
|
||||||
showLoading();
|
showLoading();
|
||||||
|
|
||||||
@ -111,12 +169,13 @@ const getRenderComponent = async () => {
|
|||||||
instance?.appContext.app.use(lowCodeProvider);
|
instance?.appContext.app.use(lowCodeProvider);
|
||||||
try {
|
try {
|
||||||
const renderComponent = await lowCodeProvider.getRenderComponent(
|
const renderComponent = await lowCodeProvider.getRenderComponent(
|
||||||
wujieProps.fileId,
|
initParams.value!.fileId,
|
||||||
);
|
);
|
||||||
console.log('渲染组件获取成功');
|
console.log('渲染组件获取成功');
|
||||||
resolve(renderComponent);
|
resolve(renderComponent);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取渲染组件失败:', error);
|
console.error('获取渲染组件失败:', error);
|
||||||
|
errorMessage.value = '获取渲染组件失败';
|
||||||
ElMessage.error('获取渲染组件失败');
|
ElMessage.error('获取渲染组件失败');
|
||||||
resolve(null);
|
resolve(null);
|
||||||
}
|
}
|
||||||
@ -133,9 +192,13 @@ const getRenderComponent = async () => {
|
|||||||
|
|
||||||
// 使用 useQuery 管理渲染组件
|
// 使用 useQuery 管理渲染组件
|
||||||
const { data: rendererComponent, isError } = useQuery({
|
const { data: rendererComponent, isError } = useQuery({
|
||||||
queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
|
queryKey: [
|
||||||
|
'getRenderer',
|
||||||
|
initParams.value?.fileId,
|
||||||
|
initParams.value?.projectId,
|
||||||
|
],
|
||||||
queryFn: getRenderComponent,
|
queryFn: getRenderComponent,
|
||||||
enabled: false, // 初始不自动执行
|
enabled: false, // 初始不自动执行,改为手动控制
|
||||||
retry: 1, // 失败后重试一次
|
retry: 1, // 失败后重试一次
|
||||||
staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
|
staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
|
||||||
});
|
});
|
||||||
@ -150,15 +213,29 @@ watch(rendererComponent, (newVal) => {
|
|||||||
|
|
||||||
// 向父应用发送状态消息
|
// 向父应用发送状态消息
|
||||||
const notifyParent = (event: string, data?: any) => {
|
const notifyParent = (event: string, data?: any) => {
|
||||||
if (window.$wujie?.bus) {
|
if (isWujieSubApp && window.$wujie?.bus) {
|
||||||
window.$wujie.bus.$emit(event, data);
|
window.$wujie.bus.$emit(event, data);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 组件挂载后执行初始化
|
// 组件挂载后执行初始化
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
// 通知父应用已准备就绪
|
// 通知父应用已准备就绪(如果是wujie子应用)
|
||||||
notifyParent('ready', 'y-code-renderer is ready');
|
if (isWujieSubApp) {
|
||||||
|
notifyParent('ready', 'y-code-renderer is ready');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取初始化参数 - 在挂载时执行一次
|
||||||
|
initParams.value = getInitParams();
|
||||||
|
const paramsValid = isValidParams(initParams.value);
|
||||||
|
|
||||||
|
if (!paramsValid) {
|
||||||
|
errorMessage.value = '缺少必要参数:fileId 和 projectId';
|
||||||
|
if (isWujieSubApp) {
|
||||||
|
notifyParent('render-fail', errorMessage.value);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await initLowCodeEngine();
|
await initLowCodeEngine();
|
||||||
@ -166,13 +243,19 @@ onMounted(async () => {
|
|||||||
const component = await getRenderComponent();
|
const component = await getRenderComponent();
|
||||||
if (component) {
|
if (component) {
|
||||||
renderer.value = component;
|
renderer.value = component;
|
||||||
notifyParent('render-success');
|
if (isWujieSubApp) {
|
||||||
|
notifyParent('render-success');
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
notifyParent('render-fail', 'Failed to get component');
|
if (isWujieSubApp) {
|
||||||
|
notifyParent('render-fail', 'Failed to get component');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('初始化过程出错:', error);
|
console.error('初始化过程出错:', error);
|
||||||
notifyParent('render-fail', error);
|
if (isWujieSubApp) {
|
||||||
|
notifyParent('render-fail', error);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -182,16 +265,20 @@ onMounted(async () => {
|
|||||||
<component
|
<component
|
||||||
:is="renderer"
|
:is="renderer"
|
||||||
v-if="renderer"
|
v-if="renderer"
|
||||||
:ctx-props="wujieProps"
|
:ctx-props="initParams"
|
||||||
v-bind="wujieProps"
|
v-bind="initParams"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div v-else-if="!isValidParams(initParams)" class="error-message">
|
||||||
|
{{ errorMessage || '缺少必要参数:fileId 和 projectId' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-else-if="!isLoading && isError" class="error-message">
|
<div v-else-if="!isLoading && isError" class="error-message">
|
||||||
组件加载失败,请检查参数和网络连接
|
{{ errorMessage || '组件加载失败,请检查参数和网络连接' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="!isLoading" class="error-message">
|
<div v-else-if="!isLoading" class="error-message">
|
||||||
组件加载失败,请检查控制台日志
|
{{ errorMessage || '组件加载失败,请检查控制台日志' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,186 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
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 Postmate from 'postmate';
|
|
||||||
|
|
||||||
import { LowCodeService } from './service';
|
|
||||||
|
|
||||||
// 文件加载时,清空一次 sessionStorage
|
|
||||||
sessionStorage.clear();
|
|
||||||
|
|
||||||
// 响应式状态
|
|
||||||
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);
|
|
||||||
|
|
||||||
// 从 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化 Postmate 握手
|
|
||||||
const initPostmateHandshake = async () => {
|
|
||||||
const model = new Postmate.Model({
|
|
||||||
sayHi: (data: any) => {
|
|
||||||
console.log('sayHi', data);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return model.then((parent) => {
|
|
||||||
console.log('parent', parent);
|
|
||||||
// 只获取 accessToken
|
|
||||||
accessToken.value = parent.model.accessToken || '';
|
|
||||||
sessionStorage.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 initRequestConfig = (token: string) => {
|
|
||||||
request.useRequest((req) => {
|
|
||||||
req.headers.set('Authorization', `Bearer ${token}`);
|
|
||||||
return req;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 初始化低代码引擎 - 只初始化一次
|
|
||||||
const initLowCodeEngine = async () => {
|
|
||||||
// 如果已经初始化过,直接返回
|
|
||||||
if (provider.value) return provider.value;
|
|
||||||
|
|
||||||
const token =
|
|
||||||
accessToken.value || sessionStorage.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(lowCodeProvider);
|
|
||||||
try {
|
|
||||||
const renderComponent = await lowCodeProvider.getRenderComponent(
|
|
||||||
urlParams.value.fileId,
|
|
||||||
);
|
|
||||||
console.log('渲染组件获取成功');
|
|
||||||
resolve(renderComponent);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取渲染组件失败:', error);
|
|
||||||
resolve(null);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} 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>
|
|
@ -1,206 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
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, ElMessage } from 'element-plus';
|
|
||||||
|
|
||||||
import { LowCodeService } from './service';
|
|
||||||
|
|
||||||
// 解析 url 参数
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const fileId = urlParams.get('fileId');
|
|
||||||
console.log('urlParams-fileId', fileId);
|
|
||||||
const projectId = urlParams.get('projectId');
|
|
||||||
console.log('urlParams-projectId', projectId);
|
|
||||||
|
|
||||||
// 定义 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 || {
|
|
||||||
fileId,
|
|
||||||
projectId,
|
|
||||||
};
|
|
||||||
console.log('wujie props:', wujieProps);
|
|
||||||
|
|
||||||
// 文件加载时,清空一次 sessionStorage
|
|
||||||
sessionStorage.clear();
|
|
||||||
|
|
||||||
// 响应式状态
|
|
||||||
const renderer = ref();
|
|
||||||
const lowCodeService = new LowCodeService();
|
|
||||||
const isLoading = ref(false);
|
|
||||||
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 initLowCodeEngine = async () => {
|
|
||||||
// 如果已经初始化过,直接返回
|
|
||||||
if (provider.value) return provider.value;
|
|
||||||
|
|
||||||
// 初始化请求配置
|
|
||||||
initRequestConfig(wujieProps.accessToken);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { provider: lowCodeProvider, onReady } = createProvider({
|
|
||||||
nodeEnv: import.meta.env.NODE_ENV,
|
|
||||||
service: lowCodeService,
|
|
||||||
project: { id: Number(wujieProps.projectId) },
|
|
||||||
adapter: {
|
|
||||||
request,
|
|
||||||
jsonp,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
provider.value = { provider: lowCodeProvider, onReady };
|
|
||||||
return { provider: lowCodeProvider, onReady };
|
|
||||||
} catch (error) {
|
|
||||||
console.error('初始化低代码引擎失败:', error);
|
|
||||||
ElMessage.error('初始化低代码引擎失败');
|
|
||||||
return Promise.reject(error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 获取渲染组件
|
|
||||||
const getRenderComponent = async () => {
|
|
||||||
isLoading.value = true;
|
|
||||||
showLoading();
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. 确保低代码引擎已初始化
|
|
||||||
const { provider: lowCodeProvider, onReady } = await initLowCodeEngine();
|
|
||||||
|
|
||||||
// 2. 获取渲染组件
|
|
||||||
return new Promise<any>((resolve) => {
|
|
||||||
onReady(async () => {
|
|
||||||
const instance = getCurrentInstance();
|
|
||||||
instance?.appContext.app.use(lowCodeProvider);
|
|
||||||
try {
|
|
||||||
const renderComponent = await lowCodeProvider.getRenderComponent(
|
|
||||||
wujieProps.fileId,
|
|
||||||
);
|
|
||||||
console.log('渲染组件获取成功');
|
|
||||||
resolve(renderComponent);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取渲染组件失败:', error);
|
|
||||||
ElMessage.error('获取渲染组件失败');
|
|
||||||
resolve(null);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取渲染组件过程出错:', error);
|
|
||||||
return null;
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false;
|
|
||||||
hideLoading();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 使用 useQuery 管理渲染组件
|
|
||||||
const { data: rendererComponent, isError } = useQuery({
|
|
||||||
queryKey: ['getRenderer', wujieProps.fileId, wujieProps.projectId],
|
|
||||||
queryFn: getRenderComponent,
|
|
||||||
enabled: false, // 初始不自动执行
|
|
||||||
retry: 1, // 失败后重试一次
|
|
||||||
staleTime: 1000 * 60 * 5, // 5分钟内不重新获取
|
|
||||||
});
|
|
||||||
|
|
||||||
// 当组件挂载时,将渲染器组件赋值给 renderer
|
|
||||||
watch(rendererComponent, (newVal) => {
|
|
||||||
if (newVal) {
|
|
||||||
renderer.value = newVal;
|
|
||||||
console.log('渲染器组件已更新');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 向父应用发送状态消息
|
|
||||||
const notifyParent = (event: string, data?: any) => {
|
|
||||||
if (window.$wujie?.bus) {
|
|
||||||
window.$wujie.bus.$emit(event, data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 组件挂载后执行初始化
|
|
||||||
onMounted(async () => {
|
|
||||||
// 通知父应用已准备就绪
|
|
||||||
notifyParent('ready', 'y-code-renderer is ready');
|
|
||||||
|
|
||||||
try {
|
|
||||||
await initLowCodeEngine();
|
|
||||||
|
|
||||||
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 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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.renderer-container {
|
|
||||||
padding: 20px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
margin-top: 50px;
|
|
||||||
color: red;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
@ -33,7 +33,6 @@
|
|||||||
"wujie-vue2": "1.0.22"
|
"wujie-vue2": "1.0.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/axios": "0.14.4",
|
|
||||||
"@vitejs/plugin-vue": "catalog:",
|
"@vitejs/plugin-vue": "catalog:",
|
||||||
"axios": "catalog:",
|
"axios": "catalog:",
|
||||||
"vite-plugin-dts": "catalog:",
|
"vite-plugin-dts": "catalog:",
|
||||||
|
@ -32,8 +32,6 @@
|
|||||||
"wujie-vue3": "1.0.22"
|
"wujie-vue3": "1.0.22"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/axios": "0.14.4",
|
|
||||||
"@types/vue-router": "2.0.0",
|
|
||||||
"@vitejs/plugin-vue": "catalog:",
|
"@vitejs/plugin-vue": "catalog:",
|
||||||
"axios": "catalog:",
|
"axios": "catalog:",
|
||||||
"vite-plugin-dts": "catalog:",
|
"vite-plugin-dts": "catalog:",
|
||||||
|
821
pnpm-lock.yaml
generated
821
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user