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

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>

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

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

apps/web/src/App.vue

@@ -2,6 +2,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { RouterLink, RouterView, useRouter } from "vue-router";
 import { ensureMe, setToken, tokenRef, userRef } from "./lib/api";
+import BbModal from "./components/BbModal.vue";
 
 const router = useRouter();
 const loggedIn = computed(() => Boolean(tokenRef.value));
@@ -18,9 +19,37 @@ function closeMenu() {
 }
 
 async function logout() {
+  // kept for backward compatibility with template bindings; now opens custom modal
+  startLogout();
+}
+
+const logoutModalOpen = ref(false);
+const logoutStep = ref(1);
+
+function startLogout() {
+  logoutStep.value = 1;
+  logoutModalOpen.value = true;
+  closeMenu();
+}
+
+function cancelLogout() {
+  logoutModalOpen.value = false;
+  logoutStep.value = 1;
+}
+
+function onLogoutModalUpdate(v) {
+  if (!v) cancelLogout();
+  else logoutModalOpen.value = true;
+}
+
+async function confirmLogout() {
+  if (logoutStep.value === 1) {
+    logoutStep.value = 2;
+    return;
+  }
   setToken("");
   userRef.value = null;
-  closeMenu();
+  logoutModalOpen.value = false;
   await router.push("/");
 }
 
