feat: support uniapp (#128)

HuolalaTech · Jan 18, 2024 · ec2724b · ec2724b
1 parent 598be84
commit ec2724b
Show file tree

Hide file tree

Showing 15 changed files with 295 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.6.4",
-    "@huolala-tech/page-spy-types": "^1.6.1",
+    "@huolala-tech/page-spy-browser": "^1.6.6",
+    "@huolala-tech/page-spy-types": "^1.6.3",
     "@huolala-tech/react-json-view": "^1.2.4",
     "@huolala-tech/request": "^1.1.2",
     "ahooks": "^3.1.9",

diff --git a/src/assets/image/alipay.svg b/src/assets/image/alipay.svg
diff --git a/src/assets/image/harmony.svg b/src/assets/image/harmony.svg
diff --git a/src/assets/image/uni.svg b/src/assets/image/uni.svg
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
@@ -14,6 +14,10 @@
     "device-id": "Device ID",
     "os": "OS",
     "browser": "Browser",
+    "miniprogram": "Mini Program",
+    "mpwechat": "WeChat Mini Program",
+    "mpalipay": "Alipay Mini Program",
+    "mpdouyin": "Douyin Mini Program",
     "project": "Project",
     "debug": "Debug",
     "title": "Title"
@@ -31,7 +35,13 @@
       "load-sdk": "Load a <script> in the test project;",
       "init-sdk": "<0>Then, initialize it and check the</0> <1>configuration options</1>:"
     },
