97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
Vue
<template>
|
||
<!-- 自建确认弹层：替代 window.confirm（后者在 Tauri webview 带 localhost:port 来源信息，无法去除）。
|
||
组件自包含：按钮样式内联，不依赖外部 .btn-*，便于在任何视图复用。 -->
|
||
<Transition name="confirm">
|
||
<div v-if="visible" class="confirm-mask" @click.self="$emit('result', false)">
|
||
<div class="confirm-box">
|
||
<div class="confirm-msg">{{ msg }}</div>
|
||
<div class="confirm-actions">
|
||
<button class="confirm-btn confirm-btn--cancel" @click="$emit('result', false)">{{ $t('common.cancel') }}</button>
|
||
<button class="confirm-btn confirm-btn--danger" @click="$emit('result', true)">{{ dangerLabel || $t('common.confirm') }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
withDefaults(defineProps<{
|
||
visible: boolean
|
||
msg: string
|
||
/** 危险按钮文案；不传则回退到 common.confirm(语义中性，删除等场景应显式传 common.delete) */
|
||
dangerLabel?: string
|
||
}>(), {
|
||
dangerLabel: '',
|
||
})
|
||
|
||
defineEmits<{
|
||
result: [ok: boolean]
|
||
}>()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.confirm-mask {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
.confirm-box {
|
||
background: var(--df-bg-card, #fff);
|
||
border: 0.5px solid var(--df-border, #ddd);
|
||
border-radius: var(--df-radius-lg, 8px);
|
||
padding: 20px 24px;
|
||
min-width: 280px;
|
||
max-width: 360px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.confirm-msg {
|
||
font-size: 13px;
|
||
color: var(--df-text, #333);
|
||
line-height: 1.5;
|
||
margin-bottom: 16px;
|
||
}
|
||
.confirm-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
}
|
||
.confirm-btn {
|
||
padding: 5px 14px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
font-family: var(--df-font-sans);
|
||
border-radius: var(--df-radius-sm, 4px);
|
||
border: 0.5px solid var(--df-border, #ddd);
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.confirm-btn--cancel {
|
||
background: transparent;
|
||
color: var(--df-text-dim, #888);
|
||
}
|
||
.confirm-btn--cancel:hover {
|
||
background: var(--df-bg-card-hover, #f0f0f0);
|
||
color: var(--df-text, #333);
|
||
}
|
||
.confirm-btn--danger {
|
||
background: var(--df-danger, #e5484d);
|
||
color: #fff;
|
||
border-color: var(--df-danger, #e5484d);
|
||
}
|
||
.confirm-btn--danger:hover {
|
||
filter: brightness(1.1);
|
||
}
|
||
.confirm-enter-active,
|
||
.confirm-leave-active {
|
||
transition: opacity 0.15s;
|
||
}
|
||
.confirm-enter-from,
|
||
.confirm-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|