on mini branch merge main

HuolalaTech · Dec 28, 2023 · 88084e0 · 88084e0
2 parents 78bf430 + 92c0a5a
commit 88084e0
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 55 deletions.
diff --git a/backend/go.mod b/backend/go.mod
@@ -2,7 +2,7 @@ module github.com/HuolalaTech/page-spy-web/backend
 
 go 1.21
 
-require github.com/HuolalaTech/page-spy-api v1.3.1
+require github.com/HuolalaTech/page-spy-api v1.3.4-0.20231228075405-35161d7d323f
 
 require (
 	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect

diff --git a/backend/go.sum b/backend/go.sum
@@ -1,5 +1,7 @@
-github.com/HuolalaTech/page-spy-api v1.3.1 h1:DdoOgsFs/SwjIrcrc6N+cXDsFN213wVPixDzk4WKfX8=
-github.com/HuolalaTech/page-spy-api v1.3.1/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
+github.com/HuolalaTech/page-spy-api v1.3.4-0.20231228032258-41daa5362ce2 h1:3UpI6Ne4n+lAbeFFrSylmRsye67b0QHOMHLl/oPtTBs=
+github.com/HuolalaTech/page-spy-api v1.3.4-0.20231228032258-41daa5362ce2/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
+github.com/HuolalaTech/page-spy-api v1.3.4-0.20231228075405-35161d7d323f h1:YwSFDoquOclbvMeOYgxIV9tF08+PkCPXpa2bnfqySjs=
+github.com/HuolalaTech/page-spy-api v1.3.4-0.20231228075405-35161d7d323f/go.mod h1:njVR6tXPbDvvA/ecpLY5+9Pu43bOI5tnK+yscNdiMkU=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=

diff --git a/index.html b/index.html
@@ -1,30 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PageSpy</title>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
+    <script>
+      // Resolve the correct address from different deployment base paths.
+      const base = location.pathname.endsWith('/')
+        ? location.pathname.slice(0, -1)
+        : location.pathname;
+      // https://exp.com => 'exp.com'
+      // https://exp.com/ => 'exp.com'
+      // https://exp.com/page-spy => 'exp.com/page-spy'
+      // https://exp.com/page-spy/ => 'exp.com/page-spy'
+      window.DEPLOY_BASE_PATH = location.host + base;
 
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PageSpy</title>
-  <link rel="icon" href="/favicon.ico">
-  <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg">
-  <script src="/source-map/source-map.min.js"></script>
-  <script>
-    const mappingWasmUrl = new URL('/source-map/mappings.wasm', window.location.href).toString()
-    sourceMap.SourceMapConsumer.initialize({
-      "lib/mappings.wasm": mappingWasmUrl
-    });
-  </script>
-  <script src="/shiki/dist/index.jsdelivr.iife.js"></script>
-  <script>
-    const shikiURL = new URL('/shiki', window.location.origin).toString()
-    window.shiki.setCDN(shikiURL)
-  </script>
-</head>
+      const sourceBaseUrl = `${location.protocol}//${window.DEPLOY_BASE_PATH}`;
 
-<body>
-  <div id="root"></div>
-  <script src="/src/main.tsx" type="module"></script>
-</body>
+      const loadScript = (src, cb) => {
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = () => {
+          cb && cb();
+        };
+        document.head.appendChild(script);
+      };
 
+      // source-map
+      const sourcemapSDK = sourceBaseUrl + '/source-map/source-map.min.js';
+      const mappingWasmUrl = sourceBaseUrl + '/source-map/mappings.wasm';
+      loadScript(sourcemapSDK, () => {
+        window.sourceMap.SourceMapConsumer.initialize({
+          'lib/mappings.wasm': mappingWasmUrl,
+        });
+      });
+
+      // shiki
+      const shikiSDK = sourceBaseUrl + '/shiki/dist/index.jsdelivr.iife.js';
+      const shikiCDN = sourceBaseUrl + '/shiki';
+      loadScript(shikiSDK, () => {
+        window.shiki.setCDN(shikiCDN);
+      });
+    </script>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="/src/main.tsx" type="module"></script>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@huolala-tech/page-spy-web",
-  "version": "1.5.3",
+  "private": true,
+  "version": "1.5.4",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "license": "MIT",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,22 +1,18 @@
 import { ConfigProvider } from 'antd';
 import React from 'react';
-import { BrowserRouter, HashRouter } from 'react-router-dom';
+import { HashRouter } from 'react-router-dom';
 import RouteConfig from './routes/config';
 import zh from 'antd/es/locale/zh_CN';
 import en from 'antd/es/locale/en_US';
 import { useLanguage } from './utils/useLanguage';
-import { isDoc } from './utils/constants';
 import { ErrorBoundary } from './components/ErrorBoundary';
 
-// const basename = isDoc ? '/page-spy-web' : '/';
-const basename = '/';
-
 export const App = () => {
   const [lang] = useLanguage();
 
   return (
     <React.StrictMode>
-      <BrowserRouter basename={basename}>
+      <HashRouter>
         <ErrorBoundary>
           <ConfigProvider
             locale={lang === 'zh' ? zh : en}
@@ -30,7 +26,7 @@ export const App = () => {
             <RouteConfig />
           </ConfigProvider>
         </ErrorBoundary>
-      </BrowserRouter>
+      </HashRouter>
     </React.StrictMode>
   );
 };
diff --git a/src/apis/request.ts b/src/apis/request.ts
@@ -3,7 +3,7 @@ import { InvokeParams, request } from '@huolala-tech/request';
 import { RequestFailed } from './RequestFailed';
 
 export const API_BASE_URL =
-  import.meta.env.VITE_API_BASE || window.location.host;
+  import.meta.env.VITE_API_BASE || window.DEPLOY_BASE_PATH;
 
 export interface Options extends Omit<InvokeParams, 'method' | 'url' | 'data'> {
   data?: unknown;

diff --git a/src/assets/image/debug.svg b/src/assets/image/debug.svg
diff --git a/src/components/InjectSDK/components/IntegrationWithPlatform.tsx b/src/components/InjectSDK/components/IntegrationWithPlatform.tsx
@@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import type { Lang } from 'shiki';
 import { CodeBlock } from '@/components/CodeBlock';
+import { resolveProtocol } from '@/utils';
 
 export type PlatformName = 'web' | 'miniprogram';
 
@@ -31,7 +32,9 @@ export const IntegrationWithPlatform = ({ platform, onCloseModal }: Props) => {
       web: [
         {
           title: t('inject.web.load-sdk'),
-          code: `<script crossorigin="anonymous" src="${window.location.origin}/page-spy/index.min.js"></script>`,
+          code: `<script crossorigin="anonymous" src="${resolveProtocol()[0]}${
+            window.DEPLOY_BASE_PATH
+          }/page-spy/index.min.js"></script>`,
         },
         {
           title: (

diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.less
@@ -0,0 +1,8 @@
+.select-item {
+  display: flex;
+  align-items: center;
+
+  &.label-text {
+    margin-left: 5px;
+  }
+}
diff --git a/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx b/src/pages/Devtools/ConsolePanel/components/HeaderActions/index.tsx
@@ -1,24 +1,95 @@
 import { useSocketMessageStore } from '@/store/socket-message';
 import { ClearOutlined } from '@ant-design/icons';
-import { Row, Col, Tooltip, Button } from 'antd';
-import { useCallback } from 'react';
+import { Row, Col, Tooltip, Button, Select, Space } from 'antd';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ProxyType } from '@huolala-tech/page-spy/dist/types/lib/console';
+import { ReactComponent as ErrorSvg } from '@/assets/image/error.svg';
+import { ReactComponent as InfoSvg } from '@/assets/image/info.svg';
+import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
+import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
+import './index.less';
 
 export const HeaderActions = () => {
   const { t } = useTranslation();
-  const clearRecord = useSocketMessageStore((state) => state.clearRecord);
+  const [clearRecord, changeConsoleMsgFilter] = useSocketMessageStore(
+    (state) => [state.clearRecord, state.setConsoleMsgTypeFilter],
+  );
+
+  const logLevelList: Array<{
+    label: string | React.ReactNode;
+    value: ProxyType;
+  }> = [
+    {
+      label: (
+        <div className="select-item">
+          <UserSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">User messages</span>
+        </div>
+      ),
+      value: 'log',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <ErrorSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Errors</span>
+        </div>
+      ),
+      value: 'error',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <WarnSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Warnings</span>
+        </div>
+      ),
+      value: 'warn',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <InfoSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Info</span>
+        </div>
+      ),
+      value: 'info',
+    },
+    {
+      label: (
+        <div className="select-item">
+          <DebugSvg style={{ height: 15, width: 15 }} />
+          <span className="select-item label-text">Verbose</span>
+        </div>
+      ),
+      value: 'debug',
+    },
+  ];
 
   const clear = useCallback(() => {
     clearRecord('console');
   }, [clearRecord]);
   return (
     <Row justify="end">
       <Col>
-        <Tooltip title={t('common.clear')}>
-          <Button onClick={clear}>
-            <ClearOutlined />
-          </Button>
-        </Tooltip>
+        <Space>
+          <Select
+            onChange={changeConsoleMsgFilter}
+            maxTagCount="responsive"
+            mode="multiple"
+            allowClear={true}
+            options={logLevelList}
+            placeholder="Log Level Filter"
+            style={{ width: 200 }}
+          />
+          <Tooltip title={t('common.clear')}>
+            <Button onClick={clear}>
+              <ClearOutlined />
+            </Button>
+          </Tooltip>
+        </Space>
       </Col>
     </Row>
   );

diff --git a/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx b/src/pages/Devtools/ConsolePanel/components/LogType/index.tsx
@@ -6,13 +6,15 @@ import { ReactComponent as WarnSvg } from '@/assets/image/warn.svg';
 import { ReactComponent as DebugOriginSvg } from '@/assets/image/debug-origin.svg';
 import { ReactComponent as DebugEvalSvg } from '@/assets/image/debug-eval.svg';
 import { ReactComponent as UserSvg } from '@/assets/image/user.svg';
+import { ReactComponent as DebugSvg } from '@/assets/image/debug.svg';
 import './index.less';
 import type { SpyConsole } from '@huolala-tech/page-spy';
 
 interface ThemeItem {
   color: string;
   icon: React.ComponentType | null;
 }
+
 type Theme = Record<SpyConsole.DataType | 'default', ThemeItem>;
 
 const Type2Theme: Partial<Theme> = {
@@ -28,6 +30,10 @@ const Type2Theme: Partial<Theme> = {
     color: '#E9994B',
     icon: WarnSvg,
   },
+  debug: {
+    color: '#8236CB',
+    icon: DebugSvg,
+  },
   'debug-origin': {
     color: '#8236CB',
     icon: DebugOriginSvg,

diff --git a/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx b/src/pages/Devtools/ConsolePanel/components/MainContent/index.tsx
@@ -26,7 +26,10 @@ export const MainContent = () => {
     });
   }, []);
 
-  const [data] = useSocketMessageStore((state) => [state.consoleMsg]);
+  const [data, dataFilter] = useSocketMessageStore((state) => [
+    state.consoleMsg,
+    state.consoleMsgTypeFilter,
+  ]);
   const [newTips, setNewTips] = useState<boolean>(false);
   useEffect(() => {
     if (data.length === 0) {
@@ -83,10 +86,13 @@ export const MainContent = () => {
     }
     return '/';
   }
+  const consoleDataList = dataFilter.length
+    ? data.filter((item) => dataFilter.includes(item.logType))
+    : data;
 
   return (
     <div className="console-list" ref={containerEl}>
-      {data.map((item) => (
+      {consoleDataList.map((item) => (
         <div className={`console-item ${item.logType}`} key={item.id}>
           <div className="console-item__title">
             <LogType type={item.logType} />

diff --git a/src/pages/Devtools/ConsolePanel/index.less b/src/pages/Devtools/ConsolePanel/index.less
@@ -36,6 +36,9 @@
     &:last-child {
       border-bottom: 1px solid #f0f0f0;
     }
+    &.debug {
+      color: #1c419a;
+    }
     &.warn {
       color: #573c10;
       background-color: #fefae3;

diff --git a/src/pages/RoomList/index.tsx b/src/pages/RoomList/index.tsx
@@ -18,6 +18,7 @@ import clsx from 'clsx';
 import { PropsWithChildren, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './index.less';
+import { Link } from 'react-router-dom';
 
 const { Title } = Typography;
 const { Option } = Select;
@@ -188,14 +189,18 @@ export const RoomList = () => {
                         pointerEvents: !client ? 'none' : 'auto',
                       }}
                       shape="round"
-                      onClick={() => {
-                        if (!client) return;
-                        window.open(
-                          `/devtools?version=${name}&address=${address}`,
-                        );
-                      }}
                     >
-                      {t('common.debug')}
+                      {!client ? (
+                        t('common.debug')
+                      ) : (
+                        <Link
+                          to={`/devtools?version=${name}&address=${address}`}
+                          target="_blank"
+                          style={{ display: 'block' }}
+                        >
+                          {t('common.debug')}
+                        </Link>
+                      )}
                     </Button>
                   </div>
                 </Tooltip>