# vite_react_board

**Repository Path**: myomz/vite_react_board

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-09
- **Last Updated**: 2026-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 看板管理系统 - 开发方案文档

## 项目概述

本项目是一个企业级看板管理系统，采用现代化技术栈构建，支持数据源管理、数据管理、图表管理、看板管理等核心功能。

## 技术栈

- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite 5
- **包管理**: pnpm
- **UI 框架**: Tailwind CSS + shadcn/ui
- **图表库**: ECharts
- **后端框架**: Next.js 14 (API Routes)
- **状态管理**: React Query + Zustand (可选)
- **路由**: Next.js App Router

## 目录结构

```
vite_react_board/
├── docs/                      # 文档目录
│   ├── api-spec.yaml         # API 规范文档
│   └── README.md             # 项目说明文档
├── src/
│   ├── assets/               # 静态资源
│   ├── components/           # 公共组件
│   │   ├── layout/          # 布局组件
│   │   │   ├── Sidebar.tsx  # 左侧导航栏
│   │   │   ├── Topbar.tsx   # 顶部导航栏
│   │   │   └── Footer.tsx   # 底部信息栏
│   │   ├── chart/           # 图表组件
│   │   │   ├── ChartContainer.tsx
│   │   │   ├── LineChart.tsx
│   │   │   ├── BarChart.tsx
│   │   │   ├── PieChart.tsx
│   │   │   └── ...
│   │   └── dashboard/       # 看板组件
│   │       ├── Dashboard.tsx
│   │       └── Widget.tsx
│   ├── hooks/               # 自定义 Hook
│   ├── lib/                 # 工具函数
│   ├── pages/               # 页面路由
│   │   ├── datasources/     # 数据源管理
│   │   │   ├── index.tsx
│   │   │   └── [id]/index.tsx
│   │   ├── datasets/        # 数据管理
│   │   │   ├── index.tsx
│   │   │   └── [id]/index.tsx
│   │   ├── charts/          # 图表管理
│   │   │   ├── index.tsx
│   │   │   └── [id]/index.tsx
│   │   ├── dashboards/      # 看板管理
│   │   │   ├── index.tsx
│   │   │   └── [id]/index.tsx
│   │   └── layout.tsx       # 布局页面
│   ├── services/            # API 服务
│   │   ├── api.ts
│   │   ├── datasource.ts
│   │   ├── dataset.ts
│   │   ├── chart.ts
│   │   └── dashboard.ts
│   ├── store/               # 状态管理
│   │   ├── useDashboardStore.ts
│   │   └── useChartStore.ts
│   ├── types/               # TypeScript 类型定义
│   │   ├── datasource.ts
│   │   ├── dataset.ts
│   │   ├── chart.ts
│   │   └── dashboard.ts
│   └── utils/               # 工具函数
│       ├── api.ts
│       ├── chart.ts
│       └── drag.ts
├── public/                  # 公共资源
├── styles/                  # 全局样式
├── .eslintrc.js
├── .prettierrc
├── package.json
└── tsconfig.json
```

## 核心功能模块

### 1. 数据源管理

**功能描述**:
- 支持多种数据源类型：CSV、Excel、数据库、JSON、HTTP 接口
- 文件上传导入
- SQL 查询
- HTTP 接口调用
- 列表展示（搜索、分页、条件查询）
- 增删改查操作

**API 端点**:
- `GET /api/datasources` - 获取数据源列表
- `POST /api/datasources` - 创建数据源
- `GET /api/datasources/:id` - 获取数据源详情
- `PUT /api/datasources/:id` - 更新数据源
- `DELETE /api/datasources/:id` - 删除数据源

### 2. 数据管理

**功能描述**:
- 关联数据源的二维表数据管理
- 支持从数据源生成多个数据集
- 数据集列表展示（查询、分页）
- 数据集详情查看（表头、预览数据）
- 增删改查操作

**API 端点**:
- `GET /api/datasets` - 获取数据集列表
- `POST /api/datasets` - 创建数据集
- `GET /api/datasets/:id` - 获取数据集详情
- `PUT /api/datasets/:id` - 更新数据集
- `DELETE /api/datasets/:id` - 删除数据集

### 3. 图表管理

**功能描述**:
- 支持多种图表类型：折线图、条形图、柱状图、饼图、雷达图、文字、卡片数据
- 图表与数据源、看板关联
- 图表作为通用组件，可作为模板复用
- 图表配置编辑（标题、轴标题、ECharts 参数）
- 列表展示（查询、分页）
- 增删改查操作

