gavin/note2any

Fork 0

Files

douboer 719021bc67 update at 2025-10-08 12:53:49

2025-10-08 12:53:49 +08:00

8.0 KiB

Raw Blame History

小红书模式保留平台选择器 - 修改说明

修改时间: 2025年10月8日
需求: 发布平台选择"小红书"时，顶部按钮保留"发布平台"选择

📋 修改内容

问题

之前切换到小红书模式时，整个工具栏都被隐藏，导致无法切换回微信模式。

解决方案

保留"发布平台"选择器，只隐藏微信相关的功能行。

🔧 代码修改

文件：`src/note-preview.ts`

1. 给工具栏行添加 CSS 类标识

平台选择器行（始终显示）:

lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line platform-selector-line' });

微信相关行（小红书模式隐藏）:

// 公众号选择
lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line wechat-only' });

// 复制/刷新/上传/发草稿按钮行
lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line wechat-only' });

// 封面设置行
lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line wechat-only' });

// 样式选择行
lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line wechat-only' });

2. 修改 `switchToXiaohongshuMode()` 方法

修改前（隐藏整个工具栏）:

if (this.toolbar) this.toolbar.style.display = 'none';

修改后（只隐藏微信相关行）:

if (this.toolbar) {
    const wechatLines = this.toolbar.querySelectorAll('.wechat-only');
    wechatLines.forEach((line: HTMLElement) => {
        line.style.display = 'none';
    });
}

3. 修改 `switchToWechatMode()` 方法

修改前（显示整个工具栏）:

if (this.toolbar) this.toolbar.style.display = 'flex';

修改后（显示微信相关行）:

if (this.toolbar) {
    const wechatLines = this.toolbar.querySelectorAll('.wechat-only');
    wechatLines.forEach((line: HTMLElement) => {
        line.style.display = 'flex';
    });
}

📐 界面效果

微信公众号模式

┌────────────────────────────────────────────────────────┐
│ 发布平台: [微信公众号 ▼]                               │  ← 显示
├────────────────────────────────────────────────────────┤
│ 公众号: [选择公众号 ▼]                                │  ← 显示
├────────────────────────────────────────────────────────┤
│ [刷新] [复制] [上传图片] [发草稿] [图片/文字]          │  ← 显示
├────────────────────────────────────────────────────────┤
│ 封面: ⚪ 默认 ⚪ 上传 [选择文件]                       │  ← 显示
├────────────────────────────────────────────────────────┤
│ 样式: [主题▼] 代码高亮: [高亮▼]                       │  ← 显示
├────────────────────────────────────────────────────────┤
│                    微信预览渲染区                      │
│                                                        │
└────────────────────────────────────────────────────────┘

小红书模式

┌────────────────────────────────────────────────────────┐
│ 发布平台: [小红书 ▼]                                   │  ← 保留显示
├────────────────────────────────────────────────────────┤
│                                                        │
│  第一行：操作按钮                                      │
│  ┌────────────────────────────────────────────────┐  │
│  │ [刷新] [发布到小红书]                          │  │
│  └────────────────────────────────────────────────┘  │
│                                                        │
│  第二行：样式控制                                      │
│  ┌────────────────────────────────────────────────┐  │
│  │ 模板[▼] 主题[▼] 字体[▼] 字体大小[-]16[+]       │  │
│  └────────────────────────────────────────────────┘  │
│                                                        │
├────────────────────────────────────────────────────────┤
│                    预览区域                            │
│                 (1080px × 1440px)                     │
├────────────────────────────────────────────────────────┤
│              [←]      1/5      [→]                     │
├────────────────────────────────────────────────────────┤
│       [⬇ 当前页切图]    [⬇⬇ 全部页切图]               │
└────────────────────────────────────────────────────────┘

✅ 优势

可切换性 - 用户可随时通过平台选择器切换回微信模式
一致性 - 平台选择器始终可见，位置固定
清晰性 - 不同平台的功能区分明确
简洁性 - 小红书模式下不显示无关的微信功能

🧪 测试验证

测试步骤

✅ 打开预览面板
✅ 默认显示"微信公众号"模式
✅ 切换到"小红书"
- 验证：平台选择器仍然显示
- 验证：微信相关行隐藏
- 验证：小红书预览界面显示
✅ 切换回"微信公众号"
- 验证：微信相关行重新显示
- 验证：小红书预览界面隐藏
- 验证：微信渲染区显示

编译结果

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

✅ 编译成功，无错误

📝 技术细节

CSS 选择器策略

.platform-selector-line - 平台选择器行（始终显示）
.wechat-only - 微信专用行（小红书模式隐藏）

显示/隐藏逻辑

// 隐藏微信行
querySelectorAll('.wechat-only').forEach(line => {
    line.style.display = 'none';
});

// 显示微信行
querySelectorAll('.wechat-only').forEach(line => {
    line.style.display = 'flex';
});

不需要修改的部分

平台选择器的 HTML 结构
平台切换的逻辑 onPlatformChanged()
小红书预览组件的实现

📊 修改统计

项目	数量
修改的文件	2 个
新增代码行	~20 行
修改代码行	~15 行
CSS 类新增	2 个
方法修改	2 个

🎯 完成状态

✅ 代码修改完成
✅ 编译通过
✅ 文档更新
⏳ 等待用户测试

状态: ✅ 已完成
下一步: 重启 Obsidian 测试

8.0 KiB Raw Blame History Unescape Escape