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
css/style.css
+20 -5
View File
@@ -1,20 +1,34 @@
/* ============================================
文件: css/style.css
说明: 全局样式 - 支持 Grid 网格瀑布流
配色（--primary / --bg-* / --card-bg / --text-* / --border-color / --shadow* …）
由「主题」决定：页面在 <html data-theme="<key>"> 上声明，具体色值见 css/themes.css。
下面 :root 里保留的是**默认主题「复古票根」**的那一份，
作用是兜底 —— 万一 themes.css 没加载出来，页面也不会掉成无色。
改默认配色时，两处（这里和 themes.css 的 [data-theme="ticket"]）要一起改，
theme_e2e 测试会断言两边的值一致。
============================================ */
:root {
--primary: #e67e22;
--primary-dark: #d35400;
--primary-light: #f39c12;
/* 与 --primary 同色的 "R, G, B" 三元组：淡色底/光晕统一用
rgba(var(--primary-rgb), α) 取色，换主题时不用改动任何一条具体规则。 */
--primary-rgb: 230, 126, 34;
--bg-primary: #f0f2f5;
--bg-secondary: #e8eaed;
--card-bg: #ffffff;
--input-bg: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.92);
--text-primary: #1a1a2e;
--text-secondary: #6b7280;
--border-color: #e5e7eb;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
--scroll-thumb: #d1d5db;
--scroll-thumb-hover: #b0b4ba;
--radius: 12px;
--radius-lg: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -43,11 +57,11 @@ body {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
background: var(--scroll-thumb);
border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #b0b4ba;
background: var(--scroll-thumb-hover);
}
/* ===== 导航栏 ===== */
@@ -62,7 +76,8 @@ body {
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.92);
/* 半透明的导航底：明色主题是白色磨砂，暗色主题自动换成深色磨砂 */
background: var(--nav-bg);
}
.nav-container {
@@ -140,11 +155,11 @@ body {
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: #fff;
box-shadow: 0 4px 14px rgba(230, 126, 34, 0.25);
box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.25);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(230, 126, 34, 0.35);
box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.35);
}
.btn-primary:active {
transform: translateY(0);
css/themes.css
+125
View File
@@ -0,0 +1,125 @@
/* ============================================
文件: css/themes.css
说明: 界面配色主题（5 套经典配色）。
生效方式：<html data-theme="<key>">（由 lib/theme.php 的 themeAttr() 输出）。
本文件必须排在 css/style.css **之后**加载：[data-theme] 与 style.css 里作为
兜底的 :root 优先级相同（都是 0,1,0），靠「后出现者胜」来覆盖。
每套主题都要给全下面这一组变量，缺一个就会退回 style.css 的默认值：
--primary / --primary-dark / --primary-light / --primary-rgb
--bg-primary / --bg-secondary / --card-bg / --input-bg / --nav-bg
--text-primary / --text-secondary / --border-color
--shadow / --shadow-hover
--scroll-thumb / --scroll-thumb-hover
注意 --primary-rgb 必须与 --primary 同色（写成 "R, G, B"），
页面里的淡色底/光晕一律用 rgba(var(--primary-rgb), α) 取色。
另外每套都要声明 color-scheme：它决定浏览器原生控件（下拉、日期选择器、
滚动条）走明色还是暗色渲染 —— 暗色主题少了这一条，日期输入框会是刺眼的白底。
============================================ */
/* ---------- 1. 复古票根（默认）：暖橙 + 浅灰白 ---------- */
[data-theme="ticket"] {
color-scheme: light;
--primary: #e67e22;
--primary-dark: #d35400;
--primary-light: #f39c12;
--primary-rgb: 230, 126, 34;
--bg-primary: #f0f2f5;
--bg-secondary: #e8eaed;
--card-bg: #ffffff;
--input-bg: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.92);
--text-primary: #1a1a2e;
--text-secondary: #6b7280;
--border-color: #e5e7eb;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12);
--scroll-thumb: #d1d5db;
--scroll-thumb-hover: #b0b4ba;
}
/* ---------- 2. 靛蓝：经典蓝 + 冷调浅灰 ---------- */
[data-theme="indigo"] {
color-scheme: light;
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-light: #60a5fa;
--primary-rgb: 37, 99, 235;
--bg-primary: #f4f6fb;
--bg-secondary: #e7ecf6;
--card-bg: #ffffff;
--input-bg: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.92);
--text-primary: #141a2e;
--text-secondary: #64748b;
--border-color: #e2e8f4;
--shadow: 0 4px 24px rgba(30, 58, 138, 0.07), 0 1px 4px rgba(30, 58, 138, 0.05);
--shadow-hover: 0 12px 48px rgba(30, 58, 138, 0.14);
--scroll-thumb: #c7d2e4;
--scroll-thumb-hover: #a8b8d2;
}
/* ---------- 3. 松林：墨绿 + 米灰白 ---------- */
[data-theme="forest"] {
color-scheme: light;
--primary: #2f855a;
--primary-dark: #276749;
--primary-light: #48bb78;
--primary-rgb: 47, 133, 90;
--bg-primary: #f2f6f3;
--bg-secondary: #e6eee9;
--card-bg: #ffffff;
--input-bg: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.92);
--text-primary: #15251d;
--text-secondary: #647a70;
--border-color: #dfe8e2;
--shadow: 0 4px 24px rgba(20, 60, 40, 0.07), 0 1px 4px rgba(20, 60, 40, 0.05);
--shadow-hover: 0 12px 48px rgba(20, 60, 40, 0.14);
--scroll-thumb: #cbd8d0;
--scroll-thumb-hover: #aec2b6;
}
/* ---------- 4. 绛红：酒红 + 暖白 ---------- */
[data-theme="wine"] {
color-scheme: light;
--primary: #b03a5b;
--primary-dark: #8e2d48;
--primary-light: #d45c7d;
--primary-rgb: 176, 58, 91;
--bg-primary: #faf5f6;
--bg-secondary: #f2e7ea;
--card-bg: #ffffff;
--input-bg: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.92);
--text-primary: #26161c;
--text-secondary: #7a6a70;
--border-color: #ece0e4;
--shadow: 0 4px 24px rgba(90, 20, 40, 0.07), 0 1px 4px rgba(90, 20, 40, 0.05);
--shadow-hover: 0 12px 48px rgba(90, 20, 40, 0.14);
--scroll-thumb: #e0cdd4;
--scroll-thumb-hover: #cbb0b9;
}
/* ---------- 5. 暗夜：深灰蓝底 + 靛紫点缀 ---------- */
[data-theme="midnight"] {
color-scheme: dark;
--primary: #7c5cf5;
--primary-dark: #6a45e0;
--primary-light: #9d84f8;
--primary-rgb: 124, 92, 245;
--bg-primary: #14161c;
--bg-secondary: #1b1e26;
--card-bg: #22262f;
--input-bg: #1b1e26;
--nav-bg: rgba(34, 38, 47, 0.92);
--text-primary: #e8eaf0;
--text-secondary: #9aa3b2;
--border-color: #333846;
--shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
--shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.6);
--scroll-thumb: #3a3f4d;
--scroll-thumb-hover: #4a5060;
}