Sakura组件|风

一、Bilibili视频嵌入组件 `<bilibili-video>`

基本用法

<bilibili-video 
  bvid="BV1xx411x7xx" 
  autoplay 
  muted
></bilibili-video>

属性说明

属性名	类型	必填	默认值	说明
`bvid`	String	是	-	B站视频的唯一标识符（BV号）
`autoplay`	Boolean	否	false	是否自动播放（需注意：浏览器可能阻止无声自动播放，需配合`muted`使用）
`muted`	Boolean	否	false	是否静音

获取BV号

打开B站视频页面
在地址栏中找到类似 https://www.bilibili.com/video/BV1xx411x7xx 的URL
复制BV后的字符（如示例中的BV1xx411x7xx）

注意事项

组件会自动保持16:9的响应式比例
现代浏览器要求静音后才能自动播放（需同时设置autoplay和muted）
需要网络环境能访问B站资源

二、双色链接组件 `<resource-link>`

基本用法

<resource-link
  left-text="文档"
  right-text="PDF"
  href="/manual.pdf"
  target="_blank"
></resource-link>

属性说明

属性名	类型	必填	默认值	说明
`left-text`	String	是	-	左侧显示文本
`right-text`	String	是	-	右侧显示文本
`href`	String	否	#	跳转链接地址
`target`	String	否	_self	链接打开方式（同`<a>`标签target属性）

样式自定义

通过CSS变量覆盖默认样式：

resource-link {
  --rl-left-color: #2ecc71;    /* 左侧背景色 */
  --rl-right-color: #e74c3c;   /* 右侧背景色 */
  --rl-left-hover: #27ae60;    /* 左侧悬停色 */
  --rl-right-hover: #c0392b;   /* 右侧悬停色 */
  --rl-divider-color: #bdc3c7; /* 分割线颜色 */
  --rl-text-color: #ffffff;    /* 文字颜色 */
}

交互特性

悬停效果：轻微上浮 + 阴影
键盘支持：Enter键触发点击
空链接处理：当href未设置或为#时阻止默认跳转

注意事项

组件默认显示为行内块元素
最小宽度为120px（可通过CSS覆盖）
支持所有标准<a>标签的行为

三、完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 自定义链接样式 */
    resource-link {
      --rl-left-color: #8e44ad;
      --rl-right-color: #e67e22;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h2>B站视频演示</h2>
  <bilibili-video 
    bvid="BV1GJ411x7h1"
    autoplay
    muted
  ></bilibili-video>

  <h2>资源链接演示</h2>
  <resource-link
    left-text="技术文档"
    right-text="下载"
    href="/docs/technical.pdf"
    target="_blank"
  ></resource-link>
  
  <!-- 引入组件脚本 -->
  <script src="custom.js"></script>
</body>
</html>