fix conflicts

Author: wqcstrong

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.7.1
+require github.com/HuolalaTech/page-spy-api v1.8.0
 
 require (
 	github.com/aws/aws-sdk-go v1.54.8 // indirect

backend/go.sum

@@ -1,5 +1,5 @@
-github.com/HuolalaTech/page-spy-api v1.7.1 h1:DMlxH2w0Tjpz3AUlAxGOQ9R/49NG9BkGzwNyHqlCU0c=
-github.com/HuolalaTech/page-spy-api v1.7.1/go.mod h1:ea28Ve14wtUsw+/BmUQ4PUqBzCRAC1PX5hXiVe1a45o=
+github.com/HuolalaTech/page-spy-api v1.8.0 h1:TjNSN55rben53ydBT1EHV7XUlKrut8oOMy83im6+AlI=
+github.com/HuolalaTech/page-spy-api v1.8.0/go.mod h1:ea28Ve14wtUsw+/BmUQ4PUqBzCRAC1PX5hXiVe1a45o=
 github.com/aws/aws-sdk-go v1.54.8 h1:+soIjaRsuXfEJ9ts9poJD2fIIzSSRwfx+T69DrTtL2M=
 github.com/aws/aws-sdk-go v1.54.8/go.mod h1:eRwEWoyTWFMVYVQzKMNHWP5/RV4xIUGMQfXQHfHkpNU=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "All-In-One Remote Debugging Tool",
   "homepage": "https://huolalatech.github.io/page-spy-web",
   "repository": {
@@ -47,16 +47,16 @@
     "typescript": "^5.3.3",
     "vite": "^5.4.11",
     "vite-plugin-ejs": "^1.6.4",
-    "vite-plugin-svgr": "^2.4.0",
+    "vite-plugin-svgr": "^4.3.0",
     "yorkie": "^2.0.0"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@huolala-tech/page-spy-browser": "^2.0.1",
-    "@huolala-tech/page-spy-plugin-data-harbor": "^2.0.2",
-    "@huolala-tech/page-spy-plugin-rrweb": "^2.0.0",
-    "@huolala-tech/page-spy-plugin-whole-bundle": "^2.0.2",
-    "@huolala-tech/page-spy-types": "^2.0.0",
+    "@huolala-tech/page-spy-browser": "^2.1.0",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^2.1.0",
+    "@huolala-tech/page-spy-plugin-rrweb": "^2.1.0",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^2.1.0",
+    "@huolala-tech/page-spy-types": "^2.1.0",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
     "@mdx-js/mdx": "^3.0.1",

src/assets/image/copied.svg

@@ -48,7 +48,8 @@
     "prev": "Previous",
     "next": "Next",
     "replay-lab": "Replay Lab",
-    "toc": "Table of Contents"
+    "toc": "Table of Contents",
+    "filter": "Filter"
   },
   "error": {
     "oops": "Oops! Errors happened~",
@@ -247,18 +248,26 @@
     }
   },
   "lab": {
-    "welcome": "Welcome to the Replay Lab!",
-    "statement": "The log data is processed entirely on your local client without being transmitted to any server, so you can use it with confidence.",
-    "only-pc": "Please visit the PC version for the best experience :)",
-    "one-line": "With just one line,",
-    "load-pageSpy": "you can integrate PageSpy into your project.",
-    "then": "Once integrated,",
-    "feedback-demo": "a \"Feedback\" widget will appear at the bottom right of the page as shown.",
-    "try-click": "Try clicking it to check it out!",
-    "after": "Once everything is set,",
-    "click-upload": "click the button below to upload the file you just exported.",
-    "upload-btn": "Upload File",
-    "congratulation": "Good luck, developers!",
-    "desc": "(This only demonstrates the log replay functionality. PageSpy also supports real-time online debugging. For more details, please check the documentation.)"
+    "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 Now",
+    "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",
+    "install-1st": "First, install the dependency:",
+    "install-2nd": "Next, create an instance:",
+    "customize": "Customize",
+    "customize-lTitle": "Personalization",
+    "customize-lDesc": "Theme color, logo, and title are customizable. Below are reference cases.",
+    "customize-rTitle": "First Experience",
+    "customize-rDesc": "Everything is ready! Click the float ball rendered at the bottom right.<br />Try entering a comment in the popup and export the logs.<br />Soon, I'll guide you to <5>review your own replay</5>!",
+    "replay": "Replay",
+    "guide": "Integration Guide",
+    "only-pc": "Please visit on PC :)"
   }
 }

