feat: add OSpy

package.json

@@ -52,11 +52,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^2.1.2",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^2.1.1",
-    "@huolala-tech/page-spy-plugin-rrweb": "^2.1.1",
-    "@huolala-tech/page-spy-plugin-whole-bundle": "^2.1.3",
-    "@huolala-tech/page-spy-types": "^2.1.1",
+    "@huolala-tech/page-spy-browser": "^2.1.3",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^2.1.2",
+    "@huolala-tech/page-spy-plugin-ospy": "^2.1.7",
+    "@huolala-tech/page-spy-plugin-rrweb": "^2.1.2",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^2.1.5",
+    "@huolala-tech/page-spy-types": "^2.1.2",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
     "@mdx-js/mdx": "^3.0.1",
@@ -112,5 +113,6 @@
   ],
   "optionalDependencies": {
     "@huolala-tech/page-spy-api": "^2.0.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

scripts/public-files.sh

@@ -18,6 +18,9 @@ cp "${root}/node_modules/@huolala-tech/page-spy-plugin-data-harbor/dist/iife/ind
 # @huolala-tech/page-spy-plugin-whole-bundle
 mkdir -p "${target_plugin}/whole-bundle"
 cp "${root}/node_modules/@huolala-tech/page-spy-plugin-whole-bundle/dist/iife/index.min.js" "${root}/public/plugin/whole-bundle/index.min.js"
+# @huolala-tech/page-spy-plugin-ospy
+mkdir -p "${target_plugin}/ospy"
+cp "${root}/node_modules/@huolala-tech/page-spy-plugin-ospy/dist/iife/index.min.js" "${root}/public/plugin/ospy/index.min.js"
 
 # source-map
 target_sourcemap="${root}/public/source-map"

src/assets/locales/en.json

@@ -47,7 +47,7 @@
     "copied": "Copied",
     "prev": "Previous",
     "next": "Next",
-    "replay-lab": "Replay Lab",
+    "o-spy": "oSpy",
     "toc": "Table of Contents",
     "filter": "Filter",
     "back": "Back"
@@ -90,8 +90,8 @@
   "banner": {
     "title": "All-In-One<br />Remote Debugging Tool",
     "desc": "Debug remotely and easily with a range of features like chrome devtool.",
-    "get-start": "Quick Start",
-    "take-try": "Try Now"
+    "get-start": "Get Started",
+    "badge": "No Deploy"
   },
   "intro": {
     "does": "What PageSpy does",
@@ -100,7 +100,7 @@
     "providesTitle": "Out-of-box <1>SDK</1> and<br /> <4>debugger client</4>",
     "load-script": "First, load the file",
     "init-instance": "Then, configure (optional) and initialize",
-    "welcome": "Welcome to use PageSpy"
+    "community-comments": "<0>Loved by the community</0><1>Don't just take our word for it<br />Hear from real users in the PageSpy community</1>"
   },
   "selConn": {
     "title": "Select the connection",
@@ -248,25 +248,30 @@
       "remark": "Remark"
     }
   },
-  "lab": {
-    "welcome": "Welcome",
-    "welcome-title": "Welcome to<br />Replay Lab",
-    "welcome-desc": "With just a few lines of code, empower your system with robust 'feedback capabilities'.<br />All data stays local, with no network transmission, ensuring complete privacy.",
-    "take-try": "Try Demo",
+  "oSpy": {
+    "slogan": "Offline Recording<br />Plug and Play",
+    "desc": "Record and replay with a few lines of code.<br />All data stays local, no network transfer, no privacy risk.",
+    "import-use": "Integrate O-Spy",
     "select-log": "Select Log",
-    "import-use": "Integrate",
+    "take-try": "Try Demo",
     "install": "Install",
     "install-title": "Choose Preferred Integration",
     "install-desc": "Framework agnostic. Choose any method to integrate into your project.",
     "comment-title": "Title displayed on floating ball and popup",
     "comment-logo": "Path to the logo image",
     "comment-primaryColor": "Customize theme color",
-    "comment-autoRender": "Call $feedback.open() to open the popup if set to false",
+    "comment-autoRender": "Call $oSpy.open() to open the popup if set to false",
+    "comment-exportButtonText": "Custom text on the button inside the popup",
+    "comment-onExportButtonClick": "Custom callback after clicking the button inside the popup",
+    "comment-default-params": "All parameters are optional, use them as needed.",
     "install-1st": "First, install the dependency:",
     "install-2nd": "Next, create an instance:",
     "install-result": "After installation, a widget will appear in the bottom right corner. Click to open the popup, enter a note, and export the log.",
     "replay": "Replay",
     "guide": "Back to Guide",
-    "only-pc": "Please visit on PC :)"
+    "only-pc": "Please visit on PC :)",
+    "console-output": "Console Output",
+    "network-request": "Network Request",
+    "modify-storage": "Modify Storage"
   }
 }

