feat: add device version display in settings

only run in plugin com.msgbyte.env.rn

client/mobile/ios/Podfile.lock

@@ -423,14 +423,16 @@ PODS:
     - React
   - RNCAsyncStorage (1.17.11):
     - React-Core
+  - RNDeviceInfo (10.5.1):
+    - React-Core
   - RNGestureHandler (2.9.0):
     - React-Core
   - RNLocalize (2.2.6):
     - React-Core
-  - RNNotifee (7.4.0):
+  - RNNotifee (7.6.1):
     - React-Core
-    - RNNotifee/NotifeeCore (= 7.4.0)
+    - RNNotifee/NotifeeCore (= 7.6.1)
-  - RNNotifee/NotifeeCore (7.4.0):
+  - RNNotifee/NotifeeCore (7.6.1):
     - React-Core
   - RNReanimated (2.14.4):
     - DoubleConversion
@@ -527,6 +529,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - ReactNativeUiLib (from `../node_modules/react-native-ui-lib`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - "RNNotifee (from `../node_modules/@notifee/react-native`)"
@@ -626,6 +629,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-ui-lib"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNLocalize:
@@ -688,9 +693,10 @@ SPEC CHECKSUMS:
   ReactCommon: f697c0ac52e999aa818e43e2b6f277787c735e2d
   ReactNativeUiLib: 8d3804947431a465a69f09c5e785c988314612a9
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
+  RNDeviceInfo: fb81318c9cd5ebe30ebf12bcd046d818c87f9b53
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
-  RNNotifee: da8dcf09f079ea22f46e239d7c406e10d4525a5f
+  RNNotifee: bdc064c29f4d558046f51f0c3ae02bab4fd3cd85
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 5b0304b3dbef2b52e078052138e23a19c7dacaef

client/mobile/package.json

@@ -25,6 +25,7 @@
     "react": "18.2.0",
     "react-native": "0.71.2",
     "react-native-config": "^1.5.0",
+    "react-native-device-info": "^10.5.1",
     "react-native-gesture-handler": "^2.9.0",
     "react-native-localize": "^2.2.6",
     "react-native-reanimated": "^2.14.4",

client/mobile/src/AppMain.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { WebView } from 'react-native-webview';
-import { generatePostMessageScript } from './lib/inject';
+import { generateInjectedScript } from './lib/inject';
 import { handleTailchatMessage } from './lib/inject/message-handler';
 
 /**
@@ -21,7 +21,7 @@ export const AppMain: React.FC<Props> = React.memo((props) => {
       <WebView
         ref={webviewRef}
         source={{ uri: props.host }}
-        injectedJavaScriptBeforeContentLoaded={generatePostMessageScript()}
+        injectedJavaScriptBeforeContentLoaded={generateInjectedScript()}
         onMessage={(e) => {
           if (!webviewRef.current) {
             return;

client/mobile/src/lib/inject/index.ts

@@ -1,4 +1,4 @@
-// @ts-nocheck
+import { getVersion, getReadableVersion } from 'react-native-device-info';
 
 /**
  * 生成注入到Webview中的js代码
@@ -27,7 +27,15 @@ export function generateInstallPluginScript() {
   return raw;
 }
 
-export function generatePostMessageScript() {
+export function generateInjectedScript(): string {
+  return [generateDeviceInfo(), generatePostMessageScript()].join(';');
+}
+
+function generateDeviceInfo() {
+  return `window.__rnDeviceInfo = { version: "${getVersion()}", readableVersion: "${getReadableVersion()}" }`;
+}
+
+function generatePostMessageScript() {
   return `window.postMessage = function (data) {
     window.ReactNativeWebView.postMessage(JSON.stringify(data));
   };`;

client/mobile/yarn.lock

@@ -7132,6 +7132,11 @@ react-native-config@^1.5.0:
   resolved "https://registry.npmmirror.com/react-native-config/-/react-native-config-1.5.0.tgz#ff5a78fbbc2c2a0525788e5f3c86101110651ba4"
   integrity sha512-slecooA/0tCwhb+RuWEbwLqtKirGh9vWPRpgDfH7uPAraCciqHNH2XjS9ylW+Spn4FUrHg5KWTqUGs9BdBADHg==
 
+react-native-device-info@^10.5.1:
+  version "10.5.1"
+  resolved "https://registry.npmmirror.com/react-native-device-info/-/react-native-device-info-10.5.1.tgz#16a24e2b32c14af1b00994019c850ad2088b30f3"
+  integrity sha512-fOoynmthZnoP7avXpUE/RP8F6Fw/ThFd3aF2C+jbyNCls9+ls4SKU7/opQJvZxd2/9vo//jBJ8AEloEcTpBIqw==
+
 react-native-gesture-handler@^2.9.0:
   version "2.9.0"
   resolved "https://registry.npmmirror.com/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"

client/web/plugins/com.msgbyte.env.rn/src/DeviceInfoPanel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Translate } from './translate';
+
+interface WindowRnDeviceInfo {
+  version: string;
+  readableVersion: string;
+}
+
+export const DeviceInfoPanel: React.FC = React.memo(() => {
+  const deviceInfo: WindowRnDeviceInfo = (window as any).__rnDeviceInfo ?? {};
+  return (
+    <div>
+      <div>
+        {Translate.clientVersion}: {deviceInfo.version}(
+        {deviceInfo.readableVersion})
+      </div>
+    </div>
+  );
+});
+DeviceInfoPanel.displayName = 'DeviceInfoPanel';

client/web/plugins/com.msgbyte.env.rn/src/index.tsx

@@ -5,13 +5,23 @@ import {
   getCachedBaseGroupInfo,
   getMessageTextDecorators,
   getServiceUrl,
+  regCustomPanel,
 } from '@capital/common';
+import { DeviceInfoPanel } from './DeviceInfoPanel';
 import { Translate } from './translate';
 
 const PLUGIN_NAME = 'ReactNative Support';
 
 console.log(`Plugin ${PLUGIN_NAME} is loaded`);
 
+regCustomPanel({
+  position: 'setting',
+  icon: '',
+  name: 'com.msgbyte.env.rn/deviceInfoPanel',
+  label: Translate.deviceInfo,
+  render: DeviceInfoPanel,
+});
+
 /**
  * 转发事件
  */

client/web/plugins/com.msgbyte.env.rn/src/translate.ts

@@ -9,4 +9,12 @@ export const Translate = {
     'zh-CN': '私信',
     'en-US': 'DM',
   }),
+  deviceInfo: localTrans({
+    'zh-CN': '设备信息',
+    'en-US': 'Device Info',
+  }),
+  clientVersion: localTrans({
+    'zh-CN': '客户端版本号',
+    'en-US': 'Client Version',
+  }),
 };