140 lines
3.7 KiB
Markdown
140 lines
3.7 KiB
Markdown
# 问题解决总结
|
||
|
||
## 1. 模态框遮盖问题
|
||
|
||
**问题描述：**
|
||
在分类管理界面中，创建分类时弹出的模态框没有正确遮盖背景内容，导致模态框显示在背景元素之下。
|
||
|
||
**解决方案：**
|
||
修改了模态框的z-index值，确保其显示在其他元素之上：
|
||
|
||
```css
|
||
/* 弹窗 */
|
||
.dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgb(0 0 0 / 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2000; /* 提高z-index值 */
|
||
padding: 1rem;
|
||
}
|
||
```
|
||
|
||
**原因分析：**
|
||
- MainLayout.vue中的header使用了`z-index: 1000`
|
||
- reka-ui的DialogOverlay组件使用了`z-50`（z-index: 50）
|
||
- 将模态框的z-index设置为2000确保其显示在最上层
|
||
|
||
## 2. 分类创建后重复显示问题
|
||
|
||
**问题描述：**
|
||
创建分类后，分类列表界面显示重复的分类项，刷新后恢复正常。
|
||
|
||
**解决方案：**
|
||
修改了`createCategory`函数，添加重复检查逻辑：
|
||
|
||
```typescript
|
||
// 创建分类
|
||
async function createCategory() {
|
||
if (!newCategoryName.value.trim()) {
|
||
return
|
||
}
|
||
|
||
creating.value = true
|
||
error.value = null
|
||
|
||
try {
|
||
const data: CategoryCreateDto = { name: newCategoryName.value.trim() }
|
||
|
||
// 等待API响应完成
|
||
const newCategory = await categoryApi.create(data)
|
||
|
||
// 确保API返回的数据是完整的
|
||
if (newCategory && newCategory.id) {
|
||
// 检查是否已存在相同的分类，避免重复添加
|
||
const exists = categories.value.some(cat => cat.id === newCategory.id)
|
||
if (!exists) {
|
||
categories.value.push(newCategory)
|
||
newsStore.addCategory(newCategory)
|
||
}
|
||
}
|
||
|
||
newCategoryName.value = ''
|
||
showCreateDialog.value = false
|
||
} catch (err: any) {
|
||
error.value = err.message || '创建分类失败'
|
||
} finally {
|
||
creating.value = false
|
||
}
|
||
}
|
||
```
|
||
|
||
**原因分析：**
|
||
- 原始代码没有检查分类是否已存在，导致重复添加
|
||
- 添加了`exists`检查，确保不会重复添加相同ID的分类
|
||
- 确保只有在API完全响应并返回有效数据后，才会更新前端状态
|
||
|
||
## 3. Tauri环境下的确认对话框权限问题
|
||
|
||
**问题描述：**
|
||
在Tauri环境中，删除分类时出现"Uncaught (in promise) dialog.confirm not allowed"错误。
|
||
|
||
**解决方案：**
|
||
修改了删除分类的逻辑，使用Tauri的对话框API：
|
||
|
||
```typescript
|
||
// 删除分类
|
||
async function deleteCategory(id: number) {
|
||
const category = categories.value.find(c => c.id === id)
|
||
if (!category) return
|
||
|
||
// 检查是否有新闻
|
||
let confirmMessage = ''
|
||
if (category.newsCount && category.newsCount > 0) {
|
||
confirmMessage = `该分类下有 ${category.newsCount} 条新闻，确定要删除吗？`
|
||
} else {
|
||
confirmMessage = `确定要删除分类"${category.name}"吗？`
|
||
}
|
||
|
||
// 使用Tauri对话框（如果可用）
|
||
if (window.__TAURI__?.dialog) {
|
||
const result = await window.__TAURI__.dialog.ask(confirmMessage)
|
||
if (!result) {
|
||
return
|
||
}
|
||
} else {
|
||
// 回退到原生confirm
|
||
if (!confirm(confirmMessage)) {
|
||
return
|
||
}
|
||
}
|
||
|
||
try {
|
||
await categoryApi.delete(id)
|
||
categories.value = categories.value.filter(c => c.id !== id)
|
||
newsStore.removeCategory(id)
|
||
} catch (err: any) {
|
||
error.value = err.message || '删除分类失败'
|
||
await fetchCategories()
|
||
}
|
||
}
|
||
```
|
||
|
||
**原因分析：**
|
||
- Tauri应用需要显式请求权限才能使用原生`confirm`对话框
|
||
- 使用Tauri的`dialog.ask()`方法替代原生`confirm`
|
||
- 添加了回退机制，确保在非Tauri环境中也能正常工作
|
||
|
||
## 总结
|
||
|
||
通过以上修改，解决了以下问题：
|
||
1. 模态框显示层级问题
|
||
2. 分类数据同步问题
|
||
3. Tauri环境下的权限问题
|
||
|
||
这些修改确保了分类管理功能的稳定性和正确性。 |