# cleaning-master-web

**Repository Path**: wang-zaixuan/cleaning-master-web

## Basic Information

- **Project Name**: cleaning-master-web
- **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-01-27
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Cleaning Master Web

清洁管理系统 - 基于 Vue 3 + Element Plus 的现代化管理平台（响应式设计）

## 项目介绍

Cleaning Master 是一个功能完善的清洁服务管理系统，支持多语言（中文、日语），提供完整的清洁任务管理、员工管理、房间管理等功能。项目采用响应式设计，完美适配PC端和移动端。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **JavaScript** - 使用原生 JavaScript（不使用 TypeScript）
- **Vite** - 下一代前端构建工具
- **Element Plus** - 基于 Vue 3 的组件库
- **Vue Router** - 官方路由管理器
- **Pinia** - Vue 的状态管理库
- **Vue I18n** - 国际化插件
- **Sass** - CSS 预处理器

## 功能特性

- ✅ 用户登录认证
- ✅ 多语言支持（中文、日语）
- ✅ 响应式设计（PC和移动端完美适配）
- ✅ 仪表盘数据展示
- ✅ 清洁日程表管理
- ✅ 预定日历
- ✅ 任务管理
- ✅ 房间管理
- ✅ 员工管理
- ✅ 操作记录（清洁记录、预约记录、任务记录）
- ✅ 现代化 UI 设计
- ✅ 移动端侧边栏折叠功能

## 项目结构

```
cleaning-master-web/
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 公共组件
│   ├── i18n/           # 国际化配置
│   │   └── locales/    # 语言文件（中文、日语）
│   ├── layouts/         # 布局组件
│   │   └── components/  # 布局子组件（侧边栏、头部）
│   ├── router/          # 路由配置
│   ├── stores/          # 状态管理（Pinia）
│   ├── styles/          # 全局样式
│   ├── views/           # 页面组件
│   │   └── records/     # 记录相关页面
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── index.html           # HTML 模板
├── package.json         # 项目配置
└── vite.config.js      # Vite 配置
```

## 安装教程

### 环境要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 yarn >= 1.22.0

### 安装步骤

1. 克隆项目
```bash
git clone <repository-url>
cd cleaning-master-web
```

2. 安装依赖
```bash
npm install
# 或
yarn install
```

3. 启动开发服务器
```bash
npm run dev
# 或
yarn dev
```

4. 浏览器访问
```
http://localhost:3000
```

## 使用说明

### 登录

默认可以使用任意邮箱和密码（至少6位）登录，系统会进行模拟认证。

### 语言切换

点击页面右上角的语言选择器，可以在中文和日语之间切换。

### 响应式设计

- **PC端（>768px）**: 侧边栏固定显示，完整功能布局
- **移动端（≤768px）**: 侧边栏可折叠，通过菜单按钮控制，优化触摸操作

### 主要功能

- **仪表盘**: 查看各员工清洁状态和操作记录
- **清洁日程表**: 管理每日清洁计划和任务分配
- **预定日历**: 查看和管理预订信息
- **任务管理**: 创建和管理清洁任务
- **房间管理**: 管理房间信息和状态
- **员工管理**: 管理员工信息和状态
- **操作记录**: 查看各类操作历史记录

## 构建部署

### 开发环境
```bash
npm run dev
```

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

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

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

## 响应式断点

- **移动端**: ≤ 768px
- **平板**: 769px - 1024px
- **PC端**: > 1024px

## 浏览器支持

现代浏览器和 IE11+（需要 polyfills）

## 开发规范

- 使用 Vue 3 Composition API
- 组件命名使用 PascalCase
- 文件命名使用 kebab-case
- 响应式设计优先考虑移动端体验

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 许可证

本项目采用 MIT 许可证

## 联系方式

如有问题或建议，请提交 Issue 或 Pull Request。