管理聊天按钮的添加、编辑、删除和保存
# 按钮管理面板 - 使用说明文档
## 脚本简介
按钮管理面板是一个用于 [fishpi.cn](https://fishpi.cn/) 网站的油猴脚本，允许用户方便地创建、编辑、删除和管理自定义聊天按钮。通过这个工具，用户可以快速发送预设的消息，提高聊天效率。
## 功能特性
- **自定义按钮管理**: 添加、编辑、删除自定义聊天按钮
- **按钮颜色个性化**: 支持多种按钮颜色选择（红色、蓝色、绿色、灰色、橙色）
- **点击次数统计**: 自动记录每个按钮的点击次数
- **配置导入导出**: 支持按钮配置的导入和导出，便于备份和迁移
- **面板拖拽功能**: 可拖动的管理面板，方便用户调整位置
- **直观的用户界面**: 现代化的UI设计，操作简单易用
- **实时通知反馈**: 操作成功或失败时的通知提示
### 按钮样式展示
支持多种颜色的按钮样式，满足不同用户的个性化需求：
## 使用说明
### 添加新按钮
1. 点击聊天界面中的「管理」按钮，打开按钮管理面板
2. 在「添加新按钮」区域填写：
- 按钮文本：按钮上显示的文字
- 触发消息：点击按钮时发送的消息内容
- 按钮颜色：选择按钮的显示颜色
3. 点击「添加按钮」完成创建
### 编辑现有按钮
1. 在按钮管理面板中，找到需要编辑的按钮
2. 点击该按钮右侧的「编辑」按钮
3. 在弹出的编辑对话框中修改相关信息
4. 点击「保存」完成更新
### 删除按钮
1. 在按钮管理面板中，找到需要删除的按钮
2. 点击该按钮右侧的「删除」按钮
3. 在确认对话框中点击「确定」完成删除
### 导入/导出配置
- **导出配置**: 点击管理面板中的「导出配置」按钮，将当前按钮配置保存为JSON文件
- **导入配置**: 点击「导入配置」按钮，选择之前导出的JSON配置文件进行恢复
## 技术实现
### 数据结构
按钮配置采用JSON格式存储，每个按钮包含以下属性：
```javascript
{
id: 'unique-id', // 按钮唯一标识符
textContent: '文本', // 按钮显示的文本
message: '发送内容', // 点击按钮时发送的消息
className: 'red', // 按钮颜色类名
count: 0 // 点击次数统计
}
```
### 存储机制
- 使用浏览器的 `localStorage` 保存按钮配置
- 存储键名为 `customButtonsConfig`
- 页面加载时自动从localStorage加载配置
- 添加、编辑、删除按钮时自动保存配置
### 界面设计
- 现代化的卡片式设计，带有悬停效果
- 渐变色按钮和过渡动画
- 响应式布局，适配不同屏幕尺寸
- 可拖动的面板，提升用户体验
## 文件结构
- `button_manager.js` - 主脚本文件，包含所有功能实现
- `button_manager.md` - 使用说明文档（本文档）
- `tail-button-config.json` - 按钮配置导出的默认文件名
## 注意事项
1. 请确保在 fishpi.cn 网站上使用此脚本
2. 按钮配置保存在浏览器本地，清除浏览器缓存或更换浏览器会导致配置丢失
3. 建议定期导出配置文件进行备份
4. 导入配置时请确保文件格式正确，避免导入无效数据
5. 点击按钮发送消息时，系统会自动增加该按钮的点击计数
## 更新日志
### v1.0.13
- 修复编辑按钮后点击次数显示为"未定义"的问题
- 优化保存逻辑，确保count属性始终被正确保留
### v1.0.12
- 完善按钮点击次数统计功能
- 优化界面样式和交互体验
### v1.0.11
- 增加配置导入导出功能
- 添加面板拖拽功能
### v1.0.10
- 初始版本发布
- 实现基本的按钮管理功能
---
