mp system panel finish

qkang07 · wqcstrong · commit 0d3c5b124635 · 2025-01-17T13:46:03.000+08:00
diff --git a/.env b/.env
@@ -15,4 +15,3 @@ VITE_PLUGIN_DOC=https://github.com/HuolalaTech/page-spy/blob/main/docs/plugin.md
 VITE_PLUGIN_RRWEB=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-rrweb
 VITE_PLUGIN_DATA_HARBOR=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-data-harbor
 VITE_PLUGIN_RN_STORAGE=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-rn-async-storage
-VITE_API_BASE=localhost:6752
diff --git a/src/components/SystemContent/MPSysInfo/index.tsx b/src/components/SystemContent/MPSysInfo/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './index.less';
 import '../index.less';
-import { Card, Typography, Grid, Row, Col } from 'antd';
+import { Card, Typography, Grid, Row, Col, Empty, Space, Divider } from 'antd';
 import {
   AppAuthSettings,
   AuthInfo,
@@ -27,14 +27,15 @@ const Schemas = [
     title: '基础信息',
     schema: DeviceInfo,
   },
-  {
-    title: '手机系统信息',
-    schema: SysInfo,
-  },
   {
     title: '应用授权',
     schema: AppAuthSettings,
   },
+  {
+    title: '手机系统信息',
+    schema: SysInfo,
+  },
+
   {
     title: '用户授权',
     schema: AuthInfo,
@@ -71,10 +72,22 @@ const MPSysInfo = (props: Props) => {
             <Col span={8}>
               <div className="mp-info-main">
                 <img className="info-icon" src={clientInfo?.os.logo} />
-                <span>
-                  {sysInfo?.brand} {sysInfo?.model} {clientInfo?.os.name}{' '}
-                  {clientInfo?.os.version}
-                </span>
+                <Space
+                  split={
+                    <Divider style={{ marginInline: 0 }} type="vertical" />
+                  }
+                  size="small"
+                >
+                  {[
+                    sysInfo?.brand,
+                    sysInfo?.model,
+                    clientInfo?.os.name + ' ' + clientInfo?.os.version,
+                  ]
+                    .filter((v) => v)
+                    .map((v, i) => (
+                      <span key={i}>{v}</span>
+                    ))}
+                </Space>
               </div>
             </Col>
             <Col span={16}>
@@ -89,39 +102,51 @@ const MPSysInfo = (props: Props) => {
         </Card>
       </div>
       {Schemas.map(({ title, schema }) => {
+        const items = schema
+          .map((item) => {
+            const key = item.keys.find(
+              (key) =>
+                // TODO: how to distinguish the real 'undefined' string?
+                sysInfo[key] !== undefined && sysInfo[key] !== 'undefined',
+            );
+            return { key, item };
+          })
+          .filter((item) => item.key);
+        if (!items.length) {
+          return (
+            <div key={title} className="system-info">
+              <Title level={3}>{title}</Title>
+              <Card>
+                <Empty description={false} />
+              </Card>
+            </div>
+          );
+        }
         return (
           <div key={title} className="system-info">
             <Title level={3}>{title}</Title>
             <Card>
               <Row>
-                {schema.map((item, index) => {
-                  const key = item.keys.find((key) =>
-                    Object.hasOwn(sysInfo, key),
-                  );
-                  if (key) {
-                    return (
-                      <Col
-                        key={key}
-                        span={spanValue?.featSpan}
-                        xxl={{
-                          span: spanValue?.xxlFeatSpan,
-                        }}
-                      >
-                        <div className="mp-info-item" key={key}>
-                          <div className="system-info__name">
-                            <div className="system-info__label">{key}</div>
-                            <div className="system-info__desc">
-                              {item.label}
-                            </div>
-                          </div>
-                          <div className="system-info__value">
-                            {renderValue(item, sysInfo[key])}
-                          </div>
+                {items.map(({ key, item }) => {
+                  return (
+                    <Col
+                      key={key}
+                      span={spanValue?.featSpan}
+                      xxl={{
+                        span: spanValue?.xxlFeatSpan,
+                      }}
+                    >
+                      <div className="mp-info-item" key={key}>
+                        <div className="system-info__name">
+                          <div className="system-info__label">{key}</div>
+                          <div className="system-info__desc">{item.label}</div>
                         </div>
-                      </Col>
-                    );
-                  }
-                  return <></>;
+                        <div className="system-info__value">
+                          {renderValue(item, sysInfo[key!])}
+                        </div>
+                      </div>
+                    </Col>
+                  );
                 })}
               </Row>
             </Card>
diff --git a/src/components/SystemContent/MPSysInfo/infoSchema.tsx b/src/components/SystemContent/MPSysInfo/infoSchema.tsx
@@ -143,59 +143,71 @@ export const AppAuthSettings: InfoItem[] = [
 
 export const AuthInfo: InfoItem[] = [
   {
-    keys: ['scope.userLocation'],
+    keys: ['scope.hostId'],
+    label: '授权抖音号',
+  },
+  {
+    keys: ['scope.userLocation', 'userLocation'],
     label: '精确地理位置',
   },
   {
-    keys: ['scope.userFuzzyLocation'],
+    keys: ['scope.userFuzzyLocation', 'userFuzzyLocation'],
     label: '模糊地理位置',
   },
   {
-    keys: ['scope.userLocationBackground'],
+    keys: ['scope.userLocationBackground', 'userLocationBackground'],
     label: '后台定位',
   },
   {
-    keys: ['scope.record'],
+    keys: ['scope.record', 'record'],
     label: '麦克风',
   },
   {
-    keys: ['scope.camera'],
+    keys: ['scope.camera', 'camera'],
     label: '摄像头',
   },
   {
-    keys: ['scope.bluetooth'],
+    keys: ['scope.bluetooth', 'bluetooth'],
     label: '蓝牙',
   },
   {
-    keys: ['scope.writePhotosAlbum'],
+    keys: ['scope.writePhotosAlbum', 'writePhotosAlbum'],
     label: '添加到相册',
   },
   {
-    keys: ['scope.addPhoneContact'],
+    keys: ['scope.album'],
+    label: '读取相册', // 抖音
+  },
+  {
+    keys: ['scope.addPhoneContact', 'addPhoneContact'],
     label: '添加到联系人',
   },
   {
-    keys: ['scope.addPhoneCalendar'],
+    keys: ['scope.addPhoneCalendar', 'addPhoneCalendar', 'scope.calendar'],
     label: '添加日历事件',
   },
   {
-    keys: ['scope.werun'],
+    keys: ['scope.werun', 'werun'],
     label: '微信运动步数',
   },
   {
-    keys: ['scope.address'],
+    keys: ['scope.address', 'address'],
     label: '通讯地址',
   },
   {
-    keys: ['scope.invoiceTitle'],
+    keys: ['scope.invoiceTitle', 'invoiceTitle'],
     label: '发票抬头',
   },
   {
-    keys: ['scope.invoice'],
+    keys: ['scope.invoice', 'invoice'],
     label: '获取发票',
   },
   {
-    keys: ['scope.userInfo'],
+    keys: ['scope.userInfo', 'userInfo'],
     label: '用户信息',
   },
+  {
+    keys: ['scope.clipboard'],
+    label: '剪切板',
+  },
 ];
diff --git a/src/components/SystemContent/index.tsx b/src/components/SystemContent/index.tsx
@@ -22,6 +22,21 @@ const SystemContent = memo(({ data }: SystemContentProps) => {
   const clientInfo = useMemo(() => {
     return parseUserAgent(system?.ua);
   }, [system]);
+
+  const mpSysInfo = useMemo(() => {
+    if (mp) {
+      try {
+        const sysInfo = JSON.parse(mp);
+        return sysInfo;
+      } catch (e) {
+        console.error(e);
+        // if parse error, the client is still mp, should display the mp panel.
+        return {};
+      }
+    }
+    return null;
+  }, [mp]);
+
   const noSupport = useMemo(() => {
     if (!features) return [];
     return Object.values(features).reduce((acc, cur) => {
@@ -53,8 +68,8 @@ const SystemContent = memo(({ data }: SystemContentProps) => {
   if (data.length === 0) {
     return <Empty description={false} />;
   }
-  if (mp) {
-    return <MPSysInfo sysInfo={mp} spanValue={spanValue} />;
+  if (mpSysInfo) {
+    return <MPSysInfo sysInfo={mpSysInfo} spanValue={spanValue} />;
   }
   return (
     <div className="system-content">
diff --git a/src/pages/Devtools/SystemPanel/index.tsx b/src/pages/Devtools/SystemPanel/index.tsx
@@ -7,6 +7,8 @@ import { useTranslation } from 'react-i18next';
 
 const SystemPanel = memo(() => {
   const systemMsg = useSocketMessageStore((state) => state.systemMsg);
+  const refresh = useSocketMessageStore((state) => state.refresh);
+
   const { t } = useTranslation();
 
   if (systemMsg.length === 0) {
@@ -19,7 +21,7 @@ const SystemPanel = memo(() => {
           <Tooltip title={t('common.refresh')}>
             <Button
               onClick={() => {
-                refresh(activeTab);
+                refresh('system');
               }}
             >
               <ReloadOutlined />
