fix: 修复渲染器无法调用 project 内定义的 api
This commit is contained in:
wangxuefeng
parent
e695a4bf4a
commit
11018965bd
@ -1,65 +0,0 @@
|
||||
{
|
||||
"name": "Test",
|
||||
"locked": false,
|
||||
"inject": [],
|
||||
"state": {},
|
||||
"lifeCycles": {},
|
||||
"methods": {},
|
||||
"computed": {},
|
||||
"watch": [],
|
||||
"css": "",
|
||||
"props": [],
|
||||
"emits": [],
|
||||
"slots": [],
|
||||
"dataSources": {},
|
||||
"__VTJ_BLOCK__": true,
|
||||
"__VERSION__": "1740038923917",
|
||||
"id": "45tas1fsz",
|
||||
"nodes": [
|
||||
{
|
||||
"id": "7pf8hv3wi",
|
||||
"name": "ElButtonGroup",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": "b9167o6ma",
|
||||
"name": "ElButton",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": "Button1",
|
||||
"props": {},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
},
|
||||
{
|
||||
"id": "esn3xh9c2",
|
||||
"name": "ElButton",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": "Button2",
|
||||
"props": {},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
},
|
||||
{
|
||||
"id": "ic91nac1u",
|
||||
"name": "ElButton",
|
||||
"from": "element-plus",
|
||||
"invisible": false,
|
||||
"locked": false,
|
||||
"children": "Button3",
|
||||
"props": {},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
],
|
||||
"props": {},
|
||||
"directives": [],
|
||||
"events": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,173 +0,0 @@
|
||||
{
|
||||
"__VTJ_PROJECT__": true,
|
||||
"id": "@sy/low-code-designer",
|
||||
"platform": "web",
|
||||
"name": "低代码编辑器",
|
||||
"homepage": "",
|
||||
"description": "低代码编辑器",
|
||||
"dependencies": [
|
||||
{
|
||||
"package": "vue",
|
||||
"version": "latest",
|
||||
"library": "Vue",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/vue/vue.global.prod.js"
|
||||
],
|
||||
"assetsLibrary": "VueMaterial",
|
||||
"required": true,
|
||||
"official": true,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"package": "vue-router",
|
||||
"version": "latest",
|
||||
"library": "VueRouter",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/vue-router/vue-router.global.prod.js"
|
||||
],
|
||||
"assetsLibrary": "VueRouterMaterial",
|
||||
"required": true,
|
||||
"official": true,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"package": "@vtj/utils",
|
||||
"version": "latest",
|
||||
"library": "VtjUtils",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/@vtj/utils/index.umd.js"
|
||||
],
|
||||
"required": true,
|
||||
"official": true,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"package": "@vtj/icons",
|
||||
"version": "latest",
|
||||
"library": "VtjIcons",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/@vtj/icons/style.css",
|
||||
"@vtj/materials/deps/@vtj/icons/index.umd.js"
|
||||
],
|
||||
"required": true,
|
||||
"official": true,
|
||||
"enabled": true
|
||||
},
|
||||
{
|
||||
"package": "@vueuse/core",
|
||||
"version": "latest",
|
||||
"library": "VueUse",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/@vueuse/shared/index.iife.min.js",
|
||||
"@vtj/materials/deps/@vueuse/core/index.iife.min.js"
|
||||
],
|
||||
"required": false,
|
||||
"official": true,
|
||||
"enabled": true,
|
||||
"platform": [
|
||||
"web",
|
||||
"h5"
|
||||
]
|
||||
},
|
||||
{
|
||||
"package": "element-plus",
|
||||
"version": "latest",
|
||||
"library": "ElementPlus",
|
||||
"localeLibrary": "ElementPlusLocaleZhCn",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/element-plus/dark/css-vars.css",
|
||||
"@vtj/materials/deps/element-plus/index.css",
|
||||
"@vtj/materials/deps/element-plus/zh-cn.js",
|
||||
"@vtj/materials/deps/element-plus/index.full.min.js"
|
||||
],
|
||||
"assetsUrl": "@vtj/materials/assets/element/index.umd.js",
|
||||
"assetsLibrary": "ElementPlusMaterial",
|
||||
"required": false,
|
||||
"official": true,
|
||||
"enabled": true,
|
||||
"platform": "web"
|
||||
},
|
||||
{
|
||||
"package": "@vtj/ui",
|
||||
"version": "latest",
|
||||
"library": "VtjUI",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/vxe-table/style.min.css",
|
||||
"@vtj/materials/deps/@vtj/ui/style.css",
|
||||
"@vtj/materials/deps/xe-utils/xe-utils.umd.min.js",
|
||||
"@vtj/materials/deps/vxe-table/index.umd.min.js",
|
||||
"@vtj/materials/deps/@vtj/ui/index.umd.js"
|
||||
],
|
||||
"assetsUrl": "@vtj/materials/assets/ui/index.umd.js",
|
||||
"assetsLibrary": "VtjUIMaterial",
|
||||
"required": false,
|
||||
"official": true,
|
||||
"enabled": true,
|
||||
"platform": "web"
|
||||
},
|
||||
{
|
||||
"package": "ant-design-vue",
|
||||
"version": "latest",
|
||||
"library": "antd",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/ant-design-vue/reset.css",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/dayjs.min.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/customParseFormat.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/weekday.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/localeData.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/weekOfYear.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/weekYear.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/advancedFormat.js",
|
||||
"@vtj/materials/deps/ant-design-vue/dayjs/plugin/quarterOfYear.js",
|
||||
"@vtj/materials/deps/ant-design-vue/antd.min.js"
|
||||
],
|
||||
"assetsUrl": "@vtj/materials/assets/antdv/index.umd.js",
|
||||
"assetsLibrary": "AntdvMaterial",
|
||||
"required": false,
|
||||
"official": true,
|
||||
"enabled": false,
|
||||
"platform": [
|
||||
"web"
|
||||
]
|
||||
},
|
||||
{
|
||||
"package": "@vtj/charts",
|
||||
"version": "latest",
|
||||
"library": "VtjCharts",
|
||||
"urls": [
|
||||
"@vtj/materials/deps/echarts/echarts.min.js",
|
||||
"@vtj/materials/deps/@vtj/charts/index.umd.js"
|
||||
],
|
||||
"assetsUrl": "@vtj/materials/assets/charts/index.umd.js",
|
||||
"assetsLibrary": "VtjChartsMaterial",
|
||||
"required": false,
|
||||
"official": true,
|
||||
"enabled": true,
|
||||
"platform": [
|
||||
"web",
|
||||
"h5"
|
||||
]
|
||||
}
|
||||
],
|
||||
"pages": [
|
||||
{
|
||||
"dir": false,
|
||||
"name": "Test",
|
||||
"title": "123",
|
||||
"icon": "",
|
||||
"mask": true,
|
||||
"hidden": false,
|
||||
"raw": false,
|
||||
"pure": false,
|
||||
"meta": "",
|
||||
"cache": false,
|
||||
"id": "45tas1fsz",
|
||||
"type": "page"
|
||||
}
|
||||
],
|
||||
"blocks": [],
|
||||
"apis": [],
|
||||
"meta": [],
|
||||
"config": {},
|
||||
"__BASE_PATH__": "/"
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<ElButtonGroup>
|
||||
<ElButton> Button1</ElButton>
|
||||
<ElButton> Button2</ElButton>
|
||||
<ElButton> Button3</ElButton></ElButtonGroup
|
||||
>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { ElButtonGroup, ElButton } from 'element-plus';
|
||||
import { useProvider } from '@vtj/renderer';
|
||||
export default defineComponent({
|
||||
name: 'Test',
|
||||
components: { ElButtonGroup, ElButton },
|
||||
setup(props) {
|
||||
const provider = useProvider({ id: '45tas1fsz', version: '1740038923917' });
|
||||
const state = reactive<Record<string, any>>({});
|
||||
return { state, props, provider };
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -16,25 +16,27 @@
|
||||
"clean": "rimraf node_modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "~3.5.0",
|
||||
"vue-router": "~4.5.0",
|
||||
"element-plus": "^2.9.4",
|
||||
"@vtj/web": "^0.9.30",
|
||||
"@vtj/ui": "^0.9.30",
|
||||
"@vtj/core": "^0.9.30",
|
||||
"@vtj/icons": "0.9.30",
|
||||
"@vtj/designer": "0.9.30",
|
||||
"@vtj/local": "^0.9.30",
|
||||
"@vtj/materials": "^0.9.30",
|
||||
"@vtj/node": "0.9.6",
|
||||
"@vtj/core": "^0.9.30",
|
||||
"@vtj/pro": "^0.9.30",
|
||||
"@vtj/renderer": "^0.9.30",
|
||||
"@vtj/local": "^0.9.30",
|
||||
"@vtj/ui": "^0.9.30",
|
||||
"@vtj/utils": "0.9.30",
|
||||
"@vtj/icons": "0.9.30"
|
||||
"@vtj/web": "^0.9.30",
|
||||
"element-plus": "^2.9.4",
|
||||
"licia-es": "^1.46.0",
|
||||
"vue": "~3.5.13",
|
||||
"vue-router": "~4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vtj/cli": "^0.9.8",
|
||||
"@sy/vite-plugin-http2-proxy": "workspace:*",
|
||||
"vite-plugin-mkcert": "^1.17.6",
|
||||
"vite": "^6.1.1"
|
||||
"@vtj/cli": "^0.9.8",
|
||||
"vite": "^6.1.1",
|
||||
"vite-plugin-mkcert": "^1.17.6"
|
||||
},
|
||||
"packageManager": "pnpm@10.4.1"
|
||||
}
|
||||
@ -1,10 +1,7 @@
|
||||
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');
|
||||
|
||||
@ -4,12 +4,22 @@ const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('./views/index.vue')
|
||||
component: () => import('@/views/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/preview/:id',
|
||||
name: 'preview',
|
||||
component: () => import('./views/preview.vue')
|
||||
component: () => import('@/views/preview.vue')
|
||||
},
|
||||
{
|
||||
path: '/unauthorized',
|
||||
name: 'Unauthorized',
|
||||
component: () => import('@/views/unauthorized.vue')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/not-found.vue')
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/unauthorized',
|
||||
name: 'Unauthorized',
|
||||
component: () => import('@/views/unauthorized.vue')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/not-found.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -4,27 +4,41 @@ import {
|
||||
type HistorySchema,
|
||||
type HistoryItem,
|
||||
type MaterialDescription,
|
||||
type ExtensionConfig,
|
||||
type PageFile,
|
||||
type BlockFile,
|
||||
ProjectModel,
|
||||
HistoryModel
|
||||
} from '@vtj/core';
|
||||
import { Storage, mapToObject } from '@vtj/utils';
|
||||
import { BaseService } from '@vtj/renderer';
|
||||
import { debounce } from 'licia-es';
|
||||
|
||||
const storage = new Storage({
|
||||
type: 'local',
|
||||
expired: 0,
|
||||
prefix: '__VTJ_'
|
||||
expired: 0
|
||||
// prefix: '__VTJ_'
|
||||
});
|
||||
|
||||
export class StorageService extends BaseService {
|
||||
public init(project: ProjectSchema): Promise<ProjectSchema> {
|
||||
console.log('init-project', project);
|
||||
const model = new ProjectModel(project);
|
||||
// console.log('init-project-model', model);
|
||||
const match = storage.get(`project_${model.id}`);
|
||||
console.log('init-project-match', match);
|
||||
const dsl = Object.assign(model.toDsl(), match || {});
|
||||
console.log('init-project-dsl', dsl);
|
||||
storage.save(`project_${model.id}`, dsl);
|
||||
return Promise.resolve(dsl);
|
||||
}
|
||||
|
||||
public getExtension(): Promise<ExtensionConfig | undefined> {
|
||||
const extension = storage.get('extension');
|
||||
console.log('ExtensionConfig', extension);
|
||||
return Promise.resolve(extension as ExtensionConfig | undefined);
|
||||
}
|
||||
|
||||
public saveProject(project: ProjectSchema): Promise<boolean> {
|
||||
const model = new ProjectModel(project);
|
||||
storage.save(`project_${model.id}`, model.toDsl());
|
||||
@ -36,16 +50,19 @@ export class StorageService extends BaseService {
|
||||
materials: Map<string, MaterialDescription>
|
||||
): Promise<boolean> {
|
||||
storage.save(`materials_${project.id}`, mapToObject(materials));
|
||||
console.log('saveMaterials', materials);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
public saveFile(file: BlockSchema): Promise<boolean> {
|
||||
storage.save(`file_${file.id}`, file);
|
||||
console.log('saveFile', file);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
public getFile(id: string): Promise<BlockSchema> {
|
||||
const dsl = storage.get(`file_${id}`);
|
||||
console.log('getFile', id, dsl);
|
||||
if (dsl) {
|
||||
return Promise.resolve(dsl as BlockSchema);
|
||||
} else {
|
||||
@ -55,14 +72,26 @@ export class StorageService extends BaseService {
|
||||
|
||||
public removeFile(id: string): Promise<boolean> {
|
||||
storage.remove(`file_${id}`);
|
||||
console.log('removeFile', id);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
public saveHistory(history: HistorySchema): Promise<boolean> {
|
||||
storage.save(`history_${history.id}`, history);
|
||||
// console.log('saveHistory', history);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
public api = (type: string, data: any): Promise<any> => {
|
||||
console.log('api', type, data);
|
||||
return Promise.resolve(true);
|
||||
};
|
||||
|
||||
protected uploader = (file: File, projectId: string): Promise<any> => {
|
||||
console.log('uploader', file, projectId);
|
||||
return Promise.resolve(true);
|
||||
};
|
||||
|
||||
public removeHistory(id: string): Promise<boolean> {
|
||||
const history = storage.get(`history_${id}`) as HistorySchema;
|
||||
if (history) {
|
||||
@ -70,6 +99,7 @@ export class StorageService extends BaseService {
|
||||
const ids = items.map((item) => item.id);
|
||||
this.removeHistoryItem(id, ids);
|
||||
storage.remove(`history_${id}`);
|
||||
console.log('removeHistory', history);
|
||||
}
|
||||
|
||||
return Promise.resolve(true);
|
||||
@ -77,16 +107,20 @@ export class StorageService extends BaseService {
|
||||
|
||||
public getHistory(id: string): Promise<HistorySchema> {
|
||||
const dsl = storage.get(`history_${id}`);
|
||||
console.log('getHistoryDSL', dsl);
|
||||
const history = new HistoryModel(dsl || { id });
|
||||
console.log('getHistory', dsl, id, history);
|
||||
return Promise.resolve(history.toDsl());
|
||||
}
|
||||
|
||||
public getHistoryItem(fId: string, id: string): Promise<HistoryItem> {
|
||||
const item = storage.get(`history_${fId}_${id}`);
|
||||
console.log('getHistoryItem', item);
|
||||
return Promise.resolve(item);
|
||||
}
|
||||
|
||||
public saveHistoryItem(fId: string, item: HistoryItem): Promise<boolean> {
|
||||
console.log('saveHistoryItem', fId, item);
|
||||
storage.save(`history_${fId}_${item.id}`, item);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
@ -94,7 +128,20 @@ export class StorageService extends BaseService {
|
||||
public removeHistoryItem(fId: string, ids: string[]): Promise<boolean> {
|
||||
ids.forEach((id) => {
|
||||
storage.remove(`history_${fId}_${id}`);
|
||||
console.log('removeHistoryItem', fId, id);
|
||||
});
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
public publish(project: ProjectSchema): Promise<boolean> {
|
||||
console.log('整站发布 project', project);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
public publishFile(
|
||||
project: ProjectSchema,
|
||||
file: PageFile | BlockFile
|
||||
): Promise<boolean> {
|
||||
console.log('发布页面', project, file);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
}
|
||||
|
||||
81
apps/designer/src/views/extension.ts
Normal file
81
apps/designer/src/views/extension.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import * as Vue from 'vue';
|
||||
import * as core from '@vtj/core';
|
||||
import * as VtjUtils from '@vtj/utils';
|
||||
import * as VtjUI from '@vtj/ui';
|
||||
import * as designer from '@vtj/designer';
|
||||
import * as renderer from '@vtj/renderer';
|
||||
import * as VtjIcons from '@vtj/icons';
|
||||
import * as ElementPlus from 'element-plus';
|
||||
import type { ExtensionConfig } from '@vtj/core';
|
||||
import type { EngineOptions } from '@vtj/designer';
|
||||
|
||||
export type ExtensionOptions = ExtensionConfig;
|
||||
export type ExtensionFactory = (
|
||||
config: ExtensionConfig
|
||||
) => Partial<EngineOptions> | void;
|
||||
|
||||
export interface ExtensionOutput {
|
||||
options: Partial<EngineOptions>;
|
||||
adapters: Record<string, any>;
|
||||
}
|
||||
|
||||
export class Extension {
|
||||
private urls: string[] = [];
|
||||
private library: string = '';
|
||||
private params: any[] = [];
|
||||
private __BASE_PATH__: string = '/';
|
||||
private __adapters__: Record<string, any> = {};
|
||||
constructor(private options: ExtensionOptions) {
|
||||
const __VTJ_PRO__ = {
|
||||
...core,
|
||||
...designer,
|
||||
...renderer
|
||||
};
|
||||
|
||||
(window as any).Vue = Vue;
|
||||
(window as any).__VTJ_PRO__ = __VTJ_PRO__;
|
||||
(window as any).VtjUtils = VtjUtils;
|
||||
(window as any).VtjIcons = VtjIcons;
|
||||
(window as any).VtjUI = VtjUI;
|
||||
(window as any).ElementPlus = ElementPlus;
|
||||
const {
|
||||
urls = [],
|
||||
library,
|
||||
params = [],
|
||||
__BASE_PATH__ = '/',
|
||||
__adapters__ = {}
|
||||
} = options || {};
|
||||
this.urls = urls;
|
||||
this.library = library;
|
||||
this.params = params;
|
||||
this.__BASE_PATH__ = __BASE_PATH__;
|
||||
this.__adapters__ = __adapters__;
|
||||
}
|
||||
async load(): Promise<ExtensionOutput> {
|
||||
let options: Partial<EngineOptions> = {};
|
||||
if (this.library) {
|
||||
const base = this.__BASE_PATH__;
|
||||
const css = this.urls
|
||||
.filter((n) => renderer.isCSSUrl(n))
|
||||
.map((n) => `${base}${n}`);
|
||||
const scripts: string[] = this.urls
|
||||
.filter((n) => renderer.isJSUrl(n))
|
||||
.map((n) => `${base}${n}`);
|
||||
renderer.loadCssUrl(css);
|
||||
if (scripts.length) {
|
||||
const output = await renderer
|
||||
.loadScriptUrl(scripts, this.library)
|
||||
.catch(() => null);
|
||||
if (output && typeof output === 'function') {
|
||||
options = output.call(output, this.options, this.params);
|
||||
} else {
|
||||
options = output || {};
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
options,
|
||||
adapters: this.__adapters__
|
||||
};
|
||||
}
|
||||
}
|
||||
10
apps/designer/src/views/index.ts
Normal file
10
apps/designer/src/views/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css';
|
||||
import 'element-plus/theme-chalk/index.css';
|
||||
// import 'vxe-table/es/style.min.css';
|
||||
import '@vtj/ui/dist/style.css';
|
||||
import '@vtj/icons/dist/style.css';
|
||||
|
||||
export * from '@vtj/core';
|
||||
export * from '@vtj/designer';
|
||||
export * from '@vtj/renderer';
|
||||
export * from './extension';
|
||||
@ -6,9 +6,7 @@
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
Engine,
|
||||
widgetManager,
|
||||
LocalService,
|
||||
MemoryService
|
||||
widgetManager
|
||||
// type ProjectModel
|
||||
} from '@vtj/pro';
|
||||
|
||||
@ -16,7 +14,6 @@ import { StorageService } from '@/service';
|
||||
|
||||
const container = ref();
|
||||
const service = new StorageService();
|
||||
// const service = new StorageService();
|
||||
|
||||
const engine = new Engine({
|
||||
container,
|
||||
@ -30,7 +27,6 @@ const engine = new Engine({
|
||||
widgetManager.set('Previewer', {
|
||||
props: {
|
||||
path: (block: any) => {
|
||||
console.log('block', block);
|
||||
const pathname = location.pathname;
|
||||
return `${pathname}#/preview/${block.id}`;
|
||||
}
|
||||
|
||||
@ -1,36 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { createRenderer } from '@vtj/renderer';
|
||||
<template>
|
||||
<component v-if="renderer" :is="renderer"></component>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, getCurrentInstance } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { createProvider, ContextMode } from '@vtj/pro';
|
||||
import { StorageService } from '@/service';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const service = new StorageService();
|
||||
|
||||
const { provider, onReady } = createProvider({
|
||||
mode: ContextMode.Runtime,
|
||||
service,
|
||||
project: {
|
||||
id: 'test',
|
||||
name: '测试'
|
||||
},
|
||||
dependencies: {
|
||||
Vue: () => import('vue'),
|
||||
VueRouter: () => import('vue-router'),
|
||||
ElementPlus: () => import('element-plus')
|
||||
}
|
||||
});
|
||||
const route = useRoute();
|
||||
const renderer = ref();
|
||||
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
|
||||
onReady(async () => {
|
||||
instance?.appContext.app.use(provider);
|
||||
renderer.value = await provider.getRenderComponent(
|
||||
route.params.id.toString()
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="renderer" />
|
||||
</template>
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -98,6 +98,9 @@ importers:
|
||||
'@vtj/core':
|
||||
specifier: ^0.9.30
|
||||
version: 0.9.30
|
||||
'@vtj/designer':
|
||||
specifier: 0.9.30
|
||||
version: 0.9.30(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
|
||||
'@vtj/icons':
|
||||
specifier: 0.9.30
|
||||
version: 0.9.30(vue@3.5.13(typescript@5.7.3))
|
||||
@ -128,8 +131,11 @@ importers:
|
||||
element-plus:
|
||||
specifier: ^2.9.4
|
||||
version: 2.9.4(vue@3.5.13(typescript@5.7.3))
|
||||
licia-es:
|
||||
specifier: ^1.46.0
|
||||
version: 1.46.0
|
||||
vue:
|
||||
specifier: ~3.5.0
|
||||
specifier: ~3.5.13
|
||||
version: 3.5.13(typescript@5.7.3)
|
||||
vue-router:
|
||||
specifier: ~4.5.0
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user