211 lines
8.0 KiB
Markdown
211 lines
8.0 KiB
Markdown
# 小红书模式保留平台选择器 - 修改说明
|
||
|
||
**修改时间**: 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 测试
|