Merge branch 'main' into docs

package.json

@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@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/page-spy-browser": "^2.1.6",
+    "@huolala-tech/page-spy-plugin-data-harbor": "^2.1.3",
+    "@huolala-tech/page-spy-plugin-ospy": "^2.1.10",
+    "@huolala-tech/page-spy-plugin-rrweb": "^2.1.3",
+    "@huolala-tech/page-spy-plugin-whole-bundle": "^2.1.8",
+    "@huolala-tech/page-spy-types": "^2.1.3",
     "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
     "@mdx-js/mdx": "^3.0.1",
@@ -113,7 +113,7 @@
     "last 2 safari version"
   ],
   "optionalDependencies": {
-    "@huolala-tech/page-spy-api": "^2.0.0"
+    "@huolala-tech/page-spy-api": "^2.2.0"
   },
   "packageManager": "[email protected]"
 }

src/assets/locales/en.json

@@ -250,7 +250,7 @@
   },
   "oSpy": {
     "slogan": "Offline Recording<br />Complete Replay",
-    "desc": "Take a snapshot with one line of code, and store data locally with peace of mind.",
+    "desc": "Record with one line of code, and store data locally with peace of mind.",
     "import-use": "Integrate O-Spy",
     "select-log": "Select Log",
     "take-try": "Try Demo",

src/assets/locales/ja.json

@@ -249,7 +249,7 @@
   },
   "oSpy": {
     "slogan": "オフライン記録<br />完全再生",
-    "desc": "一行のコードでスナップショットを撮り、ローカルデータは安心して保管される。",
+    "desc": "1行のコードでシーンを録画し、ローカルに安心してデータを保存。",
     "import-use": "O-Spy 接続",
     "select-log": "ログ選択",
     "take-try": "デモ体験",

src/assets/locales/ko.json

@@ -249,7 +249,7 @@
   },
   "oSpy": {
     "slogan": "오프라인 기록<br />전체 재생",
-    "desc": "한 줄의 코드로 스냅샷을 찍고, 로컬 데이터는 안심하고 저장된다.",
+    "desc": "한 줄 코드로 현장을 녹화하고, 로컬에 데이터를 안심하고 저장하세요.",
     "import-use": "O-Spy 연결",
     "select-log": "로그 선택",
     "take-try": "데모 체험",

src/assets/locales/zh.json

@@ -249,7 +249,7 @@
   },
   "oSpy": {
     "slogan": "离线记录<br />完整回放",
-    "desc": "一行代码记录现场，本地数据安心存放。",
+    "desc": "一行代码录制现场，本地数据安心存放。",
     "import-use": "接入 O-Spy",
     "select-log": "选择日志回放",
     "take-try": "体验 Demo",

src/components/CodeBlock/index.tsx

@@ -78,7 +78,26 @@ export const CodeBlock = (data: SingleProps | GroupProps) => {
   if (!codeContent) return <LoadingFallback />;
 
   return (
-    <div style={{ backgroundColor: bg }} className="code-block">
+    <div
+      style={{ backgroundColor: bg }}
+      className="code-block"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+          e.preventDefault();
+          const selection = window.getSelection();
+          const codeContent = e.currentTarget.querySelector(
+            '.code-block-content',
+          );
+          if (selection && codeContent) {
+            const range = document.createRange();
+            range.selectNodeContents(codeContent);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }}
+    >
       <div className="code-block-title">
         {isGroupBlock(data) &&
           data.group.map((c, index) => {

src/components/Docs/components/DocContent/index.tsx

@@ -105,7 +105,9 @@ export const DocContent = () => {
     if (!hash) return;
 
     const container = rootRef.current;
-    const node = container?.querySelector(hash) as HTMLElement;
+    const node = container?.querySelector(
+      decodeURIComponent(hash),
+    ) as HTMLElement;
     if (!container || !node) return;
 
     setTimeout(() => {

src/components/Docs/components/DocContent/mdx-mapping/Heading.tsx

@@ -3,23 +3,25 @@ import { PropsWithChildren, ReactNode, createElement } from 'react';
 import { HeaderLink } from '../../HeaderLink';
 import { isString } from 'lodash-es';
 import { formatSlug } from '@/utils/docs';
-
+import { debug } from '@/utils/debug';
 interface Props {
   level: number;
 }
 
 // 标题的格式和自动生成的锚点规则：
+// 1. 建议手动维护锚点，避免锚点异常；
+// 2. 对缺失的锚点有以下自动生成规则：
 // - 原文：### 标题
-//   结果：<Link to={`#${formatSlug(<标题>)}`}>标题</Link>
+//   结果：<Link to={`#${formatSlug(标题)}`}>标题</Link>
 //
 // - 原文：### 标题#slug
 //   结果：<Link to={`#${formatSlug(slug)}`}>标题</Link>
 //
 // - 原文：### 标题 <Component />
-//   结果：<Link to={`#${formatSlug(<标题>)}`}>标题 <Component /></Link>
+//   结果：<Link to={`#${formatSlug(标题)}`}>标题 <Component /></Link>
 //
-// - 原文：### 标题 <Component />#slug
-//   结果：<Link to={`#${formatSlug(slug)}`}>标题 <Component /></Link>
+// - 原文：### 标题 <Component /> xxx#slug
+//   结果：<Link to={`#${formatSlug(slug)}`}>标题 <Component />xxx</Link>
 
 const Heading = ({ level, children }: PropsWithChildren<Props>) => {
   let slug = '';
@@ -34,15 +36,16 @@ const Heading = ({ level, children }: PropsWithChildren<Props>) => {
     }
   } else {
     const nodes: ReactNode[] = [...(children as ReactNode[])];
-    const slugIndex = nodes.findIndex((i) => isString(i) && i.startsWith('#'));
-    if (slugIndex !== -1) {
-      // ### 标题 <Component />#slug
-      slug = nodes.splice(slugIndex, 1)[0]?.toString().slice(1) || '';
-      children = nodes;
-    } else {
-      // ### 标题 <Component />
-      const title = nodes.find((i) => isString(i))?.trim() || '';
-      slug = title;
+    const lastNode = nodes.splice(-1, 1)[0];
+    if (isString(lastNode) && lastNode.indexOf('#') !== -1) {
+      // ### 标题 <Component /> xxxx#slug
+      const [extra, _slug] = lastNode.split('#');
+      children = [...nodes, extra];
+      slug = _slug;
+    }
+    if (!slug) {
+      debug.error('标题未找到锚点，请检查后修复：', level, children);
+      slug = nodes.find((i) => isString(i))?.trim() || '';
     }
   }
 

src/components/Docs/components/DocContent/toc/index.tsx

@@ -8,6 +8,7 @@ import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 import { formatSlug } from '@/utils/docs';
 import { useDocContext } from '@/components/Docs/context';
+import { debug } from '@/utils/debug';
 
 export interface NavItem {
   text: string;
@@ -16,7 +17,7 @@ export interface NavItem {
 
 const processor = unified().use(remarkParse);
 
-// 目录生成规则参照 ../mdx-mapping/Heading.tsx
+// 目录的锚点生成规则参照 ../mdx-mapping/Heading.tsx
 export const computeTocs = async (raw: () => Promise<string>) => {
   const navs: NavItem[] = [];
   try {
@@ -26,25 +27,34 @@ export const computeTocs = async (raw: () => Promise<string>) => {
       if ([2, 3].includes(node.depth)) {
         // ## abcd     =>  text
         // ## <XYZ />  =>  html
+        // ## title <Component> title#slug => [text, html, text]
         const texts = node.children.filter((i) => i.type === 'text');
+        // if (texts.some((i) => i.value.includes('v2.2.0'))) {
+        //   console.log(texts, node);
+        // }
         if (!texts.length) {
-          console.error('当前 heading 自动提取 anchor 失败', node);
+          debug.panic('TOC 未找到合适的标题作为锚点', node);
           return;
         }
 
         let text: string = '';
         let link: string = '';
 
-        // ## title <Component>#slug => [text, html, text]
-        const customSlug = texts.findLast((i) => i.value.startsWith('#'));
-        if (customSlug) {
-          text = texts[0].value;
-          link = customSlug.value.slice(1);
-        } else {
-          // ## title
+        if (texts.length === 1) {
           const [head, anchor] = texts[0].value.split('#');
           text = head;
           link = anchor || head;
+        } else {
+          text = texts[0].value;
+          const lastNode = texts[texts.length - 1].value;
+          if (lastNode.indexOf('#') !== -1) {
+            link = lastNode.split('#')[1];
+          } else {
+            link = text.trim();
+          }
+        }
+        if (!link) {
+          debug.panic('TOC 未找到合适的锚点', node);
         }
 
         navs.push({
@@ -96,7 +106,7 @@ export const ToC = ({ doc, lang }: { doc: string; lang: langType }) => {
                   <Link
                     to={to}
                     className={clsx({
-                      active: hash === to,
+                      active: decodeURIComponent(hash) === to,
                     })}
                   >
                     {i.text}

src/components/LogReplayer/index.tsx

@@ -23,6 +23,7 @@ import { useEventListener } from '@/utils/useEventListener';
 import { useShallow } from 'zustand/react/shallow';
 import { ErrorDetailDrawer } from '@/components/ErrorDetailDrawer';
 import { Meta } from './Meta';
+import { debug } from '@/utils/debug';
 
 interface Props {
   url: string;
@@ -51,9 +52,7 @@ export const LogReplayer = ({ url, backSlot = null }: Props) => {
               : i.data,
         };
       }) as HarborDataItem[];
-      if (localStorage.getItem('page-spy-replay-debug')) {
-        console.log(result);
-      }
+      debug.log(result);
       setAllData(result);
       return result;
     },

src/pages/Layouts/NavMenu/index.less

@@ -20,7 +20,7 @@
   }
 }
 .nav-menu {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   font-size: 14px;