Merge branch 'main' into docs

HuolalaTech · Sep 25, 2024 · e815473 · e815473
2 parents 2b2287e + 96493d6
commit e815473
Show file tree

Hide file tree

Showing 28 changed files with 335 additions and 211 deletions.
diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ yarn global add @huolala-tech/page-spy-api@latest
 npm install -g @huolala-tech/page-spy-api@latest
 ```
 
-After the download is complete, you can directly execute `page-spy-api` in the command line to start the service. Once the deployment is successful, you can open the browser and access `<host>:6752`, the `Inject SDK` menu will be at the top, and you can find how to configure and integrate in the business project by click the menu.
+After the download is complete, you can directly execute `page-spy-api` in the command line to start the service. After the startup is complete, visit `http://localhost:6752` on the browser. Once local testing is complete, you can deploy it to the server.
 
 ### Option 2: deploy by docker
 
@@ -105,20 +105,20 @@ After the download is complete, you can directly execute `page-spy-api` in the c
 docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest
 ```
 
-Once the deployment is successful, you can open the browser and access `<host>:6752`, the `Inject SDK` menu will be at the top, and you can find how to configure and integrate in the business project by click the menu.
+After the startup is complete, visit `http://localhost:6752` on the browser. Once local testing is complete, you can deploy it to the server.
 
-## Community
+## How to contribute?
 
