update at 2025-10-08 12:53:49
This commit is contained in:
douboer
210
XIAOHONGSHU_KEEP_PLATFORM_SELECTOR.md
Normal file
210
XIAOHONGSHU_KEEP_PLATFORM_SELECTOR.md
Normal file
@@ -0,0 +1,210 @@
|
||||
# 小红书模式保留平台选择器 - 修改说明
|
||||
|
||||
**修改时间**: 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 测试
|
||||
Reference in New Issue
Block a user