feat(app): 添加文件清空确认对话框功能

- 引入 ConfirmClearDialog 组件用于清空文件确认
- 添加 clear-files-no-prompt 配置项控制是否显示确认弹窗
- 实现清空文件列表显示和确认逻辑
- 集成 Element Plus 图标组件库
- 优化日志输出格式增加空格分隔
- 重构配置写入方法使用统一的 configModel 枚举
- 添加事件监听处理清空文件操作
- 实现勾选不再提示选项并保存配置
This commit is contained in:
2026-05-01 20:45:17 +08:00
parent 03e4e6f45b
commit 3f6e999783
7 changed files with 195 additions and 33 deletions
@@ -0,0 +1,124 @@
<script lang="ts" setup>
import {ref} from 'vue'
import {WriteConfig} from "../../wailsjs/go/main/App";
import {configModel} from "@/model.ts";
import {EventsEmit} from "../../wailsjs/runtime";
import {InfoFilled} from '@element-plus/icons-vue'
const props = defineProps<{
visible: boolean
fileList: string[]
}>()
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void
// (e: 'confirm', dontShowAgain: boolean): void
}>()
const dontShowAgain = ref(false)
const handleClose = () => {
emit('update:visible', false)
EventsEmit('confirm-clear-files', false)
}
const handleConfirm = () => {
// emit('confirm', dontShowAgain.value)
emit('update:visible', false)
WriteConfig(configModel.ClearFilesNoPrompt, dontShowAgain.value)
EventsEmit('confirm-clear-files', true)
}
</script>
<template>
<el-dialog
:model-value="visible"
width="600px"
:close-on-click-modal="false"
@update:model-value="(val: boolean) => emit('update:visible', val)"
@close="handleClose"
align-center
>
<template #header>
是否确认清空上传文件
</template>
<div class="hint-text">以下文件将会被清空并移动到tmp文件夹进行上传,您是否确认</div>
<div class="dialog-content">
<div class="file-list">
<div v-for="(file, index) in fileList" :key="index" class="file-item">
{{ file }}
</div>
<div v-if="fileList.length === 0" class="empty-text">暂无文件</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<div class="dialog-footer-checkbox-container">
<el-checkbox v-model="dontShowAgain" label="下次清空文件不再弹出此弹窗确认"/>
<el-tooltip content="此弹窗会在首次运行时弹出您可以选择下次不再弹出此弹窗">
<el-icon>
<InfoFilled/>
</el-icon>
</el-tooltip>
</div>
<div>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">确认</el-button>
</div>
</div>
</template>
</el-dialog>
</template>
<style scoped>
.dialog-footer-checkbox-container {
display: flex;
align-items: center;
gap: 5px;
}
.dialog-footer-checkbox-container .el-icon {
color: #909399;
}
.dialog-content {
padding: 10px 0;
}
.hint-text {
font-size: 12px;
color: #909399;
}
.file-list {
max-height: 350px;
overflow-y: auto;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 8px;
}
.file-item {
padding: 6px 8px;
font-size: 14px;
color: #606266;
border-bottom: 1px solid #f0f0f0;
}
.file-item:last-child {
border-bottom: none;
}
.empty-text {
text-align: center;
color: #909399;
padding: 20px 0;
}
.dialog-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>