# bysj-code-end

**Repository Path**: xxxrz/bysj-code-end

## Basic Information

- **Project Name**: bysj-code-end
- **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-12-25
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 会议室预约系统管理后台

基于 Vue3 + TypeScript + Vite 的会议室预约系统管理后台，包含会议室管理、预约管理和数据统计等功能。

## 技术栈

- **框架**: Vue3 (Composition API + `<script setup>`)
- **语言**: TypeScript
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由**: Vue Router
- **HTTP客户端**: Axios
- **样式**: SCSS
- **工具库**: @vueuse/core
- **Mock数据**: Mockjs

## 项目结构

```
src/
├── api/              # API 请求层
├── components/       # 公共组件
├── mock/             # Mock 数据配置
├── router/           # 路由配置
├── stores/           # Pinia 状态管理
├── views/            # 页面组件
├── App.vue           # 主应用组件
├── main.ts           # 应用入口
└── style.css         # 全局样式
```

## 功能特性

### 1. 仪表板 (Dashboard)
- 实时显示会议室总数、可用会议室数
- 显示预约总数、已批准数量
- 会议室利用率统计
- 预约状态分布统计
- 最近预约记录展示

### 2. 会议室管理 (Room Management)
- 展示所有会议室列表
- 显示会议室基本信息（容纳人数、位置、设备）
- 显示会议室状态（可用、维护中、已预订）
- 实时刷新功能

### 3. 预约管理 (Booking Management)
- **新建预约**: 选择会议室、输入预约人、设定时间、填写目的
- **预约列表**: 查看所有预约记录
- **预约批准**: 批准待审核的预约
- **预约取消**: 取消已有的预约
- 实时更新预约状态

## 安装和运行

### 1. 安装依赖
```bash
npm install
```

### 2. 开发模式
```bash
npm run dev
```
访问 `http://localhost:5173`

### 3. 生产构建
```bash
npm run build
```

### 4. 预览构建结果
```bash
npm run preview
```

## API 接口

系统使用 Mockjs 进行数据模拟，无需真实后端：

| 请求方法 | 端点 | 说明 |
|---------|------|------|
| GET | `/api/rooms` | 获取会议室列表 |
| GET | `/api/bookings` | 获取预约列表 |
| POST | `/api/bookings` | 创建预约 |
| PUT | `/api/bookings/:id` | 更新预约状态 |
| DELETE | `/api/bookings/:id` | 删除预约 |

## 数据模型

### 会议室 (Room)
```typescript
{
  id: number
  name: string           // 会议室名称
  capacity: number       // 容纳人数
  location: string       // 位置
  equipment: string[]    // 设备列表
  status: string        // 状态: 可用、维护中、已预订
}
```

### 预约 (Booking)
```typescript
{
  id: number
  roomId: number        // 会议室ID
  roomName: string      // 会议室名称
  userName: string      // 预约人
  startTime: string     // 开始时间
  endTime: string       // 结束时间
  purpose: string       // 预约目的
  status: string       // 状态: 待审核、已批准、已取消
}
```

## 样式特点

- **现代化设计**: 使用渐变色和阴影效果
- **响应式布局**: 自适应不同屏幕尺寸
- **SCSS预处理**: 模块化和可维护的样式
- **状态提示**: 不同颜色标识不同的状态
- **交互反馈**: 悬停效果和加载状态提示

## 组件特性

### 侧边栏导航
- 固定侧边栏导航菜单
- 活跃路由高亮显示
- 渐变色背景设计

### 数据表格
- 响应式表格设计
- 行间隔渐变背景
- 操作按钮集成

### 表单组件
- 表单验证
- 日期时间选择
- 文本域支持

### 统计卡片
- 数字统计显示
- 使用率条形图
- 分布统计表

## 状态管理

使用 Pinia 进行全局状态管理，主要状态包括：

- `rooms`: 会议室列表
- `bookings`: 预约列表
- `loading`: 加载状态
- `error`: 错误信息
- `availableRooms`: 计算属性 - 可用会议室列表

## 国际化

所有文本使用中文，包括：
- 页面标题和菜单
- 表单标签和占位符
- 验证提示和操作提示
- 状态标签和描述

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 开发建议

1. **新增页面**: 在 `src/views` 下创建组件，然后在 `src/router/index.ts` 中配置路由
2. **新增API**: 在 `src/api/index.ts` 中定义接口，然后在 `src/mock/index.ts` 中配置模拟数据
3. **状态管理**: 在 `src/stores` 中创建新的 store
4. **公共组件**: 在 `src/components` 中创建可复用组件
5. **样式**: 使用 SCSS 编写样式，支持嵌套和变量

## 许可证

MIT