gavin/note2any
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

update at 2025-10-08 12:53:49

Browse Source
This commit is contained in:
douboer
2025-10-08 12:53:49 +08:00
parent 584d4151fc
commit 719021bc67
25 changed files with 3844 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
XIAOHONGSHU_LAYOUT_CHANGE_LOG.md Normal file
View File

@@ -0,0 +1,326 @@
# 小红书预览界面布局修改记录
**日期**: 2025年10月8日
**任务**: 调整小红书预览界面的按钮布局
## 📋 需求说明
### 原需求
- 发布平台选"小红书"时，去掉"切图"按钮
- 用"当前页切图"和"全部页切图"替代
### 新需求（本次修改）
调整工具栏布局为两行：
**第一行**（操作按钮）:
```
[刷新] [发布到小红书]
```
**第二行**（样式控制）:
```
[模板选择▼] [主题选择▼] [字体选择▼] 字体大小[- +]
```
## 🔧 修改内容
### 1. 文件：`src/xiaohongshu/preview-view.ts`
#### 1.1 添加回调函数属性
```typescript
// 回调函数
onRefreshCallback?: () => Promise<void>;
onPublishCallback?: () => Promise<void>;
```
#### 1.2 重构 `buildTopToolbar()` 方法
**原布局**（单行）:
```
模板 [▼] | 主题 [▼] | 字体 [▼] | 字体大小 [-][16][+]
```
**新布局**（两行）:
```html
<!-- 第一行：操作按钮 -->
<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>
```
**样式调整**:
```typescript
// 工具栏容器
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 添加回调方法
```typescript
/**
* 刷新按钮点击
*/
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()` 方法
**添加回调函数注入**:
```typescript
private switchToXiaohongshuMode() {
// ... 原有代码 ...
if (!this._xiaohongshuPreview) {
// ... 创建预览视图 ...
// 设置回调函数
this._xiaohongshuPreview.onRefreshCallback = async () => {
await this.onXiaohongshuRefresh();
};
this._xiaohongshuPreview.onPublishCallback = async () => {
await this.onXiaohongshuPublish();
};
this._xiaohongshuPreview.build();
}
// ... 原有代码 ...
}
```
#### 2.2 添加回调实现方法
```typescript
/**
* 小红书预览的刷新回调
*/
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 [→] │
├────────────────────────────────────────────────────┤
│ [⬇当前页切图] [⬇⬇全部页切图] │
└────────────────────────────────────────────────────┘
```
### 功能对比
| 功能 | 修改前 | 修改后 | 变化 |
|-----|--------|--------|------|
| 刷新 | ❌ 无 | ✅ 有 | 新增 |
| 发布到小红书 | ⚠️ 需要切换界面 | ✅ 直接显示 | 增强 |
| 模板选择 | ✅ 有 | ✅ 有 | 保持 |
| 主题选择 | ✅ 有 | ✅ 有 | 保持 |
| 字体选择 | ✅ 有 | ✅ 有 | 保持 |
| 字号调整 | ✅ 有 | ✅ 有 | 保持 |
| 分页导航 | ✅ 有 | ✅ 有 | 保持 |
| 当前页切图 | ✅ 有 | ✅ 有 | 保持 |
| 全部页切图 | ✅ 有 | ✅ 有 | 保持 |
## ✅ 测试验证
### 编译测试
```bash
$ npm run build
> note-to-mp@1.3.0 build
> tsc -noEmit -skipLibCheck && node esbuild.config.mjs production
✅ 编译成功，无错误
```
### 功能测试清单
#### 基础测试
- [ ] 平台切换：微信 → 小红书
- [ ] 界面显示：两行工具栏正确显示
- [ ] 按钮样式：刷新（绿色）、发布（红色）
#### 刷新功能测试
- [ ] 点击刷新按钮
- [ ] 检查是否重新加载CSS
- [ ] 检查预览是否更新
- [ ] 验证 Notice 提示
#### 发布功能测试
- [ ] 点击发布按钮
- [ ] 检查是否调用 postToXiaohongshu()
- [ ] 验证发布流程
#### 样式控制测试
- [ ] 模板选择（占位）
- [ ] 主题切换
- [ ] 字体切换
- [ ] 字号调整（+/-）
#### 切图功能测试
- [ ] 当前页切图
- [ ] 全部页切图
- [ ] 文件命名正确
- [ ] 保存路径正确
## 🎯 优化建议
### 短期优化（v1.1）
1. **按钮悬停效果**
```css
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_PREVIEW_GUIDE.md)
- 功能总结: [XIAOHONGSHU_FEATURE_SUMMARY.md](XIAOHONGSHU_FEATURE_SUMMARY.md)
- 界面布局: [XIAOHONGSHU_UI_LAYOUT.md](XIAOHONGSHU_UI_LAYOUT.md)
- 主仓库: [note2mp](https://github.com/your-repo/note2mp)
## 📞 问题反馈
如有问题，请在以下渠道反馈：
1. GitHub Issues
2. 插件设置页面的反馈入口
3. 开发者邮箱
---
**修改状态**: ✅ 完成
**编译状态**: ✅ 通过
**测试状态**: ⏳ 待用户测试
**文档状态**: ✅ 已更新