Update README.md for enhanced clarity and feature overview

- Renamed project to "多平台媒体管理系统" and improved project description.
- Organized features into core functionalities and client-specific features with clearer headings.
- Added visual elements including a logo and interface preview.
- Updated technology stack section with detailed versioning and descriptions.
- Enhanced installation and setup instructions for better user guidance.
- Included new sections for shortcuts and API endpoints for improved developer experience.

README.md

@@ -1,66 +1,91 @@
-# 多自媒体平台账号管理系统
+# 多平台媒体管理系统
 
-一个功能强大的多自媒体平台账号管理系统，支持视频自动发布、评论统一管理、数据分析等功能。
+<p align="center">
+  <img src="client/public/favicon.svg" width="128" height="128" alt="Logo">
+</p>
 
-## 功能特性
+<p align="center">
+  一个功能强大的多自媒体平台账号管理系统，支持视频自动发布、评论统一管理、数据分析等功能。
+</p>
 
-- **多平台支持**: 抖音、快手、视频号、小红书、B站、头条号、百家号、企鹅号、大鱼号
-- **账号管理**: 多平台账号添加、分组管理、登录状态监控
+## ✨ 功能特性
+
+### 核心功能
+- **多平台支持**: 抖音、快手、视频号、小红书、B站等主流平台
+- **账号管理**: 多平台账号添加、浏览器扫码登录、登录状态监控
 - **视频发布**: 单视频多平台一键发布、批量发布、定时发布
 - **评论管理**: 多平台评论聚合、一键回复、批量回复
 - **数据分析**: 多平台数据汇总、趋势分析、数据导出
-- **团队协作**: 用户角色管理、权限控制、操作审计
-- **多端同步**: 同一账号在不同设备登录数据实时同步
+- **作品同步**: 自动同步各平台作品数据和评论
+
+### 客户端特性
+- **标签页管理**: 多标签页切换，支持右键菜单操作
+- **系统托盘**: 最小化到托盘，后台持续运行
+- **快捷键支持**: `Ctrl+W` 关闭当前标签页
+- **内嵌浏览器**: 平台扫码登录，无需外部浏览器
+- **任务队列**: 实时显示后台任务进度
+- **自定义标题栏**: 现代化无边框窗口设计
+
+## 📸 界面预览
 
-## 系统架构
+- 浅色主题设计，简洁优雅
+- 可折叠侧边栏，平滑动画过渡
+- 响应式布局，自适应不同窗口尺寸
+
+## 🏗️ 系统架构
 
 ```
 ┌─────────────────────────────────────────────────────────────┐
 │                    桌面客户端 (Electron + Vue3)              │
+│              标签页系统 | 系统托盘 | 内嵌浏览器               │
 ├─────────────────────────────────────────────────────────────┤
 │                    HTTP/WebSocket 通信                       │
 ├─────────────────────────────────────────────────────────────┤
 │                    后端服务 (Express + TypeORM)              │
 ├──────────────────┬──────────────────┬───────────────────────┤
 │   Playwright     │    定时调度器     │    WebSocket 服务     │
-│   自动化引擎      │   (node-schedule) │   (实时同步)          │
+│   自动化引擎      │   (node-schedule) │   (实时任务通知)      │
 ├──────────────────┴──────────────────┴───────────────────────┤
 │              MySQL + Redis 数据存储                          │
 └─────────────────────────────────────────────────────────────┘
 ```
 
-## 技术栈
+## 🛠️ 技术栈
 
 ### 客户端
-- Electron 28+
-- Vue 3.4+
-- TypeScript 5+
-- Element Plus
-- Pinia
-- Vue Router
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| Electron | 28+ | 桌面应用框架 |
+| Vue | 3.4+ | 前端框架 |
+| TypeScript | 5+ | 类型安全 |
+| Element Plus | 2.4+ | UI 组件库 |
+| Pinia | 2+ | 状态管理 |
+| ECharts | 5+ | 图表库 |
+| SCSS | - | 样式预处理 |
 
 ### 服务端
-- Node.js 20+
-- Express
-- TypeORM
-- Playwright
-- WebSocket (ws)
-- node-schedule
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| Node.js | 20+ | 运行时 |
+| Express | 4+ | Web 框架 |
+| TypeORM | 0.3+ | ORM 框架 |
+| Playwright | 1.40+ | 浏览器自动化 |
+| WebSocket | ws | 实时通信 |
+| node-schedule | - | 定时任务 |
 
 ### 数据库
 - MySQL 8.0+
