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

fix: 修复渲染器无法调用 project 内定义的 api

Browse Source
This commit is contained in:
wangxuefeng 2025-02-25 11:39:45 +08:00
parent e695a4bf4a
commit 11018965bd
14 changed files with 199 additions and 17966 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/designer/.vtj/files/45tas1fsz.json
View File

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

17633
apps/designer/.vtj/materials/@sy/low-code-designer.json
View File

File diff suppressed because one or more lines are too long

173
apps/designer/.vtj/projects/@sy/low-code-designer.json
View File

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

23
apps/designer/.vtj/vue/45tas1fsz.vue
View File

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

24
apps/designer/package.json
View File

@ -16,25 +16,27 @@
"clean": "rimraf node_modules" "clean": "rimraf node_modules"
}, },
"dependencies": { "dependencies": {
"vue": "~3.5.0", "@vtj/core": "^0.9.30",
"vue-router": "~4.5.0", "@vtj/icons": "0.9.30",
"element-plus": "^2.9.4", "@vtj/designer": "0.9.30",
"@vtj/web": "^0.9.30", "@vtj/local": "^0.9.30",
"@vtj/ui": "^0.9.30",
"@vtj/materials": "^0.9.30", "@vtj/materials": "^0.9.30",
"@vtj/node": "0.9.6", "@vtj/node": "0.9.6",
"@vtj/core": "^0.9.30",
"@vtj/pro": "^0.9.30", "@vtj/pro": "^0.9.30",
"@vtj/renderer": "^0.9.30", "@vtj/renderer": "^0.9.30",
"@vtj/local": "^0.9.30", "@vtj/ui": "^0.9.30",
"@vtj/utils": "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": { "devDependencies": {
"@vtj/cli": "^0.9.8",
"@sy/vite-plugin-http2-proxy": "workspace:*", "@sy/vite-plugin-http2-proxy": "workspace:*",
"vite-plugin-mkcert": "^1.17.6", "@vtj/cli": "^0.9.8",
"vite": "^6.1.1" "vite": "^6.1.1",
"vite-plugin-mkcert": "^1.17.6"
}, },
"packageManager": "pnpm@10.4.1" "packageManager": "pnpm@10.4.1"
} }

3
apps/designer/src/main.ts
View File

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

14
apps/designer/src/router.ts
View File

@ -4,12 +4,22 @@ const routes = [
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: () => import('./views/index.vue') component: () => import('@/views/index.vue')
}, },
{ {
path: '/preview/:id', path: '/preview/:id',
name: 'preview', 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')
} }
]; ];

19
apps/designer/src/router/index.ts
View File

@ -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;

51
apps/designer/src/service/index.ts
View File

