XinXiKuaiBaoYuan/vue-info-reporter

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

安装依赖

npm install

或使用 yarn:

yarn install

开发模式

npm run dev

或使用 yarn:

yarn dev

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

构建生产版本

npm run build

或使用 yarn:

yarn build

预览生产版本

npm run preview

或使用 yarn:

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进行状态管理：

import { useAppStore } from '@/stores/app'

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

部署说明

静态部署

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

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