feat: 各应用的设计器隔离

apps/designer/.env.development

@@ -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-pre-api.shiyue.com/'
-VITE_BASE_API_URL = 'https://custom-chart-api.shiyuegame.com/'
+# VITE_BASE_API_URL = 'https://custom-chart-api.shiyuegame.com/'
 
 VITE_DEBUG_MODE = true
 

apps/designer/src/views/index.vue

@@ -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>

apps/platform/src/router/routes/modules/acl.ts

@@ -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,
         },
       },

apps/platform/src/router/routes/modules/application.ts

@@ -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',
+            projectId: LOW_CODE_PROJECT_ID,
-            getRouter: () => router,
+            router,
             route,
             degrade: false,
             height: '100%',

apps/platform/src/router/routes/modules/micro.ts

@@ -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',
+        path: 'admin-designer',
-        name: `${moduleName}-designer`,
+        name: 'AdminDesigner',
         meta: {
-          // keepAlive: false,
+          hideInMenu: !isDevMode,
-          title: '低代码编辑器',
+          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: {
+        props: (route) => {
-          url: `${VITE_DESIGNER_URL}`,
+          return {
-          accessToken: localStorage.getItem('y-code-access-token'),
+            url: `${VITE_DESIGNER_URL}`,
-          fileId: '4g4mz6qi8u',
+            projectId: LOW_CODE_PROJECT_ID,
-          projectId: '4',
+            name: 'admin-designer',
-          name: 'y-code-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',
         },

apps/platform/src/router/routes/modules/project.ts

@@ -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',
+            projectId: LOW_CODE_PROJECT_ID,
-            // degrade: true,
+            router,
-            getRouter: () => 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,
           };

apps/renderer/src/App.vue

@@ -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">
       组件加载失败，请检查参数和网络连接

apps/renderer/src/service/index.ts

@@ -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 projectModel = new ProjectModel(remoteProject);
-    const dsl = model.toDsl();
+    const projectDSL = projectModel.toDsl();
-    return dsl;
+    console.log('project dsl', projectDSL);
+    return projectDSL;
   }
 }

packages/effects/layouts/src/basic/content/content.vue

@@ -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">

packages/renderer-adapter/vue3/src/adapter.vue

@@ -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);

packages/renderer-adapter/wujie-vue3/src/adapter.vue

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