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