wangxuefeng/low-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(renderer-adapter) : 增加 vue2 渲染适配器

Browse Source
This commit is contained in:
wangxuefeng 2025-03-21 09:49:54 +08:00
parent 4e584fccf3
commit c3ac1584c3
4 changed files with 164 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/renderer-adapter/wujie-vue2/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@sy/wujie-vue3-renderer-adapter",
"version": "1.0.0-alpha.2",
"description": "wujie-vue3 ycode renderer adapter",
"name": "@sy/wujie-vue2-renderer-adapter",
"version": "1.0.0-alpha.1",
"description": "wujie-vue2 ycode renderer adapter",
"type": "module",
"scripts": {
"build": "vite build"
@ -27,13 +27,13 @@
"dependencies": {
"licia-es": "catalog:",
"vue": "2.7.16",
"vue-property-decorator": "9.1.2",
"wujie-vue2": "1.0.22"
},
"devDependencies": {
"@types/axios": "0.14.4",
"@vitejs/plugin-vue": "catalog:",
"axios": "catalog:",
"vite-plugin-dts": "catalog:",
"vue-router": ""
"vite-plugin-dts": "catalog:"
}
}

205
packages/renderer-adapter/wujie-vue2/src/adapter.vue
View File

@ -1,126 +1,111 @@
<script setup lang="ts">
import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
<!-- eslint-disable -->
<script lang="ts">
import { defineComponent } from 'vue';
import type { Router, RouteRecordRaw } from 'vue-router';
import { onBeforeUnmount, onMounted } from 'vue';
import WujieVue from 'wujie-vue3';
import WujieVue from 'wujie-vue2';
// @ts-ignore ignore the type error
import { version } from '/package.json';
// 定义拦截器类型
interface AxiosInterceptors {
request?: {
onFulfilled?: (
config: InternalAxiosRequestConfig,
) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
onRejected?: (error: any) => any;
};
response?: {
onFulfilled?: (
response: AxiosResponse,
) => AxiosResponse | Promise<AxiosResponse>;
onRejected?: (error: any) => any;
};
}
const props = withDefaults(
defineProps<{
[key: string]: any;
applicationId: number;
degrade?: boolean;
fileId: number | string;
interceptors?: AxiosInterceptors;
name?: string;
// 传递给子应用的参数 payload
payload?: Record<string, any>;
projectId: number;
route?: RouteRecordRaw;
router?: Router;
sync?: boolean;
url?: string;
}>(),
{
// 默认 wujie 降级，能避免很多兼容问题
degrade: true,
// 默认不使用拦截器
interceptors: () => ({}),
// 默认不使用 name
name: undefined,
// 默认不使用 payload
payload: () => ({}),
// 默认不使用 route
route: undefined,
// 默认不使用 router
router: undefined,
sync: true,
url: 'https://y-code-renderer.shiyue.com',
export default defineComponent({
name: 'WujieAdapter',
computed: {
finalUrl() {
return `${this.url}?fileId=${this.fileId}&projectId=${this.projectId}&applicationId=${this.applicationId}`;
},
subAppProps() {
return {
...this.$props,
adapterInfo: {
version,
},
};
},
},
);
const { bus } = WujieVue;
// 生命周期钩子
const beforeLoad = (appWindow: Window) => {
console.log(`${props.name} 开始加载`, appWindow);
};
const afterMount = (appWindow: Window) => {
console.log(`${props.name} 加载完成`, appWindow);
};
// 事件处理
const handleMessage = (data: any) => {
console.log(`${props.name} 收到子应用消息:`, data);
};
// 准备传递给子应用的数据
const subAppProps = {
...props,
adapterInfo: {
version,
beforeUnmount() {
const { bus } = WujieVue;
bus.$off('message', this.handleMessage);
bus.$off('ready', this.handleReady);
bus.$off('render-success', this.handleRenderSuccess);
bus.$off('render-fail', this.handleRenderFail);
},
methods: {
afterMount(appWindow: any) {
console.log(`${this.name || this.fileId} 加载完成`, appWindow);
},
beforeLoad(appWindow: any) {
console.log(`${this.name || this.fileId} 开始加载`, appWindow);
},
handleMessage(data: any) {
console.log(`${this.name || this.fileId} 收到子应用消息:`, data);
},
handleReady(data: any) {
console.log(`${this.name || this.fileId} 子应用就绪:`, data);
},
handleRenderFail(error: any) {
console.error(`${this.name || this.fileId} 子应用渲染失败:`, error);
},
handleRenderSuccess() {
console.log(`${this.name || this.fileId} 子应用渲染成功`);
},
},
mounted() {
const { bus } = WujieVue;
bus.$on('message', this.handleMessage);
bus.$on('ready', this.handleReady);
bus.$on('render-success', this.handleRenderSuccess);
bus.$on('render-fail', this.handleRenderFail);
},
props: {
applicationId: {
required: true,
type: Number,
},
degrade: {
default: true,
type: Boolean,
},
fileId: {
required: true,
type: [Number, String],
},
interceptors: {
default: () => ({}),
type: Object,
},
name: {
type: String,
},
payload: {
default: () => ({}),
type: Object,
},
projectId: {
required: true,
type: Number,
},
route: {
type: Object,
},
router: {
type: Object,
},
sync: {
default: true,
type: Boolean,
},
url: {
default: 'https://y-code-renderer.shiyue.com',
type: String,
},
},
};
// 监听子应用的事件
const handleReady = (data: any) => {
console.log(`${props.name} 子应用就绪:`, data);
// 可以在这里执行一些操作
};
const handleRenderSuccess = () => {
console.log(`${props.name} 子应用渲染成功`);
// 通知父应用
};
const handleRenderFail = (error: any) => {
console.error(`${props.name} 子应用渲染失败:`, 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>
<WujieVue
:name="name || fileId"
:url="url"
:url="finalUrl"
:sync="sync"
width="100%"
height="100%"

8
packages/renderer-adapter/wujie-vue3/src/adapter.vue
View File

@ -3,7 +3,7 @@ import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import type { Router, RouteRecordRaw } from 'vue-router';
import { onBeforeUnmount, onMounted } from 'vue';
import { computed, onBeforeUnmount, onMounted } from 'vue';
import WujieVue from 'wujie-vue3';
@ -84,6 +84,10 @@ const subAppProps = {
},
};
const finalUrl = computed(() => {
return `${props.url}?fileId=${props.fileId}&projectId=${props.projectId}&applicationId=${props.applicationId}`;
});
// 监听子应用的事件
const handleReady = (data: any) => {
console.log(`${props.name} 子应用就绪:`, data);
@ -120,7 +124,7 @@ onBeforeUnmount(() => {
<template>
<WujieVue
:name="name || fileId"
:url="url"
:url="finalUrl"
:sync="sync"
width="100%"
height="100%"

58
pnpm-lock.yaml generated
View File

@ -1954,6 +1954,34 @@ importers:
specifier: 'catalog:'
version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))
packages/renderer-adapter/wujie-vue2:
dependencies:
licia-es:
specifier: 'catalog:'
version: 1.47.0
vue:
specifier: ^3.5.13
version: 3.5.13(typescript@5.8.2)
vue-property-decorator:
specifier: 9.1.2
version: 9.1.2(vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
wujie-vue2:
specifier: 1.0.22
version: 1.0.22(vue@3.5.13(typescript@5.8.2))
devDependencies:
'@types/axios':
specifier: 0.14.4
version: 0.14.4
'@vitejs/plugin-vue':
specifier: 'catalog:'
version: 5.2.3(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
axios:
specifier: 'catalog:'
version: 1.8.3(debug@4.4.0)
vite-plugin-dts:
specifier: 'catalog:'
version: 4.5.3(@types/node@22.13.10)(rollup@4.36.0)(typescript@5.8.2)(vite@6.2.2(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.86.0)(terser@5.39.0)(yaml@2.7.0))
packages/renderer-adapter/wujie-vue3:
dependencies:
licia-es:
@ -12695,6 +12723,11 @@ packages:
vscode-uri@3.1.0:
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
vue-class-component@7.2.6:
resolution: {integrity: sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==}
peerDependencies:
vue: ^3.5.13
vue-component-type-helpers@2.2.8:
resolution: {integrity: sha512-4bjIsC284coDO9om4HPA62M7wfsTvcmZyzdfR0aUlFXqq4tXxM1APyXpNVxPC8QazKw9OhmZNHBVDA6ODaZsrA==}
@ -12729,6 +12762,12 @@ packages:
peerDependencies:
vue: ^3.5.13
vue-property-decorator@9.1.2:
resolution: {integrity: sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==}
peerDependencies:
vue: ^3.5.13
vue-class-component: '*'
vue-router@4.5.0:
resolution: {integrity: sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==}
peerDependencies:
@ -12983,6 +13022,11 @@ packages:
utf-8-validate:
optional: true
wujie-vue2@1.0.22:
resolution: {integrity: sha512-G+5B4y4C6NwYy31QL9pR5m+1BvQWSmgbQzFQdLEAJhFydS9dizQAgNK1VPfCBxSXM3jz2xfQz75WpE4aX4Jqdw==}
peerDependencies:
vue: ^3.5.13
wujie-vue3@1.0.22:
resolution: {integrity: sha512-/FD52+3rEg4vQb6EhSq+V9WMhaHYyVliUsVDBIzePcX0yUsep+4oC8r3EmyeS2dfEl3DCmMwLz5MnBGL3c4Msw==}
peerDependencies:
@ -26050,6 +26094,10 @@ snapshots:
vscode-uri@3.1.0: {}
vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)):
dependencies:
vue: 3.5.13(typescript@5.8.2)
vue-component-type-helpers@2.2.8: {}
vue-demi@0.14.10(vue@3.5.13(typescript@5.8.2)):
@ -26095,6 +26143,11 @@ snapshots:
clipboard: 2.0.11
vue: 3.5.13(typescript@5.8.2)
vue-property-decorator@9.1.2(vue-class-component@7.2.6(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2)):
dependencies:
vue: 3.5.13(typescript@5.8.2)
vue-class-component: 7.2.6(vue@3.5.13(typescript@5.8.2))
vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)):
dependencies:
'@vue/devtools-api': 6.6.4
@ -26429,6 +26482,11 @@ snapshots:
ws@8.18.1: {}
wujie-vue2@1.0.22(vue@3.5.13(typescript@5.8.2)):
dependencies:
vue: 3.5.13(typescript@5.8.2)
wujie: 1.0.22
wujie-vue3@1.0.22(vue@3.5.13(typescript@5.8.2)):
dependencies:
vue: 3.5.13(typescript@5.8.2)