update at 2025-10-08 12:53:49

XIAOHONGSHU_UI_LAYOUT.md

@@ -0,0 +1,238 @@
+# 小红书预览界面布局说明
+
+## 完整界面结构
+
+```
+┌────────────────────────────────────────────────────────────┐
+│ 发布平台: [微信公众号 ▼] → [小红书 ▼]                     │  ← 平台选择（在主工具栏）
+└────────────────────────────────────────────────────────────┘
+
+选择"小红书"后，保留平台选择器，其他微信相关内容隐藏，显示以下界面：
+
+┌────────────────────────────────────────────────────────────┐
+│ 发布平台: [小红书 ▼]                                       │  ← 平台选择器（保留）
+├────────────────────────────────────────────────────────────┤
+│                   小红书分页预览界面                        │
+├────────────────────────────────────────────────────────────┤
+│                                                             │
+│  第一行：操作按钮                                          │
+│  ┌─────────────────────────────────────────────────────┐  │
+│  │ [刷新] [发布到小红书]                                │  │
+│  └─────────────────────────────────────────────────────┘  │
+│                                                             │
+│  第二行：样式控制                                          │
+│  ┌─────────────────────────────────────────────────────┐  │
+│  │ 模板 [默认模板 ▼]  主题 [默认主题 ▼]                 │  │
+│  │ 字体 [系统默认 ▼]  字体大小 [-] 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  
+**状态**: ✅ 已实现