# gantt-demo-vue

**Repository Path**: hu_jiancheng/gantt-demo-vue

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-12
- **Last Updated**: 2025-07-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 甘特图响应式表格组件

这是一个基于 Vue 3 + TypeScript + ZRender 的响应式甘特图组件，支持自适应宽度变化和统一的表格渲染架构。

## 新架构特点

### 1. 统一表格渲染
- **GanttTable**: 主要的表格组件，统一管理整个甘特图的渲染
- **TableHeader**: 表格头部组件，负责渲染时间轴和日期信息
- **TableBody**: 表格主体组件，负责渲染人员行和排班数据
- **PersonRow**: 人员行组件，负责渲染单行的人员信息和排班数据
- **ScheduleBar**: 排班条组件，负责渲染单个排班任务条

### 2. 响应式设计
- 支持容器宽度变化的自适应
- 动态计算单位宽度、人员列宽度、任务条高度等
- 基于断点的响应式配置
- 防抖处理，避免频繁重绘

### 3. 配置系统
- **responsiveUnitWidth**: 响应式单位宽度配置
- **responsivePersonColumnWidth**: 响应式人员列宽度配置
- **responsiveBarHeight**: 响应式任务条高度配置
- **responsiveConfig**: 断点配置和响应式规则

## 断点配置

```typescript
breakpoints: {
  xs: 480,   // 超小屏幕
  sm: 768,   // 小屏幕
  md: 1024,  // 中等屏幕
  lg: 1200,  // 大屏幕
  xl: 1920,  // 超大屏幕
}
```

## 使用方法

### 1. 基本使用

```typescript
import { ScheduleApp } from './schedule-render/main';

const app = new ScheduleApp();
app.init();
```

### 2. 响应式测试

在 `App.vue` 中提供了响应式测试功能：
- 可调整容器宽度（30%-90%）
- 快速设置按钮（50%, 70%, 90%）
- 测试响应式按钮

### 3. 配置自定义

```typescript
// 自定义响应式配置
const customConfig = {
  unitWidth: {
    min: 60,
    max: 180,
    default: 120,
  },
  personColumnWidth: {
    min: 120,
    max: 250,
    default: 180,
  },
  barHeight: {
    min: 18,
    max: 35,
    default: 25,
  },
};
```

## 组件结构

```
src/schedule-render/
├── components/
│   ├── gantt-table/           # 新的表格组件
│   │   ├── index.ts          # 主入口
│   │   ├── gantt-table.ts    # 主表格组件
│   │   ├── table-header.ts   # 表格头部
│   │   ├── table-body.ts     # 表格主体
│   │   ├── person-row.ts     # 人员行
│   │   └── schedule-bar.ts   # 排班条
│   ├── time-scale/           # 时间轴组件（旧）
│   ├── person-column/        # 人员列组件（旧）
│   └── schedule-bar/         # 排班条组件（旧）
├── config/
│   ├── layout.ts             # 布局配置（包含响应式配置）
│   └── time.ts               # 时间配置
├── core/
│   └── schedule-renderer.ts  # 主渲染器（已更新）
└── types/
    └── global.d.ts           # 类型定义（已更新）
```

## 响应式功能

### 1. 自动监听
- 使用 `ResizeObserver` 监听容器大小变化
- 降级方案：使用 `window.resize` 事件
- 防抖处理，避免频繁重绘

### 2. 动态计算
- 根据容器宽度动态计算单位宽度
- 根据容器高度动态计算任务条高度
- 根据人员数量调整行高

### 3. 滚动适配
- 自动调整滚动范围
- 保持滚动位置在有效范围内
- 响应式滚动步长

## 开发说明

### 1. 架构优势
- **统一渲染**: 所有组件都在一个表格结构中渲染，避免布局不一致
- **响应式**: 支持各种屏幕尺寸的自适应
- **模块化**: 每个组件职责单一，易于维护和扩展
- **类型安全**: 完整的 TypeScript 类型定义

### 2. 性能优化
- 防抖处理避免频繁重绘
- 组件级别的更新机制
- 按需渲染，只渲染可见区域

### 3. 扩展性
- 易于添加新的表格功能
- 支持自定义样式和主题
- 可配置的响应式规则

## 测试

运行项目并调整浏览器窗口大小，或使用页面上的测试控件来验证响应式功能：

```bash
npm run dev
```

然后访问应用并测试：
1. 调整浏览器窗口大小
2. 使用页面上的宽度滑块
3. 点击快速设置按钮
4. 点击"测试响应式"按钮