222 lines
4.4 KiB
Markdown
222 lines
4.4 KiB
Markdown
|
# 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的重构
|
|||
|
|
- 实现核心功能模块
|
|||
|
|
- 支持响应式设计
|
|||
|
|
|