# 日程管理系统

**Repository Path**: ShiTaoStudy/schedule-management-system

## Basic Information

- **Project Name**: 日程管理系统
- **Description**: 原为java后端项目，通过后期的完善实现前端显示页面效果，
前后端使用框架为Vue+SpringBoot作为项目实现
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-06
- **Last Updated**: 2026-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue-cli, webpack, Java, Vue, Vuex

## README

# 日程管理系统 (Schedule Management System)

一个基于Vue 2的现代化日程管理前端应用，提供个人和团队的日程安排、时间管理、协作办公等功能。

## � 项目预览

### 🏠 首页概览
![首页](./my_web/docs/screenshots/home.png)

### 📅 日程管理
![日程管理](./my_web/docs/screenshots/schedule.png)

### ⚙️ 系统设置
![系统设置](./my_web/docs/screenshots/set1.png)

### ⚙️ 主题设置
![主题设置](./my_web/docs/screenshots/set2.png)

### 🔐 登录页面
![登录页面](./my_web/docs/screenshots/login.png)

### 📝 注册页面
![注册页面](./my_web/docs/screenshots/register.png)

## �🚀 技术栈

### 核心框架
- **Vue 2.7.16** - 渐进式JavaScript框架
- **Vue Router 3.5.1** - 官方路由管理器
- **Vuex 3.6.2** - 状态管理模式库

### UI组件库
- **Element UI 2.15.14** - 基于Vue 2.0的桌面端组件库

### 工具库
- **Axios 1.8.1** - Promise based HTTP client
- **Vuelidate** - 简单轻量级的基于模型的验证库

### 开发工具
- **Vue CLI 5.0.0** - Vue.js 开发的标准工具
- **Sass** - CSS预处理器
- **ESLint** - JavaScript代码检查工具
- **Prettier** - 代码格式化工具

## 📁 项目结构

```
my_web/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口
│   │   ├── auth.js        # 认证相关接口
│   │   ├── group.js       # 群组相关接口
│   │   ├── schedule.js    # 日程相关接口
│   │   └── user.js        # 用户相关接口
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── constants/         # 常量定义
│   ├── docs/              # 项目文档和截图
│   │   └── screenshots/   # 项目预览图
│   ├── plugins/           # 插件配置
│   ├── router/            # 路由配置
│   ├── store/             # Vuex状态管理
│   │   └── modules/       # 模块化store
│   ├── utils/             # 工具函数
│   ├── views/             # 页面组件
│   │   ├── Login.vue      # 登录页
│   │   ├── Register.vue   # 注册页
│   │   ├── Home.vue       # 首页
│   │   ├── ScheduleView.vue # 日程管理页
│   │   ├── Groups.vue     # 群组管理页
│   │   ├── UserProfile.vue # 用户资料页
│   │   └── Settings.vue   # 设置页
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── package.json
└── README.md
```

## 🎯 核心功能

### 用户认证
- ✅ 用户登录/注册
- ✅ JWT Token认证
- ✅ 路由权限控制
- ✅ 自动登录状态检查

### 日程管理
- ✅ 日程的增删改查
- ✅ 日程分类和标签
- ✅ 时间提醒功能
- ✅ 日程视图切换
- ✅ 批量操作功能
- ✅ 日程导入导出
- ✅ 状态管理（进行中/已完成/已过期）

### 团队协作
- ✅ 群组创建和管理
- ✅ 成员邀请和权限管理
- ✅ 共享日程查看

### 个人中心
- ✅ 个人信息管理
- ✅ 密码修改
- ✅ 系统设置

## 🎨 设计特点

### 视觉设计
- **多主题支持**：支持亮色/暗色主题切换
- **独立主题页面**：登录/注册页面保持独立主题色
- **现代化UI**：使用渐变、阴影、模糊等现代设计元素
- **响应式布局**：适配桌面端和移动端设备
- **玻璃拟态效果**：卡片采用毛玻璃设计风格

### 交互体验
- **流畅动画**：丰富的页面过渡和交互动画
- **即时反馈**：表单验证、操作提示等实时反馈
- **用户友好**：直观的操作流程和清晰的信息架构
- **状态可视化**：不同状态用颜色区分，一目了然

## 🛠️ 开发规范

### 代码规范
- 使用ESLint进行代码检查
- 使用Prettier进行代码格式化
- 遵循Vue官方风格指南

### 组件设计
- 单一职责原则
- 可复用性设计
- Props验证和默认值

### 状态管理
- 模块化Vuex store
- 异步操作统一管理
- 响应式数据流

## 📦 安装和运行

### 环境要求
- Node.js >= 14.0.0
- npm >= 6.0.0

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

### 开发环境运行
```bash
npm run serve
```

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

### 代码检查和修复
```bash
npm run lint
npm run lint:fix
```

### 代码格式化
```bash
npm run format
```

## 🔧 配置说明

### 环境变量
- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置

### 代理配置
开发环境下API请求会自动代理到后端服务器，具体配置请参考`vue.config.js`。

## 🚀 部署

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

构建完成后，`dist`目录包含所有静态文件，可直接部署到Web服务器。

## 🤝 贡献指南

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) 文件了解详情

---

⭐ 如果这个项目对你有帮助，请给它一个星标！