feat: add clear-all button to Dashboard quick actions

This commit is contained in:
2026-05-14 22:01:54 +08:00
parent 809cc5fd81
commit 0d378b9f35
+50 -1
View File
@@ -183,6 +183,18 @@
<span class="action-desc">处理Excel生成采购单</span>
</div>
</button>
<button class="action-btn action-btn-danger" @click="clearAll" :disabled="processing">
<div class="action-icon danger">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<polyline points="3,6 5,6 21,6"/>
<path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6M8,6V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V6"/>
</svg>
</div>
<div class="action-info">
<span class="action-name">清除全部</span>
<span class="action-desc">删除所有文件和处理记录</span>
</div>
</button>
</div>
</div>
</div>
@@ -192,7 +204,7 @@
<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Document, Grid } from '@element-plus/icons-vue'
import { useProcessingStore } from '../stores/processing'
import api from '../api'
@@ -402,6 +414,33 @@ const runPipeline = () => doAction('/processing/pipeline')
const runOcr = () => doAction('/processing/ocr-batch')
const runExcel = () => doAction('/processing/excel')
async function clearAll(): Promise<void> {
try {
await ElMessageBox.confirm(
'将删除 input、output、result 目录下所有文件,并清除全部处理记录。此操作不可撤销,是否继续?',
'清除全部数据',
{ type: 'warning', confirmButtonText: '确认清除', cancelButtonText: '取消' }
)
} catch { return }
processing.value = true
try {
await Promise.all([
api.post('/files/clear/input'),
api.post('/files/clear/output'),
api.post('/files/clear/result'),
api.delete('/tasks'),
api.post('/files/relations/sync'),
])
ElMessage.success('已清除所有文件和处理记录')
refreshStats()
} catch (err: any) {
ElMessage.error(err.response?.data?.detail || '清除失败')
} finally {
processing.value = false
}
}
// Auto-refresh stats when any task completes or fails
watch(
() => visibleTasks.value.map(t => t.status),
@@ -674,6 +713,16 @@ onMounted(() => {
color: #525252;
}
.action-icon.danger {
background: rgba(239,68,68,0.08);
color: #ef4444;
}
.action-btn-danger:hover:not(:disabled) {
border-color: #fca5a5;
background: #fef2f2;
}
.action-info {
display: flex;
flex-direction: column;