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>
--- a/apps/extension/src/options/pages/MorePage.vue
+++ b/apps/extension/src/options/pages/MorePage.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { getToken, setToken } from "../../lib/extStorage";
+import BbConfirmModal from "../../components/BbConfirmModal.vue";

 const router = useRouter();

@@ -21,12 +22,30 @@ function openWeb() {
  else window.open(url, "_blank", "noopener,noreferrer");
 }

-async function logout() {
+const logoutModalOpen = ref(false);
+const logoutStep = ref(1);
+
+function startLogout() {
+  logoutStep.value = 1;
+  logoutModalOpen.value = true;
+}
+
+async function confirmLogout() {
+  if (logoutStep.value === 1) {
+    logoutStep.value = 2;
+    return;
+  }
  await setToken("");
+  logoutModalOpen.value = false;
  await refresh();
  await router.replace("/login");
 }

+function cancelLogout() {
+  logoutModalOpen.value = false;
+  logoutStep.value = 1;
+}
+
 onMounted(refresh);
 </script>

@@ -38,9 +57,20 @@ onMounted(refresh);

    <div class="card">
      <button class="btn" type="button" @click="openWeb">跳转 Web</button>
-      <button class="btn btn--secondary" type="button" @click="logout">退出登录</button>
+      <button class="btn btn--secondary" type="button" @click="startLogout">退出登录</button>
      <p class="hint">Web 地址来自环境变量：VITE_WEB_BASE_URL</p>
    </div>
+
+    <BbConfirmModal
+      v-model="logoutModalOpen"
+      title="退出登录"
+      :message="logoutStep === 1 ? '退出以后无法同步书签。' : '你确定要退出吗？'"
+      :confirm-text="logoutStep === 1 ? '继续' : '确定退出'"
+      cancel-text="取消"
+      :danger="logoutStep === 2"
+      @confirm="confirmLogout"
+      @cancel="cancelLogout"
+    />
  </section>
 </template>

--- a/apps/extension/src/options/pages/MyPage.vue
+++ b/apps/extension/src/options/pages/MyPage.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref } from "vue";
 import { apiFetch } from "../../lib/api";
 import { getToken } from "../../lib/extStorage";
 import { listLocalBookmarks, markLocalDeleted, upsertLocalBookmark } from "../../lib/localData";
+import BbConfirmModal from "../../components/BbConfirmModal.vue";

 const token = ref("");
 const loggedIn = computed(() => Boolean(token.value));
@@ -44,11 +45,30 @@ async function add() {

 async function remove(id) {
  if (mode.value !== "local") return;
-  if (!confirm("确定删除该书签？")) return;
+  pendingDeleteId.value = id;
+  deleteConfirmOpen.value = true;
+}
+
+const deleteConfirmOpen = ref(false);
+const pendingDeleteId = ref("");
+
+async function confirmDelete() {
+  const id = pendingDeleteId.value;
+  if (!id) {
+    deleteConfirmOpen.value = false;
+    return;
+  }
  await markLocalDeleted(id);
+  pendingDeleteId.value = "";
+  deleteConfirmOpen.value = false;
  await load();
 }

+function cancelDelete() {
+  pendingDeleteId.value = "";
+  deleteConfirmOpen.value = false;
+}
+
 onMounted(load);
 </script>

@@ -74,6 +94,17 @@ onMounted(load);
        <div class="muted">{{ b.url }}</div>
      </li>
    </ul>
+
+    <BbConfirmModal
+      v-model="deleteConfirmOpen"
+      title="删除书签"
+      message="确定删除该书签？"
+      confirm-text="删除"
+      cancel-text="取消"
+      :danger="true"
+      @confirm="confirmDelete"
+      @cancel="cancelDelete"
+    />
  </section>
 </template>

--- a/apps/extension/src/options/pages/PublicPage.vue
+++ b/apps/extension/src/options/pages/PublicPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { apiFetch } from "../../lib/api";

 const items = ref([]);
@@ -19,6 +19,21 @@ async function load() {
  }
 }

+let searchTimer = 0;
+watch(
+  () => q.value,
+  () => {
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      load();
+    }, 200);
+  }
+);
+
+onBeforeUnmount(() => {
+  window.clearTimeout(searchTimer);
+});
+
 onMounted(load);
 </script>

@@ -26,8 +41,10 @@ onMounted(load);
  <section>
    <h1>公开书签</h1>
    <div class="row">
-      <input v-model="q" class="input" placeholder="搜索" @keyup.enter="load" />
-      <button class="btn" :disabled="loading" @click="load">搜索</button>
+      <div class="searchWrap">
+        <input v-model="q" class="input input--withClear" placeholder="搜索" />
+        <button v-if="q.trim()" class="clearBtn" type="button" aria-label="清空搜索" @click="q = ''">×</button>
+      </div>
    </div>
    <p v-if="error" class="error">{{ error }}</p>
    <ul class="list">
@@ -41,7 +58,21 @@ onMounted(load);

 <style scoped>
 .row { display: flex; gap: 8px; margin: 12px 0; }
-.input { flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
+.searchWrap { flex: 1; position: relative; }
+.input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
+.input.input--withClear { padding-right: 40px; }
+.clearBtn {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid #e5e7eb;
+  background: white;
+  cursor: pointer;
+}
 .btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
 .btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
--- a/apps/extension/src/popup/PopupApp.vue
+++ b/apps/extension/src/popup/PopupApp.vue
@@ -253,7 +253,18 @@ watch(
      </div>

      <div class="row" style="margin-top: 8px;">
-        <input v-model="q" class="input" placeholder="搜索标题/链接" :disabled="!loggedIn" />
+        <div class="searchWrap">
+          <input v-model="q" class="input input--withClear" placeholder="搜索标题/链接" :disabled="!loggedIn" />
+          <button
+            v-if="q.trim()"
+            class="clearBtn"
+            type="button"
+            aria-label="清空搜索"
+            @click="q = ''"
+          >
+            ×
+          </button>
+        </div>
        <button class="btn btn--secondary" type="button" @click="loadAll" :disabled="!loggedIn || loading">刷新</button>
      </div>

@@ -389,6 +400,26 @@ button:disabled{ opacity: 0.6; cursor: not-allowed; }
  background: rgba(255,255,255,0.92);
 }

+.searchWrap{ position: relative; flex: 1; min-width: 0; }
+.input.input--withClear{ padding-right: 40px; }
+.clearBtn{
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  border: 1px solid var(--bb-border);
+  background: rgba(255,255,255,0.92);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: rgba(15, 23, 42, 0.7);
+  padding: 0;
+}
+.clearBtn:hover{ background: rgba(255,255,255,1); }
+
 .row{ display:flex; gap: 8px; align-items:center; margin-top: 10px; }
 .row .input{ margin-top: 0; }