feat(app): 添加文件清空确认对话框功能
- 引入 ConfirmClearDialog 组件用于清空文件确认 - 添加 clear-files-no-prompt 配置项控制是否显示确认弹窗 - 实现清空文件列表显示和确认逻辑 - 集成 Element Plus 图标组件库 - 优化日志输出格式增加空格分隔 - 重构配置写入方法使用统一的 configModel 枚举 - 添加事件监听处理清空文件操作 - 实现勾选不再提示选项并保存配置
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user