fix(frontend): replace share delete confirm with in-app modal
This commit is contained in:
@@ -2364,6 +2364,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 配置引导弹窗 -->
|
<!-- OSS 配置引导弹窗 -->
|
||||||
<div v-if="showOssGuideModal" class="modal-overlay" @mousedown.self="handleModalMouseDown" @mouseup.self="handleModalMouseUp('showOssGuideModal', $event)">
|
<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;">
|
<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)">
|
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
|
||||||
<i class="fas fa-copy"></i> 复制链接
|
<i class="fas fa-copy"></i> 复制链接
|
||||||
</button>
|
</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> 删除
|
<i class="fas fa-trash"></i> 删除
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -3096,7 +3117,7 @@
|
|||||||
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
|
<button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)">
|
||||||
<i class="fas fa-copy"></i> 复制链接
|
<i class="fas fa-copy"></i> 复制链接
|
||||||
</button>
|
</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> 删除
|
<i class="fas fa-trash"></i> 删除
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -3154,7 +3175,7 @@
|
|||||||
<button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)">
|
<button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)">
|
||||||
<i class="fas fa-copy"></i> 复制链接
|
<i class="fas fa-copy"></i> 复制链接
|
||||||
</button>
|
</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> 删除
|
<i class="fas fa-trash"></i> 删除
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -94,6 +94,14 @@ createApp({
|
|||||||
shares: [],
|
shares: [],
|
||||||
directLinks: [],
|
directLinks: [],
|
||||||
directLinksLoading: false,
|
directLinksLoading: false,
|
||||||
|
showDeleteConfirmModal: false,
|
||||||
|
deleteConfirm: {
|
||||||
|
type: '', // share | direct_link
|
||||||
|
id: null,
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
loading: false
|
||||||
|
},
|
||||||
showShareFileModal: false,
|
showShareFileModal: false,
|
||||||
creatingShare: false, // 创建分享中状态
|
creatingShare: false, // 创建分享中状态
|
||||||
shareFileForm: {
|
shareFileForm: {
|
||||||
@@ -2965,9 +2973,29 @@ handleDragLeave(e) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async deleteDirectLink(id) {
|
requestDeleteDirectLink(id, event = null) {
|
||||||
if (!window.confirm('确定要删除这个直链吗?')) return;
|
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 {
|
try {
|
||||||
const response = await axios.delete(`${this.apiBase}/api/direct-link/${id}`);
|
const response = await axios.delete(`${this.apiBase}/api/direct-link/${id}`);
|
||||||
if (response.data?.success) {
|
if (response.data?.success) {
|
||||||
@@ -3000,9 +3028,29 @@ handleDragLeave(e) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
async deleteShare(id) {
|
requestDeleteShare(id, event = null) {
|
||||||
if (!window.confirm('确定要删除这个分享吗?')) return;
|
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 {
|
try {
|
||||||
const response = await axios.delete(`${this.apiBase}/api/share/${id}`);
|
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) {
|
formatExpireTime(expiresAt) {
|
||||||
if (!expiresAt) return '永久有效';
|
if (!expiresAt) return '永久有效';
|
||||||
|
|||||||
Reference in New Issue
Block a user