93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
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>
|