-    "miniprogram": {
+    "mp-wechat": {
+      "title": "Mini Program",
+      "request-host": "Add the page-spy server domain to the whitelist of the miniprogram http and websocket requests. Note that the miniprogram requires https and wss protocols, except for the development environment.",
+      "install-sdk": "First, install dependencies in the project:",
+      "init-sdk": "<0>Import the SDK in the entry file and initialize it，check the </0> <1>configuration options</1>："
+    },
+    "mp-uniapp": {
       "title": "Mini Program",
       "request-host": "Add the page-spy server domain to the whitelist of the miniprogram http and websocket requests. Note that the miniprogram requires https and wss protocols, except for the development environment.",
       "install-sdk": "First, install dependencies in the project:",

diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
@@ -14,6 +14,10 @@
     "device-id": "デバイスID",
     "os": "オペレーティング システム",
     "browser": "ブラウザ",
+    "miniprogram": "Mini Program",
+    "mpwechat": "WeChat Mini Program",
+    "mpalipay": "Alipay Mini Program",
+    "mpdouyin": "Douyin Mini Program",
     "project": "プロジェクト",
     "debug": "デバッグ",
     "title": "タイトル"
@@ -31,8 +35,14 @@
       "load-sdk": "テストプロジェクトで <script> をロードする；",
       "init-sdk": "<0>次に、初期化し、</0> <1>構成オプション</1> を確認します："
     },
-    "miniprogram": {
-      "title": "Mini Program",
+    "mp-wechat": {
+      "title": "WeChat Mini Program",
+      "request-host": "page-spy サービスドメインを小プログラムのhttp、websocketリクエストのホワイトリストに入力します。開発環境以外では、小プログラムはhttpsとwssプロトコルの使用を強制しますので注意してください。",
+      "install-sdk": "まず、プロジェクトに依存関係をインストールします：",
+      "init-sdk": "<0>エントリーファイルでSDKをインポートし、インスタンス化します。</0> <1>構成オプション</1> を確認します："
+    },
+    "mp-uniapp": {
+      "title": "UniApp",
       "request-host": "page-spy サービスドメインを小プログラムのhttp、websocketリクエストのホワイトリストに入力します。開発環境以外では、小プログラムはhttpsとwssプロトコルの使用を強制しますので注意してください。",
       "install-sdk": "まず、プロジェクトに依存関係をインストールします：",
       "init-sdk": "<0>エントリーファイルでSDKをインポートし、インスタンス化します。</0> <1>構成オプション</1> を確認します："

diff --git a/src/assets/locales/ko.json b/src/assets/locales/ko.json
@@ -14,6 +14,10 @@
     "device-id": "장치 ID",
     "os": "운영 체제",
     "browser": "브라우저",
+    "miniprogram": "Mini Program",
+    "mpwechat": "WeChat Mini Program",
+    "mpalipay": "Alipay Mini Program",
+    "mpdouyin": "Douyin Mini Program",
     "project": "프로젝트",
     "debug": "디버그",
     "title": "제목"
@@ -31,8 +35,14 @@
       "load-sdk": "테스트 프로젝트에 <script>를 로드하십시오;",
       "init-sdk": "<0>그런 다음 초기화하고</0> <1>구성 옵션</1>을 확인하십시오:"
     },
-    "miniprogram": {
-      "title": "Mini Program",
+    "mp-wechat": {
+      "title": "WeChat Mini Program",
+      "request-host": "\"page-spy\" 서비스 도메인을 미니 프로그램의 HTTP 및 WebSocket 요청 화이트리스트에 추가하십시오. 개발 환경을 제외하고는 미니 프로그램에서는 HTTPS 및 WSS 프로토콜을 의무적으로 사용해야 합니다.",
+      "install-sdk": "먼저 프로젝트에 종속성을 설치하십시오:",
+      "init-sdk": "<0>엔트리 파일에서 SDK를 가져와 인스턴스화합니다.</0> <1>구성 옵션</1>을 확인하십시오:"
+    },
+    "mp-uniapp": {
+      "title": "UniApp",
       "request-host": "\"page-spy\" 서비스 도메인을 미니 프로그램의 HTTP 및 WebSocket 요청 화이트리스트에 추가하십시오. 개발 환경을 제외하고는 미니 프로그램에서는 HTTPS 및 WSS 프로토콜을 의무적으로 사용해야 합니다.",
       "install-sdk": "먼저 프로젝트에 종속성을 설치하십시오:",
       "init-sdk": "<0>엔트리 파일에서 SDK를 가져와 인스턴스화합니다.</0> <1>구성 옵션</1>을 확인하십시오:"

diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json
@@ -14,6 +14,10 @@
     "device-id": "设备 ID",
     "os": "系统",
     "browser": "浏览器",
+    "miniprogram": "小程序",
+    "mpwechat": "微信小程序",
+    "mpalipay": "支付宝小程序",
+    "mpdouyin": "抖音小程序",
     "project": "项目",
     "debug": "调试",
     "title": "标题"
@@ -31,8 +35,14 @@
       "load-sdk": "在测试项目中加载一个 <script>；",
       "init-sdk": "<0>紧接着初始化，查看</0> <1>配置项</1>："
     },
-    "miniprogram": {
-      "title": "小程序",
+    "mp-wechat": {
+      "title": "微信小程序",
+      "request-host": "将 page-spy 服务域名填入小程序的 http、websocket 请求白名单中。注意除了开发环境，小程序强制要求使用 https 和 wss 协议。",
+      "install-sdk": "首先在项目中安装依赖：",
+      "init-sdk": "<0>在入口文件中引入 SDK 并实例化，查看</0> <1>配置项</1>："
+    },
+    "mp-uniapp": {
+      "title": "UniAPP 小程序",
       "request-host": "将 page-spy 服务域名填入小程序的 http、websocket 请求白名单中。注意除了开发环境，小程序强制要求使用 https 和 wss 协议。",
       "install-sdk": "首先在项目中安装依赖：",
       "init-sdk": "<0>在入口文件中引入 SDK 并实例化，查看</0> <1>配置项</1>："

diff --git a/src/components/InjectSDK/components/IntegrationWithPlatform.tsx b/src/components/InjectSDK/components/IntegrationWithPlatform.tsx
@@ -1,22 +1,27 @@
 import { ReactComponent as WebSvg } from '@/assets/image/web-h5.svg';
 import { ReactComponent as MiniprogramSvg } from '@/assets/image/miniprogram.svg';
+import { ReactComponent as UniAppSvg } from '@/assets/image/uni.svg';
 import { ReactNode, useMemo, type ComponentType } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import type { Lang } from 'shiki';
 import { CodeBlock } from '@/components/CodeBlock';
 
-export type PlatformName = 'web' | 'miniprogram';
+export type PlatformName = 'web' | 'mp-wechat' | 'mp-uniapp';
 
 export const PLATFORMS: { name: PlatformName; icon: ComponentType }[] = [
   {
     name: 'web',
     icon: WebSvg,
   },
   {
-    name: 'miniprogram',
+    name: 'mp-wechat',
     icon: MiniprogramSvg,
   },
+  {
+    name: 'mp-uniapp',
+    icon: UniAppSvg,
+  },
 ];
 
 interface Props {
@@ -51,19 +56,19 @@ export const IntegrationWithPlatform = ({ platform, onCloseModal }: Props) => {
 </script>`,
         },
       ],
-      miniprogram: [
+      'mp-wechat': [
         {
-          title: t('inject.miniprogram.install-sdk'),
+          title: t('inject.mp-wechat.install-sdk'),
           code: `yarn add @huolala-tech/page-spy-wechat@latest`,
           lang: 'bash',
         },
         {
-          title: t('inject.miniprogram.request-host'),
+          title: t('inject.mp-wechat.request-host'),
           code: `https://${window.location.host}\nwss://${window.location.host}`,
         },
         {
           title: (
-            <Trans i18nKey="inject.miniprogram.init-sdk">
+            <Trans i18nKey="inject.mp-wechat.init-sdk">
               <span>slot-0</span>
               <a
                 href="https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-wechat"
@@ -73,7 +78,35 @@ export const IntegrationWithPlatform = ({ platform, onCloseModal }: Props) => {
               </a>
             </Trans>
           ),
-          code: `// @huolala-tech/page-spy-wechat v1.6.x or upper version. \nimport PageSpy from '@huolala-tech/page-spy-wechat';\n\nnew PageSpy({
+          code: `import PageSpy from '@huolala-tech/page-spy-wechat';\n\nnew PageSpy({
+  api: '${deployPath}',
+})`,
+          lang: 'js',
+        },
+      ],
+      'mp-uniapp': [
+        {
+          title: t('inject.mp-uniapp.install-sdk'),
+          code: `yarn add @huolala-tech/page-spy-uniapp@latest`,
+          lang: 'bash',
+        },
+        {
+          title: t('inject.mp-wechat.request-host'),
+          code: `https://${window.location.host}\nwss://${window.location.host}`,
+        },
+        {
+          title: (
+            <Trans i18nKey="inject.mp-uniapp.init-sdk">
+              <span>slot-0</span>
+              <a
+                href="https://github.com/HuolalaTech/page-spy/tree/main/packages/page-spy-uniapp"
+                target="_blank"
+              >
+                slot-1
+              </a>
+            </Trans>
+          ),
+          code: `import PageSpy from '@huolala-tech/page-spy-uniapp';\n\nnew PageSpy({
   api: '${deployPath}',
 })`,
           lang: 'js',

diff --git a/src/pages/Devtools/ConsolePanel/index.tsx b/src/pages/Devtools/ConsolePanel/index.tsx
@@ -13,7 +13,7 @@ const ConsolePanel = () => {
       <HeaderActions />
       <div className="console-panel__content">
         <MainContent />
-        {systemInfo?.browserName !== 'MPWeChat' && <FooterInput />}
+        {!systemInfo?.browserName?.startsWith('mp-') && <FooterInput />}
       </div>
       <ErrorDetailDrawer />
     </div>

diff --git a/src/pages/Devtools/index.tsx b/src/pages/Devtools/index.tsx
@@ -23,7 +23,12 @@ import './index.less';
 import { StoragePanel } from './StoragePanel';
 import useSearch from '@/utils/useSearch';
 import { useEventListener } from '@/utils/useEventListener';
-import { parseDeviceInfo, useClientInfo } from '@/utils/brand';
+import {
+  getBrowserName,
+  getOSName,
+  parseDeviceInfo,
+  useClientInfo,
+} from '@/utils/brand';
 import { useTranslation } from 'react-i18next';
 import { ConnectStatus } from './ConnectStatus';
 import { useSocketMessageStore } from '@/store/socket-message';
@@ -53,7 +58,7 @@ const MENU_COMPONENTS: Record<
   Page: {
     component: PagePanel,
     visible: (params) => {
-      return params.browser !== 'MPWeChat';
+      return !params.browser?.startsWith('mp-');
     },
   },
   Storage: {
@@ -62,7 +67,7 @@ const MENU_COMPONENTS: Record<
   System: {
     component: SystemPanel,
     visible: (params) => {
-      return params.browser !== 'MPWeChat';
+      return !params.browser?.startsWith('mp-');
     },
   },
 };
@@ -239,7 +244,7 @@ const ClientInfo = memo(() => {
           title={
             <>
               <span>
-                {t('system')}: {clientInfo?.osName}
+                {t('system')}: {getOSName(clientInfo?.osName || '')}
               </span>
               <br />
               <span>
@@ -257,7 +262,7 @@ const ClientInfo = memo(() => {
           title={
             <>
               <span>
-                {t('browser')}: {clientInfo?.browserName}
+                {t('browser')}: {getBrowserName(clientInfo?.browserName || '')}
               </span>
               <br />
               <span>