@ -4,27 +4,41 @@ import {
type HistorySchema, type HistorySchema,
type HistoryItem, type HistoryItem,
type MaterialDescription, type MaterialDescription,
type ExtensionConfig,
type PageFile,
type BlockFile,
ProjectModel, ProjectModel,
HistoryModel HistoryModel
} from '@vtj/core'; } from '@vtj/core';
import { Storage, mapToObject } from '@vtj/utils'; import { Storage, mapToObject } from '@vtj/utils';
import { BaseService } from '@vtj/renderer'; import { BaseService } from '@vtj/renderer';
import { debounce } from 'licia-es';
const storage = new Storage({ const storage = new Storage({
type: 'local', type: 'local',
expired: 0, expired: 0
prefix: '__VTJ_' // prefix: '__VTJ_'
}); });
export class StorageService extends BaseService { export class StorageService extends BaseService {
public init(project: ProjectSchema): Promise<ProjectSchema> { public init(project: ProjectSchema): Promise<ProjectSchema> {
console.log('init-project', project);
const model = new ProjectModel(project); const model = new ProjectModel(project);
// console.log('init-project-model', model);
const match = storage.get(`project_${model.id}`); const match = storage.get(`project_${model.id}`);
console.log('init-project-match', match);
const dsl = Object.assign(model.toDsl(), match || {}); const dsl = Object.assign(model.toDsl(), match || {});
console.log('init-project-dsl', dsl);
storage.save(`project_${model.id}`, dsl); storage.save(`project_${model.id}`, dsl);
return Promise.resolve(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> { public saveProject(project: ProjectSchema): Promise<boolean> {
const model = new ProjectModel(project); const model = new ProjectModel(project);
storage.save(`project_${model.id}`, model.toDsl()); storage.save(`project_${model.id}`, model.toDsl());
@ -36,16 +50,19 @@ export class StorageService extends BaseService {
materials: Map<string, MaterialDescription> materials: Map<string, MaterialDescription>
): Promise<boolean> { ): Promise<boolean> {
storage.save(`materials_${project.id}`, mapToObject(materials)); storage.save(`materials_${project.id}`, mapToObject(materials));
console.log('saveMaterials', materials);
return Promise.resolve(true); return Promise.resolve(true);
} }
public saveFile(file: BlockSchema): Promise<boolean> { public saveFile(file: BlockSchema): Promise<boolean> {
storage.save(`file_${file.id}`, file); storage.save(`file_${file.id}`, file);
console.log('saveFile', file);
return Promise.resolve(true); return Promise.resolve(true);
} }
public getFile(id: string): Promise<BlockSchema> { public getFile(id: string): Promise<BlockSchema> {
const dsl = storage.get(`file_${id}`); const dsl = storage.get(`file_${id}`);
console.log('getFile', id, dsl);
if (dsl) { if (dsl) {
return Promise.resolve(dsl as BlockSchema); return Promise.resolve(dsl as BlockSchema);
} else { } else {
@ -55,14 +72,26 @@ export class StorageService extends BaseService {
public removeFile(id: string): Promise<boolean> { public removeFile(id: string): Promise<boolean> {
storage.remove(`file_${id}`); storage.remove(`file_${id}`);
console.log('removeFile', id);
return Promise.resolve(true); return Promise.resolve(true);
} }
public saveHistory(history: HistorySchema): Promise<boolean> { public saveHistory(history: HistorySchema): Promise<boolean> {
storage.save(`history_${history.id}`, history); storage.save(`history_${history.id}`, history);
// console.log('saveHistory', history);
return Promise.resolve(true); 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> { public removeHistory(id: string): Promise<boolean> {
const history = storage.get(`history_${id}`) as HistorySchema; const history = storage.get(`history_${id}`) as HistorySchema;
if (history) { if (history) {
@ -70,6 +99,7 @@ export class StorageService extends BaseService {
const ids = items.map((item) => item.id); const ids = items.map((item) => item.id);
this.removeHistoryItem(id, ids); this.removeHistoryItem(id, ids);
storage.remove(`history_${id}`); storage.remove(`history_${id}`);
console.log('removeHistory', history);
} }
return Promise.resolve(true); return Promise.resolve(true);
@ -77,16 +107,20 @@ export class StorageService extends BaseService {
public getHistory(id: string): Promise<HistorySchema> { public getHistory(id: string): Promise<HistorySchema> {
const dsl = storage.get(`history_${id}`); const dsl = storage.get(`history_${id}`);
console.log('getHistoryDSL', dsl);
const history = new HistoryModel(dsl || { id }); const history = new HistoryModel(dsl || { id });
console.log('getHistory', dsl, id, history);
return Promise.resolve(history.toDsl()); return Promise.resolve(history.toDsl());
} }
public getHistoryItem(fId: string, id: string): Promise<HistoryItem> { public getHistoryItem(fId: string, id: string): Promise<HistoryItem> {
const item = storage.get(`history_${fId}_${id}`); const item = storage.get(`history_${fId}_${id}`);
console.log('getHistoryItem', item);
return Promise.resolve(item); return Promise.resolve(item);
} }
public saveHistoryItem(fId: string, item: HistoryItem): Promise<boolean> { public saveHistoryItem(fId: string, item: HistoryItem): Promise<boolean> {
console.log('saveHistoryItem', fId, item);
storage.save(`history_${fId}_${item.id}`, item); storage.save(`history_${fId}_${item.id}`, item);
return Promise.resolve(true); return Promise.resolve(true);
} }
@ -94,7 +128,20 @@ export class StorageService extends BaseService {
public removeHistoryItem(fId: string, ids: string[]): Promise<boolean> { public removeHistoryItem(fId: string, ids: string[]): Promise<boolean> {
ids.forEach((id) => { ids.forEach((id) => {
storage.remove(`history_${fId}_${id}`); storage.remove(`history_${fId}_${id}`);
console.log('removeHistoryItem', fId, id);
}); });
return Promise.resolve(true); 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
View 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
View 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
apps/designer/src/views/index.vue
View File

@ -6,9 +6,7 @@
import { ref } from 'vue'; import { ref } from 'vue';
import { import {
Engine, Engine,
widgetManager, widgetManager
LocalService,
MemoryService
// type ProjectModel // type ProjectModel
} from '@vtj/pro'; } from '@vtj/pro';
@ -16,7 +14,6 @@ import { StorageService } from '@/service';
const container = ref(); const container = ref();
const service = new StorageService(); const service = new StorageService();
// const service = new StorageService();
const engine = new Engine({ const engine = new Engine({
container, container,
@ -30,7 +27,6 @@ const engine = new Engine({
widgetManager.set('Previewer', { widgetManager.set('Previewer', {
props: { props: {
path: (block: any) => { path: (block: any) => {
console.log('block', block);
const pathname = location.pathname; const pathname = location.pathname;
return `${pathname}#/preview/${block.id}`; return `${pathname}#/preview/${block.id}`;
} }

55
apps/designer/src/views/preview.vue
View File

@ -1,36 +1,33 @@
<script setup lang="ts"> <template>
import { createRenderer } from '@vtj/renderer'; <component v-if="renderer" :is="renderer"></component>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { createProvider, ContextMode } from '@vtj/pro';
import { StorageService } from '@/service'; import { StorageService } from '@/service';
import { getCurrentInstance } from 'vue';
const route = useRoute();
const service = new StorageService(); 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 instance = getCurrentInstance();
const app = instance?.appContext.app; onReady(async () => {
instance?.appContext.app.use(provider);
const file = await service.getFile(route.params.id.toString()); renderer.value = await provider.getRenderComponent(
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> </script>
<template>
<component :is="renderer" />
</template>

8
pnpm-lock.yaml generated
View File

@ -98,6 +98,9 @@ importers:
'@vtj/core': '@vtj/core':
specifier: ^0.9.30 specifier: ^0.9.30
version: 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': '@vtj/icons':
specifier: 0.9.30 specifier: 0.9.30
version: 0.9.30(vue@3.5.13(typescript@5.7.3)) version: 0.9.30(vue@3.5.13(typescript@5.7.3))
@ -128,8 +131,11 @@ importers:
element-plus: element-plus:
specifier: ^2.9.4 specifier: ^2.9.4
version: 2.9.4(vue@3.5.13(typescript@5.7.3)) version: 2.9.4(vue@3.5.13(typescript@5.7.3))
licia-es:
specifier: ^1.46.0
version: 1.46.0
vue: vue:
specifier: ~3.5.0 specifier: ~3.5.13
version: 3.5.13(typescript@5.7.3) version: 3.5.13(typescript@5.7.3)
vue-router: vue-router:
specifier: ~4.5.0 specifier: ~4.5.0