Skip to content

Commit 72fd796

Browse files
qkang07wqcstrong
qkang07
authored and
wqcstrong
committed
mp sys panel temp save
1 parent e127b47 commit 72fd796

11 files changed

Lines changed: 414 additions & 6 deletions

File tree

‎.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ VITE_PLUGIN_DOC=https://github.com/HuolalaTech/page-spy/blob/main/docs/plugin.md
1515
VITE_PLUGIN_RRWEB=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-rrweb
1616
VITE_PLUGIN_DATA_HARBOR=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-data-harbor
1717
VITE_PLUGIN_RN_STORAGE=https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-plugin-rn-async-storage
18+
VITE_API_BASE=localhost:6752

‎src/components/SystemContent/MPSysInfo/index.less‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.mp-info-main {
2+
display: flex;
3+
align-items: center;
4+
.info-icon {
5+
margin-right: 10px;
6+
height: 36px;
7+
}
8+
}
9+
.mp-info-item {
10+
padding: 8px 16px;
11+
border-radius: 4px;
12+
display: flex;
13+
justify-content: space-between;
14+
}
15+
16+
.mp-info-title {
17+
font-weight: bold;
18+
}
19+
.mp-info-desc {
20+
color: #999;
21+
}
22+
23+
.mp-info-value {
24+
font-size: 16px;
25+
}

‎src/components/SystemContent/MPSysInfo/index.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import React from 'react';
2+
import './index.less';
3+
import '../index.less';
4+
import { Card, Typography, Grid, Row, Col } from 'antd';
5+
import {
6+
AppAuthSettings,
7+
AuthInfo,
8+
DeviceInfo,
9+
InfoItem,
10+
SysInfo,
11+
} from './infoSchema';
12+
import Icon, { CheckOutlined, CloseOutlined } from '@ant-design/icons';
13+
import { ReactComponent as SupportSvg } from '@/assets/image/support.svg';
14+
import { ReactComponent as UnsupportSvg } from '@/assets/image/unsupport.svg';
15+
import { useSocketMessageStore } from '@/store/socket-message';
16+
type Props = {
17+
sysInfo: Record<string, any>;
18+
spanValue?: {
19+
featSpan: number;
20+
xxlFeatSpan: number;
21+
};
22+
};
23+
const { Title } = Typography;
24+
25+
const Schemas = [
26+
{
27+
title: '基础信息',
28+
schema: DeviceInfo,
29+
},
30+
{
31+
title: '手机系统信息',
32+
schema: SysInfo,
33+
},
34+
{
35+
title: '应用授权',
36+
schema: AppAuthSettings,
37+
},
38+
{
39+
title: '用户授权',
40+
schema: AuthInfo,
41+
},
42+
];
43+
44+
const MPSysInfo = (props: Props) => {
45+
const { sysInfo, spanValue } = props;
46+
const clientInfo = useSocketMessageStore((socket) => socket.clientInfo);
47+
48+
const renderValue = (item: InfoItem, v: any) => {
49+
if (item.render) {
50+
return item.render({ value: v });
51+
}
52+
if (typeof v === 'string') {
53+
return v;
54+
} else if (typeof v === 'object') {
55+
return JSON.stringify(v);
56+
} else if (typeof v === 'boolean') {
57+
const icon = v ? SupportSvg : UnsupportSvg;
58+
return (
59+
<Icon component={icon} style={{ fontSize: 16, fontWeight: 700 }} />
60+
);
61+
}
62+
return String(v);
63+
};
64+
65+
return (
66+
<div className="system-content">
67+
<div className="system-info">
68+
<Title level={3}>主要信息</Title>
69+
<Card>
70+
<Row>
71+
<Col span={8}>
72+
<div className="mp-info-main">
73+
<img className="info-icon" src={clientInfo?.os.logo} />
74+
<span>
75+
{sysInfo?.brand} {sysInfo?.model} {clientInfo?.os.name}{' '}
76+
{clientInfo?.os.version}
77+
</span>
78+
</div>
79+
</Col>
80+
<Col span={16}>
81+
<div className="mp-info-main">
82+
<img className="info-icon" src={clientInfo?.browser.logo} />
83+
<span>
84+
{clientInfo?.browser.name} {sysInfo['version']}
85+
</span>
86+
</div>
87+
</Col>
88+
</Row>
89+
</Card>
90+
</div>
91+
{Schemas.map(({ title, schema }) => {
92+
return (
93+
<div key={title} className="system-info">
94+
<Title level={3}>{title}</Title>
95+
<Card>
96+
<Row>
97+
{schema.map((item, index) => {
98+
const key = item.keys.find((key) =>
99+
Object.hasOwn(sysInfo, key),
100+
);
101+
if (key) {
102+
return (
103+
<Col
104+
key={key}
105+
span={spanValue?.featSpan}
106+
xxl={{
107+
span: spanValue?.xxlFeatSpan,
108+
}}
109+
>
110+
<div className="mp-info-item" key={key}>
111+
<div className="system-info__name">
112+
<div className="system-info__label">{key}</div>
113+
<div className="system-info__desc">
114+
{item.label}
115+
</div>
116+
</div>
117+
<div className="system-info__value">
118+
{renderValue(item, sysInfo[key])}
119+
</div>
120+
</div>
121+
</Col>
122+
);
123+
}
124+
return <></>;
125+
})}
126+
</Row>
127+
</Card>
128+
</div>
129+
);
130+
})}
131+
</div>
132+
);
133+
};
134+
135+
export default MPSysInfo;

