update at 2025-10-09 12:39:24

2025-10-09 12:39:24 +08:00
parent a891153be0
commit 6f51916b50
44 changed files with 332 additions and 226 deletions
--- a/docs/xiaohongshu-design.md
+++ b/docs/xiaohongshu-design.md
@@ -0,0 +1,291 @@
+# 小红书功能设计文档
+
+## 📋 需求概述
+
+基于用户反馈，为 NoteToMP 插件增加小红书发布功能，采用独立模块设计，不修改现有公众号代码。
+
+### 核心需求
+- **技术方案**：模拟网页操作（类似 Playwright 自动化）
+- **界面设计**：预览界面增加平台选择下拉框，批量发布界面增加小红书选项
+- **独立模块**：与微信公众号功能完全分离，便于维护
+- **图片处理**：统一转换为 PNG 格式上传，无需水印
+- **暂不实现**：内容格式适配、账号管理等高级功能
+
+## 🏗️ 架构设计
+
+### 模块架构图
+
+```
+src/xiaohongshu/
+├── xiaohongshu-api.ts          # 小红书API封装（模拟网页操作）
+├── xiaohongshu-adapter.ts      # 内容格式适配器
+├── xiaohongshu-render.ts       # 小红书渲染器
+├── xiaohongshu-image.ts        # 图片处理逻辑
+└── types.ts                    # 类型定义
+
+扩展现有模块：
+├── src/note-preview.ts         # 添加平台选择下拉框
+├── src/batch-publish-modal.ts  # 添加小红书发布选项
+├── src/settings.ts             # 添加小红书相关配置
+└── src/setting-tab.ts          # 添加小红书设置界面
+```
+
+### 核心组件关系
+
+```mermaid
+graph TB
+    A[NotePreview] -->|平台选择| B[XiaohongshuRender]
+    A -->|公众号发布| C[ArticleRender]
+    
+    D[BatchPublishModal] -->|小红书批量| B
+    D -->|公众号批量| C
+    
+    B --> E[XiaohongshuAdapter]
+    B --> F[XiaohongshuImage]
+    B --> G[XiaohongshuAPI]
+    
+    E --> H[内容格式转换]
+    F --> I[图片PNG转换]
+    G --> J[模拟网页操作]
+    
+    K[Settings] --> L[小红书配置]
+    L --> B
+```
+
+## 🎯 详细设计
+
+### 1. 核心模块设计
+
+#### 1.1 XiaohongshuAPI (xiaohongshu-api.ts)
+```typescript
+// 核心功能
+interface XiaohongshuAPI {
+  // 认证相关
+  checkLoginStatus(): Promise<boolean>
+  loginWithCredentials(username: string, password: string): Promise<boolean>
+  
+  // 发布相关
+  createPost(content: XiaohongshuPost): Promise<XiaohongshuResponse>
+  uploadImage(imageBlob: Blob): Promise<string>
+  
+  // 状态查询
+  getPostStatus(postId: string): Promise<PostStatus>
+}
+
+// 数据结构
+interface XiaohongshuPost {
+  title: string
+  content: string
+  images: string[]  // 上传后的图片ID
+  tags?: string[]
+}
+```
+
+#### 1.2 XiaohongshuRender (xiaohongshu-render.ts)
+```typescript
+// 渲染器接口
+interface XiaohongshuRender {
+  // 预览功能
+  renderPreview(file: TFile): Promise<void>
+  getPreviewContent(): string
+  
+  // 发布功能
+  publishToXiaohongshu(): Promise<string>
+  uploadImages(): Promise<void>
+  
+  // 工具方法
+  copyToClipboard(): Promise<void>
+}
+```
+
+### 2. 界面扩展设计
+
+#### 2.1 NotePreview 扩展
+在现有预览界面顶部添加平台选择下拉框：
+
+```
+┌─────────────────────────────────┐
+│ 发布平台: [公众号预览 ▼]         │
+├─────────────────────────────────┤
+│                                 │
+│        预览内容区域              │
+│                                 │
+├─────────────────────────────────┤
+│ [刷新] [复制] [上传图片] [发草稿] │
+└─────────────────────────────────┘
+```
+
+选项包括：
+- 公众号预览（默认，现有功能）
+- 小红书预览（新增功能）
+
+#### 2.2 BatchPublishModal 扩展
+在批量发布界面添加平台选择：
+
+```
+发布到: □ 微信公众号  □ 小红书  □ 全部平台
+```
+
+### 3. 技术实现方案
+
+#### 3.1 模拟网页操作架构
+基于 Electron 的网页操作能力：
+
+```typescript
+class XiaohongshuWebController {
+  private webview: HTMLWebViewElement
+  
+  async navigateToXiaohongshu(): Promise<void>
+  async fillPostForm(content: XiaohongshuPost): Promise<void>
+  async uploadImages(images: Blob[]): Promise<string[]>
+  async submitPost(): Promise<string>
+}
+```
+
+#### 3.2 图片处理方案
+利用现有的图片处理能力：
+
+```typescript
+class XiaohongshuImageProcessor {
+  // 统一转换为PNG格式
+  async convertToPNG(imageBlob: Blob): Promise<Blob>
+  
+  // 批量处理图片
+  async processImages(images: ImageInfo[]): Promise<ProcessedImage[]>
+  
+  // 复用现有EXIF处理
+  async handleEXIFOrientation(imageBlob: Blob): Promise<Blob>
+}
+```
+
+## 🛠️ 实现计划
+
+### Phase 1: 基础架构搭建
+1. 创建小红书模块目录结构
+2. 定义核心接口和类型
+3. 实现基础的渲染器框架
+4. 扩展预览界面的平台选择
+
+### Phase 2: 核心功能实现
+1. 实现模拟网页操作的API层
+2. 创建内容适配器
+3. 实现图片处理逻辑
+4. 完成小红书渲染器
+
+### Phase 3: 界面集成
+1. 完成预览界面的小红书支持
+2. 扩展批量发布界面
+3. 添加设置页面的小红书配置
+4. 测试界面交互
+
+### Phase 4: 优化和完善
+1. 错误处理和用户反馈
+2. 性能优化
+3. 文档更新
+4. 用户测试和反馈收集
+
+## 📁 文件结构规划
+
+```
+src/
+├── xiaohongshu/
+│   ├── api.ts                  # API层封装
+│   ├── render.ts               # 渲染器实现
+│   ├── adapter.ts              # 内容适配器
+│   ├── image.ts                # 图片处理
+│   ├── web-controller.ts       # 网页操作控制器
+│   └── types.ts                # 类型定义
+│
+├── note-preview.ts             # 扩展：添加平台选择
+├── batch-publish-modal.ts      # 扩展：添加小红书选项
+├── settings.ts                 # 扩展：添加小红书配置
+├── setting-tab.ts              # 扩展：设置界面
+└── main.ts                     # 扩展：注册小红书命令
+```
+
+## 🔧 配置项设计
+
+在插件设置中新增小红书部分：
+
+```typescript
+interface XiaohongshuSettings {
+  // 基础设置
+  enabled: boolean                    // 是否启用小红书功能
+  
+  // 认证信息（加密存储）
+  username?: string                   // 用户名
+  password?: string                   // 密码（加密）
+  
+  // 发布设置
+  defaultTags: string[]              // 默认标签
+  imageQuality: number               // 图片质量 (1-100)
+  
+  // 高级设置
+  publishDelay: number               // 批量发布间隔(秒)
+  enableImageOptimization: boolean   // 图片优化
+}
+```
+
+## 🚀 用户使用流程
+
+### 单篇发布流程
+1. 在预览界面选择"小红书预览"
+2. 查看小红书格式的预览效果
+3. 点击"发布到小红书"按钮
+4. 系统自动处理图片并发布
+5. 显示发布结果和状态
+
+### 批量发布流程
+1. 打开批量发布界面
+2. 设置筛选条件
+3. 选择发布平台（包含小红书）
+4. 选择要发布的文章
+5. 点击"批量发布"
+6. 系统顺序发布到选中平台
+
+## 🎨 界面设计细节
+
+### 预览界面改进
+- 在现有按钮栏前添加平台选择下拉框
+- 根据选择的平台动态更新预览内容
+- 按钮功能根据平台调整（如"发草稿"变为"发布到小红书"）
+
+### 批量发布界面改进  
+- 在筛选区域下方添加平台选择区
+- 支持多平台同时发布
+- 显示各平台的发布进度和状态
+
+## 💡 技术考量
+
+### 模拟网页操作的挑战
+1. **稳定性**：网页结构变化可能导致操作失败
+2. **认证**：需要处理登录状态和会话保持
+3. **反爬虫**：小红书可能有反自动化检测
+4. **性能**：网页操作比API调用更慢
+
+### 解决方案
+1. **容错处理**：多重选择器，智能重试机制
+2. **状态管理**：定期检查登录状态，自动重新认证
+3. **模拟用户行为**：添加随机延迟，模拟真实用户操作
+4. **异步处理**：后台执行，不阻塞界面操作
+
+## 📈 后续扩展规划
+
+### 短期扩展（v1.4.x）
+- 内容格式智能适配
+- 标签自动转换
+- 图片尺寸优化
+
+### 中期扩展（v1.5.x）
+- 多账号支持
+- 定时发布
+- 发布统计和分析
+
+### 长期扩展（v2.0+）
+- 支持更多社交平台（知乎、B站等）
+- AI辅助内容优化
+- 发布效果分析
+
+---
+
+此设计文档为小红书功能开发提供了完整的技术方案和实现路径，确保新功能与现有架构的良好集成，同时保持代码的清晰性和可维护性。