# ldesign-dashboard

**Repository Path**: ldesign-v1/ldesign-dashboard

## Basic Information

- **Project Name**: ldesign-dashboard
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-11
- **Last Updated**: 2026-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ldesign/dashboard

数据大屏/仪表盘 - 拖拽式布局与数据可视化编排。

## ✨ 特性

- 📊 **数据可视化** - 支持图表、表格、统计卡片等多种数据展示组件
- 🎨 **拖拽布局** - 可视化拖拽编排仪表盘布局
- 📱 **响应式** - 支持不同屏幕尺寸自适应
- 🔄 **实时更新** - 支持数据实时刷新与动画过渡
- 🌓 **主题切换** - 亮色/暗色主题支持
- 📦 **组件化** - 丰富的内置 Widget 组件
- 🎯 **自定义** - 支持自定义 Widget 渲染器
- ⚡ **高性能** - 优化的渲染与事件处理

---

## 📦 安装

```bash
# 核心库
pnpm add @ldesign/dashboard

# Vue 组件
pnpm add @ldesign/dashboard-vue
```

---

## 🚀 快速开始

```typescript
import { createDashboard } from '@ldesign/dashboard';

const dashboard = createDashboard({
  container: '#dashboard',
  theme: 'light',
  widgets: [
    { id: 'stat1', type: 'stat', title: '总用户数', value: 12580 },
    { id: 'chart1', type: 'chart', title: '访问趋势', chartType: 'line' },
    { id: 'table1', type: 'table', title: '最新订单' },
  ],
});
```

---

## 📖 Widget 类型

| 类型 | 说明 | 适用场景 |
|------|------|----------|
| stat | 统计卡片 | KPI 指标展示 |
| chart | 图表 | 趋势分析、数据对比 |
| table | 表格 | 数据列表展示 |
| text | 文本 | 说明文字、公告 |
| progress | 进度条 | 完成率、进度展示 |

---

## 🏗️ 项目结构

```
dashboard/
├── packages/
│   ├── core/          # 核心库 @ldesign/dashboard
│   │   └── src/
│   │       ├── core/          # 核心引擎 (Dashboard, LayoutEngine, WidgetManager...)
│   │       ├── renderer/      # 渲染器 (DOMRenderer, WidgetRenderers)
│   │       ├── theme/         # 主题系统
│   │       └── types/         # TypeScript 类型
│   └── vue/           # Vue 组件 @ldesign/dashboard-vue
├── playground/        # 演示应用
└── README.md
```

---

## 🔧 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build
```

---

## 📄 License

MIT