laoyang
ee256adc4b
系统设置里多一块「🎨 我的界面主题」，点卡片即时预览、保存后全站生效，不用重新登录。 - lib/theme.php（新增）：主题注册表 ticket/indigo/forest/wine/midnight， 分别是「复古票根（暖橙，默认）/ 靛蓝 / 松林 / 绛红 / 暗夜（深色）」。 currentThemeKey() 以 session 为准，session 里没有就从 admins.theme 补读一次 —— 升级前就已经登录着的会话也能立刻用上自己账号存的主题。库里是脏值时回落默认主题。 - css/themes.css（新增）：5 套调色板，全部以 [data-theme="<key>"] 规则块给出， 每套 16 个变量一个不少。**必须排在 css/style.css 之后加载**：两者优先级相同 （都是 0,1,0），靠后出现者胜。另加 --primary-rgb（"R, G, B" 三元组）， 页面里的淡色底/光晕一律 rgba(var(--primary-rgb), α)，所以加一套主题只需动 CSS， 页面与 JS 一行都不用改；每套还要声明 color-scheme，否则暗色主题下原生控件 （日期选择器、下拉、滚动条）仍是刺眼的白底。 - css/style.css：:root 保留默认主题那一份作兜底；导航底色改走 --nav-bg， 滚动条改走变量，按钮光晕改走 --primary-rgb。 - lib/db.php / lib/auth.php：admins 增列 theme（幂等 ALTER，老库自动补，空值 = 默认主题）； setAdminTheme() 校验 key、写库、同步 session。 - settings.php：主题卡片区。每张预览卡自己套一层 data-theme，用的就是那套主题真实的 变量，因此「预览所见」与「换上去之后」必然一致，不必再抄一份色值；另有一小段 JS 在点选时改 <html data-theme> 做即时预览（没脚本时选中后提交同样生效）。 - 14 个页面：<html> 上输出 data-theme，并在 style.css 之后引入 themes.css； 内联样式里写死的橙色 rgba(230,126,34,…) 全部改走 rgba(var(--primary-rgb),…)； 影院/观影人色板选中态的描边由 #333 改为 var(--text-primary)（暗色主题下才看得见）。 - annual_report.php：报告本身仍是深色「海报」版式，但点缀色跟随主题； Chart.js 画在 canvas 上读不到 CSS 变量，改为运行时从 <html> 的计算样式取色。 顺手修的两个坑： 1. 注释里**不能**出现 PHP 起止标签。PHP 的结束标签在 // 注释里同样会关闭 PHP 模式， 之后若再出现短标签就会被真的执行 —— lib/theme.php 的用法说明里写了完整标签示例， 导致该文件被 require 时直接 Fatal error、整站白屏，而 php -l 查不出来（只看语法）。 现在部署脚本里加了一道静态断言专门挡这个。 2. themesCssLink() 的返回值末尾补一个换行：PHP 会吃掉结束标签后面那一个换行， 不补的话渲染结果里这一行会和下一行黏成一行。 回归：theme_e2e 111/111（含老库自动补列、脏值回落、5 个选项渲染、切换后落库+落 session+ 立刻生效、跨账号隔离、非法 key 与注入被拒、themes.css 完整性、:root 与 ticket 一致、 无残留写死主色、无悬空 CSS 变量）；reviews_e2e 84/84、fetch_movie 76/76、storage 196/196。 A/B 48 个响应：把「新增 head 行 / data-theme 属性 / 橙色→变量」三类等价替换归一化、 并把设置页新增区块整块删掉之后，**其余部分逐字节一致，零残留差异**。 线上 PHP 7.4.30 / 8.1.7 双版本冒烟全通过（迁移、5 套主题切换、跨账号隔离均验证， 写测试后已把 admin #1 的主题原样还原、其它账号一字未动）。
319 lines
12 KiB
PHP
319 lines
12 KiB
PHP
<?php
|
||
// ============================================
|
||
// 文件: stats.php (统计仪表板，含观影人头像)
|
||
// ============================================
|
||
|
||
require_once 'config.php';
|
||
checkLogin();
|
||
|
||
$admin = getCurrentAdmin();
|
||
|
||
// 获取统计数据
|
||
$overview = getStatsOverview();
|
||
$cinema_stats = statsByCinema();
|
||
$person_stats = statsByPerson();
|
||
$month_stats = statsByMonth(12);
|
||
$year_stats = statsByYear();
|
||
|
||
// 计算最大值
|
||
$max_cinema = !empty($cinema_stats) ? max(array_column($cinema_stats, 'count')) : 1;
|
||
$max_person = !empty($person_stats) ? max(array_column($person_stats, 'count')) : 1;
|
||
$max_month = !empty($month_stats) ? max(array_column($month_stats, 'count')) : 1;
|
||
$max_year = !empty($year_stats) ? max(array_column($year_stats, 'count')) : 1;
|
||
?>
|
||
<!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>
|
||
.stats-container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 28px;
|
||
}
|
||
.stat-card {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 18px 20px;
|
||
box-shadow: var(--shadow);
|
||
text-align: center;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.stat-card .number {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
line-height: 1.2;
|
||
}
|
||
.stat-card .label {
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
margin-top: 4px;
|
||
}
|
||
.stat-card .sub {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
margin-top: 2px;
|
||
}
|
||
.chart-section {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 20px 24px;
|
||
box-shadow: var(--shadow);
|
||
border: 1px solid var(--border-color);
|
||
margin-bottom: 24px;
|
||
}
|
||
.chart-section h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin: 0 0 16px;
|
||
color: var(--text-primary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.chart-section .subtitle {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-left: 8px;
|
||
font-weight: 400;
|
||
}
|
||
.bar-chart {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.bar-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.bar-item .label {
|
||
width: 140px;
|
||
font-size: 14px;
|
||
color: var(--text-primary);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.bar-item .label .avatar {
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
.bar-item .label .color-dot {
|
||
display: inline-block;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
.bar-item .bar-track {
|
||
flex: 1;
|
||
height: 22px;
|
||
background: var(--bg-secondary);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.bar-item .bar-fill {
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
transition: width 0.6s ease;
|
||
background: var(--primary);
|
||
}
|
||
.bar-item .count {
|
||
width: 40px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
flex-shrink: 0;
|
||
}
|
||
.no-data {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
padding: 12px 0;
|
||
}
|
||
.two-col {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
@media (max-width: 768px) {
|
||
.two-col {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.bar-item .label {
|
||
width: 100px;
|
||
font-size: 13px;
|
||
}
|
||
.stat-card .number {
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.stats-grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
}
|
||
.bar-item {
|
||
gap: 6px;
|
||
}
|
||
.bar-item .label {
|
||
width: 70px;
|
||
font-size: 12px;
|
||
}
|
||
.bar-item .count {
|
||
width: 30px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<?php include 'nav.php'; ?>
|
||
|
||
<main class="main-content">
|
||
<div class="stats-container">
|
||
<h2 style="font-size: 26px; margin-bottom: 8px;">📊 统计仪表板</h2>
|
||
<p style="color: var(--text-secondary); margin-bottom: 24px;">综合观影数据概览</p>
|
||
|
||
<!-- 总览卡片 -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="number"><?= $overview['total_movies'] ?></div>
|
||
<div class="label">🎬 电影总数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number"><?= $overview['total_cinemas'] ?></div>
|
||
<div class="label">🏛️ 影院数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number"><?= $overview['total_persons'] ?></div>
|
||
<div class="label">👥 观影人数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="number"><?= $overview['total_viewership'] ?></div>
|
||
<div class="label">🎫 总观影人次</div>
|
||
</div>
|
||
<?php if ($overview['first_date'] && $overview['last_date']): ?>
|
||
<div class="stat-card" style="grid-column: span 2;">
|
||
<div class="label">📅 观影跨度</div>
|
||
<div style="font-size: 16px; font-weight: 500; margin-top: 4px;">
|
||
<?= date('Y年m月d日', strtotime($overview['first_date'])) ?> ～ <?= date('Y年m月d日', strtotime($overview['last_date'])) ?>
|
||
</div>
|
||
</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- 按影院统计 -->
|
||
<div class="chart-section">
|
||
<h3>🏛️ 按影院统计 <span class="subtitle">电影数量</span></h3>
|
||
<?php if (!empty($cinema_stats)): ?>
|
||
<div class="bar-chart">
|
||
<?php foreach ($cinema_stats as $item): ?>
|
||
<div class="bar-item">
|
||
<span class="label">
|
||
<span class="color-dot" style="background: <?= h($item['color'] ?: '#888888') ?>;"></span>
|
||
<?= h($item['name']) ?>
|
||
</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width: <?= ($max_cinema > 0) ? round($item['count'] / $max_cinema * 100) : 0 ?>%; background: <?= h($item['color'] ?: '#888888') ?>;"></div>
|
||
</div>
|
||
<span class="count"><?= $item['count'] ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="no-data">暂无影院数据</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- 按观影人统计 + 按年统计（两列） -->
|
||
<div class="two-col">
|
||
<!-- 按观影人统计（带头像） -->
|
||
<div class="chart-section">
|
||
<h3>👥 按观影人统计 <span class="subtitle">参与电影数</span></h3>
|
||
<?php if (!empty($person_stats)): ?>
|
||
<div class="bar-chart">
|
||
<?php foreach ($person_stats as $item): ?>
|
||
<div class="bar-item">
|
||
<span class="label">
|
||
<img src="<?= getAvatarUrl($item['avatar'] ?? null, $item['name']) ?>" class="avatar" alt="<?= h($item['name']) ?>">
|
||
<span class="color-dot" style="background: <?= h($item['color'] ?: '#888888') ?>;"></span>
|
||
<?= h($item['name']) ?>
|
||
</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width: <?= ($max_person > 0) ? round($item['count'] / $max_person * 100) : 0 ?>%; background: <?= h($item['color'] ?: '#888888') ?>;"></div>
|
||
</div>
|
||
<span class="count"><?= $item['count'] ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="no-data">暂无观影人数据</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
|
||
<!-- 按年统计 -->
|
||
<div class="chart-section">
|
||
<h3>📆 按年统计 <span class="subtitle">观影数量</span></h3>
|
||
<?php if (!empty($year_stats)): ?>
|
||
<div class="bar-chart">
|
||
<?php foreach ($year_stats as $item): ?>
|
||
<div class="bar-item">
|
||
<span class="label"><?= h($item['year']) ?></span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width: <?= ($max_year > 0) ? round($item['count'] / $max_year * 100) : 0 ?>%; background: #3498db;"></div>
|
||
</div>
|
||
<span class="count"><?= $item['count'] ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="no-data">暂无年份数据</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按月趋势 -->
|
||
<div class="chart-section">
|
||
<h3>📈 月度趋势 <span class="subtitle">最近12个月观影数量</span></h3>
|
||
<?php if (!empty($month_stats)): ?>
|
||
<div class="bar-chart">
|
||
<?php foreach ($month_stats as $item): ?>
|
||
<div class="bar-item">
|
||
<span class="label"><?= h($item['month']) ?></span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width: <?= ($max_month > 0) ? round($item['count'] / $max_month * 100) : 0 ?>%; background: #2ecc71;"></div>
|
||
</div>
|
||
<span class="count"><?= $item['count'] ?></span>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="no-data">暂无月度数据</div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|