6.8 KiB
6.8 KiB
📂 文件结构说明
完整目录树
web_client/
├── 📄 核心代码文件
│ ├── app.py # Flask应用主文件 (145行)
│ ├── templates/
│ │ └── index.html # 主页面模板 (255行)
│ ├── static/
│ │ ├── css/
│ │ │ └── style.css # 自定义样式 (219行)
│ │ ├── js/
│ │ │ └── main.js # 前端交互逻辑 (323行)
│ │ └── assets/ # 静态资源目录（图片等）
│ │
│ └── test_app.py # 单元测试 (145行)
│
├── 📋 配置文件
│ ├── requirements.txt # Python依赖
│ ├── .env.example # 环境配置示例
│ └── start.sh # 启动脚本（可执行）
│
└── 📚 文档文件
├── README.md # 项目说明
├── QUICKSTART.md # 快速启动指南
├── DEPLOYMENT.md # 部署指南
├── FEATURES.md # 功能特性详解
├── DEMO.md # 演示指南
├── PROJECT_OVERVIEW.md # 项目总览
├── SUMMARY.md # 项目完成总结
└── FILE_STRUCTURE.md # 本文档
文件详细说明
核心代码文件
1. app.py
作用: Flask应用主文件，提供Web服务和API接口
主要功能:
- Flask应用初始化
- CORS配置
- 路由定义
- API端点实现
- 错误处理
关键代码:
@app.route('/') # 主页面
@app.route('/api/health') # 健康检查
@app.route('/api/applications') # 获取应用列表
@app.route('/api/chat/send') # 发送消息
行数: 145行
2. templates/index.html
作用: 主页面HTML模板，定义界面结构
主要内容:
- HTML5文档结构
- Tailwind CSS配置
- 左侧用户信息面板
- 右侧对话区域
- 顶部导航栏
- 底部输入区域
关键元素:
<div class="particles"> <!-- 粒子背景 -->
<div class="user-bubble"> <!-- 用户消息气泡 -->
<div class="ai-bubble"> <!-- AI消息气泡 -->
<input id="message-input"> <!-- 消息输入框 -->
行数: 255行
3. static/css/style.css
作用: 自定义CSS样式，实现视觉效果和动画
主要内容:
- 全局样式
- 玻璃效果
- 霓虹边框
- 消息气泡样式
- 各种动画效果
- 响应式设计
关键动画:
@keyframes pulse /* 脉冲动画 */
@keyframes slideIn /* 滑入动画 */
@keyframes typing /* 打字动画 */
@keyframes float /* 浮动动画 */
@keyframes wave /* 波形动画 */
行数: 219行
4. static/js/main.js
作用: 前端JavaScript交互逻辑
主要功能:
- 粒子背景创建
- 消息发送和接收
- 打字指示器
- 快捷回复
- 主题切换
- 待办事项管理
- 事件绑定
关键函数:
createParticles() // 创建粒子背景
addMessage() // 添加消息
sendMessage() // 发送消息
showTypingIndicator() // 显示打字指示器
changeTheme() // 切换主题
行数: 323行
5. test_app.py
作用: 单元测试文件
测试内容:
- 主页面渲染
- 健康检查端点
- 应用列表端点
- 发送消息端点
- CORS头测试
- 静态文件访问
- 响应格式测试
测试用例: 9个 通过率: 100%
行数: 145行
配置文件
6. requirements.txt
作用: Python依赖包列表
依赖包:
Flask>=2.3.0
Flask-CORS>=4.0.0
requests>=2.31.0
python-dotenv>=1.0.0
7. .env.example
作用: 环境变量配置示例
配置项:
PORT=5000 # 服务端口
DEBUG=True # 调试模式
SECRET_KEY=... # Flask密钥
DEFAULT_APP_ID=15 # 默认应用ID
8. start.sh
作用: 一键启动脚本
功能:
- 检查Python环境
- 安装依赖
- 启动Flask服务
使用: ./start.sh
文档文件
9. README.md
作用: 项目主文档
内容:
- 项目介绍
- 特性列表
- 快速开始
- API集成
- 使用说明
10. QUICKSTART.md
作用: 快速启动指南
内容:
- 一键启动方法
- 访问地址
- 使用技巧
- 常见问题
11. DEPLOYMENT.md
作用: 部署指南
内容:
- Gunicorn部署
- uWSGI部署
- Docker部署
- Nginx配置
- Systemd服务
- 性能优化
- 安全建议
12. FEATURES.md
作用: 功能特性详解
内容:
- 界面布局说明
- 视觉效果详解
- 交互功能说明
- 响应式设计
- 性能优化
- 可访问性
13. DEMO.md
作用: 演示指南
内容:
- 演示步骤
- 功能演示
- API测试
- 性能测试
- 兼容性测试
14. PROJECT_OVERVIEW.md
作用: 项目总览
内容:
- 项目目标
- 完成情况
- 文件清单
- 设计还原度
- 技术实现
- 性能指标
15. SUMMARY.md
作用: 项目完成总结
内容:
- 交付物清单
- 功能实现清单
- 技术指标
- 还原度评估
- 项目亮点
- 后续建议
16. FILE_STRUCTURE.md
作用: 本文档，文件结构说明
文件统计
代码文件
- 总数: 5个
- 总行数: 1087行
- 语言: Python, HTML, CSS, JavaScript
配置文件
- 总数: 3个
- 类型: txt, example, sh
文档文件
- 总数: 8个
- 格式: Markdown
- 总字数: 约15000字
总计
- 文件总数: 16个
- 代码总行数: 1087行
- 文档总字数: 约15000字
文件依赖关系
app.py
├── 依赖 requirements.txt (Python包)
├── 依赖 .env.example (环境配置)
├── 使用 templates/index.html (页面模板)
└── 提供 static/* (静态文件)
templates/index.html
├── 引用 static/css/style.css (样式)
└── 引用 static/js/main.js (脚本)
static/js/main.js
└── 调用 app.py (API接口)
test_app.py
└── 测试 app.py (单元测试)
start.sh
└── 启动 app.py (启动脚本)
使用建议
开发时
- 修改
app.py- 后端逻辑 - 修改
templates/index.html- 页面结构 - 修改
static/css/style.css- 样式效果 - 修改
static/js/main.js- 前端交互
部署时
- 参考
DEPLOYMENT.md - 配置
.env(复制自.env.example) - 使用
start.sh或 Gunicorn
学习时
- 阅读
README.md- 了解项目 - 阅读
QUICKSTART.md- 快速上手 - 阅读
FEATURES.md- 深入了解功能 - 阅读
DEMO.md- 学习演示
文件结构清晰，易于维护！ ✅