DataV Lumen · datav-lumen

面向数据看板 / MES 大屏的 Vue 3 组件库。

「Lumen（流明）」是光通量单位 —— 这套组件的视觉语言是暗底 + 发光。 所有图形都是手写 SVG 或纯 CSS，不用图片，所以任意缩放都不糊； 颜色由一个主色在 HSL 空间派生出整套明暗层次，换色只改一个值。

• 一个 color 换整套配色 —— 主色派生 6 档（亮/最亮/暗/最暗/去饱和暗），层次关系自动保持
• 背景默认透明 —— 组件不依赖宿主背景色，放在任何底色上都成立
• 同页多实例互不干扰 —— CSS 变量挂组件根节点、SVG defs id 带实例前缀
• 动画全都可关 —— 每个都有开关，并响应 prefers-reduced-motion
• 零运行时依赖 —— 只把 vue 作为 peerDependency

技术栈：Vue 3.5 · Vite 8 · TypeScript 5.9

安装

npm i datav-lumen

vue 是 peerDependency，宿主项目自己装（^3.5.0）：

npm i vue

引用

样式要单独引一次，只引一次，全部组件共用：

import 'datav-lumen/style.css'

全量注册（把所有组件注册成全局组件）：

import { createApp } from 'vue'
import DatavLumen from 'datav-lumen'
import 'datav-lumen/style.css'
import App from './App.vue'

createApp(App).use(DatavLumen).mount('#app')

按需引入（推荐，用不到的组件不会进包）：

<script setup lang="ts">
import { LbCounterCard, LbButton01 } from 'datav-lumen'
import 'datav-lumen/style.css'
</script>

<template>
  <LbCounterCard :value="5623" label="窗口登记" color="#8b5cf6" animate-value />
  <LbButton01 label="涉执&#10;舆情" color="#22d3ee" @click="onClick" />
</template>

类型：每个组件的 Props 类型都有导出，需要时可以直接标注：

import type { LbCounterCardProps, LbButton01Props } from 'datav-lumen'

组件文档

📖 每个组件的详细用法、完整 prop 表和效果图都在 component-docs/

| 文档 | 内容 | | --- | --- | | component-docs/README.md | 文档索引，带效果图缩略表 | | component-docs/<组件>.md | 单个组件的用法、prop 表、效果图 | | component-docs/icons-registry.md | 图标注册表：内置 77 个图标清单、怎么加自己的、批量导入 SVG | | component-docs/theming.md | 主题定制：CSS 变量清单、整站换色、浅色底注意事项 |

想在线拖参数看效果：clone 下来 npm run dev 起 playground，每个组件都有一页， 滑杆调出来的效果可以直接「复制」成模板代码。

• 版本变更、升级注意事项 → CHANGELOG.md
• 改代码 / 加组件 → CONTRIBUTING.md

组件清单

当前共 20 个组件，分七类。点组件名进它的文档。

基础

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbIcon | 图标，内置 77 个（按 MES 场景分 11 组），可注册自己的 | 整张 SVG |

卡片 —— 数值主视觉的大卡，一屏放 4~12 个的那种

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbCounterCard | 竖版计数卡片（上发散光锥 + 机柜图标 + 粒子） | 整张 SVG | | LbStatItem | 横向指标项（CSS 3D 底座 + 图标 + 数值 + 标题） | DOM + SVG | | LbOrbitCard | 光轨卡片（发光椭圆轨道上跑亮弧 + 数值） | 整张 SVG | | LbPodiumCard | 台座卡片（菱形台座 + 图标 + 数值） | DOM + SVG | | LbDiscCard | 圆台卡片（圆锥台 + 浮动图标 + 数值） | DOM + SVG | | LbHexCard | 六边台卡片（数值站在三层薄板上 + 光柱 + 向上发光） | 整张 SVG | | LbCylinderCard | 圆柱液位卡片（液面 + 上升气泡 + 筒身高光，按百分比涨落） | 整张 SVG |

总览 —— 占一整块区域的场景图

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbBranchGraph | 分支总览图（舞台灯台座 + 2~8 个浮动玻璃珠节点自动分布 + 渐变连线） | DOM + SVG |

按钮 —— 外壳都是真 <button>，键盘操作 / focus-visible / disabled 交给浏览器

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbButton01 | 圆形科技按钮（旋转亮弧 + 反向刻度点 + 内圆） | DOM + SVG | | LbButton02 | 胶囊状态按钮（渐变 + 外发光，可带图标） | 纯 CSS | | LbButton03 | 斜角刻齿按钮（斜六边形 + 顶部凹槽刻齿，三态配色各自独立） | DOM + SVG |

排名 —— TOP-N 列表类

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbRank01 | 排名条 01（名次徽章 + 名称 + 角括号 + 类别 + 进度条，前三名专色） | 纯 CSS |

边框 —— 容器类，内容放默认插槽，边框自适应任意宽高

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbBorder01 | 台阶标题边框（顶边左段抬高成标题台 + 斜条纹 + 四角括号 + 渐隐亮线 + 内发光） | 纯 CSS |

标题栏 —— 都默认撑满父容器宽度，做面板抬头用

| 组件 | 说明 | 实现 | | --- | --- | --- | | LbTitleBar01 | 图标方座 + 斜切条 + 发光标题 + 描述 | 纯 CSS | | LbTitleBar02 | 折线基线 + 光点 + 半透明横带（「数字机房」款） | 纯 CSS | | LbTitleBar03 | 双行标题 + 金框斜带 + 菱形项标，蓝金双色（「攻击队动态」款） | 纯 CSS | | LbTitleBar04 | 双横线夹发光渐变标题 + 橙色箭头（「数据展示」款） | 纯 CSS | | LbTitleBar05 | 角框图标方座 + 斜体大标题 + 拼音副标题 + 块列装饰线（「道路水位」款） | 纯 CSS | | LbTitleBar06 | 图标方座 + 矩形描边条 + 大写斜体小标题（01 的精简同族，纯静态） | 纯 CSS |

「整张 SVG」和「DOM + SVG」的区别：前者只传一个 width 就整卡等比缩放、字号跟着缩， 但插槽里只能放 SVG 元素；后者每个尺寸 prop 各自是 px 要分别调，好处是插槽能放任意 DOM。

除组件之外还导出这些工具（自己写组件时可以复用同一套配色和数值滚动逻辑）：

| 导出 | 用途 | | --- | --- | | derivePalette / parseHex / rgbToHsl / hslString | 主色 → 6 档调色板 | | useThemeVars | 主题输入 → 一组内联 CSS 变量 | | useCountUp | 数值滚动（走全局共享 rAF） | | useUid | SVG defs 的实例 id 前缀 | | addTick / removeTick / tickCount | 全局共享的 rAF 循环 | | registerIcon / registerIcons / svgToIconDef / iconNames / getIcon / hasIcon / BUILT_IN_ICONS | 图标注册表，见 icons-registry.md |

许可

MIT