From 87beb96fbba571bd71cf7e76098065e6cfef104d Mon Sep 17 00:00:00 2001 From: chilingling Date: Mon, 22 Jul 2024 19:34:41 -0700 Subject: [PATCH 01/18] feat: editorInfo migrate to globalService --- designer-demo/registry.js | 6 ++- designer-demo/src/lifeCycles.js | 6 +++ designer-demo/src/main.js | 11 ++++- packages/common/composable/index.js | 1 + packages/common/composable/initData.js | 45 +++++++++++++++++++ packages/common/js/canvas.js | 7 +-- packages/design-core/index.js | 2 +- packages/design-core/src/init.js | 19 ++++---- packages/plugins/block/src/BlockConfig.vue | 4 +- .../plugins/block/src/composable/useBlock.js | 6 +-- .../materials/src/composable/useResource.js | 10 ++--- packages/plugins/page/src/PageHistory.vue | 4 +- packages/plugins/state/src/Main.vue | 8 ++-- packages/toolbars/generate-code/src/Main.vue | 6 +-- 14 files changed, 100 insertions(+), 35 deletions(-) create mode 100644 designer-demo/src/lifeCycles.js create mode 100644 packages/common/composable/initData.js diff --git a/designer-demo/registry.js b/designer-demo/registry.js index 72bcf82965..fb588c0dcf 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -41,7 +41,6 @@ import { Styles, Layout, Canvas, - EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine' @@ -50,7 +49,10 @@ import engineConfig from './engine.config' export default { root: { id: 'engine.root', - metas: [EditorInfoService, AppService, GenerateCodeService] + metas: [ + AppService, + GenerateCodeService + ] }, config: engineConfig, layout: { diff --git a/designer-demo/src/lifeCycles.js b/designer-demo/src/lifeCycles.js new file mode 100644 index 0000000000..5f918d5352 --- /dev/null +++ b/designer-demo/src/lifeCycles.js @@ -0,0 +1,6 @@ +import { initData } from '@opentiny/tiny-engine' + + +export const beforeAppCreate = async () => { + await initData() +} diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index 19d563cb09..78dc0a461e 100644 --- a/designer-demo/src/main.js +++ b/designer-demo/src/main.js @@ -11,10 +11,17 @@ */ // 导入@opentiny/tiny-engine时，内部的依赖包也会逐个导入，可能会执行useComplie，此时需要templateHashMap。所以需要先执行一次defineEntry -import { registry } from './defineEntry.js' import { init } from '@opentiny/tiny-engine' +import { registry } from './defineEntry.js' import { configurators } from './configurators/' +import { beforeAppCreate } from './lifeCycles.js' import 'virtual:svg-icons-register' import '@opentiny/tiny-engine-theme' -init({ registry, configurators }) +init({ + registry, + configurators, + lifeCycles: { + beforeAppCreate + } +}) diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js index 75268a70d0..08356cff4f 100644 --- a/packages/common/composable/index.js +++ b/packages/common/composable/index.js @@ -4,6 +4,7 @@ import useApp from './useApp' import useEditorInfo from './useEditorInfo' export { GenerateCodeService } from './generateCode' +export { initData } from './initData' export const AppService = { id: 'engine.service.app', diff --git a/packages/common/composable/initData.js b/packages/common/composable/initData.js new file mode 100644 index 0000000000..70fd499e37 --- /dev/null +++ b/packages/common/composable/initData.js @@ -0,0 +1,45 @@ +import { useHttp } from '@opentiny/tiny-engine-http' +import { useStore, useModal } from '@opentiny/tiny-engine-meta-register' + +const getBaseInfo = () => { + const paramsMap = new URLSearchParams(location.search) + const id = paramsMap.get('id') + const blockId = paramsMap.get('blockid') + const pageId = paramsMap.get('pageid') + const type = paramsMap.get('type') + const version = paramsMap.get('version') + + return { + type: type || 'app', + id, + pageId, + blockId, + version + } +} + +const getUserInfo = () => { + const { patchStore } = useStore('globalService') + + // 获取登录用户信息 + useHttp() + .get('/platform-center/api/user/me') + .then((data) => { + if (data) { + patchStore({ userInfo: data }) + } + }) + .catch((error) => { + useModal().message({ message: error.message, status: 'error' }) + }) +} + +export const initData = async () => { + const { store, patchStore } = useStore('globalService') + + patchStore({ getBaseInfo }) + + await getUserInfo() + + patchStore({ isAdmin: () => store.userInfo.resetPasswordToken === 'p_webcenter' }) +} diff --git a/packages/common/js/canvas.js b/packages/common/js/canvas.js index bdf88ae3c0..124b2c37b2 100644 --- a/packages/common/js/canvas.js +++ b/packages/common/js/canvas.js @@ -11,12 +11,13 @@ */ import { PAGE_STATUS } from './constants' -import { useEditorInfo, useResource } from '@opentiny/tiny-engine-meta-register' +import { useResource, useStore } from '@opentiny/tiny-engine-meta-register' export const getCanvasStatus = (data) => { + const { store } = useStore('globalService') // 写死ID 待删除 let isDemo = useResource().resState.isDemo - const { resetPasswordToken } = useEditorInfo().userInfo.value + const { resetPasswordToken } = store.userInfo if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) { isDemo = false @@ -29,7 +30,7 @@ export const getCanvasStatus = (data) => { } else if (!data) { state = PAGE_STATUS.Release } else { - state = useEditorInfo().userInfo.value.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock + state = store.userInfo.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock } return { diff --git a/packages/design-core/index.js b/packages/design-core/index.js index 4785bce04d..58b47e58c3 100644 --- a/packages/design-core/index.js +++ b/packages/design-core/index.js @@ -39,4 +39,4 @@ export { default as defaultRegistry } from './registry' export * from '@opentiny/tiny-engine-meta-register' -export { EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine-common' +export { GenerateCodeService } from '@opentiny/tiny-engine-common' diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index b1aede90fc..7489b663ef 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -23,8 +23,7 @@ import { mergeRegistry, getMergeMeta, initHook, - HOOK_NAME, - useEditorInfo + HOOK_NAME } from '@opentiny/tiny-engine-meta-register' import App from './App.vue' import defaultRegistry from '../registry.js' @@ -73,18 +72,22 @@ const defaultLifeCycles = { } } -export const init = ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, configurators = {} } = {}) => { +export const init = async ({ + selector = '#app', + registry = defaultRegistry, + lifeCycles = {}, + configurators = {} +} = {}) => { const { beforeAppCreate, appCreated, appMounted } = lifeCycles registerConfigurators(configurators) - defaultLifeCycles.beforeAppCreate({ registry }) - beforeAppCreate?.({ registry }) + await defaultLifeCycles.beforeAppCreate({ registry }) + await beforeAppCreate?.({ registry }) const app = createApp(App) defaultLifeCycles.appCreated({ app }) - appCreated?.({ app }) + await appCreated?.({ app }) app.mount(selector) - appMounted?.({ app }) - useEditorInfo().getUserInfo() + await appMounted?.({ app }) } diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue index 232e612c0f..4d89f8f97b 100644 --- a/packages/plugins/block/src/BlockConfig.vue +++ b/packages/plugins/block/src/BlockConfig.vue @@ -105,7 +105,7 @@ import { Input, Tag, Button, Form, FormItem, Radio, Select, Option } from '@open import { constants } from '@opentiny/tiny-engine-utils' import { remove } from '@opentiny/vue-renderless/common/array' import { getEditBlock } from './js/blockSetting' -import { useBlock, useEditorInfo } from '@opentiny/tiny-engine-meta-register' +import { useBlock, useStore } from '@opentiny/tiny-engine-meta-register' import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments' const { BLOCK_OPENNESS } = constants @@ -127,7 +127,7 @@ export default { const state = reactive({ inputVisible: false, inputValue: '', - publicOptions: useEditorInfo().userInfo.value.tenants + publicOptions: useStore('globalService').store.userInfo.tenants }) const groupSelect = ref(null) diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js index 3ede9939e0..f88cbe6236 100644 --- a/packages/plugins/block/src/composable/useBlock.js +++ b/packages/plugins/block/src/composable/useBlock.js @@ -23,11 +23,11 @@ import { getCssObjectFromStyleStr } from '@opentiny/tiny-engine-common/js/css' import { useCanvas, useTranslate, - useEditorInfo, useBreadcrumb, useLayout, getMetaApi, - META_APP + META_APP, + useStore } from '@opentiny/tiny-engine-meta-register' const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants @@ -290,7 +290,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => { // 如果是点击区块管理列表进来的则不需要执行以下操作 if (!isEdit) { // 非编辑状态即为新增，新增默认锁定画布 - block.occupier = useEditorInfo().userInfo.value + block.occupier = useStore('globalService').store.userInfo useLayout().layoutState.pageStatus = getCanvasStatus(block.occupier) addBlock(block) setSaved(false) diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/useResource.js index bbc3828598..aa5eea19d1 100644 --- a/packages/plugins/materials/src/composable/useResource.js +++ b/packages/plugins/materials/src/composable/useResource.js @@ -18,13 +18,13 @@ import { useApp, useCanvas, useTranslate, - useEditorInfo, useBreadcrumb, useLayout, useBlock, useMaterial, getMetaApi, - META_APP + META_APP, + useStore } from '@opentiny/tiny-engine-meta-register' const { COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants @@ -83,7 +83,7 @@ const initBlock = async (blockId) => { } const initPageOrBlock = async () => { - const { pageId, blockId } = useEditorInfo().useInfo() + const { pageId, blockId } = useStore('globalService').store.getBaseInfo() const { setBreadcrumbPage } = useBreadcrumb() if (pageId) { @@ -114,7 +114,7 @@ const initPageOrBlock = async () => { } const handlePopStateEvent = async () => { - const { id, type } = useEditorInfo().useInfo() + const { id, type } = useStore('globalService').store.getBaseInfo() await initPageOrBlock() @@ -123,7 +123,7 @@ const handlePopStateEvent = async () => { } const fetchResource = async ({ isInit = true } = {}) => { - const { id, type } = useEditorInfo().useInfo() + const { id, type } = useStore('globalService').store.getBaseInfo() useApp().appInfoState.selectedId = id const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`) resState.pageTree = appData.componentsTree diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue index 540fea872e..f89ba8c002 100644 --- a/packages/plugins/page/src/PageHistory.vue +++ b/packages/plugins/page/src/PageHistory.vue @@ -6,7 +6,7 @@ import { ref, watchEffect } from 'vue' import { BlockHistoryList } from '@opentiny/tiny-engine-common' import { previewPage } from '@opentiny/tiny-engine-common/js/preview' -import { usePage, useBlock, useEditorInfo, useModal } from '@opentiny/tiny-engine-meta-register' +import { usePage, useBlock, useModal, useStore } from '@opentiny/tiny-engine-meta-register' import { getMergeMeta } from '@opentiny/tiny-engine-meta-register' import { fetchPageHistory } from './http.js' @@ -28,7 +28,7 @@ export default { const list = ref([]) const getHistoryList = (pageId) => { - const { id, version } = useEditorInfo().useInfo() + const { id, version } = useStore('globalService').store.getBaseInfo() const params = version ? `&app=${id}&version=${version}` : '' if (pageId) { diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue index 1f2ec43437..0853c58b7b 100644 --- a/packages/plugins/state/src/Main.vue +++ b/packages/plugins/state/src/Main.vue @@ -75,12 +75,12 @@ import { Button, Search, Tabs, TabItem } from '@opentiny/vue' import { useCanvas, useHistory, - useEditorInfo, useResource, useNotify, useHelp, getMetaApi, - META_APP + META_APP, + useStore } from '@opentiny/tiny-engine-meta-register' import { iconPlus } from '@opentiny/vue-icon' import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment' @@ -245,7 +245,7 @@ export default { Object.assign(state.dataSource, store) const storeList = Object.values(state.dataSource) - const { id } = useEditorInfo().useInfo() + const { id } = useStore('globalService').store.getBaseInfo() updateGlobalState(id, { global_state: storeList }).then((res) => { isPanelShow.value = false setGlobalState(res.global_state || []) @@ -310,7 +310,7 @@ export default { const { setGlobalState } = useCanvas().canvasApi.value if (index !== -1) { - const { id } = useEditorInfo().useInfo() + const { id } = useStore('globalService').store.getBaseInfo() storeListt.splice(index, 1) updateGlobalState(id, { global_state: storeListt }).then((res) => { diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue index aa5e0ca6d3..34d2e58f50 100644 --- a/packages/toolbars/generate-code/src/Main.vue +++ b/packages/toolbars/generate-code/src/Main.vue @@ -18,10 +18,10 @@ import { useCanvas, useNotify, useLayout, - useEditorInfo, getMetaApi, META_APP, - getMergeMeta + getMergeMeta, + useStore } from '@opentiny/tiny-engine-meta-register' import { fs } from '@opentiny/tiny-engine-utils' import { useHttp } from '@opentiny/tiny-engine-http' @@ -102,7 +102,7 @@ export default { const getPreGenerateInfo = async () => { const params = getParams() - const { id } = useEditorInfo().useInfo() + const { id } = useStore('globalService').store.getBaseInfo() const promises = [ useHttp().get(`/app-center/v1/api/apps/schema/${id}`), fetchMetaData(params), From 8974d5217cfc7ce369bb057204fff2483fe8cce7 Mon Sep 17 00:00:00 2001 From: chilingling Date: Tue, 23 Jul 2024 01:46:38 -0700 Subject: [PATCH 02/18] feat: change to signal event --- designer-demo/registry.js | 6 +- designer-demo/src/lifeCycles.js | 6 -- designer-demo/src/main.js | 5 +- .../{initData.js => defaultGlobalService.js} | 26 ++++--- packages/common/composable/index.js | 12 +--- packages/common/composable/useEditorInfo.js | 72 ------------------- packages/common/js/canvas.js | 8 +-- packages/design-core/index.js | 4 +- packages/design-core/src/init.js | 37 ++++++++-- .../engine-cli/template/designer/registry.js | 3 +- packages/plugins/block/src/BlockConfig.vue | 4 +- .../plugins/block/src/composable/useBlock.js | 4 +- .../materials/src/composable/useResource.js | 9 ++- packages/plugins/page/src/PageHistory.vue | 4 +- packages/plugins/state/src/Main.vue | 7 +- packages/register/src/common.js | 27 +++++-- packages/register/src/hooks.js | 3 - packages/register/src/index.js | 2 +- packages/toolbars/generate-code/src/Main.vue | 5 +- 19 files changed, 100 insertions(+), 144 deletions(-) delete mode 100644 designer-demo/src/lifeCycles.js rename packages/common/composable/{initData.js => defaultGlobalService.js} (62%) delete mode 100644 packages/common/composable/useEditorInfo.js diff --git a/designer-demo/registry.js b/designer-demo/registry.js index fb588c0dcf..dee47fa56d 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -42,7 +42,8 @@ import { Layout, Canvas, AppService, - GenerateCodeService + GenerateCodeService, + globalService } from '@opentiny/tiny-engine' import engineConfig from './engine.config' @@ -51,7 +52,8 @@ export default { id: 'engine.root', metas: [ AppService, - GenerateCodeService + GenerateCodeService, + globalService ] }, config: engineConfig, diff --git a/designer-demo/src/lifeCycles.js b/designer-demo/src/lifeCycles.js deleted file mode 100644 index 5f918d5352..0000000000 --- a/designer-demo/src/lifeCycles.js +++ /dev/null @@ -1,6 +0,0 @@ -import { initData } from '@opentiny/tiny-engine' - - -export const beforeAppCreate = async () => { - await initData() -} diff --git a/designer-demo/src/main.js b/designer-demo/src/main.js index 78dc0a461e..cc9460dc84 100644 --- a/designer-demo/src/main.js +++ b/designer-demo/src/main.js @@ -14,14 +14,11 @@ import { init } from '@opentiny/tiny-engine' import { registry } from './defineEntry.js' import { configurators } from './configurators/' -import { beforeAppCreate } from './lifeCycles.js' import 'virtual:svg-icons-register' import '@opentiny/tiny-engine-theme' init({ registry, configurators, - lifeCycles: { - beforeAppCreate - } + createAppSignal: ['global_service_init_finish'] }) diff --git a/packages/common/composable/initData.js b/packages/common/composable/defaultGlobalService.js similarity index 62% rename from packages/common/composable/initData.js rename to packages/common/composable/defaultGlobalService.js index 70fd499e37..e10f79910d 100644 --- a/packages/common/composable/initData.js +++ b/packages/common/composable/defaultGlobalService.js @@ -1,5 +1,6 @@ +import { reactive } from 'vue' import { useHttp } from '@opentiny/tiny-engine-http' -import { useStore, useModal } from '@opentiny/tiny-engine-meta-register' +import { useModal, useMessage } from '@opentiny/tiny-engine-meta-register' const getBaseInfo = () => { const paramsMap = new URLSearchParams(location.search) @@ -18,15 +19,15 @@ const getBaseInfo = () => { } } -const getUserInfo = () => { - const { patchStore } = useStore('globalService') +const state = reactive({}) +const getUserInfo = () => { // 获取登录用户信息 useHttp() .get('/platform-center/api/user/me') .then((data) => { if (data) { - patchStore({ userInfo: data }) + state.userInfo = data } }) .catch((error) => { @@ -35,11 +36,18 @@ const getUserInfo = () => { } export const initData = async () => { - const { store, patchStore } = useStore('globalService') - - patchStore({ getBaseInfo }) - await getUserInfo() + useMessage().publish({ topic: 'global_service_init_finish' }) +} - patchStore({ isAdmin: () => store.userInfo.resetPasswordToken === 'p_webcenter' }) +export default { + id: 'engine.service.globalService', + type: 'MetaService', + options: {}, + state, + apis: { + getBaseInfo, + isAdmin: () => state.userInfo.resetPasswordToken === 'p_webcenter' + }, + init: initData } diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js index 08356cff4f..3b72f5c568 100644 --- a/packages/common/composable/index.js +++ b/packages/common/composable/index.js @@ -1,10 +1,9 @@ import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register' import useApp from './useApp' -import useEditorInfo from './useEditorInfo' export { GenerateCodeService } from './generateCode' -export { initData } from './initData' +export { default as globalService } from './defaultGlobalService' export const AppService = { id: 'engine.service.app', @@ -14,12 +13,3 @@ export const AppService = { name: HOOK_NAME.useApp } } - -export const EditorInfoService = { - id: 'engine.service.editorInfo', - type: 'MetaService', - apis: useEditorInfo(), - composable: { - name: HOOK_NAME.useEditorInfo - } -} diff --git a/packages/common/composable/useEditorInfo.js b/packages/common/composable/useEditorInfo.js deleted file mode 100644 index 250642b242..0000000000 --- a/packages/common/composable/useEditorInfo.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2023 - present TinyEngine Authors. - * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. - * - * Use of this source code is governed by an MIT-style license. - * - * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, - * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR - * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. - * - */ - -import { ref } from 'vue' -import { useHttp } from '@opentiny/tiny-engine-http' -import { useModal } from '@opentiny/tiny-engine-meta-register' - -// web版获取配置信息: 从url中获取 -const _getWebData = () => { - const paramsMap = new URLSearchParams(location.search) - const id = paramsMap.get('id') - const blockId = paramsMap.get('blockid') - const pageId = paramsMap.get('pageid') - const type = paramsMap.get('type') - const version = paramsMap.get('version') - - return { - type: type || 'app', - id, - pageId, - blockId, - version - } -} - -const userInfo = ref({}) -const getUserInfo = () => { - // 获取登录用户信息 - useHttp() - .get('/platform-center/api/user/me') - .then((data) => { - if (data) { - userInfo.value = data - } - }) - .catch((error) => { - useModal().message({ message: error.message, status: 'error' }) - }) -} - -const isAdmin = () => userInfo.value.resetPasswordToken === 'p_webcenter' -/** - * 1、是否是VSCode插件: 通过是否有全局变量window.vscodeBridge判断 - * - * 2、vscode中类型和id - * window.vscodeInjectData - * type: app 应用管理 block 区块管理 - * id: 应用id/blockid - * ...其他详细信息 - * - * 3、web版中，通过url参数判断 - * type: app 应用管理 block 区块管理 - * id: 应用id/blockid - * - */ -export default () => { - return { - useInfo: _getWebData, - getUserInfo, - userInfo, - isAdmin - } -} diff --git a/packages/common/js/canvas.js b/packages/common/js/canvas.js index 124b2c37b2..4a1d24f7ec 100644 --- a/packages/common/js/canvas.js +++ b/packages/common/js/canvas.js @@ -11,13 +11,13 @@ */ import { PAGE_STATUS } from './constants' -import { useResource, useStore } from '@opentiny/tiny-engine-meta-register' +import { useResource, getServiceState } from '@opentiny/tiny-engine-meta-register' export const getCanvasStatus = (data) => { - const { store } = useStore('globalService') + const globalState = getServiceState('engine.service.globalService') // 写死ID 待删除 let isDemo = useResource().resState.isDemo - const { resetPasswordToken } = store.userInfo + const { resetPasswordToken } = globalState.userInfo if (isDemo && [PAGE_STATUS.Developer, PAGE_STATUS.SuperAdmin].includes(resetPasswordToken)) { isDemo = false @@ -30,7 +30,7 @@ export const getCanvasStatus = (data) => { } else if (!data) { state = PAGE_STATUS.Release } else { - state = store.userInfo.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock + state = globalState.userInfo.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock } return { diff --git a/packages/design-core/index.js b/packages/design-core/index.js index 58b47e58c3..dbb6494127 100644 --- a/packages/design-core/index.js +++ b/packages/design-core/index.js @@ -33,10 +33,8 @@ export { default as Styles } from '@opentiny/tiny-engine-setting-styles' export { default as Layout, LayoutService } from '@opentiny/tiny-engine-layout' export { default as Canvas } from '@opentiny/tiny-engine-canvas' export { initPreview } from './src/preview/src/main' -export { PluginPanel, PluginSetting, ToolbarBase } from '@opentiny/tiny-engine-common' +export { GenerateCodeService, PluginPanel, PluginSetting, ToolbarBase, globalService } from '@opentiny/tiny-engine-common' export { default as defaultRegistry } from './registry' export * from '@opentiny/tiny-engine-meta-register' - -export { GenerateCodeService } from '@opentiny/tiny-engine-common' diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 7489b663ef..e16f094d27 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -23,14 +23,15 @@ import { mergeRegistry, getMergeMeta, initHook, - HOOK_NAME + HOOK_NAME, + useMessage } from '@opentiny/tiny-engine-meta-register' import App from './App.vue' import defaultRegistry from '../registry.js' import { registerConfigurators } from './registerConfigurators' const defaultLifeCycles = { - beforeAppCreate: ({ registry }) => { + beforeAppCreate: async ({ registry }) => { // 合并用户自定义注册表 const newRegistry = mergeRegistry(registry, defaultRegistry) if (process.env.NODE_ENV === 'development') { @@ -62,7 +63,7 @@ const defaultLifeCycles = { // 这里暴露到 window 是为了让 canvas 可以读取 window.TinyGlobalConfig = newRegistry.config || {} }, - appCreated: ({ app }) => { + appCreated: async ({ app }) => { initSvgs(app) window.lowcodeI18n = i18n app.use(i18n).use(injectGlobalComponents) @@ -72,11 +73,32 @@ const defaultLifeCycles = { } } +const subscribeSignalFinish = (createAppSignal) => { + return new Promise((resolve) => { + let finishCount = new Set() + const len = createAppSignal.length + + createAppSignal.forEach((name) => { + useMessage().subscribe({ + topic: name, + callback: () => { + finishCount.add(name) + + if (finishCount.size === len) { + resolve() + } + } + }) + }) + }) +} + export const init = async ({ selector = '#app', registry = defaultRegistry, lifeCycles = {}, - configurators = {} + configurators = {}, + createAppSignal = [] } = {}) => { const { beforeAppCreate, appCreated, appMounted } = lifeCycles @@ -84,8 +106,13 @@ export const init = async ({ await defaultLifeCycles.beforeAppCreate({ registry }) await beforeAppCreate?.({ registry }) + + if (createAppSignal.length) { + await subscribeSignalFinish(createAppSignal) + } + const app = createApp(App) - defaultLifeCycles.appCreated({ app }) + await defaultLifeCycles.appCreated({ app }) await appCreated?.({ app }) app.mount(selector) diff --git a/packages/engine-cli/template/designer/registry.js b/packages/engine-cli/template/designer/registry.js index 72bcf82965..70750af911 100644 --- a/packages/engine-cli/template/designer/registry.js +++ b/packages/engine-cli/template/designer/registry.js @@ -41,7 +41,6 @@ import { Styles, Layout, Canvas, - EditorInfoService, AppService, GenerateCodeService } from '@opentiny/tiny-engine' @@ -50,7 +49,7 @@ import engineConfig from './engine.config' export default { root: { id: 'engine.root', - metas: [EditorInfoService, AppService, GenerateCodeService] + metas: [AppService, GenerateCodeService] }, config: engineConfig, layout: { diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue index 4d89f8f97b..021820ef09 100644 --- a/packages/plugins/block/src/BlockConfig.vue +++ b/packages/plugins/block/src/BlockConfig.vue @@ -105,7 +105,7 @@ import { Input, Tag, Button, Form, FormItem, Radio, Select, Option } from '@open import { constants } from '@opentiny/tiny-engine-utils' import { remove } from '@opentiny/vue-renderless/common/array' import { getEditBlock } from './js/blockSetting' -import { useBlock, useStore } from '@opentiny/tiny-engine-meta-register' +import { useBlock, getServiceState } from '@opentiny/tiny-engine-meta-register' import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments' const { BLOCK_OPENNESS } = constants @@ -127,7 +127,7 @@ export default { const state = reactive({ inputVisible: false, inputValue: '', - publicOptions: useStore('globalService').store.userInfo.tenants + publicOptions: getServiceState('engine.service.globalService').userInfo.tenants }) const groupSelect = ref(null) diff --git a/packages/plugins/block/src/composable/useBlock.js b/packages/plugins/block/src/composable/useBlock.js index f88cbe6236..9cb35162f2 100644 --- a/packages/plugins/block/src/composable/useBlock.js +++ b/packages/plugins/block/src/composable/useBlock.js @@ -27,7 +27,7 @@ import { useLayout, getMetaApi, META_APP, - useStore + getServiceState } from '@opentiny/tiny-engine-meta-register' const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants @@ -290,7 +290,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => { // 如果是点击区块管理列表进来的则不需要执行以下操作 if (!isEdit) { // 非编辑状态即为新增，新增默认锁定画布 - block.occupier = useStore('globalService').store.userInfo + block.occupier = getServiceState('engine.service.globalService').userInfo useLayout().layoutState.pageStatus = getCanvasStatus(block.occupier) addBlock(block) setSaved(false) diff --git a/packages/plugins/materials/src/composable/useResource.js b/packages/plugins/materials/src/composable/useResource.js index aa5eea19d1..df1346ce78 100644 --- a/packages/plugins/materials/src/composable/useResource.js +++ b/packages/plugins/materials/src/composable/useResource.js @@ -23,8 +23,7 @@ import { useBlock, useMaterial, getMetaApi, - META_APP, - useStore + META_APP } from '@opentiny/tiny-engine-meta-register' const { COMPONENT_NAME, DEFAULT_INTERCEPTOR } = constants @@ -83,7 +82,7 @@ const initBlock = async (blockId) => { } const initPageOrBlock = async () => { - const { pageId, blockId } = useStore('globalService').store.getBaseInfo() + const { pageId, blockId } = getMetaApi('engine.service.globalService').getBaseInfo() const { setBreadcrumbPage } = useBreadcrumb() if (pageId) { @@ -114,7 +113,7 @@ const initPageOrBlock = async () => { } const handlePopStateEvent = async () => { - const { id, type } = useStore('globalService').store.getBaseInfo() + const { id, type } = getMetaApi('engine.service.globalService').getBaseInfo() await initPageOrBlock() @@ -123,7 +122,7 @@ const handlePopStateEvent = async () => { } const fetchResource = async ({ isInit = true } = {}) => { - const { id, type } = useStore('globalService').store.getBaseInfo() + const { id, type } = getMetaApi('engine.service.globalService').getBaseInfo() useApp().appInfoState.selectedId = id const appData = await useHttp().get(`/app-center/v1/api/apps/schema/${id}`) resState.pageTree = appData.componentsTree diff --git a/packages/plugins/page/src/PageHistory.vue b/packages/plugins/page/src/PageHistory.vue index f89ba8c002..82f57194da 100644 --- a/packages/plugins/page/src/PageHistory.vue +++ b/packages/plugins/page/src/PageHistory.vue @@ -6,7 +6,7 @@ import { ref, watchEffect } from 'vue' import { BlockHistoryList } from '@opentiny/tiny-engine-common' import { previewPage } from '@opentiny/tiny-engine-common/js/preview' -import { usePage, useBlock, useModal, useStore } from '@opentiny/tiny-engine-meta-register' +import { usePage, useBlock, useModal, getMetaApi } from '@opentiny/tiny-engine-meta-register' import { getMergeMeta } from '@opentiny/tiny-engine-meta-register' import { fetchPageHistory } from './http.js' @@ -28,7 +28,7 @@ export default { const list = ref([]) const getHistoryList = (pageId) => { - const { id, version } = useStore('globalService').store.getBaseInfo() + const { id, version } = getMetaApi('engine.service.globalService').getBaseInfo() const params = version ? `&app=${id}&version=${version}` : '' if (pageId) { diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue index 0853c58b7b..afed8de686 100644 --- a/packages/plugins/state/src/Main.vue +++ b/packages/plugins/state/src/Main.vue @@ -79,8 +79,7 @@ import { useNotify, useHelp, getMetaApi, - META_APP, - useStore + META_APP } from '@opentiny/tiny-engine-meta-register' import { iconPlus } from '@opentiny/vue-icon' import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment' @@ -245,7 +244,7 @@ export default { Object.assign(state.dataSource, store) const storeList = Object.values(state.dataSource) - const { id } = useStore('globalService').store.getBaseInfo() + const { id } = getMetaApi('engine.service.globalService').getBaseInfo() updateGlobalState(id, { global_state: storeList }).then((res) => { isPanelShow.value = false setGlobalState(res.global_state || []) @@ -310,7 +309,7 @@ export default { const { setGlobalState } = useCanvas().canvasApi.value if (index !== -1) { - const { id } = useStore('globalService').store.getBaseInfo() + const { id } = getMetaApi('engine.service.globalService').getBaseInfo() storeListt.splice(index, 1) updateGlobalState(id, { global_state: storeListt }).then((res) => { diff --git a/packages/register/src/common.js b/packages/register/src/common.js index 2b733b3397..09588d67ef 100644 --- a/packages/register/src/common.js +++ b/packages/register/src/common.js @@ -10,6 +10,7 @@ * */ +import { readonly } from 'vue' import { initHook } from './hooks' const vueLifeHook = [ @@ -46,7 +47,7 @@ export const templateHashMap = {} */ export const layoutHashMap = {} -export const metasHashMap = {} +export const metaHashMap = {} export const apisMap = {} export const optionsMap = {} @@ -63,6 +64,16 @@ export const getMetaApi = (id, key) => { return apisMap[id] } +export const getServiceState = (id) => { + if (!metaHashMap[id]) { + return + } + + if (metaHashMap[id].state) { + return readonly(metaHashMap[id].state) + } +} + export const getOptions = (id) => { return optionsMap[id] } @@ -159,23 +170,31 @@ export const preprocessRegistry = (registry) => { }) } +// 调用 service init 方法 +const initService = (registry) => { + if (registry?.type === 'MetaService' && typeof registry?.init === 'function') { + registry.init() + } +} + export const generateRegistry = (registry) => { - Object.entries(registry).forEach(([key, value]) => { + Object.entries(registry).forEach(async ([key, value]) => { if (typeof value === 'object' && value) { const { id } = value // 如果匹配到了id，说明是元服务配置，对元服务配置做读取和写入 if (id && key !== 'metaData') { handleRegistryProp(id, value) - metasHashMap[id] = value + metaHashMap[id] = value } else { // TODO: 其他类型配置处理 } + initService(value) generateRegistry(value) } }) } export const getMergeMeta = (id) => { - return metasHashMap[id] + return metaHashMap[id] } diff --git a/packages/register/src/hooks.js b/packages/register/src/hooks.js index 8deafd8ecb..2f9f427bbf 100644 --- a/packages/register/src/hooks.js +++ b/packages/register/src/hooks.js @@ -7,7 +7,6 @@ export const HOOK_NAME = { useProperties: 'properties', useProperty: 'property', useSaveLocal: 'saveLocal', - useEditorInfo: 'editorInfo', useBlock: 'block', useTranslate: 'translate', usePage: 'page', @@ -31,7 +30,6 @@ const hooksState = { [HOOK_NAME.useProperties]: {}, [HOOK_NAME.useProperty]: {}, [HOOK_NAME.useSaveLocal]: {}, - [HOOK_NAME.useEditorInfo]: {}, [HOOK_NAME.useBlock]: {}, [HOOK_NAME.useTranslate]: {}, [HOOK_NAME.usePage]: {}, @@ -60,7 +58,6 @@ export const useResource = (...args) => getHook(HOOK_NAME.useResource, args) export const useHistory = (...args) => getHook(HOOK_NAME.useHistory, args) export const useProperties = (...args) => getHook(HOOK_NAME.useProperties, args) export const useSaveLocal = (...args) => getHook(HOOK_NAME.useSaveLocal, args) -export const useEditorInfo = (...args) => getHook(HOOK_NAME.useEditorInfo, args) export const useBlock = (...args) => getHook(HOOK_NAME.useBlock, args) export const useTranslate = (...args) => getHook(HOOK_NAME.useTranslate, args) export const usePage = (...args) => getHook(HOOK_NAME.usePage, args) diff --git a/packages/register/src/index.js b/packages/register/src/index.js index 3faa004ef1..876e1ec20e 100644 --- a/packages/register/src/index.js +++ b/packages/register/src/index.js @@ -10,7 +10,7 @@ * */ -export { getMergeMeta, getMetaApi, getOptions } from './common' +export { getMergeMeta, getMetaApi, getOptions, getServiceState } from './common' export { useCompile } from './templateHash' export { defineEntry, callEntry, beforeCallEntry, afterCallEntry, mergeRegistry, getMergeRegistry } from './entryHash' export { getLayoutComponent } from './layoutHash' diff --git a/packages/toolbars/generate-code/src/Main.vue b/packages/toolbars/generate-code/src/Main.vue index 34d2e58f50..437bcfe75e 100644 --- a/packages/toolbars/generate-code/src/Main.vue +++ b/packages/toolbars/generate-code/src/Main.vue @@ -20,8 +20,7 @@ import { useLayout, getMetaApi, META_APP, - getMergeMeta, - useStore + getMergeMeta } from '@opentiny/tiny-engine-meta-register' import { fs } from '@opentiny/tiny-engine-utils' import { useHttp } from '@opentiny/tiny-engine-http' @@ -102,7 +101,7 @@ export default { const getPreGenerateInfo = async () => { const params = getParams() - const { id } = useStore('globalService').store.getBaseInfo() + const { id } = getMetaApi('engine.service.globalService').getBaseInfo() const promises = [ useHttp().get(`/app-center/v1/api/apps/schema/${id}`), fetchMetaData(params), From 22df45d70c27c5a669730422deafeaf9b96ae323 Mon Sep 17 00:00:00 2001 From: gene9831 Date: Tue, 23 Jul 2024 05:57:43 -0700 Subject: [PATCH 03/18] refactor: useApp migrate to globalService --- designer-demo/registry.js | 7 +- .../common/composable/defaultGlobalService.js | 71 +++++++++++++++++-- packages/common/composable/index.js | 13 ---- packages/common/composable/useApp.js | 71 ------------------- .../CollectionConfigurator.vue | 5 +- .../VariableConfigurator.vue | 8 +-- packages/design-core/src/App.vue | 34 +++++---- .../src/preview/src/previewApp.vue | 23 +++--- .../engine-cli/template/designer/registry.js | 3 +- .../plugins/block/src/js/blockSetting.jsx | 21 +++--- packages/plugins/bridge/src/BridgeSetting.vue | 4 +- packages/plugins/bridge/src/js/resource.js | 16 +++-- .../plugins/datasource/src/DataSourceForm.vue | 13 ++-- .../src/DataSourceGlobalDataHandler.vue | 4 +- .../plugins/datasource/src/DataSourceList.vue | 6 +- packages/plugins/i18n/src/Main.vue | 4 +- .../materials/src/composable/useResource.js | 6 +- .../src/meta/block/src/BlockDetail.vue | 4 +- .../src/meta/block/src/BlockGroup.vue | 16 ++--- .../src/meta/block/src/BlockGroupPanel.vue | 13 +++- .../src/meta/block/src/BlockList.vue | 6 +- .../materials/src/meta/block/src/http.js | 4 +- packages/plugins/page/src/Main.vue | 4 +- .../plugins/page/src/PageFolderSetting.vue | 5 +- packages/plugins/page/src/PageSetting.vue | 7 +- packages/plugins/page/src/PageTree.vue | 23 ++++-- packages/plugins/robot/src/js/robotSetting.js | 4 +- packages/register/src/hooks.js | 3 - packages/toolbars/logo/src/AppList.vue | 10 +-- packages/toolbars/logo/src/Main.vue | 10 +-- 30 files changed, 204 insertions(+), 214 deletions(-) delete mode 100644 packages/common/composable/useApp.js diff --git a/designer-demo/registry.js b/designer-demo/registry.js index dee47fa56d..a5a8b78a48 100644 --- a/designer-demo/registry.js +++ b/designer-demo/registry.js @@ -41,7 +41,6 @@ import { Styles, Layout, Canvas, - AppService, GenerateCodeService, globalService } from '@opentiny/tiny-engine' @@ -50,11 +49,7 @@ import engineConfig from './engine.config' export default { root: { id: 'engine.root', - metas: [ - AppService, - GenerateCodeService, - globalService - ] + metas: [GenerateCodeService, globalService] }, config: engineConfig, layout: { diff --git a/packages/common/composable/defaultGlobalService.js b/packages/common/composable/defaultGlobalService.js index e10f79910d..439d300fd7 100644 --- a/packages/common/composable/defaultGlobalService.js +++ b/packages/common/composable/defaultGlobalService.js @@ -1,6 +1,6 @@ -import { reactive } from 'vue' import { useHttp } from '@opentiny/tiny-engine-http' -import { useModal, useMessage } from '@opentiny/tiny-engine-meta-register' +import { useMessage, useModal } from '@opentiny/tiny-engine-meta-register' +import { reactive } from 'vue' const getBaseInfo = () => { const paramsMap = new URLSearchParams(location.search) @@ -19,11 +19,36 @@ const getBaseInfo = () => { } } -const state = reactive({}) +const state = reactive({ + userInfo: null, + appInfo: { + // 应用列表 + list: [], + // 当前应用 + app: { + id: '', + name: '', + app_desc: '', + app_website: '', + obs_url: null, + published_at: '', + created_at: '', + updated_at: '', + platform: '', + state: null, + published: false, + tenant: null, + editor_url: '' + }, + get appId() { + return this.app.id + } + } +}) -const getUserInfo = () => { +const getUserInfo = async () => { // 获取登录用户信息 - useHttp() + await useHttp() .get('/platform-center/api/user/me') .then((data) => { if (data) { @@ -35,9 +60,41 @@ const getUserInfo = () => { }) } -export const initData = async () => { +// 获取当前应用的信息 +const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`) + +// 获取应用列表 +const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`) + +const { subscribe, publish } = useMessage() + +subscribe({ + topic: 'app_id_changed', + callback: (appId) => { + fetchAppInfo(appId).then((app) => { + state.appInfo.app = app + // 监听应用 ID 变化，根据应用名称设置网页 title + document.title = `${app.name} —— TinyEditor 前端可视化设计器` + + publish({ topic: 'app_info_changed' }) + }) + } +}) + +subscribe({ + topic: 'platform_id_changed', + callback: (platformId) => { + fetchAppList(platformId).then((list) => { + state.appInfo.list = list + + publish({ topic: 'app_list_changed' }) + }) + } +}) + +const initData = async () => { await getUserInfo() - useMessage().publish({ topic: 'global_service_init_finish' }) + publish({ topic: 'global_service_init_finish' }) } export default { diff --git a/packages/common/composable/index.js b/packages/common/composable/index.js index 3b72f5c568..397d149874 100644 --- a/packages/common/composable/index.js +++ b/packages/common/composable/index.js @@ -1,15 +1,2 @@ -import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register' - -import useApp from './useApp' - export { GenerateCodeService } from './generateCode' export { default as globalService } from './defaultGlobalService' - -export const AppService = { - id: 'engine.service.app', - type: 'MetaService', - apis: useApp(), - composable: { - name: HOOK_NAME.useApp - } -} diff --git a/packages/common/composable/useApp.js b/packages/common/composable/useApp.js deleted file mode 100644 index 88a97773a9..0000000000 --- a/packages/common/composable/useApp.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * Copyright (c) 2023 - present TinyEngine Authors. - * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. - * - * Use of this source code is governed by an MIT-style license. - * - * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, - * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR - * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. - * - */ - -import { reactive, watch } from 'vue' -import { useHttp } from '@opentiny/tiny-engine-http' - -const defaultState = { - // 应用列表 - list: [], - // 当前选中的应用 - selectedApp: { - id: '', - name: '', - app_desc: '', - app_website: '', - obs_url: null, - published_at: '', - created_at: '', - updated_at: '', - platform: '', - state: null, - published: false, - tenant: null, - editor_url: '' - }, - // 当前选中的appId - selectedId: '' -} - -const appInfoState = reactive({ ...defaultState }) - -// 获取当前应用的信息 -const fetchAppInfo = (appId) => useHttp().get(`/app-center/api/apps/detail/${appId}`) - -watch( - () => appInfoState.selectedId, - (id) => { - fetchAppInfo(id).then((app) => { - appInfoState.selectedApp = app - // 监听应用 ID 变化，根据应用名称设置网页 title - document.title = `${app.name} —— TinyEditor 前端可视化设计器` - }) - } -) - -// 获取应用列表 -const fetchAppList = (platformId) => useHttp().get(`/app-center/api/apps/list/${platformId}`) - -const updateApp = async (id) => { - const appInfo = await fetchAppInfo(id) - appInfoState.selectedApp = appInfo - appInfoState.selectedId = appInfo.id -} - -export default () => { - return { - appInfoState, - fetchAppInfo, - fetchAppList, - updateApp - } -} diff --git a/packages/configurator/src/collection-configurator/CollectionConfigurator.vue b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue index cc4c695ffe..dece87430c 100644 --- a/packages/configurator/src/collection-configurator/CollectionConfigurator.vue +++ b/packages/configurator/src/collection-configurator/CollectionConfigurator.vue @@ -10,7 +10,7 @@