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

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