# WBRPrototypeOMsystem

**Repository Path**: work_project_item/wbrprototype-omsystem

## Basic Information

- **Project Name**: WBRPrototypeOMsystem
- **Description**: 未必然运维管理系统原型设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-20
- **Last Updated**: 2025-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 运维平台

## 项目说明
这是一个基于Vue3 + Vite + TypeScript + Element Plus的运维管理平台。

## 技术栈
- 框架：Vue3 + Vite
- 语言：TypeScript
- UI框架：Element Plus
- 状态管理：Pinia
- 路由：Vue Router

## 开发环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

## 项目结构
```
├── src/                # 源代码目录
│   ├── api/           # API接口
│   ├── assets/        # 静态资源
│   ├── components/    # 公共组件
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia状态管理
│   ├── styles/        # 全局样式
│   ├── utils/         # 工具函数
│   └── views/         # 页面组件
├── public/            # 公共资源
├── mock/              # 模拟数据
└── dist/              # 打包输出目录
```

## 开发指南

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

### 启动开发服务器
```bash
npm run dev
```

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

## 部署指南

### 1. 构建项目
```bash
npm run build
```

### 2. 部署到服务器
构建完成后，将 `dist` 目录下的文件上传到服务器。

### 3. 配置Nginx
在服务器上配置Nginx，示例配置如下：

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /path/to/your/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # API代理配置
    location /api {
        proxy_pass http://your-api-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

### 4. 重启Nginx
```bash
sudo nginx -s reload
```

## 注意事项
1. 确保服务器已安装Node.js和Nginx
2. 生产环境部署前请检查环境变量配置
3. 建议使用HTTPS协议部署
4. 定期备份数据库和配置文件

## 项目特点

- 使用Vue 3 Composition API和`<script setup>`语法
- 完整的TypeScript支持
- 基于Pinia的状态管理
- 使用Element Plus组件库
- 响应式设计，支持移动端
- 统一的错误处理和提示机制
- 侧边栏支持一键折叠/展开，按钮固定在左侧底部，主内容区自动联动

## 目录结构

```
src/
├── assets/          # 静态资源
├── components/      # 公共组件（如AppHeader等）
├── layouts/         # 布局组件（如MainLayout，包含侧边栏、顶部栏等）
├── router/          # 路由配置
├── stores/          # Pinia状态管理
├── views/           # 页面组件
├── mock/            # mock数据
└── style.css        # 全局样式
```

## 主要功能说明

### 侧边栏折叠/展开
- 左侧导航栏可通过底部的折叠按钮一键收起或展开
- 折叠时宽度为64px，展开时为200px
- 主内容区会自动跟随侧边栏宽度变化，保证布局美观
- 折叠按钮始终固定在侧边栏底部，操作便捷

### 表单与列表
- 表单组件自带表单验证和错误提示，防止误操作
- 列表组件支持分页、排序，自动处理加载中、空数据、错误等状态

### 错误处理
- 统一使用Element Plus的Message组件进行错误提示
- 所有API请求错误需统一处理
- 表单验证错误需即时反馈

## 开发指南

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

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

### 开发环境运行
```bash
npm run dev
```
开发服务器将在 http://localhost:5173 启动，并自动打开浏览器。
- 支持局域网访问：其他设备可以通过你的IP地址访问（如 http://192.168.1.100:5173）
- 支持热更新：修改代码后会自动刷新页面
- 支持跨域请求：已配置CORS

### 生产环境构建
```bash
npm run build
```
构建完成后，将在项目根目录生成 `dist` 文件夹，包含：
- 压缩后的JS和CSS文件
- 优化后的静态资源
- 自动移除console和debugger
- 自动生成文件hash，避免缓存问题

### 预览生产环境
```bash
npm run preview
```
预览服务器将在 http://localhost:4173 启动，并自动打开浏览器。
- 支持局域网访问：其他设备可以通过你的IP地址访问（如 http://192.168.1.100:4173）
- 完全模拟生产环境：与最终部署的版本完全一致
- 适合测试和演示

### 部署
```bash
npm run deploy
```

## 部署指南

### 部署方式
本项目支持以下部署方式：
1. GitHub Pages 部署（推荐）
2. 传统服务器部署

### GitHub Pages 部署
1. 确保你的项目已经推送到 GitHub 仓库
2. 在 GitHub 仓库设置中启用 GitHub Pages
3. 运行部署命令：
   ```bash
   npm run deploy
   ```
4. 部署完成后，访问 `https://你的用户名.github.io/仓库名/` 即可查看网站

### 传统服务器部署
1. 构建项目：
   ```bash
   npm run build
   ```
2. 将 `dist` 目录下的所有文件复制到服务器的网站根目录

### 部署注意事项
1. 确保服务器已安装 Node.js 和 npm
2. 确保服务器有足够的磁盘空间
3. 确保服务器防火墙已开放相应端口
4. 建议使用 HTTPS 部署，提高安全性
5. 建议配置适当的缓存策略，提高访问速度

### 部署后检查
1. 访问网站，确保所有功能正常
2. 检查控制台是否有错误
3. 检查网络请求是否正常
4. 检查页面加载速度
5. 检查移动端适配

## 性能优化
- 路由懒加载
- 组件按需加载
- 图片资源优化
- 代码分割

## 浏览器支持
- Chrome >= 80
- Firefox >= 78
- Safari >= 13
- Edge >= 80

## 常见问题（FAQ）

**Q: 折叠按钮在哪里？如何使用？**
A: 折叠按钮位于左侧导航栏底部，点击即可收起或展开侧边栏，主内容区会自动适应。

**Q: 表单填写错误会有提示吗？**
A: 会，所有表单都带有实时校验和错误提示，防止误操作。

**Q: 列表数据加载慢或出错怎么办？**
A: 列表会自动显示加载中、空数据或错误提示，确保用户体验。

## 贡献指南
1. Fork 项目
2. 创建特性分支
3. 提交代码
4. 创建Pull Request

## 许可证
MIT License