‎src/components/SystemContent/MPSysInfo/infoSchema.tsx‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
import { last } from 'lodash-es';
2+
3+
export type InfoItem = {
4+
keys: string[]; // the key maybe different in different platform
5+
label: string;
6+
render?: (props: { value: any }) => JSX.Element;
7+
icon?: React.ReactNode;
8+
};
9+
10+
export const DeviceInfo: InfoItem[] = [
11+
{
12+
keys: ['SDKVersion'],
13+
label: '客户端基础库版本',
14+
},
15+
{
16+
keys: ['pixelRatio'],
17+
label: '设备像素比',
18+
},
19+
{
20+
keys: ['screenWidth'],
21+
label: '屏幕宽度',
22+
},
23+
{
24+
keys: ['screenHeight'],
25+
label: '屏幕高度',
26+
},
27+
{
28+
keys: ['windowWidth'],
29+
label: '可使用窗口宽度',
30+
},
31+
{
32+
keys: ['windowHeight'],
33+
label: '可使用窗口高度',
34+
},
35+
{
36+
keys: ['statusBarHeight'],
37+
label: '状态栏的高度',
38+
},
39+
{
40+
keys: ['language'],
41+
label: '当前语言',
42+
},
43+
{
44+
keys: ['platform'],
45+
label: '客户端平台',
46+
},
47+
{
48+
keys: ['fontSizeSetting'],
49+
label: '用户字体大小缩放比例',
50+
},
51+
52+
{
53+
keys: ['benchmarkLevel'],
54+
label: '性能等级',
55+
},
56+
// {
57+
// keys: ['safeArea'],
58+
// label: '安全区域',
59+
// render: ({value}) => {
60+
// return <div style={{background: '#eee', borderRadius: 6, padding: '4px 12px'}}>
61+
// <p>top: {value.top}</p>
62+
// <p>left: {value.left}</p>
63+
// <p>right: {value.right}</p>
64+
// <p>bottom: {value.bottom}</p>
65+
// <p>width: {value.width}</p>
66+
// <p>height: {value.height}</p>
67+
// </div>
68+
// }
69+
// },
70+
71+
{
72+
keys: ['theme'],
73+
label: '系统当前主题',
74+
},
75+
76+
{
77+
keys: ['enableDebug'],
78+
label: '是否开启调试',
79+
},
80+
];
81+
82+
export const SysInfo: InfoItem[] = [
83+
{
84+
keys: ['bluetoothEnabled'],
85+
label: '蓝牙的系统开关',
86+
},
87+
{
88+
keys: ['locationEnabled'],
89+
label: '地理位置的系统开关',
90+
},
91+
{
92+
keys: ['wifiEnabled'],
93+
label: 'Wi-Fi 的系统开关',
94+
},
95+
{
96+
keys: ['deviceOrientation'],
97+
label: '设备方向',
98+
},
99+
];
100+
101+
export const AppAuthSettings: InfoItem[] = [
102+
{
103+
keys: ['albumAuthorized'],
104+
label: '允许 APP 使用相册的开关（仅 iOS 有效）',
105+
},
106+
{
107+
keys: ['cameraAuthorized'],
108+
label: '允许 APP 使用摄像头的开关',
109+
},
110+
{
111+
keys: ['locationAuthorized'],
112+
label: '允许 APP 使用定位的开关',
113+
},
114+
{
115+
keys: ['locationReducedAccuracy'],
116+
label: '定位准确度。true 表示模糊定位，false 表示精确定位（仅 iOS 有效）',
117+
},
118+
{
119+
keys: ['microphoneAuthorized'],
120+
label: '允许 APP 使用麦克风的开关',
121+
},
122+
{
123+
keys: ['notificationAuthorized'],
124+
label: '允许 APP 通知的开关',
125+
},
126+
{
127+
keys: ['notificationAlertAuthorized'],
128+
label: '允许 APP 通知带有提醒的开关（仅 iOS 有效）',
129+
},
130+
{
131+
keys: ['notificationBadgeAuthorized'],
132+
label: '允许 APP 通知带有标记的开关（仅 iOS 有效）',
133+
},
134+
{
135+
keys: ['notificationSoundAuthorized'],
136+
label: '允许 APP 通知带有声音的开关（仅 iOS 有效）',
137+
},
138+
{
139+
keys: ['phoneCalendarAuthorized'],
140+
label: '允许 APP 使用日历的开关',
141+
},
142+
];
143+
144+
export const AuthInfo: InfoItem[] = [
145+
{
146+
keys: ['scope.userLocation'],
147+
label: '精确地理位置',
148+
},
149+
{
150+
keys: ['scope.userFuzzyLocation'],
151+
label: '模糊地理位置',
152+
},
153+
{
154+
keys: ['scope.userLocationBackground'],
155+
label: '后台定位',
156+
},
157+
{
158+
keys: ['scope.record'],
159+
label: '麦克风',
160+
},
161+
{
162+
keys: ['scope.camera'],
163+
label: '摄像头',
164+
},
165+
{
166+
keys: ['scope.bluetooth'],
167+
label: '蓝牙',
168+
},
169+
{
170+
keys: ['scope.writePhotosAlbum'],
171+
label: '添加到相册',
172+
},
173+
{
174+
keys: ['scope.addPhoneContact'],
175+
label: '添加到联系人',
176+
},
177+
{
178+
keys: ['scope.addPhoneCalendar'],
179+
label: '添加日历事件',
180+
},
181+
{
182+
keys: ['scope.werun'],
183+
label: '微信运动步数',
184+
},
185+
{
186+
keys: ['scope.address'],
187+
label: '通讯地址',
188+
},
189+
{
190+
keys: ['scope.invoiceTitle'],
191+
label: '发票抬头',
192+
},
193+
{
194+
keys: ['scope.invoice'],
195+
label: '获取发票',
196+
},
197+
{
198+
keys: ['scope.userInfo'],
199+
label: '用户信息',
200+
},
201+
];

‎src/components/SystemContent/index.less‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.system-content {
2-
padding-right: 12px;
2+
// padding-right: 12px;
33
overflow-y: auto;
44
.system-info {
55
margin-bottom: 24px;
@@ -8,6 +8,9 @@
88
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
99
monospace;
1010
}
11+
&__desc {
12+
color: #999;
13+
}
1114
&__value {
1215
color: #333;
1316
font-size: 14px;

0 commit comments

Comments
 (0)