feat: 添加确认模态框组件并在多个页面中实现删除和退出确认功能

2026-01-19 10:00:21 +08:00
parent dbeb181e5d
commit 944836c748
10 changed files with 503 additions and 25 deletions
--- a/apps/extension/src/components/BbConfirmModal.vue
+++ b/apps/extension/src/components/BbConfirmModal.vue
@@ -0,0 +1,154 @@
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue";
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  title: { type: String, default: "请确认" },
+  message: { type: String, default: "" },
+  confirmText: { type: String, default: "确定" },
+  cancelText: { type: String, default: "取消" },
+  danger: { type: Boolean, default: false },
+  maxWidth: { type: String, default: "520px" }
+});
+
+const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);
+
+function cancel() {
+  emit("update:modelValue", false);
+  emit("cancel");
+}
+
+function confirm() {
+  emit("confirm");
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape") cancel();
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", onKeydown);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onKeydown);
+});
+</script>
+
+<template>
+  <teleport to="body">
+    <div v-if="modelValue" class="bb-modalOverlay" role="dialog" aria-modal="true">
+      <div class="bb-modalBackdrop" @click="cancel" />
+      <div class="bb-modalPanel" :style="{ maxWidth }">
+        <div class="bb-modalHeader">
+          <div class="bb-modalTitle">{{ title }}</div>
+          <button type="button" class="bb-modalClose" @click="cancel" aria-label="关闭">×</button>
+        </div>
+        <div class="bb-modalBody">
+          <div v-if="message" class="bb-modalMessage">{{ message }}</div>
+          <slot />
+          <div class="bb-modalActions">
+            <button type="button" class="bb-btn bb-btn--secondary" @click="cancel">{{ cancelText }}</button>
+            <button type="button" class="bb-btn" :class="danger ? 'bb-btn--danger' : ''" @click="confirm">{{ confirmText }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<style scoped>
+.bb-modalOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483500;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+.bb-modalBackdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.38);
+  backdrop-filter: blur(8px);
+}
+
+.bb-modalPanel {
+  position: relative;
+  width: min(100%, 560px);
+  max-height: min(84vh, 860px);
+  overflow: auto;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.22);
+  color: var(--bb-text);
+}
+
+.bb-modalHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
+}
+
+.bb-modalTitle {
+  font-weight: 900;
+}
+
+.bb-modalClose {
+  width: 34px;
+  height: 34px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  color: rgba(15, 23, 42, 0.75);
+}
+
+.bb-modalClose:hover {
+  background: rgba(255, 255, 255, 0.78);
+}
+
+.bb-modalBody {
+  padding: 14px;
+}
+
+.bb-modalMessage {
+  color: rgba(15, 23, 42, 0.78);
+  font-size: 13px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.bb-modalActions {
+  margin-top: 14px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.bb-btn {
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 14px;
+  padding: 10px 12px;
+  background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
+  color: white;
+  cursor: pointer;
+}
+
+.bb-btn--secondary {
+  background: rgba(255, 255, 255, 0.55);
+  color: var(--bb-text);
+  border-color: var(--bb-border);
+}
+
+.bb-btn--danger {
+  background: linear-gradient(135deg, #ef4444, #f97316);
+}
+</style>