# 小红书预览界面布局说明

## 完整界面结构

```
┌────────────────────────────────────────────────────────────┐
│ 发布平台: [微信公众号 ▼] → [小红书 ▼]                     │  ← 平台选择（在主工具栏）
└────────────────────────────────────────────────────────────┘

选择"小红书"后，保留平台选择器，其他微信相关内容隐藏，显示以下界面：

┌────────────────────────────────────────────────────────────┐
│ 发布平台: [小红书 ▼]                                       │  ← 平台选择器（保留）
├────────────────────────────────────────────────────────────┤
│                   小红书分页预览界面                        │
├────────────────────────────────────────────────────────────┤
│                                                             │
│  第一行：操作按钮                                          │
│  ┌─────────────────────────────────────────────────────┐  │
│  │ [刷新] [发布到小红书]                                │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                             │
│  第二行：样式控制                                          │
│  ┌─────────────────────────────────────────────────────┐  │
│  │ 模板 [默认模板 ▼]  主题 [默认主题 ▼]                 │  │
│  │ 字体 [系统默认 ▼]  字体大小 [-] 16 [+]               │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                             │
├────────────────────────────────────────────────────────────┤
│                                                             │
│                        预览区域                            │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐  │
│  │                                                      │  │
│  │                                                      │  │
│  │                   当前页面内容                       │  │
│  │                                                      │  │
│  │                 (1080px × 1440px)                   │  │
│  │                                                      │  │
│  │                                                      │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                             │
├────────────────────────────────────────────────────────────┤
│                                                             │
│  分页导航                                                  │
│  ┌─────────────────────────────────────────────────────┐  │
│  │              [←]      1/5      [→]                  │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                             │
├────────────────────────────────────────────────────────────┤
│                                                             │
│  底部操作                                                  │
│  ┌─────────────────────────────────────────────────────┐  │
│  │       [⬇ 当前页切图]    [⬇⬇ 全部页切图]             │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                             │
└────────────────────────────────────────────────────────────┘
```

## 各区域详细说明

### 1. 顶部工具栏 - 第一行（操作按钮）

| 按钮 | 功能 | 说明 |
|------|------|------|
| 刷新 | 重新加载样式和内容 | 绿色按钮，修改文档后点击刷新 |
| 发布到小红书 | 发布文章到小红书 | 红色按钮，连接小红书API |