-Join us on our [Official Discord Server](https://discord.gg/ERPpNZkX)!
+Click to see the [Contributing](./CONTRIBUTING.md).
 
-## Roadmap
+## FAQ
 
-Click to see the [Roadmap](https://github.com/orgs/HuolalaTech/projects/1).
+Click to see the [FAQ](https://www.pagespy.org/#/docs/faq).
 
-## How to contribute?
+## Community
 
-Click to see the [Contributing](./CONTRIBUTING.md).
+Join us on our [Official Discord Server](https://discord.gg/ERPpNZkX)!
 
-## FAQ
+## Roadmap
 
-Click to see the [FAQ](https://github.com/HuolalaTech/page-spy-web/wiki/faq).
+Click to see the [Roadmap](https://github.com/orgs/HuolalaTech/projects/1).
diff --git a/README_JA.md b/README_JA.md
@@ -93,7 +93,7 @@ yarn global add @huolala-tech/page-spy-api@latest
 npm install -g @huolala-tech/page-spy-api@latest
 ```
 
-ダウンロードが完了したら、コマンドラインで `page-spy-api` を直接実行してサービスを開始することができます。デプロイが成功したら、ブラウザを開いて `<host>:6752` にアクセスすると、上部に `Inject SDK` メニューが表示され、メニューをクリックすると、ビジネスプロジェクトに設定および統合する方法が表示されます。
+ダウンロードが完了したら、コマンドラインで `page-spy-api` を直接実行してサービスを開始することができます。起動完了後、ブラウザで `http://localhost:6752` にアクセスし、ローカルテストが完了したらサーバーにデプロイすることができます。
 
 ### オプション 2: docker によるデプロイ
 
@@ -105,20 +105,20 @@ npm install -g @huolala-tech/page-spy-api@latest
 docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest
 ```
 
-デプロイが成功したら、ブラウザを開いて `<host>:6752` にアクセスすると、上部に `Inject SDK` メニューが表示され、メニューをクリックすると、ビジネスプロジェクトに設定および統合する方法が表示されます。
+起動完了後、ブラウザで `http://localhost:6752` にアクセスし、ローカルテストが完了したらサーバーにデプロイすることができます。
 
-## コミュニティ
+## コントリビュートするには？
 
-[公式 Discord サーバー](https://discord.gg/ERPpNZkX)に参加してください！
+クリックして [Contributing](./CONTRIBUTING.md) をご覧ください。
 
-## ロードマップ
+## FAQ
 
-クリックして [Roadmap](https://github.com/orgs/HuolalaTech/projects/1) をご覧ください。
+クリックして [FAQ](https://www.pagespy.org/#/docs/faq) をご覧ください。
 
-## コントリビュートするには？
+## コミュニティ
 
-クリックして [Contributing](./CONTRIBUTING.md) をご覧ください。
+[公式 Discord サーバー](https://discord.gg/ERPpNZkX)に参加してください！
 
-## FAQ
+## ロードマップ
 
-クリックして [FAQ](https://github.com/HuolalaTech/page-spy-web/wiki/faq) をご覧ください。
+クリックして [Roadmap](https://github.com/orgs/HuolalaTech/projects/1) をご覧ください。
diff --git a/README_ZH.md b/README_ZH.md
@@ -93,7 +93,7 @@ yarn global add @huolala-tech/page-spy-api@latest
 npm install -g @huolala-tech/page-spy-api@latest
 ```
 
-安装完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。部署完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
+安装完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。启动完成后，打开浏览器访问 `http://localhost:6752` 体验，本地测试完成后即可部署到服务器上。
 
 ### 第二种：使用 Docker 部署
 
@@ -105,7 +105,7 @@ npm install -g @huolala-tech/page-spy-api@latest
 docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest
 ```
 
-启动完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
+启动完成后，打开浏览器访问 `http://localhost:6752` 体验，本地测试完成后即可部署到服务器上。
 
 ## 技术支持
 
@@ -125,4 +125,4 @@ docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:675
 
 ## FAQ
 
-点击查看 [常见问题解答](https://github.com/HuolalaTech/page-spy-web/wiki/%F0%9F%90%9E-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94)。
+点击查看 [常见问题解答](https://www.pagespy.org/#/docs/faq)。
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.2",
+  "version": "1.9.3",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "repository": {
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^1.9.8",
+    "@huolala-tech/page-spy-browser": "^1.9.10",
     "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.7",
     "@huolala-tech/page-spy-plugin-rrweb": "^1.2.7",
     "@huolala-tech/page-spy-types": "^1.9.6",

diff --git a/src/assets/image/screenshot/module.png b/src/assets/image/screenshot/module.png
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
@@ -229,6 +229,7 @@
     "update-layout": "Update Layout",
     "speed": "Speed",
     "delete-select": "Delete Selected",
-    "delete-select-desc": "Are you sure you want to delete selected logs?"
+    "delete-select-desc": "Are you sure you want to delete selected logs?",
+    "unsupport-spread": "Cannot spread object in offline mode"
   }
 }
diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
@@ -228,6 +228,7 @@
     "update-layout": "レイアウトの更新",
     "speed": "倍速",
     "delete-select": "選択されたものを削除",
-    "delete-select-desc": "選択したログを削除してもよろしいですか？"
+    "delete-select-desc": "選択したログを削除してもよろしいですか？",
+    "unsupport-spread": "オフラインモードではオブジェクトを展開できません"
   }
 }
diff --git a/src/assets/locales/ko.json b/src/assets/locales/ko.json
@@ -228,6 +228,7 @@
     "update-layout": "레이아웃 업데이트",
     "speed": "속도",
     "delete-select": "선택 항목 삭제",
-    "delete-select-desc": "선택한 로그를 삭제하시겠습니까?"
+    "delete-select-desc": "선택한 로그를 삭제하시겠습니까?",
+    "unsupport-spread": "오프라인 모드에서는 객체를 펼칠 수 없습니다"
   }
 }
diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json
@@ -228,6 +228,7 @@
     "update-layout": "调整布局",
     "speed": "倍速",
     "delete-select": "删除已选",
-    "delete-select-desc": "确认删除所有已选择的日志吗？"
+    "delete-select-desc": "确认删除所有已选择的日志吗？",
+    "unsupport-spread": "离线模式无法展开对象"
   }
 }
diff --git a/src/assets/style/initial.less b/src/assets/style/initial.less
@@ -10,11 +10,11 @@ body {
 
 body {
   font-size: 14px;
+  overflow: hidden auto;
 }
 
 #root {
   height: 100%;
-  overflow: hidden auto;
 }
 
 pre,

diff --git a/src/components/ConfigProvider/index.tsx b/src/components/ConfigProvider/index.tsx
@@ -0,0 +1,28 @@
+import { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+
+interface Config {
+  offline: boolean;
+}
+
+const defaultConfig: Config = {
+  offline: false,
+};
+
+const Context = createContext<Config>(defaultConfig);
+
+export const ConfigProvider = ({
+  children,
+  ...props
+}: PropsWithChildren<Partial<Config>>) => {
+  const config = useMemo(
+    () => ({
+      ...defaultConfig,
+      ...props,
+    }),
+    [props],
+  );
+
+  return <Context.Provider value={config}>{children}</Context.Provider>;
+};
+
+export const useConfig = () => useContext(Context);
diff --git a/src/components/ConsoleNode/ErrorTrace/index.less b/src/components/ConsoleNode/ErrorTrace/index.less
@@ -5,12 +5,13 @@
 
   &-node {
     flex: 1;
+    font-size: 12px;
     padding-inline: 8px;
   }
 
   &-icon {
     color: #bbb;
-    font-size: 20px;
+    font-size: 16px;
     cursor: pointer;
     &:hover {
       color: #999;

diff --git a/src/components/ConsoleNode/PlaceholderNode/index.less b/src/components/ConsoleNode/PlaceholderNode/index.less
@@ -1,6 +1,8 @@
 .placeholder-node {
   display: inline-flex;
   align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 6px;
   font-size: 12px;
   word-break: break-word;
 }
diff --git a/src/components/ConsoleNode/index.less b/src/components/ConsoleNode/index.less
@@ -41,6 +41,10 @@
 
 .atom-node {
   cursor: default;
+  &.disabled {
+    color: #8c8c8c;
+    cursor: not-allowed;
+  }
   .spread-controller {
     transform: rotateZ(0);
     transition: transform linear 0.1s;

diff --git a/src/components/ConsoleNode/index.tsx b/src/components/ConsoleNode/index.tsx
@@ -8,6 +8,9 @@ import CopyContent from '../CopyContent';
 import type { SpyAtom } from '@huolala-tech/page-spy-types';
 import { LoadMore } from './LoadMore';
 import { useSocketMessageStore } from '@/store/socket-message';
+import { useConfig } from '../ConfigProvider';
+import { Tooltip } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 function isAtomNode(data: SpyAtom.Overview) {
   return data && data.type === 'atom' && data.__atomId !== undefined;
@@ -156,12 +159,15 @@ interface AtomNodeProps {
   showArrow?: boolean;
 }
 function AtomNode({ id, value, showArrow = true }: AtomNodeProps) {
+  const { offline } = useConfig();
+  const { t } = useTranslation();
   const socket = useSocketMessageStore((state) => state.socket);
   const [spread, setSpread] = useState(false);
   const [property, setProperty] = useState<Record<string, SpyAtom.Overview>>(
     {},
   );
   useEffect(() => {
+    if (offline) return;
     if (socket) {
       socket.addListener(`atom-detail-${id}`, (data: any) => {
         setProperty(data);
@@ -170,7 +176,7 @@ function AtomNode({ id, value, showArrow = true }: AtomNodeProps) {
     return () => {
       socket?.removeListener(`atom-detail-${id}`);
     };
-  }, [socket, id]);
+  }, [socket, id, offline]);
 
   const PropertyPanel = useCallback(() => {
     let prototypeFlag = false;
@@ -205,26 +211,32 @@ function AtomNode({ id, value, showArrow = true }: AtomNodeProps) {
   }, [id, property, spread]);
 
   const getAtomDetail = useCallback(() => {
-    if (!id) return;
+    if (offline || !id) return;
     if (socket && Object.keys(property).length === 0) {
       socket.unicastMessage({
         type: 'atom-detail',
         data: id,
       });
     }
     setSpread(!spread);
-  }, [socket, property, spread, id]);
+  }, [offline, id, socket, property, spread]);
 
   return (
-    <div className="atom-node">
-      <code className="console-node atom" onClick={getAtomDetail}>
-        {showArrow && (
-          <CaretRightOutlined
-            className={clsx(['spread-controller', spread && 'spread'])}
-          />
-        )}
-        <i>{value}</i>
-      </code>
+    <div
+      className={clsx('atom-node', {
+        disabled: offline,
+      })}
+    >
+      <Tooltip title={offline && t('replay.unsupport-spread')}>
+        <code className="console-node atom" onClick={getAtomDetail}>
+          {showArrow && (
+            <CaretRightOutlined
+              className={clsx(['spread-controller', spread && 'spread'])}
+            />
+          )}
+          <i>{value}</i>
+        </code>
+      </Tooltip>
       <PropertyPanel />
     </div>
   );

diff --git a/src/components/DetailBlock/index.tsx b/src/components/DetailBlock/index.tsx
@@ -1,10 +1,10 @@
 import React, { ReactNode } from 'react';
 import './index.less';
 
-type Props = {
+interface Props {
   title?: string | ReactNode;
   children?: ReactNode;
-};
+}
 
 const DetailBlock = (props: Props) => {
   return (

diff --git a/src/pages/Devtools/NetworkPanel/index.less b/src/pages/Devtools/NetworkPanel/index.less
@@ -10,3 +10,12 @@
     overflow: auto;
   }
 }
+
+.select-item {
+  display: flex;
+  align-items: center;
+
+  &.label-text {
+    margin-left: 5px;
+  }
+}