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

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>
 

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>
 

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