From afebac953110e4c70ee410a1b940991322a62ef7 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 27 Aug 2026 11:09:37 +0000
Subject: [PATCH] =?UTF-8?q?feat(docs):=20=E6=94=AF=E6=8C=81=E5=B5=8C?=
 =?UTF-8?q?=E5=85=A5=20B=20=E7=AB=99=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cea <ceastld@users.noreply.github.com>
---
 docs/v2/xaction/modules/flow/each.md          |  6 ++-
 docs/v2/xaction/modules/flow/repeat.md        |  6 ++-
 .../xaction/modules/software/uiautomation.md  |  2 +-
 src/components/BilibiliPlayer/index.tsx       | 39 +++++++++++++++++++
 .../BilibiliPlayer/styles.module.css          | 28 +++++++++++++
 src/theme/mdxComponentsMap.tsx                |  2 +
 6 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BilibiliPlayer/index.tsx
 create mode 100644 src/components/BilibiliPlayer/styles.module.css

diff --git a/docs/v2/xaction/modules/flow/each.md b/docs/v2/xaction/modules/flow/each.md
index afefc09..1682e4c 100644
--- a/docs/v2/xaction/modules/flow/each.md
+++ b/docs/v2/xaction/modules/flow/each.md
@@ -27,7 +27,11 @@ legacyContentUpdatedAt: "2023-08-27T23:42:55.000Z"
 
 <ModuleParamPreview moduleKey="sys:each" />
 
-演示视频：[在组合动作中使用循环](https://www.bilibili.com/video/BV1ty4y1S7AK)
+<BilibiliPlayer
+  bvid="BV1ty4y1S7AK"
+  title="在组合动作中使用循环"
+  caption="演示视频：在组合动作中使用循环"
+/>
 
 ## 参数说明
 
diff --git a/docs/v2/xaction/modules/flow/repeat.md b/docs/v2/xaction/modules/flow/repeat.md
index 3f7adba..3ca20b2 100644
--- a/docs/v2/xaction/modules/flow/repeat.md
+++ b/docs/v2/xaction/modules/flow/repeat.md
@@ -41,7 +41,11 @@ legacyContentUpdatedAt: "2023-06-23T14:05:51.000Z"
   />
 </PreviewMarks>
 
-演示视频：[在组合动作中使用循环](https://www.bilibili.com/video/BV1ty4y1S7AK)
+<BilibiliPlayer
+  bvid="BV1ty4y1S7AK"
+  title="在组合动作中使用循环"
+  caption="演示视频：在组合动作中使用循环"
+/>
 
 ## 参数说明
 
diff --git a/docs/v2/xaction/modules/software/uiautomation.md b/docs/v2/xaction/modules/software/uiautomation.md
index 2dd8184..d10b101 100644
--- a/docs/v2/xaction/modules/software/uiautomation.md
+++ b/docs/v2/xaction/modules/software/uiautomation.md
@@ -253,7 +253,7 @@ Quicker 提供两套窗口界面控制：
 
 点右侧定位按钮，可从窗口拾取控件并得到 XPath。
 
-[视频演示](https://player.bilibili.com/player.html?bvid=BV1S54y1J79d)
+<BilibiliPlayer bvid="BV1S54y1J79d" title="视频演示" />
 
 更新另存窗口的文件类型：
 
diff --git a/src/components/BilibiliPlayer/index.tsx b/src/components/BilibiliPlayer/index.tsx
new file mode 100644
index 0000000..dc8fc80
--- /dev/null
+++ b/src/components/BilibiliPlayer/index.tsx
@@ -0,0 +1,39 @@
+import type {ReactNode} from 'react';
+import styles from './styles.module.css';
+
+export type BilibiliPlayerProps = {
+  bvid: string;
+  page?: number;
+  title?: string;
+  caption?: string;
+};
+
+export default function BilibiliPlayer({
+  bvid,
+  page = 1,
+  title = 'Bilibili 视频',
+  caption,
+}: BilibiliPlayerProps): ReactNode {
+  const query = new URLSearchParams({
+    bvid,
+    page: String(page),
+    high_quality: '1',
+    danmaku: '0',
+    as_wide: '1',
+  });
+
+  return (
+    <figure className={styles.root}>
+      <div className={styles.frameWrap}>
+        <iframe
+          className={styles.frame}
+          src={`https://player.bilibili.com/player.html?${query.toString()}`}
+          title={title}
+          loading="lazy"
+          allowFullScreen
+        />
+      </div>
+      {caption ? <figcaption className={styles.caption}>{caption}</figcaption> : null}
+    </figure>
+  );
+}
diff --git a/src/components/BilibiliPlayer/styles.module.css b/src/components/BilibiliPlayer/styles.module.css
new file mode 100644
index 0000000..89eb7a1
--- /dev/null
+++ b/src/components/BilibiliPlayer/styles.module.css
@@ -0,0 +1,28 @@
+.root {
+  margin: 1rem 0 1.5rem;
+}
+
+.frameWrap {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--quicker-border-subtle, #e4e9f0);
+  border-radius: 8px;
+  background: var(--ifm-color-emphasis-100, #f5f6f7);
+}
+
+.frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.caption {
+  margin-top: 6px;
+  color: var(--quicker-text-muted, #5f6b7a);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: center;
+}
diff --git a/src/theme/mdxComponentsMap.tsx b/src/theme/mdxComponentsMap.tsx
index 841642d..55c88aa 100644
--- a/src/theme/mdxComponentsMap.tsx
+++ b/src/theme/mdxComponentsMap.tsx
@@ -2,6 +2,7 @@ import type {ComponentProps} from 'react';
 import type {MDXProvider} from '@mdx-js/react';
 import ThemeMDXComponents from '@theme-original/MDXComponents';
 import NativeImg from '@site/src/theme/MDXComponents/NativeImg';
+import BilibiliPlayer from '@site/src/components/BilibiliPlayer';
 import FlowChart from '@site/src/components/FlowChart';
 import RelatedDocs from '@site/src/components/RelatedDocs';
 import ShareLinkCard from '@site/src/components/ShareLinkCard';
@@ -25,6 +26,7 @@ const mdxComponentsMap = {
   RelatedDocs,
   ShareLinkCard,
   XActionLanding,
+  BilibiliPlayer,
   FlowChart,
   XActionModuleMeta: lazyHeavy('XActionModuleMeta'),
   StepProgramView: lazyHeavy('StepProgramView'),