HAP 视图插件 - 企业宿舍管理

基于 HAP 数据的企业宿舍管理视图插件，提供数据可视化、统计分析和数据管理功能。

功能特性

• 📊 数据可视化：多种图表展示（饼图、柱状图等）
• 📈 统计分析：实时统计宿舍容量、入住率等关键指标
• 🔍 数据筛选：支持按楼栋、状态等条件筛选
• 📋 数据表格：可排序、可筛选的数据表格
• 🛏️ 床位选择：类似电影院选座的交互式床位选择界面
• 🔄 自动刷新：支持自动刷新数据（默认30秒）
• 📱 响应式设计：适配各种屏幕尺寸

技术栈

• React 18 - UI 框架
• TypeScript - 类型安全
• Ant Design - UI 组件库
• Recharts - 图表库
• Vite - 构建工具
• Axios - HTTP 客户端

项目结构

hap-view-plugin/
├── src/
│   ├── components/          # React 组件
│   │   ├── Dashboard.tsx    # 主仪表板
│   │   ├── StatisticsCards.tsx  # 统计卡片
│   │   ├── DataTable.tsx    # 数据表格
│   │   ├── Charts.tsx       # 图表组件
│   │   ├── Filters.tsx      # 筛选器
│   │   └── BedSelection.tsx # 床位选择组件
│   ├── hooks/               # React Hooks
│   │   ├── useHAPData.ts    # HAP 数据获取
│   │   └── useFilter.ts     # 数据筛选
│   ├── services/            # 服务层
│   │   ├── hapClient.ts     # HAP 客户端
│   │   ├── dataTransform.ts # 数据转换
│   │   └── bedService.ts    # 床位服务
│   ├── utils/               # 工具函数
│   │   └── mockData.ts      # 模拟数据
│   ├── types/               # 类型定义
│   │   └── index.ts
│   ├── styles/              # 样式文件
│   │   └── index.css
│   └── index.tsx            # 入口文件
├── config/                  # 配置文件
│   └── hap-config.json      # HAP 配置
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

安装

npm install

开发

npm run dev

开发服务器将在 http://localhost:3000 启动。

构建

npm run build

构建产物将输出到 dist/ 目录。

配置

编辑 config/hap-config.json 文件配置 HAP 连接信息：

{
  "appkey": "your-appkey",
  "sign": "your-sign",
  "url": "https://api.mingdao.com/mcp"
}

使用方式

作为独立应用

import { HAPViewPlugin } from './src/index';

<HAPViewPlugin config={hapConfig} />

作为插件集成

import HAPViewPlugin from 'hap-view-plugin';

// 在明道云插件系统中使用
<HAPViewPlugin 
  config={config}
  dataSource="dormitories"
  filters={{ building: 'A栋' }}
  onDataChange={(data) => console.log(data)}
/>

API 说明

HAPViewPlugin Props

| 属性 | 类型 | 说明 | |------|------|------| | config | HAPConfig | HAP 连接配置 | | dataSource | string | 数据源名称（可选） | | filters | Record<string, any> | 初始筛选条件（可选） | | onDataChange | (data: any) => void | 数据变化回调（可选） |

HAPConfig

interface HAPConfig {
  appkey: string;    // HAP Appkey
  sign: string;      // HAP Sign
  url?: string;      // API 地址（可选）
}

组件说明

Dashboard

主仪表板组件，包含所有子组件的布局。

StatisticsCards

显示关键统计指标：

• 总宿舍数
• 总容量
• 已入住人数
• 入住率

DataTable

数据表格，支持：

• 排序
• 筛选
• 分页
• 响应式布局

Charts

数据可视化图表：

• 宿舍状态分布（饼图）
• 入住率排行（柱状图）
• 楼栋统计（柱状图）

Filters

数据筛选器，支持：

• 按楼栋筛选
• 按状态筛选
• 清除筛选

开发指南

添加新组件

1. 在 src/components/ 目录创建新组件
2. 在 Dashboard.tsx 中引入并使用
3. 添加相应的类型定义

扩展数据源

1. 在 src/services/hapClient.ts 中添加新的 API 方法
2. 在 src/hooks/ 中创建对应的 Hook
3. 在组件中使用新的 Hook

自定义样式

编辑 src/styles/index.css 文件，或使用 Ant Design 的主题定制功能。

安装使用

通过 npm 安装

npm install hap-view-plugin

使用

import { HAPViewPlugin } from 'hap-view-plugin';
import 'hap-view-plugin/dist/index.css';

const config = {
  appkey: 'your-appkey',
  sign: 'your-sign',
  url: 'https://api.mingdao.com/mcp'
};

function App() {
  return <HAPViewPlugin config={config} />;
}

发布

查看 PUBLISH.md 了解详细的发布流程。

许可证

MIT

相关资源

• HAP 文档
• Ant Design
• Recharts
• Vite
• 床位选择功能说明