106 lines
2.6 KiB
Markdown
106 lines
2.6 KiB
Markdown
# Swipe 切换功能优化
|
||
|
||
## 问题描述
|
||
|
||
之前的实现中，swipe 切换按钮只在**最新消息**上显示，这导致用户无法查看和切换历史消息的不同版本。
|
||
|
||
## SillyTavern 的设计
|
||
|
||
在 SillyTavern 中，**所有包含多个版本的 AI 消息**都会显示 swipe 切换按钮，用户可以随时查看和切换任何消息的不同版本。
|
||
|
||
## 修复内容
|
||
|
||
### 1. **移除 isLatestMessage 限制**
|
||
|
||
**修改前：**
|
||
```jsx
|
||
{hasSwipes && !isUser && isLatestMessage && (
|
||
<div className="swipe-controls">
|
||
...
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
**修改后：**
|
||
```jsx
|
||
{/* ✅ Swipe 控制按钮 - 所有有 swipe 的 AI 消息都显示 */}
|
||
{hasSwipes && !isUser && (
|
||
<div className="swipe-controls">
|
||
...
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
### 2. **添加悬停提示**
|
||
|
||
为按钮添加了 `title` 属性，提供更好的用户体验：
|
||
- ◀ 按钮：`title="上一个版本"`
|
||
- ▶ 按钮：`title="下一个版本"`
|
||
- 计数器：`title={`共 ${message.swipes.length} 个版本`}`
|
||
|
||
### 3. **优化样式设计**
|
||
|
||
参考 SillyTavern 的风格，重新设计了 swipe 控制按钮：
|
||
|
||
#### 容器样式
|
||
- 居中对齐
|
||
- 轻微背景色区分
|
||
- 圆角边框
|
||
- 自适应宽度
|
||
|
||
#### 按钮样式
|
||
- 清晰的边框和背景
|
||
- 悬停时高亮显示（蓝色主题）
|
||
- 悬停时有轻微的向上动画
|
||
- 禁用状态降低透明度
|
||
- 最小宽度确保视觉一致性
|
||
|
||
#### 计数器样式
|
||
- 加粗字体突出显示
|
||
- 独立的背景色块
|
||
- 居中对齐的数字
|
||
- 最小宽度保持视觉稳定
|
||
|
||
## 视觉效果
|
||
|
||
### 正常状态
|
||
```
|
||
┌─────────────────────┐
|
||
│ [◀] 2/5 [▶] │
|
||
└─────────────────────┘
|
||
```
|
||
|
||
### 悬停状态
|
||
- 按钮变为蓝色高亮
|
||
- 轻微向上移动
|
||
- 显示阴影效果
|
||
|
||
### 禁用状态
|
||
- 第一个消息：◀ 按钮禁用
|
||
- 最后一个消息：▶ 按钮禁用
|
||
- 禁用的按钮透明度降低
|
||
|
||
## 用户体验提升
|
||
|
||
1. **完整性**：可以查看和切换任何消息的版本，不仅限于最新消息
|
||
2. **一致性**：与 SillyTavern 的行为保持一致
|
||
3. **易用性**：添加了悬停提示，用户清楚每个按钮的功能
|
||
4. **美观性**：优化的样式更符合整体设计风格
|
||
|
||
## 技术细节
|
||
|
||
### 文件修改
|
||
- `ChatBox.jsx`：移除 `isLatestMessage` 条件判断，添加 title 属性
|
||
- `ChatBox.css`：完全重写 swipe 控件样式
|
||
|
||
### 兼容性
|
||
- 不影响现有功能
|
||
- 向后兼容
|
||
- 性能无影响
|
||
|
||
## 未来改进
|
||
|
||
1. 可以添加键盘快捷键支持（如 Alt+←/→ 切换版本）
|
||
2. 可以添加 swipe 版本的预览功能
|
||
3. 可以添加批量管理 swipe 版本的功能
|