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

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

---

## 📋 修改内容

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

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

---

## 🔧 代码修改

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

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

**平台选择器行**（始终显示）:
```typescript
lineDiv = this.toolbar.createDiv({ cls: 'toolbar-line platform-selector-line' });
```

**微信相关行**（小红书模式隐藏）:
```typescript
// 公众号选择
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()` 方法

**修改前**（隐藏整个工具栏）:
```typescript
if (this.toolbar) this.toolbar.style.display = 'none';
```

**修改后**（只隐藏微信相关行）:
```typescript
if (this.toolbar) {
    const wechatLines = this.toolbar.querySelectorAll('.wechat-only');
    wechatLines.forEach((line: HTMLElement) => {
        line.style.display = 'none';
    });
}
```

#### 3. 修改 `switchToWechatMode()` 方法

**修改前**（显示整个工具栏）:
```typescript
if (this.toolbar) this.toolbar.style.display = 'flex';
```

**修改后**（显示微信相关行）:
```typescript
if (this.toolbar) {
    const wechatLines = this.toolbar.querySelectorAll('.wechat-only');
    wechatLines.forEach((line: HTMLElement) => {
        line.style.display = 'flex';
    });
}
```

---

## 📐 界面效果

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

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

---

## ✅ 优势

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

---

## 🧪 测试验证

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

### 编译结果
```bash
$ npm run build
> note-to-mp@1.3.0 build
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production

✅ 编译成功，无错误
```

---

## 📝 技术细节

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

### 显示/隐藏逻辑
```typescript
// 隐藏微信行
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 测试