通用组件封装，基于 Web Components

iuvc-tech-panel

科技风面板容器：Canvas 绘制边框、四角装饰与可选的沿边框顺时针流星动画；正文通过 <slot> 插入，画布在内容下层。

安装

npm install iuvc-tech-panel

引入

ESM（推荐）：

import "iuvc-tech-panel";

CommonJS：

require("iuvc-tech-panel");

TypeScript

包内提供 index.d.ts，<iuvc-tech-panel> 的标签属性会有类型提示。

用法示例

属性统一为 短横线（kebab-case），与 HTML / 常见 Web Component 习惯一致，可读性好。

<div style="height: 300px; margin: 0 40px;">
  <iuvc-tech-panel
    border-width="2"
    bg-color="rgba(7,26,80,0.5)"
    main-color="#ea00ff"
    meteor
    meteor-opacity="0.85"
  >
    <div style="padding: 16px; color: white;">面板内容</div>
  </iuvc-tech-panel>
</div>

border-width="0" 时：不绘制边框描边，四角与流星上的 Canvas 阴影关闭（光晕不显示），流星轨迹线仍可显示（若开启 meteor）。

属性说明

| 属性 | 类型 | 说明 | |------|------|------| | main-color | string | 主色，驱动边框、角饰、流星配色。支持 #rgb、#rrggbb、rgb()、rgba()。未写时可用宿主 CSS 变量 --tech-panel-main-rgb（r, g, b 逗号分隔）或默认 #00eaff。 | | border-width | string | number | 边框宽度（px），0–64，默认 2。流星沿该边框描边的中心线运动；为 0 时轨迹沿组件最外圈矩形。 | | bg-color | string | 边框内侧矩形区域的画布填充色（如 rgba(0,0,0,0.4)）。不写或空字符串则该区域透明。 | | meteor | boolean | string | 是否启用流星动画。推荐取值：true、false、''（HTML 布尔 meteor）、'true'、'false'、'meteor'。未写属性则关闭。 | | meteor-opacity | string | number | 流星整体不透明度 0–1，默认 1；为 0 时不绘制流星。 |

类型别名见包内 index.d.ts（如 IuvcTechPanelMeteor）。运行时代码仍兼容历史上其它字符串同义写法（如 1、yes、off），但类型定义以表中推荐取值为准。

React / JSX

短横线属性在 JSX 里不能直接写成 main-color={...}（会被解析为减法），请用 展开对象 传入：

<iuvc-tech-panel
  {...{
    'main-color': '#ea00ff',
    'border-width': 2,
    'bg-color': 'rgba(7,26,80,0.5)',
    meteor: '',
    'meteor-opacity': 0.85,
  }}
>
  <div style={{ padding: 16, color: '#fff' }}>内容</div>
</iuvc-tech-panel>