-- Redis 7+
+- Redis 7+ (可选，用于缓存)
 
-## 快速开始
+## 🚀 快速开始
 
 ### 环境要求
 
 - Node.js >= 20.0.0
 - pnpm >= 8.0.0
 - MySQL 8.0+
-- Redis 7+
 
-### 安装依赖
+### 安装
 
 ```bash
 # 克隆项目
@@ -85,25 +110,23 @@ CREATE DATABASE media_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
 mysql -u root -p media_manager < database/schema.sql
 ```
 
-3. 配置服务端环境变量：
+3. 配置环境变量：
 
 ```bash
 cd server
 cp .env.example .env
-# 编辑 .env 文件，填入数据库和 Redis 配置
+# 编辑 .env 文件，填入数据库配置
 ```
 
 ### 启动开发服务
 
 ```bash
-# 启动后端服务
-pnpm dev:server
-
-# 启动客户端（新终端窗口）
-pnpm dev:client
-
-# 或同时启动
+# 同时启动前后端
 pnpm dev
+
+# 或分别启动
+pnpm dev:server  # 启动后端
+pnpm dev:client  # 启动客户端（新终端）
 ```
 
 ### 默认账号
@@ -111,100 +134,162 @@ pnpm dev
 - 用户名: `admin`
 - 密码: `admin123`
 
-## 项目结构
+## 📁 项目结构
 
 ```
 multi-platform-media-manage/
-├── client/                 # 桌面客户端
-│   ├── electron/          # Electron 主进程
-│   ├── src/               # Vue 渲染进程
-│   │   ├── views/         # 页面组件
-│   │   ├── components/    # 公共组件
-│   │   ├── stores/        # Pinia 状态管理
-│   │   ├── api/           # API 请求
-│   │   └── router/        # 路由配置
+├── client/                     # 桌面客户端
+│   ├── electron/              # Electron 主进程
+│   │   ├── main.ts           # 主进程入口（窗口、托盘）
+│   │   └── preload.ts        # 预加载脚本
+│   ├── public/               # 静态资源
+│   │   └── favicon.svg       # 应用图标
+│   ├── build/                # 打包资源
+│   │   └── icon.svg          # 打包图标源文件
+│   ├── src/
+│   │   ├── views/            # 页面组件
+│   │   ├── components/       # 公共组件
+│   │   │   ├── BrowserTab.vue      # 内嵌浏览器
+│   │   │   └── TaskProgressDialog  # 任务进度
+│   │   ├── layouts/          # 布局组件
+│   │   │   └── MainLayout.vue      # 主布局（标签页）
+│   │   ├── stores/           # Pinia 状态管理
+│   │   │   ├── tabs.ts       # 标签页状态
+│   │   │   └── taskQueue.ts  # 任务队列状态
+│   │   ├── api/              # API 请求
+│   │   ├── router/           # 路由配置
+│   │   └── styles/           # 全局样式
+│   ├── electron-builder.json # 打包配置
 │   └── package.json
-├── server/                 # 后端服务
+├── server/                    # 后端服务
 │   ├── src/
-│   │   ├── routes/        # API 路由
-│   │   ├── services/      # 业务逻辑
-│   │   ├── models/        # 数据模型
-│   │   ├── middleware/    # 中间件
-│   │   ├── automation/    # 自动化引擎
-│   │   └── websocket/     # WebSocket 服务
+│   │   ├── routes/           # API 路由
+│   │   ├── services/         # 业务逻辑
+│   │   │   ├── HeadlessBrowserService  # 浏览器自动化
+│   │   │   └── TaskQueueService        # 任务队列
+│   │   ├── models/           # 数据模型
+│   │   ├── middleware/       # 中间件
+│   │   ├── automation/       # 自动化引擎
+│   │   └── websocket/        # WebSocket 服务
 │   ├── Dockerfile
 │   └── docker-compose.yml
-├── shared/                 # 共享代码
-│   ├── types/             # TypeScript 类型
-│   └── constants/         # 常量定义
-├── database/               # 数据库脚本
+├── shared/                    # 共享代码
+│   ├── src/
+│   │   ├── types/            # TypeScript 类型
+│   │   └── constants/        # 常量定义
+│   └── package.json
+├── database/                  # 数据库脚本
+│   └── schema.sql
 └── README.md
 ```
 
-## 部署
+## ⌨️ 快捷键
 
-### Docker 部署（推荐）
+| 快捷键 | 功能 |
+|--------|------|
+| `Ctrl+W` | 关闭当前标签页 |
+| 右键标签 | 标签页操作菜单 |
+| 右键关闭按钮 | 托盘/退出菜单 |
 
