# app-update-vue

**Repository Path**: oyhx/app-update-vue

## Basic Information

- **Project Name**: app-update-vue
- **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-07-13
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 应用同步管理平台

[![Vue 3](https://img.shields.io/badge/Vue-3-4FC08D?style=flat-square&logo=vue.js&logoColor=white)](https://vuejs.org/)
[![Ant Design Vue](https://img.shields.io/badge/Ant%20Design%20Vue-4-1890ff?style=flat-square&logo=antdesign&logoColor=white)](https://antdv.com/)
[![Vite](https://img.shields.io/badge/Vite-5-646CFF?style=flat-square&logo=vite&logoColor=white)](https://vitejs.dev/)

一个基于 Vue 3 + Ant Design Vue 的现代化应用更新任务管理前端系统，提供完整的任务管理、分组管理、实时监控和历史记录功能。

## ✨ 主要特性

### 🎯 核心功能
- **任务管理**: 创建、编辑、删除更新任务，支持任务复制
- **分组管理**: 任务分组组织和维护，分组基础路径继承
- **任务执行**: 启动、取消任务执行，实时状态更新
- **实时监控**: WebSocket 实时显示任务状态和日志信息
- **执行历史**: 查看任务执行记录和详细进度
- **用户认证**: 基于JWT的登录认证和权限控制

### 🎨 用户体验
- **响应式设计**: 完美适配桌面端、平板端和移动端
- **现代化界面**: 基于 Ant Design Vue 的精美UI设计
- **操作反馈**: 友好的成功/错误消息提示和加载状态
- **实时更新**: 无需刷新的实时数据更新

### 🛠 技术特性
- **模块化架构**: 高内聚低耦合的组件设计
- **统一错误处理**: 自动化的API错误处理和消息提示
- **自动重连**: WebSocket连接断开时自动重连机制
- **Mock支持**: 内置Mock服务器便于开发测试

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0
- 后端API服务运行在 `http://localhost:8080`（默认配置）

### 安装依赖

```bash
# 克隆项目
git clone <repository-url>
cd app-update-vue

# 安装依赖
npm install
```

### 环境配置

```bash
# 复制环境变量配置文件
cp .env.example .env.development
```

配置环境变量（`.env.development`）：
```bash
# API服务地址
VITE_API_BASE_URL=http://localhost:8080

# WebSocket服务地址
VITE_WS_URL=ws://localhost:8080/ws/logs

# 应用标题
VITE_APP_TITLE=应用同步管理平台

# 应用基础路径
VITE_BASE_URL=/

# 开发服务器端口
VITE_DEV_PORT=3000
```

### 启动开发

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

# 同时启动Mock服务器和开发环境
npm run dev:full

# 生产模式预览
npm run dev:prod
```

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

### 构建部署

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

# 预览构建结果
npm run preview

# 开发环境构建
npm run build:dev
```

## 🛠 技术栈

### 前端框架
- **Vue 3**: 渐进式JavaScript框架，使用Composition API
- **Vue Router 4**: 官方路由管理器
- **Pinia**: 状态管理库

### UI组件库
- **Ant Design Vue 4**: 企业级Vue组件库
- **@ant-design/icons-vue**: Ant Design Vue图标库

### 开发工具
- **Vite 5**: 现代化前端构建工具
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **Vitest**: 单元测试框架

### 网络通信
- **Axios**: HTTP客户端，支持拦截器和自动刷新
- **WebSocket**: 实时双向通信
- **Express**: Mock服务器框架

## 📁 项目结构

```
app-update-vue/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API接口封装
│   │   ├── index.js       # Axios实例和拦截器
│   │   ├── auth.js        # 认证相关接口
│   │   ├── tasks.js       # 任务管理接口
│   │   ├── groups.js      # 分组管理接口
│   │   └── logs.js        # 日志相关接口
│   ├── components/        # 可复用组件
│   │   ├── TaskCard.vue            # 任务卡片组件
│   │   ├── TaskFormDialog.vue      # 任务表单对话框
│   │   ├── GroupSelector.vue       # 分组选择器
│   │   ├── GroupManagementDialog.vue # 分组管理对话框
│   │   └── LogViewer.vue           # 日志查看器
│   ├── views/             # 页面组件
│   │   ├── Login.vue      # 登录页面
│   │   ├── Dashboard.vue  # 仪表板页面
│   │   ├── TaskList.vue   # 任务列表页面
│   │   ├── TaskDetail.vue # 任务详情页面
│   │   └── TaskForm.vue   # 任务表单页面
│   ├── store/             # Pinia状态管理
│   │   ├── index.js       # 主入口
│   │   ├── auth.js        # 认证状态
│   │   ├── tasks.js       # 任务状态
│   │   ├── groups.js      # 分组状态
│   │   └── websocket.js   # WebSocket状态
│   ├── router/            # 路由配置
│   │   └── index.js       # 路由定义和守卫
│   ├── utils/             # 工具函数
│   │   ├── websocket.js   # WebSocket管理器
│   │   └── auth.js        # 认证工具
│   ├── styles/            # 样式文件
│   │   └── main.css       # 全局样式
│   └── test/              # 测试文件
│       └── setup.js       # 测试环境配置
├── DOCS/                  # 项目文档
├── .env.example           # 环境变量示例
├── mock-server.js         # Mock服务器
├── package.json           # 项目配置
└── vite.config.js         # Vite配置
```

## 📖 API文档

### 认证接口
```javascript
// 用户登录
POST /api/auth/login
// 刷新token
POST /api/auth/refresh
// 退出登录
POST /api/auth/logout
```

### 任务管理接口
```javascript
// 获取任务列表（支持分组筛选）
GET /api/tasks?groupId={groupId}

// 创建任务
POST /api/tasks

// 获取任务详情
GET /api/tasks/{taskId}

// 更新任务
PUT /api/tasks/{taskId}

// 删除任务
DELETE /api/tasks/{taskId}

// 执行任务
POST /api/tasks/{taskId}/execute

// 取消任务
POST /api/tasks/{taskId}/cancel

// 复制任务
POST /api/tasks/{taskId}/copy
```

### 分组管理接口
```javascript
// 获取所有分组
GET /api/groups

// 创建分组
POST /api/groups

// 更新分组
PUT /api/groups/{groupId}

// 删除分组
DELETE /api/groups/{groupId}

// 获取分组下的任务
GET /api/groups/{groupId}/tasks
```

### WebSocket通信
```javascript
// 订阅任务日志
{
  "type": "SUBSCRIBE",
  "taskId": "task-id"
}

// 接收日志消息
{
  "type": "LOG",
  "taskId": "task-id",
  "log": { "timestamp": "...", "level": "INFO", "message": "..." }
}

// 接收状态更新
{
  "type": "STATUS",
  "taskId": "task-id",
  "status": "RUNNING"
}
```

## 🎯 开发指南

### 组件开发规范

```vue
<script setup>
import { ref, computed, onMounted } from 'vue'

// Props定义
const props = defineProps({
  task: {
    type: Object,
    required: true
  }
})

// 事件定义
const emit = defineEmits(['update', 'delete'])

// 响应式数据
const loading = ref(false)

// 计算属性
const status = computed(() => {
  return props.task.status?.toLowerCase()
})

// 生命周期
onMounted(() => {
  // 组件挂载逻辑
})
</script>
```

### API调用规范

```javascript
import { handleApiResponse } from '@/api'
import { message } from 'ant-design-vue'

// API方法定义
export const taskAPI = {
  async getTasks(params = {}) {
    const response = await api.get('/tasks', { params })
    return handleApiResponse(response)
  },

  async createTask(data) {
    const response = await api.post('/tasks', data)
    return handleApiResponse(response)
  }
}
```

### 状态管理规范

```javascript
import { defineStore } from 'pinia'
import { taskAPI } from '@/api'

export const useTaskStore = defineStore('tasks', {
  state: () => ({
    tasks: [],
    loading: false,
    error: null
  }),

  getters: {
    runningTasks: (state) => state.tasks.filter(task => task.status === 'RUNNING'),

    completedTasks: (state) => state.tasks.filter(task => task.status === 'COMPLETED')
  },

  actions: {
    async fetchTasks() {
      this.loading = true
      try {
        const response = await taskAPI.getTasks()
        this.tasks = response.data
      } catch (error) {
        this.error = error.message
      } finally {
        this.loading = false
      }
    }
  }
})
```

## 🔧 配置说明

### Vite配置

项目使用Vite进行构建，主要配置包括：

- 开发服务器代理配置
- 环境变量处理
- 代码分割优化
- 路径别名设置

详细配置请参考 `vite.config.js`

### ESLint配置

项目配置了严格的ESLint规则：
- 禁止行尾空格
- 强制使用单引号
- 组件名称必须使用PascalCase
- 强制使用Composition API

### 环境变量说明

| 变量名 | 说明 | 默认值 |
|--------|------|--------|
| `VITE_API_BASE_URL` | API服务地址 | `http://localhost:8080` |
| `VITE_WS_URL` | WebSocket服务地址 | `ws://localhost:8080/ws/logs` |
| `VITE_APP_TITLE` | 应用标题 | `应用同步管理平台` |
| `VITE_BASE_URL` | 应用基础路径 | `/` |
| `VITE_DEV_PORT` | 开发服务器端口 | `3000` |

## 🚨 错误处理

### API错误处理

系统提供统一的错误处理机制：

- **400**: 请求参数错误 - 检查请求体格式
- **401**: 未授权访问 - 自动处理token刷新
- **403**: 权限不足 - 显示权限错误提示
- **404**: 资源不存在 - 检查API路径
- **409**: 操作冲突 - 显示冲突错误信息
- **500+**: 服务器错误 - 显示通用错误提示

### WebSocket错误处理

- **自动重连**: 连接断开时自动重连，最多重试5次
- **连接状态**: 实时显示连接状态指示器
- **错误提示**: 友好的WebSocket错误信息
- **心跳检测**: 定期发送心跳包保持连接

## 📱 响应式设计

项目采用移动优先的响应式设计：

- **移动端**: < 768px - 垂直布局，触摸优化
- **平板端**: 768px - 1199px - 水平布局适配
- **桌面端**: >= 1200px - 完整功能展示

## 🐛 常见问题

### Q: API请求失败？
A: 检查后端服务是否启动，环境变量配置是否正确

### Q: WebSocket连接失败？
A: 确认WebSocket地址配置，检查防火墙设置

### Q: 样式显示异常？
A: 确认Ant Design Vue样式正确导入，清除浏览器缓存

### Q: 路由跳转问题？
A: 检查路由配置，确认组件导入路径

## 📦 部署指南

### Docker部署

```dockerfile
FROM node:18-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

### Nginx配置

```nginx
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    # Vue Router history模式
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API代理
    location /api {
        proxy_pass http://backend:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # WebSocket代理
    location /ws {
        proxy_pass http://backend:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}
```

## 🧪 测试

```bash
# 运行测试
npm run test

# 运行测试UI
npm run test:ui

# 生成测试报告
npm run test:run
```

## 📄 许可证

本项目采用 MIT 许可证，详情请查看 [LICENSE](LICENSE) 文件。

## 🤝 贡献

欢迎提交Issue和Pull Request！

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: 添加新功能'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📞 支持

如有问题，请通过以下方式联系：

- 📧 邮箱: support@example.com
- 🐛 问题反馈: [GitHub Issues](https://github.com/your-repo/issues)
- 💬 讨论交流: [GitHub Discussions](https://github.com/your-repo/discussions)

## 🔄 版本变更日志
### v0.0.5
- 增加脚本命令配置功能

### v0.0.4


### v0.0.3 (2025-12-10)
**🔐 用户认证功能**
- ✨ 新增基于JWT的用户登录认证系统
- ✨ 实现自动token刷新机制
- ✨ 添加路由级别权限控制
- ✨ 增加登录页面和认证状态管理
- 🛡 优化API请求拦截器，自动添加认证头
- 🔧 改造项目架构，支持认证模块化开发

**🎨 界面优化**
- 💫 优化用户界面，增加用户状态显示
- 🔄 完善登录/退出流程
- 📱 改进移动端认证体验

### v0.0.2 (2025-12-08)
**📁 分组基础路径功能**
- ✨ 分组增加基础更新路径配置
- 🔗 任务信息中的更新路径支持继承分组基础路径
- 📝 简化任务创建时的路径配置流程
- ⚡ 提升配置效率，减少重复设置
- 🐛 修复路径相关的显示和处理问题

**🔧 系统优化**
- 🎯 优化任务复制功能
- 🛠 改进分组管理操作体验
- 📊 完善任务列表筛选功能

### v0.0.1 (2024-07-17)
**🎉 基础功能实现**
- ✨ 实现完整的任务管理功能（增删改查）
- ✨ 新增分组管理模块，支持任务分组
- ✨ 支持WebSocket实时日志显示
- 📱 实现响应式设计，适配移动端
- 🔧 内置Mock服务器，支持开发环境测试
- 🎨 基于Ant Design Vue的现代化UI设计
- ⚡ 基于Vue 3 + Vite的现代化前端架构

**🔌 核心技术特性**
- 🌐 WebSocket实时通信
- 📊 任务状态实时监控
- 🗂️ 分组管理和筛选
- 📋 任务执行历史记录
- 🔄 自动重连机制

---

**⭐ 如果这个项目对你有帮助，请给个Star支持一下！**