# 漫展管理系统前台

**Repository Path**: ndkkfl/frontend

## Basic Information

- **Project Name**: 漫展管理系统前台
- **Description**: 漫展管理系统前台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-04
- **Last Updated**: 2025-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 漫展管理系统前台

基于 Vue2 + ElementUI 开发的漫展管理系统前台界面，支持多角色用户管理、活动展示、在线购票等功能。

## 🚀 项目特色

- **多角色支持**: 观众、参展商、Coser、管理员四种角色
- **响应式设计**: 完美适配 PC、平板、手机端
- **现代化UI**: 基于 ElementUI 的精美界面设计
- **组件化开发**: 高度可复用的组件架构
- **TypeScript支持**: 完整的类型定义（可选）
- **国际化支持**: 多语言切换功能（预留）

## 📋 功能模块

### 前台用户端
- 🏠 **首页**: 轮播展示、角色入口、热门活动
- 🎪 **活动列表**: 筛选搜索、多种视图、排序功能
- 📖 **活动详情**: 详细信息、评价系统、购票功能
- 🎫 **购票流程**: 票种选择、优惠计算、支付集成
- 👤 **个人中心**: 订单管理、收藏夹、个人设置

### 参展商端
- 📝 **参展申请**: 在线申请、资料上传、进度跟踪
- 🏢 **展位管理**: 展位信息、展品管理、销售统计

### Coser端
- 🎭 **作品展示**: 图片上传、分类管理、互动功能
- 📅 **活动报名**: 舞台活动报名、行程管理

## 🛠️ 技术栈

- **前端框架**: Vue 2.6.x
- **UI组件库**: Element UI 2.15.x
- **状态管理**: Vuex 3.x
- **路由管理**: Vue Router 3.x
- **HTTP客户端**: Axios 1.x
- **构建工具**: Vue CLI 5.x
- **CSS预处理器**: SCSS/Sass
- **代码规范**: ESLint + Prettier

## 📦 安装依赖

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

# 或使用 yarn
yarn install
```

## 🚀 开发运行

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

# 或使用 yarn
yarn serve
```

访问 `http://localhost:8080` 查看应用

## 🏗️ 构建部署

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

# 或使用 yarn
yarn build
```

构建完成后，`dist` 目录包含可部署的文件。

## 📁 项目结构

```
src/
├── api/                 # API 接口定义
│   └── index.js        # 统一接口管理
├── assets/             # 静态资源
│   ├── images/         # 图片资源
│   └── styles/         # 样式资源
├── components/         # 公共组件
│   ├── HeaderBar.vue   # 顶部导航栏
│   ├── FooterBar.vue   # 底部信息栏
│   ├── EventCard.vue   # 活动卡片组件
│   └── Loading.vue     # 加载组件
├── router/             # 路由配置
│   └── index.js        # 路由定义
├── store/              # 状态管理
│   ├── modules/        # 模块化状态
│   │   ├── user.js     # 用户状态
│   │   ├── events.js   # 活动状态
│   │   └── cart.js     # 购物车状态
│   └── index.js        # 根 store
├── styles/             # 样式文件
│   ├── variables.scss  # SCSS 变量
│   └── index.scss      # 全局样式
├── utils/              # 工具函数
│   ├── format.js       # 格式化函数
│   └── index.js        # 通用工具
├── views/              # 页面组件
│   ├── Home.vue        # 首页
│   ├── Events.vue      # 活动列表
│   ├── Login.vue       # 登录页
│   └── Register.vue    # 注册页
├── App.vue             # 根组件
└── main.js             # 入口文件
```

## 🎨 设计规范

### 色彩方案
- **主色调**: #6366F1 (紫色)
- **辅助色**: #F59E0B (橙色)
- **成功色**: #10B981 (绿色)
- **警告色**: #F59E0B (黄色)
- **错误色**: #EF4444 (红色)

### 组件规范
- 使用 BEM 命名规范
- 统一的圆角和阴影效果
- 响应式断点设计
- 无障碍访问支持

## 🔧 配置说明

### 环境变量
在项目根目录创建 `.env.development` 和 `.env.production` 文件：

```env
# 开发环境
VUE_APP_API_BASE_URL=http://localhost:8081/api

# 生产环境
VUE_APP_API_BASE_URL=https://your-domain.com/api
```

### API 配置
修改 `src/api/index.js` 中的 `baseURL` 配置：

```javascript
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '/api',
  timeout: 10000
})
```

## 🧪 测试

```bash
# 运行单元测试
npm run test:unit

# 运行端到端测试
npm run test:e2e

# 代码覆盖率报告
npm run test:coverage
```

## 📝 代码规范

项目使用 ESLint + Prettier 进行代码规范检查：

```bash
# 检查代码规范
npm run lint

# 自动修复代码规范
npm run lint:fix
```

## 🚀 部署指南

### 1. 构建生产版本
```bash
npm run build
```

### 2. 服务器部署
将 `dist` 目录内容上传到 Web 服务器

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

## 🤝 贡献指南

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 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系我们

- 项目作者: MiniMax Agent
- 项目地址: [GitHub Repository](https://github.com/your-repo)
- 问题反馈: [Issues](https://github.com/your-repo/issues)

## 🙏 致谢

感谢以下开源项目的支持：
- [Vue.js](https://vuejs.org/)
- [Element UI](https://element.eleme.cn/)
- [Vue CLI](https://cli.vuejs.org/)
- [Axios](https://github.com/axios/axios)

---

**注意**: 这是一个前端项目，需要配合后端 API 服务一起使用。后端项目请参考对应的 SpringBoot 后端代码。