From ec2724ba886d8c9f6db135f14424593f70220555 Mon Sep 17 00:00:00 2001 From: Blucas <15555602203@163.com> Date: Thu, 18 Jan 2024 17:05:32 +0800 Subject: [PATCH] feat: support uniapp (#128) --- package.json | 4 +- src/assets/image/alipay.svg | 1 + src/assets/image/harmony.svg | 1 + src/assets/image/uni.svg | 34 ++++++ src/assets/locales/en.json | 12 +- src/assets/locales/ja.json | 14 ++- src/assets/locales/ko.json | 14 ++- src/assets/locales/zh.json | 14 ++- .../components/IntegrationWithPlatform.tsx | 47 ++++++-- src/pages/Devtools/ConsolePanel/index.tsx | 2 +- src/pages/Devtools/index.tsx | 15 ++- src/pages/RoomList/index.tsx | 83 +++++++++++-- src/store/platform-config.ts | 10 +- src/utils/brand.ts | 113 ++++++++++++------ yarn.lock | 18 +-- 15 files changed, 295 insertions(+), 87 deletions(-) create mode 100644 src/assets/image/alipay.svg create mode 100644 src/assets/image/harmony.svg create mode 100644 src/assets/image/uni.svg diff --git a/package.json b/package.json index 82217ee7..b9db48a4 100644 --- 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 new file mode 100644 index 00000000..e4301cef --- /dev/null +++ b/src/assets/image/alipay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/image/harmony.svg b/src/assets/image/harmony.svg new file mode 100644 index 00000000..6d7a5a1d --- /dev/null +++ b/src/assets/image/harmony.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/image/uni.svg b/src/assets/image/uni.svg new file mode 100644 index 00000000..efa59ccc --- /dev/null +++ b/src/assets/image/uni.svg @@ -0,0 +1,34 @@ + + + + + diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 637cd9de..ac6ae632 100644 --- 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 `, }, ], - 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: ( - + slot-0 { ), - 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: ( + + slot-0 + + slot-1 + + + ), + 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 index 9c16ab3f..913306fe 100644 --- a/src/pages/Devtools/ConsolePanel/index.tsx +++ b/src/pages/Devtools/ConsolePanel/index.tsx @@ -13,7 +13,7 @@ const ConsolePanel = () => {
- {systemInfo?.browserName !== 'MPWeChat' && } + {!systemInfo?.browserName?.startsWith('mp-') && }
diff --git a/src/pages/Devtools/index.tsx b/src/pages/Devtools/index.tsx index 72c3b57d..772097be 100644 --- 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={ <> - {t('system')}: {clientInfo?.osName} + {t('system')}: {getOSName(clientInfo?.osName || '')}
@@ -257,7 +262,7 @@ const ClientInfo = memo(() => { title={ <> - {t('browser')}: {clientInfo?.browserName} + {t('browser')}: {getBrowserName(clientInfo?.browserName || '')}
diff --git a/src/pages/RoomList/index.tsx b/src/pages/RoomList/index.tsx index c98bc5a6..9012e37d 100644 --- a/src/pages/RoomList/index.tsx +++ b/src/pages/RoomList/index.tsx @@ -1,5 +1,11 @@ import { getSpyRoom } from '@/apis'; -import { BROWSER_LOGO, OS_LOGO, parseDeviceInfo } from '@/utils/brand'; +import { + OS_CONFIG, + getBrowserLogo, + getBrowserName, + getOSName, + parseDeviceInfo, +} from '@/utils/brand'; import { useRequest } from 'ahooks'; import { Typography, @@ -19,6 +25,7 @@ import { PropsWithChildren, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import './index.less'; import { Link } from 'react-router-dom'; +import { SpyDevice } from '@huolala-tech/page-spy-types'; const { Title } = Typography; const { Option } = Select; @@ -71,6 +78,42 @@ export const RoomList = () => { const [form] = Form.useForm(); const { t } = useTranslation(); + const BrowserOptions = useMemo(() => { + const browsers: SpyDevice.Browser[] = [ + 'chrome', + 'firefox', + 'safari', + 'edge', + 'qq', + 'wechat', + 'uc', + 'baidu', + ]; + const mpTypes: SpyDevice.Browser[] = ['mp-wechat', 'mp-alipay']; + return [ + { + groupName: 'Web', + options: browsers.map((name) => { + return { + name, + label: getBrowserName(name), + logo: getBrowserLogo(name), + }; + }), + }, + { + groupName: t('common.miniprogram'), + options: mpTypes.map((name) => { + return { + name, + label: getBrowserName(name), + logo: getBrowserLogo(name), + }; + }), + }, + ]; + }, []); + const { data: connectionList = [], error, @@ -164,14 +207,18 @@ export const RoomList = () => { - + os logo - + browser logo @@ -244,12 +291,12 @@ export const RoomList = () => { - {Object.entries(BROWSER_LOGO).map(([name, logo]) => { + {BrowserOptions.map((group) => { return ( - + + {group.options.map(({ name, logo, label }) => { + return ( + + ); + })} + ); })} diff --git a/src/store/platform-config.ts b/src/store/platform-config.ts index 2389149a..98b59c96 100644 --- a/src/store/platform-config.ts +++ b/src/store/platform-config.ts @@ -15,31 +15,31 @@ const STORAGE_TYPES: { name: 'localStorage', label: 'Local Storage', icon: StorageSvg, - visible: (browser) => browser !== 'MPWeChat', + visible: (browser) => !browser?.startsWith('mp-'), }, { name: 'sessionStorage', label: 'Session Storage', icon: StorageSvg, - visible: (browser) => browser !== 'MPWeChat', + visible: (browser) => !browser?.startsWith('mp-'), }, { name: 'cookie', label: 'Cookies', icon: CookieSvg, - visible: (browser) => browser !== 'MPWeChat', + visible: (browser) => !browser?.startsWith('mp-'), }, { name: 'indexedDB', label: 'IndexedDB', icon: DatabaseSvg, - visible: (browser) => browser !== 'MPWeChat', + visible: (browser) => !browser?.startsWith('mp-'), }, { name: 'mpStorage', label: '小程序 Storage', icon: StorageSvg, - visible: (browser) => browser === 'MPWeChat', + visible: (browser) => !!browser?.startsWith('mp-'), }, ]; diff --git a/src/utils/brand.ts b/src/utils/brand.ts index 9492932d..12339b0c 100644 --- a/src/utils/brand.ts +++ b/src/utils/brand.ts @@ -2,6 +2,7 @@ import windowsSvg from '@/assets/image/windows.svg'; import iOSSvg from '@/assets/image/apple.svg'; import androidSvg from '@/assets/image/android.svg'; +import harmonySvg from '@/assets/image/harmony.svg'; import linuxSvg from '@/assets/image/linux.svg'; import pcSvg from '@/assets/image/pc.svg'; // browser @@ -15,41 +16,76 @@ import firefoxSvg from '@/assets/image/firefox.svg'; import safariSvg from '@/assets/image/safari.svg'; import browserSvg from '@/assets/image/browser.svg'; import mpWechatSvg from '@/assets/image/miniprogram.svg'; +import mpAlipaySvg from '@/assets/image/alipay.svg'; +import uniSvg from '@/assets/image/uni.svg'; import { SpyDevice } from '@huolala-tech/page-spy-types'; import { useSocketMessageStore } from '@/store/socket-message'; +import { t } from 'i18next'; interface DeviceInfo { - osName: SpyDevice.OS | 'Unknown'; + osName: SpyDevice.OS; osVersion: string; - browserName: SpyDevice.Browser | 'Unknown'; + browserName: SpyDevice.Browser; browserVersion: string; osLogo?: string; browserLogo?: string; } -export const OS_LOGO: Record, string> = { - // os - Mac: iOSSvg, - iPad: iOSSvg, - iPhone: iOSSvg, - Windows: windowsSvg, - Android: androidSvg, - Linux: linuxSvg, +export const OS_CONFIG: Record< + SpyDevice.OS, + { + logo: string; + label: string; + } +> = { + ios: { logo: iOSSvg, label: 'iOS' }, + ipad: { logo: iOSSvg, label: 'iPad' }, + mac: { logo: iOSSvg, label: 'macOS' }, + windows: { logo: windowsSvg, label: 'Windows' }, + linux: { logo: linuxSvg, label: 'Linux' }, + android: { logo: androidSvg, label: 'Android' }, + harmony: { logo: harmonySvg, label: 'HarmonyOS' }, + unknown: { logo: pcSvg, label: 'Unknown' }, }; -export const BROWSER_LOGO: Record< - Exclude, - string + +export const BROWSER_CONFIG: Record< + SpyDevice.Browser, + { + logo: string; + label: string; + } > = { - // browser - Chrome: chromeSvg, - Firefox: firefoxSvg, - Safari: safariSvg, - Edge: edgeSvg, - MPWeChat: mpWechatSvg, - WeChat: wechatSvg, - QQ: qqSvg, - UC: ucSvg, - Baidu: baiduSvg, + chrome: { logo: chromeSvg, label: 'Chrome' }, + firefox: { logo: firefoxSvg, label: 'Firefox' }, + safari: { logo: safariSvg, label: 'Safari' }, + edge: { logo: edgeSvg, label: 'Edge' }, + 'mp-wechat': { logo: mpWechatSvg, label: t('common.mpwechat') }, + 'mp-alipay': { logo: mpAlipaySvg, label: t('common.mpalipay') }, + 'mp-douyin': { logo: mpWechatSvg, label: t('common.mpdoyin') }, + wechat: { logo: wechatSvg, label: 'WeChat' }, + qq: { logo: qqSvg, label: 'QQ' }, + uc: { logo: ucSvg, label: 'UC' }, + baidu: { logo: baiduSvg, label: 'Baidu' }, + unknown: { logo: pcSvg, label: 'Unknown' }, +}; + +export const getOSName = (os: string) => { + return OS_CONFIG[os.toLowerCase() as SpyDevice.OS]?.label || pcSvg; +}; + +export const getOSLogo = (os: string) => { + return OS_CONFIG[os.toLowerCase() as SpyDevice.OS]?.logo || pcSvg; +}; + +export const getBrowserName = (browser: string) => { + return ( + BROWSER_CONFIG[browser.toLowerCase() as SpyDevice.Browser]?.label || + 'Unknown' + ); +}; + +export const getBrowserLogo = (browser: string) => { + return BROWSER_CONFIG[browser as SpyDevice.Browser]?.logo || browserSvg; }; export const parseDeviceInfo = (device: string): DeviceInfo => { @@ -57,21 +93,20 @@ export const parseDeviceInfo = (device: string): DeviceInfo => { const result = device.match(reg); if (result === null) return { - osName: 'Unknown', - osVersion: 'Unknown', - browserName: 'Unknown', - browserVersion: 'Unknown', + osName: 'unknown', + osVersion: 'unknown', + browserName: 'unknown', + browserVersion: 'unknown', }; const [_, osName, osVersion, browserName, browserVersion] = result; return { - osName, + osName: osName.toLowerCase(), osVersion, - browserName, + browserName: browserName.toLowerCase(), browserVersion, - osLogo: OS_LOGO[osName as keyof typeof OS_LOGO] || pcSvg, - browserLogo: - BROWSER_LOGO[browserName as keyof typeof BROWSER_LOGO] || browserSvg, + osLogo: getOSLogo(osName.toLowerCase()), + browserLogo: getBrowserLogo(browserName.toLowerCase()), } as DeviceInfo; }; @@ -80,12 +115,14 @@ export function useClientInfo() { const system = systemMsg?.[0]?.system; if (system) { return { - ...system, - osLogo: OS_LOGO[system.osName as keyof typeof OS_LOGO] || pcSvg, - browserLogo: - BROWSER_LOGO[system.browserName as keyof typeof BROWSER_LOGO] || - browserSvg, - }; + // ...system, + browserName: system.browserName.toLowerCase(), + browserVersion: system.browserVersion, + osName: system.osName.toLowerCase(), + osVersion: system.osVersion, + osLogo: getOSLogo(system.osName.toLowerCase()), + browserLogo: getBrowserLogo(system.browserName.toLowerCase()), + } as DeviceInfo; } return null; } diff --git a/yarn.lock b/yarn.lock index 0b9697ff..3c7157a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -753,19 +753,19 @@ "@huolala-tech/page-spy-api-win32-arm" "1.2.2" "@huolala-tech/page-spy-api-win32-arm64" "1.2.2" -"@huolala-tech/page-spy-browser@^1.6.4": - version "1.6.4" - resolved "https://registry.npmjs.org/@huolala-tech/page-spy-browser/-/page-spy-browser-1.6.4.tgz#09dccb416cc725d7098cca0d2311320435cb3732" - integrity sha512-ps0ZL3yHmm7XpptCO7ndMnaMdSykndbq8RmmbNO/mKpUjMVqvP1hWU/UDN0Yj9dyTrlGxRvXcPWxk9W7XavfJw== +"@huolala-tech/page-spy-browser@^1.6.6": + version "1.6.6" + resolved "https://registry.npmjs.org/@huolala-tech/page-spy-browser/-/page-spy-browser-1.6.6.tgz#0e76e0f9099e42d80ddbd6945f66be1ac2c9a49a" + integrity sha512-/DQ1yfuvuBC6E3jEjBlVcoH7ZfKxgMDgNIR8dOMGvSdfSpWBII+vD0r6CHkQwpzJgwcU2Zzrlj43VzmyieSyGA== dependencies: "@babel/runtime" "^7.13.0" - "@huolala-tech/page-spy-types" "^1.6.1" + "@huolala-tech/page-spy-types" "^1.6.3" copy-to-clipboard "^3.3.1" -"@huolala-tech/page-spy-types@^1.6.1": - version "1.6.1" - resolved "https://registry.npmjs.org/@huolala-tech/page-spy-types/-/page-spy-types-1.6.1.tgz#b056053180f91561a9996d3d46e7b25ae2553e5d" - integrity sha512-SNlYcieVZXwMdioFv6EdvR4FMj4ouREn+0czhbrKwOZEUs6pjyo+Tf1izIcbeOx/c4wkiZiu6XbajAjxRMsCIg== +"@huolala-tech/page-spy-types@^1.6.3": + version "1.6.3" + resolved "https://registry.npmjs.org/@huolala-tech/page-spy-types/-/page-spy-types-1.6.3.tgz#f35608f4fe5854242a36fba3362efadd1f66442c" + integrity sha512-gY1xMpxngLJ+yUHBVQjTxpQ3R7q4bXpM/cDqpO+n2RQeEYoCiAQEkpzbhnne45c4TWSFWH6yIIVN1Qj7ju96Dw== "@huolala-tech/react-json-view@^1.2.4": version "1.2.4"