note2any/XIAOHONGSHU_LAYOUT_CHANGE_LOG.md

小红书预览界面布局修改记录

日期: 2025年10月8日
任务: 调整小红书预览界面的按钮布局

📋 需求说明

原需求

• 发布平台选"小红书"时，去掉"切图"按钮
• 用"当前页切图"和"全部页切图"替代

新需求（本次修改）

调整工具栏布局为两行：

第一行（操作按钮）:

[刷新] [发布到小红书]

第二行（样式控制）:

[模板选择▼] [主题选择▼] [字体选择▼] 字体大小[- +]

🔧 修改内容

1. 文件：src/xiaohongshu/preview-view.ts

1.1 添加回调函数属性

// 回调函数
onRefreshCallback?: () => Promise<void>;
onPublishCallback?: () => Promise<void>;

1.2 重构 buildTopToolbar() 方法

原布局（单行）:

模板 [▼] | 主题 [▼] | 字体 [▼] | 字体大小 [-][16][+]

新布局（两行）:

<!-- 第一行：操作按钮 -->
<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>

样式调整:

// 工具栏容器
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 添加回调方法

/**
 * 刷新按钮点击
 */
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() 方法

添加回调函数注入:

private switchToXiaohongshuMode() {
    // ... 原有代码 ...
    
    if (!this._xiaohongshuPreview) {
        // ... 创建预览视图 ...
        
        // 设置回调函数
        this._xiaohongshuPreview.onRefreshCallback = async () => {
            await this.onXiaohongshuRefresh();
        };
        this._xiaohongshuPreview.onPublishCallback = async () => {
            await this.onXiaohongshuPublish();
        };
        
        this._xiaohongshuPreview.build();
    }
    // ... 原有代码 ...
}

2.2 添加回调实现方法

/**
 * 小红书预览的刷新回调
 */
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  [→]                         │
├────────────────────────────────────────────────────┤
│      [⬇当前页切图]  [⬇⬇全部页切图]                │
└────────────────────────────────────────────────────┘

功能对比

功能	修改前	修改后	变化
刷新	❌ 无	✅ 有	新增
发布到小红书	⚠️ 需要切换界面	✅ 直接显示	增强
模板选择	✅ 有	✅ 有	保持
主题选择	✅ 有	✅ 有	保持
字体选择	✅ 有	✅ 有	保持
字号调整	✅ 有	✅ 有	保持
分页导航	✅ 有	✅ 有	保持
当前页切图	✅ 有	✅ 有	保持
全部页切图	✅ 有	✅ 有	保持

✅ 测试验证

编译测试

$ npm run build
> note-to-mp@1.3.0 build
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production

✅ 编译成功，无错误

功能测试清单

基础测试

• 平台切换：微信 → 小红书
• 界面显示：两行工具栏正确显示
• 按钮样式：刷新（绿色）、发布（红色）

刷新功能测试

• 点击刷新按钮
• 检查是否重新加载CSS
• 检查预览是否更新
• 验证 Notice 提示

发布功能测试

• 点击发布按钮
• 检查是否调用 postToXiaohongshu()
• 验证发布流程

样式控制测试

• 模板选择（占位）
• 主题切换
• 字体切换
• 字号调整（+/-）

切图功能测试

• 当前页切图
• 全部页切图
• 文件命名正确
• 保存路径正确

🎯 优化建议

短期优化（v1.1）

1. 按钮悬停效果

   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_FEATURE_SUMMARY.md
• 界面布局: XIAOHONGSHU_UI_LAYOUT.md
• 主仓库: note2mp

📞 问题反馈

如有问题，请在以下渠道反馈：

1. GitHub Issues
2. 插件设置页面的反馈入口
3. 开发者邮箱

---

修改状态: ✅ 完成
编译状态: ✅ 通过
测试状态: ⏳ 待用户测试
文档状态: ✅ 已更新