From 6eb3c730bb437ff1c286c750d924efc59c73f4a6 Mon Sep 17 00:00:00 2001
From: Xujiacheng <Xujiacheng@blw.com>
Date: Sun, 18 Jan 2026 13:07:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20BbSelect=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AE=9E=E7=8E=B0=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scripts/__pycache__/core.cpython-312.pyc  | Bin 11748 -> 11751 bytes
 .../scripts/__pycache__/core.cpython-314.pyc  | Bin 0 -> 12650 bytes
 .../__pycache__/design_system.cpython-312.pyc | Bin 27843 -> 27846 bytes
 .../__pycache__/design_system.cpython-314.pyc | Bin 0 -> 31300 bytes
 apps/extension/options.html                   |   2 +-
 apps/extension/src/lib/api.js                 |   2 +-
 apps/extension/src/options/OptionsApp.vue     |   2 +-
 .../src/options/pages/ImportExportPage.vue    |  32 +-
 apps/extension/src/popup/PopupApp.vue         | 124 +++
 apps/web/index.html                           |   2 +-
 apps/web/src/App.vue                          | 118 ++-
 apps/web/src/components/BbSelect.vue          | 101 +++
 apps/web/src/lib/api.js                       |  19 +-
 apps/web/src/pages/ImportExportPage.vue       | 102 ++-
 apps/web/src/pages/LoginPage.vue              |  96 ++-
 apps/web/src/pages/MyPage.vue                 | 124 +--
 apps/web/src/pages/PublicPage.vue             |  34 +-
 apps/web/src/router.js                        |  17 +
 apps/web/src/style.css                        | 726 +++++++++++++++++-
 package-lock.json                             |   5 +-
 packages/shared/src/package.json              |   3 +-
 21 files changed, 1346 insertions(+), 163 deletions(-)
 create mode 100644 .shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc
 create mode 100644 .shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-314.pyc
 create mode 100644 apps/web/src/components/BbSelect.vue

diff --git a/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc b/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-312.pyc
index 0348f1b8cd240e045cf0ff2712511836c9e92094..1eda2a2525153e74074229174a09c6d403c070a8 100644
GIT binary patch
delta 41
vcmaD7{XClcG%qg~0}#~D%HGI*iJRZq#VV$tC_gJTxg;i{G=B3-?%#?4Ce#lH

delta 38
scmaDJ{Un<EG%qg~0}w2@oUxJn5;u>7i&acPQGQlxa!JhQH{8D!0R>bJF8}}l

diff --git a/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc b/.shared/ui-ux-pro-max/scripts/__pycache__/core.cpython-314.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..5d2618680129db2e54cbdf015437a3a1f4341a7d
GIT binary patch
literal 12650
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

literal 0
HcmV?d00001

diff --git a/.shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc b/.shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-312.pyc
index 8d85fdd4c1ecb73fa9817986074a5d194bad7372..eaeab5e650ff748f210794ae627daf1d53480f29 100644
GIT binary patch
delta 43
xcmX?nlkwP1M()$Ryj%=GP(LesBex7IzmJPmOhHk8R%&udOhjq?W@FX~=>Rlr4le)z

delta 40
ucmX?hlkxCPM()$Ryj%=Gu;6mWMs68a9#0pmn1Z7GtkmR^n9XLa6Vd?^)D2ev

diff --git a/.shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-314.pyc b/.shared/ui-ux-pro-max/scripts/__pycache__/design_system.cpython-314.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..e5e299aadc3853a84b71867b722aad0e818115b3
GIT binary patch
literal 31300
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

literal 0
HcmV?d00001

