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

<script setup>
import { onMounted, ref } 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;
  }
}

onMounted(load);
</script>

<template>
  <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>
    <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; }
.input { flex: 1; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.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>