src/assets/image/copy.svg

@@ -48,7 +48,8 @@
     "prev": "前のページ",
     "next": "次のページ",
     "replay-lab": "リプレイラボ",
-    "toc": "目次"
+    "toc": "目次",
+    "filter": "フィルター"
   },
   "error": {
     "oops": "おっと！エラーが発生しました。",
@@ -246,18 +247,26 @@
     }
   },
   "lab": {
-    "welcome": "リプレイラボへようこそ！",
-    "statement": "ログデータはサーバーを経由せず、完全にローカルクライアント上で処理されるので、安心してお使いください。",
-    "only-pc": "PC版で体験してください :)",
-    "one-line": "たった1行で、",
-    "load-pageSpy": "プロジェクトにPageSpyを導入できます。",
-    "then": "導入後、",
-    "feedback-demo": "ページの右下に「フィードバック」ウィジェットが表示されます。",
-    "try-click": "クリックして試してみてください！",
-    "after": "すべて準備が整ったら、",
-    "click-upload": "下のボタンをクリックして、先ほどエクスポートしたファイルをアップロードしてください。",
-    "upload-btn": "ファイルをアップロード",
-    "congratulation": "開発者の皆さん、幸運を祈ります！",
-    "desc": "（ここではログリプレイの機能のみを表示していますが、PageSpyはリアルタイムオンラインデバッグもサポートしています。詳細はドキュメントをご確認ください。）"
+    "welcome": "ようこそ",
+    "welcome-title": "リプレイラボへ<br />ようこそ",
+    "welcome-desc": "数行のコードでシステムに強力な「フィードバック機能」を追加できます。<br />データはすべてローカルに保存され、ネットワーク送信は不要で、プライバシーが完全に保護されます。",
+    "take-try": "今すぐ体験",
+    "install": "インストール",
+    "install-title": "お好みの統合方法を選択してください",
+    "install-desc": "フレームワークに依存しません。プロジェクトに最適な方法を自由に選べます。",
+    "comment-title": "フローティングボタンとポップアップに表示されるタイトル",
+    "comment-logo": "ロゴ画像のパス",
+    "comment-primaryColor": "テーマカラーをカスタマイズ",
+    "comment-autoRender": "false に設定した場合、$feedback.open() を呼び出してポップアップを開けます。",
+    "install-1st": "最初に依存関係をインストールしてください:",
+    "install-2nd": "次にインスタンスを作成してください:",
+    "customize": "カスタマイズ",
+    "customize-lTitle": "個別設定",
+    "customize-lDesc": "テーマカラー、ロゴ、タイトルをカスタマイズできます。以下は参考事例です。",
+    "customize-rTitle": "初めての体験",
+    "customize-rDesc": "準備が整いました！右下に表示されているフローティングボタンをクリックしてください。<br />ポップアップにコメントを入力してログをエクスポートしてみましょう。<br />その後、<5>ご自身のリプレイ記録</5>を確認する方法をご案内します！",
+    "replay": "リプレイ",
+    "guide": "統合ガイド",
+    "only-pc": "PCでご利用ください :)"
   }
 }

src/assets/image/jsdelivr.svg

@@ -48,7 +48,8 @@
     "prev": "이전 페이지",
     "next": "다음 페이지",
     "replay-lab": "리플레이 연구소",
