From e05275269405023d05daa42b214b86874370f53a Mon Sep 17 00:00:00 2001 From: wangxuefeng Date: Sat, 1 Mar 2025 15:38:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=8E=E4=BB=A3=E7=A0=81=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95?= =?UTF-8?q?=20crud=20=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/designer/src/io/history.ts | 44 +++++++++++++-- apps/designer/src/service/index.ts | 86 +++++++++++++++-------------- apps/designer/src/views/index.vue | 6 +- apps/designer/src/views/preview.vue | 7 +-- apps/renderer/src/App.vue | 27 +++++++-- apps/renderer/src/index.ts | 1 - apps/renderer/src/io/index.ts | 1 + apps/renderer/src/io/project.ts | 6 ++ apps/renderer/src/service/index.ts | 40 ++++++++++++++ apps/renderer/tsconfig.json | 2 - apps/renderer/vite.config.ts | 5 ++ 11 files changed, 161 insertions(+), 64 deletions(-) create mode 100644 apps/renderer/src/io/project.ts create mode 100644 apps/renderer/src/service/index.ts diff --git a/apps/designer/src/io/history.ts b/apps/designer/src/io/history.ts index 89b9be6..17d3143 100644 --- a/apps/designer/src/io/history.ts +++ b/apps/designer/src/io/history.ts @@ -2,10 +2,10 @@ import instance from './instance'; import { type HistorySchema } from '@vtj/core'; export type LowCodeHistorySchema = { - project_id: string; - id: string; - page_id?: string; - block_id?: string; + project_id: number; + file_id: string; + history_id: string; + id?: string; dsl?: HistorySchema; }; @@ -15,8 +15,40 @@ function transformHistoryData(data: LowCodeHistorySchema) { dsl: JSON.stringify(data.dsl || {}) }; } -export const getHistories = async () => { - const response = await instance.get('/api/v1/histories'); + +export type HistoriesResponse = { + code: number; + data: { + list: Array<{ + id: number; + project_id: number; + file_id: string; + history_id: string; + dsl: Record; + created_at: string; + updated_at: string; + }>; + total: number; + }; + message: string; +}; + +export type GetHistoriesParams = { + project_id: number; + file_id: string; + page?: number; + per_page?: number; +}; + +export const getHistories = async (params: GetHistoriesParams) => { + const response = await instance.get('/api/v1/histories', { + params: { + project_id: params.project_id, + file_id: params.file_id, + ...(params.page && { page: params.page }), + ...(params.per_page && { per_page: params.per_page }) + } + }); return response.data; }; diff --git a/apps/designer/src/service/index.ts b/apps/designer/src/service/index.ts index 1195d64..0f22dcc 100644 --- a/apps/designer/src/service/index.ts +++ b/apps/designer/src/service/index.ts @@ -23,9 +23,9 @@ import { updateHistory as updateLowCodeHistory, deleteHistory as deleteLowCodeHistory, getHistories as getLowCodeHistories, - createHistory as createLowCodeHistory + createHistory as createLowCodeHistory, + getHistories } from '@/io'; -import { isNumeric } from 'licia-es'; const storage = new Storage({ type: 'local', expired: 0 @@ -41,7 +41,7 @@ const stringifyFields = [ 'meta' ]; -export class StorageService extends BaseService { +export class LowCodeService extends BaseService { public async init(project: ProjectSchema): Promise { const remoteProject = await getProject('2'); const model = new ProjectModel(remoteProject); @@ -81,7 +81,6 @@ export class StorageService extends BaseService { } public async saveFile(file: BlockSchema): Promise { - console.log('saveFile', file); if (file.id) { const existFile = await getLowCodeFile(file.id); if (existFile.file_id) { @@ -115,7 +114,6 @@ export class StorageService extends BaseService { } public async getFile(id: string): Promise { - console.log('getFile', id); return getLowCodeFile(id).then((lowCodeFile) => { if (lowCodeFile.dsl) { return Promise.resolve(lowCodeFile.dsl as BlockSchema); @@ -130,14 +128,6 @@ export class StorageService extends BaseService { } public async saveHistory(history: HistorySchema): Promise { - console.log('saveHistory', history); - // const existHistory = await getLowCodeHistory(history.id); - // if (existHistory.history_id) { - // await updateLowCodeHistory(history.id, history); - // } else { - // await createLowCodeHistory(history); - // } - storage.save(`history_${history.id}`, history); return Promise.resolve(true); } @@ -150,40 +140,52 @@ export class StorageService extends BaseService { console.log('uploader', file, projectId); return Promise.resolve(true); }; - + // TODO: 做成数据库存储后没啥用，保留就行 public removeHistory(id: string): Promise { - return deleteLowCodeHistory(id).then((res) => { - console.log('removeHistory', res); - return Promise.resolve(true); - }); - } - - public async getHistory(id: string): Promise { - const dsl = storage.get(`history_${id}`); - console.log('getHistoryDSL', dsl); - const history = new HistoryModel(dsl || { id }); - console.log('getHistory', dsl, id, history); - // const histories = await getLowCodeHistories(id); - return Promise.resolve(history.toDsl()); - } - - public getHistoryItem(fId: string, id: string): Promise { - const item = storage.get(`history_${fId}_${id}`); - console.log('getHistoryItem', item); - return Promise.resolve(item); - } - - public saveHistoryItem(fileId: string, item: HistoryItem): Promise { - console.log('saveHistoryItem', fileId, item); - storage.save(`history_${fileId}_${item.id}`, item); + console.log('removeHistory', id); return Promise.resolve(true); } - public removeHistoryItem(fId: string, ids: string[]): Promise { - ids.forEach((id) => { - storage.remove(`history_${fId}_${id}`); - console.log('removeHistoryItem', fId, id); + public async getHistory(fileId: string): Promise { + const histories = await getHistories({ + project_id: 2, + file_id: fileId, + per_page: 50 }); + const formatDsl = { + id: histories.list[0].file_id, + items: histories.list.map((item) => { + return { + ...item, + id: item.history_id, + label: item.created_at + }; + }) + }; + const history = new HistoryModel(formatDsl); + return Promise.resolve(history.toDsl()); + } + + public async getHistoryItem(fId: string, id: string): Promise { + const history = await getLowCodeHistory(id); + return Promise.resolve(history); + } + + public async saveHistoryItem( + fileId: string, + historyItem: HistoryItem + ): Promise { + const saveHistory = await createLowCodeHistory({ + project_id: 2, + file_id: fileId, + history_id: historyItem.id, + dsl: historyItem.dsl as HistorySchema + }); + return Promise.resolve(true); + } + + public async removeHistoryItem(fId: string, ids: string[]): Promise { + await Promise.all(ids.map((id) => deleteLowCodeHistory(id))); return Promise.resolve(true); } public publish(project: ProjectSchema): Promise { diff --git a/apps/designer/src/views/index.vue b/apps/designer/src/views/index.vue index 9fda524..6857bf0 100644 --- a/apps/designer/src/views/index.vue +++ b/apps/designer/src/views/index.vue @@ -10,16 +10,16 @@ import { // type ProjectModel } from '@vtj/pro'; -import { StorageService } from '@/service'; +import { LowCodeService } from '@/service'; const container = ref(); -const service = new StorageService(); +const service = new LowCodeService(); const engine = new Engine({ container, service, project: { - id: 'test', + id: '2', name: '测试' } }); diff --git a/apps/designer/src/views/preview.vue b/apps/designer/src/views/preview.vue index 71a9bde..c9a58c7 100644 --- a/apps/designer/src/views/preview.vue +++ b/apps/designer/src/views/preview.vue @@ -5,14 +5,13 @@ import { ref, getCurrentInstance } from 'vue'; import { useRoute } from 'vue-router'; import { createProvider, ContextMode } from '@vtj/pro'; -import { StorageService } from '@/service'; -const service = new StorageService(); +import { LowCodeService } from '@/service'; +const service = new LowCodeService(); const { provider, onReady } = createProvider({ mode: ContextMode.Runtime, service, project: { - id: 'test', - name: '测试' + id: '2' }, dependencies: { Vue: () => import('vue'), diff --git a/apps/renderer/src/App.vue b/apps/renderer/src/App.vue index 448a7ba..bca49a5 100644 --- a/apps/renderer/src/App.vue +++ b/apps/renderer/src/App.vue @@ -2,10 +2,14 @@ import { onMounted, computed, watch } from 'vue'; import { ElLoading } from 'element-plus'; import Postmate from 'postmate'; -import { createRenderer } from '@vtj/renderer' -import { getFile } from './io'; +import { createRenderer, createProvider } from '@vtj/renderer' import { useQuery } from '@tanstack/vue-query'; +import { LowCodeService } from './service' + +import { getFile } from './io'; + +const lowCodeService = new LowCodeService(); onMounted(() => { const handshake = new Postmate.Model({}); @@ -16,12 +20,10 @@ handshake.then(parent => { }); const { data: file, isFetching } = useQuery({ - queryKey: ['file', '45tncm34d'], + queryKey: ['getFile'], queryFn: async () => { - return getFile('45tncm34d'); + return getFile('45tnbgeme'); }, - retry: 3, - retryDelay: 2000, }); watch(isFetching, (newVal) => { @@ -34,6 +36,19 @@ watch(isFetching, (newVal) => { } }); +const { provider, onReady } = createProvider({ + // runtime: 'web', + service: lowCodeService, + project: { + id: '2' + }, +}); + + +onReady(() => { + console.log('onReady'); +}); + const renderer = computed(() => { console.log(file?.value?.dsl.id); if (file?.value?.dsl) { diff --git a/apps/renderer/src/index.ts b/apps/renderer/src/index.ts index b54e0ff..cc37820 100644 --- a/apps/renderer/src/index.ts +++ b/apps/renderer/src/index.ts @@ -2,7 +2,6 @@ import { createApp } from "vue"; import "@sy/web-vitals"; import { IconsPlugin } from "@vtj/icons"; import { VueQueryPlugin } from "@tanstack/vue-query"; -// import "@sy/low-code-shared/styles/reset.css"; import App from "./App.vue"; import ElementPlus from "element-plus"; diff --git a/apps/renderer/src/io/index.ts b/apps/renderer/src/io/index.ts index 375123f..756f7bc 100644 --- a/apps/renderer/src/io/index.ts +++ b/apps/renderer/src/io/index.ts @@ -1 +1,2 @@ export * from "./file"; +export * from "./project"; diff --git a/apps/renderer/src/io/project.ts b/apps/renderer/src/io/project.ts new file mode 100644 index 0000000..3055f86 --- /dev/null +++ b/apps/renderer/src/io/project.ts @@ -0,0 +1,6 @@ +import instance from "./instance"; + +export const getProject = async (id: string) => { + const response = await instance.get(`/api/v1/projects/${id}`); + return response.data; +}; diff --git a/apps/renderer/src/service/index.ts b/apps/renderer/src/service/index.ts new file mode 100644 index 0000000..7a30530 --- /dev/null +++ b/apps/renderer/src/service/index.ts @@ -0,0 +1,40 @@ +// @ts-nocheck +import { type ProjectSchema, type BlockSchema, ProjectModel } from "@vtj/core"; +import { BaseService } from "@vtj/renderer"; +import { getProject, getFile as getLowCodeFile } from "@/io"; + +export class LowCodeService extends BaseService { + public async init(project: ProjectSchema) { + console.log("init", project); + const remoteProject = await getProject("2"); + const model = new ProjectModel(remoteProject); + const dsl = model.toDsl(); + return Promise.resolve(dsl); + } + + public saveProject(project: ProjectSchema): Promise { + const newProject = { + ...project, + ...Object.fromEntries( + Object.entries(project) + .filter(([key]) => stringifyFields.includes(key)) + .map(([key, value]) => [key, JSON.stringify(value)]) + ), + }; + updateProject("2", newProject); + const model = new ProjectModel(project); + storage.save(`project_${model.id}`, model.toDsl()); + return Promise.resolve(true); + } + + public async getFile(id: string): Promise { + console.log("getFile", id); + return getLowCodeFile(id).then((lowCodeFile) => { + if (lowCodeFile.dsl) { + return Promise.resolve(lowCodeFile.dsl as BlockSchema); + } else { + return Promise.reject(null); + } + }); + } +} diff --git a/apps/renderer/tsconfig.json b/apps/renderer/tsconfig.json index 3cbde24..11e5c4e 100644 --- a/apps/renderer/tsconfig.json +++ b/apps/renderer/tsconfig.json @@ -1,7 +1,5 @@ { - "extends": "./node_modules/@vtj/cli/config/tsconfig.web.json", "compilerOptions": { - "lib": ["es2015", "dom"], "noUnusedLocals": false, "noUnusedParameters": false, "baseUrl": "./", diff --git a/apps/renderer/vite.config.ts b/apps/renderer/vite.config.ts index cd1e23e..91b09d9 100644 --- a/apps/renderer/vite.config.ts +++ b/apps/renderer/vite.config.ts @@ -8,4 +8,9 @@ export default defineConfig({ port: 10010, }, plugins: [http2Proxy(), mkcert(), VuePlugin()], + esbuild: { + supported: { + "top-level-await": true, + }, + }, });