**布局特点**：
- 左对齐
- 按钮之间间距 15px
- 按钮高度统一（padding: 8px 20px）
- 刷新按钮：绿色 (#4CAF50)
- 发布按钮：小红书红 (#ff2442)

### 2. 顶部工具栏 - 第二行（样式控制）

| 控件 | 选项/范围 | 默认值 | 说明 |
|------|----------|--------|------|
| 模板选择 | 默认/简约/杂志 | 默认模板 | 占位功能，待实现 |
| 主题选择 | 与插件主题同步 | 默认主题 | 实时切换主题样式 |
| 字体选择 | 系统默认/宋体/黑体/楷体/仿宋 | 系统默认 | 改变正文字体 |
| 字体大小 | 12-24px | 16px | 点击 - 或 + 调整 |

**布局特点**：
- 左对齐
- 控件之间间距 15px
- 每个选择器前有标签说明
- 字体大小使用 [-] [数字] [+] 三段式布局

### 3. 预览区域

**尺寸**：
- 宽度：1080px（可在设置中配置）
- 高度：1440px（根据 3:4 比例自动计算）
- 背景：白色
- 边框：1px 实线，灰色

**内容**：
- 显示当前页的文章内容
- 应用选定的主题样式
- 应用选定的字体和字号
- 支持滚动查看（如果内容超高）

### 4. 分页导航

| 元素 | 样式 | 功能 |
|------|------|------|
| 左箭头 (←) | 圆形按钮，40×40px | 切换到上一页 |
| 页码显示 | 文本，16px | 显示"当前页/总页数" |
| 右箭头 (→) | 圆形按钮，40×40px | 切换到下一页 |

**布局特点**：
- 居中对齐
- 元素之间间距 20px
- 箭头按钮为圆形
- 页码使用固定宽度（60px）保持对齐

### 5. 底部操作栏

| 按钮 | 图标 | 功能 | 说明 |
|------|------|------|------|
| 当前页切图 | ⬇ | 保存当前页为图片 | 文件名：{slug}_1.png |
| 全部页切图 | ⬇⬇ | 批量保存所有页 | 文件名：{slug}_1.png ~ {slug}_N.png |

**布局特点**：
- 居中对齐
- 按钮之间间距 20px
- 按钮样式：padding: 12px 30px
- 红色背景 (#ff2442)
- 白色文字，加粗显示

## 布局响应规则

### 微信公众号模式
- **显示**平台选择器
- **显示**微信相关工具栏（公众号选择/复制/上传/发草稿等）
- **显示**样式选择（主题/代码高亮）
- **显示**封面设置
- **显示**原有渲染区域
- **隐藏**小红书预览界面

### 小红书模式
- **显示**平台选择器（保留）
- **隐藏**微信相关工具栏
- **隐藏**原有渲染区域
- **显示**小红书预览界面（完全替换）

## 颜色规范

| 元素 | 颜色代码 | 说明 |
|------|----------|------|
| 刷新按钮 | #4CAF50 | 绿色，表示安全操作 |
| 发布按钮 | #ff2442 | 小红书品牌红 |
| 切图按钮 | #ff2442 | 与发布按钮统一 |
| 边框 | #e0e0e0 | 浅灰色 |
| 背景（工具栏） | #ffffff | 白色 |
| 背景（主界面） | #f5f5f5 | 浅灰色 |
| 文字（主要） | #000000 | 黑色 |
| 文字（按钮） | #ffffff | 白色 |

## 间距规范

| 位置 | 间距值 | 说明 |
|------|--------|------|
| 工具栏内边距 | 15px | padding |
| 工具栏行间距 | 10px | gap |
| 控件间距 | 15px | gap |
| 导航元素间距 | 20px | gap |
| 按钮间距 | 20px | gap |
| 预览区外边距 | 20px | padding |

## 字体规范

| 元素 | 字号 | 字重 | 说明 |
|------|------|------|------|
| 按钮文字（操作） | 14px | normal | 刷新/发布 |
| 按钮文字（切图） | 16px | bold | 切图按钮 |
| 标签文字 | 14px | normal | 模板/主题等标签 |
| 页码显示 | 16px | normal | 1/5 |
| 预览内容 | 16px | normal | 默认值，可调整 |

## 交互反馈

### 按钮悬停
- 鼠标指针：cursor: pointer
- 视觉反馈：可添加 hover 效果（透明度或阴影）

### 按钮禁用状态
- 上一页：当在第 1 页时禁用
- 下一页：当在最后一页时禁用
- 禁用样式：opacity: 0.5, cursor: not-allowed

### 切图进度
- 使用 Notice 显示进度
- "正在切图..."
- "正在处理第 N/M 页..."
- "✅ 切图完成"

## 适配建议

### 窗口宽度较小时
- 工具栏自动换行
- 保持预览区居中
- 控件可能需要纵向排列

### 窗口高度较小时
- 预览区添加滚动条
- 工具栏固定在顶部
- 底部操作栏固定在底部

## 开发注意事项

1. **CSS 样式隔离**
   - 小红书预览使用独立的 class 前缀：`xhs-`
   - 避免与主预览样式冲突

2. **状态管理**
   - 当前页码：currentPageIndex
   - 总页数：pages.length
   - 字体大小：currentFontSize

3. **回调函数**
   - 刷新：onRefreshCallback
   - 发布：onPublishCallback
   - 由父组件 (NotePreview) 注入

4. **样式应用顺序**
   - 基础主题样式
   - 字体设置
   - 字号调整
   - 临时调整（切图时）

---

**更新日期**: 2025-10-08  
**版本**: v1.0  
**状态**: ✅ 已实现