# Vue信息快报员

一个基于Vue3的智能信息采集与分析平台，从静态HTML页面重构而来。

## 功能特性

- 📊 **智能任务管理** - 创建、监控和管理信息采集任务
- 📈 **数据分析报告** - 自动生成各类分析报告和数据洞察
- 🎯 **实时监控** - 实时监控任务状态和系统性能
- 📱 **响应式设计** - 完美支持桌面端和移动端
- 🔧 **灵活配置** - 丰富的系统设置和个人偏好配置

## 技术栈

- **前端框架**: Vue 3 + TypeScript
- **构建工具**: Vite
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **UI样式**: Tailwind CSS
- **工具库**: VueUse

## 项目结构

```
src/
├── components/          # 可复用组件
│   ├── icons/          # 图标组件
│   ├── Sidebar.vue     # 侧边栏组件
│   ├── TaskCard.vue    # 任务卡片组件
│   ├── TaskManager.vue # 任务管理器组件
│   ├── ReportItem.vue  # 报告项组件
│   └── ReportDrawer.vue # 报告抽屉组件
├── views/              # 页面组件
│   ├── Dashboard.vue   # 工作台
│   ├── Tasks.vue       # 任务管理页面
│   ├── Reports.vue     # 报告中心页面
│   ├── Analytics.vue   # 数据分析页面
│   └── Settings.vue    # 设置页面
├── stores/             # 状态管理
│   └── app.ts         # 应用状态
├── types/              # 类型定义
│   └── index.ts       # 全局类型
├── router/             # 路由配置
│   └── index.ts       # 路由定义
├── App.vue            # 根组件
├── main.ts            # 应用入口
└── style.css          # 全局样式
```

## 安装运行

### 环境要求

- Node.js >= 16
- npm >= 7 或 yarn >= 1.22

### 安装依赖

```bash
npm install
```

或使用 yarn:

```bash
yarn install
```

### 开发模式

```bash
npm run dev
```

或使用 yarn:

```bash
yarn dev
```

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

### 构建生产版本

```bash
npm run build
```

或使用 yarn:

```bash
yarn build
```

### 预览生产版本

```bash
npm run preview
```

或使用 yarn:

```bash
yarn preview
```

## 主要功能

### 1. 工作台 (Dashboard)
- 系统概览统计
- 任务状态监控
- 最近报告展示
- 系统性能指标

### 2. 任务管理 (Tasks)
- 任务创建和编辑
- 任务状态监控
- 任务执行控制
- 任务报告查看

### 3. 报告中心 (Reports)
- 报告列表展示
- 报告分类筛选
- 报告详情查看
- 报告导出下载

### 4. 数据分析 (Analytics)
- 系统性能分析
- 任务执行统计
- 用户行为分析
- 数据可视化图表

### 5. 系统设置 (Settings)
- 用户信息管理
- 系统参数配置
- 安全设置管理
- API接口配置

## 组件说明

### 核心组件

- **Sidebar**: 侧边栏导航，支持折叠和移动端适配
- **TaskManager**: 任务管理核心组件，支持标签页切换和侧边栏模式
- **TaskCard**: 任务卡片组件，展示任务信息和操作
- **ReportDrawer**: 报告详情抽屉，支持报告浏览和操作
- **ReportItem**: 报告列表项组件

### 状态管理

使用Pinia进行状态管理，主要包括：
- 应用UI状态（侧边栏、标签页等）
- 任务数据管理
- 报告数据管理
- 用户交互状态

## 开发指南

### 添加新页面

1. 在 `src/views/` 目录下创建新的Vue组件
2. 在 `src/router/index.ts` 中添加路由配置
3. 在 `src/stores/app.ts` 中更新侧边栏菜单项

### 添加新组件

1. 在 `src/components/` 目录下创建组件文件
2. 按需导入到父组件中使用
3. 如果是全局组件，在 `src/main.ts` 中注册

### 状态管理

使用Pinia store进行状态管理：
```typescript
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
const { tasks, reports } = storeToRefs(appStore)
const { addTask, updateTask } = appStore
```

## 部署说明

### 静态部署

构建完成后，将 `dist` 目录部署到静态服务器即可。

### Nginx配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT License

## 更新日志

### v1.0.0 (2024-01-15)
- 初始版本发布
- 完成从静态HTML到Vue3的重构
- 实现核心功能模块
- 支持响应式设计