195 lines
4.4 KiB
Markdown
195 lines
4.4 KiB
Markdown
# 世界书删除确认弹窗移除
|
||
|
||
## 📋 修改内容
|
||
|
||
移除了世界书模块中所有的浏览器级别确认弹窗（`confirm`），改为直接执行删除操作。
|
||
|
||
---
|
||
|
||
## ✅ 已移除的确认弹窗
|
||
|
||
### 1. 删除世界书条目
|
||
**位置**: `WorldBook.jsx` 第338-349行
|
||
|
||
**修改前**:
|
||
```javascript
|
||
const handleDeleteEntry = async () => {
|
||
if (!currentEntry || !currentWorldBook) return;
|
||
|
||
if (confirm('确定要删除此条目吗？')) {
|
||
try {
|
||
await deleteWorldBookEntry(currentWorldBook.name, currentEntry.uid);
|
||
setShowEditPanel(false);
|
||
setCurrentEntry(null);
|
||
await fetchWorldBookEntries(currentWorldBook.name, currentPage, pageSize);
|
||
} catch (err) {
|
||
console.error('删除条目失败:', err);
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
const handleDeleteEntry = async () => {
|
||
if (!currentEntry || !currentWorldBook) return;
|
||
|
||
try {
|
||
await deleteWorldBookEntry(currentWorldBook.name, currentEntry.uid);
|
||
setShowEditPanel(false);
|
||
setCurrentEntry(null);
|
||
await fetchWorldBookEntries(currentWorldBook.name, currentPage, pageSize);
|
||
} catch (err) {
|
||
console.error('删除条目失败:', err);
|
||
}
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 2. 删除世界书
|
||
**位置**: `WorldBook.jsx` 第354-365行
|
||
|
||
**修改前**:
|
||
```javascript
|
||
const handleDeleteWorldBook = async () => {
|
||
if (!currentWorldBook) return;
|
||
|
||
if (confirm(`确定要删除世界书 "${currentWorldBook.name}" 吗？`)) {
|
||
try {
|
||
await deleteWorldBook(currentWorldBook.name);
|
||
resetCurrentWorldBook();
|
||
} catch (err) {
|
||
console.error('删除世界书失败:', err);
|
||
}
|
||
}
|
||
};
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
const handleDeleteWorldBook = async () => {
|
||
if (!currentWorldBook) return;
|
||
|
||
try {
|
||
await deleteWorldBook(currentWorldBook.name);
|
||
resetCurrentWorldBook();
|
||
} catch (err) {
|
||
console.error('删除世界书失败:', err);
|
||
}
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
### 3. 编辑面板中的删除按钮
|
||
**位置**: `WorldBook.jsx` 第1086-1096行
|
||
|
||
**修改前**:
|
||
```jsx
|
||
<button
|
||
className="btn btn-danger"
|
||
onClick={() => {
|
||
if (window.confirm('确定要删除这个条目吗？')) {
|
||
handleDeleteEntry();
|
||
}
|
||
}}
|
||
>
|
||
删除条目
|
||
</button>
|
||
```
|
||
|
||
**修改后**:
|
||
```jsx
|
||
<button
|
||
className="btn btn-danger"
|
||
onClick={handleDeleteEntry}
|
||
>
|
||
删除条目
|
||
</button>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 影响范围
|
||
|
||
### 用户交互变化
|
||
|
||
**之前**:
|
||
1. 点击删除按钮
|
||
2. 弹出浏览器确认对话框
|
||
3. 用户点击"确定"或"取消"
|
||
4. 根据选择执行或删除操作
|
||
|
||
**现在**:
|
||
1. 点击删除按钮
|
||
2. 立即执行删除操作
|
||
3. 通过错误处理捕获异常
|
||
|
||
---
|
||
|
||
## ✨ 优势
|
||
|
||
1. **更流畅的用户体验**: 减少交互步骤，操作更快捷
|
||
2. **更现代的UI**: 避免使用浏览器原生弹窗，更符合现代Web应用风格
|
||
3. **代码简化**: 减少了条件判断和嵌套层级
|
||
4. **一致性**: 与其他删除操作保持一致（如果有其他模块也移除了confirm）
|
||
|
||
---
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 潜在风险
|
||
- 用户可能误操作删除重要数据
|
||
- 没有二次确认机制
|
||
|
||
### 建议的替代方案（可选）
|
||
如果未来需要添加确认机制，可以考虑：
|
||
1. **自定义模态框**: 使用项目统一的Modal组件
|
||
2. **Toast提示 + 撤销**: 删除后显示提示，提供短暂的撤销机会
|
||
3. **软删除**: 先标记为删除，稍后真正删除
|
||
|
||
---
|
||
|
||
## 🧪 测试建议
|
||
|
||
### 手动测试清单
|
||
|
||
- [ ] 在世界书列表中选择一个世界书
|
||
- [ ] 点击"删除"按钮，检查是否立即删除（无确认弹窗）
|
||
- [ ] 在条目编辑面板中点击"删除条目"按钮，检查是否立即删除
|
||
- [ ] 检查删除后的控制台是否有错误信息
|
||
- [ ] 检查删除后UI是否正确更新
|
||
|
||
### 边界情况测试
|
||
|
||
- [ ] 删除不存在的世界书（应该被前端校验拦截）
|
||
- [ ] 删除不存在的条目（应该被前端校验拦截）
|
||
- [ ] 网络请求失败时的错误处理
|
||
|
||
---
|
||
|
||
## 📝 相关代码位置
|
||
|
||
### 主要文件
|
||
- `frontend/src/components/SideBarLeft/tabs/WorldBook/WorldBook.jsx`
|
||
|
||
### 相关函数
|
||
- `handleDeleteEntry()` - 删除条目
|
||
- `handleDeleteWorldBook()` - 删除世界书
|
||
|
||
### Store函数
|
||
- `deleteWorldBookEntry()` - WorldBookSlice.jsx
|
||
- `deleteWorldBook()` - WorldBookSlice.jsx
|
||
|
||
---
|
||
|
||
## 🎯 总结
|
||
|
||
✅ **所有浏览器级别的确认弹窗已移除**
|
||
✅ **删除操作更加流畅和现代化**
|
||
✅ **代码结构更简洁**
|
||
✅ **用户体验得到提升**
|
||
|
||
如果需要添加更优雅的确认机制，建议使用项目统一的UI组件而非浏览器原生弹窗。
|