src/assets/locales/ja.json

@@ -47,7 +47,7 @@
     "copied": "コピーされました",
     "prev": "前のページ",
     "next": "次のページ",
-    "replay-lab": "リプレイラボ",
+    "o-spy": "oSpy",
     "toc": "目次",
     "filter": "フィルター",
     "back": "戻る"
@@ -89,8 +89,8 @@
   "banner": {
     "title": "多機能<br />リモートデバッグツール",
     "desc": "Google Chromeのコンソールのように簡単にリモートデバッグを開始します。",
-    "get-start": "クイックスタート",
-    "take-try": "今すぐ体験"
+    "get-start": "使い始める",
+    "badge": "デプロイ不要"
   },
   "intro": {
     "does": "PageSpyでできること",
@@ -99,7 +99,7 @@
     "providesTitle": "使用準備の整った <1>SDK</1> および<br /> <4>クライアントデバッグ</4>",
     "load-script": "まず、ファイルを読み込む",
     "init-instance": "次に、設定（任意）して初期化する",
-    "welcome": "PageSpyへようこそ"
+    "community-comments": "<0>コミュニティで高い評価</0><1>私たちの言葉だけでなく<br />PageSpy コミュニティのリアルな声を聞いてみましょう</1>"
   },
   "selConn": {
     "title": "接続を選択",
@@ -247,25 +247,30 @@
       "remark": "備考"
     }
   },
-  "lab": {
-    "welcome": "ようこそ",
-    "welcome-title": "リプレイラボへ<br />ようこそ",
-    "welcome-desc": "数行のコードでシステムに強力な「フィードバック機能」を追加できます。<br />データはすべてローカルに保存され、ネットワーク送信は不要で、プライバシーが完全に保護されます。",
-    "take-try": "デモ体験",
+  "oSpy": {
+    "slogan": "オフライン記録<br />プラグアンドプレイ",
+    "desc": "数行のコードで記録＆リプレイ。<br />データはローカルのみ、ネット転送なし、プライバシー安心。",
+    "import-use": "O-Spy 接続",
     "select-log": "ログ選択",
-    "import-use": "導入",
+    "take-try": "デモ体験",
     "install": "インストール",
     "install-title": "お好みの統合方法を選択してください",
     "install-desc": "フレームワークに依存しません。プロジェクトに最適な方法を自由に選べます。",
     "comment-title": "フローティングボタンとポップアップに表示されるタイトル",
     "comment-logo": "ロゴ画像のパス",
     "comment-primaryColor": "テーマカラーをカスタマイズ",
-    "comment-autoRender": "false に設定した場合、$feedback.open() を呼び出してポップアップを開けます。",
+    "comment-autoRender": "false に設定した場合、$oSpy.open() を呼び出してポップアップを開けます。",
+    "comment-exportButtonText": "ポップアップ内ボタンのカスタムテキスト",
+    "comment-onExportButtonClick": "ポップアップ内ボタンをクリックした後のカスタムコールバック",
+    "comment-default-params": "すべてのパラメーターはオプションです。必要に応じて使用してください。",
     "install-1st": "最初に依存関係をインストールしてください:",
     "install-2nd": "次にインスタンスを作成してください:",
     "install-result": "インストール後、右下にウィジェットが表示されます。クリックしてポップアップを開き、メモを入力してログをエクスポートしてください。",
     "replay": "リプレイ",
     "guide": "ガイドへ戻る",
-    "only-pc": "PCでご利用ください :)"
+    "only-pc": "PCでご利用ください :)",
+    "console-output": "コンソール出力",
+    "network-request": "ネットワークリクエスト",
+    "modify-storage": "Storage を変更"
   }
 }