diff --git a/apps/extension/options.html b/apps/extension/options.html
index 3f807fe..e245df1 100644
--- a/apps/extension/options.html
+++ b/apps/extension/options.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BrowserBookmark Options</title>
+    <title>云书签 选项</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/apps/extension/src/lib/api.js b/apps/extension/src/lib/api.js
index af48a6b..aef6365 100644
--- a/apps/extension/src/lib/api.js
+++ b/apps/extension/src/lib/api.js
@@ -2,7 +2,7 @@ const BASE_URL = import.meta.env.VITE_SERVER_BASE_URL || "http://localhost:3001"
 
 export async function apiFetch(path, options = {}) {
   const headers = new Headers(options.headers || {});
-  headers.set("Accept", "application/json");
+  if (!headers.has("Accept")) headers.set("Accept", "application/json");
 
   if (!(options.body instanceof FormData) && options.body != null) {
     headers.set("Content-Type", "application/json");
diff --git a/apps/extension/src/options/OptionsApp.vue b/apps/extension/src/options/OptionsApp.vue
index 2649dfa..3638cd4 100644
--- a/apps/extension/src/options/OptionsApp.vue
+++ b/apps/extension/src/options/OptionsApp.vue
@@ -5,7 +5,7 @@ import { RouterLink, RouterView } from "vue-router";
 <template>
   <div class="shell">
     <header class="nav">
-      <div class="brand">BrowserBookmark 扩展</div>
+      <div class="brand">云书签</div>
       <nav class="links">
         <RouterLink to="/" class="link">公开</RouterLink>
         <RouterLink to="/my" class="link">我的</RouterLink>
diff --git a/apps/extension/src/options/pages/ImportExportPage.vue b/apps/extension/src/options/pages/ImportExportPage.vue
index 6a8fe44..e48c3e5 100644
--- a/apps/extension/src/options/pages/ImportExportPage.vue
+++ b/apps/extension/src/options/pages/ImportExportPage.vue
@@ -8,6 +8,10 @@ const file = ref(null);
 const status = ref("");
 const error = ref("");
 
+function onFileChange(e) {
+  file.value = e?.target?.files?.[0] || null;
+}
+
 async function importToLocal() {
   status.value = "";
   error.value = "";
@@ -44,8 +48,30 @@ async function importFile() {
   }
 }
 
-function exportCloud() {
-  window.open("http://localhost:3001/bookmarks/export/html", "_blank");
+async function exportCloud() {
+  status.value = "";
+  error.value = "";
+
+  try {
+    const html = await apiFetch("/bookmarks/export/html", {
+      method: "GET",
+      headers: { Accept: "text/html" }
+    });
+
+    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-cloud.html";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+
+    status.value = "云端导出完成";
+  } catch (e) {
+    error.value = e.message || String(e);
+  }
 }
 
 async function exportLocal() {
@@ -82,7 +108,7 @@ async function exportLocal() {
       <input
         type="file"
         accept="text/html,.html"
-        @change="(e) => (file.value = e.target.files?.[0] || null)"
+        @change="onFileChange"
       />
       <button class="btn" @click="importFile">开始导入</button>
       <p v-if="status" class="ok">{{ status }}</p>
diff --git a/apps/extension/src/popup/PopupApp.vue b/apps/extension/src/popup/PopupApp.vue
index 0a43438..c281572 100644
--- a/apps/extension/src/popup/PopupApp.vue
+++ b/apps/extension/src/popup/PopupApp.vue
@@ -12,6 +12,16 @@ const mode = ref("local");
 const loading = ref(false);
 const error = ref("");
 
+const cloudAvailable = ref(false);
+
+const addCurrentOpen = ref(false);
+const foldersLoading = ref(false);
+const folders = ref([]);
+const selectedFolderId = ref(null);
+const addCurrentBusy = ref(false);
+const addCurrentStatus = ref("");
+const activePage = ref({ title: "", url: "" });
+
 const filtered = computed(() => {
   const query = q.value.trim().toLowerCase();
   if (!query) return items.value;
@@ -36,11 +46,89 @@ function openOptions() {
   }
 }
 
+async function getActiveTabPage() {
+  try {
+    if (typeof chrome !== "undefined" && chrome.tabs?.query) {
+      const tabs = await new Promise((resolve) => {
+        chrome.tabs.query({ active: true, currentWindow: true }, (result) => resolve(result || []));
+      });
+      const tab = tabs?.[0];
+      return { title: tab?.title || "", url: tab?.url || "" };
+    }
+  } catch {
+    // ignore
+  }
+  return { title: document.title || "", url: window.location?.href || "" };
+}
+
+async function loadFolders() {
+  foldersLoading.value = true;
+  try {
+    const list = await apiFetch("/folders");
+    folders.value = Array.isArray(list) ? list : [];
+  } finally {
+    foldersLoading.value = false;
+  }
+}
+
+async function openAddCurrent() {
+  addCurrentStatus.value = "";
+  error.value = "";
+  selectedFolderId.value = null;
+  activePage.value = await getActiveTabPage();
+
+  const token = await getToken();
+  cloudAvailable.value = Boolean(token);
+  if (!token) {
+    addCurrentOpen.value = true;
+    return;
+  }
+
+  addCurrentOpen.value = true;
+  await loadFolders();
+}
+
+async function addCurrentToCloud() {
+  addCurrentStatus.value = "";
+  error.value = "";
+
+  const token = await getToken();
+  if (!token) {
+    error.value = "请先登录后再添加到云书签";
+    return;
+  }
+
+  const page = await getActiveTabPage();
+  const t = String(page.title || "").trim() || String(page.url || "").trim();
+  const u = String(page.url || "").trim();
+  if (!u) return;
+
+  try {
+    addCurrentBusy.value = true;
+    await apiFetch("/bookmarks", {
+      method: "POST",
+      body: JSON.stringify({
+        folderId: selectedFolderId.value ?? null,
+        title: t,
+        url: u,
+        visibility: "private"
+      })
+    });
+    addCurrentStatus.value = "已添加到云书签";
+    await load();
+  } catch (e) {
+    error.value = e.message || String(e);
+  } finally {
+    addCurrentBusy.value = false;
+  }
+}
+
 async function load() {
   loading.value = true;
   error.value = "";
   try {
     const token = await getToken();
+    cloudAvailable.value = Boolean(token);
     mode.value = token ? "cloud" : "local";
 
     if (mode.value === "cloud") {
@@ -109,6 +197,37 @@ onMounted(load);
       <button class="btn primary" @click="quickAdd">添加</button>
     </div>
 
+    <div class="card">
+      <div class="cardTitle">添加当前页面到云书签</div>
+      <div class="muted">只需选一个文件夹（不选默认根目录）。</div>
+      <button class="btn primary" :disabled="addCurrentBusy" @click="openAddCurrent">添加当前页面</button>
+
+      <div v-if="addCurrentOpen" class="subCard">
+        <div class="subTitle">当前页面</div>
+        <div class="subText">{{ activePage.title || '（无标题）' }}</div>
+        <div class="subUrl">{{ activePage.url || '（无法获取链接）' }}</div>
+
+        <template v-if="cloudAvailable">
+          <div class="subTitle" style="margin-top: 10px;">选择文件夹</div>
+          <select v-model="selectedFolderId" class="input" :disabled="foldersLoading || addCurrentBusy">
+            <option :value="null">（根目录）</option>
+            <option v-for="f in folders" :key="f.id" :value="f.id">{{ f.name }}</option>
+          </select>
+          <button class="btn primary" :disabled="addCurrentBusy || !activePage.url" @click="addCurrentToCloud">
+            {{ addCurrentBusy ? '添加中…' : '确认添加到云端' }}
+          </button>
+          <div v-if="foldersLoading" class="muted">加载文件夹中…</div>
+        </template>
+
+        <template v-else>
+          <div class="muted" style="margin-top: 10px;">当前未登录，无法添加到云端。</div>
+          <button class="btn" @click="openOptions">去登录</button>
+        </template>
+
+        <div v-if="addCurrentStatus" class="ok">{{ addCurrentStatus }}</div>
+      </div>
+    </div>
+
     <div v-if="error" class="error">{{ error }}</div>
     <div v-if="loading" class="muted">加载中…</div>
 
@@ -138,6 +257,11 @@ onMounted(load);
 .input { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 10px; background: white; }
 .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; background: white; display: grid; gap: 8px; margin-bottom: 10px; }
 .cardTitle { font-weight: 700; font-size: 12px; color: #334155; }
+.subCard { border: 1px dashed #e5e7eb; border-radius: 12px; padding: 10px; background: #f8fafc; display: grid; gap: 8px; }
+.subTitle { font-weight: 700; font-size: 12px; color: #334155; }
+.subText { font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
+.subUrl { font-size: 12px; color: #475569; overflow-wrap: anywhere; }
+.ok { font-size: 12px; color: #065f46; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 8px 10px; }
 .list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
 .item { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; cursor: pointer; background: white; transition: background 150ms, border-color 150ms; }
 .item:hover { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.35); }
diff --git a/apps/web/index.html b/apps/web/index.html
index 05ff710..fa8a953 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>web</title>
+    <title>云书签</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index da7d651..1f35a25 100644
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -1,36 +1,124 @@
 <script setup>
-import { computed } from "vue";
-import { RouterLink, RouterView } from "vue-router";
-import { getToken } from "./lib/api";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { RouterLink, RouterView, useRouter } from "vue-router";
+import { setToken, tokenRef } from "./lib/api";
 
-const loggedIn = computed(() => Boolean(getToken()));
+const router = useRouter();
+const loggedIn = computed(() => Boolean(tokenRef.value));
+
+const menuOpen = ref(false);
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value;
+}
+
+function closeMenu() {
+  menuOpen.value = false;
+}
+
+async function logout() {
+  setToken("");
+  closeMenu();
+  await router.push("/");
+}
+
+function onDocPointerDown(e) {
+  const target = e.target;
+  if (!(target instanceof HTMLElement)) return;
+  if (target.closest("[data-bb-menu]")) return;
+  closeMenu();
+}
+
+onMounted(() => {
+  document.addEventListener("pointerdown", onDocPointerDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onDocPointerDown);
+});
+
+router.afterEach(() => {
+  closeMenu();
+});
 </script>
 
 <template>
-  <header class="nav">
+  <header class="nav" data-bb-menu>
     <div class="navInner">
-      <RouterLink to="/" class="brand">BrowserBookmark</RouterLink>
+      <RouterLink to="/" class="brand">
+        <span class="brandMark">X</span>
+        <span class="brandText">云书签</span>
+      </RouterLink>
+
       <nav class="links">
-        <RouterLink to="/" class="link">公开</RouterLink>
+        <RouterLink to="/" class="link">首页</RouterLink>
         <RouterLink to="/my" class="link">我的</RouterLink>
-        <RouterLink to="/import" class="link">导入导出</RouterLink>
+
         <RouterLink v-if="!loggedIn" to="/login" class="link primary">登录</RouterLink>
+
+        <div v-else class="menuWrap" data-bb-menu>
+          <button class="link menuBtn" type="button" :aria-expanded="menuOpen" @click="toggleMenu">
+            菜单
+            <span class="chev" aria-hidden="true">▾</span>
+          </button>
+
+          <div v-if="menuOpen" class="menu" role="menu">
+            <RouterLink class="menuItem" to="/import" role="menuitem">导入 / 导出</RouterLink>
+            <button class="menuItem danger" type="button" role="menuitem" @click="logout">退出登录</button>
+          </div>
+        </div>
       </nav>
     </div>
   </header>
+
   <main>
     <RouterView />
   </main>
 </template>
 
 <style scoped>
-.nav { position: sticky; top: 0; z-index: 10; background: rgba(248,250,252,0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bb-border); }
+.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.55); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.35); }
 .navInner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.brand { font-weight: 800; color: var(--bb-text); text-decoration: none; }
+.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; color: var(--bb-text); text-decoration: none; letter-spacing: -0.02em; }
+.brandMark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-clay); box-shadow: var(--bb-shadow-clay); border: 1px solid rgba(255,255,255,0.7); }
+.brandText { font-size: 14px; }
 .links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
-.link { color: var(--bb-text); text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: background 150ms, color 150ms; }
-.link:hover { background: rgba(59,130,246,0.08); }
-.link.router-link-active { background: rgba(59,130,246,0.12); }
-.primary { background: var(--bb-primary); color: white; }
-.primary:hover { background: var(--bb-primary-weak); }
+.link { color: var(--bb-text); text-decoration: none; padding: 9px 12px; border-radius: 14px; transition: transform 120ms ease, box-shadow 120ms ease, background 150ms, color 150ms; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); }
+.link:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10); transform: translateY(-1px); }
+.link.router-link-active { background: rgba(255,255,255,0.55); }
+.primary { background: linear-gradient(135deg, var(--bb-primary), var(--bb-primary-weak)); color: white; border-color: rgba(255,255,255,0.25); }
+.primary:hover { filter: brightness(1.03); }
+
+.menuWrap { position: relative; }
+.menuBtn { cursor: pointer; }
+.chev { margin-left: 6px; opacity: 0.8; }
+.menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 10px);
+  width: 220px;
+  padding: 8px;
+  border-radius: 16px;
+  background: rgba(255,255,255,0.72);
+  border: 1px solid rgba(255,255,255,0.5);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 20px 70px rgba(15, 23, 42, 0.16);
+}
+.menuItem {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,0.35);
+  background: rgba(255,255,255,0.35);
+  color: var(--bb-text);
+  text-decoration: none;
+  cursor: pointer;
+}
+.menuItem + .menuItem { margin-top: 8px; }
+.menuItem:hover { background: rgba(255,255,255,0.6); }
+.menuItem.danger { color: #991b1b; background: rgba(254, 202, 202, 0.35); border-color: rgba(254, 202, 202, 0.6); }
 </style>
diff --git a/apps/web/src/components/BbSelect.vue b/apps/web/src/components/BbSelect.vue
new file mode 100644
index 0000000..671a091
--- /dev/null
+++ b/apps/web/src/components/BbSelect.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Boolean, Object, null], default: null },
+  options: { type: Array, required: true },
+  disabled: { type: Boolean, default: false },
+  placeholder: { type: String, default: "请选择" },
+  size: { type: String, default: "md" } // md | sm
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const rootEl = ref(null);
+const open = ref(false);
+
+const selected = computed(() => props.options.find((o) => Object.is(o.value, props.modelValue)) || null);
+const label = computed(() => selected.value?.label ?? "");
+
+function close() {
+  open.value = false;
+}
+
+function toggle() {
+  if (props.disabled) return;
+  open.value = !open.value;
+}
+
+function choose(value, isDisabled) {
+  if (props.disabled || isDisabled) return;
+  emit("update:modelValue", value);
+  close();
+}
+
+function onKeydownTrigger(e) {
+  if (props.disabled) return;
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    toggle();
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    close();
+  }
+}
+
+function onDocPointerDown(e) {
+  const el = rootEl.value;
+  if (!el) return;
+  if (el.contains(e.target)) return;
+  close();
+}
+
+onMounted(() => {
+  document.addEventListener("pointerdown", onDocPointerDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onDocPointerDown);
+});
+</script>
+
+<template>
+  <div ref="rootEl" class="bb-selectWrap" :class="size === 'sm' ? 'bb-selectWrap--sm' : ''">
+    <button
+      type="button"
+      class="bb-selectTrigger"
+      :disabled="disabled"
+      :aria-expanded="open ? 'true' : 'false'"
+      @click="toggle"
+      @keydown="onKeydownTrigger"
+    >
+      <span class="bb-selectValue" :class="!label ? 'bb-selectPlaceholder' : ''">
+        {{ label || placeholder }}
+      </span>
+      <span class="bb-selectChevron" aria-hidden="true">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </span>
+    </button>
+
+    <div v-if="open" class="bb-selectMenu" role="listbox">
+      <button
+        v-for="(o, idx) in options"
+        :key="idx"
+        type="button"
+        class="bb-selectOption"
+        :class="[
+          Object.is(o.value, modelValue) ? 'is-selected' : '',
+          o.disabled ? 'is-disabled' : ''
+        ]"
+        role="option"
+        :aria-selected="Object.is(o.value, modelValue) ? 'true' : 'false'"
+        @click="choose(o.value, o.disabled)"
+      >
+        <span class="bb-selectOptionLabel">{{ o.label }}</span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/apps/web/src/lib/api.js b/apps/web/src/lib/api.js
index ce920a8..001140f 100644
--- a/apps/web/src/lib/api.js
+++ b/apps/web/src/lib/api.js
@@ -1,17 +1,30 @@
+import { ref } from "vue";
+
 const BASE_URL = import.meta.env.VITE_SERVER_BASE_URL || "http://localhost:3001";
 
