note2any/xiaohongshu-design.md

小红书功能设计文档

📋 需求概述

基于用户反馈，为 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          # 添加小红书设置界面

核心组件关系

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)

// 核心功能
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)

// 渲染器接口
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 的网页操作能力：

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 图片处理方案

利用现有的图片处理能力：

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                     # 扩展：注册小红书命令

🔧 配置项设计

在插件设置中新增小红书部分：

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辅助内容优化
• 发布效果分析

---

此设计文档为小红书功能开发提供了完整的技术方案和实现路径，确保新功能与现有架构的良好集成，同时保持代码的清晰性和可维护性。