# scpun-crawl-web

**Repository Path**: foolcn/scpun-crawl-web

## Basic Information

- **Project Name**: scpun-crawl-web
- **Description**: 通用爬虫管理平台的前端项目，基于 Vue 3 + Naive UI 构建的可视化管理界面。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-04-08
- **Last Updated**: 2026-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 黑蜘蛛 · 前端（scpun-crawl-web）

> **黑蜘蛛**通用爬虫管理平台的前端项目，基于 Vue 3 + Naive UI 构建的可视化管理界面。
<center>

[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://gitee.com/snove/scpun-crawl/blob/master/LICENSE)
[![Vue](https://img.shields.io/badge/Vue-3.5-brightgreen.svg)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)
[![Naive UI](https://img.shields.io/badge/Naive%20UI-2.40-purple.svg)](https://www.naiveui.com/)

</center>
---

## 关联仓库

本项目为前端仓库，需配合后端仓库一起使用：

| 仓库 | 地址 |
|------|------|
| **前端（本仓库）** | [gitee.com/snove/scpun-crawl-web](https://gitee.com/snove/scpun-crawl-web) |
| **后端** | [gitee.com/snove/scpun-crawl](https://gitee.com/snove/scpun-crawl) |

[![后端仓库](https://gitee.com/snove/scpun-crawl/widgets/widget_card.svg?colors=4183c4,ffffff,ffffff,e3e9ed,666666,9b9b9b)](https://gitee.com/snove/scpun-crawl)

---

## 界面预览

<table>
  <tr>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/login.png" alt="登录页" /><br/><sub>登录页</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/dashboard.png" alt="仪表盘" /><br/><sub>仪表盘</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/sites.png" alt="站点管理" /><br/><sub>站点管理</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/pipelineEditor.png" alt="管道编排" /><br/><sub>管道编排</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/pipelineTemplate.png" alt="管道模板" /><br/><sub>管道模板</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/task.png" alt="爬虫任务" /><br/><sub>爬虫任务</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/schedule.png" alt="定时调度" /><br/><sub>定时调度</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/dataSchema.png" alt="数据模式" /><br/><sub>数据模式</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/script.png" alt="脚本节点" /><br/><sub>脚本节点</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/plugin.png" alt="插件管理" /><br/><sub>插件管理</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/proxy.png" alt="代理池" /><br/><sub>代理池</sub></td>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/rolePermission.png" alt="角色权限" /><br/><sub>角色权限</sub></td>
  </tr>
  <tr>
    <td align="center"><img src="https://gitee.com/snove/scpun-crawl/raw/master/images/systemParams.png" alt="系统参数" /><br/><sub>系统参数</sub></td>
    <td></td>
    <td></td>
  </tr>
</table>

---

## 页面功能

| 页面 | 路由 | 说明 |
|------|------|------|
| 仪表盘 | `/dashboard` | 统计卡片、趋势图、最近任务 |
| 站点管理 | `/sites` | 站点 CRUD，卡片/列表双视图 |
| 管道编排 | `/sites/:id/pipeline` | 可视化节点拖拽编排 |
| 爬虫任务 | `/tasks` | 运行中实时监控、历史任务分页 |
| 定时调度 | `/schedules` | CRON 调度管理 + 执行日志 |
| 爬取数据 | `/data/:siteId` | 动态列展示、CSV/Excel/JSON 导出 |
| 数据模式 | `/schemas` | 字段定义管理 |
| 脚本节点 | `/scripts` | Groovy/Aviator 脚本管理 |
| 插件管理 | `/plugins` | JAR 上传安装、热加载 |
| 代理池 | `/proxy` | 代理管理、健康检查、统计图表 |
| 管道模板 | `/pipeline-templates` | 模板市场，一键应用到站点 |
| 用户管理 | `/system/users` | 用户 CRUD、角色分配 |
| 角色权限 | `/system/roles` | 角色权限配置 |
| 审计日志 | `/system/audit` | 操作日志查询 |
| 系统参数 | `/system/config` | 运行时参数配置 |

---

## 本地开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器（代理到本地后端 8080）
pnpm dev

# 类型检查
pnpm type-check

# 构建生产包
pnpm build
```

开发时后端默认代理地址为 `http://localhost:8080`，可在 `vite.config.ts` 中修改。

---

## 技术栈

- **框架：** Vue 3 + TypeScript
- **UI：** Naive UI
- **状态：** Pinia
- **路由：** Vue Router
- **HTTP：** Axios（含 401 自动刷新 token）
- **图表：** ECharts + vue-echarts
- **管道编排：** Vue Flow
- **构建：** Vite 6

---

## License

[Apache License 2.0](https://gitee.com/snove/scpun-crawl/blob/master/LICENSE) © 2026 scpun-crawl contributors

---

## 免责声明

本项目仅供学习、研究和合法的数据采集场景使用。使用者须自行确保爬取行为符合目标网站服务条款、`robots.txt` 协议及相关法律法规（包括但不限于《网络安全法》《数据安全法》《个人信息保护法》）。**因使用本项目产生的一切法律责任由使用者自行承担。**