feat: 编辑器预览功能

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>