-    "toc": "목차"
+    "toc": "목차",
+    "filter": "필터"
   },
   "error": {
     "oops": "이런! 오류가 발생했습니다.",
@@ -246,18 +247,26 @@
     }
   },
   "lab": {
-    "welcome": "리플레이 실험실에 오신 것을 환영합니다!",
-    "statement": "로그 데이터는 서버를 거치지 않고 완전히 로컬 클라이언트에서 처리되므로 안심하고 사용할 수 있습니다.",
-    "only-pc": "PC 버전에서 체험해 보세요 :)",
-    "one-line": "한 줄만으로,",
-    "load-pageSpy": "프로젝트에 PageSpy를 통합할 수 있습니다.",
-    "then": "통합 후,",
-    "feedback-demo": "페이지 오른쪽 하단에 '피드백' 위젯이 표시됩니다.",
-    "try-click": "한번 눌러보세요!",
-    "after": "모든 준비가 완료되면,",
-    "click-upload": "아래 버튼을 클릭하여 방금 내보낸 파일을 업로드하세요.",
-    "upload-btn": "파일 업로드",
-    "congratulation": "개발자 여러분, 행운을 빕니다!",
-    "desc": "(여기서는 로그 리플레이 기능만 보여줍니다. PageSpy는 실시간 온라인 디버깅도 지원하니 자세한 내용은 문서를 참고하세요.)"
+    "welcome": "환영합니다",
+    "welcome-title": "리플레이 랩에<br />오신 것을 환영합니다",
+    "welcome-desc": "몇 줄의 코드로 시스템에 강력한 '피드백 기능'을 추가하세요.<br />모든 데이터는 로컬에 저장되며, 네트워크 전송 없이 완벽한 개인정보 보호가 가능합니다.",
+    "take-try": "지금 체험하기",
+    "install": "설치",
+    "install-title": "선호하는 통합 방식을 선택하세요",
+    "install-desc": "프레임워크에 구애받지 않습니다. 프로젝트에 맞는 방식을 자유롭게 선택하세요.",
+    "comment-title": "플로팅 버튼과 팝업에 표시되는 제목",
+    "comment-logo": "로고 이미지 경로",
+    "comment-primaryColor": "테마 색상 사용자 정의",
+    "comment-autoRender": "false로 설정 시 $feedback.open()을 호출하여 팝업을 열 수 있습니다.",
+    "install-1st": "먼저 의존성을 설치하세요:",
+    "install-2nd": "다음으로 인스턴스를 생성하세요:",
+    "customize": "사용자 정의",
+    "customize-lTitle": "개인화",
+    "customize-lDesc": "테마 색상, 로고, 제목을 사용자 정의할 수 있습니다. 아래는 참고 사례입니다.",
+    "customize-rTitle": "첫 경험",
+    "customize-rDesc": "모든 준비가 완료되었습니다! 오른쪽 하단에 렌더링된 플로팅 버튼을 클릭하세요.<br />팝업에 코멘트를 입력하고 로그를 내보내 보세요.<br />곧 <5>자신의 리플레이 기록</5>을 검토하는 방법을 안내드립니다!",
+    "replay": "재생",
+    "guide": "연동 가이드",
+    "only-pc": "PC에서 방문해주세요 :)"
   }
 }

src/assets/image/before.svg renamed to src/assets/image/prev.svg

@@ -48,7 +48,8 @@
     "prev": "上一页",
     "next": "下一页",
     "replay-lab": "回放实验室",