src/assets/locales/ko.json

@@ -47,7 +47,7 @@
     "copied": "복사되었습니다",
     "prev": "이전 페이지",
     "next": "다음 페이지",
-    "replay-lab": "리플레이 연구소",
+    "o-spy": "oSpy",
     "toc": "목차",
     "filter": "필터",
     "back": "돌아가기"
@@ -89,8 +89,8 @@
   "banner": {
     "title": "다기능<br />원격 디버깅 도구",
     "desc": "Google Chrome 콘솔을 사용하는 것처럼 간단히 원격 디버깅을 시작하세요.",
-    "get-start": "빠른 시작",
-    "take-try": "지금 체험"
+    "get-start": "시작하기",
+    "badge": "배포불필요"
   },
   "intro": {
     "does": "PageSpy가 할 수 있는 일",
@@ -99,7 +99,7 @@
     "providesTitle": "사용 준비가 된 <1>SDK</1><br />및 <4>클라이언트 디버그</4>",
     "load-script": "먼저, 파일을 로드합니다",
     "init-instance": "그런 다음, 설정(선택 사항)하고 초기화합니다",
-    "welcome": "PageSpy에 오신 것을 환영합니다."
+    "community-comments": "<0>커뮤니티에서 사랑받는 서비스</0><1>우리의 말만 믿지 마세요<br />PageSpy 커뮤니티의 실제 사용자들의 의견을 들어보세요</1>"
   },
   "selConn": {
     "title": "연결 선택",
@@ -247,25 +247,30 @@
       "remark": "비고"
     }
   },
-  "lab": {
-    "welcome": "환영합니다",
-    "welcome-title": "리플레이 랩에<br />오신 것을 환영합니다",
-    "welcome-desc": "몇 줄의 코드로 시스템에 강력한 '피드백 기능'을 추가하세요.<br />모든 데이터는 로컬에 저장되며, 네트워크 전송 없이 완벽한 개인정보 보호가 가능합니다.",
-    "take-try": "데모 체험",
+  "oSpy": {
+    "slogan": "오프라인 기록<br />플러그 앤 플레이",
+    "desc": "몇 줄의 코드로 기록 및 재생.<br />데이터는 로컬에만 저장, 네트워크 전송 없음, 개인정보 걱정 없음.",
+    "import-use": "O-Spy 연결",
     "select-log": "로그 선택",
-    "import-use": "연동",
+    "take-try": "데모 체험",
     "install": "설치",
     "install-title": "선호하는 통합 방식을 선택하세요",
     "install-desc": "프레임워크에 구애받지 않습니다. 프로젝트에 맞는 방식을 자유롭게 선택하세요.",
     "comment-title": "플로팅 버튼과 팝업에 표시되는 제목",
     "comment-logo": "로고 이미지 경로",
     "comment-primaryColor": "테마 색상 사용자 정의",
-    "comment-autoRender": "false로 설정 시 $feedback.open()을 호출하여 팝업을 열 수 있습니다.",
+    "comment-autoRender": "false로 설정 시 $oSpy.open()을 호출하여 팝업을 열 수 있습니다.",
+    "comment-exportButtonText": "팝업 내 버튼의 사용자 지정 텍스트",
+    "comment-onExportButtonClick": "팝업 내 버튼 클릭 후 사용자 지정 콜백",
+    "comment-default-params": "모든 매개변수는 선택 사항이며, 필요에 따라 사용하세요.",
     "install-1st": "먼저 의존성을 설치하세요:",
     "install-2nd": "다음으로 인스턴스를 생성하세요:",
     "install-result": "설치 후 오른쪽 하단에 위젯이 나타납니다. 클릭하여 팝업을 열고 메모를 입력한 후 로그를 내보내세요.",
     "replay": "재생",
     "guide": "가이드로 돌아가기",
-    "only-pc": "PC에서 방문해주세요 :)"
+    "only-pc": "PC에서 방문해주세요 :)",
+    "console-output": "콘솔 출력",
+    "network-request": "네트워크 요청",
+    "modify-storage": "Storage 수정"
   }
 }

