feat: 各应用的设计器隔离

This commit is contained in:
wangxuefeng 2025-03-19 16:11:29 +08:00
parent a4c5f633cf
commit 9a2f29e3e4
11 changed files with 82 additions and 53 deletions

View File

@ -5,8 +5,8 @@ VITE_NODE_ENV = 'development'
VITE_BASE_URL = /
VITE_PORT = 10011
# VITE_BASE_API_URL = 'https://custom-chart-pre-api.shiyue.com/'
VITE_BASE_API_URL = 'https://custom-chart-api.shiyuegame.com/'
VITE_BASE_API_URL = 'https://custom-chart-pre-api.shiyue.com/'
# VITE_BASE_API_URL = 'https://custom-chart-api.shiyuegame.com/'
VITE_DEBUG_MODE = true

View File

@ -25,7 +25,7 @@ onMounted(async () => {
await handshake.then((parent) => {
parent.emit('sync-context', 'y-code-designer is ready');
Object.assign(model, parent.model);
// console.log('get parent model', model);
console.log('get parent model', model);
userStore.setToken(model.accessToken);
localStorage.setItem('y-code-access-token', model.accessToken);
request.useRequest((req) => {
@ -49,9 +49,7 @@ onMounted(async () => {
widgetManager.set('Previewer', {
props: {
path: (block: any) => {
console.log('block', block);
const pathname = location.pathname;
console.log('pathname', pathname);
return `${pathname}#/preview/${block.id}`;
}
}
@ -79,6 +77,5 @@ onMounted(async () => {
.designer-container {
width: 100%;
height: 100%;
min-height: calc(100vh - 126px);
}
</style>

View File

@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';
import { VITE_RENDERER_URL } from '#/constants';
import { LOW_CODE_PROJECT_ID, VITE_RENDERER_URL } from '#/constants';
const moduleName = 'acl';
@ -18,7 +18,7 @@ const routes: Array<RouteRecordRaw> = [
children: [
{
path: 'list',
name: `${moduleName}-list`,
name: 'AclList',
meta: {
hideInMenu: true,
title: '权限列表',
@ -30,13 +30,13 @@ const routes: Array<RouteRecordRaw> = [
url: `${VITE_RENDERER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: '1hsd0407hf',
projectId: '4',
projectId: LOW_CODE_PROJECT_ID,
degrade: false,
},
},
{
path: 'user',
name: `${moduleName}-user`,
name: 'AclUser',
meta: {
title: '用户列表',
keepAlive: true,
@ -47,7 +47,7 @@ const routes: Array<RouteRecordRaw> = [
url: `${VITE_RENDERER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: '7pfu5radx',
projectId: '4',
projectId: LOW_CODE_PROJECT_ID,
degrade: false,
},
},

View File

@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';
import { VITE_RENDERER_URL } from '#/constants';
import { LOW_CODE_PROJECT_ID, VITE_RENDERER_URL } from '#/constants';
import { router } from '#/router';
// 微前端路由
@ -11,7 +11,7 @@ const moduleName = 'application';
const routes: Array<RouteRecordRaw> = [
{
path: '/application',
name: moduleName,
name: 'Application',
meta: {
title: '应用管理',
icon: 'ant-design:appstore-outlined',
@ -19,7 +19,7 @@ const routes: Array<RouteRecordRaw> = [
children: [
{
path: 'list',
name: `${moduleName}-list`,
name: 'ApplicationList',
meta: {
title: '应用列表',
keepAlive: false,
@ -31,8 +31,8 @@ const routes: Array<RouteRecordRaw> = [
url: `${VITE_RENDERER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: 'b91n1y9yr',
projectId: '4',
getRouter: () => router,
projectId: LOW_CODE_PROJECT_ID,
router,
route,
degrade: false,
height: '100%',

View File

@ -3,7 +3,13 @@ import type { RouteRecordRaw } from 'vue-router';
import RendererAdapter from '@sy/vue3-renderer-adapter';
import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';
import { VITE_DESIGNER_URL, VITE_RENDERER_URL, VITE_V1_URL } from '#/constants';
import {
isDevMode,
LOW_CODE_PROJECT_ID,
VITE_DESIGNER_URL,
VITE_RENDERER_URL,
VITE_V1_URL,
} from '#/constants';
const moduleName = 'micro';
@ -17,34 +23,43 @@ const routes: RouteRecordRaw[] = [
},
children: [
{
path: 'designer',
name: `${moduleName}-designer`,
path: 'admin-designer',
name: 'AdminDesigner',
meta: {
// keepAlive: false,
title: '低代码编辑器',
hideInMenu: !isDevMode,
title: '平台设计器',
icon: 'ant-design:edit-outlined',
},
// component: WujieVueRendererAdapter,
// props: {
// url: `${VITE_DESIGNER_URL}`,
// fileId: '4g4mz6qi8u',
// projectId: 4,
// name: '4g4mz6qi8u',
// sync: false,
// degrade: false,
// },
component: RendererAdapter,
props: {
url: `${VITE_DESIGNER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: '4g4mz6qi8u',
projectId: '4',
name: 'y-code-designer',
props: (route) => {
return {
url: `${VITE_DESIGNER_URL}`,
projectId: LOW_CODE_PROJECT_ID,
name: 'admin-designer',
route,
};
},
},
{
path: 'y-code-designer',
name: 'YCodeDesigner',
meta: {
title: '低代码设计器',
icon: 'ant-design:edit-outlined',
},
component: RendererAdapter,
props: (route) => {
return {
url: `${VITE_DESIGNER_URL}`,
projectId: route.query.projectId,
name: `y-code-designer-${route.params.projectId}`,
route,
};
},
},
{
path: 'y-code-v1',
name: `${moduleName}-y-code-v1`,
name: 'YCodeV1',
meta: {
keepAlive: false,
title: '悦码 1.0',
@ -68,7 +83,7 @@ const routes: RouteRecordRaw[] = [
props: {
url: `${VITE_RENDERER_URL}`,
fileId: '45ud9h6n3',
projectId: 4,
projectId: LOW_CODE_PROJECT_ID,
degrade: false,
name: '45ud9h6n3',
},

View File

@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router';
import WujieVueRendererAdapter from '@sy/wujie-vue3-renderer-adapter';
import { VITE_RENDERER_URL } from '#/constants';
import { LOW_CODE_PROJECT_ID, VITE_RENDERER_URL } from '#/constants';
import { router } from '#/router';
// 微前端路由
@ -19,10 +19,9 @@ const routes: Array<RouteRecordRaw> = [
children: [
{
path: 'list',
name: `${moduleName}-list`,
name: 'ProjectList',
meta: {
title: '项目列表',
keepAlive: true,
icon: 'ant-design:list',
hideInMenu: true,
},
@ -32,20 +31,18 @@ const routes: Array<RouteRecordRaw> = [
url: `${VITE_RENDERER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: '4g4mz6qi8u',
projectId: '4',
// degrade: true,
getRouter: () => router,
projectId: LOW_CODE_PROJECT_ID,
router,
route,
};
},
},
{
path: 'DSLFileList',
name: `${moduleName}-DSL-file-list`,
name: 'DSLFileList',
meta: {
hideInMenu: true,
title: 'dsl 文件列表',
keepAlive: false,
icon: 'ant-design:file',
},
component: WujieVueRendererAdapter,
@ -54,7 +51,7 @@ const routes: Array<RouteRecordRaw> = [
url: `${VITE_RENDERER_URL}`,
accessToken: localStorage.getItem('y-code-access-token'),
fileId: '45ucatjys',
projectId: '4',
projectId: LOW_CODE_PROJECT_ID,
getRouter: () => router,
route,
};

View File

@ -10,6 +10,11 @@ import { LowCodeService } from './service';
// wujie props
interface WujieProps {
// axios
interceptors?: {
request?: (config: any) => any;
response?: (response: any) => any;
};
accessToken?: string;
applicationId?: number | string;
fileId?: string;
@ -33,6 +38,14 @@ const loadingInstance = ref(null);
const initRequestConfig = (token: string) => {
if (!token) return;
if (wujieProps.interceptors?.request) {
request.useRequest(wujieProps.interceptors.request);
}
if (wujieProps.interceptors?.response) {
request.useResponse(wujieProps.interceptors.response);
}
request.useRequest((req) => {
req.headers.set('Authorization', `Bearer ${token}`);
return req;
@ -166,7 +179,12 @@ onMounted(async () => {
<template>
<div class="renderer-container">
<component :is="renderer" v-if="renderer" v-bind="wujieProps" />
<component
:is="renderer"
v-if="renderer"
:ctx-props="wujieProps"
v-bind="wujieProps"
/>
<div v-else-if="!isLoading && isError" class="error-message">
组件加载失败请检查参数和网络连接

View File

@ -16,8 +16,9 @@ export class LowCodeService extends BaseService {
public async init(project: ProjectSchema) {
// @ts-ignore 忽略错误
const remoteProject = await getProject(project.id);
const model = new ProjectModel(remoteProject);
const dsl = model.toDsl();
return dsl;
const projectModel = new ProjectModel(remoteProject);
const projectDSL = projectModel.toDsl();
console.log('project dsl', projectDSL);
return projectDSL;
}
}

View File

@ -85,7 +85,7 @@ function transformComponent(
</script>
<template>
<div class="relative h-full">
<div class="relative h-full" style="height: calc(100vh - 126px)">
<IFrameRouterView />
<RouterView v-slot="{ Component, route }">
<Transition :name="getTransitionName(route)" appear mode="out-in">

View File

@ -63,7 +63,7 @@ const initPostmate = async () => {
console.log('ctx.parent', ctx.parent);
console.log('ctx.parent.innerHeight', ctx.parent.innerHeight);
ctx.frame.style.height = `${ctx.parent.innerHeight - 38 - 88}px`;
ctx.frame.style.minHeight = `800px`;
// ctx.frame.style.minHeight = `800px`;
ctx.frame.style.width = '100%';
// @ts-ignore console
console.log(`${props.name} 连接成功`, ctx);

View File

@ -20,6 +20,7 @@ const props = withDefaults(
payload?: Record<string, any>;
projectId: number;
route: RouteRecordRaw;
router: Router;
sync: boolean;
url: string;
}>(),