note2any/docs/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          # 添加小红书设置界面
```

### 核心组件关系

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

---

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