rust-imager/assets/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流云图库</title>
    <link rel="stylesheet" href="/assets/css/font-awesome.css">
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <div class="app-layout">

        <!-- ============ 左侧边栏（可折叠） ============ -->
        <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-group">
                <div class="sidebar-section-title collapsible" data-section="people" onclick="toggleSidebarSection('people')">
                    <i class="fas fa-users"></i>
                    <span>热门人物</span>
                    <i class="fas fa-chevron-down section-arrow"></i>
                </div>
                <div class="sidebar-section-content" id="sidebar-people-content">
                    <div class="sidebar-people" id="sidebar-people">
                        <!-- 动态填充 -->
                    </div>
                </div>
            </div>

            <!-- 热门标签 -->
            <div class="sidebar-section-group">
                <div class="sidebar-section-title collapsible" data-section="tags" onclick="toggleSidebarSection('tags')">
                    <i class="fas fa-tags"></i>
                    <span>热门标签</span>
                    <i class="fas fa-chevron-down section-arrow"></i>
                </div>
                <div class="sidebar-section-content" id="sidebar-tags-content">
                    <div class="sidebar-tags" id="sidebar-tags">
                        <!-- 动态填充 -->
                    </div>
                </div>
            </div>

            <!-- 底部折叠按钮 -->
            <div class="sidebar-footer">
                <button class="collapse-btn" onclick="toggleSidebar()" id="collapse-btn" title="收起侧边栏">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
        </aside>

        <!-- ============ 主内容区 ============ -->
        <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="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="albums-grid" id="albums-container">
                    <div class="loading">
                        <i class="fas fa-spinner fa-spin"></i><br>加载中...
                    </div>
                </div>

            </div>
        </main>
    </div>

    <!-- 移动端遮罩 -->
    <div class="mobile-overlay" id="mobile-overlay" onclick="toggleMobileSidebar()"></div>

    <script src="/assets/js/app.js?v=6"></script>
</body>
</html>