94 lines
3.3 KiB
Vue
94 lines
3.3 KiB
Vue
|
<script setup>
|
|||
|
|
import { computed, onMounted, ref } from "vue";
|
|||
|
|
import { apiFetch } from "../../lib/api";
|
|||
|
|
import { getToken } from "../../lib/extStorage";
|
|||
|
|
import { listLocalBookmarks, markLocalDeleted, upsertLocalBookmark } from "../../lib/localData";
|
|||
|
|
|
|||
|
|
const token = ref("");
|
|||
|
|
const loggedIn = computed(() => Boolean(token.value));
|
|||
|
|
const items = ref([]);
|
|||
|
|
const error = ref("");
|
|||
|
|
const mode = computed(() => (loggedIn.value ? "cloud" : "local"));
|
|||
|
|
|
|||
|
|
const title = ref("");
|
|||
|
|
const url = ref("");
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
error.value = "";
|
|||
|
|
try {
|
|||
|
|
token.value = await getToken();
|
|||
|
|
if (!token.value) {
|
|||
|
|
items.value = await listLocalBookmarks();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
items.value = await apiFetch("/bookmarks");
|
|||
|
|
} catch (e) {
|
|||
|
|
error.value = e.message || String(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function add() {
|
|||
|
|
if (!title.value || !url.value) return;
|
|||
|
|
if (mode.value === "cloud") {
|
|||
|
|
await apiFetch("/bookmarks", {
|
|||
|
|
method: "POST",
|
|||
|
|
body: JSON.stringify({ folderId: null, title: title.value, url: url.value, visibility: "public" })
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
await upsertLocalBookmark({ title: title.value, url: url.value, visibility: "public" });
|
|||
|
|
}
|
|||
|
|
title.value = "";
|
|||
|
|
url.value = "";
|
|||
|
|
await load();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function remove(id) {
|
|||
|
|
if (mode.value !== "local") return;
|
|||
|
|
await markLocalDeleted(id);
|
|||
|
|
await load();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(load);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section>
|
|||
|
|
<h1>我的书签（{{ mode === 'cloud' ? '云端' : '本地' }}）</h1>
|
|||
|
|
<p v-if="!loggedIn" class="muted">未登录时，书签保存在扩展本地（可在登录后自动合并上云）。</p>
|
|||
|
|
|
|||
|
|
<div class="form">
|
|||
|
|
<input v-model="title" class="input" placeholder="标题" />
|
|||
|
|
<input v-model="url" class="input" placeholder="链接" />
|
|||
|
|
<button class="btn" @click="add">添加</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p v-if="error" class="error">{{ error }}</p>
|
|||
|
|
|
|||
|
|
<ul class="list">
|
|||
|
|
<li v-for="b in items" :key="b.id" class="card">
|
|||
|
|
<div class="row">
|
|||
|
|
<a :href="b.url" target="_blank" rel="noopener" class="title">{{ b.title }}</a>
|
|||
|
|
<button v-if="mode === 'local'" class="ghost" @click.prevent="remove(b.id)">删除</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="muted">{{ b.url }}</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 12px 0; }
|
|||
|
|
@media (min-width: 900px) { .form { grid-template-columns: 2fr 3fr auto; } }
|
|||
|
|
.input { 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; }
|
|||
|
|
.row { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
|
|||
|
|
.ghost { border: 1px solid #e5e7eb; background: #f8fafc; border-radius: 10px; padding: 6px 10px; cursor: pointer; }
|
|||
|
|
.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; }
|
|||
|
|
.muted { color: #475569; font-size: 12px; }
|
|||
|
|
</style>
|