209 lines
6.6 KiB
Markdown
209 lines
6.6 KiB
Markdown
# MetaCore Web版本 vs PyQt5版本功能对比
|
||
|
||
## 🎯 完整功能映射
|
||
|
||
### 1. 整体布局结构
|
||
|
||
| Web版本 | PyQt5版本 | 说明 |
|
||
|---------|-----------|------|
|
||
| `<div class="sidebar">` | `Sidebar(QWidget)` | 左侧导航栏 |
|
||
| `<div class="main-content">` | `ProjectArea(QWidget)` | 主内容区域 |
|
||
| CSS Grid布局 | QGridLayout | 项目卡片网格布局 |
|
||
| CSS Flexbox | QHBoxLayout/QVBoxLayout | 弹性布局 |
|
||
|
||
### 2. 侧边栏功能
|
||
|
||
| Web版本功能 | PyQt5实现 | 对应文件 |
|
||
|-------------|-----------|----------|
|
||
| Logo区域 | `create_logo_section()` | `ui/sidebar.py` |
|
||
| 创建项目按钮 | `QPushButton("➕ 创建新项目")` | `ui/sidebar.py` |
|
||
| 导入项目按钮 | `QPushButton("📤 导入项目")` | `ui/sidebar.py` |
|
||
| 导航菜单 | `create_navigation_menu()` | `ui/sidebar.py` |
|
||
| 可展开分组 | `create_nav_section()` | `ui/sidebar.py` |
|
||
| 用户信息 | `create_user_info()` | `ui/sidebar.py` |
|
||
|
||
### 3. 项目卡片功能
|
||
|
||
| Web版本 | PyQt5版本 | 实现细节 |
|
||
|---------|-----------|----------|
|
||
| 三段式布局 | `create_grid_layout()` | 头部+图片+底部 |
|
||
| 项目标题 | `QLabel(project.title)` | 支持文字省略 |
|
||
| 三点菜单 | `QPushButton("⋮")` | 右键菜单触发 |
|
||
| 项目图标 | `QLabel(project.image)` | Emoji图标显示 |
|
||
| 类型标签 | `QLabel(type_label)` | 紫色背景标签 |
|
||
| 收藏星星 | `QLabel("⭐")` | 条件显示 |
|
||
| 项目时间 | `QLabel(project.date)` | 底部居中显示 |
|
||
| 悬停效果 | `enterEvent/leaveEvent` | 边框高亮效果 |
|
||
|
||
### 4. 右键菜单功能
|
||
|
||
| Web版本菜单项 | PyQt5实现 | 功能说明 |
|
||
|---------------|-----------|----------|
|
||
| 📁 打开项目 | `open_action` | 项目打开功能 |
|
||
| ✏️ 重命名 | `rename_action` | 项目重命名 |
|
||
| 📋 复制项目 | `duplicate_action` | 项目复制 |
|
||
| 📤 导出项目 | `export_action` | 项目导出 |
|
||
| ⭐ 收藏/取消收藏 | `favorite_action` | 收藏状态切换 |
|
||
| 🗑️ 删除项目 | `delete_action` | 项目删除确认 |
|
||
|
||
### 5. 创建项目对话框
|
||
|
||
| Web版本元素 | PyQt5组件 | 布局比例 |
|
||
|-------------|-----------|----------|
|
||
| 模板选择区域 | `create_template_section()` | 2/3宽度 |
|
||
| 项目信息区域 | `create_project_info_section()` | 1/3宽度 |
|
||
| 模板网格 | `QGridLayout(2列)` | 2列模板布局 |
|
||
| 项目名称输入 | `QLineEdit` | 表单输入 |
|
||
| 项目描述输入 | `QTextEdit` | 多行文本 |
|
||
| 位置选择 | `QFileDialog.getExistingDirectory()` | 系统文件夹选择 |
|
||
| 浏览按钮 | `QPushButton("📁")` | 文件夹图标 |
|
||
|
||
### 6. 搜索和过滤功能
|
||
|
||
| Web版本 | PyQt5版本 | 实现方式 |
|
||
|---------|-----------|----------|
|
||
| 搜索框 | `QLineEdit` | 实时搜索 |
|
||
| 视图切换 | `QPushButton` (网格/列表) | 可选择按钮组 |
|
||
| 类型过滤 | `QComboBox` | 下拉选择 |
|
||
| 排序选项 | `QComboBox` | 排序方式选择 |
|
||
|
||
## 🎨 样式系统对比
|
||
|
||
### CSS vs PyQt5样式表
|
||
|
||
| Web版本CSS | PyQt5样式表 | 效果 |
|
||
|------------|-------------|------|
|
||
| `.project-card` | `#projectCard` | 项目卡片样式 |
|
||
| `.project-card:hover` | `#projectCard[hover="true"]` | 悬停效果 |
|
||
| `background: #2a2a2a` | `background-color: #2a2a2a` | 背景色 |
|
||
| `border-radius: 12px` | `border-radius: 12px` | 圆角 |
|
||
| `transition: all 0.2s` | 通过事件处理实现 | 过渡动画 |
|
||
|
||
### 颜色主题完全一致
|
||
|
||
| 颜色用途 | 颜色值 | Web版本 | PyQt5版本 |
|
||
|----------|--------|---------|-----------|
|
||
| 主背景 | #1a1a1a | ✅ | ✅ |
|
||
| 卡片背景 | #2a2a2a | ✅ | ✅ |
|
||
| 边框色 | #3a3a3a | ✅ | ✅ |
|
||
| 强调色 | #8b5cf6 | ✅ | ✅ |
|
||
| 文字色 | #ffffff | ✅ | ✅ |
|
||
|
||
## 🔧 技术实现对比
|
||
|
||
### 1. 数据管理
|
||
|
||
| 方面 | Web版本 | PyQt5版本 |
|
||
|------|---------|-----------|
|
||
| 数据存储 | JavaScript数组 | Python列表 + JSON文件 |
|
||
| 数据持久化 | localStorage | 文件系统 |
|
||
| 数据结构 | JavaScript对象 | Python类 |
|
||
| 状态管理 | 直接操作DOM | 信号槽机制 |
|
||
|
||
### 2. 事件处理
|
||
|
||
| 事件类型 | Web版本 | PyQt5版本 |
|
||
|----------|---------|-----------|
|
||
| 点击事件 | `addEventListener('click')` | `clicked.connect()` |
|
||
| 悬停事件 | CSS `:hover` | `enterEvent/leaveEvent` |
|
||
| 键盘事件 | `keydown/keyup` | `keyPressEvent` |
|
||
| 拖拽事件 | HTML5 Drag API | `dragEnterEvent/dropEvent` |
|
||
|
||
### 3. 布局系统
|
||
|
||
| 布局方式 | Web版本 | PyQt5版本 |
|
||
|----------|---------|-----------|
|
||
| 弹性布局 | CSS Flexbox | QHBoxLayout/QVBoxLayout |
|
||
| 网格布局 | CSS Grid | QGridLayout |
|
||
| 绝对定位 | CSS position | setGeometry() |
|
||
| 响应式 | CSS媒体查询 | 布局管理器自适应 |
|
||
|
||
## 🚀 功能增强
|
||
|
||
### PyQt5版本独有优势
|
||
|
||
1. **系统集成**
|
||
- 原生文件对话框
|
||
- 系统通知支持
|
||
- 任务栏集成
|
||
- 系统托盘支持
|
||
|
||
2. **性能优化**
|
||
- 原生渲染性能
|
||
- 内存管理更好
|
||
- 大量数据处理能力
|
||
- 多线程支持
|
||
|
||
3. **桌面特性**
|
||
- 快捷键支持
|
||
- 窗口管理
|
||
- 多显示器支持
|
||
- 离线使用
|
||
|
||
### 可扩展功能
|
||
|
||
1. **文件系统集成**
|
||
```python
|
||
# 直接操作文件系统
|
||
import os, shutil
|
||
def copy_project_files(src, dst):
|
||
shutil.copytree(src, dst)
|
||
```
|
||
|
||
2. **数据库支持**
|
||
```python
|
||
# 可以集成SQLite等数据库
|
||
import sqlite3
|
||
def save_to_database(project):
|
||
# 数据库操作
|
||
pass
|
||
```
|
||
|
||
3. **插件系统**
|
||
```python
|
||
# 动态加载插件
|
||
import importlib
|
||
def load_plugin(plugin_name):
|
||
return importlib.import_module(f'plugins.{plugin_name}')
|
||
```
|
||
|
||
## 📱 使用体验对比
|
||
|
||
### 启动和运行
|
||
|
||
| 方面 | Web版本 | PyQt5版本 |
|
||
|------|---------|-----------|
|
||
| 启动方式 | 浏览器打开HTML | 运行Python脚本 |
|
||
| 依赖环境 | 现代浏览器 | Python + PyQt5 |
|
||
| 安装过程 | 无需安装 | pip install PyQt5 |
|
||
| 更新方式 | 刷新页面 | 重新运行程序 |
|
||
|
||
### 用户交互
|
||
|
||
| 交互方式 | Web版本 | PyQt5版本 |
|
||
|----------|---------|-----------|
|
||
| 响应速度 | 依赖浏览器 | 原生应用速度 |
|
||
| 动画效果 | CSS动画 | Qt动画系统 |
|
||
| 拖拽操作 | HTML5 API | Qt拖拽系统 |
|
||
| 右键菜单 | 自定义实现 | 原生菜单 |
|
||
|
||
## 🎯 总结
|
||
|
||
PyQt5版本完全复制了Web版本的所有功能和视觉效果，同时提供了更好的桌面应用体验：
|
||
|
||
### ✅ 完全实现的功能
|
||
- 所有UI组件和布局
|
||
- 所有交互功能
|
||
- 完整的样式主题
|
||
- 数据管理和持久化
|
||
- 搜索和过滤功能
|
||
- 项目CRUD操作
|
||
|
||
### 🚀 额外优势
|
||
- 原生桌面应用性能
|
||
- 系统级文件操作
|
||
- 更好的用户体验
|
||
- 扩展性更强
|
||
|
||
这个PyQt5版本不仅是Web版本的完美移植，更是一个功能更强大的桌面应用程序。
|