swipe、右键菜单

SWIPE_BUTTON_FIX.md

@@ -0,0 +1,105 @@
+# 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 版本的功能