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"
          :class="cardClasses"
          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
              v-if="secondaryText"
              type="button"
              class="shared-confirm-btn secondary"
              :class="secondaryTone"
              :disabled="busy"
              @click="$emit('secondary')"
            >
              <i v-if="secondaryIcon" :class="secondaryIcon"></i>
              <span>{{ secondaryText }}</span>
            </button>
            <button
              type="button"
              class="shared-confirm-btn confirm"
              :class="confirmTone"
              :disabled="busy || confirmDisabled"
              @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: '取消' },
  secondaryText: { type: String, default: '' },
  secondaryTone: { type: String, default: 'warning' },
  secondaryIcon: { type: String, default: '' },
  confirmText: { type: String, default: '确认' },
  busyText: { type: String, default: '处理中...' },
  confirmTone: { type: String, default: 'primary' },
  confirmIcon: { type: String, default: '' },
  confirmDisabled: { type: Boolean, default: false },
  busy: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
  size: { type: String, default: 'default' },
  actionsAlign: { type: String, default: 'end' }
})

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

const titleId = computed(() => `shared-confirm-title-${instance?.uid || 'dialog'}`)
const cardClasses = computed(() => [
  `shared-confirm-card--${props.size}`,
  `shared-confirm-actions-${props.actionsAlign}`
])

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: 20px;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.shared-confirm-card {
  width: min(480px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
  border-radius: 4px;
  background:
    radial-gradient(circle at top left, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.10), 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);
  overflow: hidden;
}

.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: var(--theme-primary-soft);
  color: var(--theme-primary-active);
}

.shared-confirm-badge.warning {
  background: var(--warning-soft);
  color: var(--warning-active);
}

.shared-confirm-badge.danger {
  background: var(--danger-soft);
  color: var(--danger-hover);
}

.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;
  min-height: 0;
  max-height: min(380px, calc(100dvh - 300px));
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

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

.shared-confirm-card.shared-confirm-actions-start .shared-confirm-actions {
  justify-content: flex-start;
}

.shared-confirm-card.shared-confirm-actions-center .shared-confirm-actions {
  justify-content: center;
}

.shared-confirm-card.shared-confirm-actions-end .shared-confirm-actions {
  justify-content: flex-end;
}

.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: 6px;
  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.secondary {
  border: 1px solid rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.92);
  color: #b45309;
}

.shared-confirm-btn.secondary.primary {
  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
  background: var(--theme-primary-soft);
  color: var(--theme-primary-active);
}

.shared-confirm-btn.secondary.danger {
  border-color: rgba(var(--danger-rgb), 0.24);
  background: var(--danger-soft);
  color: var(--danger-hover);
}

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

.shared-confirm-btn.confirm.primary {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
  box-shadow: 0 12px 24px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.20);
}

.shared-confirm-btn.confirm.danger {
  background: linear-gradient(135deg, var(--danger), var(--danger-hover));
  box-shadow: 0 12px 24px rgba(var(--danger-rgb), 0.22);
}

.shared-confirm-btn.cancel:hover:not(:disabled) {
  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
  color: var(--theme-primary-active);
}

.shared-confirm-btn.secondary:hover:not(:disabled) {
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(254, 243, 199, 0.96);
}

.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);
}

.shared-confirm-card--compact {
  width: min(360px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  gap: 8px;
  padding: 16px;
  border-radius: 4px;
  background: #fff;
}

.shared-confirm-card--review {
  width: min(560px, calc(100vw - 40px));
}

.shared-confirm-card--review .shared-confirm-body {
  max-height: min(420px, calc(100dvh - 292px));
}

.shared-confirm-card--approval {
  width: min(460px, calc(100vw - 40px));
  gap: 10px;
  padding: 18px 20px;
  border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.14);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
}

.shared-confirm-card--approval .shared-confirm-badge {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
}

.shared-confirm-card--approval h4 {
  font-size: 20px;
  line-height: 1.38;
  font-weight: 850;
}

.shared-confirm-card--approval p {
  max-width: 34em;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.shared-confirm-card--approval .shared-confirm-body {
  gap: 8px;
  max-height: min(270px, calc(100dvh - 238px));
}

.shared-confirm-card--approval .shared-confirm-actions {
  gap: 8px;
  padding-top: 2px;
}

.shared-confirm-card--approval .shared-confirm-btn {
  min-width: 118px;
  min-height: 38px;
  border-radius: 6px;
  font-size: 13px;
}

.shared-confirm-card--approval .shared-confirm-btn.confirm.primary {
  box-shadow: 0 10px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
}

.shared-confirm-card--destructive {
  width: min(420px, calc(100vw - 40px));
  gap: 12px;
  padding: 20px 22px;
  border-color: rgba(var(--danger-rgb), 0.16);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.97));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.shared-confirm-card--destructive .shared-confirm-badge {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
}

.shared-confirm-card--destructive h4 {
  font-size: 19px;
  line-height: 1.42;
  font-weight: 850;
}

.shared-confirm-card--destructive p {
  max-width: 34em;
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

.shared-confirm-card--destructive .shared-confirm-actions {
  gap: 8px;
  padding-top: 2px;
}

.shared-confirm-card--destructive .shared-confirm-btn {
  min-width: 112px;
  min-height: 38px;
  border-radius: 6px;
  font-size: 13px;
}

.shared-confirm-card--destructive .shared-confirm-btn.confirm.danger {
  box-shadow: 0 10px 20px rgba(var(--danger-rgb), 0.18);
}

.shared-confirm-card--compact h4 {
  font-size: 15px;
  line-height: 1.35;
}

.shared-confirm-card--compact p {
  font-size: 12px;
  line-height: 1.55;
}

.shared-confirm-card--compact .shared-confirm-actions {
  gap: 6px;
}

.shared-confirm-card--compact .shared-confirm-btn {
  min-width: 76px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
}

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

  .shared-confirm-card {
    width: min(100%, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 20px;
    border-radius: 4px;
  }

  .shared-confirm-body {
    max-height: min(360px, calc(100dvh - 260px));
  }

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

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

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