X-Financial/web/src/components/shared/ConfirmDialog.vue

<template>
  <Teleport to="body">
    <Transition name="shared-confirm">
      <div
        v-if="open"
        class="shared-confirm-mask"
        role="presentation"
        @click.self="handleMaskClose"
      >
        <section
          class="shared-confirm-card"
          role="alertdialog"
          aria-modal="true"
          :aria-labelledby="titleId"
          @click.stop
        >
          <span v-if="badge" class="shared-confirm-badge" :class="badgeTone">
            {{ badge }}
          </span>
          <h4 :id="titleId">{{ title }}</h4>
          <p v-if="description">{{ description }}</p>

          <div v-if="$slots.default" class="shared-confirm-body">
            <slot></slot>
          </div>

          <div class="shared-confirm-actions">
            <button
              type="button"
              class="shared-confirm-btn cancel"
              :disabled="busy"
              @click="handleCancel"
            >
              {{ cancelText }}
            </button>
            <button
              type="button"
              class="shared-confirm-btn confirm"
              :class="confirmTone"
              :disabled="busy"
              @click="$emit('confirm')"
            >
              <i v-if="confirmIcon" :class="busy ? 'mdi mdi-loading mdi-spin' : confirmIcon"></i>
              <span>{{ busy ? busyText : confirmText }}</span>
            </button>
          </div>
        </section>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'

const props = defineProps({
  open: { type: Boolean, default: false },
  badge: { type: String, default: '' },
  badgeTone: { type: String, default: 'info' },
  title: { type: String, required: true },
  description: { type: String, default: '' },
  cancelText: { type: String, default: '取消' },
  confirmText: { type: String, default: '确认' },
  busyText: { type: String, default: '处理中...' },
  confirmTone: { type: String, default: 'primary' },
  confirmIcon: { type: String, default: '' },
  busy: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true }
})

const emit = defineEmits(['close', 'cancel', 'confirm'])
const instance = getCurrentInstance()

const titleId = computed(() => `shared-confirm-title-${instance?.uid || 'dialog'}`)

function handleMaskClose() {
  if (!props.closeOnMask || props.busy) {
    return
  }

  emit('close')
}

function handleCancel() {
  if (props.busy) {
    return
  }

  emit('cancel')
  emit('close')
}
</script>

<style scoped>
.shared-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.shared-confirm-card {
  width: min(480px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.18);
}

.shared-confirm-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.shared-confirm-badge.info {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.shared-confirm-badge.warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.shared-confirm-badge.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.shared-confirm-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
}

.shared-confirm-card p {
  margin: 0;
  color: #5b6b83;
  font-size: 14px;
  line-height: 1.7;
}

.shared-confirm-body {
  display: grid;
  gap: 10px;
}

.shared-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.shared-confirm-btn {
  min-width: 140px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.shared-confirm-btn.cancel {
  border: 1px solid #d7e0ea;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
}

.shared-confirm-btn.confirm {
  border: 1px solid transparent;
  color: #fff;
}

.shared-confirm-btn.confirm.primary {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 12px 24px rgba(5, 150, 105, 0.22);
}

.shared-confirm-btn.confirm.danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
}

.shared-confirm-btn.cancel:hover:not(:disabled) {
  border-color: rgba(16, 185, 129, 0.3);
  color: #047857;
}

.shared-confirm-btn.confirm:hover:not(:disabled) {
  transform: translateY(-1px);
}

.shared-confirm-btn:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  box-shadow: none;
  transform: none;
}

.shared-confirm-enter-active,
.shared-confirm-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.shared-confirm-enter-from,
.shared-confirm-leave-to {
  opacity: 0;
}

.shared-confirm-enter-from .shared-confirm-card,
.shared-confirm-leave-to .shared-confirm-card {
  transform: translateY(8px) scale(0.98);
}

@media (max-width: 720px) {
  .shared-confirm-mask {
    padding: 18px;
  }

  .shared-confirm-card {
    padding: 20px;
    border-radius: 20px;
  }

  .shared-confirm-card h4 {
    font-size: 19px;
  }

  .shared-confirm-actions {
    flex-direction: column;
  }

  .shared-confirm-btn {
    width: 100%;
  }
}
</style>