feat: 编辑器预览功能

apps/designer/src/App.vue

@@ -1,38 +1,12 @@
 <template>
-  <div class="designer-container" ref="container"></div>
+  <el-config-provider :locale="zhCn">
+    <Suspense>
+      <router-view></router-view>
+    </Suspense>
+  </el-config-provider>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Engine, widgetManager, type ProjectModel } from '@vtj/pro';
-import { ElButton } from 'element-plus';
-
-import { StorageService } from '@/server';
-
-const container = ref();
-const service = new StorageService();
-const engine = new Engine({
-  container,
-  service,
-  project: {
-    id: 'test',
-    name: '测试'
-  }
-});
-
-widgetManager.set('Previewer', {
-  props: {
-    path: (block: any) => {
-      const pathname = location.pathname;
-      return `${pathname}#/preview/${block.id}`;
-    }
-  }
-});
+import { ElConfigProvider } from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
 </script>
-
-<style scoped>
-.designer-container {
-  height: 100%;
-  width: 100%;
-}
-</style>

apps/designer/src/contants.ts

@@ -0,0 +1 @@
+export const ACCESS_STORAGE_KEY = 'RRO_IDE_ACCESS_STORAGE__';

apps/designer/src/main.ts

@@ -1,8 +1,10 @@
 import { createApp } from 'vue';
 import router from './router';
 import App from './App.vue';
+import ElementPlus from 'element-plus';
 import './style/index.scss';
 
 const app = createApp(App);
 app.use(router);
+app.use(ElementPlus);
 app.mount('#app');

apps/designer/src/router.ts

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('./views/index.vue')
+  },
+  {
+    path: '/preview/:id',
+    name: 'preview',
+    component: () => import('./views/preview.vue')
+  }
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+});
+
+export default router;

apps/designer/src/style/index.scss

@@ -9,3 +9,7 @@ body,
   height: 100%;
   overflow: hidden;
 }
+
+#vtjLink {
+  display: none;
+}

apps/designer/src/views/draw.vue

@@ -1,24 +0,0 @@
-<template>
-  <div ref="container"></div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { Engine } from '@vtj/pro';
-import { StorageService } from '@/server';
-
-const container = ref();
-const service = new StorageService();
-const engine = new Engine({
-  container,
-  service,
-  project: {
-    id: 'test',
-    name: '测试'
-  }
-});
-
-engine.ready(() => {
-  console.log('ready');
-});
-</script>

apps/designer/src/views/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="designer-container" ref="container"></div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import {
+  Engine,
+  widgetManager,
+  LocalService,
+  MemoryService
+  // type ProjectModel
+} from '@vtj/pro';
+
+import { StorageService } from '@/service';
+
+const container = ref();
+const service = new StorageService();
+// const service = new StorageService();
+
+const engine = new Engine({
+  container,
+  service,
+  project: {
+    id: 'test',
+    name: '测试'
+  }
+});
+
+widgetManager.set('Previewer', {
+  props: {
+    path: (block: any) => {
+      console.log('block', block);
+      const pathname = location.pathname;
+      return `${pathname}#/preview/${block.id}`;
+    }
+  }
+});
+</script>
+
+<style scoped>
+.designer-container {
+  height: 100%;
+  width: 100%;
+}
+</style>

apps/designer/src/views/preview.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { createRenderer } from '@vtj/renderer';
+import { useRoute } from 'vue-router';
+import { StorageService } from '@/service';
+import { getCurrentInstance } from 'vue';
+
+const route = useRoute();
+
+const service = new StorageService();
+
+const instance = getCurrentInstance();
+
+const app = instance?.appContext.app;
+
+const file = await service.getFile(route.params.id.toString());
+
+console.log('file', file);
+
+Object.assign(route.meta, file.meta);
+const el = app?._container;
+if (file?.type === 'page') {
+  el.classList.add('is-page');
+}
+const isPure = file?.pure;
+if (isPure) {
+  el.classList.add('is-pure');
+}
+
+const { renderer } = createRenderer({
+  dsl: file
+});
+</script>
+
+<template>
+  <component :is="renderer" />
+</template>