327 lines
9.3 KiB
Markdown
327 lines
9.3 KiB
Markdown
# 小红书预览界面布局修改记录
|
||
|
||
**日期**: 2025年10月8日
|
||
**任务**: 调整小红书预览界面的按钮布局
|
||
|
||
## 📋 需求说明
|
||
|
||
### 原需求
|
||
- 发布平台选"小红书"时，去掉"切图"按钮
|
||
- 用"当前页切图"和"全部页切图"替代
|
||
|
||
### 新需求（本次修改）
|
||
调整工具栏布局为两行：
|
||
|
||
**第一行**（操作按钮）:
|
||
```
|
||
[刷新] [发布到小红书]
|
||
```
|
||
|
||
**第二行**（样式控制）:
|
||
```
|
||
[模板选择▼] [主题选择▼] [字体选择▼] 字体大小[- +]
|
||
```
|
||
|
||
## 🔧 修改内容
|
||
|
||
### 1. 文件：`src/xiaohongshu/preview-view.ts`
|
||
|
||
#### 1.1 添加回调函数属性
|
||
```typescript
|
||
// 回调函数
|
||
onRefreshCallback?: () => Promise<void>;
|
||
onPublishCallback?: () => Promise<void>;
|
||
```
|
||
|
||
#### 1.2 重构 `buildTopToolbar()` 方法
|
||
|
||
**原布局**（单行）:
|
||
```
|
||
模板 [▼] | 主题 [▼] | 字体 [▼] | 字体大小 [-][16][+]
|
||
```
|
||
|
||
**新布局**（两行）:
|
||
```html
|
||
<!-- 第一行：操作按钮 -->
|
||
<div class="toolbar-row-1">
|
||
<button>刷新</button>
|
||
<button>发布到小红书</button>
|
||
</div>
|
||
|
||
<!-- 第二行：样式控制 -->
|
||
<div class="toolbar-row-2">
|
||
模板 <select>...</select>
|
||
主题 <select>...</select>
|
||
字体 <select>...</select>
|
||
字体大小 <div>[-] 16 [+]</div>
|
||
</div>
|
||
```
|
||
|
||
**样式调整**:
|
||
```typescript
|
||
// 工具栏容器
|
||
topToolbar.style.cssText = 'display: flex; flex-direction: column; gap: 10px; ...';
|
||
|
||
// 第一行
|
||
firstRow.style.cssText = 'display: flex; align-items: center; gap: 15px;';
|
||
|
||
// 刷新按钮
|
||
refreshBtn.style.cssText = 'padding: 8px 20px; background: #4CAF50; ...';
|
||
|
||
// 发布按钮
|
||
publishBtn.style.cssText = 'padding: 8px 20px; background: #ff2442; ...';
|
||
|
||
// 第二行
|
||
secondRow.style.cssText = 'display: flex; align-items: center; gap: 15px;';
|
||
```
|
||
|
||
#### 1.3 添加回调方法
|
||
```typescript
|
||
/**
|
||
* 刷新按钮点击
|
||
*/
|
||
private async onRefresh(): Promise<void> {
|
||
if (this.onRefreshCallback) {
|
||
await this.onRefreshCallback();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发布按钮点击
|
||
*/
|
||
private async onPublish(): Promise<void> {
|
||
if (this.onPublishCallback) {
|
||
await this.onPublishCallback();
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 文件：`src/note-preview.ts`
|
||
|
||
#### 2.1 修改 `switchToXiaohongshuMode()` 方法
|
||
|
||
**添加回调函数注入**:
|
||
```typescript
|
||
private switchToXiaohongshuMode() {
|
||
// ... 原有代码 ...
|
||
|
||
if (!this._xiaohongshuPreview) {
|
||
// ... 创建预览视图 ...
|
||
|
||
// 设置回调函数
|
||
this._xiaohongshuPreview.onRefreshCallback = async () => {
|
||
await this.onXiaohongshuRefresh();
|
||
};
|
||
this._xiaohongshuPreview.onPublishCallback = async () => {
|
||
await this.onXiaohongshuPublish();
|
||
};
|
||
|
||
this._xiaohongshuPreview.build();
|
||
}
|
||
// ... 原有代码 ...
|
||
}
|
||
```
|
||
|
||
#### 2.2 添加回调实现方法
|
||
|
||
```typescript
|
||
/**
|
||
* 小红书预览的刷新回调
|
||
*/
|
||
async onXiaohongshuRefresh() {
|
||
await this.assetsManager.loadCustomCSS();
|
||
await this.assetsManager.loadExpertSettings();
|
||
// 更新小红书预览的样式
|
||
if (this._xiaohongshuPreview) {
|
||
this._xiaohongshuPreview.assetsManager = this.assetsManager;
|
||
}
|
||
await this.renderMarkdown();
|
||
new Notice('刷新成功');
|
||
}
|
||
|
||
/**
|
||
* 小红书预览的发布回调
|
||
*/
|
||
async onXiaohongshuPublish() {
|
||
await this.postToXiaohongshu();
|
||
}
|
||
```
|
||
|
||
### 3. 文档更新
|
||
|
||
#### 3.1 `XIAOHONGSHU_PREVIEW_GUIDE.md`
|
||
- 更新 UI 结构说明
|
||
- 分离第一行（操作按钮）和第二行（样式控制）
|
||
- 添加详细的使用流程
|
||
- 更新截图说明（如有）
|
||
|
||
#### 3.2 `XIAOHONGSHU_FEATURE_SUMMARY.md`
|
||
- 更新 UI 功能矩阵
|
||
- 更新用户操作流程图
|
||
- 添加刷新和发布功能说明
|
||
|
||
#### 3.3 新建 `XIAOHONGSHU_UI_LAYOUT.md`
|
||
- 完整的界面布局ASCII图
|
||
- 详细的颜色规范
|
||
- 间距和字体规范
|
||
- 交互反馈说明
|
||
- 适配建议
|
||
|
||
## 📊 修改前后对比
|
||
|
||
### 界面布局对比
|
||
|
||
**修改前**:
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ 模板[▼] 主题[▼] 字体[▼] 字体大小[-][16][+] │
|
||
├────────────────────────────────────────────────────┤
|
||
│ 预览区域 │
|
||
├────────────────────────────────────────────────────┤
|
||
│ [←] 1/5 [→] │
|
||
├────────────────────────────────────────────────────┤
|
||
│ [⬇当前页切图] [⬇⬇全部页切图] │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**修改后**:
|
||
```
|
||
┌────────────────────────────────────────────────────┐
|
||
│ [刷新] [发布到小红书] │ ← 第一行：操作
|
||
│ 模板[▼] 主题[▼] 字体[▼] 字体大小[-][16][+] │ ← 第二行：样式
|
||
├────────────────────────────────────────────────────┤
|
||
│ 预览区域 │
|
||
├────────────────────────────────────────────────────┤
|
||
│ [←] 1/5 [→] │
|
||
├────────────────────────────────────────────────────┤
|
||
│ [⬇当前页切图] [⬇⬇全部页切图] │
|
||
└────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 功能对比
|
||
|
||
| 功能 | 修改前 | 修改后 | 变化 |
|
||
|-----|--------|--------|------|
|
||
| 刷新 | ❌ 无 | ✅ 有 | 新增 |
|
||
| 发布到小红书 | ⚠️ 需要切换界面 | ✅ 直接显示 | 增强 |
|
||
| 模板选择 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 主题选择 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 字体选择 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 字号调整 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 分页导航 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 当前页切图 | ✅ 有 | ✅ 有 | 保持 |
|
||
| 全部页切图 | ✅ 有 | ✅ 有 | 保持 |
|
||
|
||
## ✅ 测试验证
|
||
|
||
### 编译测试
|
||
```bash
|
||
$ npm run build
|
||
> note-to-mp@1.3.0 build
|
||
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production
|
||
|
||
✅ 编译成功，无错误
|
||
```
|
||
|
||
### 功能测试清单
|
||
|
||
#### 基础测试
|
||
- [ ] 平台切换：微信 → 小红书
|
||
- [ ] 界面显示：两行工具栏正确显示
|
||
- [ ] 按钮样式：刷新（绿色）、发布（红色）
|
||
|
||
#### 刷新功能测试
|
||
- [ ] 点击刷新按钮
|
||
- [ ] 检查是否重新加载CSS
|
||
- [ ] 检查预览是否更新
|
||
- [ ] 验证 Notice 提示
|
||
|
||
#### 发布功能测试
|
||
- [ ] 点击发布按钮
|
||
- [ ] 检查是否调用 postToXiaohongshu()
|
||
- [ ] 验证发布流程
|
||
|
||
#### 样式控制测试
|
||
- [ ] 模板选择（占位）
|
||
- [ ] 主题切换
|
||
- [ ] 字体切换
|
||
- [ ] 字号调整（+/-）
|
||
|
||
#### 切图功能测试
|
||
- [ ] 当前页切图
|
||
- [ ] 全部页切图
|
||
- [ ] 文件命名正确
|
||
- [ ] 保存路径正确
|
||
|
||
## 🎯 优化建议
|
||
|
||
### 短期优化（v1.1）
|
||
1. **按钮悬停效果**
|
||
```css
|
||
button:hover {
|
||
opacity: 0.9;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
```
|
||
|
||
2. **禁用状态样式**
|
||
- 第一页时左箭头禁用
|
||
- 最后一页时右箭头禁用
|
||
|
||
3. **加载状态指示**
|
||
- 刷新时显示 loading 动画
|
||
- 发布时显示进度条
|
||
|
||
### 中期优化（v1.2）
|
||
1. **快捷键支持**
|
||
- `Ctrl+R` / `Cmd+R`: 刷新
|
||
- `Ctrl+P` / `Cmd+P`: 发布
|
||
- `←` / `→`: 翻页
|
||
|
||
2. **批量操作优化**
|
||
- 全部页切图显示总进度条
|
||
- 支持取消批量操作
|
||
|
||
3. **状态记忆**
|
||
- 记住用户选择的主题、字体、字号
|
||
- 下次打开自动恢复
|
||
|
||
## 📝 相关文件清单
|
||
|
||
### 修改的文件
|
||
1. `src/xiaohongshu/preview-view.ts` - 预览视图组件
|
||
2. `src/note-preview.ts` - 主预览视图
|
||
3. `XIAOHONGSHU_PREVIEW_GUIDE.md` - 使用指南
|
||
4. `XIAOHONGSHU_FEATURE_SUMMARY.md` - 功能总结
|
||
|
||
### 新增的文件
|
||
1. `XIAOHONGSHU_UI_LAYOUT.md` - 界面布局规范
|
||
|
||
### 依赖的文件（未修改）
|
||
1. `src/xiaohongshu/paginator.ts` - 分页算法
|
||
2. `src/xiaohongshu/slice.ts` - 切图功能
|
||
3. `src/xiaohongshu/adapter.ts` - 内容适配器
|
||
4. `src/xiaohongshu/api.ts` - API管理器
|
||
5. `src/settings.ts` - 设置管理
|
||
|
||
## 🔗 相关链接
|
||
|
||
- 使用指南: [XIAOHONGSHU_PREVIEW_GUIDE.md](XIAOHONGSHU_PREVIEW_GUIDE.md)
|
||
- 功能总结: [XIAOHONGSHU_FEATURE_SUMMARY.md](XIAOHONGSHU_FEATURE_SUMMARY.md)
|
||
- 界面布局: [XIAOHONGSHU_UI_LAYOUT.md](XIAOHONGSHU_UI_LAYOUT.md)
|
||
- 主仓库: [note2mp](https://github.com/your-repo/note2mp)
|
||
|
||
## 📞 问题反馈
|
||
|
||
如有问题，请在以下渠道反馈：
|
||
1. GitHub Issues
|
||
2. 插件设置页面的反馈入口
|
||
3. 开发者邮箱
|
||
|
||
---
|
||
|
||
**修改状态**: ✅ 完成
|
||
**编译状态**: ✅ 通过
|
||
**测试状态**: ⏳ 待用户测试
|
||
**文档状态**: ✅ 已更新
|