laoyang/MovieLog_Server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

界面主题：5 套经典配色，按账号记住

Browse Source 
系统设置里多一块「🎨 我的界面主题」，点卡片即时预览、保存后全站生效，不用重新登录。

- 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 的主题原样还原、其它账号一字未动）。
This commit is contained in:
laoyang
2026-09-22 20:33:47 +08:00
parent 275bd9d80f
commit ee256adc4b
21 changed files with 530 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
settings.php
+125 -4
View File
@@ -108,6 +108,22 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'clear
$message = '已清除错误提示';
}
// ---------- 切换界面主题（个人偏好，只影响当前账号）----------
if ($_SERVER['REQUEST_METHOD'] === 'POST' && ($_POST['action'] ?? '') === 'save_theme') {
$themeKey = (string)($_POST['theme'] ?? '');
if (!isValidTheme($themeKey)) {
$error = '没有这套主题，请从下面重新选一个。';
} elseif (setAdminTheme((int)$admin['id'], $themeKey)) {
// setAdminTheme 已经把 session 一起更新了，所以本次请求往下渲染时就已经是新主题
$message = '界面主题已切换为「' . themeInfo($themeKey)['name'] . '」。';
} else {
$error = '主题保存失败，请稍后再试。';
}
}
$themes = themeCatalog();
$curThemeKey = currentThemeKey();
$drivers = storageDriverLabels();
$current = currentStorageDriver();
$configs = [];
@@ -138,12 +154,13 @@ function localImageStat() {
$localStat = localImageStat();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<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>
.page-wrap { max-width: 880px; margin: 0 auto; padding: 20px; }
.card {
@@ -160,7 +177,7 @@ $localStat = localImageStat();
font-family: inherit;
}
.form-group input:focus, .form-group select:focus {
outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(230,126,34,.12);
outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.12);
}
.hint { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.6; }
.hint code { background: var(--bg-secondary); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@@ -170,7 +187,7 @@ $localStat = localImageStat();
cursor: pointer; transition: var(--transition); background: var(--card-bg);
}
.driver-opt:hover { border-color: var(--primary-light); }
.driver-opt.active { border-color: var(--primary); background: #fff8f0; }
.driver-opt.active { border-color: var(--primary); background: rgba(var(--primary-rgb), .07); }
.driver-opt .t { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.driver-opt .d { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.driver-opt input { margin-right: 6px; }
@@ -180,7 +197,7 @@ $localStat = localImageStat();
.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
border: none; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(230,126,34,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--primary-rgb),.35); }
.btn-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-outline:hover { background: var(--bg-secondary); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
@@ -202,6 +219,56 @@ $localStat = localImageStat();
.row-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.chk { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.chk input { margin: 0; }
/* ===== 主题选择卡片 =====
每张预览卡片自己带一个 data-theme，用的就是那套主题真实的那组变量，
所以缩略图里的颜色与换上之后的页面必然一致（不必在这里再抄一遍色值）。
卡片内部一律用 var(--xxx) 取色 → 暗色主题的卡片自然也是深底浅字。 */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.theme-opt { display: block; margin: 0; cursor: pointer; position: relative; }
/* 单选圈本身隐藏，但保留在文档流里且可聚焦（键盘 Tab + 方向键照常可用） */
.theme-opt > input {
position: absolute; width: 1px; height: 1px; opacity: 0;
margin: 0; pointer-events: none;
}
.theme-card {
display: block; border: 2px solid var(--border-color); border-radius: 12px;
overflow: hidden; background: var(--bg-primary); transition: var(--transition);
}
.theme-opt:hover .theme-card { border-color: var(--primary-light); transform: translateY(-2px); }
/* 选中的那张：描边用「这张卡片自己的」主色，一眼能认出选的是哪套 */
.theme-opt > input:checked + .theme-card {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .14);
}
.theme-opt > input:focus-visible + .theme-card {
outline: 2px solid var(--primary); outline-offset: 2px;
}
/* 缩略图：一条主色横条 + 两行灰字 + 一个主色按钮，够看出这套配色的性格 */
.theme-stage { display: block; padding: 11px 12px 12px; background: var(--bg-primary); }
.ts-bar {
display: block; height: 7px; border-radius: 4px; margin-bottom: 9px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.ts-line {
display: block; height: 5px; border-radius: 3px; margin-bottom: 5px;
background: var(--text-secondary); opacity: .35;
}
.ts-line.ts-short { width: 58%; }
.ts-btn {
display: block; width: 46px; height: 14px; border-radius: 7px; margin-top: 10px;
background: var(--primary); box-shadow: 0 3px 10px rgba(var(--primary-rgb), .4);
}
.theme-meta { display: block; padding: 10px 12px 12px; background: var(--card-bg); }
.theme-name {
display: flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.theme-cur {
padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 600;
color: #fff; background: var(--primary);
}
.theme-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
</style>
</head>
<body>
@@ -223,6 +290,47 @@ $localStat = localImageStat();
</div>
<?php endif; ?>
<div class="card">
<h2>🎨 我的界面主题</h2>
<div class="sub">
挑一套配色，只作用于<strong>你自己的账号</strong>——别人登录看到的还是他们各自选的那套。<br>
想先看看效果就点一下主题卡片，整页会立刻换色（只是预览，按「保存主题」才真正记住）。
按钮、链接、卡片边框、评分徽标与年度报告的图表颜色都会一起换。
</div>
<form method="post" id="themeForm">
<input type="hidden" name="action" value="save_theme">
<div class="theme-grid" id="themeGrid">
<?php foreach ($themes as $tkey => $t): ?>
<label class="theme-opt">
<input type="radio" name="theme" value="<?= h($tkey) ?>"
<?= $tkey === $curThemeKey ? 'checked' : '' ?>>
<!-- 预览卡片自己套一层 data-theme，用的就是该主题真实的那组变量，
所以「预览所见」与「换上去之后」必然一致，不必在 PHP 里再抄一份色值。 -->
<span class="theme-card" data-theme="<?= h($tkey) ?>">
<span class="theme-stage">
<span class="ts-bar"></span>
<span class="ts-line"></span>
<span class="ts-line ts-short"></span>
<span class="ts-btn"></span>
</span>
<span class="theme-meta">
<span class="theme-name"><?= h($t['name']) ?><?php
if ($tkey === $curThemeKey): ?><span class="theme-cur">当前</span><?php
endif; ?></span>
<span class="theme-desc"><?= h($t['desc']) ?></span>
</span>
</span>
</label>
<?php endforeach; ?>
</div>
<div class="row-flex" style="margin-top: 18px;">
<button class="btn btn-primary" type="submit">保存主题</button>
<span class="hint" style="margin: 0;">保存后立刻生效，全站页面都用这套配色；不用重新登录。</span>
</div>
</form>
</div>
<div class="card">
<h2>图片存储方式</h2>
<div class="sub">
@@ -656,6 +764,19 @@ $localStat = localImageStat();
<script>
(function () {
// ---------- 主题即时预览 ----------
// 点一下卡片就把 <html data-theme> 换成那套主题 —— 整页（含导航、卡片、按钮、
// 表单控件）立刻换色，所见即保存后的样子。这只是预览，真正记住要靠「保存主题」；
// 没脚本也能用：选中单选后提交同样生效。
var grid = document.getElementById('themeGrid');
if (grid) {
grid.querySelectorAll('input[name=theme]').forEach(function (r) {
r.addEventListener('change', function () {
if (r.checked) document.documentElement.setAttribute('data-theme', r.value);
});
});
}
var API = 'storage_api.php';
// ---------- 驱动切换 ----------