fix(frontend): replace share delete confirm with in-app modal

This commit is contained in:
2026-02-18 22:48:31 +08:00
parent fd236e6949
commit bb8a4ea386
2 changed files with 110 additions and 7 deletions

View File

@@ -2364,6 +2364,27 @@
</div>
</div>
<!-- 删除确认模态框(替代浏览器 confirm避免误删 -->
<div v-if="showDeleteConfirmModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showDeleteConfirmModal', $event)">
<div class="modal-content" @click.stop style="max-width: 440px;">
<h3 style="margin-bottom: 12px; color: #ef4444;">
<i class="fas fa-triangle-exclamation"></i> {{ deleteConfirm.title || '确认删除' }}
</h3>
<p style="margin: 0; color: var(--text-secondary); line-height: 1.7;">
{{ deleteConfirm.message || '确认执行删除操作?' }}
</p>
<div style="display: flex; gap: 10px; margin-top: 20px;">
<button class="btn btn-secondary" @click="closeDeleteConfirmModal()" :disabled="deleteConfirm.loading" style="flex: 1;">
<i class="fas fa-times"></i> 取消
</button>
<button class="btn" style="background: #ef4444; color: white; flex: 1;" @click="confirmDeleteAction()" :disabled="deleteConfirm.loading">
<i class="fas" :class="deleteConfirm.loading ? 'fa-spinner fa-spin' : 'fa-trash'"></i>
{{ deleteConfirm.loading ? '删除中...' : '确定删除' }}
</button>
</div>
</div>
</div>
<!-- OSS 配置引导弹窗 -->
<div v-if="showOssGuideModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showOssGuideModal', $event)">
<div class="modal-content" @click.stop style="max-width: 520px; border-radius: 16px; overflow: hidden;">
@@ -3057,7 +3078,7 @@
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
<i class="fas fa-copy"></i> 复制链接
</button>
<button class="btn share-card__delete-btn" style="background: #ef4444; color: white;" @click.stop="deleteShare(share.id)">
<button class="btn share-card__delete-btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteShare(share.id, $event)">
<i class="fas fa-trash"></i> 删除
</button>
</div>
@@ -3096,7 +3117,7 @@
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
<i class="fas fa-copy"></i> 复制链接
</button>
<button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteShare(share.id)">
<button class="btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteShare(share.id, $event)">
<i class="fas fa-trash"></i> 删除
</button>
</div>
@@ -3154,7 +3175,7 @@
<button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)">
<i class="fas fa-copy"></i> 复制链接
</button>
<button class="btn" style="background: #ef4444; color: white;" @click.stop="deleteDirectLink(link.id)">
<button class="btn" style="background: #ef4444; color: white;" @click.stop="requestDeleteDirectLink(link.id, $event)">
<i class="fas fa-trash"></i> 删除
</button>
</div>

View File

@@ -94,6 +94,14 @@ createApp({
shares: [],
directLinks: [],
directLinksLoading: false,
showDeleteConfirmModal: false,
deleteConfirm: {
type: '', // share | direct_link
id: null,
title: '',
message: '',
loading: false
},
showShareFileModal: false,
creatingShare: false, // 创建分享中状态
shareFileForm: {
@@ -2965,9 +2973,29 @@ handleDragLeave(e) {
}
},
async deleteDirectLink(id) {
if (!window.confirm('确定要删除这个直链吗?')) return;
requestDeleteDirectLink(id, event = null) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
const linkId = parseInt(id, 10);
if (!Number.isFinite(linkId) || linkId <= 0) {
this.showToast('warning', '提示', '无效的直链ID');
return;
}
this.deleteConfirm = {
type: 'direct_link',
id: linkId,
title: '删除直链',
message: '确定要删除这个直链吗?删除后将无法继续访问。',
loading: false
};
this.showDeleteConfirmModal = true;
},
async deleteDirectLink(id) {
try {
const response = await axios.delete(`${this.apiBase}/api/direct-link/${id}`);
if (response.data?.success) {
@@ -3000,9 +3028,29 @@ handleDragLeave(e) {
}
},
async deleteShare(id) {
if (!window.confirm('确定要删除这个分享吗?')) return;
requestDeleteShare(id, event = null) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
const shareId = parseInt(id, 10);
if (!Number.isFinite(shareId) || shareId <= 0) {
this.showToast('warning', '提示', '无效的分享ID');
return;
}
this.deleteConfirm = {
type: 'share',
id: shareId,
title: '删除分享',
message: '确定要删除这个分享吗?删除后外链将立即失效。',
loading: false
};
this.showDeleteConfirmModal = true;
},
async deleteShare(id) {
try {
const response = await axios.delete(`${this.apiBase}/api/share/${id}`);
@@ -3016,6 +3064,40 @@ handleDragLeave(e) {
}
},
closeDeleteConfirmModal(force = false) {
if (this.deleteConfirm.loading && !force) return;
this.showDeleteConfirmModal = false;
this.deleteConfirm = {
type: '',
id: null,
title: '',
message: '',
loading: false
};
},
async confirmDeleteAction() {
if (this.deleteConfirm.loading) return;
const { type, id } = this.deleteConfirm;
if (!type || !id) {
this.closeDeleteConfirmModal(true);
return;
}
this.deleteConfirm.loading = true;
try {
if (type === 'share') {
await this.deleteShare(id);
} else if (type === 'direct_link') {
await this.deleteDirectLink(id);
}
this.closeDeleteConfirmModal(true);
} catch (error) {
console.error('执行删除操作失败:', error);
this.deleteConfirm.loading = false;
}
},
// 格式化到期时间显示
formatExpireTime(expiresAt) {
if (!expiresAt) return '永久有效';