# ShortVideoClient

**Repository Path**: na1717/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**: 108
- **Created**: 2026-06-08
- **Last Updated**: 2026-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 抖音短视频客户端

一个使用 PyQt6 开发的简易短视频客户端主界面，模仿抖音官网设计风格。

## 项目简介

本项目是一个教学演示项目，展示了如何使用 PyQt6 构建现代化的桌面应用程序界面。实现了经典的三栏布局（左侧边栏 + 顶部栏 + 主内容区），采用深色系主题风格，支持响应式视频卡片展示。

### 主要特性

- 🎨 **深色主题**：符合现代审美的深色UI设计
- 📱 **响应式布局**：自定义 FlowLayout 实现自动换行网格
- 🎯 **模块化设计**：清晰的代码结构，易于扩展
- 🖼️ **动态数据**：随机生成模拟视频数据
- ✨ **交互效果**：悬停、点击等交互动画

## 技术栈

- **Python 3.8+**
- **PyQt6 >= 6.6.0**

## 安装与运行

### 1. 安装依赖

```bash
pip install -r requirements.txt
```

### 2. 运行程序

```bash
cd src
python main.py
```

## 项目结构

```
ShortVideoClient/
├── src/
│   ├── main.py                    # 程序入口
│   ├── widgets/                   # UI组件包
│   │   ├── __init__.py
│   │   ├── main_window.py         # 主窗口
│   │   ├── sidebar.py             # 左侧边栏
│   │   ├── topbar.py              # 顶部栏
│   │   ├── video_card.py          # 视频卡片
│   │   └── flow_layout.py         # 流式布局管理器
│   ├── models/                    # 数据模型包
│   │   ├── __init__.py
│   │   └── video_model.py         # 视频数据模型
│   ├── images/                    # 图片资源
│   └── videos/                    # 视频资源
├── openspec/                      # OpenSpec 规范文档
├── requirements.txt               # 依赖列表
└── README.md                      # 项目说明
```

## 核心模块说明

### 1. 数据模型 (`models/video_model.py`)

- **VideoModel**: 视频数据类，包含视频路径、缩略图、标题等信息
- **VideoDataManager**: 数据管理器，负责生成随机模拟数据

### 2. UI组件 (`widgets/`)

- **FlowLayout**: 自定义流式布局管理器，实现响应式网格
- **VideoCard**: 视频卡片组件，显示缩略图和元信息
- **SideBar**: 左侧导航边栏
- **TopBar**: 顶部工具栏（Logo、搜索、登录）
- **MainWindow**: 主窗口，整合所有组件

### 3. 样式设计

采用 QSS (Qt Style Sheet) 实现全局样式管理：

- 主背景色：`#121212`
- 侧边栏/顶部栏：`#1E1E1E`
- 卡片背景：`#2D2D2D`
- 高亮红色：`#FE2C55`（抖音红）
- 文字颜色：白色 `#FFFFFF` / 灰色 `#B0B0B0`

## 功能说明

### 当前实现

✅ 三栏布局框架  
✅ 响应式视频卡片网格  
✅ 深色系主题样式  
✅ 模拟数据展示  
✅ 鼠标悬停效果  
✅ 菜单切换信号  
✅ 登录按钮交互  

### 后续扩展

❌ 视频播放功能  
❌ 网络数据请求  
❌ 用户认证系统  
❌ 真实搜索功能  
❌ 数据库持久化  

## 开发说明

### 添加新组件

1. 在 `src/widgets/` 目录下创建新的组件文件
2. 继承 `QWidget` 或相应的基类
3. 在 `__init__.py` 中导出新组件
4. 在 `MainWindow` 中集成使用

### 修改样式

全局样式在 `MainWindow._apply_styles()` 方法中定义，各组件也有独立的样式表。修改 QSS 字符串即可调整外观。

### 数据源替换

当前使用 `VideoDataManager` 生成模拟数据。要接入真实数据：

1. 修改 `VideoDataManager.generate_sample_videos()` 方法
2. 从 API 或数据库获取真实数据
3. 构造 `VideoModel` 对象列表返回

## 验收标准

- ✅ 主界面正常启动，无崩溃或异常
- ✅ 左侧边栏、顶部栏、主内容区完整显示且位置合理
- ✅ 视频卡片能根据窗口大小自动调整列数和换行
- ✅ 缩略图和文本信息正确显示
- ✅ 整体风格符合深色系 + 白色字体 + 红色高亮要求
- ✅ 代码结构清晰，便于后续扩展

## 学习资源

- [PyQt6 官方文档](https://www.riverbankcomputing.com/static/Docs/PyQt6/)
- [Qt Style Sheets 参考](https://doc.qt.io/qt-6/stylesheet-reference.html)
- [OpenSpec 方法论](https://openspec.dev/)

## 许可证

本项目仅用于教学和学习目的。

---

**注意**: 这是一个教学项目，重点在于展示 PyQt6 GUI 开发技术和规范驱动编程（SDD）流程。