# ShortVideoClient **Repository Path**: Caire/ShortVideoClient ## Basic Information - **Project Name**: ShortVideoClient - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 109 - **Created**: 2026-06-08 - **Last Updated**: 2026-06-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 抖音短视频客户端 (PyQt6) [![Python](https://img.shields.io/badge/Python-3.8+-blue.svg)](https://www.python.org/) [![PyQt6](https://img.shields.io/badge/PyQt6-6.x-green.svg)](https://www.riverbankcomputing.com/static/Docs/PyQt6/) [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) 一个使用 PyQt6 开发的桌面端短视频客户端，模仿抖音官网设计，采用深色系主题、三栏布局和响应式视频卡片网格。 --- ## 📸 界面预览 ``` ┌─────────────────────────────────────────────────────────┐ │ [抖音Logo] [搜索视频或作者... ] [登录] │ ├──────┬──────────────────────────────────────────────────┤ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ 精选 │ │[缩略图]│ │[缩略图]│ │[缩略图]│ │ │ │ │ ▶ │ │ ▶ │ │ ▶ │ │ │ 推荐 │ ├────────┤ ├────────┤ ├────────┤ │ │ │ │标题... │ │标题... │ │标题... │ │ │ 搜索 │ │@作者·2h│ │@作者·5h│ │@作者·1d│ │ │ │ │❤️ 💬 ↗️│ │❤️ 💬 ↗️│ │❤️ 💬 ↗️│ │ │ │ └────────┘ └────────┘ └────────┘ │ │ │ │ │ │ ┌────────┐ ┌────────┐ │ │ │ │[缩略图]│ │[缩略图]│ ... │ │ │ └────────┘ └────────┘ │ └──────┴──────────────────────────────────────────────────┘ ``` --- ## ✨ 核心功能 - 🎨 **深色主题**：精心设计的深色配色方案（#121212 / #FFFFFF / #FE2C55） - 📐 **三栏布局**：左侧边栏 + 顶部栏 + 主内容区 - 📱 **响应式网格**：视频卡片根据窗口宽度自动调整列数 - 🖱️ **交互效果**：悬浮阴影、点击展开播放器、实时搜索 - 🔍 **实时搜索**：输入即搜，防抖机制，匹配标题和作者 - 🔐 **模拟登录**：简单的登录对话框弹窗 - ⚡ **异步加载**：后台线程加载图片，避免 UI 卡顿 - 🎬 **视频播放**：集成 QtMultimedia 播放器 --- ## 🚀 快速开始 ### 方式一：双击运行脚本（推荐） ```bash # Windows 用户直接双击 run.bat ``` ### 方式二：命令行启动 ```bash # 1. 安装依赖 pip install PyQt6 # 2. 运行应用 cd src python main.py ``` --- ## 📋 系统要求 - **Python**: 3.8 或更高版本 - **操作系统**: Windows / macOS / Linux - **依赖库**: PyQt6 --- ## 📂 项目结构 ``` ShortVideoClient/ ├── src/ # 源代码目录 │ ├── main.py # 应用入口 │ ├── widgets/ # UI 组件 │ │ ├── main_window.py # 主窗口容器 │ │ ├── sidebar.py # 左侧边栏 │ │ ├── topbar.py # 顶部栏 │ │ ├── video_card.py # 视频卡片 │ │ ├── video_grid.py # 视频网格 │ │ ├── player_overlay.py # 播放器覆盖层 │ │ └── login_dialog.py # 登录对话框 │ ├── layouts/ # 自定义布局 │ │ └── flow_layout.py # 流式布局引擎 │ ├── models/ # 数据模型 │ │ └── video_model.py # 视频数据管理 │ ├── utils/ # 工具函数 │ │ └── image_loader.py # 异步图片加载 │ ├── images/ # 图片资源 │ └── videos/ # 视频文件 ├── config/ # 配置文件 │ └── videos.json # 视频元数据配置 ├── styles/ # 样式表 │ └── theme.qss # 深色主题 QSS ├── openspec/ # OpenSpec 工件 │ └── changes/ │ └── douyin-client-main-ui/ │ ├── proposal.md # 提案文档 │ ├── design.md # 技术设计 │ ├── specs/ # 功能规格 │ └── tasks.md # 任务清单 ├── run.bat # Windows 启动脚本 ├── TEST_GUIDE.md # 测试指南 └── IMPLEMENTATION_SUMMARY.md # 实施总结 ``` --- ## 🎯 功能演示 ### 1. 响应式布局 拖动窗口边缘改变大小，视频卡片会自动调整每行数量： - 宽屏（>1600px）：4-5 列 - 中屏（1200-1600px）：3-4 列 - 窄屏（800-1200px）：2-3 列 - 最小（<800px）：1-2 列 ### 2. 实时搜索 在顶部搜索框输入关键词，即时过滤视频： ``` 输入："舞蹈" → 显示标题或作者包含"舞蹈"的视频 输入："小明" → 显示作者为"小明"的视频 ``` ### 3. 视频播放 点击任意视频卡片，在当前页面展开播放器： ``` 点击卡片 → 隐藏网格 → 显示播放器 → 自动播放 点击关闭 → 停止播放 → 返回网格视图 ``` --- ## ⚙️ 配置说明 ### 添加新视频 编辑 `config/videos.json`： ```json { "videos": [ { "id": "v006", "path": "src/videos/sample6.mp4", "thumbnail": "src/images/card6.jpeg", "title": "你的视频标题", "author": "作者名称", "publish_time": "发布时间", "likes": 999, "comments": 88 } ] } ``` ### 修改主题颜色 编辑 `styles/theme.qss`，修改配色变量： ```css /* 背景色 */ background-color: #121212; /* 强调色 */ color: #FE2C55; ``` --- ## 🧪 测试 查看详细的测试指南：[TEST_GUIDE.md](TEST_GUIDE.md) ### 快速测试清单 - [ ] 应用正常启动 - [ ] 三栏布局显示正确 - [ ] 鼠标悬停卡片有阴影效果 - [ ] 点击卡片展开播放器 - [ ] 搜索框输入能过滤视频 - [ ] 登录按钮弹出对话框 - [ ] 窗口调整时卡片自动重排 --- ## 🛠️ 开发指南 ### 代码架构 本项目采用模块化设计： ``` UI 层 (widgets/) ↓ 使用 布局层 (layouts/) ↓ 管理 数据层 (models/) ↓ 加载 工具层 (utils/) ``` ### 信号槽通信 ```python # 示例：侧边栏切换页面 SidebarWidget.page_changed.connect(MainWindow._on_page_changed) # 示例：搜索过滤 TopBarWidget.search_changed.connect(MainWindow._on_search_changed) # 示例：卡片点击 VideoCardWidget.clicked.connect(VideoGridWidget._on_card_clicked) ``` ### 添加新功能 1. 在对应的模块目录下创建新文件 2. 在 `__init__.py` 中导出类/函数 3. 在主窗口中集成新组件 4. 更新本文档 --- ## 📚 学习资源 - [PyQt6 官方文档](https://www.riverbankcomputing.com/static/Docs/PyQt6/) - [Qt for Python](https://doc.qt.io/qtforpython/) - [QSS 样式表指南](https://doc.qt.io/qt-6/stylesheet-reference.html) - [OpenSpec 方法论](openspec/config.yaml) --- ## 🤝 贡献 欢迎提交 Issue 和 Pull Request！ 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request --- ## 📄 许可证 本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件 --- ## 👥 作者 - **学生开发者** - 通过本项目学习 PyQt6 和 SDD 流程 - **课程教师** - 指导者和验收者 --- ## 🙏 致谢 - PyQt6 团队提供的优秀框架 - OpenSpec 规范驱动开发方法论 - 抖音官网的设计灵感 --- ## 📞 联系方式 如有问题或建议，请提交 Issue 或联系项目维护者。 --- **祝你使用愉快！** 🎉