diff --git a/assets/css/album.css b/assets/css/album.css
index 820dfc4..ad7ed89 100644
--- a/assets/css/album.css
+++ b/assets/css/album.css
@@ -1,341 +1,314 @@
-/* 相册详情页面特定样式 - 增强响应式支持 */
+/* ============================================================
+   相册详情页样式 - 瀑布流布局 + 分类标签
+   ============================================================ */
+
 :root {
     --primary-blue: #1e40af;
     --secondary-blue: #3b82f6;
-    --light-blue: #dbeafe;
-    --accent-blue: #60a5fa;
+    --accent-purple: #8b5cf6;
+    --accent-pink: #ec4899;
     --white: #ffffff;
-    --light-gray: #f8fafc;
-    --medium-gray: #e2e8f0;
-    --dark-gray: #475569;
+    --bg-primary: #f8fafc;
+    --bg-surface: #ffffff;
+    --bg-hover: #f1f5f9;
+    --border-gray: #e5e7eb;
     --text-dark: #1e293b;
     --text-light: #64748b;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --text-muted: #94a3b8;
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-    --border-radius: 12px;
-    --border-radius-lg: 20px;
-    --mobile-breakpoint: 768px;
-    --tablet-breakpoint: 1024px;
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);
+    --radius: 8px;
+    --radius-card: 12px;
+    --radius-lg: 16px;
 }
 
-body { 
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; 
-    background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%); 
+* { box-sizing: border-box; }
+
+body {
+    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    background: var(--bg-primary);
     min-height: 100vh;
     color: var(--text-dark);
     line-height: 1.6;
     overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
 }
 
-.container { 
-    max-width: 1400px; 
-    margin: 0 auto; 
-    padding: 30px 20px; 
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 20px;
 }
 
-.header { margin-bottom: 40px; }
-.back-link { 
-    display: inline-flex; 
-    align-items: center; 
-    gap: 10px; 
-    padding: 12px 24px; 
-    background: var(--white); 
-    color: var(--primary-blue); 
-    text-decoration: none; 
-    border-radius: var(--border-radius); 
+/* ============ 顶部返回按钮 ============ */
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background: var(--bg-surface);
+    color: var(--secondary-blue);
+    text-decoration: none;
+    border-radius: var(--radius);
     box-shadow: var(--shadow-sm);
-    margin-bottom: 25px;
-    transition: all 0.3s ease;
-    border: 1px solid var(--medium-gray);
+    margin-bottom: 20px;
+    transition: all 0.2s ease;
+    border: 1px solid var(--border-gray);
     font-weight: 500;
+    font-size: 0.9rem;
 }
-.back-link:hover { 
-    background: var(--light-blue);
-    transform: translateX(-5px);
+
+.back-link:hover {
+    background: var(--bg-hover);
+    transform: translateX(-3px);
     box-shadow: var(--shadow-md);
-    color: var(--primary-blue);
 }
-.album-title { 
-    color: var(--text-dark); 
-    font-size: 2.5rem; 
-    text-align: center; 
-    margin-bottom: 15px;
+
+/* ============ 相册标题区 ============ */
+.header {
+    text-align: center;
+    margin-bottom: 32px;
+}
+
+.album-title {
+    color: var(--text-dark);
+    font-size: 2rem;
+    margin-bottom: 12px;
     font-weight: 700;
-    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
+    line-height: 1.3;
+    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-purple) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-}
-.album-info { 
-    text-align: center; 
-    color: var(--text-light); 
-    font-size: 1.2rem;
-    margin-bottom: 20px;
-    background: var(--white);
-    padding: 20px;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-sm);
-    border: 1px solid var(--medium-gray);
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+    padding: 0 20px;
 }
 
-/* 相册元数据标签（人名 + 标签） */
+.album-info {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--text-light);
+    font-size: 0.95rem;
+    padding: 10px 20px;
+    background: var(--bg-surface);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border-gray);
+}
+
+.album-info i { color: var(--secondary-blue); }
+
+/* ============ 相册标签区（新：分类着色） ============ */
 .album-meta-tags {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 10px;
-    margin: 0 auto 40px;
-    max-width: 800px;
+    gap: 8px;
+    margin: 20px auto 32px;
+    max-width: 900px;
 }
 
 .meta-chip {
     display: inline-flex;
     align-items: center;
-    gap: 5px;
+    gap: 6px;
     padding: 6px 14px;
-    border-radius: 20px;
+    border-radius: var(--radius-full);
     font-size: 0.85rem;
+    font-weight: 500;
     cursor: pointer;
     transition: all 0.2s ease;
     user-select: none;
     border: 1px solid transparent;
 }
 
-.meta-chip i {
-    font-size: 0.75rem;
+.meta-chip:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
 }
 
+.meta-chip:active { transform: translateY(0); }
+
+.meta-chip i { font-size: 0.75rem; }
+
+/* 人物标签 */
 .meta-chip-person {
-    background: #dbeafe;
-    color: #1e40af;
-    border-color: #bfdbfe;
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+    color: var(--accent-purple);
+    border-color: rgba(139, 92, 246, 0.2);
 }
 
 .meta-chip-person:hover {
-    background: #bfdbfe;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
+    color: var(--white);
+    border-color: transparent;
 }
 