**API 端点**:
- `GET /api/charts` - 获取图表列表
- `POST /api/charts` - 创建图表
- `GET /api/charts/:id` - 获取图表详情
- `PUT /api/charts/:id` - 更新图表
- `DELETE /api/charts/:id` - 删除图表

### 4. 看板管理

**功能描述**:
- 看板列表管理（增删改查、分页）
- 看板详情编辑
- 图表容器拖拽定位
- 容器尺寸调整（拖动边框、四角）
- 动态调整看板尺寸
- 容器内图表管理
- 自定义容器标题、背景、颜色
- 看板保存、导出、加载
- 主题切换
- 响应式布局

**API 端点**:
- `GET /api/dashboards` - 获取看板列表
- `POST /api/dashboards` - 创建看板
- `GET /api/dashboards/:id` - 获取看板详情
- `PUT /api/dashboards/:id` - 更新看板
- `DELETE /api/dashboards/:id` - 删除看板
- `POST /api/dashboards/:id/export` - 导出看板
- `POST /api/dashboards/:id/import` - 导入看板
- `POST /api/dashboards/:id/save` - 保存看板布局

## UI 设计规范

### 布局结构

```
┌─────────────────────────────────────────────────────────────┐
│  Topbar (导航栏)                                            │
│  ├─ Logo/标题                                               │
│  ├─ 用户信息                                                │
│  └─ 快捷链接/设置                                           │
├─────────────┬───────────────────────────────────────────────┤
│             │                                               │
│  Sidebar    │   Dashboard Content Area                     │
│  (左侧导航)  │   ├─ 看板容器                                │
│  ├─ 数据源   │   │  ├─ 图表容器 1                          │
│  ├─ 数据管理 │   │  ├─ 图表容器 2                          │
│  ├─ 图表管理 │   │  └─ ...                                 │
│  ├─ 看板管理 │   │                                         │
│  └─ ...     │   └─ 右键菜单                                │
│             │                                               │
├─────────────┴───────────────────────────────────────────────┤
│  Footer (底部信息栏)                                        │
│  ├─ 邮箱                                                    │
│  ├─ 备案信息                                                │
│  ├─ 版权信息                                                │
│  └─ 广告位 (预留)                                          │
└─────────────────────────────────────────────────────────────┘
```

### 交互设计

1. **左侧导航栏**:
   - 支持展开/收起
   - 收起时仅显示图标
   - 菜单项带图标和文字

2. **看板编辑**:
   - 右键菜单：添加图表、编辑容器、删除容器
   - 拖拽边框调整尺寸
   - 拖拽四角调整位置和尺寸
   - 拖拽超出边界时自动扩展看板尺寸

3. **响应式设计**:
   - 支持桌面端、平板、移动端
   - 自适应布局
   - 触摸友好的交互

## 开发计划

### 第一阶段：基础架构
- [ ] 项目初始化
- [ ] 基础布局组件
- [ ] 路由配置
- [ ] API 服务层

### 第二阶段：数据源管理
- [ ] 数据源列表页面
- [ ] 数据源详情页面
- [ ] 数据源 CRUD 操作
- [ ] 文件上传功能

### 第三阶段：数据管理
- [ ] 数据集列表页面
- [ ] 数据集详情页面
- [ ] 数据预览功能
- [ ] 数据集 CRUD 操作

### 第四阶段：图表管理
- [ ] 图表列表页面
- [ ] 图表详情页面
- [ ] 图表配置编辑器
- [ ] ECharts 集成

### 第五阶段：看板管理
- [ ] 看板列表页面
- [ ] 看板详情页面
- [ ] 图表容器拖拽
- [ ] 容器尺寸调整
- [ ] 看板保存/导出/加载

### 第六阶段：优化完善
- [ ] 响应式适配
- [ ] 性能优化
- [ ] 广告位预留
- [ ] 文档完善

## 注意事项

1. **广告位**: 在底部信息栏附近预留广告位，不影响正常使用
2. **响应式**: 确保在各种设备上都能正常使用
3. **性能**: 大数据量图表渲染时考虑虚拟化
4. **安全性**: API 需要身份验证和权限控制
5. **可维护性**: 代码结构清晰，注释完善

## 许可证

MIT License