diff --git a/app/components/TopNav.vue b/app/components/TopNav.vue
index d74fb98..eb2f4e3 100644
--- a/app/components/TopNav.vue
+++ b/app/components/TopNav.vue
@@ -9,7 +9,8 @@ const router = useRouter()
 const { loggedIn, user, clear, initialized } = useAuthSession()
 
 const links: any = [
-
+  { to: "/collect", label: "收藏"  },
+  { to: "/test", label: "测试"  },
 ]
 
 const searchQuery = ref((route.query.q as string) ?? '')
diff --git a/app/components/index/CardDetailModal.vue b/app/components/index/CardDetailModal.vue
index ce2f376..c43ae7e 100644
--- a/app/components/index/CardDetailModal.vue
+++ b/app/components/index/CardDetailModal.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { CategoryNode } from './CategoryTreeNode.vue'
+import { getTypeLabel, type CardType } from '~/config/cardTypes'
 
 export interface CardDetail {
   id: number
-  type: 'text' | 'image' | 'image-text' | 'portfolio' | 'project'
+  type: CardType
   image?: string
   images?: string[]
   title: string
@@ -47,16 +48,7 @@ const categoryName = computed(() => {
   return find(props.categories)
 })
 
-const typeLabel = computed(() => {
-  const map: Record<string, string> = {
-    text: '纯文本',
-    image: '图片',
-    'image-text': '图文',
-    portfolio: '图集',
-    project: '项目',
-  }
-  return map[props.card?.type ?? ''] ?? props.card?.type ?? ''
-})
+const typeLabel = computed(() => getTypeLabel(props.card?.type ?? ''))
 
 const imageCount = computed(() => props.card?.images?.length ?? (props.card?.image ? 1 : 0))
 
diff --git a/app/components/index/CardFormModal.vue b/app/components/index/CardFormModal.vue
index 5232d01..cfcd5c3 100644
--- a/app/components/index/CardFormModal.vue
+++ b/app/components/index/CardFormModal.vue
@@ -2,14 +2,7 @@
 import type { CategoryNode } from './CategoryTreeNode.vue'
 import type { CardDetail } from './CardDetailModal.vue'
 import { request } from '~/utils/http/factory'
-
-const CARD_TYPES = [
-  { value: 'image-text', label: '图文', icon: 'lucide:image-plus' },
-  { value: 'image', label: '图片', icon: 'lucide:image' },
-  { value: 'text', label: '纯文本', icon: 'lucide:text' },
-  { value: 'portfolio', label: '图集', icon: 'lucide:layout-grid' },
-  { value: 'project', label: '项目', icon: 'lucide:folder-kanban' },
-] as const
+import { cardTypeRegistry, CARD_TYPE_OPTIONS, type CardType } from '~/config/cardTypes'
 
 const ASPECT_PRESETS = [
   { label: '竖图 3:4', value: 0.75 },
@@ -65,17 +58,12 @@ const isEdit = computed(() => props.mode === 'edit')
 
 const titleText = computed(() => isEdit.value ? '编辑卡片' : '新增卡片')
 
-const needsImage = computed(() =>
-  formType.value === 'image' || formType.value === 'image-text' || formType.value === 'project'
-)
-
-const needsMultiImage = computed(() => formType.value === 'portfolio')
-
-const needsTags = computed(() => formType.value === 'project')
-
-const needsDescription = computed(() =>
-  formType.value === 'text' || formType.value === 'image-text' || formType.value === 'portfolio' || formType.value === 'project'
-)
+// 从注册表读取表单字段需求（新增类型无需修改此文件）
+const formFields = computed(() => cardTypeRegistry[formType.value as CardType]?.formFields ?? {})
+const needsImage = computed(() => formFields.value.image ?? false)
+const needsMultiImage = computed(() => formFields.value.multiImage ?? false)
+const needsTags = computed(() => formFields.value.tags ?? false)
+const needsDescription = computed(() => formFields.value.description ?? false)
 
 // Flatten category tree for select
 interface FlatCat { id: string; name: string; depth: number }
@@ -245,7 +233,7 @@ async function onSubmit() {
           <label class="cf-label">类型</label>
           <div class="cf-type-grid">
             <button
-              v-for="ct in CARD_TYPES"
+              v-for="ct in CARD_TYPE_OPTIONS"
               :key="ct.value"
               type="button"
               class="cf-type-btn"
diff --git a/app/components/index/LeftSidebar.vue b/app/components/index/LeftSidebar.vue
index d94605a..f03ebc0 100644
--- a/app/components/index/LeftSidebar.vue
+++ b/app/components/index/LeftSidebar.vue
@@ -17,7 +17,6 @@ const props = withDefaults(defineProps<{
   drawerOpen?: boolean
   width?: string
   side?: 'left' | 'right'
-  loggedIn?: boolean
 }>(), {
   mode: 'rail',
   drawerOpen: false,
@@ -90,7 +89,6 @@ const ctxItems = computed<ContextMenuItem[]>(() => [
 ])
 
 function onTreeContextMenu(node: CategoryNode, event: MouseEvent) {
-  if (!props.loggedIn) return
   if (node.id === '__uncategorized__') return
   ctxNode.value = node
   ctxX.value = event.clientX
@@ -157,7 +155,6 @@ function onAddRoot() {
           分类
         </span>
         <button
-          v-if="loggedIn"
           type="button"
           class="cat-add"
           title="新建分类"
@@ -172,7 +169,7 @@ function onAddRoot() {
         <div v-if="categories.length === 0" class="empty-tip">
           <Icon name="lucide:folder-open" class="empty-icon" />
           <span>还没有分类</span>
-          <button v-if="loggedIn" type="button" class="empty-btn" @click="onAddRoot">
+          <button type="button" class="empty-btn" @click="onAddRoot">
             新建第一个
           </button>
         </div>
@@ -190,7 +187,6 @@ function onAddRoot() {
       </div>
 
       <IndexContextMenu
-        v-if="loggedIn"
         :visible="ctxVisible"
         :x="ctxX"
         :y="ctxY"
@@ -234,7 +230,6 @@ function onAddRoot() {
           分类
         </span>
         <button
-          v-if="loggedIn"
           type="button"
           class="cat-add"
           title="新建分类"
@@ -249,7 +244,7 @@ function onAddRoot() {
         <div v-if="categories.length === 0" class="empty-tip">
           <Icon name="lucide:folder-open" class="empty-icon" />
           <span>还没有分类</span>
-          <button v-if="loggedIn" type="button" class="empty-btn" @click="onAddRoot">
+          <button type="button" class="empty-btn" @click="onAddRoot">
             新建第一个
           </button>
         </div>
@@ -267,7 +262,6 @@ function onAddRoot() {
       </div>
 
       <IndexContextMenu
-        v-if="loggedIn"
         :visible="ctxVisible"
         :x="ctxX"
         :y="ctxY"
diff --git a/app/config/cardTypes.ts b/app/config/cardTypes.ts
new file mode 100644
index 0000000..1724894
--- /dev/null
+++ b/app/config/cardTypes.ts
@@ -0,0 +1,154 @@
+/**
+ * 卡片类型注册表
+ *
+ * 新增卡片类型只需在此文件中：
+ * 1. 在 CardTypes 数组中添加类型值
+ * 2. 在 cardTypeRegistry 中添加对应配置
+ * 3. 创建对应的瀑布流渲染组件
+ *
+ * 无需修改 index.vue / CardFormModal / CardDetailModal。
+ */
+import type { Component } from 'vue'
+import WaterfallCard from '~/components/index/WaterfallCard.vue'
+import WaterfallTextCard from '~/components/index/WaterfallTextCard.vue'
+import WaterfallImageCard from '~/components/index/WaterfallImageCard.vue'
+import WaterfallPortfolioCard from '~/components/index/WaterfallPortfolioCard.vue'
+import WaterfallProjectCard from '~/components/index/WaterfallProjectCard.vue'
+
+// ============ CardType 常量（与 drizzle schema 保持同步） ============
+export const CardTypes = [
+  'text',
+  'image',
+  'image-text',
+  'portfolio',
+  'project',
+] as const
+export type CardType = (typeof CardTypes)[number]
+
+// ============ 前端卡片数据接口 ============
+export interface CardItemLike {
+  id?: number
+  type: CardType
+  image?: string
+  images?: string[]
+  title: string
+  description?: string
+  tags?: string[]
+  aspectRatio: number
+  categoryId?: string | null
+  createdAt?: string
+}
+
+// ============ 类型配置 ============
+export interface CardTypeFormFields {
+  /** 是否需要单张图片 */
+  image?: boolean
+  /** 是否需要多张图片 */
+  multiImage?: boolean
+  /** 是否需要描述字段 */
+  description?: boolean
+  /** 是否需要标签选择 */
+  tags?: boolean
+}
+
+export interface CardTypeConfig {
+  /** 瀑布流渲染组件 */
+  component: Component
+  /** 中文标签 */
+  label: string
+  /** 图标名 (lucide:xxx) */
+  icon: string
+  /** 表单字段需求 */
+  formFields: CardTypeFormFields
+  /** 从 CardItemLike 提取该组件需要的 props */
+  mapProps: (item: CardItemLike) => Record<string, unknown>
+}
+
+// ============ 注册表 ============
+export const cardTypeRegistry: Record<CardType, CardTypeConfig> = {
+  text: {
+    component: WaterfallTextCard,
+    label: '纯文本',
+    icon: 'lucide:text',
+    formFields: { description: true },
+    mapProps: (item) => ({
+      title: item.title,
+      description: item.description ?? '',
+      aspectRatio: item.aspectRatio,
+    }),
+  },
+  image: {
+    component: WaterfallImageCard,
+    label: '图片',
+    icon: 'lucide:image',
+    formFields: { image: true },
+    mapProps: (item) => ({
+      image: item.image ?? '',
+      title: item.title,
+      aspectRatio: item.aspectRatio,
+    }),
+  },
+  'image-text': {
+    component: WaterfallCard,
+    label: '图文',
+    icon: 'lucide:image-plus',
+    formFields: { image: true, description: true },
+    mapProps: (item) => ({
+      image: item.image ?? '',
+      title: item.title,
+      description: item.description ?? '',
+      aspectRatio: item.aspectRatio,
+    }),
+  },
+  portfolio: {
+    component: WaterfallPortfolioCard,
+    label: '图集',
+    icon: 'lucide:layout-grid',
+    formFields: { multiImage: true, description: true },
+    mapProps: (item) => ({
+      images: item.images ?? [],
+      title: item.title,
+      description: item.description ?? '',
+      aspectRatio: item.aspectRatio,
+    }),
+  },
+  project: {
+    component: WaterfallProjectCard,
+    label: '项目',
+    icon: 'lucide:folder-kanban',
+    formFields: { image: true, description: true, tags: true },
+    mapProps: (item) => ({
+      image: item.image ?? '',
+      title: item.title,
+      description: item.description ?? '',
+      tags: item.tags ?? [],
+      aspectRatio: item.aspectRatio,
+    }),
+  },
+}
+
+// ============ 派生数据（供表单等使用） ============
+
+/** 类型选项列表（用于表单类型选择器） */
+export const CARD_TYPE_OPTIONS = CardTypes.map((t) => ({
+  value: t,
+  label: cardTypeRegistry[t].label,
+  icon: cardTypeRegistry[t].icon,
+}))
+
+/** 获取类型中文标签 */
+export function getTypeLabel(type: CardType | string): string {
+  return cardTypeRegistry[type as CardType]?.label ?? type
+}
+
+/**
+ * 运行时校验：确保注册表覆盖了所有 CardType
+ * 如果注册表缺少某个类型，会在控制台警告
+ */
+if (import.meta.dev) {
+  for (const t of CardTypes) {
+    if (!cardTypeRegistry[t]) {
+      console.warn(`[cardTypes] 注册表缺少类型 "${t}" 的配置`)
+    }
+  }
+}
diff --git a/app/pages/collect/index copy.vue b/app/pages/collect/index copy.vue
new file mode 100644
index 0000000..3970b77
--- /dev/null
+++ b/app/pages/collect/index copy.vue	
@@ -0,0 +1,1125 @@
+<script setup lang="ts">
+const hero = {
+  img: 'https://picsum.photos/id/60/1200/900',
+  title: '这些是我的',
+  sub: '不是最好的，但都是有故事的',
+}
+
+const collections = [
+  { id: 10,  title: '午后',    aspect: 'v',  size: 'lg' },
+  { id: 20,  title: '城市',    aspect: 'h',  size: 'sm' },
+  { id: 30,  title: '海岸',    aspect: 'v',  size: 'md' },
+  { id: 40,  title: '远行',    aspect: 'h',  size: 'sm' },
+  { id: 50,  title: '静物',    aspect: 'sq', size: 'md' },
+  { id: 60,  title: '人像',    aspect: 'v',  size: 'lg' },
+  { id: 70,  title: '夜色',    aspect: 'h',  size: 'md' },
+  { id: 80,  title: '山川',    aspect: 'v',  size: 'sm' },
+  { id: 100, title: '森林',   aspect: 'h',  size: 'sm' },
+  { id: 110, title: '街道',   aspect: 'sq', size: 'lg' },
+  { id: 120, title: '雨季',   aspect: 'v',  size: 'md' },
+  { id: 130, title: '晴空',   aspect: 'h',  size: 'sm' },
+  { id: 140, title: '咖啡',   aspect: 'sq', size: 'md' },
+  { id: 150, title: '旅途',   aspect: 'v',  size: 'lg' },
+  { id: 160, title: '废墟',   aspect: 'h',  size: 'sm' },
+  { id: 170, title: '浪潮',   aspect: 'v',  size: 'md' },
+]
+
+function imgSrc(id: number, aspect: string, h: number) {
+  const sizes: Record<string, number> = { h: 900, v: 600, sq: 700 }
+  const w = sizes[aspect] ?? 700
+  return `https://picsum.photos/id/${id}/${w}/${h}`
+}
+
+// ── Animation refs ──
+const heroRef = ref<HTMLElement | null>(null)
+const heroImgRef = ref<HTMLElement | null>(null)
+const bentoItems = ref<HTMLElement[]>([])
+const dwPhotos = ref<HTMLElement[]>([])
+const scrollY = ref(0)
+
+function onScroll() {
+  scrollY.value = window.scrollY
+  if (heroImgRef.value) {
+    const progress = scrollY.value * 0.35
+    heroImgRef.value.style.transform = `translateY(${progress}px) scale(1.0)`
+  }
+}
+
+// ── Typewriter for hero title ──
+const displayTitle = ref('')
+const titleText = hero.title
+let charIndex = 0
+
+function startTypewriter() {
+  if (charIndex < titleText.length) {
+    displayTitle.value += titleText[charIndex]
+    charIndex++
+    setTimeout(startTypewriter, 90 + Math.random() * 60)
+  }
+}
+
+// ── Bento scroll reveal ──
+let bentoObserver: IntersectionObserver | null = null
+
+function setupBentoObserver() {
+  bentoObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const el = entry.target as HTMLElement
+          const delay = Number(el.dataset.delay ?? 0)
+          setTimeout(() => {
+            el.classList.add('is-visible')
+          }, delay)
+          bentoObserver?.unobserve(el)
+        }
+      })
+    },
+    { threshold: 0.08 }
+  )
+  bentoItems.value.forEach((el, i) => {
+    if (el) {
+      el.dataset.delay = String(i * 75)
+      bentoObserver?.observe(el)
+    }
+  })
+}
+
+// ── Dark wall reveal ──
+let dwObserver: IntersectionObserver | null = null
+
+function setupDwObserver() {
+  dwObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const el = entry.target as HTMLElement
+          const delay = Number(el.dataset.delay ?? 0)
+          setTimeout(() => {
+            el.classList.add('is-visible')
+          }, delay)
+          dwObserver?.unobserve(el)
+        }
+      })
+    },
+    { threshold: 0.1 }
+  )
+  dwPhotos.value.forEach((el, i) => {
+    if (el) {
+      el.dataset.delay = String(i * 100)
+      dwObserver?.observe(el)
+    }
+  })
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll, { passive: true })
+  setupBentoObserver()
+  setupDwObserver()
+  // Start typewriter after hero text animation begins
+  setTimeout(startTypewriter, 800)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll)
+  bentoObserver?.disconnect()
+  dwObserver?.disconnect()
+})
+</script>
+
+<template>
+  <main class="canvas">
+
+    <!-- ── Hero ── -->
+    <section class="hero" ref="heroRef">
+      <div class="hero-img-wrap" ref="heroImgRef">
+        <img :src="hero.img" :alt="hero.title" class="hero-img" />
+        <div class="hero-vignette" />
+        <div class="hero-sweep" />
+      </div>
+      <div class="hero-content">
+        <div class="hero-eyebrow reveal-item">私人收藏 · 随记</div>
+        <h1 class="hero-title"><span class="typewriter-text">{{ displayTitle }}</span><span class="typewriter-cursor">|</span></h1>
+        <p class="hero-sub reveal-item">{{ hero.sub }}</p>
+      </div>
+    </section>
+
+    <!-- ── Bento grid — editorial rhythm ── -->
+    <section class="bento-section">
+      <div class="bento-header">
+        <span class="bento-index">01</span>
+        <h2 class="bento-heading">碎片收藏</h2>
+        <p class="bento-sub">每一格都是一段被打断的思绪</p>
+      </div>
+      <div class="bento">
+        <!-- ── Zone A: large left + 3-column strip right ── -->
+        <div class="b-zone-a">
+          <div class="b-a-main reveal-card" :ref="(el) => { if (el) bentoItems[0] = el as HTMLElement }">
+            <div class="b-img-wrap">
+              <img src="https://picsum.photos/id/10/700/1000" alt="午后" loading="lazy" />
+            </div>
+          </div>
+          <div class="b-a-side">
+            <div class="b-a-side-top reveal-card" :ref="(el) => { if (el) bentoItems[1] = el as HTMLElement }">
+              <div class="b-img-wrap">
+                <img src="https://picsum.photos/id/20/800/500" alt="城市" loading="lazy" />
+              </div>
+            </div>
+            <div class="b-a-side-bot reveal-card" :ref="(el) => { if (el) bentoItems[2] = el as HTMLElement }">
+              <div class="b-img-wrap">
+                <img src="https://picsum.photos/id/40/800/500" alt="远行" loading="lazy" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Zone B: quote + 3-column photo strip ── -->
+        <div class="b-zone-b">
+          <div class="b-b-quote reveal-card" :ref="(el) => { if (el) bentoItems[3] = el as HTMLElement }">
+            <span class="note-mark">"</span>
+            <p class="note-text">每件东西都有自己的气味，闻到就穿越了</p>
+            <span class="note-source">— 手记 #1</span>
+          </div>
+          <div class="b-b-strip">
+            <div class="b-strip-item reveal-card" :ref="(el) => { if (el) bentoItems[4] = el as HTMLElement }">
+              <div class="b-img-wrap">
+                <img src="https://picsum.photos/id/50/700/700" alt="静物" loading="lazy" />
+              </div>
+            </div>
+            <div class="b-strip-item reveal-card" :ref="(el) => { if (el) bentoItems[5] = el as HTMLElement }">
+              <div class="b-img-wrap">
+                <img src="https://picsum.photos/id/30/600/1000" alt="海岸" loading="lazy" />
+              </div>
+            </div>
+            <div class="b-strip-item reveal-card" :ref="(el) => { if (el) bentoItems[6] = el as HTMLElement }">
+              <div class="b-img-wrap">
+                <img src="https://picsum.photos/id/60/600/1000" alt="人像" loading="lazy" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Zone C: wide + accent number ── -->
+        <div class="b-zone-c">
+          <div class="b-c-wide reveal-card" :ref="(el) => { if (el) bentoItems[7] = el as HTMLElement }">
+            <div class="b-img-wrap">
+              <img src="https://picsum.photos/id/70/1200/600" alt="夜色" loading="lazy" />
+            </div>
+          </div>
+          <div class="b-c-accent reveal-card" :ref="(el) => { if (el) bentoItems[8] = el as HTMLElement }">
+            <div class="accent-block">
+              <span class="accent-num">02</span>
+              <span class="accent-label">城市<br>快照</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Zone D: 4-grid + quote ── -->
+        <div class="b-zone-d">
+          <div class="b-d-4grid reveal-card" :ref="(el) => { if (el) bentoItems[9] = el as HTMLElement }">
+            <div class="b-img-wrap"><img src="https://picsum.photos/id/100/600/400" alt="森林" loading="lazy" /></div>
+            <div class="b-img-wrap"><img src="https://picsum.photos/id/110/600/600" alt="街道" loading="lazy" /></div>
+            <div class="b-img-wrap"><img src="https://picsum.photos/id/120/600/800" alt="雨季" loading="lazy" /></div>
+            <div class="b-img-wrap"><img src="https://picsum.photos/id/130/600/400" alt="晴空" loading="lazy" /></div>
+          </div>
+          <div class="b-d-quote reveal-card" :ref="(el) => { if (el) bentoItems[10] = el as HTMLElement }">
+            <span class="note-mark">"</span>
+            <p class="note-text">收集的过程比结果更重要</p>
+            <span class="note-source">— 手记 #2</span>
+          </div>
+        </div>
+
+        <!-- ── Zone E: 3-column row ── -->
+        <div class="b-zone-e">
+          <div class="b-e-item reveal-card" :ref="(el) => { if (el) bentoItems[11] = el as HTMLElement }">
+            <div class="b-img-wrap">
+              <img src="https://picsum.photos/id/140/700/700" alt="咖啡" loading="lazy" />
+            </div>
+          </div>
+          <div class="b-e-item reveal-card" :ref="(el) => { if (el) bentoItems[12] = el as HTMLElement }">
+            <div class="b-img-wrap">
+              <img src="https://picsum.photos/id/150/600/1000" alt="旅途" loading="lazy" />
+            </div>
+          </div>
+          <div class="b-e-item reveal-card" :ref="(el) => { if (el) bentoItems[13] = el as HTMLElement }">
+            <div class="b-img-wrap">
+              <img src="https://picsum.photos/id/80/600/600" alt="山川" loading="lazy" />
+            </div>
+          </div>
+        </div>
+
+        <!-- ── Zone F: full-width quote ── -->
+        <div class="b-zone-f">
+          <div class="b-f-quote reveal-card" :ref="(el) => { if (el) bentoItems[14] = el as HTMLElement }">
+            <span class="note-mark">"</span>
+            <p class="note-text">有些东西扔不掉，不是因为值钱，是因为记得</p>
+            <span class="note-source">— 手记 #3</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Mid-page interlude — dark editorial card ── -->
+    <section class="interlude">
+      <div class="interlude-inner">
+        <div class="interlude-label">03 · 精选</div>
+        <div class="interlude-grid">
+          <div class="interlude-text">
+            <h2 class="interlude-heading">不是作品集，<br>是私人日记</h2>
+            <p class="interlude-body">没有策划，没有主题，就是随手拍、随便留。三年下来，发现这些碎片其实比"正经作品"更像自己。</p>
+            <NuxtLink to="/photo" class="interlude-link">
+              进入全部收藏
+              <span class="link-arrow">→</span>
+            </NuxtLink>
+          </div>
+          <div class="interlude-feature">
+            <div class="feature-img-wrap">
+              <img src="https://picsum.photos/id/96/800/600" alt="海岸线" loading="lazy" />
+            </div>
+            <div class="feature-tag">2022 · 午后</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Dark feature wall — 6 column editorial ── -->
+    <section class="dark-wall">
+      <div class="dark-wall-inner">
+        <div class="dw-header">
+          <span class="dw-index">04</span>
+          <span class="dw-label">最珍贵的几件</span>
+        </div>
+        <div class="dw-photos">
+          <div
+            class="dw-photo reveal-card"
+            v-for="(c, i) in collections.slice(0, 6)"
+            :key="c.id"
+            :ref="(el) => { if (el) dwPhotos[i] = el as HTMLElement }"
+          >
+            <div class="dw-photo-inner">
+              <img :src="imgSrc(c.id, c.aspect, 500)" :alt="c.title" loading="lazy" />
+            </div>
+            <div class="dw-photo-label">{{ c.title }}</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Footer ── -->
+    <footer class="site-footer">
+      <div class="footer-grid">
+        <div class="footer-brand">收藏室</div>
+        <div class="footer-links">
+          <NuxtLink to="/photo">全部</NuxtLink>
+          <NuxtLink to="/portfolio">作品集</NuxtLink>
+          <NuxtLink to="/about">关于</NuxtLink>
+        </div>
+      </div>
+      <p class="footer-copy">© 2024 · 私人收藏 · 不必打扰</p>
+    </footer>
+  </main>
+</template>
+
+<style scoped>
+.canvas {
+  background: var(--color-canvas);
+}
+
+/* ── Hero ── */
+.hero {
+  position: relative;
+  height: 100vh;
+  min-height: 600px;
+  margin-top: -64px; /* compensate for fixed nav */
+  display: flex;
+  align-items: flex-end;
+  overflow: hidden;
+}
+
+.hero-img-wrap {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.hero-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform-origin: center center;
+  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.hero-img-wrap:hover .hero-img {
+  transform: scale(1.03) translateY(-4px);
+}
+
+.hero-vignette {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgba(20, 20, 19, 0.85) 0%,
+    rgba(20, 20, 19, 0.3) 50%,
+    transparent 100%
+  );
+}
+
+/* ── Light sweep ── */
+.hero-sweep {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.hero-sweep::after {
+  content: '';
+  position: absolute;
+  top: -60%;
+  left: -80%;
+  width: 60%;
+  height: 200%;
+  background: linear-gradient(
+    105deg,
+    transparent 30%,
+    rgba(250, 249, 245, 0.06) 45%,
+    rgba(250, 249, 245, 0.12) 50%,
+    rgba(250, 249, 245, 0.06) 55%,
+    transparent 70%
+  );
+  transform: translateX(-100%) translateY(-20%);
+  animation: light-sweep 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
+}
+
+@keyframes light-sweep {
+  0% {
+    transform: translateX(-100%) translateY(-20%);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(300%) translateY(-20%);
+    opacity: 0;
+  }
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  padding: 0 64px 80px;
+}
+
+.hero-eyebrow {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: rgba(250, 249, 245, 0.6);
+  margin-bottom: 12px;
+}
+
+.hero-title {
+  font-family: var(--font-display);
+  font-size: clamp(56px, 9vw, 112px);
+  font-weight: 400;
+  color: var(--color-on-dark);
+  letter-spacing: -3px;
+  line-height: 0.95;
+  margin: 0 0 20px;
+}
+
+.hero-sub {
+  font-family: var(--font-body);
+  font-size: 18px;
+  color: rgba(250, 249, 245, 0.7);
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* ── Bento heading ── */
+.bento-section {
+  padding: 80px 40px 96px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.bento-header {
+  display: flex;
+  align-items: baseline;
+  gap: 20px;
+  margin-bottom: 48px;
+  border-bottom: 1px solid var(--color-hairline);
+  padding-bottom: 32px;
+}
+
+.bento-index {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  color: var(--color-primary);
+}
+
+.bento-heading {
+  font-family: var(--font-display);
+  font-size: clamp(28px, 4vw, 48px);
+  font-weight: 400;
+  color: var(--color-ink);
+  letter-spacing: -1px;
+  margin: 0;
+}
+
+.bento-sub {
+  font-family: var(--font-body);
+  font-size: 14px;
+  color: var(--color-muted);
+  margin: 0;
+  margin-left: auto;
+  font-style: italic;
+}
+
+.bento {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* item helpers */
+.b-img-wrap {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--color-surface-card);
+}
+
+.b-img-wrap img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s var(--ease-out-quint);
+}
+
+.b-img-wrap:hover img {
+  transform: scale(1.04);
+}
+
+/* ── Zone A: 5col main + 7col side stack ── */
+.b-zone-a {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.b-a-main .b-img-wrap {
+  height: 560px;
+}
+
+.b-a-side {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  gap: 20px;
+}
+
+.b-a-side .b-img-wrap {
+  height: 270px;
+}
+
+/* ── Zone B: 4col quote + 8col 3-up strip ── */
+.b-zone-b {
+  display: grid;
+  grid-template-columns: 4fr 8fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.b-b-quote {
+  background: var(--color-surface-card);
+  border-radius: 8px;
+  padding: 40px 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 320px;
+}
+
+.b-b-strip {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+.b-strip-item .b-img-wrap {
+  height: 320px;
+}
+
+/* ── Zone C: 7col wide + 5col accent ── */
+.b-zone-c {
+  display: grid;
+  grid-template-columns: 7fr 5fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.b-c-wide .b-img-wrap {
+  height: 380px;
+}
+
+.b-c-accent {
+  background: var(--color-surface-card);
+  border-radius: 8px;
+  height: 380px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Zone D: 8col 4-grid + 4col quote ── */
+.b-zone-d {
+  display: grid;
+  grid-template-columns: 8fr 4fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.b-d-4grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.b-d-4grid .b-img-wrap {
+  height: 240px;
+}
+
+.b-d-quote {
+  background: var(--color-surface-card);
+  border-radius: 8px;
+  padding: 40px 32px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 260px;
+}
+
+/* ── Zone E: equal 3 columns ── */
+.b-zone-e {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+.b-e-item .b-img-wrap {
+  height: 360px;
+}
+
+/* ── Zone F: full-width quote ── */
+.b-zone-f {
+  width: 100%;
+}
+
+.b-f-quote {
+  background: var(--color-surface-card);
+  border-radius: 8px;
+  padding: 48px 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  min-height: 180px;
+}
+
+/* ── Shared note styles ── */
+.note-text {
+  font-family: var(--font-display);
+  font-size: clamp(18px, 2vw, 24px);
+  font-weight: 400;
+  color: var(--color-ink);
+  letter-spacing: -0.3px;
+  line-height: 1.4;
+  margin: 0 0 16px;
+  font-style: italic;
+}
+
+.note-mark {
+  display: block;
+  font-family: var(--font-display);
+  font-size: 56px;
+  line-height: 0.7;
+  color: var(--color-primary);
+  margin-bottom: 12px;
+  font-weight: 400;
+}
+
+.note-source {
+  font-family: var(--font-body);
+  font-size: 11px;
+  color: var(--color-muted);
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
+/* Accent number block */
+.accent-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.accent-num {
+  font-family: var(--font-display);
+  font-size: 56px;
+  font-weight: 400;
+  color: var(--color-primary);
+  letter-spacing: -2px;
+  line-height: 1;
+}
+
+.accent-label {
+  font-family: var(--font-body);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  text-align: center;
+  line-height: 1.7;
+}
+
+/* ── Interlude editorial card ── */
+.interlude {
+  background: var(--color-surface-dark);
+  padding: 80px 40px;
+}
+
+.interlude-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.interlude-label {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--color-on-dark-soft);
+  margin-bottom: 40px;
+}
+
+.interlude-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 64px;
+  align-items: center;
+}
+
+.interlude-text {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.interlude-heading {
+  font-family: var(--font-display);
+  font-size: clamp(32px, 4vw, 52px);
+  font-weight: 400;
+  color: var(--color-on-dark);
+  letter-spacing: -1px;
+  line-height: 1.1;
+  margin: 0;
+}
+
+.interlude-body {
+  font-family: var(--font-body);
+  font-size: 16px;
+  color: var(--color-on-dark-soft);
+  line-height: 1.7;
+  margin: 0;
+  max-width: 42ch;
+}
+
+.interlude-link {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-primary);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: gap 0.2s;
+}
+
+.interlude-link:hover {
+  gap: 14px;
+}
+
+.link-arrow {
+  font-size: 16px;
+}
+
+.feature-img-wrap {
+  border-radius: 12px;
+  overflow: hidden;
+  aspect-ratio: 4/3;
+}
+
+.feature-img-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.5s var(--ease-out-quint);
+}
+
+.feature-img-wrap:hover img {
+  transform: scale(1.04);
+}
+
+.feature-tag {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--color-on-dark-soft);
+  margin-top: 16px;
+  padding-left: 4px;
+}
+
+/* ── Dark wall ── */
+.dark-wall {
+  background: var(--color-surface-dark);
+  padding: 80px 40px;
+}
+
+.dark-wall-inner {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.dw-label {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--color-on-dark-soft);
+  margin-bottom: 16px;
+  padding-left: 4px;
+}
+
+.dw-photos {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+}
+
+.dw-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.dw-index {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  color: var(--color-primary);
+}
+
+.dw-photo {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  aspect-ratio: 3/4;
+}
+
+.dw-photo-inner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dw-photo-inner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s var(--ease-out-quint);
+}
+
+.dw-photo:hover img {
+  transform: scale(1.05);
+}
+
+.dw-photo-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px 16px 12px;
+  background: linear-gradient(to top, rgba(20, 20, 19, 0.7) 0%, transparent 100%);
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: rgba(250, 249, 245, 0.85);
+  font-weight: 500;
+}
+
+/* ── Footer ── */
+.site-footer {
+  background: var(--color-surface-dark);
+  padding: 48px 64px;
+  border-top: 1px solid rgba(250, 249, 245, 0.08);
+}
+
+.footer-grid {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+.footer-brand {
+  font-family: var(--font-display);
+  font-size: 28px;
+  font-weight: 400;
+  color: var(--color-on-dark);
+  letter-spacing: -1px;
+}
+
+.footer-links {
+  display: flex;
+  gap: 32px;
+}
+
+.footer-links a {
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-on-dark-soft);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.footer-links a:hover {
+  color: var(--color-on-dark);
+}
+
+.footer-copy {
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--color-on-dark-soft);
+  margin: 0;
+  padding-top: 24px;
+  border-top: 1px solid rgba(250, 249, 245, 0.08);
+}
+
+/* ── Mobile ── */
+@media (max-width: 768px) {
+  .hero-content {
+    padding: 0 24px 48px;
+  }
+
+  .bento-section {
+    padding: 48px 16px;
+  }
+
+  .bento-header {
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 32px;
+  }
+
+  .bento-sub {
+    margin-left: 0;
+  }
+
+  .bento {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .b-img-wrap,
+  .b-a-main .b-img-wrap,
+  .b-a-side .b-img-wrap,
+  .b-strip-item .b-img-wrap,
+  .b-c-wide .b-img-wrap,
+  .b-d-4grid .b-img-wrap,
+  .b-e-item .b-img-wrap {
+    height: 240px !important;
+  }
+
+  .b-zone-a,
+  .b-zone-b,
+  .b-zone-c,
+  .b-zone-d {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .b-b-strip {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .b-d-4grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .b-zone-e {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .b-f-quote {
+    padding: 32px 24px;
+  }
+
+  .interlude { padding: 48px 16px; }
+  .interlude-grid { grid-template-columns: 1fr; gap: 32px; }
+  .interlude-heading { font-size: 32px; }
+
+  .dark-wall { padding: 48px 16px; }
+  .dw-photos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+  .dw-photo { aspect-ratio: 3/4; }
+
+  .site-footer { padding: 40px 24px; }
+  .footer-grid { flex-direction: column; gap: 20px; }
+}
+
+/* ── Animations ── */
+@keyframes hero-img-reveal {
+  from {
+    transform: scale(1.08);
+    opacity: 0.6;
+  }
+  to {
+    transform: scale(1.0);
+    opacity: 1;
+  }
+}
+
+@keyframes hero-text-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes card-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(36px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Hero entrance */
+.hero-img {
+  transform: scale(1.08);
+  animation: hero-img-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.hero-eyebrow {
+  opacity: 0;
+  animation: hero-text-reveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
+}
+
+.hero-title {
+  opacity: 0;
+  animation: hero-text-reveal 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.65s forwards;
+}
+
+.hero-sub {
+  opacity: 0;
+  animation: hero-text-reveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.85s forwards;
+}
+
+/* Bento scroll reveal */
+.reveal-card {
+  opacity: 0;
+  transform: translateY(36px);
+  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1), transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.reveal-card.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Dark wall photos reveal */
+.dw-photo {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.dw-photo.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .hero-img,
+  .hero-eyebrow,
+  .hero-title,
+  .hero-sub {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+
+  .hero-sweep::after {
+    animation: none;
+    opacity: 0;
+  }
+
+  .reveal-card,
+  .dw-photo {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .typewriter-cursor {
+    animation: none;
+    opacity: 1;
+  }
+}
+
+/* ── Typewriter ── */
+.typewriter-cursor {
+  display: inline-block;
+  color: var(--color-primary);
+  animation: cursor-blink 1s step-end infinite;
+  margin-left: 2px;
+}
+
+@keyframes cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+</style>
diff --git a/app/pages/collect/index.vue b/app/pages/collect/index.vue
new file mode 100644
index 0000000..eb689d0
--- /dev/null
+++ b/app/pages/collect/index.vue
@@ -0,0 +1,1355 @@
+<script setup lang="ts">
+import type { CategoryNode } from '~/components/index/CategoryTreeNode.vue'
+import type { CategoryFormMode } from '~/components/index/CategoryFormModal.vue'
+import type { CardDetail } from '~/components/index/CardDetailModal.vue'
+import { request } from '~/utils/http/factory'
+import { cardTypeRegistry, type CardType, type CardItemLike } from '~/config/cardTypes'
+
+definePageMeta({
+  layout: 'home',
+})
+
+const { $toast } = useNuxtApp()
+const { isFavorited, toggle: toggleFavorite, syncFromCards } = useFavorite()
+const route = useRoute()
+const isMobile = useMediaQuery('(max-width: 767.98px)')
+const drawerOpen = ref(false)
+const sidebarMode = computed<'rail' | 'drawer'>(() => isMobile.value ? 'drawer' : 'rail')
+
+// confirmation dialog
+const confirmShow = ref(false)
+const confirmMsg = ref('')
+let confirmAction: (() => void) | null = null
+
+function showConfirm(msg: string, action: () => void) {
+  confirmMsg.value = msg
+  confirmAction = action
+  confirmShow.value = true
+}
+
+function onConfirm() {
+  confirmAction?.()
+  confirmShow.value = false
+}
+
+// ── Server response types ──
+
+interface ServerCategory {
+  id: string
+  name: string
+  slug: string
+  image: string | null
+  parentId: string | null
+  sortOrder: number
+  count: number
+  createdAt: Date
+  updatedAt: Date
+  children: ServerCategory[]
+}
+
+interface ServerCard {
+  id: number
+  type: CardType
+  title: string
+  description: string | null
+  aspectRatio: number | null
+  categoryId: string | null
+  createdAt: Date
+  updatedAt: Date
+  images: { id: number; url: string; sortOrder: number }[]
+  tags: { id: number; name: string; slug: string }[]
+}
+
+interface ServerTag {
+  id: number
+  name: string
+  slug: string
+}
+
+// ── Frontend card item (mapped from server) ──
+
+interface CardItem extends CardItemLike {
+  id: number
+}
+
+function mapCard(server: ServerCard): CardItem {
+  const imgUrls = server.images.map((img) => img.url)
+  return {
+    id: server.id,
+    type: server.type,
+    image: imgUrls[0],
+    images: imgUrls.length > 1 ? imgUrls : undefined,
+    title: server.title,
+    description: server.description ?? undefined,
+    tags: server.tags.length > 0 ? server.tags.map((t) => t.name) : undefined,
+    aspectRatio: server.aspectRatio ?? 0.75,
+    categoryId: server.categoryId,
+    createdAt: server.createdAt ? new Date(server.createdAt).toISOString() : undefined,
+  }
+}
+
+function mapCategoryTree(server: ServerCategory[]): CategoryNode[] {
+  function map(node: ServerCategory): CategoryNode {
+    return {
+      id: node.id,
+      name: node.name,
+      image: node.image ?? undefined,
+      count: node.count,
+      children: node.children.length > 0 ? node.children.map(map) : undefined,
+    }
+  }
+  return server.map(map)
+}
+
+// ── Sidebar state ──
+
+const activeToolKey = ref<string>('home')
+const activeCategoryId = ref<string>('all')
+
+const categories = ref<CategoryNode[]>([])
+const categoriesLoading = ref(true)
+
+async function fetchCategories() {
+  categoriesLoading.value = true
+  try {
+    const raw = await request<{ code: number; data: ServerCategory[] }>('/api/categories')
+    const tree = mapCategoryTree(raw.data)
+    // Prepend virtual "未分类" node for cards without a category
+    const uncategorized: CategoryNode = {
+      id: '__uncategorized__',
+      name: '未分类',
+    }
+    categories.value = [uncategorized, ...tree]
+  } catch {
+    $toast.error('分类加载失败')
+  } finally {
+    categoriesLoading.value = false
+  }
+}
+
+const activeCategoryName = computed(() => {
+  function find(nodes: CategoryNode[]): CategoryNode | null {
+    for (const n of nodes) {
+      if (n.id === activeCategoryId.value) return n
+      if (n.children) {
+        const r = find(n.children)
+        if (r) return r
+      }
+    }
+    return null
+  }
+  if (activeCategoryId.value === '__uncategorized__') return '未分类'
+  return find(categories.value)?.name ?? '全部卡片'
+})
+
+// ── Tool selection ──
+
+const showTagsModal = ref(false)
+const tagList = ref<ServerTag[]>([])
+const tagSearch = ref('')
+const tagsLoading = ref(false)
+
+async function fetchTags() {
+  tagsLoading.value = true
+  try {
+    const raw = await request<{ code: number; data: { list: ServerTag[] } }>('/api/tags')
+    tagList.value = raw.data.list
+  } catch {
+    $toast.error('标签加载失败')
+  } finally {
+    tagsLoading.value = false
+  }
+}
+
+const filteredTagList = computed(() => {
+  const q = tagSearch.value.trim().toLowerCase()
+  if (!q) return tagList.value
+  return tagList.value.filter(
+    (t) => t.name.toLowerCase().includes(q) || t.slug.toLowerCase().includes(q),
+  )
+})
+
+function onSelectTool(key: string) {
+  activeToolKey.value = key
+  switch (key) {
+    case 'home':
+      activeCategoryId.value = 'all'
+      break
+    case 'collect':
+      activeCategoryId.value = 'all'
+      break
+    case 'tags':
+      showTagsModal.value = true
+      fetchTags()
+      return
+    case 'search':
+      // Focus the TopNav search input
+      const input = document.querySelector<HTMLInputElement>('.search-input')
+      input?.focus()
+      break
+    case 'highlights':
+      $toast.info('高亮即将上线')
+      break
+    case 'archive':
+      $toast.info('归档即将上线')
+      break
+  }
+}
+
+function onSelectTag(_tagId: number) {
+  // Future: filter cards by tag
+  $toast.info('标签筛选即将上线')
+}
+
+// ── Category CRUD ──
+
+// Modal state
+const catFormVisible = ref(false)
+const catFormMode = ref<CategoryFormMode>('create')
+const catFormNode = ref<CategoryNode | null>(null)
+const catFormParent = ref<CategoryNode | null>(null)
+
+function openCatForm(mode: CategoryFormMode, node: CategoryNode | null, parent?: CategoryNode | null) {
+  catFormMode.value = mode
+  catFormNode.value = node
+  catFormParent.value = parent ?? null
+  catFormVisible.value = true
+}
+
+async function onSelectCategory(id: string) {
+  if (activeCategoryId.value === id) {
+    activeCategoryId.value = 'all'
+  } else {
+    activeCategoryId.value = id
+  }
+  activeToolKey.value = 'home'
+  if (drawerOpen.value) drawerOpen.value = false
+}
+
+function onAddCategory(parentId: string | null) {
+  const parent = parentId ? findNode(categories.value, parentId) : null
+  openCatForm('create', null, parent)
+}
+
+function findNode(nodes: CategoryNode[], id: string): CategoryNode | null {
+  for (const n of nodes) {
+    if (n.id === id) return n
+    if (n.children) {
+      const r = findNode(n.children, id)
+      if (r) return r
+    }
+  }
+  return null
+}
+
+function onRenameCategory(id: string) {
+  if (id === 'all' || id === '__uncategorized__') return
+  const node = findNode(categories.value, id)
+  if (!node) return
+  openCatForm('rename', node)
+}
+
+function onDeleteCategory(id: string) {
+  if (id === 'all' || id === '__uncategorized__') return
+  const node = findNode(categories.value, id)
+  if (!node) return
+  openCatForm('delete', node)
+}
+
+function onMoveCategory(id: string) {
+  if (id === 'all' || id === '__uncategorized__') return
+  const node = findNode(categories.value, id)
+  if (!node) return
+  openCatForm('move', node)
+}
+
+function onChangeCover(id: string) {
+  if (id === 'all' || id === '__uncategorized__') return
+  const node = findNode(categories.value, id)
+  if (!node) return
+  openCatForm('cover', node)
+}
+
+async function onCatFormSubmit(data: {
+  mode: CategoryFormMode
+  nodeId: string | null
+  name?: string
+  slug?: string
+  image?: string
+  targetParentId?: string | null
+}) {
+  try {
+    switch (data.mode) {
+      case 'create': {
+        await request('/api/categories', {
+          method: 'POST',
+          body: {
+            name: data.name!,
+            slug: data.slug!,
+            parentId: data.targetParentId || null,
+          },
+        })
+        $toast.success(`已创建分类「${data.name}」`)
+        break
+      }
+      case 'rename': {
+        await request(`/api/categories/${data.nodeId}`, {
+          method: 'PUT',
+          body: {
+            name: data.name!,
+            ...(data.slug ? { slug: data.slug } : {}),
+          },
+        })
+        $toast.success('已重命名')
+        break
+      }
+      case 'cover': {
+        await request(`/api/categories/${data.nodeId}`, {
+          method: 'PUT',
+          body: { image: data.image! },
+        })
+        $toast.success('封面已更新')
+        break
+      }
+      case 'delete': {
+        // Delete children first (bottom-up)
+        const node = data.nodeId ? findNode(categories.value, data.nodeId) : null
+        if (node?.children) {
+          for (const child of node.children) {
+            await request(`/api/categories/${child.id}`, { method: 'DELETE' })
+          }
+        }
+        await request(`/api/categories/${data.nodeId}`, { method: 'DELETE' })
+        if (activeCategoryId.value === data.nodeId) activeCategoryId.value = 'all'
+        $toast.success('已删除分类')
+        break
+      }
+      case 'move': {
+        await request(`/api/categories/${data.nodeId}`, {
+          method: 'PUT',
+          body: { parentId: data.targetParentId || null },
+        })
+        $toast.success('已移动分类')
+        break
+      }
+    }
+    catFormVisible.value = false
+    await fetchCategories()
+  } catch (e: any) {
+    $toast.error(e.data.statusMessage || e.message || e.toString() || '操作失败')
+  }
+}
+
+// ── Card modals ──
+
+const showDetailModal = ref(false)
+const detailCard = ref<CardDetail | null>(null)
+const showCardFormModal = ref(false)
+const cardFormMode = ref<'create' | 'edit'>('create')
+const cardFormEditData = ref<CardDetail | null>(null)
+
+function onCardClick(card: CardItem) {
+  detailCard.value = {
+    id: card.id,
+    type: card.type,
+    image: card.image,
+    images: card.images,
+    title: card.title,
+    description: card.description,
+    tags: card.tags,
+    aspectRatio: card.aspectRatio,
+    categoryId: card.categoryId,
+    createdAt: card.createdAt,
+  }
+  showDetailModal.value = true
+}
+
+function onCardEdit(card: CardDetail) {
+  cardFormMode.value = 'edit'
+  cardFormEditData.value = card
+  showCardFormModal.value = true
+  showDetailModal.value = false
+}
+
+async function onCardDelete(id: number) {
+  showConfirm('确定删除这张卡片吗？', async () => {
+    try {
+      await request(`/api/cards/${id}`, { method: 'DELETE' })
+      $toast.success('已删除卡片')
+      showDetailModal.value = false
+      // Refresh category counts
+      fetchCategories()
+      // Reload cards
+      page.value = 1
+      hasMore.value = true
+      allItems.value = []
+      columns.value = Array.from({ length: columnCount.value }, () => [])
+      columnHeights.value = new Array(columnCount.value).fill(0)
+      initLoading.value = true
+      loadMore()
+    } catch {
+      $toast.error('删除失败')
+    }
+  })
+}
+
+function onNewCard() {
+  cardFormMode.value = 'create'
+  cardFormEditData.value = null
+  showCardFormModal.value = true
+}
+
+function onCardSaved() {
+  $toast.success(cardFormMode.value === 'create' ? '卡片已创建' : '卡片已更新')
+  fetchCategories()
+  resetAndReload()
+}
+
+// ── Drag & Drop to category ──
+
+let dragCardId: number | null = null
+
+function onCardDragStart(e: DragEvent, item: CardItem) {
+  dragCardId = item.id
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('application/x-card-id', String(item.id))
+  }
+}
+
+async function onCardDropToCategory(categoryId: string | null, categoryName: string) {
+  if (dragCardId === null) return
+  try {
+    await request(`/api/cards/${dragCardId}`, {
+      method: 'PUT',
+      body: { categoryId },
+    })
+    $toast.success(`已移至「${categoryName}」`)
+    fetchCategories()
+    resetAndReload()
+  } catch {
+    $toast.error('移动失败')
+  } finally {
+    dragCardId = null
+  }
+}
+
+// ── Right panel waterfall ──
+
+const sentinel = ref<HTMLElement | null>(null)
+const mainRef = ref<HTMLElement | null>(null)
+const allItems = ref<CardItem[]>([])
+const page = ref(1)
+const hasMore = ref(true)
+const loading = ref(false)
+const initLoading = ref(true)
+
+const columnCount = ref(1)
+const columns = ref<CardItem[][]>([[]])
+const columnHeights = ref<number[]>([0])
+
+function containerWidth(): number {
+  return mainRef.value?.clientWidth ?? 800
+}
+
+function getColumnWidth(): number {
+  const padding = 48
+  const w = containerWidth() - padding
+  const gap = 12
+  return (w - gap * (columnCount.value - 1)) / columnCount.value
+}
+
+function estimateCardHeight(item: CardItem): number {
+  const colWidth = getColumnWidth()
+  if (item.type === 'text') {
+    const textWidth = colWidth - 48
+    const charsPerLine = Math.max(1, Math.floor(textWidth / 13.5))
+    const charCount = (item.description || '').length
+    const lines = Math.ceil(charCount / charsPerLine)
+    return 109 + lines * 24
+  }
+  return colWidth / item.aspectRatio
+}
+
+function addToShortestColumn(item: CardItem) {
+  let minIdx = 0
+  for (let i = 1; i < columnCount.value; i++) {
+    if (columnHeights.value[i]! < columnHeights.value[minIdx]!) minIdx = i
+  }
+  columns.value[minIdx]!.push(item)
+  columnHeights.value[minIdx]! += estimateCardHeight(item)
+}
+
+function distributeAll() {
+  const n = columnCount.value
+  columns.value = Array.from({ length: n }, () => [])
+  columnHeights.value = new Array(n).fill(0)
+  for (const item of allItems.value) addToShortestColumn(item)
+}
+
+function decideColumnCount(): number {
+  if (isMobile.value) return 1
+  const w = containerWidth()
+  if (w < 900) return 2
+  if (w < 1200) return 3
+  return 4
+}
+
+let resizeTimer: ReturnType<typeof setTimeout> | null = null
+function onContainerResize() {
+  if (resizeTimer) clearTimeout(resizeTimer)
+  resizeTimer = setTimeout(() => {
+    const n = decideColumnCount()
+    if (n !== columnCount.value) {
+      columnCount.value = n
+      distributeAll()
+    }
+  }, 120)
+}
+
+function removeCardFromList(cardId: number) {
+  allItems.value = allItems.value.filter((item) => item.id !== cardId)
+  distributeAll()
+}
+
+async function handleToggleFavorite(cardId: number) {
+  const wasFavorited = isFavorited(cardId)
+  const result = await toggleFavorite(cardId)
+  // When unfavoriting on the collect page, remove the card from the list immediately
+  if (wasFavorited && !result && activeToolKey.value === 'collect') {
+    removeCardFromList(cardId)
+  }
+}
+
+function onDetailFavoriteToggled(cardId: number, favorited: boolean) {
+  // When unfavoriting from the detail modal on the collect page, remove the card
+  if (!favorited && activeToolKey.value === 'collect') {
+    removeCardFromList(cardId)
+  }
+}
+
+async function loadMore() {
+  if (loading.value || !hasMore.value) return
+  loading.value = true
+  try {
+    const query: Record<string, string | number> = {
+      page: page.value,
+      pageSize: 12,
+    }
+    if (activeCategoryId.value !== 'all') {
+      query.categoryId = activeCategoryId.value
+    }
+    // favorites mode
+    if (activeToolKey.value === 'collect') {
+      query.favorited = 1
+    }
+    // '__uncategorized__' will be passed as-is to filter null categories
+    const q = (route.query.q as string)?.trim()
+    if (q) query.q = q
+    const raw = await $fetch<{
+      code: number
+      data: {
+        items: ServerCard[]
+        hasMore: boolean
+        total: number
+      }
+    }>('/api/cards', { query })
+
+    const result = raw.data
+    // Sync favorite status from server
+    syncFromCards(result.items as Array<{ id: number; isFavorited?: boolean }>)
+    const mapped = result.items.map(mapCard)
+    for (const item of mapped) {
+      allItems.value.push(item)
+      addToShortestColumn(item)
+    }
+    hasMore.value = result.hasMore
+    page.value++
+  } catch {
+    $toast.error('加载失败，请稍后重试')
+  } finally {
+    loading.value = false
+    initLoading.value = false
+  }
+}
+
+// Reset when category switches
+watch(activeCategoryId, () => {
+  resetAndReload()
+})
+
+// Reset when search query changes
+watch(() => route.query.q, () => {
+  resetAndReload()
+})
+
+// Reset when tool changes (e.g. collect <-> home)
+watch(activeToolKey, () => {
+  resetAndReload()
+})
+
+function resetAndReload() {
+  page.value = 1
+  hasMore.value = true
+  allItems.value = []
+  columns.value = Array.from({ length: columnCount.value }, () => [])
+  columnHeights.value = new Array(columnCount.value).fill(0)
+  initLoading.value = true
+  loadMore()
+}
+
+watch(isMobile, () => {
+  const n = decideColumnCount()
+  if (n !== columnCount.value) {
+    columnCount.value = n
+    distributeAll()
+  }
+})
+
+let observer: IntersectionObserver | null = null
+let resizeObserver: ResizeObserver | null = null
+
+watch(sentinel, (el) => {
+  observer?.disconnect()
+  if (!el) return
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry!.isIntersecting) loadMore()
+    },
+    { rootMargin: '320px' },
+  )
+  observer.observe(el)
+})
+
+onMounted(() => {
+  if (mainRef.value) {
+    columnCount.value = decideColumnCount()
+    distributeAll()
+    resizeObserver = new ResizeObserver(onContainerResize)
+    resizeObserver.observe(mainRef.value)
+  }
+  fetchCategories()
+  resetAndReload()
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+  resizeObserver?.disconnect()
+  if (resizeTimer) clearTimeout(resizeTimer)
+})
+</script>
+
+<template>
+  <div class="home-layout">
+    <IndexLeftSidebar
+      v-if="sidebarMode === 'rail'"
+      class="home-sidebar"
+      :mode="sidebarMode"
+      :categories="categories"
+      :active-tool-key="activeToolKey"
+      :active-category-id="activeCategoryId"
+      @select-tool="onSelectTool"
+      @select-category="onSelectCategory"
+      @add-category="onAddCategory"
+      @rename-category="onRenameCategory"
+      @delete-category="onDeleteCategory"
+      @move-category="onMoveCategory"
+      @change-cover="onChangeCover"
+      @drop-card="onCardDropToCategory"
+    />
+
+    <IndexLeftSidebar
+      v-else
+      :mode="sidebarMode"
+      :drawer-open="drawerOpen"
+      :categories="categories"
+      :active-tool-key="activeToolKey"
+      :active-category-id="activeCategoryId"
+      @update:drawer-open="(v: boolean) => drawerOpen = v"
+      @select-tool="onSelectTool"
+      @select-category="onSelectCategory"
+      @add-category="onAddCategory"
+      @rename-category="onRenameCategory"
+      @delete-category="onDeleteCategory"
+      @move-category="onMoveCategory"
+      @change-cover="onChangeCover"
+      @drop-card="onCardDropToCategory"
+    />
+
+    <main ref="mainRef" class="home-main">
+      <!-- Mobile drawer trigger -->
+      <div v-if="isMobile" class="mobile-bar">
+        <button
+          type="button"
+          class="drawer-trigger"
+          aria-label="打开分类抽屉"
+          @click="drawerOpen = true"
+        >
+          <Icon name="lucide:menu" />
+          <span>分类</span>
+        </button>
+        <span class="category-chip">{{ activeToolKey === 'collect' ? '我的收藏' : activeCategoryName }}</span>
+      </div>
+
+      <!-- Category heading -->
+      <h2 v-if="!isMobile" class="category-heading">{{ activeToolKey === 'collect' ? '我的收藏' : activeCategoryName }}</h2>
+
+      <div class="masonry">
+        <div
+          v-for="(col, ci) in columns"
+          :key="ci"
+          class="masonry-col"
+        >
+          <template v-for="(item, ri) in col" :key="item.id">
+            <div
+              class="card-reveal"
+              :style="{ '--enter-delay': `${ci * 80 + ri * 60}ms` }"
+              draggable="true"
+              @click="onCardClick(item)"
+              @dragstart="onCardDragStart($event, item)"
+            >
+              <!-- Hover actions -->
+              <div class="card-actions">
+                <button
+                  type="button"
+                  class="card-action-btn"
+                  :class="{ 'card-action-faved': isFavorited(item.id) }"
+                  :title="isFavorited(item.id) ? '取消收藏' : '收藏'"
+                  @click.stop="handleToggleFavorite(item.id)"
+                >
+                  <Icon :name="isFavorited(item.id) ? 'ph:star-fill' : 'ph:star'" />
+                </button>
+                <button
+                  type="button"
+                  class="card-action-btn"
+                  title="编辑"
+                  @click.stop="onCardEdit({ id: item.id, type: item.type, title: item.title, description: item.description, image: item.image, images: item.images, tags: item.tags, aspectRatio: item.aspectRatio, categoryId: item.categoryId, createdAt: item.createdAt })"
+                >
+                  <Icon name="lucide:pencil" />
+                </button>
+                <button
+                  type="button"
+                  class="card-action-btn card-action-delete"
+                  title="删除"
+                  @click.stop="onCardDelete(item.id)"
+                >
+                  <Icon name="lucide:trash-2" />
+                </button>
+              </div>
+
+              <component
+                :is="cardTypeRegistry[item.type].component"
+                v-bind="cardTypeRegistry[item.type].mapProps(item)"
+              />
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-if="!initLoading && allItems.length === 0"
+        class="empty-state"
+      >
+        <Icon name="lucide:inbox" class="empty-icon" />
+        <h3>还没有内容</h3>
+        <p v-if="activeCategoryId !== 'all'">当前分类下暂无卡片</p>
+        <p v-else-if="route.query.q">没有找到匹配「{{ route.query.q }}」的卡片</p>
+        <p v-else>点击右下角 + 按钮创建第一张卡片</p>
+      </div>
+
+      <div ref="sentinel" class="sentinel">
+        <template v-if="initLoading || loading">
+          <div class="loading-bars">
+            <span v-for="i in 3" :key="i" class="bar" :style="{ animationDelay: `${(i - 1) * 0.15}s` }" />
+          </div>
+        </template>
+        <span v-else-if="hasMore && allItems.length > 0" class="sentinel-text">继续滚动查看更多</span>
+        <span v-else-if="allItems.length > 0" class="sentinel-text end">—— 已经到底了 ——</span>
+      </div>
+
+      <!-- Floating add button -->
+      <button type="button" class="fab-add" aria-label="新增卡片" @click="onNewCard">
+        <Icon name="lucide:plus" />
+      </button>
+    </main>
+
+    <!-- Tags Modal -->
+    <Teleport to="body">
+      <Transition name="modal-fade">
+        <div v-if="showTagsModal" class="modal-overlay" @click.self="showTagsModal = false">
+          <div class="modal-panel">
+            <div class="modal-header">
+              <h2 class="modal-title">标签</h2>
+              <button type="button" class="modal-close" @click="showTagsModal = false">
+                <Icon name="lucide:x" />
+              </button>
+            </div>
+            <div class="modal-search">
+              <Icon name="lucide:search" class="modal-search-icon" />
+              <input
+                v-model="tagSearch"
+                type="text"
+                class="modal-search-input"
+                placeholder="搜索标签..."
+              />
+            </div>
+            <div class="modal-body">
+              <template v-if="tagsLoading">
+                <div class="modal-loading">加载中...</div>
+              </template>
+              <template v-else-if="filteredTagList.length === 0">
+                <div class="modal-empty">
+                  <Icon name="lucide:tag" class="modal-empty-icon" />
+                  <span>{{ tagSearch ? '没有匹配的标签' : '还没有标签' }}</span>
+                </div>
+              </template>
+              <template v-else>
+                <button
+                  v-for="tag in filteredTagList"
+                  :key="tag.id"
+                  type="button"
+                  class="modal-tag-item"
+                  @click="onSelectTag(tag.id)"
+                >
+                  <Icon name="lucide:hash" class="modal-tag-icon" />
+                  <span class="modal-tag-name">{{ tag.name }}</span>
+                  <span class="modal-tag-count">{{ tag.slug }}</span>
+                </button>
+              </template>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Card Detail Modal -->
+    <IndexCardDetailModal
+      :visible="showDetailModal"
+      :card="detailCard"
+      :categories="categories"
+      @update:visible="(v) => showDetailModal = v"
+      @favorite-toggled="onDetailFavoriteToggled"
+    />
+
+    <!-- Card Form Modal -->
+    <IndexCardFormModal
+      :visible="showCardFormModal"
+      :mode="cardFormMode"
+      :card="cardFormEditData"
+      :categories="categories"
+      @update:visible="(v) => showCardFormModal = v"
+      @saved="onCardSaved"
+    />
+
+    <!-- Category Form Modal -->
+    <IndexCategoryFormModal
+      :visible="catFormVisible"
+      :mode="catFormMode"
+      :node="catFormNode"
+      :parent-node="catFormParent"
+      :categories="categories"
+      @update:visible="(v) => catFormVisible = v"
+      @submit="onCatFormSubmit"
+    />
+
+    <!-- Confirm Dialog -->
+    <BoDialog v-model:show="confirmShow" :mask-can-close="true">
+      <div class="rounded-lg bg-white p-6 shadow-xl border border-[#e6dfd8] confirm-dialog">
+        <h3 class="text-[16px] font-medium text-[#141413]">确认操作</h3>
+        <p class="mt-3 text-[14px] text-[#3d3d3a]">{{ confirmMsg }}</p>
+        <div class="mt-6 flex justify-end gap-2">
+          <button class="px-4 py-2 bg-[#faf9f5] border border-[#e6dfd8] rounded-lg text-[14px] hover:bg-white transition-colors" @click="confirmShow = false">取消</button>
+          <button class="px-4 py-2 bg-[#cc785c] text-white rounded-lg text-[14px] hover:bg-[#a9583e] transition-colors" @click="onConfirm">确定</button>
+        </div>
+      </div>
+    </BoDialog>
+  </div>
+</template>
+
+<style scoped>
+.home-layout {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  align-items: start;
+  gap: 0;
+}
+
+.home-sidebar {
+  position: sticky;
+  top: 64px;
+  height: calc(100vh - 64px);
+  align-self: start;
+}
+
+.home-main {
+  min-width: 0;
+  padding: 16px 24px 48px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Category heading ── */
+
+.category-heading {
+  font-family: var(--font-display);
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--color-ink);
+  margin: 0 0 12px 0;
+  letter-spacing: -0.3px;
+}
+
+/* ── Mobile bar ── */
+
+.mobile-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--color-hairline);
+}
+
+/* ── Masonry ── */
+
+.masonry {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.masonry-col {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.card-reveal {
+  animation: card-enter 0.6s var(--ease-out-expo) both;
+  animation-delay: var(--enter-delay, 0ms);
+  cursor: pointer;
+  position: relative;
+}
+
+.card-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  gap: 4px;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+}
+
+.card-reveal:hover .card-actions {
+  opacity: 1;
+}
+
+.card-action-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 5px;
+  background: rgba(20, 20, 19, 0.45);
+  backdrop-filter: blur(4px);
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  transition: background 0.12s ease;
+}
+
+.card-action-btn :deep(svg) {
+  width: 12px;
+  height: 12px;
+}
+
+.card-action-btn:hover {
+  background: rgba(20, 20, 19, 0.7);
+  color: #fff;
+}
+
+.card-action-delete:hover {
+  background: rgba(198, 69, 69, 0.8);
+}
+
+.card-action-faved {
+  color: var(--color-accent-amber);
+}
+
+@keyframes card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Sentinel ── */
+
+.sentinel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0 24px;
+  min-height: 56px;
+}
+
+.sentinel-text {
+  font-size: 13px;
+  color: var(--color-muted-soft);
+}
+
+.sentinel-text.end {
+  color: var(--color-hairline);
+}
+
+.loading-bars {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.bar {
+  width: 4px;
+  height: 18px;
+  background: var(--color-primary);
+  border-radius: 2px;
+  opacity: 0.5;
+  animation: pulse 0.9s ease-in-out infinite;
+}
+
+/* ── Empty state ── */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 64px 24px;
+  text-align: center;
+}
+
+.empty-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--color-hairline);
+  margin-bottom: 4px;
+}
+
+.empty-state h3 {
+  font-family: var(--font-display);
+  font-size: 18px;
+  font-weight: 400;
+  color: var(--color-muted);
+  margin: 0;
+}
+
+.empty-state p {
+  font-size: 13px;
+  color: var(--color-muted-soft);
+  margin: 0;
+  max-width: 300px;
+}
+
+/* ── Floating add button ── */
+
+.fab-add {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  border: none;
+  color: var(--color-on-primary, #fff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(204, 120, 92, 0.35);
+  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
+  z-index: 40;
+}
+
+.fab-add :deep(svg) {
+  width: 22px;
+  height: 22px;
+}
+
+.fab-add:hover {
+  transform: scale(1.08);
+  box-shadow: 0 6px 24px rgba(204, 120, 92, 0.45);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
+  50% { opacity: 0.8; transform: scaleY(1); }
+}
+
+/* ── Responsive (DESIGN.md breakpoints) ── */
+
+@media (max-width: 767.98px) {
+  .home-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .home-sidebar {
+    display: none;
+  }
+
+  .home-main {
+    padding: 8px 12px 24px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023.98px) {
+  .home-layout {
+    grid-template-columns: 240px 1fr;
+  }
+
+  .home-main {
+    padding: 20px 16px 32px;
+  }
+}
+
+.drawer-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 16px;
+  border-radius: var(--rounded-md, 8px);
+  background: transparent;
+  border: 1px solid var(--color-hairline);
+  font-family: var(--font-body);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-ink);
+  cursor: pointer;
+  min-width: 44px;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.drawer-trigger:hover {
+  border-color: var(--color-ink);
+}
+
+.drawer-trigger :deep(svg) {
+  width: 18px;
+  height: 18px;
+}
+
+.category-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 9999px;
+  background: var(--color-surface-card);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* ── Tags Modal ── */
+
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+}
+
+.modal-panel {
+  width: 90vw;
+  max-width: 420px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface-default, #fff);
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+}
+
+.modal-title {
+  font-family: var(--font-display);
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-muted);
+  transition: all 0.12s ease;
+}
+
+.modal-close :deep(svg) {
+  width: 18px;
+  height: 18px;
+}
+
+.modal-close:hover {
+  background: var(--color-surface-soft);
+  color: var(--color-ink);
+}
+
+.modal-search {
+  position: relative;
+  margin: 0 20px 8px;
+}
+
+.modal-search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--color-muted-soft);
+}
+
+.modal-search-input {
+  width: 100%;
+  height: 40px;
+  padding: 0 12px 0 36px;
+  border-radius: 10px;
+  border: 1px solid var(--color-hairline);
+  background: var(--color-surface-soft);
+  font-family: var(--font-body);
+  font-size: 13px;
+  color: var(--color-ink);
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.modal-search-input:focus {
+  border-color: var(--color-primary);
+}
+
+.modal-search-input::placeholder {
+  color: var(--color-muted-soft);
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 12px 16px;
+}
+
+.modal-loading,
+.modal-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 32px 16px;
+  color: var(--color-muted-soft);
+  font-size: 13px;
+}
+
+.modal-empty-icon {
+  width: 28px;
+  height: 28px;
+  opacity: 0.4;
+}
+
+.modal-tag-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-body);
+  text-align: left;
+  transition: background 0.12s ease;
+}
+
+.modal-tag-item:hover {
+  background: var(--color-surface-soft);
+}
+
+.modal-tag-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-muted);
+  flex-shrink: 0;
+}
+
+.modal-tag-name {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-ink);
+}
+
+.modal-tag-count {
+  font-size: 11px;
+  color: var(--color-muted-soft);
+  font-family: var(--font-mono, monospace);
+}
+
+/* ── Modal transition ── */
+
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-fade-enter-active .modal-panel,
+.modal-fade-leave-active .modal-panel {
+  transition: transform 0.2s var(--ease-out-expo);
+}
+
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.modal-fade-enter-from .modal-panel {
+  transform: scale(0.95) translateY(8px);
+}
+
+.modal-fade-leave-to .modal-panel {
+  transform: scale(0.95) translateY(8px);
+}
+</style>
diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue
index d8373f9..367ed14 100644
--- a/app/pages/index/index.vue
+++ b/app/pages/index/index.vue
@@ -1,1401 +1 @@
-<script setup lang="ts">
-import type { CategoryNode } from '~/components/index/CategoryTreeNode.vue'
-import type { CategoryFormMode } from '~/components/index/CategoryFormModal.vue'
-import type { CardDetail } from '~/components/index/CardDetailModal.vue'
-import { request } from '~/utils/http/factory'
-
-definePageMeta({
-  layout: 'home',
-})
-
-const { $toast } = useNuxtApp()
-const { loggedIn } = useAuthSession()
-const { isFavorited, toggle: toggleFavorite, syncFromCards } = useFavorite()
-const route = useRoute()
-const isMobile = useMediaQuery('(max-width: 767.98px)')
-const drawerOpen = ref(false)
-const sidebarMode = computed<'rail' | 'drawer'>(() => isMobile.value ? 'drawer' : 'rail')
-
-// confirmation dialog
-const confirmShow = ref(false)
-const confirmMsg = ref('')
-let confirmAction: (() => void) | null = null
-
-function showConfirm(msg: string, action: () => void) {
-  confirmMsg.value = msg
-  confirmAction = action
-  confirmShow.value = true
-}
-
-function onConfirm() {
-  confirmAction?.()
-  confirmShow.value = false
-}
-
-// ── Server response types ──
-
-interface ServerCategory {
-  id: string
-  name: string
-  slug: string
-  image: string | null
-  parentId: string | null
-  sortOrder: number
-  count: number
-  createdAt: Date
-  updatedAt: Date
-  children: ServerCategory[]
-}
-
-interface ServerCard {
-  id: number
-  type: 'text' | 'image' | 'image-text' | 'portfolio' | 'project'
-  title: string
-  description: string | null
-  aspectRatio: number | null
-  categoryId: string | null
-  createdAt: Date
-  updatedAt: Date
-  images: { id: number; url: string; sortOrder: number }[]
-  tags: { id: number; name: string; slug: string }[]
-}
-
-interface ServerTag {
-  id: number
-  name: string
-  slug: string
-}
-
-// ── Frontend card item (mapped from server) ──
-
-interface CardItem {
-  id: number
-  type: 'text' | 'image' | 'image-text' | 'portfolio' | 'project'
-  image?: string
-  images?: string[]
-  title: string
-  description?: string
-  tags?: string[]
-  aspectRatio: number
-  categoryId?: string | null
-  createdAt?: string
-}
-
-function mapCard(server: ServerCard): CardItem {
-  const imgUrls = server.images.map((img) => img.url)
-  return {
-    id: server.id,
-    type: server.type,
-    image: imgUrls[0],
-    images: imgUrls.length > 1 ? imgUrls : undefined,
-    title: server.title,
-    description: server.description ?? undefined,
-    tags: server.tags.length > 0 ? server.tags.map((t) => t.name) : undefined,
-    aspectRatio: server.aspectRatio ?? 0.75,
-    categoryId: server.categoryId,
-    createdAt: server.createdAt ? new Date(server.createdAt).toISOString() : undefined,
-  }
-}
-
-function mapCategoryTree(server: ServerCategory[]): CategoryNode[] {
-  function map(node: ServerCategory): CategoryNode {
-    return {
-      id: node.id,
-      name: node.name,
-      image: node.image ?? undefined,
-      count: node.count,
-      children: node.children.length > 0 ? node.children.map(map) : undefined,
-    }
-  }
-  return server.map(map)
-}
-
-// ── Sidebar state ──
-
-const activeToolKey = ref<string>('home')
-const activeCategoryId = ref<string>('all')
-
-const categories = ref<CategoryNode[]>([])
-const categoriesLoading = ref(true)
-
-async function fetchCategories() {
-  categoriesLoading.value = true
-  try {
-    const raw = await request<{ code: number; data: ServerCategory[] }>('/api/categories')
-    const tree = mapCategoryTree(raw.data)
-    // Prepend virtual "未分类" node for cards without a category
-    const uncategorized: CategoryNode = {
-      id: '__uncategorized__',
-      name: '未分类',
-    }
-    categories.value = [uncategorized, ...tree]
-  } catch {
-    $toast.error('分类加载失败')
-  } finally {
-    categoriesLoading.value = false
-  }
-}
-
-const activeCategoryName = computed(() => {
-  function find(nodes: CategoryNode[]): CategoryNode | null {
-    for (const n of nodes) {
-      if (n.id === activeCategoryId.value) return n
-      if (n.children) {
-        const r = find(n.children)
-        if (r) return r
-      }
-    }
-    return null
-  }
-  if (activeCategoryId.value === '__uncategorized__') return '未分类'
-  return find(categories.value)?.name ?? '全部卡片'
-})
-
-// ── Tool selection ──
-
-const showTagsModal = ref(false)
-const tagList = ref<ServerTag[]>([])
-const tagSearch = ref('')
-const tagsLoading = ref(false)
-
-async function fetchTags() {
-  tagsLoading.value = true
-  try {
-    const raw = await request<{ code: number; data: { list: ServerTag[] } }>('/api/tags')
-    tagList.value = raw.data.list
-  } catch {
-    $toast.error('标签加载失败')
-  } finally {
-    tagsLoading.value = false
-  }
-}
-
-const filteredTagList = computed(() => {
-  const q = tagSearch.value.trim().toLowerCase()
-  if (!q) return tagList.value
-  return tagList.value.filter(
-    (t) => t.name.toLowerCase().includes(q) || t.slug.toLowerCase().includes(q),
-  )
-})
-
-function onSelectTool(key: string) {
-  activeToolKey.value = key
-  switch (key) {
-    case 'home':
-      activeCategoryId.value = 'all'
-      break
-    case 'collect':
-      activeCategoryId.value = 'all'
-      if (!loggedIn.value) {
-        $toast.info('请先登录')
-        activeToolKey.value = 'home'
-        return
-      }
-      break
-    case 'tags':
-      showTagsModal.value = true
-      fetchTags()
-      return
-    case 'search':
-      // Focus the TopNav search input
-      const input = document.querySelector<HTMLInputElement>('.search-input')
-      input?.focus()
-      break
-    case 'highlights':
-      $toast.info('高亮即将上线')
-      break
-    case 'archive':
-      $toast.info('归档即将上线')
-      break
-  }
-}
-
-function onSelectTag(_tagId: number) {
-  // Future: filter cards by tag
-  $toast.info('标签筛选即将上线')
-}
-
-// ── Category CRUD ──
-
-// Modal state
-const catFormVisible = ref(false)
-const catFormMode = ref<CategoryFormMode>('create')
-const catFormNode = ref<CategoryNode | null>(null)
-const catFormParent = ref<CategoryNode | null>(null)
-
-function openCatForm(mode: CategoryFormMode, node: CategoryNode | null, parent?: CategoryNode | null) {
-  catFormMode.value = mode
-  catFormNode.value = node
-  catFormParent.value = parent ?? null
-  catFormVisible.value = true
-}
-
-async function onSelectCategory(id: string) {
-  if (activeCategoryId.value === id) {
-    activeCategoryId.value = 'all'
-  } else {
-    activeCategoryId.value = id
-  }
-  activeToolKey.value = 'home'
-  if (drawerOpen.value) drawerOpen.value = false
-}
-
-function onAddCategory(parentId: string | null) {
-  const parent = parentId ? findNode(categories.value, parentId) : null
-  openCatForm('create', null, parent)
-}
-
-function findNode(nodes: CategoryNode[], id: string): CategoryNode | null {
-  for (const n of nodes) {
-    if (n.id === id) return n
-    if (n.children) {
-      const r = findNode(n.children, id)
-      if (r) return r
-    }
-  }
-  return null
-}
-
-function onRenameCategory(id: string) {
-  if (id === 'all' || id === '__uncategorized__') return
-  const node = findNode(categories.value, id)
-  if (!node) return
-  openCatForm('rename', node)
-}
-
-function onDeleteCategory(id: string) {
-  if (id === 'all' || id === '__uncategorized__') return
-  const node = findNode(categories.value, id)
-  if (!node) return
-  openCatForm('delete', node)
-}
-
-function onMoveCategory(id: string) {
-  if (id === 'all' || id === '__uncategorized__') return
-  const node = findNode(categories.value, id)
-  if (!node) return
-  openCatForm('move', node)
-}
-
-function onChangeCover(id: string) {
-  if (id === 'all' || id === '__uncategorized__') return
-  const node = findNode(categories.value, id)
-  if (!node) return
-  openCatForm('cover', node)
-}
-
-async function onCatFormSubmit(data: {
-  mode: CategoryFormMode
-  nodeId: string | null
-  name?: string
-  slug?: string
-  image?: string
-  targetParentId?: string | null
-}) {
-  try {
-    switch (data.mode) {
-      case 'create': {
-        await request('/api/categories', {
-          method: 'POST',
-          body: {
-            name: data.name!,
-            slug: data.slug!,
-            parentId: data.targetParentId || null,
-          },
-        })
-        $toast.success(`已创建分类「${data.name}」`)
-        break
-      }
-      case 'rename': {
-        await request(`/api/categories/${data.nodeId}`, {
-          method: 'PUT',
-          body: {
-            name: data.name!,
-            ...(data.slug ? { slug: data.slug } : {}),
-          },
-        })
-        $toast.success('已重命名')
-        break
-      }
-      case 'cover': {
-        await request(`/api/categories/${data.nodeId}`, {
-          method: 'PUT',
-          body: { image: data.image! },
-        })
-        $toast.success('封面已更新')
-        break
-      }
-      case 'delete': {
-        // Delete children first (bottom-up)
-        const node = data.nodeId ? findNode(categories.value, data.nodeId) : null
-        if (node?.children) {
-          for (const child of node.children) {
-            await request(`/api/categories/${child.id}`, { method: 'DELETE' })
-          }
-        }
-        await request(`/api/categories/${data.nodeId}`, { method: 'DELETE' })
-        if (activeCategoryId.value === data.nodeId) activeCategoryId.value = 'all'
-        $toast.success('已删除分类')
-        break
-      }
-      case 'move': {
-        await request(`/api/categories/${data.nodeId}`, {
-          method: 'PUT',
-          body: { parentId: data.targetParentId || null },
-        })
-        $toast.success('已移动分类')
-        break
-      }
-    }
-    catFormVisible.value = false
-    await fetchCategories()
-  } catch (e: any) {
-    $toast.error(e.data.statusMessage || e.message || e.toString() || '操作失败')
-  }
-}
-
-// ── Card modals ──
-
-const showDetailModal = ref(false)
-const detailCard = ref<CardDetail | null>(null)
-const showCardFormModal = ref(false)
-const cardFormMode = ref<'create' | 'edit'>('create')
-const cardFormEditData = ref<CardDetail | null>(null)
-
-function onCardClick(card: CardItem) {
-  detailCard.value = {
-    id: card.id,
-    type: card.type,
-    image: card.image,
-    images: card.images,
-    title: card.title,
-    description: card.description,
-    tags: card.tags,
-    aspectRatio: card.aspectRatio,
-    categoryId: card.categoryId,
-    createdAt: card.createdAt,
-  }
-  showDetailModal.value = true
-}
-
-function onCardEdit(card: CardDetail) {
-  cardFormMode.value = 'edit'
-  cardFormEditData.value = card
-  showCardFormModal.value = true
-  showDetailModal.value = false
-}
-
-async function onCardDelete(id: number) {
-  showConfirm('确定删除这张卡片吗？', async () => {
-    try {
-      await request(`/api/cards/${id}`, { method: 'DELETE' })
-      $toast.success('已删除卡片')
-      showDetailModal.value = false
-      // Refresh category counts
-      fetchCategories()
-      // Reload cards
-      page.value = 1
-      hasMore.value = true
-      allItems.value = []
-      columns.value = Array.from({ length: columnCount.value }, () => [])
-      columnHeights.value = new Array(columnCount.value).fill(0)
-      initLoading.value = true
-      loadMore()
-    } catch {
-      $toast.error('删除失败')
-    }
-  })
-}
-
-function onNewCard() {
-  cardFormMode.value = 'create'
-  cardFormEditData.value = null
-  showCardFormModal.value = true
-}
-
-function onCardSaved() {
-  $toast.success(cardFormMode.value === 'create' ? '卡片已创建' : '卡片已更新')
-  fetchCategories()
-  resetAndReload()
-}
-
-// ── Drag & Drop to category ──
-
-let dragCardId: number | null = null
-
-function onCardDragStart(e: DragEvent, item: CardItem) {
-  dragCardId = item.id
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('application/x-card-id', String(item.id))
-  }
-}
-
-async function onCardDropToCategory(categoryId: string | null, categoryName: string) {
-  if (dragCardId === null) return
-  try {
-    await request(`/api/cards/${dragCardId}`, {
-      method: 'PUT',
-      body: { categoryId },
-    })
-    $toast.success(`已移至「${categoryName}」`)
-    fetchCategories()
-    resetAndReload()
-  } catch {
-    $toast.error('移动失败')
-  } finally {
-    dragCardId = null
-  }
-}
-
-// ── Right panel waterfall ──
-
-const sentinel = ref<HTMLElement | null>(null)
-const mainRef = ref<HTMLElement | null>(null)
-const allItems = ref<CardItem[]>([])
-const page = ref(1)
-const hasMore = ref(true)
-const loading = ref(false)
-const initLoading = ref(true)
-
-const columnCount = ref(1)
-const columns = ref<CardItem[][]>([[]])
-const columnHeights = ref<number[]>([0])
-
-function containerWidth(): number {
-  return mainRef.value?.clientWidth ?? 800
-}
-
-function getColumnWidth(): number {
-  const padding = 48
-  const w = containerWidth() - padding
-  const gap = 12
-  return (w - gap * (columnCount.value - 1)) / columnCount.value
-}
-
-function estimateCardHeight(item: CardItem): number {
-  const colWidth = getColumnWidth()
-  if (item.type === 'text') {
-    const textWidth = colWidth - 48
-    const charsPerLine = Math.max(1, Math.floor(textWidth / 13.5))
-    const charCount = (item.description || '').length
-    const lines = Math.ceil(charCount / charsPerLine)
-    return 109 + lines * 24
-  }
-  return colWidth / item.aspectRatio
-}
-
-function addToShortestColumn(item: CardItem) {
-  let minIdx = 0
-  for (let i = 1; i < columnCount.value; i++) {
-    if (columnHeights.value[i]! < columnHeights.value[minIdx]!) minIdx = i
-  }
-  columns.value[minIdx]!.push(item)
-  columnHeights.value[minIdx]! += estimateCardHeight(item)
-}
-
-function distributeAll() {
-  const n = columnCount.value
-  columns.value = Array.from({ length: n }, () => [])
-  columnHeights.value = new Array(n).fill(0)
-  for (const item of allItems.value) addToShortestColumn(item)
-}
-
-function decideColumnCount(): number {
-  if (isMobile.value) return 1
-  const w = containerWidth()
-  if (w < 900) return 2
-  if (w < 1200) return 3
-  return 4
-}
-
-let resizeTimer: ReturnType<typeof setTimeout> | null = null
-function onContainerResize() {
-  if (resizeTimer) clearTimeout(resizeTimer)
-  resizeTimer = setTimeout(() => {
-    const n = decideColumnCount()
-    if (n !== columnCount.value) {
-      columnCount.value = n
-      distributeAll()
-    }
-  }, 120)
-}
-
-function removeCardFromList(cardId: number) {
-  allItems.value = allItems.value.filter((item) => item.id !== cardId)
-  distributeAll()
-}
-
-async function handleToggleFavorite(cardId: number) {
-  const wasFavorited = isFavorited(cardId)
-  const result = await toggleFavorite(cardId)
-  // When unfavoriting on the collect page, remove the card from the list immediately
-  if (wasFavorited && !result && activeToolKey.value === 'collect') {
-    removeCardFromList(cardId)
-  }
-}
-
-function onDetailFavoriteToggled(cardId: number, favorited: boolean) {
-  // When unfavoriting from the detail modal on the collect page, remove the card
-  if (!favorited && activeToolKey.value === 'collect') {
-    removeCardFromList(cardId)
-  }
-}
-
-async function loadMore() {
-  if (loading.value || !hasMore.value) return
-  loading.value = true
-  try {
-    const query: Record<string, string | number> = {
-      page: page.value,
-      pageSize: 12,
-    }
-    if (activeCategoryId.value !== 'all') {
-      query.categoryId = activeCategoryId.value
-    }
-    // favorites mode
-    if (activeToolKey.value === 'collect') {
-      query.favorited = 1
-    }
-    // '__uncategorized__' will be passed as-is to filter null categories
-    const q = (route.query.q as string)?.trim()
-    if (q) query.q = q
-    const raw = await $fetch<{
-      code: number
-      data: {
-        items: ServerCard[]
-        hasMore: boolean
-        total: number
-      }
-    }>('/api/cards', { query })
-
-    const result = raw.data
-    // Sync favorite status from server
-    syncFromCards(result.items as Array<{ id: number; isFavorited?: boolean }>)
-    const mapped = result.items.map(mapCard)
-    for (const item of mapped) {
-      allItems.value.push(item)
-      addToShortestColumn(item)
-    }
-    hasMore.value = result.hasMore
-    page.value++
-  } catch {
-    $toast.error('加载失败，请稍后重试')
-  } finally {
-    loading.value = false
-    initLoading.value = false
-  }
-}
-
-// Reset when category switches
-watch(activeCategoryId, () => {
-  resetAndReload()
-})
-
-// Reset when search query changes
-watch(() => route.query.q, () => {
-  resetAndReload()
-})
-
-// Reset when tool changes (e.g. collect <-> home)
-watch(activeToolKey, () => {
-  resetAndReload()
-})
-
-function resetAndReload() {
-  page.value = 1
-  hasMore.value = true
-  allItems.value = []
-  columns.value = Array.from({ length: columnCount.value }, () => [])
-  columnHeights.value = new Array(columnCount.value).fill(0)
-  initLoading.value = true
-  loadMore()
-}
-
-watch(isMobile, () => {
-  const n = decideColumnCount()
-  if (n !== columnCount.value) {
-    columnCount.value = n
-    distributeAll()
-  }
-})
-
-let observer: IntersectionObserver | null = null
-let resizeObserver: ResizeObserver | null = null
-
-watch(sentinel, (el) => {
-  observer?.disconnect()
-  if (!el) return
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      if (entry!.isIntersecting) loadMore()
-    },
-    { rootMargin: '320px' },
-  )
-  observer.observe(el)
-})
-
-onMounted(() => {
-  if (mainRef.value) {
-    columnCount.value = decideColumnCount()
-    distributeAll()
-    resizeObserver = new ResizeObserver(onContainerResize)
-    resizeObserver.observe(mainRef.value)
-  }
-  fetchCategories()
-  resetAndReload()
-})
-
-onUnmounted(() => {
-  observer?.disconnect()
-  resizeObserver?.disconnect()
-  if (resizeTimer) clearTimeout(resizeTimer)
-})
-</script>
-
-<template>
-  <div class="home-layout">
-    <IndexLeftSidebar
-      v-if="sidebarMode === 'rail'"
-      class="home-sidebar"
-      :mode="sidebarMode"
-      :categories="categories"
-      :active-tool-key="activeToolKey"
-      :active-category-id="activeCategoryId"
-      :logged-in="loggedIn"
-      @select-tool="onSelectTool"
-      @select-category="onSelectCategory"
-      @add-category="onAddCategory"
-      @rename-category="onRenameCategory"
-      @delete-category="onDeleteCategory"
-      @move-category="onMoveCategory"
-      @change-cover="onChangeCover"
-      @drop-card="onCardDropToCategory"
-    />
-
-    <IndexLeftSidebar
-      v-else
-      :mode="sidebarMode"
-      :drawer-open="drawerOpen"
-      :categories="categories"
-      :active-tool-key="activeToolKey"
-      :active-category-id="activeCategoryId"
-      :logged-in="loggedIn"
-      @update:drawer-open="(v: boolean) => drawerOpen = v"
-      @select-tool="onSelectTool"
-      @select-category="onSelectCategory"
-      @add-category="onAddCategory"
-      @rename-category="onRenameCategory"
-      @delete-category="onDeleteCategory"
-      @move-category="onMoveCategory"
-      @change-cover="onChangeCover"
-      @drop-card="onCardDropToCategory"
-    />
-
-    <main ref="mainRef" class="home-main">
-      <!-- Mobile drawer trigger -->
-      <div v-if="isMobile" class="mobile-bar">
-        <button
-          type="button"
-          class="drawer-trigger"
-          aria-label="打开分类抽屉"
-          @click="drawerOpen = true"
-        >
-          <Icon name="lucide:menu" />
-          <span>分类</span>
-        </button>
-        <span class="category-chip">{{ activeToolKey === 'collect' ? '我的收藏' : activeCategoryName }}</span>
-      </div>
-
-      <!-- Category heading -->
-      <h2 v-if="!isMobile" class="category-heading">{{ activeToolKey === 'collect' ? '我的收藏' : activeCategoryName }}</h2>
-
-      <div class="masonry">
-        <div
-          v-for="(col, ci) in columns"
-          :key="ci"
-          class="masonry-col"
-        >
-          <template v-for="(item, ri) in col" :key="item.id">
-            <div
-              class="card-reveal"
-              :style="{ '--enter-delay': `${ci * 80 + ri * 60}ms` }"
-              :draggable="loggedIn"
-              @click="onCardClick(item)"
-              @dragstart="onCardDragStart($event, item)"
-            >
-              <!-- Hover actions -->
-              <div v-if="loggedIn" class="card-actions">
-                <button
-                  type="button"
-                  class="card-action-btn"
-                  :class="{ 'card-action-faved': isFavorited(item.id) }"
-                  :title="isFavorited(item.id) ? '取消收藏' : '收藏'"
-                  @click.stop="handleToggleFavorite(item.id)"
-                >
-                  <Icon :name="isFavorited(item.id) ? 'ph:star-fill' : 'ph:star'" />
-                </button>
-                <button
-                  type="button"
-                  class="card-action-btn"
-                  title="编辑"
-                  @click.stop="onCardEdit({ id: item.id, type: item.type, title: item.title, description: item.description, image: item.image, images: item.images, tags: item.tags, aspectRatio: item.aspectRatio, categoryId: item.categoryId, createdAt: item.createdAt })"
-                >
-                  <Icon name="lucide:pencil" />
-                </button>
-                <button
-                  type="button"
-                  class="card-action-btn card-action-delete"
-                  title="删除"
-                  @click.stop="onCardDelete(item.id)"
-                >
-                  <Icon name="lucide:trash-2" />
-                </button>
-              </div>
-
-              <IndexWaterfallCard
-                v-if="item.type === 'image-text'"
-                :image="item.image!"
-                :title="item.title"
-                :description="item.description!"
-                :aspect-ratio="item.aspectRatio"
-              />
-              <IndexWaterfallTextCard
-                v-else-if="item.type === 'text'"
-                :title="item.title"
-                :description="item.description!"
-                :aspect-ratio="item.aspectRatio"
-              />
-              <IndexWaterfallImageCard
-                v-else-if="item.type === 'image'"
-                :image="item.image!"
-                :title="item.title"
-                :aspect-ratio="item.aspectRatio"
-              />
-              <IndexWaterfallPortfolioCard
-                v-else-if="item.type === 'portfolio'"
-                :images="item.images!"
-                :title="item.title"
-                :description="item.description!"
-                :aspect-ratio="item.aspectRatio"
-              />
-              <IndexWaterfallProjectCard
-                v-else
-                :image="item.image!"
-                :title="item.title"
-                :description="item.description!"
-                :tags="item.tags!"
-                :aspect-ratio="item.aspectRatio"
-              />
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <!-- Empty state -->
-      <div
-        v-if="!initLoading && allItems.length === 0"
-        class="empty-state"
-      >
-        <Icon name="lucide:inbox" class="empty-icon" />
-        <h3>还没有内容</h3>
-        <p v-if="activeCategoryId !== 'all'">当前分类下暂无卡片</p>
-        <p v-else-if="route.query.q">没有找到匹配「{{ route.query.q }}」的卡片</p>
-        <p v-else>点击右下角 + 按钮创建第一张卡片</p>
-      </div>
-
-      <div ref="sentinel" class="sentinel">
-        <template v-if="initLoading || loading">
-          <div class="loading-bars">
-            <span v-for="i in 3" :key="i" class="bar" :style="{ animationDelay: `${(i - 1) * 0.15}s` }" />
-          </div>
-        </template>
-        <span v-else-if="hasMore && allItems.length > 0" class="sentinel-text">继续滚动查看更多</span>
-        <span v-else-if="allItems.length > 0" class="sentinel-text end">—— 已经到底了 ——</span>
-      </div>
-
-      <!-- Floating add button -->
-      <button v-if="loggedIn" type="button" class="fab-add" aria-label="新增卡片" @click="onNewCard">
-        <Icon name="lucide:plus" />
-      </button>
-    </main>
-
-    <!-- Tags Modal -->
-    <Teleport to="body">
-      <Transition name="modal-fade">
-        <div v-if="showTagsModal" class="modal-overlay" @click.self="showTagsModal = false">
-          <div class="modal-panel">
-            <div class="modal-header">
-              <h2 class="modal-title">标签</h2>
-              <button type="button" class="modal-close" @click="showTagsModal = false">
-                <Icon name="lucide:x" />
-              </button>
-            </div>
-            <div class="modal-search">
-              <Icon name="lucide:search" class="modal-search-icon" />
-              <input
-                v-model="tagSearch"
-                type="text"
-                class="modal-search-input"
-                placeholder="搜索标签..."
-              />
-            </div>
-            <div class="modal-body">
-              <template v-if="tagsLoading">
-                <div class="modal-loading">加载中...</div>
-              </template>
-              <template v-else-if="filteredTagList.length === 0">
-                <div class="modal-empty">
-                  <Icon name="lucide:tag" class="modal-empty-icon" />
-                  <span>{{ tagSearch ? '没有匹配的标签' : '还没有标签' }}</span>
-                </div>
-              </template>
-              <template v-else>
-                <button
-                  v-for="tag in filteredTagList"
-                  :key="tag.id"
-                  type="button"
-                  class="modal-tag-item"
-                  @click="onSelectTag(tag.id)"
-                >
-                  <Icon name="lucide:hash" class="modal-tag-icon" />
-                  <span class="modal-tag-name">{{ tag.name }}</span>
-                  <span class="modal-tag-count">{{ tag.slug }}</span>
-                </button>
-              </template>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-
-    <!-- Card Detail Modal -->
-    <IndexCardDetailModal
-      :visible="showDetailModal"
-      :card="detailCard"
-      :categories="categories"
-      @update:visible="(v) => showDetailModal = v"
-      @favorite-toggled="onDetailFavoriteToggled"
-    />
-
-    <!-- Card Form Modal -->
-    <IndexCardFormModal
-      :visible="showCardFormModal"
-      :mode="cardFormMode"
-      :card="cardFormEditData"
-      :categories="categories"
-      @update:visible="(v) => showCardFormModal = v"
-      @saved="onCardSaved"
-    />
-
-    <!-- Category Form Modal -->
-    <IndexCategoryFormModal
-      :visible="catFormVisible"
-      :mode="catFormMode"
-      :node="catFormNode"
-      :parent-node="catFormParent"
-      :categories="categories"
-      @update:visible="(v) => catFormVisible = v"
-      @submit="onCatFormSubmit"
-    />
-
-    <!-- Confirm Dialog -->
-    <BoDialog v-model:show="confirmShow" :mask-can-close="true">
-      <div class="rounded-lg bg-white p-6 shadow-xl border border-[#e6dfd8] confirm-dialog">
-        <h3 class="text-[16px] font-medium text-[#141413]">确认操作</h3>
-        <p class="mt-3 text-[14px] text-[#3d3d3a]">{{ confirmMsg }}</p>
-        <div class="mt-6 flex justify-end gap-2">
-          <button class="px-4 py-2 bg-[#faf9f5] border border-[#e6dfd8] rounded-lg text-[14px] hover:bg-white transition-colors" @click="confirmShow = false">取消</button>
-          <button class="px-4 py-2 bg-[#cc785c] text-white rounded-lg text-[14px] hover:bg-[#a9583e] transition-colors" @click="onConfirm">确定</button>
-        </div>
-      </div>
-    </BoDialog>
-  </div>
-</template>
-
-<style scoped>
-.home-layout {
-  flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: 280px 1fr;
-  align-items: start;
-  gap: 0;
-}
-
-.home-sidebar {
-  position: sticky;
-  top: 64px;
-  height: calc(100vh - 64px);
-  align-self: start;
-}
-
-.home-main {
-  min-width: 0;
-  padding: 16px 24px 48px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ── Category heading ── */
-
-.category-heading {
-  font-family: var(--font-display);
-  font-size: 22px;
-  font-weight: 500;
-  color: var(--color-ink);
-  margin: 0 0 12px 0;
-  letter-spacing: -0.3px;
-}
-
-/* ── Mobile bar ── */
-
-.mobile-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-bottom: 12px;
-  margin-bottom: 12px;
-  border-bottom: 1px solid var(--color-hairline);
-}
-
-/* ── Masonry ── */
-
-.masonry {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.masonry-col {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.card-reveal {
-  animation: card-enter 0.6s var(--ease-out-expo) both;
-  animation-delay: var(--enter-delay, 0ms);
-  cursor: pointer;
-  position: relative;
-}
-
-.card-actions {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  gap: 4px;
-  z-index: 2;
-  opacity: 0;
-  transition: opacity 0.18s ease;
-}
-
-.card-reveal:hover .card-actions {
-  opacity: 1;
-}
-
-.card-action-btn {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: 5px;
-  background: rgba(20, 20, 19, 0.45);
-  backdrop-filter: blur(4px);
-  color: rgba(255, 255, 255, 0.85);
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-
-.card-action-btn :deep(svg) {
-  width: 12px;
-  height: 12px;
-}
-
-.card-action-btn:hover {
-  background: rgba(20, 20, 19, 0.7);
-  color: #fff;
-}
-
-.card-action-delete:hover {
-  background: rgba(198, 69, 69, 0.8);
-}
-
-.card-action-faved {
-  color: var(--color-accent-amber);
-}
-
-@keyframes card-enter {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ── Sentinel ── */
-
-.sentinel {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 40px 0 24px;
-  min-height: 56px;
-}
-
-.sentinel-text {
-  font-size: 13px;
-  color: var(--color-muted-soft);
-}
-
-.sentinel-text.end {
-  color: var(--color-hairline);
-}
-
-.loading-bars {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-}
-
-.bar {
-  width: 4px;
-  height: 18px;
-  background: var(--color-primary);
-  border-radius: 2px;
-  opacity: 0.5;
-  animation: pulse 0.9s ease-in-out infinite;
-}
-
-/* ── Empty state ── */
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 64px 24px;
-  text-align: center;
-}
-
-.empty-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--color-hairline);
-  margin-bottom: 4px;
-}
-
-.empty-state h3 {
-  font-family: var(--font-display);
-  font-size: 18px;
-  font-weight: 400;
-  color: var(--color-muted);
-  margin: 0;
-}
-
-.empty-state p {
-  font-size: 13px;
-  color: var(--color-muted-soft);
-  margin: 0;
-  max-width: 300px;
-}
-
-/* ── Floating add button ── */
-
-.fab-add {
-  position: fixed;
-  bottom: 32px;
-  right: 32px;
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  border: none;
-  color: var(--color-on-primary, #fff);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 16px rgba(204, 120, 92, 0.35);
-  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
-  z-index: 40;
-}
-
-.fab-add :deep(svg) {
-  width: 22px;
-  height: 22px;
-}
-
-.fab-add:hover {
-  transform: scale(1.08);
-  box-shadow: 0 6px 24px rgba(204, 120, 92, 0.45);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
-  50% { opacity: 0.8; transform: scaleY(1); }
-}
-
-/* ── Responsive (DESIGN.md breakpoints) ── */
-
-@media (max-width: 767.98px) {
-  .home-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .home-sidebar {
-    display: none;
-  }
-
-  .home-main {
-    padding: 8px 12px 24px;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 1023.98px) {
-  .home-layout {
-    grid-template-columns: 240px 1fr;
-  }
-
-  .home-main {
-    padding: 20px 16px 32px;
-  }
-}
-
-.drawer-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  height: 44px;
-  padding: 0 16px;
-  border-radius: var(--rounded-md, 8px);
-  background: transparent;
-  border: 1px solid var(--color-hairline);
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-ink);
-  cursor: pointer;
-  min-width: 44px;
-  transition: border-color 0.15s ease, color 0.15s ease;
-}
-
-.drawer-trigger:hover {
-  border-color: var(--color-ink);
-}
-
-.drawer-trigger :deep(svg) {
-  width: 18px;
-  height: 18px;
-}
-
-.category-chip {
-  display: inline-flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 14px;
-  border-radius: 9999px;
-  background: var(--color-surface-card);
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-/* ── Tags Modal ── */
-
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 300;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(4px);
-}
-
-.modal-panel {
-  width: 90vw;
-  max-width: 420px;
-  max-height: 70vh;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-surface-default, #fff);
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px 12px;
-}
-
-.modal-title {
-  font-family: var(--font-display);
-  font-size: 20px;
-  font-weight: 500;
-  color: var(--color-ink);
-  margin: 0;
-}
-
-.modal-close {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--color-muted);
-  transition: all 0.12s ease;
-}
-
-.modal-close :deep(svg) {
-  width: 18px;
-  height: 18px;
-}
-
-.modal-close:hover {
-  background: var(--color-surface-soft);
-  color: var(--color-ink);
-}
-
-.modal-search {
-  position: relative;
-  margin: 0 20px 8px;
-}
-
-.modal-search-icon {
-  position: absolute;
-  left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  color: var(--color-muted-soft);
-}
-
-.modal-search-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 12px 0 36px;
-  border-radius: 10px;
-  border: 1px solid var(--color-hairline);
-  background: var(--color-surface-soft);
-  font-family: var(--font-body);
-  font-size: 13px;
-  color: var(--color-ink);
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.modal-search-input:focus {
-  border-color: var(--color-primary);
-}
-
-.modal-search-input::placeholder {
-  color: var(--color-muted-soft);
-}
-
-.modal-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 12px 16px;
-}
-
-.modal-loading,
-.modal-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 32px 16px;
-  color: var(--color-muted-soft);
-  font-size: 13px;
-}
-
-.modal-empty-icon {
-  width: 28px;
-  height: 28px;
-  opacity: 0.4;
-}
-
-.modal-tag-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: var(--font-body);
-  text-align: left;
-  transition: background 0.12s ease;
-}
-
-.modal-tag-item:hover {
-  background: var(--color-surface-soft);
-}
-
-.modal-tag-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-muted);
-  flex-shrink: 0;
-}
-
-.modal-tag-name {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-ink);
-}
-
-.modal-tag-count {
-  font-size: 11px;
-  color: var(--color-muted-soft);
-  font-family: var(--font-mono, monospace);
-}
-
-/* ── Modal transition ── */
-
-.modal-fade-enter-active,
-.modal-fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.modal-fade-enter-active .modal-panel,
-.modal-fade-leave-active .modal-panel {
-  transition: transform 0.2s var(--ease-out-expo);
-}
-
-.modal-fade-enter-from,
-.modal-fade-leave-to {
-  opacity: 0;
-}
-
-.modal-fade-enter-from .modal-panel {
-  transform: scale(0.95) translateY(8px);
-}
-
-.modal-fade-leave-to .modal-panel {
-  transform: scale(0.95) translateY(8px);
-}
-</style>
+<template><div>aaaaaaaa</div></template>
\ No newline at end of file
diff --git a/app/pages/about/index.vue b/app/pages/test/index.vue
similarity index 100%
rename from app/pages/about/index.vue
rename to app/pages/test/index.vue
diff --git a/packages/common/config/index.ts b/packages/common/config/index.ts
index 122f695..b96154e 100644
--- a/packages/common/config/index.ts
+++ b/packages/common/config/index.ts
@@ -29,5 +29,5 @@ export const API_ALLOWLIST: RouteRule[] = [
 
 export const FRONTEND_LOGIN_PATH = "/auth/login"
 export const FRONTEND_REGISTER_PATH = "/auth/register"
-export const FRONTEND_PAGE_ALLOWLIST = new Set(["/", FRONTEND_LOGIN_PATH, FRONTEND_REGISTER_PATH, '/about'])
+export const FRONTEND_PAGE_ALLOWLIST = new Set(["/", FRONTEND_LOGIN_PATH, FRONTEND_REGISTER_PATH, '/test'])
 export const FRONTEND_PAGE_GUEST_ONLY = new Set([FRONTEND_LOGIN_PATH, FRONTEND_REGISTER_PATH])
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 780a3d1..7fae7ea 100644
Binary files a/packages/drizzle-pkg/db.sqlite and b/packages/drizzle-pkg/db.sqlite differ