MovieLog_Server/index.php

<?php
// ============================================
// 文件: index.php (含搜索 + 观影人头像)
// ============================================

require_once 'config.php';
checkLogin();

$admin = getCurrentAdmin();

// 获取搜索关键词
$keyword = isset($_GET['keyword']) ? trim($_GET['keyword']) : '';

if (!empty($keyword)) {
    $movies = searchMovies($keyword);
} else {
    $movies = getMovies();
}

// 挂上评价概况（几条评价 / 平均分），一次查询，列表里只展示有评价的电影
attachReviewStatsToMovies($movies);
?>
<!DOCTYPE html>
<html lang="zh-CN"<?= themeAttr() ?>>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影日志 - 我的电影</title>
    <link rel="stylesheet" href="css/style.css">
    <?= themesCssLink() ?>
    <style>
        /* 搜索栏样式 */
        .search-bar {
            display: flex;
            gap: 10px;
            align-items: center;
            background: var(--card-bg);
            padding: 8px 16px;
            border-radius: 12px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
            max-width: 500px;
            margin-bottom: 20px;
        }
        .search-bar input[type="text"] {
            flex: 1;
            border: none;
            outline: none;
            padding: 10px 12px;
            font-size: 15px;
            background: transparent;
            color: var(--text-primary);
        }
        .search-bar button {
            background: var(--primary);
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
        }
        .search-bar button:hover {
            background: var(--primary-dark);
        }
        .search-bar .clear-btn {
            background: transparent;
            color: var(--text-secondary);
            padding: 8px 12px;
            font-size: 14px;
        }
        .search-bar .clear-btn:hover {
            background: var(--bg-secondary);
        }
        .search-info {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 16px;
        }
        /* 观影人头像标签 */
        .viewer-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 12px;
            background: rgba(0,0,0,0.04);
        }
        .viewer-tag img {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            object-fit: cover;
        }
        .card-viewers {
            margin-top: 6px;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 8px;
        }
        /* 评价均分（有人评价过才显示） */
        .meta-rating {
            color: var(--primary);
            font-weight: 600;
        }
        @media (max-width: 600px) {
            .search-bar {
                flex-wrap: wrap;
                padding: 8px;
            }
            .search-bar input[type="text"] {
                width: 100%;
                flex: 0 0 100%;
                padding: 8px 12px;
            }
            .search-bar button {
                flex: 1;
            }
        }
    </style>
</head>
<body>
    <?php include 'nav.php'; ?>

    <main class="main-content">
        <div class="page-header">
            <div>
                <h2><?= empty($keyword) ? '我的电影' : '搜索结果' ?></h2>
                <p class="subtitle">
                    <?php if (empty($keyword)): ?>
                        共 <?= count($movies) ?> 部 · 按观影日期排序
                    <?php else: ?>
                        找到 <?= count($movies) ?> 部匹配“<strong><?= h($keyword) ?></strong>”的电影
                    <?php endif; ?>
                </p>
            </div>
        </div>

        <!-- 搜索栏 -->
        <form method="GET" action="" class="search-bar">
            <input type="text" name="keyword" placeholder="搜索电影名称、影院、观影人..." value="<?= h($keyword) ?>">
            <button type="submit">🔍 搜索</button>
            <?php if (!empty($keyword)): ?>
                <a href="index.php" class="clear-btn">✕ 清除</a>
            <?php endif; ?>
        </form>

        <?php if (empty($movies)): ?>
            <div class="empty-state">
                <div class="empty-icon">🎥</div>
                <h3><?= empty($keyword) ? '还没有电影记录' : '没有找到匹配的电影' ?></h3>
                <p><?= empty($keyword) ? '点击「添加电影」开始记录你的观影之旅吧' : '尝试其他关键词' ?></p>
                <?php if (empty($keyword)): ?>
                    <a href="add.php" class="btn btn-primary">➕ 添加第一部电影</a>
                <?php else: ?>
                    <a href="index.php" class="btn btn-outline">查看全部电影</a>
                <?php endif; ?>
            </div>
        <?php else: ?>
            <div class="waterfall">
                <?php foreach ($movies as $movie): ?>
                    <div class="movie-card" onclick="location.href='detail.php?id=<?= $movie['id'] ?>'">
                        <div class="card-image">
                            <?php 
                            $poster = posterUrl($movie['poster_path']);
                            if (strpos($poster, 'placeholder') !== false): 
                            ?>
                                <div class="placeholder-poster">
                                    <span>🎬</span>
                                    <span class="placeholder-title"><?= h($movie['title']) ?></span>
                                </div>
                            <?php else: ?>
                                <img src="<?= $poster ?>" alt="<?= h($movie['title']) ?>" loading="lazy">
                            <?php endif; ?>
                        </div>
                        <div class="card-body">
                            <h3 class="card-title"><?= h($movie['title']) ?></h3>
                            <div class="card-meta">
                                <span class="meta-date">📅 <?= $movie['watch_date'] ? date('Y年m月d日', strtotime($movie['watch_date'])) : '日期待补' ?></span>
                                <?php if ($movie['cinema_name']): ?>
                                    <span class="meta-cinema" style="color: <?= h($movie['cinema_color'] ?? '#888888') ?>;">
                                        🏛️ <?= h($movie['cinema_name']) ?>
                                    </span>
                                <?php endif; ?>
                                <?php if (!empty($movie['review_count'])): ?>
                                    <span class="meta-rating" title="共 <?= (int)$movie['review_count'] ?> 条评价">
                                        ⭐ <?= $movie['review_avg'] ?><span style="color: var(--text-secondary); font-weight: 400;">/10</span>
                                    </span>
                                <?php endif; ?>
                            </div>
                            <!-- 观影人 -->
                            <?php if (!empty($movie['viewers'])): ?>
                                <div class="card-viewers">
                                    <?php foreach ($movie['viewers'] as $viewer): ?>
                                        <span class="viewer-tag" style="color: <?= h($viewer['color'] ?: '#888888') ?>;">
                                            <img src="<?= getAvatarUrl($viewer['avatar'] ?? null, $viewer['name']) ?>" alt="<?= h($viewer['name']) ?>">
                                            <?= h($viewer['name']) ?>
                                        </span>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </main>

    <script src="js/main.js"></script>
</body>
</html>