-```bash
-cd server
-docker-compose up -d
-```
+## 📦 打包发布
+
+### 生成应用图标
+
+1. 访问 https://convertio.co/svg-ico/
+2. 上传 `client/build/icon.svg`
+3. 下载并保存为 `client/build/icon.ico`
 
-### 手动部署
+### 打包客户端
 
 ```bash
-# 构建
-pnpm build
+cd client
 
-# 启动服务端
-cd server && node dist/app.js
+# 打包 Windows 版本
+pnpm build:win
 
-# 客户端打包
-cd client && pnpm build
+# 打包 macOS 版本
+pnpm build:mac
+
+# 打包 Linux 版本
+pnpm build:linux
 ```
 
-## API 文档
+### Docker 部署服务端
+
+```bash
+cd server
+docker-compose up -d
+```
 
-主要 API 端点：
+## 📡 API 接口
+
+### 认证相关
 
 | 路径 | 方法 | 描述 |
 |------|------|------|
 | `/api/auth/login` | POST | 用户登录 |
 | `/api/auth/register` | POST | 用户注册 |
 | `/api/auth/me` | GET | 获取当前用户 |
-| `/api/accounts` | GET/POST | 平台账号管理 |
-| `/api/publish` | GET/POST | 发布任务管理 |
-| `/api/comments` | GET | 评论管理 |
-| `/api/analytics/summary` | GET | 数据统计 |
 
-## 开发指南
+### 账号管理
+
+| 路径 | 方法 | 描述 |
+|------|------|------|
+| `/api/accounts` | GET | 获取账号列表 |
+| `/api/accounts` | POST | 添加账号 |
+| `/api/accounts/:id` | PUT | 更新账号 |
+| `/api/accounts/:id` | DELETE | 删除账号 |
+| `/api/accounts/:id/refresh` | POST | 刷新账号状态 |
+
+### 发布管理
+
+| 路径 | 方法 | 描述 |
+|------|------|------|
+| `/api/publish` | GET | 获取发布任务 |
+| `/api/publish` | POST | 创建发布任务 |
+| `/api/publish/:id` | DELETE | 删除任务 |
+
+### 作品管理
+
+| 路径 | 方法 | 描述 |
+|------|------|------|
+| `/api/works` | GET | 获取作品列表 |
+| `/api/works/sync/:accountId` | POST | 同步账号作品 |
+| `/api/works/:id/comments/sync` | POST | 同步作品评论 |
+
+### 任务队列
+
+| 路径 | 方法 | 描述 |
+|------|------|------|
+| `/api/task-queue` | GET | 获取任务列表 |
+| WebSocket | - | 实时任务状态推送 |
+
+## 🔧 开发指南
 
 ### 添加新平台支持
 
 1. 在 `shared/src/types/platform.ts` 添加平台类型
 2. 在 `shared/src/constants/platforms.ts` 添加平台配置
-3. 在 `server/src/automation/platforms/` 创建平台适配器
-
-### 平台适配器接口
-
-```typescript
-interface PlatformAdapter {
-  platform: PlatformType;
-  login(account: AccountInfo): Promise<LoginResult>;
-  checkLoginStatus(cookies: string): Promise<boolean>;
-  getQRCode(): Promise<QRCodeInfo>;
-  getAccountInfo(cookies: string): Promise<AccountProfile>;
-  publishVideo(params: PublishParams): Promise<PublishResult>;
-  getComments(videoId: string): Promise<Comment[]>;
-  replyComment(commentId: string, content: string): Promise<boolean>;
-  getAnalytics(dateRange: DateRange): Promise<AnalyticsData>;
-}
-```
+3. 在 `server/src/services/HeadlessBrowserService.ts` 添加平台适配方法
 
-## 许可证
+### WebSocket 事件
+
+| 事件 | 方向 | 描述 |
+|------|------|------|
+| `TASK_CREATED` | Server→Client | 任务创建 |
+| `TASK_PROGRESS` | Server→Client | 任务进度更新 |
+| `TASK_COMPLETED` | Server→Client | 任务完成 |
+| `TASK_FAILED` | Server→Client | 任务失败 |
+| `CAPTCHA_REQUIRED` | Server→Client | 需要验证码 |
+
+## 📄 许可证
 
 MIT License
 
-## 贡献
+## 🤝 贡献
 
 欢迎提交 Issue 和 Pull Request！
+
+## 📮 联系
+
+如有问题或建议，请提交 Issue。