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

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>