From 140e1f2ee537c6a4df2662eb03f891086b476300 Mon Sep 17 00:00:00 2001
From: Blucas <15555602203@163.com>
Date: Thu, 6 Mar 2025 13:54:25 +0800
Subject: [PATCH] Add domestic cdn of o-spy
---
package.json | 2 +-
src/assets/image/china.svg | 8 +++
.../OSpy/components/ImportGuide/index.tsx | 72 ++++++++++++-------
3 files changed, 56 insertions(+), 26 deletions(-)
create mode 100644 src/assets/image/china.svg
diff --git a/package.json b/package.json
index fce744cb..9a656ca1 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"private": true,
"version": "2.2.0",
"description": "All-In-One Remote Debugging Tool",
- "homepage": "https://huolalatech.github.io/page-spy-web",
+ "homepage": "https://pagespy.org",
"repository": {
"type": "git",
"url": "git+https://github.com/HuolalaTech/page-spy-web.git"
diff --git a/src/assets/image/china.svg b/src/assets/image/china.svg
new file mode 100644
index 00000000..5f98bb20
--- /dev/null
+++ b/src/assets/image/china.svg
@@ -0,0 +1,8 @@
+
\ 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 2414dec8..94b95dae 100644
--- a/src/pages/OSpy/components/ImportGuide/index.tsx
+++ b/src/pages/OSpy/components/ImportGuide/index.tsx
@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import JsDelivrSvg from '@/assets/image/jsdelivr.svg?react';
import UnpkgSvg from '@/assets/image/unpkg.svg?react';
+import ChinaSvg from '@/assets/image/china.svg?react';
import './index.less';
interface Props {
@@ -14,20 +15,33 @@ interface Props {
export const ImportGuide = ({ showConfig = true }: Props) => {
const { t } = useTranslation('translation', { keyPrefix: 'oSpy' });
- const methods = useMemo(() => {
- const INIT_CODE = showConfig
+ const INIT_CODE = useMemo(() => {
+ return showConfig
? `const $oSpy = new OSpy({
- title?: string; // ${t('comment-title')}
- logo?: string; // ${t('comment-logo')}
- primaryColor?: string; // ${t('comment-primaryColor')}
- autoRender?: boolean; // ${t('comment-autoRender')}
- exportButtonText?: string; // ${t('comment-exportButtonText')}
- onExportButtonClick?: (data: CacheMessageItem[]) => void; // ${t(
- 'comment-onExportButtonClick',
- )}
- });`
+ lang?: 'zh' | 'en';
+ title?: string; // ${t('comment-title')}
+ logo?: string; // ${t('comment-logo')}
+ primaryColor?: string; // ${t('comment-primaryColor')}
+ autoRender?: boolean; // ${t('comment-autoRender')}
+ exportButtonText?: string; // ${t('comment-exportButtonText')}
+ onExportButtonClick?: (data: CacheMessageItem[]) => void; // ${t(
+ 'comment-onExportButtonClick',
+ )}
+});`
: `const $oSpy = new OSpy();`;
+ }, [t, showConfig]);
+
+ const cdnCode = (url: string) => {
+ return `
+
+`;
+ };
+ const methods = useMemo(() => {
return [
{
title: 'CDN',
@@ -36,31 +50,39 @@ export const ImportGuide = ({ showConfig = true }: Props) => {
group={[
{
title: (
-
+
jsDelivr
-
+
),
lang: 'javascript',
- code: `
-
-`,
+ code: cdnCode(
+ 'https://cdn.jsdelivr.net/npm/@huolala-tech/page-spy-plugin-ospy',
+ ),
},
{
title: (
-
+
unpkg
-
+
),
lang: 'javascript',
- code: `
-
-`,
+ code: cdnCode(
+ 'https://unpkg.com/@huolala-tech/page-spy-plugin-ospy',
+ ),
+ },
+ {
+ title: (
+
+
+ 国内
+
+ ),
+ lang: 'javascript',
+ code: cdnCode(
+ 'https://static.huolala.cn/libs/o-spy/2.1.9/index.min.js',
+ ),
},
]}
/>