# 🚀 微信公众号文章爬虫系统 - Web界面

一个现代化的Web界面，用于管理微信公众号文章爬虫功能。

## 📋 功能特性

### 🍪 Cookie 配置
- 便捷的Cookie输入和保存
- Cookie示例和验证
- 实时状态反馈

### 📄 下载单篇文章  
- 支持微信文章链接输入
- 可选择保存图片和内容
- 实时下载进度显示

### 📋 获取文章列表
- Access Token URL输入
- 自定义获取页数
- 批量文章信息获取

### 📦 批量下载文章
- 公众号名称或链接输入
- 批量下载文章详情
- 智能进度跟踪

### 📊 数据管理
- 已下载数据概览
- 文章统计信息
- 快速文件夹访问

## 🛠 使用方法

### 方法1：快速启动（推荐）

1. **双击启动脚本**
   ```
   start_web.bat
   ```

2. **自动打开浏览器**
   - 系统会自动检测Python或使用PowerShell
   - 默认地址：`http://localhost:8000` 或 `http://localhost:8080`

### 方法2：手动启动

#### 使用Python（推荐）
```bash
cd frontend
python -m http.server 8000
```

#### 使用Node.js
```bash
cd frontend  
npx http-server -p 8000
```

#### 使用其他Web服务器
- 将frontend文件夹作为Web根目录即可

## 🎮 界面使用说明

### 主界面
- **功能卡片**：点击不同卡片进入对应功能
- **现代UI**：响应式设计，支持桌面和移动端
- **状态指示**：实时显示操作状态和进度

### Cookie配置页面
1. 点击"Cookie 配置"卡片
2. 粘贴从Fiddler获取的Cookie内容
3. 点击"保存Cookie"按钮
4. 等待保存成功提示

### 下载单篇文章
1. 进入"下载单篇文章"功能
2. 输入微信文章完整链接
3. 选择是否保存图片和内容
4. 点击"开始下载"查看进度

### 获取文章列表
1. 进入"获取文章列表"功能
2. 粘贴包含认证参数的完整URL
3. 设置获取页数（可选）
4. 点击"开始获取"执行任务

### 批量下载
1. 进入"批量下载文章"功能
2. 输入公众号名称或任意文章链接
3. 选择保存选项
4. 点击"开始批量下载"

### 数据管理
1. 进入"数据管理"功能
2. 点击"刷新列表"查看已下载数据
3. 可以查看文章详情或打开文件夹

## 🎨 界面特性

### 响应式设计
- ✅ 桌面端优化体验
- ✅ 平板和手机端兼容
- ✅ 自适应布局

### 现代化UI
- 🎨 渐变色彩搭配
- 💫 平滑动画效果
- 📱 卡片式设计语言
- 🌟 悬停交互反馈

### 交互体验
- ⌨️ 快捷键支持（ESC返回，Ctrl+Enter执行）
- 🔄 实时进度条
- 📊 状态指示器
- 🔔 操作反馈提示

## 🔧 技术架构

### 前端技术栈
- **HTML5**: 现代语义化标记
- **CSS3**: Flexbox/Grid + 动画
- **JavaScript**: ES6+ + jQuery
- **响应式**: Mobile-First设计

### 文件结构
```
frontend/
├── index.html          # 主页面
├── css/
│   └── style.css       # 样式文件
├── js/
│   └── app.js          # 应用逻辑
├── start_web.bat       # 启动脚本
└── README.md           # 说明文档
```

### 与后端交互
- 目前为演示版本，使用前端模拟
- 预留了完整的API接口结构
- 支持与命令行程序集成

## 🚀 部署选项

### 本地开发
```bash
# 克隆项目
cd frontend

# 启动开发服务器
python -m http.server 8000
# 或
npx http-server -p 8000
```

### 生产环境
- **Nginx**: 部署静态文件
- **Apache**: 配置虚拟主机  
- **IIS**: Windows服务器部署
- **Docker**: 容器化部署

## 📊 浏览器兼容性

| 浏览器 | 版本 | 支持状态 |
|--------|------|---------|
| Chrome | 60+ | ✅ 完全支持 |
| Firefox | 55+ | ✅ 完全支持 |
| Safari | 12+ | ✅ 完全支持 |  
| Edge | 79+ | ✅ 完全支持 |
| IE | 11 | ⚠️ 基础支持 |

## 🐛 常见问题

### Q: 页面打不开或样式异常？
A: 确保所有文件在同一目录下，使用HTTP服务器访问（不是file://协议）

### Q: 功能按钮点击无反应？
A: 检查浏览器控制台是否有JavaScript错误，确保jQuery正常加载

### Q: 进度条不显示？
A: 当前为演示版本，进度为模拟效果。实际部署需要连接后端API

### Q: 如何连接实际的后端？
A: 修改`js/app.js`中的API调用部分，替换模拟逻辑为实际HTTP请求

## 🔮 后续计划

### v1.1 计划功能
- [ ] 真实后端API集成
- [ ] WebSocket实时通信
- [ ] 文件上传拖拽功能
- [ ] 任务队列管理

### v1.2 计划功能  
- [ ] 用户认证系统
- [ ] 多公众号管理
- [ ] 数据可视化图表
- [ ] 导出功能增强

## 📄 开源协议

本项目仅供学习和研究使用，请遵守相关法律法规和服务条款。

## 🤝 贡献指南

1. Fork 本项目
2. 创建功能分支
3. 提交更改
4. 发起 Pull Request

## 📞 支持联系

如有问题或建议，请通过以下方式联系：

- 📧 邮箱: your-email@example.com
- 💬 Issues: 在GitHub提交Issue
- 📱 QQ群: 123456789

---

**⚠️ 免责声明**: 本工具仅供学习交流使用，请遵守相关法律法规和平台服务条款。使用者需自行承担使用风险。

**🌟 如果这个项目对您有帮助，请给个Star支持一下！**