{
+ 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);
+ }
+ }
+ }}
+ >
+
+
)}
{/* GitHub */}
diff --git a/src/pages/Layouts/index.tsx b/src/pages/Layouts/index.tsx
index 4f5022b0..017db22c 100644
--- a/src/pages/Layouts/index.tsx
+++ b/src/pages/Layouts/index.tsx
@@ -8,11 +8,15 @@ import { NavMenuOnPc, NavMenuOnMobile } from './NavMenu';
import { useDarkTheme } from '@/utils/useDarkTheme';
import { isDoc } from '@/utils/constants';
import { Logo } from './Logo';
+import { useWhere } from '@/utils/useWhere';
+import { useTitle } from 'ahooks';
const { Header, Content } = Layout;
export const Layouts = () => {
const isDark = useDarkTheme();
+ const { isOSpy } = useWhere();
+ useTitle(isOSpy ? 'O-Spy' : 'PageSpy');
return (
diff --git a/src/pages/MainDocs/md/browser.en.mdx b/src/pages/MainDocs/md/browser.en.mdx
index 80dca880..f76f4966 100644
--- a/src/pages/MainDocs/md/browser.en.mdx
+++ b/src/pages/MainDocs/md/browser.en.mdx
@@ -76,17 +76,17 @@ PageSpy has published integration guides for all popular frameworks on the CodeS
- **Nuxtjs**：[CodeSandbox - PageSpy in Nuxtjs](https://codesandbox.io/p/sandbox/page-spy-with-nuxtjs-8znq22)
-### Using the Browser Extension
+### Using the Browser Extension#browser-extension
PageSpy provides a browser extension that allows you to use PageSpy on any webpage without integrating any code!
Yes, you read that right! With the PageSpy browser extension, you can debug almost any webpage. However, a few websites with strict CSP policies may prevent the extension from functioning properly.
-#### Install
+#### Install#install
Go to the [Browser Extension repository](https://github.com/HuolalaTech/page-spy-extension/tree/main/packages/online-pagespy-extension) and follow the README instructions to install it.
-#### Parameters
+#### Parameters#parameters
diff --git a/src/pages/MainDocs/md/faq.zh.mdx b/src/pages/MainDocs/md/faq.zh.mdx
index 94a6968a..30f111ee 100644
--- a/src/pages/MainDocs/md/faq.zh.mdx
+++ b/src/pages/MainDocs/md/faq.zh.mdx
@@ -390,7 +390,7 @@ SDK 可以对页面进行 “截图” 并发送到调试端，但由于：
- 一直没有数据消息交互，5 分钟后销毁；
- 连接使用持续超过 1 个小时自动被销毁；
-### 为何支付宝小程序远程执行代码时无法获取到全局对象如 my.getCurrentPages()?#alipay-global
+### 为何支付宝小程序远程执行代码时无法获取到全局对象如 `my.getCurrentPages()`？#alipay-global
支付宝小程序由于历史原因，对全局对象的访问做了限制。可以通过小程序配置文件或支付宝小程序 IDE 进行设置：
diff --git a/src/pages/MainDocs/md/introduction.en.mdx b/src/pages/MainDocs/md/introduction.en.mdx
index a9c4657b..cdc6763e 100644
--- a/src/pages/MainDocs/md/introduction.en.mdx
+++ b/src/pages/MainDocs/md/introduction.en.mdx
@@ -94,7 +94,7 @@ Yep, the goal of PageSpy is can help the people which in like above cases.
### Feature Overview#feature-overview
-#### Online Debugging
+#### Online Debugging#online-debugging
- **Console Panel**: Displays logs from `console.`, and allows sending code to be executed on the client side.
@@ -128,7 +128,7 @@ Yep, the goal of PageSpy is can help the people which in like above cases.
Additionally, you will receive real-time notifications when new data is available or existing data changes.
-#### Offline Debugging
+#### Offline Debugging#offline-debugging
diff --git a/src/pages/MainDocs/md/introduction.zh.mdx b/src/pages/MainDocs/md/introduction.zh.mdx
index 2c5574e1..8a761b92 100644
--- a/src/pages/MainDocs/md/introduction.zh.mdx
+++ b/src/pages/MainDocs/md/introduction.zh.mdx
@@ -18,11 +18,11 @@
[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API
[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937
-[node-deploy-url]: https://pagespy.org/#/docs/deploy-with-node
+[node-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-node
[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED
-[docker-deploy-url]: https://pagespy.org/#/docs/deploy-with-docker
+[docker-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-docker
[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a
-[bt-deploy-url]: https://pagespy.org/#/docs/deploy-with-baota
+[bt-deploy-url]: https://pagespy.huolala.cn/#/docs/deploy-with-baota
import React from 'react';
@@ -93,7 +93,7 @@ PageSpy 的目标，就是为包括以上场景的人员提供帮助。
### 界面概览#feature-overview
-#### 在线调试
+#### 在线调试#online-debug
- Console 面板: 显示 `console.` 输出的日志信息，可以发送代码到客户端执行；
@@ -127,7 +127,7 @@ PageSpy 的目标，就是为包括以上场景的人员提供帮助。
除此之外，当有新的数据或者数据发生变化的时候会实时的收到通知。
-#### 离线回放
+#### 离线回放#offline-debugging
diff --git a/src/pages/MainDocs/md/offline-log.en.mdx b/src/pages/MainDocs/md/offline-log.en.mdx
index c0c21226..e33940e7 100644
--- a/src/pages/MainDocs/md/offline-log.en.mdx
+++ b/src/pages/MainDocs/md/offline-log.en.mdx
@@ -144,15 +144,15 @@ $dataHarborPlugin.upload().then(() => {
### Differences#diff
-1. DOM recording is not supported in miniprogram env, thus there is no `RRWebPlugin` for miniprogram。
+1. DOM recording is not supported in miniprogram env, thus there is no `RRWebPlugin` for miniprogram.
2. The offline log in miniprogram env supports uploading only, no downloading.
-## FAQ
+## FAQ#faq
1. How to upload / download logs manually?
-[Click to see](./data-harbor#onOfflineLog)。
+[Click to see](./data-harbor#onOfflineLog).
2. Where is offline log data stored?
diff --git a/src/pages/MainDocs/md/offline-log.zh.mdx b/src/pages/MainDocs/md/offline-log.zh.mdx
index 30d95b80..a63b28d0 100644
--- a/src/pages/MainDocs/md/offline-log.zh.mdx
+++ b/src/pages/MainDocs/md/offline-log.zh.mdx
@@ -145,7 +145,7 @@ $dataHarborPlugin.upload().then(() => {
2. 小程序环境离线日志仅支持上传，不支持下载。
-## FAQ
+## FAQ#faq
1. 如何手动操作上传 / 下载日志？
diff --git a/src/pages/MainDocs/md/ospy.en.mdx b/src/pages/MainDocs/md/ospy.en.mdx
deleted file mode 100644
index c65c045d..00000000
--- a/src/pages/MainDocs/md/ospy.en.mdx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-### Offline-Spy
\ No newline at end of file
diff --git a/src/pages/MainDocs/md/ospy.zh.mdx b/src/pages/MainDocs/md/ospy.zh.mdx
deleted file mode 100644
index c65c045d..00000000
--- a/src/pages/MainDocs/md/ospy.zh.mdx
+++ /dev/null
@@ -1,2 +0,0 @@
-
-### Offline-Spy
\ No newline at end of file
diff --git a/src/pages/OSpy/components/ImportGuide/index.tsx b/src/pages/OSpy/components/ImportGuide/index.tsx
index 94b95dae..a70a8a3a 100644
--- a/src/pages/OSpy/components/ImportGuide/index.tsx
+++ b/src/pages/OSpy/components/ImportGuide/index.tsx
@@ -31,6 +31,7 @@ export const ImportGuide = ({ showConfig = true }: Props) => {
: `const $oSpy = new OSpy();`;
}, [t, showConfig]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
const cdnCode = (url: string) => {
return `
@@ -55,7 +56,7 @@ ${INIT_CODE.split('\n')
jsDelivr
),
- lang: 'javascript',
+ lang: 'html',
code: cdnCode(
'https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-plugin-ospy',
),
@@ -67,7 +68,7 @@ ${INIT_CODE.split('\n')
unpkg
),
- lang: 'javascript',
+ lang: 'html',
code: cdnCode(
'https://unpkg.com/@huolala-tech/page-spy-plugin-ospy',
),
@@ -79,7 +80,7 @@ ${INIT_CODE.split('\n')
国内
),
- lang: 'javascript',
+ lang: 'html',
code: cdnCode(
'https://static.huolala.cn/libs/o-spy/2.1.9/index.min.js',
),
@@ -109,7 +110,7 @@ ${INIT_CODE}`}
),
},
];
- }, [t]);
+ }, [INIT_CODE, cdnCode, t]);
const [active, setActive] = useState(methods[0].title);
const activeMethod = methods.find((i) => i.title === active);
return (
diff --git a/src/pages/OSpy/components/Welcome/index.tsx b/src/pages/OSpy/components/Welcome/index.tsx
index c13f7e34..6d419270 100644
--- a/src/pages/OSpy/components/Welcome/index.tsx
+++ b/src/pages/OSpy/components/Welcome/index.tsx
@@ -17,7 +17,7 @@ const InstallSdkButton = () => {
if (!size) return null;
- if (size.height <= 850) {
+ if (size.width <= 768) {
return (
<>
{
footer={null}
maskClosable
>
-
-## Quick Start
+## Quick Start#quick-start
#### Step 1: Import O-Spy #step-1
diff --git a/src/pages/OSpyDocs/md/introduction.zh.mdx b/src/pages/OSpyDocs/md/introduction.zh.mdx
index 1f026aef..ce215888 100644
--- a/src/pages/OSpyDocs/md/introduction.zh.mdx
+++ b/src/pages/OSpyDocs/md/introduction.zh.mdx
@@ -31,7 +31,7 @@ O-Spy（发音 /əʊ spaɪ/，类似 **"Oh-Spy"**）是一个在 Web 项目中
-## 快速上手
+## 快速上手#quick-start
#### 第一步：引入 O-Spy#step-1
diff --git a/src/pages/RoomList/index.tsx b/src/pages/RoomList/index.tsx
index 99723db6..c6d42f4f 100644
--- a/src/pages/RoomList/index.tsx
+++ b/src/pages/RoomList/index.tsx
@@ -29,6 +29,7 @@ import { ClearOutlined, SearchOutlined } from '@ant-design/icons';
import { RoomCard } from './RoomCard';
import { Statistics } from './Statistics';
import { LoadingFallback } from '@/components/LoadingFallback';
+import { debug } from '@/utils/debug';
const { Title } = Typography;
const { Option } = Select;
@@ -89,8 +90,6 @@ const RoomList = () => {
const [form] = Form.useForm();
const { t } = useTranslation();
- const showDashboard = localStorage.getItem('page-spy-dashboard') === '1';
-
const [showMaximumAlert, setMaximumAlert] = useState(false);
const showLoadingRef = useRef(false);
const {
@@ -303,7 +302,7 @@ const RoomList = () => {
)}
- {showDashboard &&
{isGroupBlock(data) &&
data.group.map((c, index) => {
diff --git a/src/components/Docs/components/DocContent/index.tsx b/src/components/Docs/components/DocContent/index.tsx
index b097651a..5ec7fb3a 100644
--- a/src/components/Docs/components/DocContent/index.tsx
+++ b/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(() => {
diff --git a/src/components/Docs/components/DocContent/mdx-mapping/Heading.tsx b/src/components/Docs/components/DocContent/mdx-mapping/Heading.tsx
index 6c1b403a..c429e720 100644
--- a/src/components/Docs/components/DocContent/mdx-mapping/Heading.tsx
+++ b/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. 对缺失的锚点有以下自动生成规则：
// - 原文：### 标题
-// 结果：)}`}>标题
+// 结果：标题
//
// - 原文：### 标题#slug
// 结果：标题
//
// - 原文：### 标题 ) => {
let slug = '';
@@ -34,15 +36,16 @@ const Heading = ({ level, children }: PropsWithChildren) => {
}
} else {
const nodes: ReactNode[] = [...(children as ReactNode[])];
- const slugIndex = nodes.findIndex((i) => isString(i) && i.startsWith('#'));
- if (slugIndex !== -1) {
- // ### 标题 ) => {
const navs: NavItem[] = [];
try {
@@ -26,25 +27,34 @@ export const computeTocs = async (raw: () => Promise) => {
if ([2, 3].includes(node.depth)) {
// ## abcd => text
// ## 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 #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 }) => {
{i.text}
diff --git a/src/components/LogReplayer/index.tsx b/src/components/LogReplayer/index.tsx
index b25dd617..4dbc84bd 100644
--- a/src/components/LogReplayer/index.tsx
+++ b/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;
},
diff --git a/src/pages/Layouts/NavMenu/index.less b/src/pages/Layouts/NavMenu/index.less
index ed737cd2..7314462f 100644
--- a/src/pages/Layouts/NavMenu/index.less
+++ b/src/pages/Layouts/NavMenu/index.less
@@ -20,7 +20,7 @@
}
}
.nav-menu {
- display: inline-flex;
+ display: flex;
align-items: center;
font-size: 14px;
diff --git a/src/pages/Layouts/NavMenu/index.tsx b/src/pages/Layouts/NavMenu/index.tsx
index f5de36ca..1704e0f4 100644
--- a/src/pages/Layouts/NavMenu/index.tsx
+++ b/src/pages/Layouts/NavMenu/index.tsx
@@ -1,7 +1,7 @@
import { isClient, isDoc } from '@/utils/constants';
import { langType, useLanguage } from '@/utils/useLanguage';
-import Icon, { GithubOutlined } from '@ant-design/icons';
-import { Space, Divider, MenuProps, Dropdown, ConfigProvider } from 'antd';
+import Icon from '@ant-design/icons';
+import { Divider, MenuProps, Dropdown, ConfigProvider, Flex } from 'antd';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import DocsSvg from '@/assets/image/docs.svg?react';
@@ -65,59 +65,61 @@ export const NavMenuOnPc = () => {
>
{/* Docs */}
-
+
+
+
+
{
setExpand(false);
}}
>
-
+
+
{isClient && !isOSpy && (
<>
@@ -233,10 +236,10 @@ export const NavMenuOnMobile = () => {
setExpand(false);
}}
>
-
+
+
)}
@@ -250,10 +253,10 @@ export const NavMenuOnMobile = () => {
setExpand(false);
}}
>
-
+
+
{/* Mirror */}
{isDoc && isCN() && (
@@ -262,10 +265,10 @@ export const NavMenuOnMobile = () => {
target="_blank"
className="menu-item doc"
>
-
-
-
-
-
-
- ),
- },
- {
- key: 'offline-debug',
- label: (
-
-
-
-
- ),
- },
- ],
- }}
- >
-
-
-
-
+ <>
+
+
)}
{/* i18n */}
+
+
+
+
+
+ ),
+ },
+ {
+ key: 'offline-debug',
+ label: (
+
+
+
+
+ ),
+ },
+ ],
+ }}
+ >
+
+
+
+
+
@@ -132,10 +134,10 @@ export const NavMenuOnPc = () => {
},
}}
>
-
+
+
@@ -144,10 +146,10 @@ export const NavMenuOnPc = () => {
{isDoc && isCN() && (
<>
- {
setExpand(false);
}}
>
-