Vue Dashboard Component

一个可配置的Vue 3仪表板组件，支持自定义后端API端点。

特性

• 🎯 可配置API端点 - 支持自定义后端服务地址
• 📊 数据表格展示 - 基于vxe-table的高性能表格
• 🔍 维度下钻功能 - 支持多层级数据钻取
• 🎛️ 过滤器支持 - 灵活的数据过滤功能
• 📝 富文本编辑 - 内置内容编辑器
• 📥 数据导出 - 支持CSV格式数据下载
• 🎨 现代化UI - 基于Tailwind CSS的响应式设计

安装

npm install vue-dashboard-component

使用方法

基础用法

<template>
  <div>
    <Dashboard 
      :widget-id="'your-widget-id'"
      :api-config="apiConfig"
    />
  </div>
</template>

<script setup>
import { Dashboard, setApiConfig } from 'vue-dashboard-component'

// 配置API端点
const apiConfig = {
  baseURL: 'https://your-api-server.com/api',
  headers: {
    'Authorization': 'Bearer your-token'
  },
  timeout: 10000
}
</script>

高级配置

<template>
  <div>
    <Dashboard 
      :widget-id="'your-widget-id'"
      :api-config="apiConfig"
      :show-edit-button="true"
      :show-download-button="true"
      :show-filters="true"
    />
  </div>
</template>

<script setup>
import { Dashboard } from 'vue-dashboard-component'

const apiConfig = {
  baseURL: 'https://your-api-server.com/api',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  },
  timeout: 10000
}
</script>

API配置

ApiConfig 接口

interface ApiConfig {
  baseURL: string;           // API基础URL
  headers?: Record<string, string>;  // 请求头
  timeout?: number;          // 请求超时时间(ms)
}

组件Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | widgetId | string | '1' | 仪表板ID | | apiConfig | Partial | undefined | API配置 | | showEditButton | boolean | true | 是否显示编辑按钮 | | showDownloadButton | boolean | true | 是否显示下载按钮 | | showFilters | boolean | true | 是否显示过滤器 |

后端API要求

组件需要以下API端点：

1. 获取维度数据

POST /widget/dimensions
Body: { widgetId: string }
Response: { data: DimensionGroup[] }

2. 获取指标数据

POST /widget/metrics
Body: { widgetId: string }
Response: { data: MetricGroup[] }

3. 获取表格数据

POST /widget/data
Body: {
  widget_id: string,
  dims: Array<{ key: string }>,
  metrics?: Array<{ key: string }>,
  filters: any[],
  page_num: number,
  page_size: number
}
Response: {
  data: {
    data: TableRowData[],
    total: number
  }
}

4. 获取过滤器

GET /widget/filters?widgetId=string
Response: { data: FilterGroup[] }

5. 获取/保存内容

GET /widget/html?widgetId=string
POST /widget/html
Body: { widgetId: string, tooltipHtml: string }

6. 下载数据

POST /widget/data
Body: {
  dims: Array<{ key: string }>,
  filters: any[],
  page_num: 0,
  page_size: 50000,
  download: true
}
Response: Blob (CSV文件)

数据格式

DimensionGroup

interface DimensionGroup {
  alias: string;
  color?: string;
  children: Array<{
    name: string;
    alias?: string;
    color?: string;
  }>;
}

MetricGroup

interface MetricGroup {
  alias: string;
  color?: string;
  children: Array<{
    name: string;
    alias?: string;
    color?: string;
    type: string;
  }>;
}

FilterGroup

interface FilterGroup {
  id: string;
  groupName: string;
  groupColor?: string;
  sortOrder: number;
  createdAt: string;
  updatedAt: string;
  filters: FilterData[];
}

依赖项

Peer Dependencies

• Vue 3.x
• lucide-vue-next
• vxe-table

可选依赖

• quill (用于富文本编辑)

样式定制

组件使用CSS变量进行样式定制：

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 发布
npm publish

许可证

MIT