feat: editorInfo migrate to globalService (opentiny#702)

* feat: editorInfo migrate to globalService

* feat: change to signal event

* refactor: useApp migrate to globalService

* refactor: optimize globalService state structure

* feat: metaservice provide default apis: getState and setState

* feat: poc refactor

* feat: service poc improve

* feat: improve service definition

* feat: reduce the props exposed by service

* fix: rebase to latest code

* fix: change by review comment

* fix: change import name

* fix: use constant var instead of string

* fix: adjust import order

* fix: add unsubscribe logic

* change by review

* fix: change by review comment

* fix: add initTimeout check

---------

Co-authored-by: gene9831 <[email protected]>

designer-demo/registry.js

@@ -41,16 +41,15 @@ import {
   Styles,
   Layout,
   Canvas,
-  EditorInfoService,
-  AppService,
-  GenerateCodeService
+  GenerateCodeService,
+  GlobalService
 } from '@opentiny/tiny-engine'
 import engineConfig from './engine.config'
 
 export default {
   root: {
     id: 'engine.root',
-    metas: [EditorInfoService, AppService, GenerateCodeService]
+    metas: [GenerateCodeService, GlobalService]
   },
   config: engineConfig,
   layout: {

designer-demo/src/main.js

@@ -17,4 +17,8 @@ import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
 import '@opentiny/tiny-engine-theme'
 
-init({ registry, configurators })
+init({
+  registry,
+  configurators,
+  createAppSignal: ['global_service_init_finish']
+})

packages/common/composable/defaultGlobalService.js

@@ -0,0 +1,125 @@
+import { useHttp } from '@opentiny/tiny-engine-http'
+import { useMessage, useModal, defineService, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
+import { watch } from 'vue'
+
+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 initialState = {
+  userInfo: null,
+  // 当前应用
+  appInfo: {
+    id: '',
+    name: '',
+    app_desc: '',
+    app_website: '',
+    obs_url: null,
+    published_at: '',
+    created_at: '',
+    updated_at: '',
+    platform: '',
+    state: null,
+    published: false,
+    tenant: null,
+    editor_url: ''
+  },
+  // 应用列表
+  appList: []
+}
+
+const getUserInfo = () => {
+  // 获取登录用户信息
+  return useHttp()
+    .get('/platform-center/api/user/me')
+    .catch((error) => {
+      useModal().message({ message: error.message, status: 'error' })
+    })
+}
+
+// 获取当前应用的信息
+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()
+
+export default defineService({
+  id: META_SERVICE.GlobalService,
+  type: 'MetaService',
+  options: {},
+  initialState,
+  init: ({ state }) => {
+    watch(
+      () => state.appInfo,
+      (appInfo) => {
+        publish({ topic: 'app_info_changed', data: appInfo })
+      }
+    )
+
+    watch(
+      () => state.appList,
+      (appList) => {
+        publish({ topic: 'app_list_changed', data: appList })
+      }
+    )
+
+    subscribe({
+      topic: 'app_id_changed',
+      callback: (appId) => {
+        if (!appId) {
+          // eslint-disable-next-line no-console
+          console.error('Invalid appId received in app_id_changed event')
+
+          return
+        }
+
+        fetchAppInfo(appId).then((app) => {
+          state.appInfo = app
+          // 监听应用 ID 变化，根据应用名称设置网页 title
+          document.title = `${app.name} —— TinyEditor 前端可视化设计器`
+        })
+      }
+    })
+
+    subscribe({
+      topic: 'platform_id_changed',
+      callback: (platformId) => {
+        if (!platformId) {
+          // eslint-disable-next-line no-console
+          console.error('Received platform_id_changed event with no platformId')
+
+          return
+        }
+        fetchAppList(platformId).then((list) => {
+          state.appList = list
+        })
+      }
+    })
+
+    getUserInfo().then((data) => {
+      if (data) {
+        state.userInfo = data
+      }
+      publish({ topic: 'global_service_init_finish' })
+    })
+  },
+  apis: ({ state }) => ({
+    getBaseInfo,
+    isAdmin: () => state.userInfo.resetPasswordToken === 'p_webcenter'
+  })
+})

packages/common/composable/index.js

@@ -1,24 +1,2 @@
-import { HOOK_NAME } from '@opentiny/tiny-engine-meta-register'
-
-import useApp from './useApp'
-import useEditorInfo from './useEditorInfo'
-
 export { GenerateCodeService } from './generateCode'
-
-export const AppService = {
-  id: 'engine.service.app',
-  type: 'MetaService',
-  apis: useApp(),
-  composable: {
-    name: HOOK_NAME.useApp
-  }
-}
-
-export const EditorInfoService = {
-  id: 'engine.service.editorInfo',
-  type: 'MetaService',
-  apis: useEditorInfo(),
-  composable: {
-    name: HOOK_NAME.useEditorInfo
-  }
-}
+export { default as GlobalService } from './defaultGlobalService'

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, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 
 export const getCanvasStatus = (data) => {
+  const globalState = getMetaApi(META_SERVICE.GlobalService).getState()
   // 写死ID 待删除
   let isDemo = useResource().resState.isDemo
-  const { resetPasswordToken } = useEditorInfo().userInfo.value
+  const { resetPasswordToken } = globalState.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 = globalState.userInfo.id === data.id ? PAGE_STATUS.Occupy : PAGE_STATUS.Lock
   }
 
   return {

packages/configurator/src/collection-configurator/CollectionConfigurator.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { useApp, useModal } from '@opentiny/tiny-engine-meta-register'
+import { useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { useHttp } from '@opentiny/tiny-engine-http'
 import { Option, Select, Tooltip } from '@opentiny/vue'
 import { IconConmentRefresh } from '@opentiny/vue-icon'
@@ -49,7 +49,8 @@ export default {
 
     const fetchDataSourceList = (appId) => http.get(`/app-center/api/sources/list/${appId}`)
 
-    fetchDataSourceList(useApp().appInfoState.selectedId).then((data) => {
+    const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+    fetchDataSourceList(appId).then((data) => {
       options.value = data
     })
 

packages/configurator/src/variable-configurator/VariableConfigurator.vue

@@ -120,12 +120,12 @@
 <script>
 import { VueMonaco as MonacoEditor, SvgButton } from '@opentiny/tiny-engine-common'
 import {
-  useApp,
   useCanvas,
   useProperties,
   useResource,
   getMetaApi,
-  META_APP
+  META_APP,
+  META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
 import { getCommentByKey } from '@opentiny/tiny-engine-common/js/comment'
 import { formatString, generate, parse, traverse } from '@opentiny/tiny-engine-common/js/ast'
@@ -487,9 +487,9 @@ export default {
         state.variables = bindProperties
       } else if (item.id === 'datasource') {
         state.bindPrefix = CONSTANTS.DATASOUCEPREFIX
-        const { appInfoState } = useApp()
         const url = new URLSearchParams(location.search)
-        const selectedId = appInfoState.selectedId || url.get('id')
+        const appId = getMetaApi(META_SERVICE.GlobalService).getState().appInfo.id
+        const selectedId = appId || url.get('id')
 
         // 实时请求数据源列表数据，保证数据源获取最新的数据源数据
         http.get(`/app-center/api/sources/list/${selectedId}`).then((data) => {