update Inject-SDK desc

update README update README
HuolalaTech · Dec 11, 2023 · 7235193 · 7235193
1 parent ebed2e7
commit 7235193
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -26,19 +26,19 @@
 
 为了数据安全和方便您的使用，我们提供完整的、开箱即用的部署方案。
 
-### Docker 部署 👍
+### Docker 部署
 
-视频教程：[使用 Docker 部署 PageSpy](https://www.bilibili.com/video/BV1Ph4y1y78R)
+> 视频教程：[使用 Docker 部署 PageSpy](https://www.bilibili.com/video/BV1Ph4y1y78R)
 
 ```bash
 $ docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
 ```
 
-### Node 部署
+启动完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。
 
-视频教程：[使用 Node 部署 PageSpy](https://www.bilibili.com/video/BV1oM4y1p7Le/?spm_id_from=333.788.recommend_more_video.1&vd_source=6b4fed1a463f67c0e8e56eaa21faa997)
+### Node 部署
 
-> 提示：这会根据不同的平台下载对应的二进制文件，二进制文件包含了必要的所有内容，所以下载需要一点时间，请耐心等待。
+> 视频教程：[使用 Node 部署 PageSpy](https://www.bilibili.com/video/BV1oM4y1p7Le/?spm_id_from=333.788.recommend_more_video.1&vd_source=6b4fed1a463f67c0e8e56eaa21faa997)
 
 ```bash
 $ yarn global add @huolala-tech/page-spy-api
@@ -48,8 +48,7 @@ $ yarn global add @huolala-tech/page-spy-api
 $ npm install -g @huolala-tech/page-spy-api
 ```
 
-下载完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。
-同时还会在运行目录下面生成配置文件 config.json，修改配置文件可以修改运行端口
+安装完成之后你可以在命令行中直接执行 `page-spy-api` 启动服务。该命令会在运行目录下面生成配置文件 config.json，修改配置文件可以修改运行端口：
 
 ```json
 {
@@ -68,3 +67,7 @@ $ npm install -g @huolala-tech/page-spy-api
 ## 如何贡献代码？
 
 点击查看 [Contributing](./CONTRIBUTING_CN.md)。
+
+## 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)。
diff --git a/README_EN.md b/README_EN.md
@@ -24,15 +24,15 @@ Based on encapsulation of native web APIs, it filters and transforms the paramet
 
 For data security and your convenience, we provide a complete and out-of-box deployment solution.
 
-### Docker 👍
+### Docker
 
 ```bash
 $ docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
 ```
 
-### Node
+Once the deployment is successful, 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.
 
-> HINT: This will download the corresponding binary file based on the platform, which contains all the necessary content, so the download may take some time, please be patient.
+### Node
 
 ```bash
 $ yarn global add @huolala-tech/page-spy-api

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
@@ -26,8 +26,7 @@
   },
   "inject": {
     "load-script": "Load a <script> in the testing project;",
-    "init-instance": "Then, config (optional) and init;",
-    "pass-config": "<0>You can also pass configurations, which will override the default values.</0> <1>See details;</1>",
+    "init-instance": "<0>Next, configure (optional) and initialize; check </0><1>configuration options;</1>",
     "end": "That's ALL.",
     "start-debug": "Start debugging by clicking the <1>Connections</1> menu at the top!"
   },

diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json
@@ -26,8 +26,7 @@
   },
   "inject": {
     "load-script": "テストプロジェクトに <script> を読み込む；",
-    "init-instance": "次に、（オプションで）構成して初期化します；",
-    "pass-config": "<0>も設定を渡すことができ、これによりデフォルトの値が上書きされます。</0><1>詳細を見る；</1>",
+    "init-instance": "<0>次に、構成（オプション）して初期化します； </0><1>構成オプションを確認します。</1>",
     "end": "以上がすべてです。",
     "start-debug": "<1>接続</1>メニューからトップに移動し、デバッグを開始します！"
   },

diff --git a/src/assets/locales/ko.json b/src/assets/locales/ko.json
@@ -26,8 +26,7 @@
   },
   "inject": {
     "load-script": "테스트 프로젝트에 <script>를 로드합니다.",
-    "init-instance": "그 다음, (선택 사항으로) 설정하고 초기화합니다.",
-    "pass-config": "<0>도 설정을 전달할 수 있으며, 이렇게하면 기본값이 덮어쓰기됩니다,</0> <1>자세한 내용은 여기를 확인하세요.</1>",
+    "init-instance": "<0>다음으로, 구성 (옵션) 및 초기화; 확인 </0><1>구성 옵션;</1>",
     "end": "모두 여기까지입니다.",
     "start-debug": "<1>연결</1> 메뉴에서 상단으로 이동하여 디버그를 시작하세요!"
   },

diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json
@@ -26,8 +26,7 @@
   },
   "inject": {
     "load-script": "在测试项目中加载一个 <script>；",
-    "init-instance": "紧接着，配置（可选的）并初始化；",
-    "pass-config": "<0>也可以传递配置，这将覆盖默认的值，</0><1>查看详情；</1>",
+    "init-instance": "<0>紧接着，配置（可选的）并初始化；查看 </0><1>配置项；</1>",
     "end": "以上就是全部。",
     "start-debug": "从顶部的 <1>房间列表</1> 菜单进入并开始调试！"
   },

diff --git a/src/components/InjectSDK/index.tsx b/src/components/InjectSDK/index.tsx
@@ -19,56 +19,21 @@ export const InjectSDKModal = ({
         title: t('inject.load-script'),
         code: `<script crossorigin="anonymous" src="${window.location.origin}/page-spy/index.min.js"></script>`,
       },
-      {
-        title: t('inject.init-instance'),
-        code: `<script>
-  window.$pageSpy = new PageSpy();
-</script>`,
-      },
       {
         title: (
-          <Trans i18nKey="inject.pass-config">
+          <Trans i18nKey="inject.init-instance">
             <span>slot-0</span>
-            <a href="https://github.com/HuolalaTech/page-spy" target="_blank">
+            <a
+              href="https://github.com/HuolalaTech/page-spy?tab=readme-ov-file#%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%8F%82%E6%95%B0"
+              target="_blank"
+            >
               slot-1
             </a>
           </Trans>
         ),
         code: `<script>
-  window.$pageSpy = new PageSpy({
-    /**
-     * The server base url. For example, "example.com".
-     */
-    api: string,
-    /**
-     * The debugger client host. For example, "https://example.com".
-     */
-    clientOrigin: string,
-    /**
-     * The project name used for grouping connections.
-     */
-    project: string,
-    /**
-     * Indicate whether auto render the widget on the bottom-left
-     * corner. You can manually render later by calling
-     * "window.$pageSpy.render()" if passed false.
-     * @default true
-     */
-    autoRender: boolean,
-    /**
-     * Custom title for displaying some data like user info to
-     * help you to distinguish the client. The title value will
-     * show in the room-list route page.
-     */
-    title: string,
-    /**
-     * Manually specify the scheme for the PageSpy service,
-     * only if the SDK can't analyse the scheme correctly.
-     */
-    enableSSL: null | boolean,
-  });
-</script>
-`,
+  window.$pageSpy = new PageSpy();
+</script>`,
       },
       {
         title: (