+export const tokenRef = ref(localStorage.getItem("bb_token") || "");
+
 export function getToken() {
-  return localStorage.getItem("bb_token") || "";
+  return tokenRef.value || "";
 }
 
 export function setToken(token) {
-  if (token) localStorage.setItem("bb_token", token);
+  const next = token || "";
+  tokenRef.value = next;
+  if (next) localStorage.setItem("bb_token", next);
   else localStorage.removeItem("bb_token");
 }
 
+// Keep auth state in sync across tabs.
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (e) => {
+    if (e.key === "bb_token") tokenRef.value = e.newValue || "";
+  });
+}
+
 export async function apiFetch(path, options = {}) {
   const headers = new Headers(options.headers || {});
-  headers.set("Accept", "application/json");
+  if (!headers.has("Accept")) headers.set("Accept", "application/json");
 
   if (!(options.body instanceof FormData) && options.body != null) {
     headers.set("Content-Type", "application/json");
diff --git a/apps/web/src/pages/ImportExportPage.vue b/apps/web/src/pages/ImportExportPage.vue
index 55b00f1..095022c 100644
--- a/apps/web/src/pages/ImportExportPage.vue
+++ b/apps/web/src/pages/ImportExportPage.vue
@@ -1,17 +1,26 @@
 <script setup>
 import { computed, ref } from "vue";
-import { apiFetch, getToken } from "../lib/api";
+import { apiFetch, tokenRef } from "../lib/api";
 import {
   exportLocalToNetscapeHtml,
   importLocalFromNetscapeHtml,
   listLocalBookmarks
 } from "../lib/localData";
 
-const loggedIn = computed(() => Boolean(getToken()));
+const loggedIn = computed(() => Boolean(tokenRef.value));
 const file = ref(null);
 const status = ref("");
 const error = ref("");
 const busy = ref(false);
+const fileInputEl = ref(null);
+
+function onFileChange(e) {
+  file.value = e?.target?.files?.[0] || null;
+}
+
+function openFilePicker() {
+  fileInputEl.value?.click?.();
+}
 
 async function importFile() {
   status.value = "";
@@ -37,8 +46,33 @@ async function importFile() {
   }
 }
 
-function exportCloud() {
-  window.open("http://localhost:3001/bookmarks/export/html", "_blank");
+async function exportCloud() {
+  status.value = "";
+  error.value = "";
+
+  try {
+    busy.value = true;
+    const html = await apiFetch("/bookmarks/export/html", {
+      method: "GET",
+      headers: { Accept: "text/html" }
+    });
+
+    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-cloud.html";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+
+    status.value = "云端导出完成";
+  } catch (e) {
+    error.value = e.message || String(e);
+  } finally {
+    busy.value = false;
+  }
 }
 
 async function exportLocal() {
@@ -70,45 +104,65 @@ async function exportLocal() {
 
 <template>
   <section class="bb-page">
-    <h1>导入 / 导出</h1>
+    <div class="bb-pageHeader">
+      <div>
+        <h1 style="margin: 0;">导入 / 导出</h1>
+        <div class="bb-muted" style="margin-top: 4px;">把浏览器书签升级成“可同步、可复习、可分享”的知识库。</div>
+      </div>
+    </div>
 
-    <div class="bb-card">
-      <h2>导入 Chrome/Edge 书签 HTML</h2>
-      <div class="bb-row" style="margin-top: 10px;">
+    <div class="bb-clayCard" style="margin-top: 12px;">
+      <div class="bb-cardTitle">导入 Chrome/Edge 书签 HTML</div>
+      <div class="bb-cardSub">支持自动去重与合并；登录后会写入云端数据库。</div>
+
+      <div class="bb-row" style="margin-top: 12px;">
         <input
-          class="bb-input"
+          ref="fileInputEl"
+          class="bb-fileInput"
           type="file"
           accept="text/html,.html"
-          @change="(e) => (file.value = e.target.files?.[0] || null)"
+          @change="onFileChange"
         />
-        <button class="bb-btn" :disabled="busy" @click="importFile">开始导入</button>
+        <button class="bb-btn bb-btn--secondary" :disabled="busy" @click="openFilePicker">选择 HTML 文件</button>
+        <div class="bb-fileName" :class="!file ? 'is-empty' : ''">
+          {{ file ? file.name : "未选择文件" }}
+        </div>
+        <button class="bb-btn" :disabled="busy || !file" @click="importFile">开始导入</button>
       </div>
 
-      <p v-if="status" class="bb-alert bb-alert--ok" style="margin-top: 10px;">{{ status }}</p>
-      <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 10px;">{{ error }}</p>
+      <p v-if="status" class="bb-alert bb-alert--ok" style="margin-top: 12px;">{{ status }}</p>
+      <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
 
       <p class="bb-muted" style="margin-top: 10px;">
         未登录：导入写入本机 localStorage，并使用 urlNormalized/urlHash 自动去重；登录：导入写入数据库并自动去重合并。
       </p>
     </div>
 
-    <div class="bb-grid2" style="margin-top: 12px;">
-      <div v-if="loggedIn" class="bb-card">
-        <h2>导出（云端）</h2>
-        <p class="bb-muted">导出你的云端书签（保留文件夹层级）。</p>
-        <button class="bb-btn" :disabled="busy" @click="exportCloud">导出为 HTML</button>
+    <div v-if="loggedIn" class="bb-grid2" style="margin-top: 12px;">
+      <div class="bb-card bb-card--interactive">
+        <div class="bb-cardTitle">导出（云端）</div>
+        <div class="bb-cardSub">保留文件夹层级；已携带登录态导出。</div>
+        <div style="margin-top: 12px;">
+          <button class="bb-btn" :disabled="busy" @click="exportCloud">导出为 HTML</button>
+        </div>
       </div>
 
-      <div class="bb-card">
-        <h2>导出（本地）</h2>
-        <p class="bb-muted">导出当前浏览器中的本地书签（对齐扩展：平铺导出）。</p>
-        <button class="bb-btn bb-btn--secondary" :disabled="busy" @click="exportLocal">导出为 HTML</button>
+      <div class="bb-card bb-card--interactive">
+        <div class="bb-cardTitle">导出（本地）</div>
+        <div class="bb-cardSub">导出当前浏览器 localStorage 中的书签（平铺导出）。</div>
+        <div style="margin-top: 12px;">
+          <button class="bb-btn bb-btn--secondary" :disabled="busy" @click="exportLocal">导出为 HTML</button>
+        </div>
       </div>
     </div>
+
+    <div v-else class="bb-empty" style="margin-top: 12px;">
+      <div style="font-weight: 900;">登录后可导出云端书签</div>
+      <div class="bb-muted" style="margin-top: 6px;">你仍可在未登录状态下导入到本机，并导出本机数据。</div>
+    </div>
   </section>
 </template>
 
 <style scoped>
-h1 { margin: 0 0 12px; }
-h2 { margin: 0 0 6px; font-size: 16px; }
+/* page-level tweaks only */
 </style>
diff --git a/apps/web/src/pages/LoginPage.vue b/apps/web/src/pages/LoginPage.vue
index dbe38b9..13065f2 100644
--- a/apps/web/src/pages/LoginPage.vue
+++ b/apps/web/src/pages/LoginPage.vue
@@ -34,7 +34,8 @@ async function submit() {
 
     clearLocalState();
 
-    await router.push("/my");
+    const next = String(router.currentRoute.value.query?.next || "").trim();
+    await router.push(next || "/my");
   } catch (e) {
     error.value = e.message || String(e);
   } finally {
@@ -44,28 +45,89 @@ async function submit() {
 </script>
 
 <template>
-  <section class="bb-page" style="max-width: 560px;">
-    <h1>{{ mode === 'register' ? '注册' : '登录' }}</h1>
+  <section class="bb-page bb-auth">
+    <div class="bb-authCard bb-clayCard">
+      <div class="bb-authHeader">
+        <div class="bb-pill">云端同步 · 本地不丢</div>
+        <h1 class="bb-authTitle">{{ mode === 'register' ? '注册账号' : '登录账号' }}</h1>
+        <p class="bb-heroSub">登录后自动同步到云端；不登录也能本地管理（localStorage）。</p>
+      </div>
 
-    <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>
+      <div class="bb-seg" role="tablist" aria-label="登录模式">
+        <button
+          class="bb-segBtn"
+          :class="{ active: mode === 'login' }"
+          role="tab"
+          :aria-selected="mode === 'login'"
+          @click="mode = 'login'"
+        >
+          登录
+        </button>
+        <button
+          class="bb-segBtn"
+          :class="{ active: mode === 'register' }"
+          role="tab"
+          :aria-selected="mode === 'register'"
+          @click="mode = 'register'"
+        >
+          注册
+        </button>
+      </div>
+
+      <div class="bb-authForm">
+        <label class="bb-field">
+          <span class="bb-label">邮箱</span>
+          <input v-model="email" class="bb-input" placeholder="name@example.com" autocomplete="email" />
+        </label>
+        <label class="bb-field">
+          <span class="bb-label">密码</span>
+          <input
+            v-model="password"
+            class="bb-input"
+            placeholder="至少 8 位"
+            type="password"
+            autocomplete="current-password"
+          />
+        </label>
+
+        <button class="bb-btn" :disabled="loading" @click="submit">
+          {{ loading ? '处理中…' : (mode === 'register' ? '创建账号并登录' : '登录') }}
+        </button>
+
+        <p v-if="error" class="bb-alert bb-alert--error" style="margin: 0;">{{ error }}</p>
+      </div>
+
+      <div class="bb-authFoot bb-muted">
+        Token 会持久化保存；仅当你手动退出才会清除。
+      </div>
     </div>
 
-    <div class="form">
-      <input v-model="email" class="bb-input" placeholder="邮箱" autocomplete="email" />
-      <input v-model="password" class="bb-input" placeholder="密码（至少 8 位）" type="password" autocomplete="current-password" />
-      <button class="bb-btn" :disabled="loading" @click="submit">提交</button>
-      <p v-if="error" class="bb-alert bb-alert--error">{{ error }}</p>
-    </div>
+    <aside class="bb-authAside bb-card">
+      <div class="bb-cardTitle">你将获得</div>
+      <div class="bb-cardSub">更像“课程平台”的学习型收藏体验。</div>
 
-    <p class="bb-muted" style="margin-top: 10px;">未登录时，你的书签会保存在本机 localStorage。</p>
+      <div class="bb-authBadges">
+        <span class="bb-tag">同步</span>
+        <span class="bb-tag bb-tag2">去重</span>
+        <span class="bb-tag bb-tag3">文件夹层级</span>
+      </div>
+
+      <ul class="bb-bullets" style="margin-top: 10px;">
+        <li>导入 Chrome/Edge 书签 HTML 一键合并</li>
+        <li>公开/私有可切换，公开页可分享</li>
+        <li>跨标签页登录态自动同步</li>
+      </ul>
+
+      <div class="bb-miniQuote" style="margin-top: 12px;">
+        <div class="bb-quote">“终于把书签变成了可复习的知识库。”</div>
+        <div class="bb-quoteBy">— 早八人 · 收藏课学员</div>
+      </div>
+    </aside>
   </section>
 </template>
 
 <style scoped>
-.row { display: flex; gap: 8px; margin: 12px 0; }
-.tab { flex: 1; 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; }
+.bb-authTitle { margin: 10px 0 6px; }
+.bb-authForm { display: grid; gap: 10px; margin-top: 12px; }
+.bb-authFoot { margin-top: 10px; }
 </style>
diff --git a/apps/web/src/pages/MyPage.vue b/apps/web/src/pages/MyPage.vue
index da6590c..fedd5f1 100644
--- a/apps/web/src/pages/MyPage.vue
+++ b/apps/web/src/pages/MyPage.vue
@@ -1,9 +1,10 @@
 <script setup>
 import { computed, onMounted, ref } from "vue";
-import { apiFetch, getToken, setToken } from "../lib/api";
+import BbSelect from "../components/BbSelect.vue";
+import { apiFetch, tokenRef } from "../lib/api";
 import { loadLocalState, markLocalDeleted, patchLocalBookmark, upsertLocalBookmark } from "../lib/localData";
 
-const loggedIn = computed(() => Boolean(getToken()));
+const loggedIn = computed(() => Boolean(tokenRef.value));
 const error = ref("");
 const loading = ref(false);
 
@@ -74,6 +75,37 @@ function folderLabel(f, depth) {
   return `${pad}${f.name}`;
 }
 
+const folderOptions = computed(() => [
+  { value: null, label: "（无文件夹）" },
+  ...folderFlat.value.map((x) => ({ value: x.folder.id, label: folderLabel(x.folder, x.depth) }))
+]);
+
+const folderRootOptions = computed(() => [
+  { value: null, label: "（根目录）" },
+  ...folderFlat.value.map((x) => ({ value: x.folder.id, label: folderLabel(x.folder, x.depth) }))
+]);
+
+function folderRootOptionsForEdit(currentFolderId) {
+  return [
+    { value: null, label: "（根目录）" },
+    ...folderFlat.value.map((x) => ({
+      value: x.folder.id,
+      label: folderLabel(x.folder, x.depth),
+      disabled: x.folder.id === currentFolderId
+    }))
+  ];
+}
+
+const visibilityOptions = [
+  { value: "public", label: "公开" },
+  { value: "private", label: "私有" }
+];
+
+const folderVisibilityOptions = [
+  { value: "private", label: "私有" },
+  { value: "public", label: "公开" }
+];
+
 async function loadRemote() {
   loading.value = true;
   error.value = "";
@@ -239,11 +271,6 @@ async function saveEdit(id) {
   }
 }
 
-function logout() {
-  setToken("");
-  loadLocal();
-}
-
 async function reload() {
   if (loggedIn.value) await loadRemote();
   else loadLocal();
@@ -263,32 +290,37 @@ onMounted(() => {
 <template>
   <section class="bb-page">
     <div class="bb-pageHeader">
-      <h1>我的书签</h1>
-      <button v-if="loggedIn" class="bb-btn bb-btn--secondary" @click="logout">退出登录</button>
+      <div>
+        <h1 style="margin: 0;">我的书签</h1>
+        <div class="bb-muted" style="margin-top: 4px;">像课程进度一样管理你的链接：分组、搜索、可公开。</div>
+      </div>
     </div>
 
     <p v-if="!loggedIn" class="bb-muted" style="margin-top: 8px;">
       当前未登录：数据仅保存在本机 localStorage。登录后会自动同步到云端。
     </p>
 
-    <div class="searchRow" style="margin-top: 12px;">
-      <input v-model="q" class="bb-input" placeholder="搜索标题/链接" @keyup.enter="reload" />
-      <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="reload">搜索</button>
-      <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="clearSearch">清除</button>
+    <div class="bb-card" style="margin-top: 12px;">
+      <div class="sectionTitle">快速搜索</div>
+      <div class="searchRow" style="margin-top: 10px;">
+        <input v-model="q" class="bb-input" placeholder="搜索标题/链接" @keyup.enter="reload" />
+        <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="reload">搜索</button>
+        <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="clearSearch">清除</button>
+      </div>
     </div>
 
-    <div class="form">
-      <input v-model="title" class="bb-input" placeholder="标题" />
-      <input v-model="url" class="bb-input" placeholder="链接（https://...）" />
-      <select v-model="folderId" class="bb-select">
-        <option :value="null">（无文件夹）</option>
-        <option v-for="x in folderFlat" :key="x.folder.id" :value="x.folder.id">{{ folderLabel(x.folder, x.depth) }}</option>
-      </select>
-      <select v-model="visibility" class="bb-select">
-        <option value="public">公开</option>
-        <option value="private">私有</option>
-      </select>
-      <button class="bb-btn" @click="add">添加</button>
+    <div class="bb-card" style="margin-top: 12px;">
+      <div class="sectionTitle">添加书签</div>
+      <div class="form" style="margin-top: 10px;">
+        <input v-model="title" class="bb-input" placeholder="标题" />
+        <input v-model="url" class="bb-input" placeholder="链接（https://...）" />
+        <BbSelect v-model="folderId" :options="folderOptions" />
+        <BbSelect v-model="visibility" :options="visibilityOptions" />
+        <button class="bb-btn" @click="add">添加</button>
+      </div>
+      <div class="bb-muted" style="margin-top: 10px;">
+        小贴士：标题可写“为什么收藏/怎么用”，以后复习更快。
+      </div>
     </div>
 
     <div v-if="loggedIn" class="bb-card" style="margin: 12px 0;">
@@ -297,14 +329,8 @@ onMounted(() => {
       </div>
       <div class="bb-row" style="margin-top: 10px;">
         <input v-model="folderName" class="bb-input" placeholder="新文件夹名称" />
-        <select v-model="folderParentId" class="bb-select">
-          <option :value="null">（根目录）</option>
-          <option v-for="x in folderFlat" :key="x.folder.id" :value="x.folder.id">{{ folderLabel(x.folder, x.depth) }}</option>
-        </select>
-        <select v-model="folderVisibility" class="bb-select">
-          <option value="private">私有</option>
-          <option value="public">公开</option>
-        </select>
+        <BbSelect v-model="folderParentId" :options="folderRootOptions" />
+        <BbSelect v-model="folderVisibility" :options="folderVisibilityOptions" />
         <button class="bb-btn" @click="createFolder">创建文件夹</button>
       </div>
 
@@ -322,21 +348,11 @@ onMounted(() => {
           </template>
           <template v-else>
             <input v-model="editFolderName" class="bb-input" placeholder="文件夹名称" />
-            <select v-model="editFolderParentId" class="bb-select">
-              <option :value="null">（根目录）</option>
-              <option
-                v-for="p in folderFlat"
-                :key="p.folder.id"
-                :value="p.folder.id"
-                :disabled="p.folder.id === x.folder.id"
-              >
-                {{ folderLabel(p.folder, p.depth) }}
-              </option>
-            </select>
-            <select v-model="editFolderVisibility" class="bb-select">
-              <option value="private">私有</option>
-              <option value="public">公开</option>
-            </select>
+            <BbSelect
+              v-model="editFolderParentId"
+              :options="folderRootOptionsForEdit(x.folder.id)"
+            />
+            <BbSelect v-model="editFolderVisibility" :options="folderVisibilityOptions" />
             <div class="actions">
               <button class="bb-btn" @click="saveFolder(x.folder.id)">保存</button>
               <button class="bb-btn bb-btn--secondary" @click="cancelEditFolder">取消</button>
@@ -350,7 +366,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <p v-if="error" class="bb-alert bb-alert--error">{{ error }}</p>
+    <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
     <p v-if="loading" class="bb-muted">加载中…</p>
 
     <div v-if="!loading && !error && !items.length" class="bb-empty" style="margin-top: 12px;">
@@ -372,14 +388,8 @@ onMounted(() => {
         <div v-else class="edit">
           <input v-model="editTitle" class="bb-input" placeholder="标题" />
           <input v-model="editUrl" class="bb-input" placeholder="链接" />
-          <select v-model="editFolderId" class="bb-select">
-            <option :value="null">（无文件夹）</option>
-            <option v-for="x in folderFlat" :key="x.folder.id" :value="x.folder.id">{{ folderLabel(x.folder, x.depth) }}</option>
-          </select>
-          <select v-model="editVisibility" class="bb-select">
-            <option value="public">公开</option>
-            <option value="private">私有</option>
-          </select>
+          <BbSelect v-model="editFolderId" :options="folderOptions" />
+          <BbSelect v-model="editVisibility" :options="visibilityOptions" />
           <div class="actions">
             <button class="bb-btn" @click="saveEdit(b.id)">保存</button>
             <button class="bb-btn bb-btn--secondary" @click="cancelEdit">取消</button>
diff --git a/apps/web/src/pages/PublicPage.vue b/apps/web/src/pages/PublicPage.vue
index 4ddf904..b4054df 100644
--- a/apps/web/src/pages/PublicPage.vue
+++ b/apps/web/src/pages/PublicPage.vue
@@ -24,21 +24,28 @@ onMounted(load);
 
 <template>
   <section class="bb-page">
-    <h1>公开书签</h1>
-
-    <div class="bb-row" style="margin: 12px 0;">
-      <input v-model="q" class="bb-input" placeholder="搜索标题或链接" @keyup.enter="load" />
-      <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="load">搜索</button>
+    <div class="bb-pageHeader">
+      <div>
+        <h1 style="margin: 0;">公开书签</h1>
+        <div class="bb-muted" style="margin-top: 4px;">无需登录即可浏览：来自用户设置为“公开”的书签。</div>
+      </div>
     </div>
 
-    <p v-if="error" class="bb-alert bb-alert--error">{{ error }}</p>
-    <p v-else-if="loading" class="bb-muted">加载中…</p>
-    <div v-else-if="!items.length" class="bb-empty">
-      <div style="font-weight: 700;">暂无公开书签</div>
-      <div class="bb-muted" style="margin-top: 6px;">换个关键词试试，或稍后再来。</div>
+    <div class="bb-card" style="margin-top: 12px;">
+      <div class="bb-row">
+        <input v-model="q" class="bb-input" placeholder="搜索标题或链接" @keyup.enter="load" />
+        <button class="bb-btn bb-btn--secondary" :disabled="loading" @click="load">搜索</button>
+      </div>
+
+      <p v-if="error" class="bb-alert bb-alert--error" style="margin-top: 12px;">{{ error }}</p>
+      <p v-else-if="loading" class="bb-muted" style="margin-top: 12px;">加载中…</p>
+      <div v-else-if="!items.length" class="bb-empty" style="margin-top: 12px;">
+        <div style="font-weight: 800;">暂无公开书签</div>
+        <div class="bb-muted" style="margin-top: 6px;">换个关键词试试，或稍后再来。</div>
+      </div>
     </div>
 
-    <ul v-if="!loading && !error && items.length" class="bb-grid2" style="list-style: none; padding: 0;">
+    <ul v-if="!loading && !error && items.length" class="bb-publicList">
       <li v-for="b in items" :key="b.id" class="bb-card bb-card--interactive">
         <a :href="b.url" target="_blank" rel="noopener" class="title">{{ b.title }}</a>
         <div class="bb-muted" style="overflow-wrap: anywhere; margin-top: 6px;">{{ b.url }}</div>
@@ -48,6 +55,7 @@ onMounted(load);
 </template>
 
 <style scoped>
-h1 { margin: 0 0 12px; }
-.title { color: var(--bb-text); font-weight: 800; text-decoration: none; }
+.title { color: var(--bb-text); font-weight: 900; text-decoration: none; }
+.bb-publicList { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
+@media (min-width: 768px) { .bb-publicList { grid-template-columns: 1fr 1fr; } }
 </style>
diff --git a/apps/web/src/router.js b/apps/web/src/router.js
index 3660c85..ecdf5fa 100644
--- a/apps/web/src/router.js
+++ b/apps/web/src/router.js
@@ -3,6 +3,7 @@ import PublicPage from "./pages/PublicPage.vue";
 import LoginPage from "./pages/LoginPage.vue";
 import MyPage from "./pages/MyPage.vue";
 import ImportExportPage from "./pages/ImportExportPage.vue";
+import { tokenRef } from "./lib/api";
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -13,3 +14,19 @@ export const router = createRouter({
     { path: "/import", component: ImportExportPage }
   ]
 });
+
+router.beforeEach((to) => {
+  const loggedIn = Boolean(tokenRef.value);
+
+  // 主页（/）永远是公共首页；不因登录态自动跳转
+
+  // 已登录访问登录页：直接去“我的”
+  if (to.path === "/login" && loggedIn) return { path: "/my" };
+
+  // 导入导出：登录后才可见/可用
+  if (to.path === "/import" && !loggedIn) {
+    return { path: "/login", query: { next: to.fullPath } };
+  }
+
+  return true;
+});
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index b3e4ad1..35a13a1 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -1,12 +1,24 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@300;400;500;600;700&display=swap");
 
 :root {
-  --bb-bg: #f8fafc;
-  --bb-text: #1e293b;
-  --bb-primary: #3b82f6;
-  --bb-primary-weak: #60a5fa;
-  --bb-cta: #f97316;
-  --bb-border: #e5e7eb;
+  /* Educational-platform claymorphism palette (vibrant + friendly) */
+  --bb-bg: #f0fdfa;
+  --bb-text: #134e4a;
+  --bb-primary: #0d9488;
+  --bb-primary-weak: #2dd4bf;
+  --bb-cta: #ea580c;
+  --bb-border: rgba(19, 78, 74, 0.12);
+  --bb-border-strong: rgba(19, 78, 74, 0.20);
+
+  --bb-font-heading: "Baloo 2", Inter, ui-sans-serif, system-ui;
+
+  --bb-gradient: radial-gradient(1100px 520px at 12% 10%, rgba(13, 148, 136, 0.30), transparent 55%),
+    radial-gradient(920px 620px at 92% 18%, rgba(45, 212, 191, 0.22), transparent 56%),
+    radial-gradient(900px 600px at 45% 92%, rgba(234, 88, 12, 0.20), transparent 55%),
+    linear-gradient(180deg, #f0fdfa 0%, #f8fafc 60%, #ffffff 100%);
+
+  --bb-clay: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.70));
+  --bb-shadow-clay: 0 22px 60px rgba(19, 78, 74, 0.16), 0 2px 0 rgba(255,255,255,0.92) inset, 0 -2px 0 rgba(19, 78, 74, 0.05) inset;
 
   font-family: Inter, ui-sans-serif, system-ui;
   line-height: 1.5;
@@ -23,7 +35,7 @@ body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  background: var(--bb-bg);
+  background: var(--bb-gradient);
   color: var(--bb-text);
 }
 
@@ -37,13 +49,13 @@ a {
 }
 
 a:hover {
-  color: var(--bb-primary-weak);
+  color: var(--bb-cta);
 }
 
 a:focus-visible,
 button:focus-visible,
 input:focus-visible {
-  outline: 2px solid rgba(59, 130, 246, 0.6);
+  outline: 2px solid rgba(13, 148, 136, 0.55);
   outline-offset: 2px;
 }
 
@@ -73,7 +85,7 @@ input:focus-visible {
 }
 
 .bb-muted {
-  color: #475569;
+  color: rgba(19, 78, 74, 0.72);
   font-size: 12px;
 }
 
@@ -81,12 +93,133 @@ input:focus-visible {
 .bb-select {
   width: 100%;
   padding: 10px 12px;
-  border: 1px solid var(--bb-border);
-  border-radius: 10px;
-  background: white;
+  border: 1px solid rgba(255,255,255,0.55);
+  border-radius: 16px;
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(10px);
   color: var(--bb-text);
 }
 
+/* Hide native file control (we use styled buttons) */
+.bb-fileInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.bb-fileName {
+  flex: 1;
+  min-width: 180px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255,255,255,0.55);
+  border-radius: 16px;
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(10px);
+  color: var(--bb-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bb-fileName.is-empty {
+  color: rgba(19, 78, 74, 0.55);
+}
+
+/* Custom select (consistent dropdown menu styling) */
+.bb-selectWrap {
+  position: relative;
+  width: 100%;
+}
+
+.bb-selectWrap--sm .bb-selectTrigger {
+  padding: 8px 10px;
+}
+
+.bb-selectTrigger {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid rgba(255,255,255,0.55);
+  border-radius: 16px;
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(10px);
+  color: var(--bb-text);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.bb-selectTrigger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.bb-selectValue {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bb-selectPlaceholder {
+  color: rgba(19, 78, 74, 0.55);
+}
+
+.bb-selectChevron {
+  flex: 0 0 auto;
+  opacity: 0.85;
+}
+
+.bb-selectMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  border-radius: 18px;
+  padding: 6px;
+  border: 1px solid rgba(255,255,255,0.65);
+  background: rgba(255,255,255,0.70);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 22px 60px rgba(19, 78, 74, 0.16);
+  max-height: 320px;
+  overflow: auto;
+}
+
+.bb-selectOption {
+  width: 100%;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--bb-text);
+  padding: 10px 10px;
+  border-radius: 14px;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.bb-selectOption:hover {
+  background: rgba(13, 148, 136, 0.10);
+}
+
+.bb-selectOption.is-selected {
+  background: rgba(234, 88, 12, 0.12);
+  border-color: rgba(234, 88, 12, 0.22);
+}
+
+.bb-selectOption.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 .bb-input--sm,
 .bb-select--sm {
   padding: 8px 10px;
@@ -94,9 +227,9 @@ input:focus-visible {
 
 .bb-btn {
   padding: 10px 12px;
-  border: 1px solid var(--bb-primary);
-  border-radius: 10px;
-  background: var(--bb-primary);
+  border: 1px solid rgba(255,255,255,0.25);
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
   color: white;
   cursor: pointer;
   transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
@@ -111,8 +244,8 @@ input:focus-visible {
 }
 
 .bb-btn--secondary {
-  border-color: var(--bb-border);
-  background: rgba(59, 130, 246, 0.08);
+  border-color: rgba(255,255,255,0.45);
+  background: rgba(255,255,255,0.35);
   color: var(--bb-text);
 }
 
@@ -129,10 +262,11 @@ input:focus-visible {
 }
 
 .bb-card {
-  border: 1px solid var(--bb-border);
-  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,0.55);
+  border-radius: 18px;
   padding: 12px;
-  background: white;
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(12px);
 }
 
 .bb-card--interactive {
@@ -164,10 +298,430 @@ input:focus-visible {
 }
 
 .bb-empty {
-  border: 1px dashed var(--bb-border);
-  border-radius: 14px;
+  border: 1px dashed rgba(15, 23, 42, 0.18);
+  border-radius: 18px;
   padding: 18px 14px;
-  background: rgba(255, 255, 255, 0.65);
+  background: rgba(255, 255, 255, 0.55);
+}
+
+/* --- Landing page (ui-ux-pro-max) --- */
+.bb-landing {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 18px 16px 28px;
+}
+
+.bb-hero {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 14px;
+  align-items: stretch;
+}
+
+@media (min-width: 960px) {
+  .bb-hero {
+    grid-template-columns: 1.25fr 0.75fr;
+    gap: 16px;
+  }
+}
+
+.bb-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.55);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
+  font-weight: 800;
+  font-size: 12px;
+}
+
+.bb-pillDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
+  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.18);
+}
+
+.bb-heroTitle {
+  margin: 12px 0 8px;
+  font-family: var(--bb-font-heading);
+  font-size: 34px;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+
+@media (min-width: 960px) {
+  .bb-heroTitle { font-size: 44px; }
+}
+
+.bb-heroSub {
+  margin: 0;
+  font-size: 14px;
+  color: rgba(19, 78, 74, 0.78);
+}
+
+.bb-heroCtaRow {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 14px;
+}
+
+.bb-ctaPrimary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  border-radius: 18px;
+  color: white;
+  text-decoration: none;
+  font-weight: 900;
+  border: 1px solid rgba(255,255,255,0.25);
+  background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
+  box-shadow: 0 18px 45px rgba(13, 148, 136, 0.20);
+}
+
+.bb-ctaGhost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 16px;
+  border-radius: 18px;
+  color: var(--bb-text);
+  text-decoration: none;
+  font-weight: 900;
+  border: 1px solid rgba(255,255,255,0.55);
+  background: rgba(255,255,255,0.45);
+}
+
+.bb-miniStats {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+@media (min-width: 768px) {
+  .bb-miniStats { grid-template-columns: repeat(3, 1fr); }
+}
+
+.bb-miniStat {
+  border-radius: 18px;
+  border: 1px solid rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.45);
+  padding: 12px;
+  box-shadow: 0 14px 40px rgba(19, 78, 74, 0.10);
+}
+
+.bb-miniStat .k { font-weight: 900; font-size: 12px; }
+.bb-miniStat .v { margin-top: 6px; font-size: 12px; color: rgba(19,78,74,0.72); }
+
+.bb-clayCard {
+  border-radius: 22px;
+  border: 2px solid rgba(255,255,255,0.78);
+  background: var(--bb-clay);
+  box-shadow: var(--bb-shadow-clay);
+  padding: 14px;
+}
+
+.bb-statRow {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.bb-stat {
+  border-radius: 18px;
+  border: 2px solid rgba(255,255,255,0.72);
+  background: rgba(255,255,255,0.48);
+  padding: 12px;
+  box-shadow: 0 16px 44px rgba(19, 78, 74, 0.12);
+}
+
+.bb-stat .n {
+  font-family: var(--bb-font-heading);
+  font-size: 20px;
+  letter-spacing: -0.02em;
+  font-weight: 800;
+}
+
+.bb-stat .t {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 800;
+  color: rgba(19, 78, 74, 0.72);
+}
+
+.bb-cardTitle { font-weight: 950; letter-spacing: -0.02em; }
+.bb-cardSub { margin-top: 6px; font-size: 12px; color: rgba(19,78,74,0.72); }
+
+.bb-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-weight: 950;
+  font-size: 11px;
+  background: rgba(124, 58, 237, 0.14);
+  border: 1px solid rgba(124, 58, 237, 0.28);
+  width: fit-content;
+}
+.bb-tag2 { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.28); }
+.bb-tag3 { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.28); }
+
+.bb-bullets { margin: 10px 0 0; padding-left: 18px; }
+.bb-bullets li { margin: 6px 0; font-weight: 700; color: rgba(19,78,74,0.78); }
+
+.bb-section { margin-top: 18px; }
+.bb-sectionHeader h2 { margin: 0; font-size: 18px; letter-spacing: -0.02em; font-family: var(--bb-font-heading); }
+.bb-grid3 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  margin-top: 12px;
+}
+@media (min-width: 960px) {
+  .bb-grid3 { grid-template-columns: repeat(3, 1fr); }
+}
+
+.bb-courseGrid {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 720px) {
+  .bb-courseGrid { grid-template-columns: 1fr 1fr; }
+}
+
+@media (min-width: 1100px) {
+  .bb-courseGrid { grid-template-columns: repeat(4, 1fr); }
+}
+
+.bb-courseCard {
+  border-radius: 22px;
+  border: 2px solid rgba(255,255,255,0.78);
+  background: var(--bb-clay);
+  box-shadow: var(--bb-shadow-clay);
+  padding: 14px;
+  display: grid;
+  gap: 10px;
+}
+
+.bb-courseTitle {
+  font-weight: 950;
+  letter-spacing: -0.02em;
+}
+
+.bb-courseBy {
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 900;
+  color: rgba(19, 78, 74, 0.72);
+}
+
+.bb-courseMeta {
+  font-size: 12px;
+  color: rgba(19, 78, 74, 0.78);
+  font-weight: 800;
+}
+
+.bb-courseCtaRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.bb-courseCtaRow .bb-btn {
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
+}
+
+.bb-centerRow {
+  display: flex;
+  justify-content: center;
+}
+
+.bb-featureCard {
+  display: grid;
+  gap: 8px;
+}
+
+.bb-iconBubble {
+  width: 42px;
+  height: 42px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  color: var(--bb-text);
+  border: 2px solid rgba(255,255,255,0.78);
+  background: rgba(255,255,255,0.55);
+  box-shadow: 0 14px 40px rgba(19, 78, 74, 0.12);
+}
+
+.bb-progressDemo .bb-tip { margin-top: 10px; font-size: 12px; color: rgba(19,78,74,0.72); }
+.bb-progressItem { margin-top: 10px; }
+.bb-progressItem .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 12px; }
+.bb-progressItem .pct { font-weight: 950; }
+.bb-progressItem .bar { margin-top: 8px; height: 12px; border-radius: 999px; background: rgba(15,23,42,0.08); overflow: hidden; border: 1px solid rgba(255,255,255,0.55); }
+.bb-progressItem .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bb-primary), var(--bb-cta)); }
+.bb-progressItem .fill2 { background: linear-gradient(90deg, #22c55e, #06b6d4); }
+.bb-progressItem .fill3 { background: linear-gradient(90deg, #fb7185, #f59e0b); }
+
+.bb-quote { font-weight: 800; line-height: 1.35; }
+.bb-quoteBy { margin-top: 10px; font-size: 12px; color: rgba(15,23,42,0.72); font-weight: 900; }
+
+.bb-story { position: relative; }
+
+.bb-stars {
+  display: flex;
+  gap: 3px;
+  color: rgba(234, 179, 8, 0.95);
+  font-weight: 900;
+}
+
+.bb-star {
+  width: 16px;
+  height: 16px;
+}
+
+.bb-ctaBand {
+  margin-top: 18px;
+  border-radius: 24px;
+  border: 1px solid rgba(255,255,255,0.6);
+  background: linear-gradient(135deg, rgba(13, 148, 136, 0.22), rgba(45, 212, 191, 0.18), rgba(234, 88, 12, 0.16));
+  padding: 14px;
+  box-shadow: 0 24px 80px rgba(19, 78, 74, 0.14);
+}
+
+.bb-ctaBandInner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.bb-ctaBandTitle { font-weight: 950; letter-spacing: -0.02em; }
+.bb-ctaBandSub { margin-top: 4px; font-size: 12px; color: rgba(15,23,42,0.78); }
+
+.bb-ctaBandHint {
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 900;
+  color: rgba(19, 78, 74, 0.78);
+}
+
+.bb-ctaBandActions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Footer (educational platform style) */
+.bb-footer {
+  margin-top: 18px;
+  padding: 18px 0 28px;
+}
+
+.bb-footerInner {
+  border-radius: 24px;
+  border: 2px solid rgba(255,255,255,0.68);
+  background: rgba(255,255,255,0.55);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 24px 80px rgba(19, 78, 74, 0.14);
+  padding: 16px;
+}
+
+.bb-footerBrand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.bb-footerLogo {
+  width: 42px;
+  height: 42px;
+  border-radius: 16px;
+  display: grid;
+  place-items: center;
+  font-family: var(--bb-font-heading);
+  font-weight: 800;
+  border: 2px solid rgba(255,255,255,0.78);
+  background: var(--bb-clay);
+  box-shadow: var(--bb-shadow-clay);
+}
+
+.bb-footerTitle {
+  font-family: var(--bb-font-heading);
+  font-weight: 800;
+}
+
+.bb-footerCols {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 900px) {
+  .bb-footerCols { grid-template-columns: repeat(3, 1fr); }
+}
+
+.bb-footerCol {
+  display: grid;
+  gap: 8px;
+}
+
+.bb-footerCol .h {
+  font-weight: 950;
+  color: rgba(19, 78, 74, 0.88);
+}
+
+.bb-footerCol a {
+  color: rgba(19, 78, 74, 0.78);
+  font-weight: 800;
+}
+
+.bb-footerCol a:hover {
+  color: var(--bb-cta);
+}
+
+.bb-footerBottom {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(19, 78, 74, 0.10);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.bb-footerSocial {
+  display: flex;
+  gap: 8px;
+}
+
+.bb-footerSocial .s {
+  width: 34px;
+  height: 34px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  border: 2px solid rgba(255,255,255,0.72);
+  background: rgba(255,255,255,0.45);
+  color: rgba(19, 78, 74, 0.88);
+  font-weight: 950;
 }
 
 .bb-grid2 {
@@ -181,3 +735,125 @@ input:focus-visible {
     grid-template-columns: 1fr 1fr;
   }
 }
+
+/* --- Auth / segmented controls / subtle motion --- */
+.bb-auth {
+  max-width: 1100px;
+  padding-top: 22px;
+  padding-bottom: 28px;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+
+@media (min-width: 960px) {
+  .bb-auth {
+    grid-template-columns: 1.05fr 0.95fr;
+    align-items: start;
+  }
+}
+
+.bb-authCard {
+  position: relative;
+  overflow: hidden;
+}
+
+.bb-authCard::before,
+.bb-authCard::after {
+  content: "";
+  position: absolute;
+  width: 320px;
+  height: 320px;
+  border-radius: 999px;
+  filter: blur(22px);
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.bb-authCard::before {
+  background: radial-gradient(circle at 30% 30%, rgba(13,148,136,0.42), transparent 60%);
+  top: -160px;
+  left: -140px;
+}
+
+.bb-authCard::after {
+  background: radial-gradient(circle at 40% 40%, rgba(234,88,12,0.34), transparent 62%);
+  bottom: -170px;
+  right: -160px;
+}
+
+.bb-authHeader {
+  position: relative;
+  z-index: 1;
+}
+
+.bb-seg {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 18px;
+  border: 1px solid rgba(255,255,255,0.65);
+  background: rgba(255,255,255,0.45);
+  backdrop-filter: blur(12px);
+  position: relative;
+  z-index: 1;
+}
+
+.bb-segBtn {
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255,255,255,0.30);
+  background: rgba(255,255,255,0.38);
+  color: var(--bb-text);
+  font-weight: 950;
+  cursor: pointer;
+  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
+}
+
+.bb-segBtn:hover {
+  filter: brightness(1.03);
+}
+
+.bb-segBtn:active {
+  transform: translateY(1px);
+}
+
+.bb-segBtn.active {
+  background: linear-gradient(135deg, rgba(124,58,237,0.92), rgba(251,113,133,0.92));
+  color: white;
+  border-color: rgba(255,255,255,0.45);
+}
+
+.bb-field {
+  display: grid;
+  gap: 6px;
+}
+
+.bb-label {
+  font-size: 12px;
+  font-weight: 900;
+  color: rgba(15,23,42,0.78);
+}
+
+.bb-authAside {
+  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.10);
+}
+
+.bb-authBadges {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+@keyframes bb-float {
+  0% { transform: translate3d(0, 0, 0); }
+  50% { transform: translate3d(0, -8px, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
+
+.bb-card--interactive:hover {
+  animation: bb-float 2.8s ease-in-out infinite;
+}
diff --git a/package-lock.json b/package-lock.json
index fa93483..134e4f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,10 +19,13 @@
     "apps/extension": {
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.5.24"
+        "@browser-bookmark/shared": "0.1.0",
+        "vue": "^3.5.24",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
+        "eslint": "^9.17.0",
         "vite": "^7.2.4"
       }
     },
diff --git a/packages/shared/src/package.json b/packages/shared/src/package.json
index 352055c..e986b24 100644
--- a/packages/shared/src/package.json
+++ b/packages/shared/src/package.json
@@ -1,3 +1,4 @@
 {
-  "private": true
+  "private": true,
+  "type": "module"
 }