上传 frontend 文件夹

2025-11-27 18:32:24 +08:00
parent 51096cc21d
commit 46de43ce72
7 changed files with 3399 additions and 0 deletions
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,222 @@
+# 🚀 微信公众号文章爬虫系统 - 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支持一下！**