11 KiB
11 KiB
小红书预览界面布局说明
完整界面结构
┌────────────────────────────────────────────────────────────┐
│ 发布平台: [微信公众号 ▼] → [小红书 ▼] │ ← 平台选择（在主工具栏）
└────────────────────────────────────────────────────────────┘
选择"小红书"后，保留平台选择器，其他微信相关内容隐藏，显示以下界面：
┌────────────────────────────────────────────────────────────┐
│ 发布平台: [小红书 ▼] │ ← 平台选择器（保留）
├────────────────────────────────────────────────────────────┤
│ 小红书分页预览界面 │
├────────────────────────────────────────────────────────────┤
│ │
│ 第一行：操作按钮 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ [刷新] [发布到小红书] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 第二行：样式控制 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 模板 [默认模板 ▼] 主题 [默认主题 ▼] │ │
│ │ 字体 [系统默认 ▼] 字体大小 [-] 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 页..."
- "✅ 切图完成"
适配建议
窗口宽度较小时
- 工具栏自动换行
- 保持预览区居中
- 控件可能需要纵向排列
窗口高度较小时
- 预览区添加滚动条
- 工具栏固定在顶部
- 底部操作栏固定在底部
开发注意事项
-
CSS 样式隔离
- 小红书预览使用独立的 class 前缀：
xhs- - 避免与主预览样式冲突
- 小红书预览使用独立的 class 前缀：
-
状态管理
- 当前页码：currentPageIndex
- 总页数：pages.length
- 字体大小：currentFontSize
-
回调函数
- 刷新：onRefreshCallback
- 发布：onPublishCallback
- 由父组件 (NotePreview) 注入
-
样式应用顺序
- 基础主题样式
- 字体设置
- 字号调整
- 临时调整（切图时）
更新日期: 2025-10-08
版本: v1.0
状态: ✅ 已实现