初始化项目

2026-01-18 10:35:27 +08:00
parent 85042841ae
commit 00ca4c1b0d
116 changed files with 11569 additions and 2 deletions
--- a/apps/extension/src/options/pages/ImportExportPage.vue
+++ b/apps/extension/src/options/pages/ImportExportPage.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ref } from "vue";
+import { apiFetch } from "../../lib/api";
+import { getToken } from "../../lib/extStorage";
+import { exportLocalToNetscapeHtml, importLocalFromNetscapeHtml, listLocalBookmarks } from "../../lib/localData";
+
+const file = ref(null);
+const status = ref("");
+const error = ref("");
+
+async function importToLocal() {
+  status.value = "";
+  error.value = "";
+
+  if (!file.value) return;
+  try {
+    const text = await file.value.text();
+    const res = await importLocalFromNetscapeHtml(text, { visibility: "public" });
+    status.value = `本地导入完成：文件夹新增 ${res.foldersImported}，书签新增 ${res.imported}，合并 ${res.merged}`;
+  } catch (e) {
+    error.value = e.message || String(e);
+  }
+}
+
+async function importFile() {
+  status.value = "";
+  error.value = "";
+
+  const token = await getToken();
+  if (!token) {
+    await importToLocal();
+    return;
+  }
+
+  if (!file.value) return;
+
+  try {
+    const fd = new FormData();
+    fd.append("file", file.value);
+    const res = await apiFetch("/bookmarks/import/html", { method: "POST", body: fd });
+    status.value = `导入完成：新增 ${res.imported}，合并 ${res.merged}`;
+  } catch (e) {
+    error.value = e.message || String(e);
+  }
+}
+
+function exportCloud() {
+  window.open("http://localhost:3001/bookmarks/export/html", "_blank");
+}
+
+async function exportLocal() {
+  status.value = "";
+  error.value = "";
+
+  try {
+    const bookmarks = await listLocalBookmarks({ includeDeleted: false });
+    const html = exportLocalToNetscapeHtml(bookmarks);
+
+    const blob = new Blob([html], { type: "text/html;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "bookmarks.html";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+
+    status.value = `本地导出完成：${bookmarks.length} 条`;
+  } catch (e) {
+    error.value = e.message || String(e);
+  }
+}
+</script>
+
+<template>
+  <section>
+    <h1>导入 / 导出</h1>
+
+    <div class="card">
+      <h2>导入书签 HTML（写入云端）</h2>
+      <input
+        type="file"
+        accept="text/html,.html"
+        @change="(e) => (file.value = e.target.files?.[0] || null)"
+      />
+      <button class="btn" @click="importFile">开始导入</button>
+      <p v-if="status" class="ok">{{ status }}</p>
+      <p v-if="error" class="error">{{ error }}</p>
+    </div>
+
+    <div class="card">
+      <h2>导出（本地）</h2>
+      <button class="btn" @click="exportLocal">导出本地为 HTML</button>
+    </div>
+
+    <div class="card">
+      <h2>导出（云端）</h2>
+      <button class="btn" @click="exportCloud">导出为 HTML</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; margin: 12px 0; }
+.btn { margin-top: 10px; padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
+.ok { color: #065f46; }
+.error { color: #b91c1c; }
+</style>
--- a/apps/extension/src/options/pages/LoginPage.vue
+++ b/apps/extension/src/options/pages/LoginPage.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { apiFetch } from "../../lib/api";
+import { getToken, setToken } from "../../lib/extStorage";
+import { clearLocalState, mergeLocalToUser } from "../../lib/localData";
+
+const router = useRouter();
+const mode = ref("login");
+const email = ref("");
+const password = ref("");
+const error = ref("");
+const loading = ref(false);
+
+async function submit() {
+  loading.value = true;
+  error.value = "";
+
+  try {
+    const path = mode.value === "register" ? "/auth/register" : "/auth/login";
+    const res = await apiFetch(path, {
+      method: "POST",
+      body: JSON.stringify({ email: email.value, password: password.value })
+    });
+
+    await setToken(res.token);
+
+    // Push local state to server on login
+    const payload = await mergeLocalToUser();
+    await apiFetch("/sync/push", {
+      method: "POST",
+      body: JSON.stringify(payload)
+    });
+
+    // After merge, keep extension in cloud mode
+    await clearLocalState();
+
+    await router.push("/my");
+  } catch (e) {
+    error.value = e.message || String(e);
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function logout() {
+  const token = await getToken();
+  if (!token) return;
+  await setToken("");
+  await router.push("/");
+}
+</script>
+
+<template>
+  <section>
+    <h1>登录 / 注册</h1>
+
+    <div class="row">
+      <button class="tab" :class="{ active: mode === 'login' }" @click="mode = 'login'">登录</button>
+      <button class="tab" :class="{ active: mode === 'register' }" @click="mode = 'register'">注册</button>
+      <button class="tab" @click="logout">退出</button>
+    </div>
+
+    <div class="form">
+      <input v-model="email" class="input" placeholder="邮箱" autocomplete="email" />
+      <input v-model="password" class="input" placeholder="密码（至少 8 位）" type="password" autocomplete="current-password" />
+      <button class="btn" :disabled="loading" @click="submit">提交</button>
+      <p v-if="error" class="error">{{ error }}</p>
+    </div>
+
+    <p class="muted">扩展内的本地书签存储在 chrome.storage.local。</p>
+  </section>
+</template>
+
+<style scoped>
+.row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
+.tab { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f8fafc; cursor: pointer; }
+.tab.active { border-color: #111827; background: #111827; color: white; }
+.form { display: grid; gap: 10px; max-width: 560px; }
+.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; }
+.btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.error { color: #b91c1c; }
+.muted { color: #475569; font-size: 12px; margin-top: 10px; }
+</style>
--- a/apps/extension/src/options/pages/MyPage.vue
+++ b/apps/extension/src/options/pages/MyPage.vue
@@ -0,0 +1,93 @@
+<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>
--- a/apps/extension/src/options/pages/PublicPage.vue
+++ b/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>