From 931c32e440ddb4ed2c22d3090f373234baf3c743 Mon Sep 17 00:00:00 2001
From: wanghuimin45 <wanghuimin45@jd.com>
Date: Thu, 19 Oct 2023 15:49:33 +0800
Subject: [PATCH] fix: micro-app-version-fix

---
 .../components/micro-app-env/index.tsx        | 63 ++++++++++++-------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/pages/devtools/components/micro-app-env/index.tsx b/src/pages/devtools/components/micro-app-env/index.tsx
index f645302..7ec6534 100755
--- a/src/pages/devtools/components/micro-app-env/index.tsx
+++ b/src/pages/devtools/components/micro-app-env/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { MICRO_APP_ENV_LIST } from '../../config';
 import { DevToolsInfo } from '../../types';
@@ -9,34 +9,51 @@ interface MicroAppEnvProps {
   info: DevToolsInfo;
 }
 
-const MicroAppEnv: React.FC<MicroAppEnvProps> = props => (
-  <div className={styles.container}>
-    <table className={styles.table}>
-      <tr>
-        <th>Name</th>
-        <th>Value</th>
-        <th>Describe</th>
-      </tr>
-      {
-        MICRO_APP_ENV_LIST.map(p => (
+const MicroAppEnv: React.FC<MicroAppEnvProps> = (props) => {
+  const [devInfo, setDevInfo] = React.useState({});
+  useEffect(() => {
+    chrome.devtools.inspectedWindow.eval(
+      'document.querySelector("micro-app")?.version',
+      (res: string) => {
+        if (res) {
+          setDevInfo(res);
+        }
+      },
+    );
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <table className={styles.table}>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+          <th>Describe</th>
+        </tr>
+        { MICRO_APP_ENV_LIST.map(p => (
           <tr>
-            <td><div>{ p.name }</div></td>
             <td>
-              <div style={{
-                width: '1200px',
-                overflow: 'hidden',
-              }}
+              <div>{ p.name }</div>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: '1200px',
+                  overflow: 'hidden',
+                }}
               >
-                { JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) ?? 'undefined' }
-
+                { p.name === '__MICRO_APP_VERSION__'
+                  ? JSON.stringify(devInfo)
+                  : JSON.stringify(props.info.currentMicroApp?.env?.[p.name]) || 'undefined' }
               </div>
             </td>
             <td>{ p.describe }</td>
           </tr>
-        ))
-      }
-    </table>
-  </div>
-);
+        )) }
+      </table>
+      <div />
+    </div>
+  );
+};
 
 export default MicroAppEnv;