初始化项目

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

@@ -0,0 +1,53 @@
+<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; }
+.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
+.error { color: #b91c1c; }
+</style>