DaLuoComponents

Appearance

数据大屏组件库 ​

FinDashboard 是面向财务、制造、运营等领域的数据可视化大屏组件库，提供开箱即用的暗色科技风格组件，支持多主题切换。

特性 ​

  • 🎨 多主题切换 — 内置科技蓝、科技紫、科技绿、暗金 4 套预设主题，支持运行时切换
  • 📐 自适应缩放 — 基于设计稿尺寸（默认 1920×1080）自动等比缩放，适配任意屏幕
  • 📊 丰富图表 — 基于 ECharts 封装，主题色自动同步，开箱即用
  • 🧩 组件化 — 独立容器、面板、图表、数据展示组件，自由组合
  • 🌙 暗色优先 — 深色背景 + 霓虹配色 + 发光效果，沉浸式大屏体验
  • 🔌 按需引入 — 支持自动按需导入（unplugin-vue-components）

快速开始 ​

安装 ​

bash
pnpm add @axewo/fin-dashboard
# peer dependencies
pnpm add echarts element-plus vue @axewo/fin-core @axewo/fin-locale

完整引入 ​

ts
import { createApp } from 'vue'
import FinDashboard from '@axewo/fin-dashboard'
import '@axewo/fin-dashboard/dist/style.css'

const app = createApp(App)
app.use(FinDashboard)

按需引入（推荐） ​

配合 unplugin-vue-components 自动导入：

ts
// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { FinDashboardResolver } from '@axewo/fin-dashboard'

export default {
  plugins: [
    Components({
      resolvers: [FinDashboardResolver()],
    }),
  ],
}

基础用法 ​

vue
<template>
  <FScreenContainer title="数据监控大屏">
    <FPanelBox title="销售趋势">
      <FBarLineChart :data="chartData" />
    </FPanelBox>
  </FScreenContainer>
</template>

<script setup lang="ts">
import { FScreenContainer, FPanelBox, FBarLineChart } from '@axewo/fin-dashboard'

const chartData = {
  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
  series: [
    { name: '销售额', data: [120, 200, 150, 300, 280, 350], type: 'bar' },
    { name: '利润', data: [30, 50, 45, 80, 75, 100], type: 'line' },
  ],
}
</script>

组件分类 ​

容器层 ​

  • FScreenContainer — 大屏根容器，处理缩放、主题、顶部工具栏
  • FPanelBox — 数据面板框，带标题、图标、边框发光效果

图表层 ​

  • FRingChart — 环形图（设备状态分布、类型占比）
  • FProgressRing — 进度环（完成率、达成率）
  • FBarLineChart — 柱线混合图（趋势对比）
  • FLiquidGauge — 水球图（百分比可视化）
  • FRiskDonut — 风险占比环形图（带引线标注）

数据展示层 ​

  • FMetricCard — 指标卡片（带趋势、变化幅度）
  • FRankingList — 排行榜（前三高亮）
  • FSegmentedBar — 分段条（多段颜色占比）
  • FProgressTable — 进度表格（带进度条、自动滚动）
  • FStatusTable — 状态表格（某列按等级变色）
  • FAlertCardList — 告警卡片列表（分级颜色、自动滚动）

主题切换 ​

运行时切换 ​

vue
<template>
  <FScreenContainer theme="techBlue">
    <!-- 内容 -->
  </FScreenContainer>
</template>

通过 theme 属性切换预设主题：

  • techBlue — 科技蓝（默认）
  • techPurple — 科技紫
  • techGreen — 科技绿
  • darkGold — 暗金

自定义主题 ​

vue
<script setup lang="ts">
import type { DashboardTheme } from '@axewo/fin-dashboard'

const customTheme: DashboardTheme = {
  name: 'custom',
  bgBase: '#0A0E27',
  bgPanel: 'rgba(15, 23, 42, 0.8)',
  bgPanelGradient: 'linear-gradient(135deg, rgba(59,130,246,0.1), rgba(147,51,234,0.1))',
  borderPanel: '#1E3A8A',
  glow: 'rgba(59,130,246,0.4)',
  textPrimary: '#F1F5F9',
  textSecondary: '#94A3B8',
  textValue: '#60A5FA',
  primary: '#3B82F6',
  primaryGradient: ['#3B82F6', '#8B5CF6'],
  series: ['#3B82F6', '#8B5CF6', '#10B981', '#F59E0B', '#EF4444', '#EC4899'],
  success: '#10B981',
  warning: '#F59E0B',
  danger: '#EF4444',
  info: '#3B82F6',
}
</script>

<template>
  <FScreenContainer :theme="customTheme">
    <!-- 内容 -->
  </FScreenContainer>
</template>

设计原则 ​

  1. 语义化 Token — 组件只引用语义 token（--fd-primary、--fd-text-primary），不写死色值
  2. 单一数据源 — 主题对象即真实配置，CSS 变量从主题对象生成
  3. 运行时切换 — 通过 Vue provide/inject 下发主题，组件响应式更新
  4. 自适应缩放 — 固定设计稿尺寸 + transform: scale，非响应式布局

浏览器兼容 ​

  • Chrome >= 90
  • Firefox >= 88
  • Safari >= 14
  • Edge >= 90

相关链接 ​