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

packages/renderer-adapter/wujie-vue2/package.json

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

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

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

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

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