Xu_BrowserBookmark/apps/extension/src/options/pages/PublicPage.vue

<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { apiFetch } from "../../lib/api";

const items = ref([]);
const q = ref("");
const loading = ref(false);
const error = ref("");

async function load() {
  loading.value = true;
  error.value = "";
  try {
    items.value = await apiFetch(`/bookmarks/public?q=${encodeURIComponent(q.value)}`);
  } catch (e) {
    error.value = e.message || String(e);
  } finally {
    loading.value = false;
  }
}

let searchTimer = 0;
watch(
  () => q.value,
  () => {
    window.clearTimeout(searchTimer);
    searchTimer = window.setTimeout(() => {
      load();
    }, 200);
  }
);

onBeforeUnmount(() => {
  window.clearTimeout(searchTimer);
});

onMounted(load);
</script>

<template>
  <section>
    <h1>公开书签</h1>
    <div class="row">
      <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">
      <li v-for="b in items" :key="b.id" class="card">
        <a :href="b.url" target="_blank" rel="noopener" class="title">{{ b.title }}</a>
        <div class="muted">{{ b.url }}</div>
      </li>
    </ul>
  </section>
</template>

<style scoped>
.row { display: flex; gap: 8px; margin: 12px 0; }
.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; }
@media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; }
.title {
  color: #111827;
  font-weight: 700;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; }
</style>