-.meta-chip-tag {
+/* 分类标签（按类别着色） */
+.meta-chip-tag-style {
+    background: #f0f9ff;
+    color: #0284c7;
+    border-color: #bae6fd;
+}
+.meta-chip-tag-style:hover { background: #0284c7; color: #fff; border-color: #0284c7; }
+
+.meta-chip-tag-outfit {
+    background: #fdf2f8;
+    color: #db2777;
+    border-color: #fbcfe8;
+}
+.meta-chip-tag-outfit:hover { background: #db2777; color: #fff; border-color: #db2777; }
+
+.meta-chip-tag-scene {
     background: #f0fdf4;
-    color: #166534;
+    color: #15803d;
     border-color: #bbf7d0;
 }
+.meta-chip-tag-scene:hover { background: #15803d; color: #fff; border-color: #15803d; }
 
-.meta-chip-tag:hover {
-    background: #dcfce7;
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.2);
+.meta-chip-tag-body {
+    background: #fef3c7;
+    color: #b45309;
+    border-color: #fde68a;
+}
+.meta-chip-tag-body:hover { background: #b45309; color: #fff; border-color: #b45309; }
+
+.meta-chip-tag-mood {
+    background: #faf5ff;
+    color: #7c3aed;
+    border-color: #e9d5ff;
+}
+.meta-chip-tag-mood:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
+
+.meta-chip-tag-topic {
+    background: #eff6ff;
+    color: #0369a1;
+    border-color: #bfdbfe;
+}
+.meta-chip-tag-topic:hover { background: #0369a1; color: #fff; border-color: #0369a1; }
+
+/* 默认标签 */
+.meta-chip-tag {
+    background: var(--bg-hover);
+    color: var(--text-light);
+    border-color: var(--border-gray);
+}
+.meta-chip-tag:hover { background: var(--text-light); color: #fff; border-color: var(--text-light); }
+
+/* ============ 瀑布流布局（核心） ============ */
+.images-grid {
+    column-count: 4;
+    column-gap: 16px;
+    margin-bottom: 40px;
 }
 
-/* 智能图片网格布局 - 自适应瀑布流效果 */
-.images-grid { 
-    display: grid; 
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
-    gap: 25px; 
-    margin-bottom: 50px;
-    align-items: start; /* 顶部对齐 */
-}
-
-/* 大屏幕下的优化布局 */
-@media (min-width: 1200px) {
-    .images-grid {
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 30px;
-    }
-}
-
-/* 宽幅图片布局 - 超宽图片 (ratio > 1.5) */
-.image-item.landscape { 
-    grid-column: span 1;
-}
-
-.image-item.landscape img {
-    aspect-ratio: 16/9;
-    height: auto;
+/* 瀑布流中的每一项 */
+.image-item {
+    position: relative;
+    display: inline-block;
     width: 100%;
-    object-fit: cover;
-}
-
-/* 竖幅图片布局 - 超高图片 (ratio < 0.67) */
-.image-item.portrait { 
-    grid-column: span 1;
-}
-
-.image-item.portrait img {
-    aspect-ratio: 3/4;
-    height: auto;
-    width: 100%;
-    object-fit: cover;
-}
-
-/* 较宽图片布局 (1.3 < ratio ≤ 1.5) */
-.image-item.wide { 
-    grid-column: span 1;
-}
-
-.image-item.wide img {
-    aspect-ratio: 4/3;
-    height: auto;
-    width: 100%;
-    object-fit: cover;
-}
-
-/* 较高图片布局 (0.83 ≤ ratio < 1.3) */
-.image-item.tall { 
-    grid-column: span 1;
-}
-
-.image-item.tall img {
-    aspect-ratio: 3/4;
-    height: auto;
-    width: 100%;
-    object-fit: cover;
-}
-
-/* 方形图片布局 (接近1:1) */
-.image-item.square { 
-    grid-column: span 1;
-}
-
-.image-item.square img {
-    aspect-ratio: 1/1;
-    height: auto;
-    width: 100%;
-    object-fit: cover;
-}
-
-/* 默认图片样式（未分类的图片） */
-.image-item { 
-    position: relative; 
-    overflow: hidden; 
-    border-radius: var(--border-radius); 
-    box-shadow: var(--shadow-lg);
-    background: var(--white);
+    margin: 0 0 16px 0;
+    overflow: hidden;
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-sm);
+    background: var(--bg-surface);
     transition: all 0.3s ease;
     cursor: pointer;
-    border: 1px solid var(--medium-gray);
+    border: 1px solid var(--border-gray);
+    break-inside: avoid;
+    page-break-inside: avoid;
 }
 
-.image-item:hover { 
-    transform: translateY(-8px);
-    box-shadow: var(--shadow-xl);
-    border-color: var(--accent-blue);
+.image-item:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--secondary-blue);
 }
 
-/* 通用图片样式 - 移除固定高度，使用自适应 */
-.image-item img { 
-    width: 100%; 
-    height: auto; /* 改为自适应高度 */
-    object-fit: cover; 
+/* 图片本身 - 保持原始比例（瀑布流关键） */
+.image-item img {
+    width: 100%;
+    height: auto;
     display: block;
-    transition: transform 0.5s ease;
+    object-fit: contain;
+    transition: transform 0.4s ease;
 }
 
-.image-item:hover img { 
-    transform: scale(1.05);
+.image-item:hover img {
+    transform: scale(1.02);
 }
-.image-caption { 
-    padding: 12px; 
-    text-align: center; 
-    color: var(--text-dark);
-    font-size: 0.9rem;
-    font-weight: 500;
-    line-height: 1.4;
+
+/* 图片说明 */
+.image-caption {
+    padding: 10px 12px;
+    color: var(--text-light);
+    font-size: 0.8rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
     gap: 8px;
+    border-top: 1px solid var(--border-gray);
 }
 
 .image-caption small {
-    background: var(--light-gray);
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.8rem;
-    color: var(--text-light);
+    background: var(--bg-hover);
+    padding: 3px 8px;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 500;
 }
 
-/* 收藏按钮样式 */
+/* 收藏按钮 */
 .favorite-btn {
     position: absolute;
     top: 10px;
     right: 10px;
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(255, 255, 255, 0.92);
     border: none;
     border-radius: 50%;
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
+    transition: all 0.25s ease;
+    backdrop-filter: blur(8px);
     box-shadow: var(--shadow-sm);
     opacity: 0;
     z-index: 10;
 }
 
-.image-item:hover .favorite-btn {
-    opacity: 1;
-}
+.image-item:hover .favorite-btn { opacity: 1; }
 
 .favorite-btn:hover {
-    background: rgba(255, 255, 255, 1);
-    transform: scale(1.1);
+    transform: scale(1.12);
     box-shadow: var(--shadow-md);
 }
 
 .favorite-btn.favorited {
-    color: #ec4899;
-    background: rgba(236, 72, 153, 0.1);
+    color: var(--accent-pink);
+    background: rgba(236, 72, 153, 0.15);
 }
 
-.favorite-btn.favorited:hover {
-    background: rgba(236, 72, 153, 0.2);
-}
-
-.favorite-btn i {
-    font-size: 16px;
-    transition: all 0.3s ease;
-}
-
-/* 触摸设备显示收藏按钮 */
-@media (hover: none) and (pointer: coarse) {
-    .favorite-btn {
-        opacity: 0.7;
-    }
-    
-    .image-item:active .favorite-btn {
-        opacity: 1;
-        transform: scale(1.1);
-    }
-}
+.favorite-btn i { font-size: 15px; }
 
 /* 图片加载状态 */
 .image-loading {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--light-gray);
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: var(--bg-hover);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-light);
+    color: var(--text-muted);
 }
 
 .image-loading .fa-spinner {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
     animation: spin 1s linear infinite;
 }
 
@@ -344,406 +317,243 @@ body {
     100% { transform: rotate(360deg); }
 }
 
-/* 图片查看器样式 */
-.lightbox { 
-    display: none; 
-    position: fixed; 
-    top: 0; 
-    left: 0; 
-    width: 100%; 
-    height: 100%; 
-    background: rgba(30, 41, 59, 0.95); 
-    z-index: 1000; 
-    justify-content: center; 
-    align-items: center;
-    flex-direction: column;
-    backdrop-filter: blur(10px);
+/* 触摸设备收藏按钮常显 */
+@media (hover: none) and (pointer: coarse) {
+    .favorite-btn { opacity: 0.8; }
+    .image-item:hover { transform: none; box-shadow: var(--shadow-sm); }
+    .image-item:active { transform: scale(0.98); }
 }
-.lightbox img { 
-    max-width: 85%; 
-    max-height: 75%; 
-    object-fit: contain;
-    border-radius: 12px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+
+/* ============ 响应式：瀑布流列数 ============ */
+
+/* 大屏幕（默认）：4列 */
+@media (max-width: 1200px) {
+    .images-grid { column-count: 3; column-gap: 14px; }
+    .image-item { margin-bottom: 14px; }
 }
-.lightbox-close { 
-    position: absolute; 
-    top: 30px; 
-    right: 40px; 
-    color: var(--white); 
-    font-size: 36px; 
-    cursor: pointer;
-    z-index: 1001;
-    background: rgba(255, 255, 255, 0.1);
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
+
+/* 中等屏幕：3列 */
+@media (max-width: 900px) {
+    .images-grid { column-count: 2; column-gap: 12px; }
+    .image-item { margin-bottom: 12px; }
+    .album-title { font-size: 1.6rem; }
+}
+
+/* 手机：2列 */
+@media (max-width: 600px) {
+    .container { padding: 16px 12px; }
+    .images-grid { column-count: 2; column-gap: 10px; }
+    .image-item { margin-bottom: 10px; border-radius: var(--radius); }
+    .album-title { font-size: 1.3rem; padding: 0 10px; }
+    .album-info { font-size: 0.85rem; padding: 8px 14px; gap: 10px; }
+    .back-link { padding: 8px 14px; font-size: 0.85rem; }
+    .meta-chip { padding: 5px 11px; font-size: 0.8rem; }
+    .image-caption { padding: 8px 10px; font-size: 0.75rem; }
+    .favorite-btn { width: 30px; height: 30px; }
+}
+
+/* 小屏手机：1列 */
+@media (max-width: 380px) {
+    .images-grid { column-count: 1; }
+}
+
+/* ============ 图片查看器（保持原样） ============ */
+.preview-modal {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: 0;
+    visibility: hidden;
     transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-}
-.lightbox-close:hover {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-}
-.lightbox-nav { 
-    position: absolute; 
-    top: 50%; 
-    width: 100%; 
-    display: flex; 
-    justify-content: space-between; 
-    padding: 0 20px;
-    transform: translateY(-50%);
-    z-index: 1001;
-}
-.lightbox-nav button { 
-    background: rgba(255,255,255,0.2);
-    color: var(--white);
-    font-size: 30px; 
-    padding: 12px 24px; 
-    cursor: pointer; 
-    border-radius: var(--border-radius);
-    backdrop-filter: blur(10px);
-    transition: all 0.3s ease;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.lightbox-nav button:hover { 
-    background: rgba(255,255,255,0.3);
-    transform: scale(1.1);
-    border-color: rgba(255, 255, 255, 0.3);
-}
-.lightbox-info { 
-    color: var(--white); 
-    text-align: center; 
-    margin-top: 25px;
-    font-size: 1.2rem;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 15px 25px;
-    border-radius: var(--border-radius);
-    backdrop-filter: blur(10px);
-    max-width: 80%;
 }
 
-/* 响应式媒体查询 - 移动端优化 */
-@media (max-width: 1024px) {
-    .container {
-        padding: 25px 15px;
-    }
-    
-    .header {
-        margin-bottom: 35px;
-    }
-    
-    .album-title {
-        font-size: 2.2rem;
-    }
-    
-    .album-info {
-        font-size: 1.1rem;
-        padding: 18px;
-        margin-bottom: 18px;
-    }
-    
-    .album-meta-tags {
-        margin-bottom: 35px;
-    }
-    
-    .images-grid {
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        gap: 20px;
-    }
-    
-    .image-item img {
-        height: auto; /* 自适应高度 */
-    }
-    
-    .lightbox img {
-        max-width: 90%;
-        max-height: 70%;
-    }
-    
-    .lightbox-close {
-        top: 20px;
-        right: 25px;
-        font-size: 30px;
-        width: 45px;
-        height: 45px;
-    }
+.preview-modal.active { opacity: 1; visibility: visible; }
+
+.preview-overlay {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(15, 23, 42, 0.9);
+    backdrop-filter: blur(8px);
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 20px 15px;
-    }
-    
-    .header {
-        margin-bottom: 30px;
-    }
-    
-    .back-link {
-        padding: 10px 20px;
-        font-size: 0.9rem;
-        margin-bottom: 20px;
-    }
-    
-    .album-title {
-        font-size: 1.8rem;
-        margin-bottom: 12px;
-    }
-    
-    .album-info {
-        font-size: 1rem;
-        padding: 15px;
-        margin-bottom: 15px;
-    }
-    
-    .album-meta-tags {
-        gap: 8px;
-        margin-bottom: 30px;
-        padding: 0 10px;
-    }
-    
-    .meta-chip {
-        padding: 5px 12px;
-        font-size: 0.8rem;
-    }
-    
-    .images-grid {
-        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-        gap: 15px;
-    }
-    
-    .image-item {
-        border-radius: 10px;
-    }
-    
-    .image-item img {
-        height: auto; /* 自适应高度 */
-    }
-    
-    .image-caption {
-        padding: 10px;
-        font-size: 0.85rem;
-    }
-    
-    .image-caption small {
-        font-size: 0.75rem;
-        padding: 3px 6px;
-    }
-    
-    .lightbox {
-        padding: 20px;
-    }
-    
-    .lightbox img {
-        max-width: 95%;
-        max-height: 65%;
-    }
-    
-    .lightbox-close {
-        top: 15px;
-        right: 15px;
-        font-size: 24px;
-        width: 40px;
-        height: 40px;
-    }
-    
-    .lightbox-nav {
-        padding: 0 10px;
-    }
-    
-    .lightbox-nav button {
-        font-size: 24px;
-        padding: 10px 20px;
-    }
-    
-    .lightbox-info {
-        font-size: 1rem;
-        padding: 12px 20px;
-        margin-top: 20px;
-    }
+.preview-container {
+    position: relative;
+    background: var(--bg-surface);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 92vw;
+    max-height: 90vh;
+    width: 1200px;
+    height: 800px;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.92);
+    transition: transform 0.3s ease;
 }
 
-@media (max-width: 480px) {
-    .container {
-        padding: 15px 10px;
-    }
-    
-    .header {
-        margin-bottom: 25px;
-    }
-    
-    .back-link {
-        padding: 8px 16px;
-        font-size: 0.85rem;
-        margin-bottom: 15px;
-    }
-    
-    .album-title {
-        font-size: 1.6rem;
-        margin-bottom: 10px;
-    }
-    
-    .album-info {
-        font-size: 0.9rem;
-        padding: 12px;
-        margin-bottom: 12px;
-    }
-    
-    .album-meta-tags {
-        gap: 6px;
-        margin-bottom: 25px;
-        padding: 0 8px;
-    }
-    
-    .meta-chip {
-        padding: 4px 10px;
-        font-size: 0.75rem;
-    }
-    
-    .images-grid {
-        grid-template-columns: 1fr;
-        gap: 12px;
-    }
-    
-    .image-item img {
-        height: auto; /* 自适应高度 */
-    }
-    
-    .image-caption {
-        padding: 8px;
-        font-size: 0.8rem;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 6px;
-    }
-    
-    .lightbox {
-        padding: 15px;
-    }
-    
-    .lightbox img {
-        max-width: 100%;
-        max-height: 60%;
-    }
-    
-    .lightbox-close {
-        top: 10px;
-        right: 10px;
-        font-size: 20px;
-        width: 35px;
-        height: 35px;
-    }
-    
-    .lightbox-nav {
-        padding: 0 5px;
-    }
-    
-    .lightbox-nav button {
-        font-size: 20px;
-        padding: 8px 16px;
-    }
-    
-    .lightbox-info {
-        font-size: 0.9rem;
-        padding: 10px 15px;
-        margin-top: 15px;
-        max-width: 95%;
-    }
+.preview-modal.active .preview-container { transform: scale(1); }
+
+.preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-gray);
+    flex-shrink: 0;
 }
 
-/* 触摸设备优化 */
-@media (hover: none) and (pointer: coarse) {
-    .image-item:hover {
-        transform: none;
-        box-shadow: var(--shadow-lg);
-    }
-    
-    .image-item:active {
-        transform: scale(0.98);
-        box-shadow: var(--shadow-md);
-    }
-    
-    .back-link:hover {
-        transform: none;
-    }
-    
-    .back-link:active {
-        transform: scale(0.95);
-    }
-    
-    .lightbox-nav button:hover {
-        transform: none;
-    }
-    
-    .lightbox-nav button:active {
-        transform: scale(0.9);
-    }
-    
-    .lightbox-close:hover {
-        transform: none;
-    }
-    
-    .lightbox-close:active {
-        transform: scale(0.9);
-    }
+.preview-title h3 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-dark);
+    margin: 0 0 4px 0;
 }
 
-/* 横屏模式优化 */
-@media (orientation: landscape) and (max-height: 500px) {
-    .lightbox {
-        flex-direction: row;
-        align-items: center;
-    }
-    
-    .lightbox img {
-        max-width: 70%;
-        max-height: 85%;
-    }
-    
-    .lightbox-info {
-        margin-top: 0;
-        margin-left: 20px;
-        max-width: 25%;
-    }
+.preview-info { font-size: 0.85rem; color: var(--text-light); }
+
+.preview-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
 }
 
-/* 高分辨率屏幕优化 */
-@media (min-resolution: 2dppx) {
-    .image-item img {
-        image-rendering: -webkit-optimize-contrast;
-        image-rendering: crisp-edges;
-    }
-    
-    .lightbox img {
-        image-rendering: auto;
-    }
+.preview-nav {
+    width: 36px; height: 36px;
+    border: 1px solid var(--border-gray);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    color: var(--text-dark);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
 }
 
-/* 暗色模式支持 */
+.preview-nav:hover:not(:disabled) {
+    background: var(--bg-hover);
+    border-color: var(--secondary-blue);
+    color: var(--secondary-blue);
+}
+
+.preview-nav:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.preview-counter { font-size: 0.85rem; color: var(--text-light); font-weight: 500; }
+
+.preview-close {
+    width: 36px; height: 36px;
+    border: none;
+    border-radius: var(--radius);
+    background: var(--bg-hover);
+    color: var(--text-dark);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.preview-close:hover { background: #ef4444; color: #fff; }
+
+.preview-content {
+    flex: 1;
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #0f172a;
+}
+
+.preview-image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    transition: opacity 0.3s ease;
+}
+
+.preview-loading {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-light);
+}
+
+.preview-loading i { font-size: 1.8rem; color: var(--secondary-blue); }
+
+.preview-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 20px;
+    border-top: 1px solid var(--border-gray);
+    flex-shrink: 0;
+}
+
+.preview-meta { display: flex; gap: 16px; }
+
+.preview-meta .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    color: var(--text-light);
+}
+
+.preview-controls { display: flex; gap: 10px; }
+
+.preview-action {
+    padding: 7px 14px;
+    border: 1px solid var(--border-gray);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    color: var(--text-dark);
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.preview-action:hover { background: var(--bg-hover); }
+
+.preview-remove { border-color: #fecaca; color: #dc2626; }
+.preview-remove:hover { background: #fef2f2; border-color: #fca5a5; }
+
+.preview-action.favorited { border-color: #fbcfe8; color: #ec4899; background: #fdf2f8; }
+.preview-action.favorited:hover { background: #fce7f3; border-color: #f9a8d4; }
+
+/* 暗色模式 */
 @media (prefers-color-scheme: dark) {
     :root {
-        --primary-blue: #3b82f6;
-        --light-blue: #1e293b;
-        --white: #0f172a;
-        --light-gray: #334155;
-        --medium-gray: #475569;
+        --bg-primary: #0f172a;
+        --bg-surface: #1e293b;
+        --bg-hover: #334155;
+        --border-gray: #334155;
         --text-dark: #f1f5f9;
         --text-light: #cbd5e1;
+        --text-muted: #94a3b8;
     }
-    
-    body {
-        background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%);
-    }
+    .preview-container { background: var(--bg-surface); }
+    .preview-nav, .preview-close, .preview-action { background: var(--bg-hover); color: var(--text-dark); border-color: var(--border-gray); }
 }
-
-@media (max-width: 768px) {
-    .images-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
-    .album-title { font-size: 1.8rem; }
-    .lightbox img { max-width: 95%; max-height: 60%; }
-    .lightbox-nav button { font-size: 24px; padding: 10px 18px; }
-    .container { padding: 20px 15px; }
-    .album-info { font-size: 1.1rem; padding: 15px; }
-}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 4cf1503..df13b87 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,39 +1,714 @@
-/* 现代化蓝白配色体系 - 增强响应式支持 */
+/* ============================================================
+   流云图库 - 现代化双栏布局样式
+   ============================================================ */
+
+/* ============ CSS 变量 ============ */
 :root {
+    /* 主色调 - 蓝紫渐变 */
     --primary-blue: #1e40af;
     --secondary-blue: #3b82f6;
-    --light-blue: #dbeafe;
-    --accent-blue: #60a5fa;
+    --accent-purple: #8b5cf6;
+    --accent-pink: #ec4899;
+    
+    /* 中性色 */
     --white: #ffffff;
     --light-gray: #f8fafc;
     --medium-gray: #e2e8f0;
+    --border-gray: #e5e7eb;
     --dark-gray: #475569;
     --text-dark: #1e293b;
     --text-light: #64748b;
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --text-muted: #94a3b8;
+    
+    /* 背景 */
+    --bg-primary: #f8fafc;
+    --bg-surface: #ffffff;
+    --bg-hover: #f1f5f9;
+    --bg-sidebar: #ffffff;
+    
+    /* 阴影 */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
-    --border-radius: 12px;
-    --border-radius-lg: 20px;
-    --mobile-breakpoint: 768px;
-    --tablet-breakpoint: 1024px;
+    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);
+    
+    /* 圆角 */
+    --radius: 8px;
+    --radius-card: 12px;
+    --radius-lg: 16px;
+    --radius-full: 999px;
+    
+    /* 间距 */
+    --spacer-xs: 4px;
+    --spacer-sm: 8px;
+    --spacer-md: 12px;
+    --spacer-lg: 16px;
+    --spacer-xl: 20px;
+    --spacer-2xl: 24px;
+    --spacer-3xl: 32px;
+    
+    /* 尺寸 */
+    --sidebar-width: 260px;
+    --sidebar-collapsed-width: 72px;
+    --topbar-height: 64px;
+    
+    /* 动画 */
+    --transition-fast: 150ms ease;
+    --transition-base: 200ms ease;
+    --transition-slow: 300ms ease;
 }
 
+/* ============ 基础 Reset ============ */
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body { 
-    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; 
-    background: linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%); 
+    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; 
+    background: var(--bg-primary);
     min-height: 100vh;
     color: var(--text-dark);
     line-height: 1.6;
     overflow-x: hidden;
-    /* 优化渲染性能 */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
 }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; border: none; background: none; }
+input { font-family: inherit; }
+
+/* ============ 双栏布局 ============ */
+.app-layout {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* ============ 侧边栏 ============ */
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--bg-sidebar);
+    border-right: 1px solid var(--border-gray);
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    flex-shrink: 0;
+    transition: width var(--transition-slow);
+    z-index: 100;
+    overflow: hidden;
+}
+
+/* 折叠状态 */
+.sidebar.collapsed {
+    width: var(--sidebar-collapsed-width);
+}
+
+.sidebar.collapsed .brand-text,
+.sidebar.collapsed .nav-item span,
+.sidebar.collapsed .sidebar-section-title span,
+.sidebar.collapsed .sidebar-tags,
+.sidebar.collapsed .collapse-btn span {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.sidebar.collapsed .sidebar-section-title {
+    justify-content: center;
+}
+
+.sidebar.collapsed .nav-item {
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.sidebar.collapsed .collapse-btn {
+    justify-content: center;
+}
+
+.sidebar.collapsed .collapse-btn i {
+    transform: rotate(180deg);
+}
+
+/* 品牌 Logo */
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-md);
+    padding: var(--spacer-2xl) var(--spacer-xl);
+    border-bottom: 1px solid var(--border-gray);
+    height: var(--topbar-height);
+    flex-shrink: 0;
+}
+
+.brand-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--accent-purple) 100%);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--white);
+    font-size: 1.1rem;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+.brand-text {
+    font-size: 1.2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-purple) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    white-space: nowrap;
+    transition: opacity var(--transition-base);
+}
+
+/* 导航菜单 */
+.sidebar-nav {
+    padding: var(--spacer-lg) var(--spacer-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-xs);
+    flex-shrink: 0;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-md);
+    padding: var(--spacer-md) var(--spacer-lg);
+    border-radius: var(--radius);
+    color: var(--text-light);
+    font-weight: 500;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    white-space: nowrap;
+}
+
+.nav-item i {
+    width: 20px;
+    text-align: center;
+    flex-shrink: 0;
+    font-size: 1rem;
+}
+
+.nav-item:hover {
+    background: var(--bg-hover);
+    color: var(--text-dark);
+}
+
+.nav-item.active {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+    color: var(--secondary-blue);
+    font-weight: 600;
+}
+
+.nav-item.active i {
+    color: var(--secondary-blue);
+}
+
+/* 分隔线 */
+.sidebar-divider {
+    height: 1px;
+    background: var(--border-gray);
+    margin: var(--spacer-sm) var(--spacer-xl);
+    flex-shrink: 0;
+}
+
+/* 侧边栏区域 */
+.sidebar-section {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacer-lg) var(--spacer-md);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.sidebar-section::-webkit-scrollbar {
+    width: 4px;
+}
+.sidebar-section::-webkit-scrollbar-thumb {
+    background: var(--medium-gray);
+    border-radius: 2px;
+}
+
+.sidebar-section-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-md);
+    padding: var(--spacer-sm) var(--spacer-lg);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    margin-bottom: var(--spacer-sm);
+}
+
+.sidebar-section-title i {
+    width: 20px;
+    text-align: center;
+    font-size: 0.85rem;
+}
+
+/* 侧边栏标签列表 */
+.sidebar-tags {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-xs);
+    transition: opacity var(--transition-base);
+}
+
+.sidebar-tag {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacer-sm) var(--spacer-lg);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 0.9rem;
+    color: var(--text-light);
+}
+
+.sidebar-tag:hover {
+    background: var(--bg-hover);
+    color: var(--text-dark);
+}
+
+.sidebar-tag.active {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--secondary-blue);
+    font-weight: 500;
+}
+
+.sidebar-tag-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.sidebar-tag-count {
+    background: var(--bg-hover);
+    padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+
+.sidebar-tag.active .sidebar-tag-count {
+    background: var(--secondary-blue);
+    color: var(--white);
+}
+
+/* 侧边栏底部 */
+.sidebar-footer {
+    padding: var(--spacer-md);
+    border-top: 1px solid var(--border-gray);
+    flex-shrink: 0;
+}
+
+.collapse-btn {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-md);
+    width: 100%;
+    padding: var(--spacer-md) var(--spacer-lg);
+    border-radius: var(--radius);
+    color: var(--text-light);
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.collapse-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-dark);
+}
+
+.collapse-btn i {
+    width: 20px;
+    text-align: center;
+    transition: transform var(--transition-base);
+    flex-shrink: 0;
+}
+
+.collapse-btn span {
+    transition: opacity var(--transition-base);
+    white-space: nowrap;
+}
+
+/* ============ 主内容区 ============ */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+/* ============ 顶部工具栏 ============ */
+.topbar {
+    height: var(--topbar-height);
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-gray);
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-lg);
+    padding: 0 var(--spacer-2xl);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.mobile-menu-btn {
+    display: none;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    color: var(--text-light);
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.mobile-menu-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-dark);
+}
+
+/* 搜索栏 */
+.search-bar {
+    flex: 1;
+    max-width: 640px;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    position: absolute;
+    left: var(--spacer-lg);
+    color: var(--text-muted);
+    font-size: 1rem;
+    pointer-events: none;
+}
+
+.search-bar input {
+    width: 100%;
+    padding: var(--spacer-md) var(--spacer-3xl);
+    font-size: 0.95rem;
+    border: 1px solid var(--border-gray);
+    border-radius: var(--radius-full);
+    background: var(--bg-hover);
+    color: var(--text-dark);
+    transition: all var(--transition-fast);
+}
+
+.search-bar input::placeholder {
+    color: var(--text-muted);
+}
+
+.search-bar input:focus {
+    outline: none;
+    border-color: var(--secondary-blue);
+    background: var(--white);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-clear {
+    position: absolute;
+    right: var(--spacer-md);
+    width: 28px;
+    height: 28px;
+    border-radius: var(--radius-full);
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.search-clear:hover {
+    background: var(--medium-gray);
+    color: var(--text-dark);
+}
+
+/* 顶部操作按钮 */
+.topbar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    margin-left: auto;
+}
+
+.action-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius);
+    color: var(--text-light);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+    position: relative;
+}
+
+.action-btn:hover {
+    background: var(--bg-hover);
+    color: var(--secondary-blue);
+}
+
+.action-btn:active {
+    transform: scale(0.95);
+}
+
+/* ============ 筛选状态条 ============ */
+.filter-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-md);
+    padding: var(--spacer-md) var(--spacer-2xl);
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    border-bottom: 1px solid #fcd34d;
+}
+
+.filter-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    color: #92400e;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.filter-pill {
+    background: var(--white);
+    padding: 4px var(--spacer-md);
+    border-radius: var(--radius-full);
+    font-weight: 700;
+    color: #92400e;
+    font-size: 0.9rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.filter-remove {
+    margin-left: auto;
+    padding: var(--spacer-sm) var(--spacer-md);
+    background: #92400e;
+    color: var(--white);
+    border-radius: var(--radius-full);
+    font-weight: 600;
+    font-size: 0.85rem;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-xs);
+}
+
+.filter-remove:hover {
+    background: #78350f;
+    transform: translateY(-1px);
+}
+
+/* ============ 内容区域 ============ */
+.content-area {
+    flex: 1;
+    padding: var(--spacer-2xl);
+    max-width: 100%;
+}
+
+/* 统计条 */
+.stats-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-xl);
+    padding: var(--spacer-xl) var(--spacer-2xl);
+    background: var(--bg-surface);
+    border-radius: var(--radius-card);
+    border: 1px solid var(--border-gray);
+    margin-bottom: var(--spacer-2xl);
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+}
+
+.stat-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: var(--radius);
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
+    color: var(--secondary-blue);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+.stat-value {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--text-dark);
+    line-height: 1;
+}
+
+.stat-label {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+.stat-divider {
+    width: 1px;
+    height: 36px;
+    background: var(--border-gray);
+}
+
+/* 热门人物横向滚动条 */
+.people-strip {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-lg);
+    padding: var(--spacer-md) var(--spacer-xl);
+    background: var(--bg-surface);
+    border-radius: var(--radius-card);
+    border: 1px solid var(--border-gray);
+    margin-bottom: var(--spacer-2xl);
+    overflow: hidden;
+    position: relative;
+}
+
+.people-strip-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    font-weight: 600;
+    color: var(--text-dark);
+    font-size: 0.9rem;
+    flex-shrink: 0;
+    padding-right: var(--spacer-lg);
+    border-right: 1px solid var(--border-gray);
+}
+
+.people-strip-header i {
+    color: var(--accent-purple);
+}
+
+.people-scroll {
+    display: flex;
+    gap: var(--spacer-md);
+    overflow-x: auto;
+    flex: 1;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    padding: var(--spacer-xs) 0;
+}
+
+.people-scroll::-webkit-scrollbar {
+    display: none;
+}
+
+.person-chip-scroll {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    padding: var(--spacer-xs) var(--spacer-md) var(--spacer-xs) var(--spacer-xs);
+    background: var(--bg-hover);
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+    border: 1px solid transparent;
+}
+
+.person-chip-scroll:hover {
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+    border-color: rgba(139, 92, 246, 0.2);
+    transform: translateY(-1px);
+}
+
+.person-chip-scroll.active {
+    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
+    color: var(--white);
+}
+
+.person-chip-scroll.active .person-chip-name,
+.person-chip-scroll.active .person-chip-count {
+    color: var(--white);
+}
+
+.person-chip-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-full);
+    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+}
+
+.person-chip-info {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+}
+
+.person-chip-name {
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: var(--text-dark);
+    white-space: nowrap;
+}
+
+.person-chip-count {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.people-scroll-hint {
+    color: var(--text-muted);
+    padding-left: var(--spacer-md);
+    border-left: 1px solid var(--border-gray);
+    flex-shrink: 0;
+    animation: scrollHint 2s ease-in-out infinite;
+}
+
+@keyframes scrollHint {
+    0%, 100% { opacity: 0.4; transform: translateX(0); }
+    50% { opacity: 1; transform: translateX(4px); }
+}
+
+/* ============ 移动端遮罩 ============ */
+.mobile-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 99;
+    opacity: 0;
+    transition: opacity var(--transition-base);
+}
+
+.mobile-overlay.active {
+    display: block;
+    opacity: 1;
+}
+
+/* ============ 旧样式保留：搜索框 + 按钮（兼容） ============ */
 .container { 
     max-width: 1400px; 
     margin: 0 auto; 
@@ -111,7 +786,6 @@ body {
     transform: translateY(-50%) scale(1.05);
 }
 
-/* 操作按钮样式 */
 .action-buttons {
     display: flex;
     justify-content: center;
@@ -142,11 +816,6 @@ body {
     background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
 }
 
-.random-button:active, .favorites-button:active {
-    transform: translateY(0);
-    box-shadow: var(--shadow-sm);
-}
-
 .favorites-button {
     background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
 }
@@ -155,14 +824,13 @@ body {
     background: linear-gradient(135deg, #db2777 0%, #ec4899 100%);
 }
 
-/* 收藏夹页面样式 - 重新设计 */
+/* ============ 旧样式保留：收藏夹 ============ */
 .favorites-container {
     width: 100%;
     min-height: 100vh;
     background: #f8fafc;
 }
 
-/* 收藏夹头部 - 固定位置 */
 .favorites-header {
     background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
     padding: 30px 40px;
@@ -226,17 +894,6 @@ body {
     font-size: 1.2rem;
 }
 
-.header-right {
-    display: flex;
-    gap: 12px;
-}
-
-.action-buttons {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
 .sort-button, .back-button, .explore-button {
     padding: 10px 20px;
     border: none;
@@ -283,21 +940,16 @@ body {
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
 }
 
-/* 收藏夹内容区域 - 铺满页面 */
 .favorites-content {
     width: 100%;
     padding: 0;
     margin: 0;
 }
 
-/* 空状态 */
 .empty-favorites {
     text-align: center;
     padding: 100px 20px;
     background: white;
-    border-radius: 0;
-    box-shadow: none;
-    border: none;
     min-height: 60vh;
     display: flex;
     flex-direction: column;
@@ -333,7 +985,6 @@ body {
     margin-bottom: 30px;
 }
 
-/* 收藏夹网格 - 铺满页面，均匀分布 */
 .favorites-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -345,14 +996,9 @@ body {
     align-items: start;
 }
 
-/* 确保卡片宽度一致，实现均匀分布 */
 .favorite-card {
     width: 100%;
     max-width: 320px;
-}
-
-/* 收藏卡片 - 紧凑布局 */
-.favorite-card {
     background: white;
     border-radius: 10px;
     overflow: hidden;
@@ -390,10 +1036,7 @@ body {
 
 .card-overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: 0; left: 0; right: 0; bottom: 0;
     background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.25));
     opacity: 0;
     transition: opacity 0.3s ease;
@@ -405,29 +1048,10 @@ body {
     opacity: 1;
 }
 
-/* 对于触摸设备，添加焦点状态以显示覆盖层 */
-.favorite-card:focus-within .card-overlay {
-    opacity: 1;
-}
-
-/* 媒体查询：针对触摸设备的特殊处理 */
 @media (hover: none) and (pointer: coarse) {
-    .favorite-card .card-overlay {
-        opacity: 0.2; /* 在触摸设备上始终轻微显示覆盖层 */
-    }
-    
+    .favorite-card .card-overlay { opacity: 0.2; }
     .favorite-card:active .card-overlay,
-    .favorite-card:focus .card-overlay {
-        opacity: 1;
-    }
-}
-
-/* 为了兼容性，也为触摸设备上的元素添加焦点样式 */
-@media (hover: hover) and (pointer: fine) {
-    /* 在非触摸设备上保持原有hover效果 */
-    .favorite-card:hover .card-overlay {
-        opacity: 1;
-    }
+    .favorite-card:focus .card-overlay { opacity: 1; }
 }
 
 .overlay-content {
@@ -450,7 +1074,6 @@ body {
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
     font-size: 0.85rem;
 }
 
@@ -527,17 +1150,13 @@ body {
     color: #9ca3af;
 }
 
-.meta-item i {
-    font-size: 0.7rem;
-}
+.meta-item i { font-size: 0.7rem; }
 
-/* 预览模态框样式 */
+/* ============ 旧样式保留：预览模态框 ============ */
 .preview-modal {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
     z-index: 1000;
     display: flex;
     align-items: center;
@@ -554,10 +1173,8 @@ body {
 
 .preview-overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
     background: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(5px);
 }
@@ -685,8 +1302,7 @@ body {
 
 .preview-loading {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
@@ -695,9 +1311,7 @@ body {
     color: #6b7280;
 }
 
-.preview-loading i {
-    font-size: 2rem;
-}
+.preview-loading i { font-size: 2rem; }
 
 .preview-footer {
     display: flex;
@@ -721,9 +1335,7 @@ body {
     color: #6b7280;
 }
 
-.preview-meta .meta-item i {
-    font-size: 0.8rem;
-}
+.preview-meta .meta-item i { font-size: 0.8rem; }
 
 .preview-controls {
     display: flex;
@@ -760,7 +1372,6 @@ body {
     border-color: #fca5a5;
 }
 
-/* 收藏按钮样式 */
 .preview-action.favorited {
     border-color: #fbcfe8;
     color: #ec4899;
@@ -772,306 +1383,9 @@ body {
     border-color: #f9a8d4;
 }
 
-.preview-action.favorited i {
-    color: #ec4899;
-}
-
-/* 预览模态框响应式设计 */
-@media (max-width: 1024px) {
-    .preview-container {
-        width: 95vw;
-        height: 85vh;
-        margin: 20px;
-    }
-    
-    .preview-header {
-        padding: 16px 20px;
-    }
-    
-    .preview-title h3 {
-        font-size: 1.2rem;
-    }
-    
-    .preview-footer {
-        padding: 12px 20px;
-        flex-direction: column;
-        gap: 12px;
-        align-items: flex-start;
-    }
-    
-    .preview-meta {
-        gap: 12px;
-    }
-    
-    .preview-meta .meta-item {
-        font-size: 0.85rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .preview-container {
-        width: 98vw;
-        height: 90vh;
-        margin: 10px;
-        border-radius: 12px;
-    }
-    
-    .preview-header {
-        padding: 12px 16px;
-        flex-direction: column;
-        gap: 12px;
-        align-items: flex-start;
-    }
-    
-    .preview-title h3 {
-        font-size: 1.1rem;
-    }
-    
-    .preview-info {
-        font-size: 0.85rem;
-    }
-    
-    .preview-actions {
-        width: 100%;
-        justify-content: space-between;
-    }
-    
-    .preview-nav {
-        width: 36px;
-        height: 36px;
-    }
-    
-    .preview-close {
-        width: 36px;
-        height: 36px;
-    }
-    
-    .preview-footer {
-        padding: 10px 16px;
-    }
-    
-    .preview-meta {
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-    
-    .preview-controls {
-        width: 100%;
-        justify-content: space-between;
-    }
-    
-    .preview-action {
-        padding: 6px 12px;
-        font-size: 0.85rem;
-        flex: 1;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .preview-container {
-        height: 95vh;
-        margin: 5px;
-        border-radius: 8px;
-    }
-    
-    .preview-header {
-        padding: 10px 12px;
-    }
-    
-    .preview-title h3 {
-        font-size: 1rem;
-    }
-    
-    .preview-actions {
-        gap: 8px;
-    }
-    
-    .preview-nav {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .preview-close {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .preview-counter {
-        font-size: 0.8rem;
-    }
-    
-    .preview-footer {
-        padding: 8px 12px;
-    }
-    
-    .preview-meta .meta-item {
-        font-size: 0.8rem;
-    }
-    
-    .preview-action {
-        padding: 5px 10px;
-        font-size: 0.8rem;
-    }
-}
-
-/* 响应式设计 */
-@media (max-width: 1024px) {
-    .favorites-grid {
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        gap: 16px;
-        padding: 20px;
-    }
-    
-    .favorite-card {
-        max-width: 260px;
-    }
-    
-    .card-image {
-        height: 160px;
-    }
-}
-
-@media (max-width: 768px) {
-    .favorites-header {
-        padding: 20px 16px;
-    }
-    
-    .header-content {
-        flex-direction: column;
-        text-align: center;
-        gap: 16px;
-    }
-    
-    .header-left {
-        flex-direction: column;
-        gap: 12px;
-    }
-    
-    .favorites-icon {
-        width: 50px;
-        height: 50px;
-    }
-    
-    .favorites-icon i {
-        font-size: 1.5rem;
-    }
-    
-    .header-info h1 {
-        font-size: 1.6rem;
-        margin-bottom: 4px;
-    }
-    
-    .favorites-count {
-        font-size: 1rem;
-    }
-    
-    .count-number {
-        font-size: 1.1rem;
-    }
-    
-    .action-buttons {
-        justify-content: center;
-        width: 100%;
-    }
-    
-    .sort-button, .back-button, .explore-button {
-        padding: 8px 16px;
-        font-size: 0.85rem;
-        flex: 1;
-        justify-content: center;
-        min-width: 120px;
-    }
-    
-    .favorites-grid {
-        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-        gap: 12px;
-        padding: 16px;
-    }
-    
-    .favorite-card {
-        max-width: 280px;
-    }
-    
-    .card-image {
-        height: 140px;
-    }
-    
-    .card-content {
-        padding: 10px;
-        gap: 4px;
-    }
-    
-    .image-title {
-        font-size: 0.95rem;
-    }
-    
-    .album-info {
-        font-size: 0.8rem;
-    }
-    
-    .meta-item {
-        font-size: 0.7rem;
-    }
-    
-    .empty-favorites {
-        padding: 60px 20px;
-        min-height: 50vh;
-    }
-    
-    .empty-icon {
-        width: 80px;
-        height: 80px;
-    }
-    
-    .empty-icon i {
-        font-size: 3rem;
-    }
-    
-    .empty-favorites h3 {
-        font-size: 1.4rem;
-    }
-    
-    .empty-favorites p {
-        font-size: 1rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .favorites-header {
-        padding: 16px 12px;
-    }
-    
-    .header-info h1 {
-        font-size: 1.4rem;
-    }
-    
-    .favorites-grid {
-        padding: 12px;
-        gap: 10px;
-    }
-    
-    .card-image {
-        height: 140px;
-    }
-    
-    .sort-button, .back-button, .explore-button {
-        padding: 6px 12px;
-        font-size: 0.8rem;
-        min-width: 100px;
-    }
-    
-    .overlay-content {
-        padding: 10px;
-    }
-    
-    .quick-view, .remove-favorite {
-        width: 32px;
-        height: 32px;
-        font-size: 0.8rem;
-    }
-}
+.preview-action.favorited i { color: #ec4899; }
 
+/* ============ 旧样式保留：统计 + 发现区域 ============ */
 .stats { 
     text-align: center; 
     color: var(--text-dark); 
@@ -1084,10 +1398,6 @@ body {
     border: 1px solid var(--medium-gray);
 }
 
-/* ============================================================
-   发现区域 - 热门人物 & 热门标签
-   ============================================================ */
-
 .discover-section {
     background: var(--white);
     border-radius: var(--border-radius-lg);
@@ -1116,9 +1426,7 @@ body {
     gap: 10px;
 }
 
-.section-header h3 i {
-    color: var(--secondary-blue);
-}
+.section-header h3 i { color: var(--secondary-blue); }
 
 .section-toggle {
     background: none;
@@ -1136,7 +1444,6 @@ body {
     color: var(--secondary-blue);
 }
 
-/* 标签云 */
 .tag-cloud {
     padding: 20px 24px;
     display: flex;
@@ -1173,11 +1480,8 @@ body {
     box-shadow: var(--shadow-md);
 }
 
-.tag-chip:hover small {
-    color: rgba(255, 255, 255, 0.85);
-}
+.tag-chip:hover small { color: rgba(255, 255, 255, 0.85); }
 
-/* 热门人物 */
 .people-cloud {
     padding: 20px 24px;
     display: grid;
@@ -1205,9 +1509,7 @@ body {
 }
 
 .person-chip:hover .person-name,
-.person-chip:hover .person-meta {
-    color: var(--white);
-}
+.person-chip:hover .person-meta { color: var(--white); }
 
 .person-avatar {
     width: 40px;
@@ -1223,14 +1525,9 @@ body {
     flex-shrink: 0;
 }
 
-.person-chip:hover .person-avatar {
-    background: rgba(255, 255, 255, 0.25);
-}
+.person-chip:hover .person-avatar { background: rgba(255, 255, 255, 0.25); }
 
-.person-info {
-    flex: 1;
-    min-width: 0;
-}
+.person-info { flex: 1; min-width: 0; }
 
 .person-name {
     font-weight: 700;
@@ -1247,7 +1544,6 @@ body {
     margin-top: 2px;
 }
 
-/* 筛选状态条 */
 .filter-status {
     display: none;
     align-items: center;
@@ -1297,20 +1593,20 @@ body {
     transform: translateY(-1px);
 }
 
-/* 响应式网格布局 - 区分PC和手机 */
+/* ============ 相册网格 + 卡片 ============ */
 .albums-grid { 
     display: grid; 
-    grid-template-columns: repeat(auto-fill, minmax(300px, 0fr));
-    gap: 30px; 
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px; 
     margin-bottom: 40px;
 }
 
-/* 加载状态和骨架屏 */
 .loading {
     text-align: center;
     padding: 60px 20px;
     color: var(--text-light);
     font-size: 1.1rem;
+    grid-column: 1 / -1;
 }
 
 .loading .fa-spinner {
@@ -1339,21 +1635,9 @@ body {
     border: 1px solid var(--medium-gray);
 }
 
-.skeleton-cover {
-    height: 220px;
-    width: 100%;
-}
-
-.skeleton-content {
-    padding: 25px;
-}
-
-.skeleton-title {
-    height: 24px;
-    width: 80%;
-    margin-bottom: 15px;
-    border-radius: 4px;
-}
+.skeleton-cover { height: 220px; width: 100%; }
+.skeleton-content { padding: 25px; }
+.skeleton-title { height: 24px; width: 80%; margin-bottom: 15px; border-radius: 4px; }
 
 .skeleton-meta {
     display: flex;
@@ -1361,42 +1645,38 @@ body {
     margin-bottom: 20px;
 }
 
-.skeleton-meta-item {
-    height: 16px;
-    width: 40%;
-    border-radius: 4px;
-}
-
-.skeleton-button {
-    height: 44px;
-    width: 100%;
-    border-radius: 10px;
-}
+.skeleton-meta-item { height: 16px; width: 40%; border-radius: 4px; }
+.skeleton-button { height: 44px; width: 100%; border-radius: 10px; }
 
 .album-card { 
     background: var(--white); 
-    border-radius: var(--border-radius-lg); 
-    box-shadow: var(--shadow-lg); 
+    border-radius: var(--radius-card); 
+    box-shadow: var(--shadow-sm); 
     overflow: hidden; 
-    transition: all 0.3s ease;
+    transition: all var(--transition-slow);
     position: relative;
-    border: 1px solid var(--medium-gray);
+    border: 1px solid var(--border-gray);
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
 }
+
 .album-card:hover { 
-    transform: translateY(-8px); 
-    box-shadow: var(--shadow-xl);
-    border-color: var(--accent-blue);
+    transform: translateY(-4px); 
+    box-shadow: var(--shadow-lg);
+    border-color: var(--secondary-blue);
 }
+
 .album-cover { 
     height: 220px; 
     overflow: hidden; 
     position: relative;
-    background: var(--light-gray);
+    background: var(--bg-hover);
     display: flex;
     align-items: center;
     justify-content: center;
 }
+
 .album-cover img { 
     width: 100%; 
     height: 100%; 
@@ -1404,15 +1684,20 @@ body {
     transition: transform 0.5s ease;
     display: block;
 }
-.album-card:hover .album-cover img { 
-    transform: scale(1.05);
-}
+
+.album-card:hover .album-cover img { transform: scale(1.05); }
+
 .album-info { 
-    padding: 25px; 
+    padding: 16px; 
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1;
 }
+
 .album-info h3 { 
-    font-size: 1.4rem; 
-    margin-bottom: 12px; 
+    font-size: 1rem; 
+    margin: 0;
     color: var(--text-dark); 
     line-height: 1.4;
     display: -webkit-box;
@@ -1421,24 +1706,45 @@ body {
     overflow: hidden;
     font-weight: 600;
 }
+
 .album-meta { 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     color: var(--text-light);
-    font-size: 0.9rem;
+    font-size: 0.85rem;
 }
+
 .album-meta span { 
     display: flex; 
     align-items: center; 
     gap: 6px;
 }
 
+/* 相册标签胶囊 */
+.album-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: auto;
+}
+
+.album-tag {
+    padding: 2px 8px;
+    background: var(--bg-hover);
+    border-radius: var(--radius-full);
+    font-size: 0.75rem;
+    color: var(--text-light);
+    font-weight: 500;
+}
+
+/* 无结果 */
 .no-results { 
     text-align: center; 
     padding: 60px 20px; 
     color: var(--text-light); 
     font-size: 1.2rem;
+    grid-column: 1 / -1;
 }
 
 .no-results .fa-search {
@@ -1447,7 +1753,6 @@ body {
     color: var(--medium-gray);
 }
 
-/* 搜索提示样式 */
 .search-hint {
     text-align: center;
     padding: 60px 20px;
@@ -1455,6 +1760,7 @@ body {
     font-size: 1.2rem;
     max-width: 600px;
     margin: 0 auto;
+    grid-column: 1 / -1;
 }
 
 .search-hint .fa-search {
@@ -1463,12 +1769,8 @@ body {
     color: var(--medium-gray);
 }
 
-.search-hint h3 {
-    color: var(--text-dark);
-    margin-bottom: 15px;
-}
+.search-hint h3 { color: var(--text-dark); margin-bottom: 15px; }
 
-/* 加载状态样式 */
 .loading-state {
     text-align: center;
     padding: 60px 20px;
@@ -1476,6 +1778,7 @@ body {
     font-size: 1.2rem;
     max-width: 400px;
     margin: 0 auto;
+    grid-column: 1 / -1;
 }
 
 .loading-state .fa-spinner {
@@ -1484,10 +1787,7 @@ body {
     color: var(--secondary-blue);
 }
 
-.loading-state p {
-    margin-bottom: 20px;
-    color: var(--text-dark);
-}
+.loading-state p { margin-bottom: 20px; color: var(--text-dark); }
 
 .progress-bar {
     width: 100%;
@@ -1501,259 +1801,10 @@ body {
     height: 100%;
     background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
     border-radius: 3px;
-    transition: width 0.3s ease;}
-
-.search-hint p {
-    margin-bottom: 15px;
-    font-weight: 500;
+    transition: width 0.3s ease;
 }
 
-.search-hint ul {
-    list-style: none;
-    text-align: left;
-    max-width: 400px;
-    margin: 0 auto;
-}
-
-.search-hint li {
-    margin-bottom: 10px;
-    padding-left: 0;
-}
-
-.search-hint .btn-primary {
-    margin-top: 10px;
-    padding: 8px 16px;
-    font-size: 0.9rem;
-}
-
-/* 响应式媒体查询 - 移动端优化 */
-@media (max-width: 1024px) {
-    .container {
-        padding: 25px 15px;
-    }
-    
-    .header {
-        margin-bottom: 40px;
-    }
-    
-    .header h1 {
-        font-size: 2.5rem;
-    }
-    
-    .header p {
-        font-size: 1.1rem;
-    }
-    
-    .albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        gap: 25px;
-    }
-    
-    .album-cover {
-        height: 200px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 20px 15px;
-    }
-    
-    .header {
-        margin-bottom: 30px;
-    }
-    
-    .header h1 {
-        font-size: 2rem;
-    }
-    
-    .header p {
-        font-size: 1rem;
-    }
-    
-    .search-container {
-        margin-bottom: 40px;
-    }
-    
-    .search-box input {
-        padding: 16px 55px 16px 20px;
-        font-size: 16px;
-    }
-    
-    .search-box button {
-        width: 36px;
-        height: 36px;
-        font-size: 16px;
-    }
-    
-    .action-buttons {
-        gap: 12px;
-        margin-top: 15px;
-    }
-    
-    .random-button, .favorites-button {
-        padding: 10px 20px;
-        font-size: 0.9rem;
-    }
-    
-    .stats {
-        font-size: 1rem;
-        padding: 15px;
-        margin-bottom: 30px;
-    }
-    
-    .albums-grid {
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 20px;
-    }
-    
-    .album-card {
-        border-radius: var(--border-radius);
-    }
-    
-    .album-cover {
-        height: 180px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .album-info {
-        padding: 20px;
-    }
-    
-    .album-info h3 {
-        font-size: 1.2rem;
-    }
-    
-    .album-meta {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 8px;
-    }
-}
-
-@media (max-width: 480px) {
-    .container {
-        padding: 15px 10px;
-    }
-    
-    .header {
-        margin-bottom: 25px;
-    }
-    
-    .header h1 {
-        font-size: 1.8rem;
-    }
-    
-    .header p {
-        font-size: 0.9rem;
-    }
-    
-    .search-container {
-        margin-bottom: 30px;
-    }
-    
-    .search-box {
-        max-width: 100%;
-    }
-    
-    .search-box input {
-        padding: 14px 50px 14px 18px;
-        font-size: 14px;
-    }
-    
-    .search-box button {
-        width: 32px;
-        height: 32px;
-        font-size: 14px;
-        right: 10px;
-    }
-    
-    .action-buttons {
-        gap: 10px;
-        margin-top: 12px;
-    }
-    
-    .random-button, .favorites-button {
-        padding: 8px 16px;
-        font-size: 0.85rem;
-    }
-    
-    .stats {
-        font-size: 0.9rem;
-        padding: 12px;
-        margin-bottom: 25px;
-    }
-    
-    .albums-grid {
-        grid-template-columns: 1fr;
-        gap: 15px;
-    }
-    
-    .album-cover {
-        height: 160px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    .album-info {
-        padding: 15px;
-    }
-    
-    .album-info h3 {
-        font-size: 1.1rem;
-    }
-    
-    .album-meta {
-        font-size: 0.8rem;
-    }
-    
-    .loading {
-        padding: 40px 15px;
-        font-size: 1rem;
-    }
-    
-    .loading .fa-spinner {
-        font-size: 1.5rem;
-    }
-    
-    .no-results {
-        padding: 40px 15px;
-        font-size: 1rem;
-    }
-    
-    .no-results .fa-search {
-        font-size: 2.5rem;
-    }
-}
-
-/* 触摸设备优化 */
-@media (hover: none) and (pointer: coarse) {
-    .album-card:hover {
-        transform: none;
-        box-shadow: var(--shadow-lg);
-    }
-    
-    .album-card:active {
-        transform: scale(0.98);
-        box-shadow: var(--shadow-md);
-    }
-}
-
-/* 高分辨率屏幕优化 */
-@media (min-resolution: 2dppx) {
-    .album-cover img {
-        image-rendering: -webkit-optimize-contrast;
-        image-rendering: crisp-edges;
-    }
-}
-
-/* 分页加载样式 */
+/* 分页加载 */
 .loading-more {
     text-align: center;
     padding: 40px 20px;
@@ -1797,53 +1848,180 @@ body {
     font-size: 1rem;
 }
 
-.error-content .fa-exclamation-triangle {
-    font-size: 1.2rem;
+.error-content .fa-exclamation-triangle { font-size: 1.2rem; }
+.error-content a { color: var(--primary-blue); text-decoration: underline; cursor: pointer; }
+.error-content a:hover { color: var(--secondary-blue); }
+
+/* ============ 响应式设计 ============ */
+
+/* 桌面端：侧边栏折叠 */
+@media (max-width: 1199px) {
+    .content-area { padding: var(--spacer-xl); }
+    
+    .stats-bar {
+        gap: var(--spacer-lg);
+        padding: var(--spacer-lg);
+    }
+    
+    .stat-value { font-size: 1.2rem; }
 }
 
-.error-content a {
-    color: var(--primary-blue);
-    text-decoration: underline;
-    cursor: pointer;
+/* 平板端 */
+@media (max-width: 1024px) {
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        transform: translateX(-100%);
+        box-shadow: var(--shadow-xl);
+    }
+    
+    .sidebar.mobile-open {
+        transform: translateX(0);
+    }
+    
+    .mobile-menu-btn {
+        display: flex;
+    }
+    
+    .topbar { padding: 0 var(--spacer-lg); }
+    
+    .content-area { padding: var(--spacer-lg); }
+    
+    .stats-bar {
+        flex-wrap: wrap;
+        gap: var(--spacer-md);
+    }
+    
+    .stat-divider:nth-of-type(2) { display: none; }
+    
+    .albums-grid {
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+        gap: 20px;
+    }
+    
+    .album-cover { height: 200px; }
 }
 
-.error-content a:hover {
-    color: var(--secondary-blue);
-}
-
-/* 移动端分页样式优化 */
+/* 手机端 */
 @media (max-width: 768px) {
-    .loading-more {
-        padding: 30px 15px;
-        margin: 15px 0;
+    :root {
+        --topbar-height: 56px;
     }
     
-    .loading-spinner {
+    .topbar {
+        padding: 0 var(--spacer-md);
+        gap: var(--spacer-sm);
+    }
+    
+    .search-bar input {
+        padding: 10px var(--spacer-2xl);
         font-size: 0.9rem;
-        gap: 10px;
     }
     
-    .load-more-error {
-        padding: 25px 15px;
-        margin: 15px 0;
-    }
-    
-    .error-content {
-        font-size: 0.9rem;
-        flex-direction: column;
-        gap: 8px;
-    }
-}
-
-/* 打印样式 */
-@media print {
-    .search-container {
+    .topbar-actions .action-btn:nth-child(1) {
         display: none;
     }
     
-    .album-card {
-        break-inside: avoid;
-        box-shadow: none;
-        border: 1px solid #ccc;
+    .content-area { padding: var(--spacer-md); }
+    
+    .stats-bar {
+        padding: var(--spacer-md);
+        gap: var(--spacer-sm);
+        margin-bottom: var(--spacer-lg);
     }
-}
\ No newline at end of file
+    
+    .stat-icon {
+        width: 30px;
+        height: 30px;
+        font-size: 0.85rem;
+    }
+    
+    .stat-value { font-size: 1rem; }
+    .stat-label { font-size: 0.8rem; }
+    .stat-divider { height: 28px; }
+    
+    .people-strip {
+        padding: var(--spacer-sm) var(--spacer-md);
+        gap: var(--spacer-md);
+        margin-bottom: var(--spacer-lg);
+    }
+    
+    .people-strip-header {
+        font-size: 0.8rem;
+        padding-right: var(--spacer-md);
+    }
+    
+    .people-scroll-hint { display: none; }
+    
+    .albums-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        margin-bottom: 20px;
+    }
+    
+    .album-cover { height: 140px; }
+    .album-info { padding: 10px; gap: 4px; }
+    .album-info h3 { font-size: 0.85rem; -webkit-line-clamp: 2; }
+    .album-meta { font-size: 0.75rem; flex-direction: column; align-items: flex-start; gap: 2px; }
+    
+    .filter-bar {
+        padding: var(--spacer-sm) var(--spacer-md);
+        flex-wrap: wrap;
+        gap: var(--spacer-sm);
+    }
+    
+    .filter-indicator { font-size: 0.8rem; }
+    .filter-pill { font-size: 0.8rem; padding: 3px 10px; }
+    .filter-remove { font-size: 0.8rem; padding: var(--spacer-xs) var(--spacer-md); }
+}
+
+/* 小屏手机 */
+@media (max-width: 480px) {
+    .albums-grid {
+        grid-template-columns: 1fr;
+        gap: 16px;
+    }
+    
+    .album-cover { height: 180px; }
+    .album-info { padding: 14px; }
+    .album-info h3 { font-size: 1rem; }
+    .album-meta { font-size: 0.85rem; }
+    
+    .stats-bar {
+        flex-direction: column;
+        gap: var(--spacer-sm);
+    }
+    
+    .stat-divider {
+        width: 60%;
+        height: 1px;
+    }
+}
+
+/* 触摸设备优化 */
+@media (hover: none) and (pointer: coarse) {
+    .album-card:hover {
+        transform: none;
+        box-shadow: var(--shadow-sm);
+    }
+    
+    .album-card:active {
+        transform: scale(0.98);
+        box-shadow: var(--shadow-md);
+    }
+    
+    .nav-item:hover { background: transparent; }
+    .nav-item:active { background: var(--bg-hover); }
+    
+    .sidebar-tag:hover { background: transparent; }
+    .sidebar-tag:active { background: var(--bg-hover); }
+}
+
+/* 高分辨率屏幕优化 */
+@media (min-resolution: 2dppx) {
+    .album-cover img {
+        image-rendering: -webkit-optimize-contrast;
+        image-rendering: crisp-edges;
+    }
+}
diff --git a/assets/index.html b/assets/index.html
index e884a2f..f4f5421 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -8,72 +8,150 @@
     <link rel="stylesheet" href="/assets/css/style.css">
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1><i class="fas fa-images"></i> <span>流云图库</span></h1>
-            <p>发现精彩瞬间，浏览精美图片</p>
-        </div>
-        
-        <div class="search-container">
-            <div class="search-box">
-                <label for="search-input"></label><input type="text" id="search-input" placeholder="搜索图片标题...">
-                <button onclick="searchAlbums()"><i class="fas fa-search"></i></button>
-            </div>
-            
-            <div class="action-buttons">
-                <button class="random-button" onclick="openRandomAlbum()">
-                    <i class="fas fa-random"></i> 随机相册
-                </button>
-                <button class="favorites-button" onclick="showFavorites()">
-                    <i class="fas fa-heart"></i> 收藏夹
-                </button>
-            </div>
-        </div>
-        
-        <div class="stats" id="stats">
-            正在加载相册数据...
-        </div>
+    <div class="app-layout">
 
-        <!-- 热门人物区域 -->
-        <div class="discover-section" id="people-section" style="display:none;">
-            <div class="section-header">
-                <h3><i class="fas fa-users"></i> 热门人物</h3>
-                <button class="section-toggle" onclick="toggleSection('people')">
-                    <i class="fas fa-chevron-up"></i>
+        <!-- ============ 左侧边栏（可折叠） ============ -->
+        <aside class="sidebar" id="sidebar">
+            <!-- Logo 区域 -->
+            <div class="sidebar-brand">
+                <div class="brand-icon"><i class="fas fa-images"></i></div>
+                <div class="brand-text">流云图库</div>
+            </div>
+
+            <!-- 导航菜单 -->
+            <nav class="sidebar-nav">
+                <div class="nav-item active" data-view="home" onclick="switchView('home')">
+                    <i class="fas fa-home"></i>
+                    <span>首页</span>
+                </div>
+                <div class="nav-item" data-view="favorites" onclick="showFavorites()">
+                    <i class="fas fa-heart"></i>
+                    <span>收藏夹</span>
+                </div>
+                <div class="nav-item" onclick="openRandomAlbum()">
+                    <i class="fas fa-random"></i>
+                    <span>随机相册</span>
+                </div>
+            </nav>
+
+            <!-- 分隔线 -->
+            <div class="sidebar-divider"></div>
+
+            <!-- 热门标签 -->
+            <div class="sidebar-section">
+                <div class="sidebar-section-title">
+                    <i class="fas fa-tags"></i>
+                    <span>热门标签</span>
+                </div>
+                <div class="sidebar-tags" id="sidebar-tags">
+                    <!-- 动态填充 -->
+                </div>
+            </div>
+
+            <!-- 底部折叠按钮 -->
+            <div class="sidebar-footer">
+                <button class="collapse-btn" onclick="toggleSidebar()" id="collapse-btn">
+                    <i class="fas fa-chevron-left"></i>
+                    <span>收起侧边栏</span>
                 </button>
             </div>
-            <div class="people-cloud" id="people-cloud">
-                <!-- 动态填充 -->
-            </div>
-        </div>
+        </aside>
 
-        <!-- 热门标签区域 -->
-        <div class="discover-section" id="tags-section" style="display:none;">
-            <div class="section-header">
-                <h3><i class="fas fa-tags"></i> 热门标签</h3>
-                <button class="section-toggle" onclick="toggleSection('tags')">
-                    <i class="fas fa-chevron-up"></i>
+        <!-- ============ 主内容区 ============ -->
+        <main class="main-content">
+
+            <!-- 顶部工具栏 -->
+            <header class="topbar">
+                <!-- 移动端菜单按钮 -->
+                <button class="mobile-menu-btn" onclick="toggleMobileSidebar()">
+                    <i class="fas fa-bars"></i>
+                </button>
+
+                <!-- 搜索框 -->
+                <div class="search-bar">
+                    <i class="fas fa-search search-icon"></i>
+                    <label for="search-input"></label>
+                    <input type="text" id="search-input" placeholder="搜索相册标题、人物、标签..." onkeydown="if(event.key==='Enter') searchAlbums()">
+                    <button class="search-clear" id="search-clear" onclick="clearSearch()" style="display:none;">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+
+                <!-- 右侧快捷按钮 -->
+                <div class="topbar-actions">
+                    <button class="action-btn" onclick="openRandomAlbum()" title="随机相册">
+                        <i class="fas fa-random"></i>
+                    </button>
+                    <button class="action-btn" onclick="showFavorites()" title="收藏夹">
+                        <i class="fas fa-heart"></i>
+                    </button>
+                </div>
+            </header>
+
+            <!-- 筛选状态条 -->
+            <div class="filter-bar" id="filter-bar" style="display:none;">
+                <span class="filter-indicator">
+                    <i class="fas fa-filter"></i>
+                    当前筛选:
+                </span>
+                <span class="filter-pill" id="current-filter-pill"></span>
+                <button class="filter-remove" onclick="clearFilter()">
+                    <i class="fas fa-times"></i>
                 </button>
             </div>
-            <div class="tag-cloud" id="tag-cloud">
-                <!-- 动态填充 -->
-            </div>
-        </div>
 
-        <!-- 当前筛选状态 -->
-        <div class="filter-status" id="filter-status" style="display:none;">
-            <span class="filter-label">当前筛选:</span>
-            <span class="filter-tag" id="current-filter"></span>
-            <button class="filter-clear" onclick="clearFilter()"><i class="fas fa-times"></i> 清除</button>
-        </div>
-        
-        <div class="albums-grid" id="albums-container">
-            <div class="loading">
-                <i class="fas fa-spinner fa-spin"></i><br>加载中...
+            <!-- 内容区域 -->
+            <div class="content-area">
+
+                <!-- 统计条 -->
+                <div class="stats-bar" id="stats-bar">
+                    <div class="stat-item">
+                        <span class="stat-icon"><i class="fas fa-folder-open"></i></span>
+                        <span class="stat-value" id="stat-albums">0</span>
+                        <span class="stat-label">个相册</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-icon"><i class="fas fa-image"></i></span>
+                        <span class="stat-value" id="stat-images">0</span>
+                        <span class="stat-label">张图片</span>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <span class="stat-icon"><i class="fas fa-user"></i></span>
+                        <span class="stat-value" id="stat-people">0</span>
+                        <span class="stat-label">位人物</span>
+                    </div>
+                </div>
+
+                <!-- 热门人物横向滚动条 -->
+                <div class="people-strip" id="people-strip" style="display:none;">
+                    <div class="people-strip-header">
+                        <i class="fas fa-users"></i>
+                        <span>热门人物</span>
+                    </div>
+                    <div class="people-scroll" id="people-scroll">
+                        <!-- 动态填充 -->
+                    </div>
+                    <div class="people-scroll-hint">
+                        <i class="fas fa-chevron-right"></i>
+                    </div>
+                </div>
+
+                <!-- 相册网格 -->
+                <div class="albums-grid" id="albums-container">
+                    <div class="loading">
+                        <i class="fas fa-spinner fa-spin"></i><br>加载中...
+                    </div>
+                </div>
+
             </div>
-        </div>
+        </main>
     </div>
-    
-    <script src="/assets/js/app.js?v=4"></script>
+
+    <!-- 移动端遮罩 -->
+    <div class="mobile-overlay" id="mobile-overlay" onclick="toggleMobileSidebar()"></div>
+
+    <script src="/assets/js/app.js?v=5"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/assets/js/album.js b/assets/js/album.js
index fa82e20..6eaf549 100644
--- a/assets/js/album.js
+++ b/assets/js/album.js
@@ -271,6 +271,51 @@ function updateAlbumInfo() {
     document.title = `${currentAlbum.title} - 图片展示服务`;
 }
 
+// 标签分类映射（与后端 tag_extractor.rs 保持一致）
+const TAG_CATEGORIES = {
+    style: ['日系', '韩系', '森系', '复古', '甜美', '性感', '清新', '冷艳',
+            '优雅', '知性', '可爱', '俏皮', '温柔', '妩媚', '野性', '清纯',
+            '时尚', '潮流', '街头', '学院', '文艺', '古典', '民族', '异域',
+            'japanese', 'korean', 'retro', 'vintage', 'cute', 'sexy',
+            'elegant', 'fresh', 'sweet', 'wild', 'pure', 'fashion'],
+    outfit: ['比基尼', '泳装', '泳衣', '旗袍', '制服', '丝袜', '内衣', '文胸',
+             '包臀裙', '紧身裙', '超短裙', '连衣裙', '半身裙', '短裙', '长裙',
+             '牛仔裤', '热裤', '短裤', '休闲裤', '西装裤',
+             'T恤', '衬衫', '毛衣', '针织衫', '外套', '风衣', '大衣', '西装',
+             '吊带', '抹胸', '露背', '透视', '蕾丝', '镂空', '开叉',
+             '高跟鞋', '运动鞋', '凉鞋', '拖鞋', '靴子',
+             'bikini', 'swimsuit', 'stockings', 'lingerie', 'dress',
+             'skirt', 'jeans', 'shirt', 'sweater', 'coat', 'heels'],
+    scene: ['室内', '户外', '街拍', '浴室', '浴缸', '床上', '床照', '沙发',
+            '厨房', '阳台', '窗边', '楼梯', '走廊', '电梯', '车内', '驾驶座',
+            '海边', '沙滩', '泳池', '温泉', '森林', '草地', '花园', '公园',
+            '街道', '巷弄', '建筑', '天台', '屋顶', '咖啡馆', '餐厅', '酒店',
+            'indoor', 'outdoor', 'street', 'beach', 'pool', 'bathroom',
+            'bedroom', 'kitchen', 'balcony', 'car', 'cafe', 'hotel'],
+    body: ['美腿', '美胸', '翘臀', '玉足', '美背', '香肩', '蛮腰', '细腰',
+           '长腿', '酥胸', '丰臀', '白皙', '肌肤', '纹身',
+           'legs', 'breasts', 'ass', 'feet', 'back', 'shoulders', 'waist',
+           'skin', 'tattoo'],
+    mood: ['清纯', '诱惑', '唯美', '清新', '冷艳', '妩媚', '娇羞', '俏皮',
+           '温柔', '野性', '冷傲', '热情', '慵懒', '迷离', '甜美', '知性',
+           'pure', 'seductive', 'beautiful', 'fresh', 'cool', 'charming',
+           'shy', 'cute', 'gentle', 'wild', 'lazy', 'sweet'],
+    topic: ['写真', '私房', '街拍', '旅拍', '婚纱照', '艺术照', '生活照',
+            '自拍', '跟拍', '约拍', '商拍',
+            'photoshoot', 'portrait', 'selfie', 'travel', 'wedding'],
+};
+
+// 获取标签的分类
+function getTagCategory(tag) {
+    const tagLower = tag.toLowerCase();
+    for (const [category, tags] of Object.entries(TAG_CATEGORIES)) {
+        if (tags.some(t => t.toLowerCase() === tagLower)) {
+            return category;
+        }
+    }
+    return 'default';
+}
+
 // 更新相册元数据（人名 + 标签）点击可搜索
 function updateAlbumMeta() {
     const metaContainer = document.getElementById('album-meta-tags');
@@ -283,36 +328,46 @@ function updateAlbumMeta() {
         chips.push({
             text: currentAlbum.person_name_cleaned,
             type: 'person',
+            category: 'person',
             query: currentAlbum.person_name_cleaned
         });
     }
     
-    // 添加标签
+    // 添加标签（支持多种格式）
     if (currentAlbum.tags) {
+        let tagList = [];
         try {
-            const tags = JSON.parse(currentAlbum.tags);
-            if (Array.isArray(tags)) {
-                tags.forEach(tag => {
-                    chips.push({
-                        text: tag,
-                        type: 'tag',
-                        query: tag
-                    });
+            // 格式1: JSON数组 [["标签名", "分类"], ...]
+            const parsed = JSON.parse(currentAlbum.tags);
+            if (Array.isArray(parsed)) {
+                parsed.forEach(item => {
+                    if (Array.isArray(item)) {
+                        tagList.push({ text: item[0], category: item[1] || 'default' });
+                    } else if (typeof item === 'string') {
+                        tagList.push({ text: item, category: getTagCategory(item) });
+                    } else if (item.tag || item.name) {
+                        const t = item.tag || item.name;
+                        const c = item.category || item.type || getTagCategory(t);
+                        tagList.push({ text: t, category: c });
+                    }
                 });
             }
         } catch (e) {
-            // 非JSON格式，当作逗号分隔
+            // 格式2: 逗号分隔字符串
             currentAlbum.tags.split(',').forEach(tag => {
                 const t = tag.trim();
-                if (t) {
-                    chips.push({
-                        text: t,
-                        type: 'tag',
-                        query: t
-                    });
-                }
+                if (t) tagList.push({ text: t, category: getTagCategory(t) });
             });
         }
+        
+        tagList.forEach(t => {
+            chips.push({
+                text: t.text,
+                type: 'tag',
+                category: t.category,
+                query: t.text
+            });
+        });
     }
     
     if (chips.length === 0) {
@@ -323,7 +378,9 @@ function updateAlbumMeta() {
     metaContainer.style.display = 'flex';
     metaContainer.innerHTML = chips.map(chip => {
         const icon = chip.type === 'person' ? 'fa-user' : 'fa-tag';
-        return `<span class="meta-chip meta-chip-${chip.type}" data-meta-type="${chip.type}" data-meta-query="${encodeURIComponent(chip.query)}">
+        // 生成 CSS 类名：人物用 person，标签用 tag-{category}
+        const cssClass = chip.type === 'person' ? 'meta-chip-person' : `meta-chip-tag-${chip.category || 'default'}`;
+        return `<span class="meta-chip ${cssClass}" data-meta-type="${chip.type}" data-meta-query="${encodeURIComponent(chip.query)}">
             <i class="fas ${icon}"></i> ${chip.text}
         </span>`;
     }).join('');
diff --git a/assets/js/app.js b/assets/js/app.js
index 975fa60..c2bd661 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -14,6 +14,9 @@ let isInFavoritesPage = false; // 标记当前是否在收藏页
 let currentFilter = null; // { type: 'tag'|'person', value: string }
 let collapsedSections = { people: false, tags: false };
 
+// 侧边栏状态（持久化）
+let sidebarCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
+
 // API基础URL
 const API_BASE = '/api';
 
@@ -622,14 +625,32 @@ function updateStats(albums) {
         albums = allAlbums;
     }
     const totalImages = albums.reduce((sum, album) => sum + album.image_count, 0);
-    document.getElementById('stats').innerHTML = `共发现 ${albums.length} 个相册，包含 ${totalImages} 张图片`;
+    
+    // 更新统计条
+    const statAlbums = document.getElementById('stat-albums');
+    const statImages = document.getElementById('stat-images');
+    if (statAlbums) statAlbums.textContent = albums.length.toLocaleString();
+    if (statImages) statImages.textContent = totalImages.toLocaleString();
+    
+    // 兼容旧版 stats
+    const oldStats = document.getElementById('stats');
+    if (oldStats) oldStats.innerHTML = `共发现 ${albums.length} 个相册，包含 ${totalImages} 张图片`;
+    
+    // 获取人物数量
+    fetch(`${API_BASE}/recommend/popular-persons?limit=1`).then(r => r.ok && r.json()).then(data => {
+        if (data && data.length > 0 && data[0].total) {
+            const statPeople = document.getElementById('stat-people');
+            if (statPeople) statPeople.textContent = data[0].total.toLocaleString();
+        }
+    }).catch(() => {});
 }
 
 // 显示错误信息
 function showError(message) {
     const container = document.getElementById('albums-container');
     container.innerHTML = `<div class="no-results"><i class="fas fa-exclamation-triangle"></i><br>${message}</div>`;
-    document.getElementById('stats').innerHTML = '';
+    const oldStats = document.getElementById('stats');
+    if (oldStats) oldStats.innerHTML = '';
 }
 
 // 搜索相册函数
@@ -1237,64 +1258,92 @@ async function loadDiscoverData() {
     }
 }
 
-// 渲染标签云
+// 渲染标签（侧边栏列表）
 function renderTagCloud(tags) {
+    // 新版：侧边栏标签列表
+    const sidebarTags = document.getElementById('sidebar-tags');
+    if (sidebarTags && tags && tags.length) {
+        sidebarTags.innerHTML = tags.slice(0, 25).map(tag => {
+            const count = tag.album_cnt || tag.count || 1;
+            const name = tag.tag || tag.name || '';
+            const isActive = currentFilter && currentFilter.type === 'tag' && currentFilter.value === name;
+            return `<div class="sidebar-tag ${isActive ? 'active' : ''}" onclick="filterByTag('${name}')">
+                <span class="sidebar-tag-name">${name}</span>
+                <span class="sidebar-tag-count">${count}</span>
+            </div>`;
+        }).join('');
+    }
+
+    // 兼容旧版：标签云区域
     const section = document.getElementById('tags-section');
     const cloud = document.getElementById('tag-cloud');
-    if (!section || !cloud || !tags.length) return;
-
-    section.style.display = 'block';
-
-    // 计算标签大小范围
-    const maxCount = Math.max(...tags.map(t => t.album_cnt || t.count || 1));
-    const minCount = Math.min(...tags.map(t => t.album_cnt || t.count || 1));
-
-    cloud.innerHTML = tags.map(tag => {
-        const count = tag.album_cnt || tag.count || 1;
-        const name = tag.tag || tag.name || '';
-        // 计算字体大小 (12px - 22px)
-        const ratio = maxCount === minCount ? 0.5 : (count - minCount) / (maxCount - minCount);
-        const fontSize = 12 + ratio * 10;
-        // 计算热度颜色
-        const hue = 210 - ratio * 50; // 蓝色到紫色
-        const opacity = 0.6 + ratio * 0.4;
-
-        return `<span class="tag-chip" 
-            style="font-size:${fontSize}px; color:hsl(${hue}, 70%, 45%); opacity:${opacity};"
-            onclick="filterByTag('${name}')" 
-            title="${count} 个相册">
-            ${name} <small>(${count})</small>
-        </span>`;
-    }).join('');
+    if (section && cloud && tags && tags.length) {
+        section.style.display = 'block';
+        const maxCount = Math.max(...tags.map(t => t.album_cnt || t.count || 1));
+        const minCount = Math.min(...tags.map(t => t.album_cnt || t.count || 1));
+        cloud.innerHTML = tags.map(tag => {
+            const count = tag.album_cnt || tag.count || 1;
+            const name = tag.tag || tag.name || '';
+            const ratio = maxCount === minCount ? 0.5 : (count - minCount) / (maxCount - minCount);
+            const fontSize = 12 + ratio * 10;
+            const hue = 210 - ratio * 50;
+            const opacity = 0.6 + ratio * 0.4;
+            return `<span class="tag-chip" 
+                style="font-size:${fontSize}px; color:hsl(${hue}, 70%, 45%); opacity:${opacity};"
+                onclick="filterByTag('${name}')" 
+                title="${count} 个相册">
+                ${name} <small>(${count})</small>
+            </span>`;
+        }).join('');
+    }
 }
 
-// 渲染热门人物
+// 渲染热门人物（横向滚动条）
 function renderPeopleCloud(people) {
+    // 新版：横向滚动条
+    const strip = document.getElementById('people-strip');
+    const scroll = document.getElementById('people-scroll');
+    if (strip && scroll && people && people.length) {
+        strip.style.display = 'flex';
+        scroll.innerHTML = people.slice(0, 20).map(p => {
+            const name = p.name || p.display_name || '';
+            const albumCount = p.total_albums || 0;
+            const isActive = currentFilter && currentFilter.type === 'person' && currentFilter.value === name;
+            return `<div class="person-chip-scroll ${isActive ? 'active' : ''}" onclick="filterByPerson('${name}')" title="${albumCount} 个相册">
+                <div class="person-chip-avatar">${name.charAt(0)}</div>
+                <div class="person-chip-info">
+                    <div class="person-chip-name">${name}</div>
+                    <div class="person-chip-count">${albumCount} 相册</div>
+                </div>
+            </div>`;
+        }).join('');
+    }
+
+    // 兼容旧版：人物卡片区域
     const section = document.getElementById('people-section');
     const cloud = document.getElementById('people-cloud');
-    if (!section || !cloud || !people.length) return;
-
-    section.style.display = 'block';
-
-    cloud.innerHTML = people.map(p => {
-        const name = p.name || p.display_name || '';
-        const albumCount = p.total_albums || 0;
-        const imageCount = p.total_images || 0;
-
-        return `<div class="person-chip" onclick="filterByPerson('${name}')" title="${albumCount} 个相册, ${imageCount} 张图片">
-            <div class="person-avatar">${name.charAt(0)}</div>
-            <div class="person-info">
-                <div class="person-name">${name}</div>
-                <div class="person-meta">${albumCount} 相册 · ${imageCount} 图</div>
-            </div>
-        </div>`;
-    }).join('');
+    if (section && cloud && people && people.length) {
+        section.style.display = 'block';
+        cloud.innerHTML = people.map(p => {
+            const name = p.name || p.display_name || '';
+            const albumCount = p.total_albums || 0;
+            const imageCount = p.total_images || 0;
+            return `<div class="person-chip" onclick="filterByPerson('${name}')" title="${albumCount} 个相册, ${imageCount} 张图片">
+                <div class="person-avatar">${name.charAt(0)}</div>
+                <div class="person-info">
+                    <div class="person-name">${name}</div>
+                    <div class="person-meta">${albumCount} 相册 · ${imageCount} 图</div>
+                </div>
+            </div>`;
+        }).join('');
+    }
 }
 
 // 按标签筛选
 async function filterByTag(tag) {
     currentFilter = { type: 'tag', value: tag };
     showFilterStatus(`标签: ${tag}`);
+    renderTagCloud(await fetchTags().catch(() => []));
 
     try {
         showSkeleton(6);
@@ -1311,6 +1360,13 @@ async function filterByTag(tag) {
     }
 }
 
+// 获取标签（辅助函数）
+async function fetchTags() {
+    const resp = await fetch(`${API_BASE}/tags/popular?limit=25`);
+    if (!resp.ok) return [];
+    return resp.json();
+}
+
 // 按人物筛选
 async function filterByPerson(personName) {
     currentFilter = { type: 'person', value: personName };
@@ -1323,8 +1379,6 @@ async function filterByPerson(personName) {
         const persons = await response.json();
 
         if (persons && persons.length > 0) {
-            // 先尝试通过人物详情获取相册
-            const personId = persons[0].id;
             try {
                 const detailResp = await fetch(`${API_BASE}/people/${encodeURIComponent(personName)}`);
                 if (detailResp.ok) {
@@ -1336,22 +1390,26 @@ async function filterByPerson(personName) {
                         return;
                     }
                 }
-            } catch (e) {
-                // 回退到标题搜索
-            }
+            } catch (e) { /* 回退 */ }
         }
-
-        // 回退：使用标题搜索
         await performServerSearch(personName);
     } catch (error) {
         console.error('人物筛选失败:', error);
-        // 回退到标题搜索
         await performServerSearch(personName);
     }
 }
 
 // 显示筛选状态
 function showFilterStatus(text) {
+    // 新版筛选条
+    const bar = document.getElementById('filter-bar');
+    const pill = document.getElementById('current-filter-pill');
+    if (bar && pill) {
+        pill.textContent = text;
+        bar.style.display = 'flex';
+    }
+
+    // 兼容旧版
     const status = document.getElementById('filter-status');
     const label = document.getElementById('current-filter');
     if (status && label) {
@@ -1363,24 +1421,104 @@ function showFilterStatus(text) {
 // 清除筛选
 function clearFilter() {
     currentFilter = null;
+
+    // 新版筛选条
+    const bar = document.getElementById('filter-bar');
+    if (bar) bar.style.display = 'none';
+
+    // 兼容旧版
     const status = document.getElementById('filter-status');
     if (status) status.style.display = 'none';
 
     // 清空搜索框
     const searchInput = document.getElementById('search-input');
-    if (searchInput) searchInput.value = '';
+    if (searchInput) {
+        searchInput.value = '';
+        updateSearchClear();
+    }
+
+    // 重新渲染标签和人物（清除高亮）
+    loadDiscoverData();
 
     // 重新加载所有相册
     loadAlbums(true);
 }
 
-// 折叠/展开区域
+// ============ 侧边栏交互 ============
+
+// 初始化侧边栏状态
+function initSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    if (sidebar && sidebarCollapsed) {
+        sidebar.classList.add('collapsed');
+    }
+}
+
+// 切换侧边栏折叠
+function toggleSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    if (!sidebar) return;
+    sidebarCollapsed = !sidebarCollapsed;
+    sidebar.classList.toggle('collapsed', sidebarCollapsed);
+    localStorage.setItem('sidebarCollapsed', sidebarCollapsed);
+}
+
+// 移动端切换侧边栏
+function toggleMobileSidebar() {
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.getElementById('mobile-overlay');
+    if (!sidebar || !overlay) return;
+    sidebar.classList.toggle('mobile-open');
+    overlay.classList.toggle('active');
+}
+
+// 切换视图（首页/收藏夹）
+function switchView(view) {
+    // 更新导航高亮
+    document.querySelectorAll('.nav-item').forEach(item => {
+        item.classList.toggle('active', item.dataset.view === view);
+    });
+
+    // 移动端关闭侧边栏
+    const sidebar = document.getElementById('sidebar');
+    const overlay = document.getElementById('mobile-overlay');
+    if (sidebar && sidebar.classList.contains('mobile-open')) {
+        sidebar.classList.remove('mobile-open');
+        overlay.classList.remove('active');
+    }
+
+    if (view === 'home') {
+        backToHome();
+    }
+}
+
+// 搜索框清除按钮
+function updateSearchClear() {
+    const input = document.getElementById('search-input');
+    const clear = document.getElementById('search-clear');
+    if (input && clear) {
+        clear.style.display = input.value.length > 0 ? 'flex' : 'none';
+    }
+}
+
+// 清除搜索
+function clearSearch() {
+    const input = document.getElementById('search-input');
+    if (input) {
+        input.value = '';
+        updateSearchClear();
+        if (!currentFilter) {
+            loadAlbums(true);
+        }
+    }
+}
+
+// 折叠/展开区域（兼容旧版）
 function toggleSection(name) {
     collapsedSections[name] = !collapsedSections[name];
     const cloudId = name === 'people' ? 'people-cloud' : 'tag-cloud';
     const cloud = document.getElementById(cloudId);
     const btn = document.querySelector(`#${name}-section .section-toggle i`);
-
     if (cloud) {
         if (collapsedSections[name]) {
             cloud.style.display = 'none';
@@ -1392,6 +1530,24 @@ function toggleSection(name) {
     }
 }
 
+// ============ 初始化 ============
+document.addEventListener('DOMContentLoaded', function() {
+    initSidebar();
+
+    // 搜索框输入事件
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', updateSearchClear);
+    }
+
+    // 键盘快捷键：ESC 关闭筛选/搜索
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+            if (currentFilter) clearFilter();
+        }
+    });
+});
+
 // 导出函数供全局使用
 window.searchAlbums = searchAlbums;
 window.openRandomAlbum = openRandomAlbum;
@@ -1406,4 +1562,8 @@ window.removeFavoriteFromPreview = removeFavoriteFromPreview;
 window.filterByTag = filterByTag;
 window.filterByPerson = filterByPerson;
 window.clearFilter = clearFilter;
-window.toggleSection = toggleSection;
\ No newline at end of file
+window.toggleSection = toggleSection;
+window.toggleSidebar = toggleSidebar;
+window.toggleMobileSidebar = toggleMobileSidebar;
+window.switchView = switchView;
+window.clearSearch = clearSearch;
\ No newline at end of file
diff --git a/src/db/metadata.rs b/src/db/metadata.rs
index 3c48ea8..9a05a82 100644
--- a/src/db/metadata.rs
+++ b/src/db/metadata.rs
@@ -171,6 +171,42 @@ impl Database {
         sqlx::query("DELETE FROM person_albums WHERE person_id = ?").bind(person_id).execute(&self.pool).await.ok();
     }
 
+    /// 把 src_id 的所有相册关联、别名移动到 dst_id，然后删除 src_id
+    pub async fn merge_person_into(&self, src_id: i64, dst_id: i64) {
+        // 1. 移动相册关联
+        sqlx::query("INSERT OR IGNORE INTO person_albums (person_id, album_id) SELECT ?, album_id FROM person_albums WHERE person_id = ?")
+            .bind(dst_id).bind(src_id).execute(&self.pool).await.ok();
+
+        // 2. 移动别名
+        sqlx::query("INSERT OR IGNORE INTO person_aliases (person_id, alias_type, alias_name) SELECT ?, alias_type, alias_name FROM person_aliases WHERE person_id = ?")
+            .bind(dst_id).bind(src_id).execute(&self.pool).await.ok();
+
+        // 3. 把 src 的原名也作为别名加入 dst
+        if let Some(src_person) = self.get_person_by_id(src_id).await {
+            // 原始名作为别名
+            self.insert_person_alias(dst_id, "merged_original", &src_person.name).await;
+            // 如果有 display_name 也作为别名
+            if let Some(dn) = &src_person.display_name {
+                self.insert_person_alias(dst_id, "merged_display", dn).await;
+            }
+        }
+
+        // 4. 删除 src 的关联和别名
+        self.delete_person_albums(src_id).await;
+        sqlx::query("DELETE FROM person_aliases WHERE person_id = ?").bind(src_id).execute(&self.pool).await.ok();
+
+        // 5. 删除 src 人物
+        sqlx::query("DELETE FROM persons WHERE id = ?").bind(src_id).execute(&self.pool).await.ok();
+
+        // 6. 更新 dst 的统计数据
+        self.update_person_counts(dst_id).await;
+    }
+
+    pub async fn get_person_by_id(&self, id: i64) -> Option<Person> {
+        sqlx::query_as::<_, Person>("SELECT * FROM persons WHERE id = ?")
+            .bind(id).fetch_optional(&self.pool).await.ok().flatten()
+    }
+
     pub async fn update_album_person(&self, album_id: &str, person_name_original: &str, person_name_cleaned: &str) {
         sqlx::query("UPDATE albums SET person_name_original = ?, person_name_cleaned = ?, processed_at = datetime('now') WHERE id = ?")
             .bind(person_name_original).bind(person_name_cleaned).bind(album_id).execute(&self.pool).await.ok();
diff --git a/src/engine/person_merger.rs b/src/engine/person_merger.rs
index 73d38bb..d66ef3a 100644
--- a/src/engine/person_merger.rs
+++ b/src/engine/person_merger.rs
@@ -269,6 +269,45 @@ pub async fn analyze_groups(db: &Database) -> HashMap<String, Vec<(i64, String,
     groups
 }
 
+/// 合并结果统计
+#[derive(Debug, Clone, Default)]
+pub struct MergeResult {
+    pub groups_analyzed: usize,
+    pub persons_merged: usize,
+    pub aliases_moved: usize,
+}
+
+/// 执行合并：扫描所有可合并的人物组，合并到相册数最多的那个
+/// 返回合并统计
+pub async fn execute_merge(db: &Database) -> MergeResult {
+    let groups = analyze_groups(db).await;
+    let mut result = MergeResult::default();
+    result.groups_analyzed = groups.len();
+
+    for (_core, items) in &groups {
+        if items.len() < 2 {
+            continue;
+        }
+
+        // 第一个（相册数最多）作为目标
+        let dst_id = items[0].0;
+        let dst_name = &items[0].1;
+
+        // 其余的合并到目标
+        for (src_id, src_name, _, _) in &items[1..] {
+            println!("[合并] {} (id={}) → {} (id={})", src_name, src_id, dst_name, dst_id);
+            db.merge_person_into(*src_id, dst_id).await;
+            result.persons_merged += 1;
+        }
+    }
+
+    if result.persons_merged > 0 {
+        println!("[合并] 完成：分析 {} 组，合并 {} 个人物", result.groups_analyzed, result.persons_merged);
+    }
+
+    result
+}
+
 /// 统计匹配分析
 #[derive(Debug, Clone)]
 pub struct MatchStats {
diff --git a/src/engine/pipeline.rs b/src/engine/pipeline.rs
index 155c3fe..748f64a 100644
--- a/src/engine/pipeline.rs
+++ b/src/engine/pipeline.rs
@@ -32,13 +32,22 @@ pub async fn process_all_albums(db: &Database) -> (usize, usize) {
             };
 
             if let Some(person_name) = person_name {
-                let (cleaned, _aliases) = title_parser::clean_person_name(&person_name);
-                let final_name = if cleaned.is_empty() { person_name.clone() } else { cleaned };
+                // 拆分中文主名 + 别名
+                let (primary_name, aliases) = title_parser::split_person_name_with_aliases(&person_name);
+                let final_name = if primary_name.is_empty() { person_name.clone() } else { primary_name };
                 db.update_album_person(&album.id, &person_name, &final_name).await;
 
-                // 创建人员
+                // 创建人员（先查是否已有同名）
                 let pid = db.insert_person(&final_name, None).await;
                 db.insert_person_album(pid, &album.id).await;
+
+                // 保存所有别名
+                for (alias_type, alias_name) in &aliases {
+                    if !alias_name.is_empty() && alias_name != &final_name {
+                        db.insert_person_alias(pid, alias_type, alias_name).await;
+                    }
+                }
+
                 db.update_person_counts(pid).await;
                 person_count += 1;
             }
diff --git a/src/engine/tag_extractor.rs b/src/engine/tag_extractor.rs
index 6a2684d..4b04060 100644
--- a/src/engine/tag_extractor.rs
+++ b/src/engine/tag_extractor.rs
@@ -1,4 +1,13 @@
-//! 标签提取器 — 从标题中提取标签词
+//! 标签提取器 — 从标题中提取分类明确、格式美观的标签
+//!
+//! 标签分类体系：
+//! - style:    风格标签（日系/韩系/森系/复古/甜美/性感等）
+//! - outfit:   服装标签（比基尼/泳装/旗袍/制服/丝袜/内衣等）
+//! - scene:    场景标签（室内/户外/街拍/浴室/床上/车内等）
+//! - body:     身体标签（美腿/美胸/翘臀/玉足等）
+//! - mood:     情绪标签（清纯/诱惑/唯美/清新/冷艳等）
+//! - topic:    主题标签（写真/私房/街拍/旅拍等）
+//! - other:    其他关键词
 
 use regex::Regex;
 use lazy_static::lazy_static;
@@ -9,16 +18,111 @@ lazy_static! {
     static ref HAS_CHINESE: Regex = Regex::new(r"[\u{4e00}-\u{9fff}]").unwrap();
 }
 
-/// 停用词
+// ── 标签词库（按分类） ──
+
+/// 风格标签
+const STYLE_TAGS: &[&str] = &[
+    "日系", "韩系", "森系", "复古", "甜美", "性感", "清新", "冷艳",
+    "优雅", "知性", "可爱", "俏皮", "温柔", "妩媚", "野性", "清纯",
+    "时尚", "潮流", "街头", "学院", "文艺", "古典", "民族", "异域",
+    "japanese", "korean", "retro", "vintage", "cute", "sexy",
+    "elegant", "fresh", "sweet", "wild", "pure", "fashion",
+];
+
+/// 服装标签
+const OUTFIT_TAGS: &[&str] = &[
+    "比基尼", "泳装", "泳衣", "旗袍", "制服", "丝袜", "内衣", "文胸",
+    "包臀裙", "紧身裙", "超短裙", "连衣裙", "半身裙", "短裙", "长裙",
+    "牛仔裤", "热裤", "短裤", "休闲裤", "西装裤",
+    "T恤", "衬衫", "毛衣", "针织衫", "外套", "风衣", "大衣", "西装",
+    "吊带", "抹胸", "露背", "透视", "蕾丝", "镂空", "开叉",
+    "高跟鞋", "运动鞋", "凉鞋", "拖鞋", "靴子",
+    "bikini", "swimsuit", "stockings", "lingerie", "dress",
+    "skirt", "jeans", "shirt", "sweater", "coat", "heels",
+];
+
+/// 场景标签
+const SCENE_TAGS: &[&str] = &[
+    "室内", "户外", "街拍", "浴室", "浴缸", "床上", "床照", "沙发",
+    "厨房", "阳台", "窗边", "楼梯", "走廊", "电梯", "车内", "驾驶座",
+    "海边", "沙滩", "泳池", "温泉", "森林", "草地", "花园", "公园",
+    "街道", "巷弄", "建筑", "天台", "屋顶", "咖啡馆", "餐厅", "酒店",
+    "indoor", "outdoor", "street", "beach", "pool", "bathroom",
+    "bedroom", "kitchen", "balcony", "car", "cafe", "hotel",
+];
+
+/// 身体标签
+const BODY_TAGS: &[&str] = &[
+    "美腿", "美胸", "翘臀", "玉足", "美背", "香肩", "蛮腰", "细腰",
+    "长腿", "酥胸", "丰臀", "白皙", "肌肤", "纹身",
+    "legs", "breasts", "ass", "feet", "back", "shoulders", "waist",
+    "skin", "tattoo",
+];
+
+/// 情绪标签
+const MOOD_TAGS: &[&str] = &[
+    "清纯", "诱惑", "唯美", "清新", "冷艳", "妩媚", "娇羞", "俏皮",
+    "温柔", "野性", "冷傲", "热情", "慵懒", "迷离", "甜美", "知性",
+    "pure", "seductive", "beautiful", "fresh", "cool", "charming",
+    "shy", "cute", "gentle", "wild", "lazy", "sweet",
+];
+
+/// 主题标签
+const TOPIC_TAGS: &[&str] = &[
+    "写真", "私房", "街拍", "旅拍", "婚纱照", "艺术照", "生活照",
+    "自拍", "跟拍", "约拍", "商拍",
+    "photoshoot", "portrait", "selfie", "travel", "wedding",
+];
+
+/// 停用词（完全排除，不做标签）
 const STOP_WORDS: &[&str] = &[
     "photos", "photo", "pictures", "picture", "images", "image", "video", "videos",
     "cosplay", "cos", "and", "the", "of", "in", "a", "an", "is", "to", "for",
     "part", "vol", "collection", "special", "extra", "bonus",
     "new", "old", "selfie", "official", "original", "preview", "patreon",
-    "秀人", "网", "写真", "图", "套", "合集", "系列", "作品",
+    "with", "without", "set", "gallery", "album", "page", "issue",
+    "model", "idol", "star", "actor", "actress", "singer",
+    "秀人", "网", "图", "套", "合集", "系列", "作品", "美女", "模特",
+    "女神", "小姐姐", "性感", "高清", "原版", "无水印", "番号", "编号",
+    "site", "web", "online", "digital", "exclusive", "premium",
+    "classic", "photography", "shoot", "shot",
 ];
 
-/// 从标题中提取标签
+/// 全局停用词（标签提取时也排除）
+fn get_stop_words_set() -> HashSet<&'static str> {
+    let mut s = HashSet::new();
+    for w in STOP_WORDS { s.insert(*w); }
+    s
+}
+
+/// 所有分类词库（用于快速匹配分类）
+fn get_tag_categories() -> Vec<(&'static [&'static str], &'static str)> {
+    vec![
+        (STYLE_TAGS, "style"),
+        (OUTFIT_TAGS, "outfit"),
+        (SCENE_TAGS, "scene"),
+        (BODY_TAGS, "body"),
+        (MOOD_TAGS, "mood"),
+        (TOPIC_TAGS, "topic"),
+    ]
+}
+
+/// 判断一个词属于哪个分类
+fn classify_tag(word: &str) -> &'static str {
+    let word_lower = word.to_lowercase();
+    for (tags, category) in get_tag_categories() {
+        for tag in tags {
+            if tag.to_lowercase() == word_lower {
+                return category;
+            }
+        }
+    }
+    "other"
+}
+
+// ── 核心函数 ──
+
+/// 从标题中提取分类标签
 pub fn extract_tags_from_title(
     title: &str,
     person_name: Option<&str>,
@@ -29,19 +133,55 @@ pub fn extract_tags_from_title(
     // 移除人名
     if let Some(name) = person_name {
         title_lower = title_lower.replace(&name.to_lowercase(), " ");
+        // 也移除英文名部分
+        for part in name.split_whitespace() {
+            title_lower = title_lower.replace(&part.to_lowercase(), " ");
+        }
     }
 
-    let stop_words: HashSet<&str> = STOP_WORDS.iter().copied().collect();
+    let stop_words = get_stop_words_set();
     let person_name_lower = person_name.map(|n| n.to_lowercase());
+    let mut seen = HashSet::new();
 
+    // 第一步：优先匹配分类词库中的词（保证高质量标签）
+    for (tag_list, category) in get_tag_categories() {
+        for tag in tag_list {
+            let tag_lower = tag.to_lowercase();
+            if title_lower.contains(&tag_lower) && !seen.contains(&tag_lower) {
+                seen.insert(tag_lower);
+                tags.push((tag.to_string(), category.to_string()));
+            }
+        }
+    }
+
+    // 第二步：分词提取其他关键词
     for cap in WORD_RE.find_iter(&title_lower) {
         let word = cap.as_str().trim();
+        let word_lower = word.to_lowercase();
+
+        // 基础过滤
         if word.len() < 2 { continue; }
         if word.chars().all(|c| c.is_ascii_digit()) { continue; }
-        if stop_words.contains(&word.to_lowercase().as_str()) { continue; }
+        if stop_words.contains(word_lower.as_str()) { continue; }
         if let Some(ref pn) = person_name_lower {
-            if word.to_lowercase().contains(pn.as_str()) { continue; }
+            if word_lower.contains(pn.as_str()) { continue; }
         }
+        if seen.contains(&word_lower) { continue; }
+
+        // 已经在分类词库中匹配过的跳过
+        let mut already_matched = false;
+        for (tag_list, _) in get_tag_categories() {
+            for tag in tag_list {
+                if tag.to_lowercase() == word_lower {
+                    already_matched = true;
+                    break;
+                }
+            }
+            if already_matched { break; }
+        }
+        if already_matched { continue; }
+
+        seen.insert(word_lower.clone());
 
         let tag_type = if HAS_CHINESE.is_match(word) { "chinese" } else { "english" };
         tags.push((word.to_string(), tag_type.to_string()));
@@ -50,11 +190,24 @@ pub fn extract_tags_from_title(
     tags
 }
 
-/// 标签去重并排序
+/// 标签去重并排序（分类标签优先）
 pub fn unique_tags(tags: Vec<(String, String)>) -> Vec<(String, String)> {
     let mut seen = HashSet::new();
     let mut result = Vec::new();
-    for (tag, tag_type) in tags {
+
+    // 分类排序权重
+    let category_order: Vec<&str> = vec![
+        "style", "outfit", "scene", "body", "mood", "topic", "chinese", "english", "other"
+    ];
+
+    let mut sorted_tags = tags;
+    sorted_tags.sort_by(|a, b| {
+        let idx_a = category_order.iter().position(|&c| c == a.1).unwrap_or(999);
+        let idx_b = category_order.iter().position(|&c| c == b.1).unwrap_or(999);
+        idx_a.cmp(&idx_b)
+    });
+
+    for (tag, tag_type) in sorted_tags {
         let key = tag.to_lowercase();
         if seen.insert(key) {
             result.push((tag, tag_type));
@@ -63,6 +216,36 @@ pub fn unique_tags(tags: Vec<(String, String)>) -> Vec<(String, String)> {
     result
 }
 
+/// 获取标签的中文分类名（用于前端展示）
+pub fn get_category_label(category: &str) -> &'static str {
+    match category {
+        "style" => "风格",
+        "outfit" => "服装",
+        "scene" => "场景",
+        "body" => "身体",
+        "mood" => "情绪",
+        "topic" => "主题",
+        "chinese" => "中文",
+        "english" => "英文",
+        _ => "其他",
+    }
+}
+
+/// 获取标签分类的颜色（用于前端标签着色）
+pub fn get_category_color(category: &str) -> (&'static str, &'static str) {
+    match category {
+        "style"   => ("#f0f9ff", "#0284c7"),   // 浅蓝底 + 深蓝字
+        "outfit"  => ("#fdf2f8", "#db2777"),   // 浅粉底 + 深粉字
+        "scene"   => ("#f0fdf4", "#15803d"),   // 浅绿底 + 深绿字
+        "body"    => ("#fef3c7", "#b45309"),   // 浅黄底 + 深黄字
+        "mood"    => ("#faf5ff", "#7c3aed"),   // 浅紫底 + 深紫字
+        "topic"   => ("#f0f9ff", "#0369a1"),   // 浅蓝底 + 蓝字
+        "chinese" => ("#f1f5f9", "#475569"),   // 浅灰底 + 深灰字
+        "english" => ("#f1f5f9", "#64748b"),   // 浅灰底 + 灰字
+        _         => ("#f1f5f9", "#64748b"),   // 默认
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -74,8 +257,25 @@ mod tests {
             Some("杨晨晨Yome"),
         );
         let names: Vec<&str> = tags.iter().map(|(t, _)| t.as_str()).collect();
-        assert!(names.contains(&"Night"));
-        assert!(names.contains(&"Dress"));
         assert!(!names.contains(&"photos"));
+        assert!(!names.contains(&"杨晨晨"));
     }
-}
\ No newline at end of file
+
+    #[test]
+    fn test_classify_tag() {
+        assert_eq!(classify_tag("日系"), "style");
+        assert_eq!(classify_tag("比基尼"), "outfit");
+        assert_eq!(classify_tag("浴室"), "scene");
+        assert_eq!(classify_tag("美腿"), "body");
+        assert_eq!(classify_tag("清纯"), "mood");
+        assert_eq!(classify_tag("写真"), "topic");
+        assert_eq!(classify_tag("unknown"), "other");
+    }
+
+    #[test]
+    fn test_category_colors() {
+        let (bg, fg) = get_category_color("style");
+        assert_eq!(bg, "#f0f9ff");
+        assert_eq!(fg, "#0284c7");
+    }
+}
diff --git a/src/engine/title_parser.rs b/src/engine/title_parser.rs
index d67b319..5e367ed 100644
--- a/src/engine/title_parser.rs
+++ b/src/engine/title_parser.rs
@@ -53,6 +53,14 @@ lazy_static! {
     static ref RE_CHINESE: Regex = Regex::new(r"[\u{4e00}-\u{9fff}]").unwrap();
     static ref RE_ENGLISH_SUFFIX: Regex = Regex::new(r"^([\u{4e00}-\u{9fff}]+)([A-Za-z].*)$").unwrap();
     static ref RE_TRAILING_PUNCT: Regex = Regex::new(r"[\s.,;:，。；：\-–—]+$").unwrap();
+    /// 人名模式：2-5个中文字符 + 可选英文后缀
+    static ref RE_CN_NAME: Regex = Regex::new(
+        r"([\u{4e00}-\u{9fff}]{2,5}(?:[A-Za-z][A-Za-z0-9_]*)?)"
+    ).unwrap();
+    /// 常见人名后缀（表明前面是人名）
+    static ref RE_NAME_CONTEXT: Regex = Regex::new(
+        r"(?i)(私房|写真|内衣|比基尼|泳装|旗袍|制服|街拍|室内|户外|浴室|浴室|浴缸|床上|床照|内衣|透视|包臀裙|紧身裙|超短裙|丝袜|美腿|美臀|美胸|翘臀|性感|清纯|甜美|气质|可爱|女神|嫩模|模特)"
+    ).unwrap();
 
     /// 停用词集合
     static ref STOP_WORDS_SET: HashSet<&'static str> = {
@@ -73,48 +81,115 @@ lazy_static! {
 // ── 人名提取 ──
 
 /// 从标题中提取模特/人物名称
-/// 对应 Python tag_index.extract_person_name_from_title
+/// 核心策略：
+/// 1. 清理标题（移除[工作室]、编号、N photos等）
+/// 2. 尝试用分隔符(–—-)切分，第一部分常含人名
+/// 3. 扫描匹配"2-5中文+可选英文"模式的词
+/// 4. 结合上下文（后面是否跟"写真/私房/性感"等关键词）
 pub fn extract_person_name_from_title(title: &str) -> Option<String> {
     let title = title.trim();
     if title.is_empty() {
         return None;
     }
 
-    // 清理末尾的 "N photos" 等
-    let title = RE_PHOTOS_SUFFIX.replace(title, "").trim().to_string();
+    // 步骤1: 基础清理
+    let mut t = RE_PHOTOS_SUFFIX.replace(title, "").trim().to_string();
 
-    // 1. cosplay 格式: "Name cosplay Character – Series"
-    if let Some(caps) = RE_COSPLAY_BY.captures(&title) {
-        return Some(caps[3].trim().to_string());
+    // 步骤2: cosplay 格式优先匹配
+    if let Some(caps) = RE_COSPLAY_BY.captures(&t) {
+        return Some(clean_name(caps[3].trim()));
     }
-    if let Some(caps) = RE_COSPLAY.captures(&title) {
-        return Some(caps[1].trim().to_string());
+    if let Some(caps) = RE_COSPLAY.captures(&t) {
+        return Some(clean_name(caps[1].trim()));
     }
 
-    // 2. 中文摄影工作室格式
-    let title = RE_BRACKET_PREFIX.replace(&title, "").trim().to_string();
+    // 步骤3: 移除 [工作室] 前缀
+    t = RE_BRACKET_PREFIX.replace(&t, "").trim().to_string();
 
-    // 移除模特称呼前缀
-    let mut title = title;
+    // 步骤4: 移除模特称呼前缀
     for prefix in MODEL_TITLE_PREFIX {
-        if title.starts_with(prefix) {
-            title = title[prefix.len()..].trim().to_string();
+        if t.starts_with(prefix) {
+            t = t[prefix.len()..].trim().to_string();
             break;
         }
     }
 
-    // 移除编号后缀
-    let title = RE_NUMBER_SUFFIX.replace(&title, "").trim().to_string();
+    // 步骤5: 移除编号后缀
+    t = RE_NUMBER_SUFFIX.replace(&t, "").trim().to_string();
 
-    // 用 `–—\-` 分割，取第一部分作为人名
-    let parts: Vec<&str> = RE_SPLIT_DASH.split(&title).collect();
-    let name = parts[0].trim().to_string();
+    // 步骤6: 用分隔符切分，检查每一部分
+    let parts: Vec<&str> = RE_SPLIT_DASH.split(&t).collect();
 
-    if name.len() >= 2 {
-        Some(name)
-    } else {
-        None
+    // 策略A: 检查第一部分（分隔符前的内容最可能包含人名）
+    if let Some(first) = parts.first() {
+        if let Some(name) = extract_name_from_segment(first) {
+            if !is_excluded_name(&name) {
+                return Some(name);
+            }
+        }
     }
+
+    // 策略B: 如果第一部分没找到，扫描所有部分
+    // 优先选择后面跟有关键词的部分
+    for i in 0..parts.len() {
+        let part = parts[i];
+        // 检查这一部分后面是否跟有"写真/私房"等关键词
+        let has_context_after = if i + 1 < parts.len() {
+            RE_NAME_CONTEXT.is_match(parts[i + 1])
+        } else {
+            false
+        };
+
+        if let Some(name) = extract_name_from_segment(part) {
+            if !is_excluded_name(&name) {
+                if has_context_after {
+                    return Some(name); // 有关键词上下文，优先返回
+                }
+            }
+        }
+    }
+
+    // 策略C: 直接在整个标题中搜索人名模式
+    for cap in RE_CN_NAME.captures_iter(&t) {
+        let name = clean_name(&cap[1]);
+        if !is_excluded_name(&name) {
+            return Some(name);
+        }
+    }
+
+    None
+}
+
+/// 从一个文本片段中提取人名
+fn extract_name_from_segment(segment: &str) -> Option<String> {
+    let seg = segment.trim();
+    if seg.is_empty() {
+        return None;
+    }
+
+    // 尝试直接匹配人名模式
+    if let Some(cap) = RE_CN_NAME.captures(seg) {
+        let name = clean_name(&cap[1]);
+        if name.len() >= 2 {
+            return Some(name);
+        }
+    }
+
+    // 如果整个片段是纯中文（2-5字），也认为是人名
+    let is_pure_cn = seg.chars().all(|c| RE_CHINESE.is_match(&c.to_string()));
+    if is_pure_cn && seg.len() >= 2 && seg.len() <= 6 {
+        return Some(clean_name(seg));
+    }
+
+    None
+}
+
+/// 清理人名：移除前后空白和标点
+fn clean_name(name: &str) -> String {
+    let name = name.trim();
+    // 移除末尾标点
+    let name = RE_TRAILING_PUNCT.replace(name, "").trim().to_string();
+    name
 }
 
 /// 提取中文核心（开头的连续中文字符）
@@ -204,6 +279,57 @@ pub fn get_person_key(name: &str) -> String {
         .collect()
 }
 
+/// 拆分人名为「中文主名 + 别名列表」
+/// 规则：
+/// - 如果有中文部分：主名 = 中文部分，别名 = 英文后缀 + 原始全名 + 括号内容
+/// - 如果只有英文：主名 = 英文全名，别名 = 原始全名
+///
+/// 示例：
+/// - 杨晨晨Yome -> 主名"杨晨晨", 别名["Yome", "杨晨晨Yome"]
+/// - 杨晨晨Sugar -> 主名"杨晨晨", 别名["Sugar", "杨晨晨Sugar"]
+/// - Yome -> 主名"Yome", 别名["Yome"]
+pub fn split_person_name_with_aliases(raw_name: &str) -> (String, Vec<(String, String)>) {
+    let (cleaned, mut aliases) = clean_person_name(raw_name);
+    let mut primary_name = cleaned.clone();
+
+    // 尝试提取中文主名
+    if let Some(cn_part) = extract_cn(&cleaned) {
+        if !cn_part.is_empty() && cn_part != cleaned {
+            primary_name = cn_part.clone();
+
+            // 提取英文后缀作为别名
+            if let Some(rest) = cleaned.strip_prefix(&cn_part) {
+                let english_suffix = rest.trim().to_string();
+                if !english_suffix.is_empty() {
+                    // 避免重复
+                    let already_has = aliases.iter().any(|(_, a)| a == &english_suffix);
+                    if !already_has {
+                        aliases.push(("english".to_string(), english_suffix));
+                    }
+                }
+            }
+        }
+    }
+
+    // 原始完整名也作为别名（用于搜索匹配）
+    if !raw_name.trim().is_empty() && raw_name.trim() != primary_name {
+        let already_has = aliases.iter().any(|(_, a)| a == raw_name.trim());
+        if !already_has {
+            aliases.push(("original".to_string(), raw_name.trim().to_string()));
+        }
+    }
+
+    // cleaned 名也作为别名（如果和主名不同）
+    if cleaned != primary_name {
+        let already_has = aliases.iter().any(|(_, a)| a == &cleaned);
+        if !already_has {
+            aliases.push(("cleaned".to_string(), cleaned));
+        }
+    }
+
+    (primary_name, aliases)
+}
+
 // ── 标签提取 ──
 
 /// 从标题中提取标签（排除人名部分）
@@ -282,4 +408,28 @@ mod tests {
         assert_eq!(cleaned, "美女模特 杨晨晨Yome");
         assert!(!aliases.is_empty());
     }
+
+    #[test]
+    fn test_split_person_name_with_aliases() {
+        // 中文 + 英文后缀
+        let (name, aliases) = split_person_name_with_aliases("杨晨晨Yome");
+        assert_eq!(name, "杨晨晨");
+        let alias_names: Vec<&str> = aliases.iter().map(|(_, a)| a.as_str()).collect();
+        assert!(alias_names.contains(&"Yome"));
+        assert!(alias_names.contains(&"杨晨晨Yome"));
+
+        // 同一人，不同英文名
+        let (name2, aliases2) = split_person_name_with_aliases("杨晨晨Sugar");
+        assert_eq!(name2, "杨晨晨");
+        let alias_names2: Vec<&str> = aliases2.iter().map(|(_, a)| a.as_str()).collect();
+        assert!(alias_names2.contains(&"Sugar"));
+
+        // 只有中文
+        let (name3, _) = split_person_name_with_aliases("杨晨晨");
+        assert_eq!(name3, "杨晨晨");
+
+        // 只有英文
+        let (name4, _) = split_person_name_with_aliases("Yome");
+        assert_eq!(name4, "Yome");
+    }
 }
\ No newline at end of file
diff --git a/src/main.rs b/src/main.rs
index f58a914..d1e9865 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -72,6 +72,16 @@ async fn main() -> std::io::Result<()> {
         } else {
             info!("[后台任务] 所有相册已解析，无需处理");
         }
+
+        // 解析完成后，执行一次人物合并
+        tokio::time::sleep(tokio::time::Duration::from_secs(2)).await;
+        info!("[后台任务] 执行人物合并分析...");
+        let result = engine::person_merger::execute_merge(&db_parse).await;
+        if result.persons_merged > 0 {
+            info!("[后台任务] 人物合并完成：分析 {} 组，合并 {} 人", result.groups_analyzed, result.persons_merged);
+        } else {
+            info!("[后台任务] 无需要合并的人物");
+        }
     });
 
     // 相册内存缓存
@@ -93,13 +103,22 @@ async fn main() -> std::io::Result<()> {
         }
     });
 
-    // 定时刷新缓存（每30分钟）
+    // 定时任务（每30分钟）：刷新缓存 + 人物合并
     let refresh_cache = Arc::clone(&albums_cache);
     let refresh_db = Arc::clone(&db);
     tokio::spawn(async move {
         let mut interval = interval(Duration::from_secs(30 * 60));
         loop {
             interval.tick().await;
+
+            // 1. 执行人物合并
+            info!("[定时任务] 执行人物合并分析...");
+            let result = engine::person_merger::execute_merge(&refresh_db).await;
+            if result.persons_merged > 0 {
+                info!("[定时任务] 人物合并完成：分析 {} 组，合并 {} 人", result.groups_analyzed, result.persons_merged);
+            }
+
+            // 2. 刷新缓存
             match refresh_db.get_all_albums().await {
                 Ok(albums) => {
                     let mut cache = refresh_cache.write().await;