feat(docs): 支持嵌入 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="演示视频：在组合动作中使用循环"
+/>
 
 ## 参数说明
 

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="演示视频：在组合动作中使用循环"
+/>
 
 ## 参数说明
 

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="视频演示" />
 
 更新另存窗口的文件类型：
 

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>
+  );
+}

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;
+}

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'),