@@ -78,7 +107,7 @@ router.afterEach(() => {
           </button>
 
           <div v-if="menuOpen" class="menu" role="menu">
-            <RouterLink class="menuItem" to="/import" role="menuitem">导入 / 导出</RouterLink>
+            <RouterLink class="menuItem menuItem--import" to="/import" role="menuitem">导入 / 导出</RouterLink>
             <RouterLink v-if="isAdmin" class="menuItem" to="/admin" role="menuitem">管理用户</RouterLink>
             <button class="menuItem danger" type="button" role="menuitem" @click="logout">退出登录</button>
           </div>
@@ -87,6 +116,18 @@ router.afterEach(() => {
     </div>
   </header>
 
+  <BbModal :model-value="logoutModalOpen" title="退出登录" max-width="520px" @update:model-value="onLogoutModalUpdate">
+    <div class="bb-muted" style="line-height: 1.6;">
+      {{ logoutStep === 1 ? '退出以后无法同步书签。' : '你确定要退出吗？' }}
+    </div>
+    <div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
+      <button class="bb-btn bb-btn--secondary" type="button" @click="cancelLogout">取消</button>
+      <button class="bb-btn" :class="logoutStep === 2 ? 'bb-btn--danger' : ''" type="button" @click="confirmLogout">
+        {{ logoutStep === 1 ? '继续' : '确定退出' }}
+      </button>
+    </div>
+  </BbModal>
+
   <main>
     <RouterView />
   </main>
@@ -137,4 +178,8 @@ router.afterEach(() => {
 .menuItem + .menuItem { margin-top: 8px; }
 .menuItem:hover { background: rgba(255,255,255,0.6); }
 .menuItem.danger { color: #991b1b; background: rgba(254, 202, 202, 0.35); border-color: rgba(254, 202, 202, 0.6); }
+
+@media (max-width: 640px) {
+  .menuItem--import { display: none; }
+}
 </style>

apps/web/src/pages/AdminPage.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { apiFetch, ensureMe, userRef } from "../lib/api";
+import BbModal from "../components/BbModal.vue";
 
 const loadingUsers = ref(false);
 const usersError = ref("");
@@ -22,6 +23,36 @@ const openFolderIds = ref(new Set());
 
 const isAdmin = computed(() => userRef.value?.role === "admin");
 
+const confirmOpen = ref(false);
+const confirmTitle = ref("请确认");
+const confirmMessage = ref("");
+const confirmOkText = ref("确定");
+const confirmDanger = ref(false);
+let confirmResolve = null;
+
+function askConfirm(message, { title = "请确认", okText = "确定", danger = false } = {}) {
+  confirmTitle.value = title;
+  confirmMessage.value = message;
+  confirmOkText.value = okText;
+  confirmDanger.value = danger;
+  confirmOpen.value = true;
+  return new Promise((resolve) => {
+    confirmResolve = resolve;
+  });
+}
+
+function resolveConfirm(result) {
+  const resolve = confirmResolve;
+  confirmResolve = null;
+  confirmOpen.value = false;
+  if (resolve) resolve(Boolean(result));
+}
+
+function onConfirmModalUpdate(v) {
+  if (!v) resolveConfirm(false);
+  else confirmOpen.value = true;
+}
+
 async function loadUsers() {
   loadingUsers.value = true;
   usersError.value = "";
@@ -62,6 +93,21 @@ async function loadBookmarks() {
   }
 }
 
+let searchTimer = 0;
+watch(
+  () => q.value,
+  () => {
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      loadBookmarks();
+    }, 200);
+  }
+);
+
+onBeforeUnmount(() => {
+  window.clearTimeout(searchTimer);
+});
+
 function selectUser(id) {
   selectedUserId.value = id;
   q.value = "";
@@ -152,7 +198,7 @@ function isFolderOpen(folderId) {
 
 async function deleteBookmark(bookmarkId) {
   if (!selectedUserId.value) return;
-  if (!confirm("确定删除该书签？")) return;
+  if (!(await askConfirm("确定删除该书签？", { title: "删除书签", okText: "删除", danger: true }))) return;
   try {
     await apiFetch(`/admin/users/${selectedUserId.value}/bookmarks/${bookmarkId}`, { method: "DELETE" });
     await loadBookmarks();
@@ -163,7 +209,7 @@ async function deleteBookmark(bookmarkId) {
 
 async function deleteFolder(folderId) {
   if (!selectedUserId.value) return;
-  if (!confirm("确定删除该文件夹？子文件夹会一起删除，文件夹内书签会变成未分组。")) return;
+  if (!(await askConfirm("确定删除该文件夹？子文件夹会一起删除，文件夹内书签会变成未分组。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
   try {
     await apiFetch(`/admin/users/${selectedUserId.value}/folders/${folderId}`, { method: "DELETE" });
     await loadFolders();
@@ -240,8 +286,10 @@ onMounted(async () => {
           </div>
 
           <div class="bb-row" style="gap: 8px;">
-            <input v-model="q" class="bb-input bb-input--sm" placeholder="搜索标题/链接" @keyup.enter="loadBookmarks" />
-            <button class="bb-btn bb-btn--secondary" :disabled="loadingBookmarks" @click="loadBookmarks">搜索</button>
+            <div class="bb-searchWrap" style="min-width: 260px;">
+              <input v-model="q" class="bb-input bb-input--sm bb-input--withClear" placeholder="搜索标题/链接" />
+              <button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
+            </div>
           </div>
         </div>
 
@@ -326,6 +374,14 @@ onMounted(async () => {
         </div>
       </section>
     </div>
+
+    <BbModal :model-value="confirmOpen" :title="confirmTitle" max-width="520px" @update:model-value="onConfirmModalUpdate">
+      <div class="bb-muted" style="white-space: pre-wrap; line-height: 1.6;">{{ confirmMessage }}</div>
+      <div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
+        <button class="bb-btn bb-btn--secondary" type="button" @click="resolveConfirm(false)">取消</button>
+        <button class="bb-btn" :class="confirmDanger ? 'bb-btn--danger' : ''" type="button" @click="resolveConfirm(true)">{{ confirmOkText }}</button>
+      </div>
+    </BbModal>
   </section>
 </template>
 

apps/web/src/pages/MyPage.vue

@@ -32,6 +32,36 @@ const addModalOpen = ref(false);
 const folderModalOpen = ref(false);
 const treeEl = ref(null);
 
+const confirmOpen = ref(false);
+const confirmTitle = ref("请确认");
+const confirmMessage = ref("");
+const confirmOkText = ref("确定");
+const confirmDanger = ref(false);
+let confirmResolve = null;
+
+function askConfirm(message, { title = "请确认", okText = "确定", danger = false } = {}) {
+  confirmTitle.value = title;
+  confirmMessage.value = message;
+  confirmOkText.value = okText;
+  confirmDanger.value = danger;
+  confirmOpen.value = true;
+  return new Promise((resolve) => {
+    confirmResolve = resolve;
+  });
+}
+
+function resolveConfirm(result) {
+  const resolve = confirmResolve;
+  confirmResolve = null;
+  confirmOpen.value = false;
+  if (resolve) resolve(Boolean(result));
+}
+
+function onConfirmModalUpdate(v) {
+  if (!v) resolveConfirm(false);
+  else confirmOpen.value = true;
+}
+
 let folderSortable = null;
 const bookmarkSortables = new Map();
 
@@ -275,13 +305,13 @@ async function saveFolder(id) {
 async function removeFolder(id) {
   try {
     if (loggedIn.value) {
-      if (!confirm("确定删除该文件夹？文件夹内书签会移到『未分组』。")) return;
+      if (!(await askConfirm("确定删除该文件夹？文件夹内书签会移到『未分组』。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
       await apiFetch(`/folders/${id}`, { method: "DELETE" });
       if (folderId.value === id) folderId.value = null;
       await loadRemote();
       return;
     }
-    if (!confirm("确定删除该文件夹？文件夹内书签会移到『未分组』（本地）。")) return;
+    if (!(await askConfirm("确定删除该文件夹？文件夹内书签会移到『未分组』（本地）。", { title: "删除文件夹", okText: "删除", danger: true }))) return;
     deleteLocalFolder(id);
     if (folderId.value === id) folderId.value = null;
     loadLocal();
@@ -476,7 +506,7 @@ async function syncSortables() {
 }
 
 async function remove(id) {
-  if (!confirm("确定删除该书签？")) return;
+  if (!(await askConfirm("确定删除该书签？", { title: "删除书签", okText: "删除", danger: true }))) return;
   if (loggedIn.value) {
     await apiFetch(`/bookmarks/${id}`, { method: "DELETE" });
     await loadRemote();
@@ -549,6 +579,17 @@ onMounted(() => {
   window.addEventListener("scroll", onWindowScroll, { passive: true });
 });
 
+let searchTimer = 0;
+watch(
+  () => q.value,
+  () => {
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      reload();
+    }, 200);
+  }
+);
+
 watch([() => loggedIn.value, () => q.value, () => openFolderIds.value], () => {
   // keep Sortable instances in sync with current DOM (open folders)
   syncSortables();
@@ -556,6 +597,7 @@ watch([() => loggedIn.value, () => q.value, () => openFolderIds.value], () => {
 
 onBeforeUnmount(() => {
   destroySortables();
+  window.clearTimeout(searchTimer);
   window.removeEventListener("scroll", onWindowScroll);
 });
 </script>
@@ -583,10 +625,9 @@ onBeforeUnmount(() => {
     <div class="bb-card" style="margin-top: 12px;">
       <div class="sectionTitle">快速搜索</div>
       <div class="searchRow" style="margin-top: 10px;">
-        <input v-model="q" class="bb-input" placeholder="搜索标题/链接" @keyup.enter="reload" />
-        <div class="searchActions">
-          <button class="bb-btn bb-btn--secondary bb-btn--soft" :disabled="loading" @click="reload">搜索</button>
-          <button class="bb-btn bb-btn--secondary bb-btn--soft" :disabled="loading" @click="clearSearch">清除</button>
+        <div class="bb-searchWrap">
+          <input v-model="q" class="bb-input bb-input--withClear" placeholder="搜索标题/链接" />
+          <button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
         </div>
       </div>
     </div>
@@ -616,6 +657,14 @@ onBeforeUnmount(() => {
       </div>
     </BbModal>
 
+    <BbModal :model-value="confirmOpen" :title="confirmTitle" max-width="520px" @update:model-value="onConfirmModalUpdate">
+      <div class="bb-muted" style="white-space: pre-wrap; line-height: 1.6;">{{ confirmMessage }}</div>
+      <div class="bb-row" style="justify-content: flex-end; gap: 10px; margin-top: 14px;">
+        <button class="bb-btn bb-btn--secondary" type="button" @click="resolveConfirm(false)">取消</button>
+        <button class="bb-btn" :class="confirmDanger ? 'bb-btn--danger' : ''" type="button" @click="resolveConfirm(true)">{{ confirmOkText }}</button>
+      </div>
+    </BbModal>
+
     <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
     <p v-if="loading" class="bb-muted">加载中…</p>
 

apps/web/src/pages/PublicPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import BbSelect from "../components/BbSelect.vue";
 import BbModal from "../components/BbModal.vue";
 import { apiFetch, tokenRef } from "../lib/api";
@@ -86,6 +86,21 @@ async function load() {
   }
 }
 
+let searchTimer = 0;
+watch(
+  () => q.value,
+  () => {
+    window.clearTimeout(searchTimer);
+    searchTimer = window.setTimeout(() => {
+      load();
+    }, 200);
+  }
+);
+
+onBeforeUnmount(() => {
+  window.clearTimeout(searchTimer);
+});
+
 onMounted(load);
 onMounted(loadFolders);
 </script>
@@ -107,8 +122,10 @@ onMounted(loadFolders);
 
     <div class="bb-card" style="margin-top: 12px;">
       <div class="bb-row">
-        <input v-model="q" class="bb-input" placeholder="搜索标题或链接" @keyup.enter="load" />
-        <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="load">搜索</button>
+        <div class="bb-searchWrap">
+          <input v-model="q" class="bb-input bb-input--withClear" placeholder="搜索标题或链接" />
+          <button v-if="q.trim()" class="bb-searchClear" type="button" aria-label="清空搜索" @click="q = ''">×</button>
+        </div>
       </div>
 
       <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>

apps/web/src/style.css

@@ -120,6 +120,40 @@ input:focus-visible {
   color: var(--bb-text);
 }
 
+.bb-searchWrap {
+  position: relative;
+  flex: 1;
+  min-width: 220px;
+}
+
+.bb-input.bb-input--withClear {
+  padding-right: 44px;
+}
+
+.bb-input.bb-input--sm.bb-input--withClear {
+  padding-right: 38px;
+}
+
+.bb-searchClear {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.55);
+  background: rgba(255,255,255,0.65);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: rgba(19, 78, 74, 0.75);
+}
+
+.bb-searchClear:hover {
+  background: rgba(255,255,255,0.82);
+}
+
 /* Hide native file control (we use styled buttons) */
 .bb-fileInput {
   position: absolute;