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