-    "toc": "本页目录"
+    "toc": "本页目录",
+    "filter": "筛选"
   },
   "error": {
     "oops": " 哎呀！发生错误～",
@@ -246,18 +247,26 @@
     }
   },
   "lab": {
-    "welcome": "欢迎来到回放实验室！",
-    "statement": "日志数据不会经过服务器传输、完全在您本地客户端运行，可放心使用",
-    "only-pc": "请前往 PC 端体验 ：）",
-    "one-line": "一行代码，",
-    "load-pageSpy": "即可在项目中接入 PageSpy",
-    "then": "接入之后，",
-    "feedback-demo": "页面会出现右下角所示的 \"问题反馈\" 组件",
-    "try-click": "试着点开看看～",
-    "after": "一切就绪，",
-    "click-upload": "点击下方按钮，上传刚刚导出的文件",
-    "upload-btn": "上传文件",
-    "congratulation": "开发者，祝你好运！",
-    "desc": "（这里仅展示了日志回放的能力，PageSpy 也支持实时在线调试，更多内容请通过文档查看详情。）"
+    "welcome": "欢迎",
+    "welcome-title": "欢迎来到<br />回放实验室",
+    "welcome-desc": "几行代码，让系统拥有强大的「问题反馈」能力<br />数据都在本地，不经过网络传输，无需担心隐私泄露",
+    "take-try": "立刻体验",
+    "install": "安装",
+    "install-title": "随心选择引入方式",
+    "install-desc": "与框架无关，你可以任选一种方式在项目中引入",
+    "comment-title": "悬浮球和弹窗上显示的标题",
+    "comment-logo": "Logo 的图片路径",
+    "comment-primaryColor": "定制主题色",
+    "comment-autoRender": "默认渲染悬浮球，设置为 false 后可调用 $feedback.open() 打开弹窗",
+    "install-1st": "首先安装依赖：",
+    "install-2nd": "接着实例化：",
+    "customize": "定制",
+    "customize-lTitle": "个性化",
+    "customize-lDesc": "主题色、LOGO、标题支持定制，下面是参考的案例",
+    "customize-rTitle": "初体验",
+    "customize-rDesc": "一切准备就绪！点开右下方渲染的控件看看。<br />在弹窗中试着输入备注信息、并导出日志，<br />稍后我将带你 <5>查看你自己的操作回放</5> ！",
+    "replay": "回放",
+    "guide": "接入指引",
+    "only-pc": "请前往 PC 端体验 ：）"
   }
 }

src/assets/image/screenshot/console-panel.png

@@ -8,8 +8,9 @@
 
 // Box-Shadow
 @light-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.05);
-@dark-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.35);
-@gradient: linear-gradient(45deg, #fff, #8434e9 52%, #5400bf);
+@dark-box-shadow: 0 2px 10px 1px rgba(40, 40, 40, 0.35);
+// @gradient: linear-gradient(45deg, #fff, #8434e9 52%, #5400bf);
+@gradient: linear-gradient(-45deg, #ee7752, #e33d7d, #6d25e0, #23d5ab);
 
 // Border
 @light-border: #dedede;
@@ -29,4 +30,4 @@
 // App
 @header-height: 64px;
 @light-bg: rgba(255, 255, 255, 1);
-@dark-bg: rgba(26, 26, 26, 1);
+@dark-bg: #111;

src/assets/image/screenshot/network-panel.png

@@ -1,31 +1,55 @@
 .code-block {
   position: relative;
+  border-radius: 6px;
   overflow: hidden;
+  &-title {
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px;
+    padding-inline: 20px;
+    border-bottom: 1px solid #444;
+    .title-item {
+      display: flex;
+      gap: 8px;
+      justify-content: center;
+      align-items: center;
+      padding-inline: 4px;
+      color: #aaa;
+      height: 52px;
+      border-bottom: 2px solid transparent;
+      transition: all 100ms ease-in-out;
+      cursor: pointer;
+      font-weight: 500;
+      &.active {
+        color: white;
+        border-color: lighten(@primary-color, 20%);
+      }
+    }
+  }
+  &-content {
+    position: relative;
+  }
   pre {
-    padding: 20px 24px;
-    border-radius: 8px;
+    padding: 16px 20px;
     overflow: auto;
     code * {
       font-size: 14px;
       line-height: 1.2;
-      font-family: Cascadia Code, Menlo, Courier, monospace;
+      font-family: 'Cascadia Code', ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+        'Liberation Mono', 'Courier New', monospace;
     }
   }
-
   .copy-code {
     visibility: hidden;
     position: absolute;
-    right: 0;
-    top: 0;
-    padding: 4px 12px;
-    border-bottom-left-radius: 8px;
-    border-top-right-radius: 8px;
-    background-color: rgba(255, 255, 255, 0.3);
-    color: #fff;
-    font-size: 12px !important;
-    line-height: 1;
-    border: none;
+    right: 12px;
+    top: 6px;
+    padding: 8px;
+    color: #ccc;
+    border-radius: 6px;
+    border: 0.5px solid #777;
     cursor: pointer;
+    background-color: #4c4c4c;
   }
   &:hover {
     .copy-code {