src/assets/locales/zh.json

@@ -47,7 +47,7 @@
     "copied": "已复制",
     "prev": "上一页",
     "next": "下一页",
-    "replay-lab": "回放实验室",
+    "o-spy": "oSpy",
     "toc": "本页目录",
     "filter": "筛选",
     "back": "返回"
@@ -88,9 +88,9 @@
   },
   "banner": {
     "title": "多功能<br />远程调试工具",
-    "desc": "像使用谷歌浏览器的控制台一样简单地开始远程调试。",
-    "get-start": "快速上手",
-    "take-try": "立刻体验"
+    "desc": "像使用谷歌浏览器的控制台一样简单地开始远程调试",
+    "get-start": "开始使用",
+    "badge": "免部署版"
   },
   "intro": {
     "does": "PageSpy 可以做到",
@@ -99,7 +99,7 @@
     "providesTitle": "开箱即用的 <1>SDK</1> 和<br /> <4>调试的客户端</4>",
     "load-script": "首先，引入文件",
     "init-instance": "然后，配置（可选的）并初始化",
-    "welcome": "欢迎使用 PageSpy"
+    "community-comments": "<0>深受社区青睐</0><1>不要只看我们说<br />来听听 PageSpy 社区中真实用户的声音</1>"
   },
   "selConn": {
     "title": "选择连接",
@@ -247,25 +247,30 @@
       "remark": "备注"
     }
   },
-  "lab": {
-    "welcome": "欢迎",
-    "welcome-title": "欢迎来到<br />回放实验室",
-    "welcome-desc": "几行代码，让系统拥有强大的「问题反馈」能力<br />数据都在本地，不经过网络传输，无需担心隐私泄露",
-    "take-try": "体验 Demo",
+  "oSpy": {
+    "slogan": "离线记录<br />即插即用",
+    "desc": "几行代码，记录程序现场用于回放<br />数据都在本地，不经过网络传输，无需担心隐私泄露",
+    "import-use": "接入 O-Spy",
     "select-log": "选择日志回放",
-    "import-use": "接入使用",
+    "take-try": "体验 Demo",
     "install": "安装",
     "install-title": "随心选择引入方式",
     "install-desc": "与框架无关，你可以任选一种方式在项目中引入",
     "comment-title": "悬浮球和弹窗上显示的标题",
     "comment-logo": "Logo 的图片路径",
     "comment-primaryColor": "定制主题色",
-    "comment-autoRender": "默认渲染悬浮球，设置为 false 后可调用 $feedback.open() 打开弹窗",
+    "comment-autoRender": "默认渲染悬浮球，设置为 false 后可调用 $oSpy.open() 打开弹窗",
+    "comment-exportButtonText": "自定义弹窗内按钮上的文案",
+    "comment-onExportButtonClick": "自定义弹窗内按钮点击后的回调",
+    "comment-default-params": "所有参数都是可选的，你可按需使用",
     "install-1st": "首先安装依赖：",
     "install-2nd": "接着实例化：",
     "install-result": "引入后会出现右下角所示控件，点开弹窗输入备注信息、并导出日志。",
     "replay": "回放",
     "guide": "返回指引",
-    "only-pc": "请前往 PC 端体验 :)"
+    "only-pc": "请前往 PC 端体验 :)",
+    "console-output": "输出日志",
+    "network-request": "网络请求",
+    "modify-storage": "修改 Storage"
   }
 }

src/pages/Docs/components/DocContent/index.less → src/components/Docs/components/DocContent/index.less

@@ -111,14 +111,16 @@
       border-radius: 5px;
     }
     table {
+      min-width: 80%;
       margin-top: 12px;
       border-collapse: collapse;
-      border: 1px solid #333;
+      border: 2px solid #333;
       border-radius: 4px;
+      text-align: center;
     }
     th,
     td {
-      border: 1px solid #333;
+      border: 2px solid #333;
       border-radius: 4px;
 
       padding: 6px 14px;