diff --git a/src/pages/devtools/components/micro-app-env/index.module.less b/src/pages/devtools/components/micro-app-env/index.module.less index d49031b..f8e9232 100755 --- a/src/pages/devtools/components/micro-app-env/index.module.less +++ b/src/pages/devtools/components/micro-app-env/index.module.less @@ -19,3 +19,9 @@ text-align: left; } } + +.detailIcon { + margin-left: 5px; + color: inherit; + text-decoration: none; +} diff --git a/src/pages/devtools/components/micro-app-env/index.tsx b/src/pages/devtools/components/micro-app-env/index.tsx index 7ec6534..b3d19ab 100755 --- a/src/pages/devtools/components/micro-app-env/index.tsx +++ b/src/pages/devtools/components/micro-app-env/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; -import { MICRO_APP_ENV_LIST } from '../../config'; +import { MICRO_APP_ENV_INFO } from '../../config'; import { DevToolsInfo } from '../../types'; import styles from './index.module.less'; @@ -21,35 +21,50 @@ const MicroAppEnv: React.FC = (props) => { }, ); }, []); + if (!props.info.currentMicroApp?.env) { + return null; + } + + const showDetailIcon = (link: string) => ( + + + + ); return (
- - - - - - { MICRO_APP_ENV_LIST.map(p => ( + + + + + + + + - - + + - )) } + { Object.keys(props.info.currentMicroApp?.env).map(p => ( + + + + + + )) } +
NameValueDescribe
NameValueDescribe
-
{ p.name }
- 		-
- { p.name === '__MICRO_APP_VERSION__' - ? JSON.stringify(devInfo) - : JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) || 'undefined' } -
+
__MICRO_APP_VERSION__
{ p.describe }{ JSON.stringify(devInfo) }微前端版本号
+
+ { p } + { showDetailIcon(MICRO_APP_ENV_INFO[p]?.url) } +
+ 		{ JSON.stringify(props.info.currentMicroApp?.env[p]) || 'undefined' }{ MICRO_APP_ENV_INFO[p]?.describe }
diff --git a/src/pages/devtools/config/index.ts b/src/pages/devtools/config/index.ts index 9afeb60..718b70f 100644 --- a/src/pages/devtools/config/index.ts +++ b/src/pages/devtools/config/index.ts @@ -5,10 +5,25 @@ export const HEADER_TAB_LIST = [ { name: 'ROUTE_MATCH', label: 'Route' }, ]; -export const MICRO_APP_ENV_LIST: { name: string; describe: string;eval: string }[] = [ - { name: '__MICRO_APP_ENVIRONMENT__', describe: '判断应用是否在微前端环境中', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_ENVIRONMENT__||window.__MICRO_APP_ENVIRONMENT__' }, - { name: '__MICRO_APP_VERSION__', describe: '微前端版本号', eval: 'document.querySelector("micro-app")?.version' }, - { name: '__MICRO_APP_NAME__', describe: '应用名称', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_NAME__||window.__MICRO_APP_NAME__' }, - { name: '__MICRO_APP_PUBLIC_PATH__', describe: '子应用的静态资源前缀', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_PUBLIC_PATH__||window.__MICRO_APP_PUBLIC_PATH__' }, - { name: '__MICRO_APP_BASE_ROUTE__', describe: '子应用的基础路由', eval: 'window.__MICRO_APP_PROXY_WINDOW__?.__MICRO_APP_ENVIRONMENT__||window.__MICRO_APP_ENVIRONMENT__' }, -]; +export const MICRO_APP_ENV_INFO = { + __MICRO_APP_ENVIRONMENT__: { + describe: '判断应用是否在微前端环境中', + url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_environment__', + }, + __MICRO_APP_NAME__: { + describe: '应用名称', + url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_name__', + }, + __MICRO_APP_PUBLIC_PATH__: { + describe: '子应用的静态资源前缀', + url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_public_path__', + }, + __MICRO_APP_BASE_URL__: { + describe: '子应用的基础网址', + url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__', + }, + __MICRO_APP_BASE_ROUTE__: { + describe: '子应用的基础路由', + url: 'https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/env?id=__micro_app_base_route__', + }, +}; diff --git a/src/pages/devtools/dev-open.tsx b/src/pages/devtools/dev-open.tsx index 6d17744..81836fb 100644 --- a/src/pages/devtools/dev-open.tsx +++ b/src/pages/devtools/dev-open.tsx @@ -1,14 +1,12 @@ import React from 'react'; -import { decodeJSON } from '@/utils/json'; - import Communicate from './components/communicate'; import Console from './components/console-log'; import HeaderTabs from './components/header-tabs'; import MicroAppEnv from './components/micro-app-env'; import Route from './components/route-match'; -import { HEADER_TAB_LIST, MICRO_APP_ENV_LIST } from './config'; -import { DevToolsInfo, DevToolsMicroAppInfo } from './types'; +import { HEADER_TAB_LIST } from './config'; +import { DevToolsInfo } from './types'; import styles from './index.module.less'; diff --git a/src/pages/devtools/index.tsx b/src/pages/devtools/index.tsx old mode 100755 new mode 100644 index 13ced5b..5a08220 --- a/src/pages/devtools/index.tsx +++ b/src/pages/devtools/index.tsx @@ -8,12 +8,12 @@ import HeaderTabs from './components/header-tabs'; import MicroAppEnv from './components/micro-app-env'; import Route from './components/route-match'; import ViewApp from './components/view-app'; -import { HEADER_TAB_LIST, MICRO_APP_ENV_LIST } from './config'; +import { HEADER_TAB_LIST } from './config'; import { DevToolsInfo, DevToolsMicroAppInfo } from './types'; import styles from './index.module.less'; -interface DevToolsPageProps {} +interface DevToolsPageProps { } interface DevToolsPageState { activeTab: string; @@ -28,7 +28,17 @@ class DevToolsPage extends React.PureComponent `[${JSON.stringify(p.name)}]: ${p.eval}`).join(',')}})`, + `JSON.stringify(function (){ + const thisWindow = window.__MICRO_APP_PROXY_WINDOW__ || window; + const allKey = JSON.stringify(Object.keys(thisWindow)); + let microAppInfo = {}; + for (let el of JSON.parse(allKey)){ + if (el.indexOf('__MICRO_APP') > -1){ + microAppInfo[el] = thisWindow[el]; + } + } + return microAppInfo; + }())`, (res: string) => { const env = decodeJSON(res); if (env) {