参考蔚蓝档案 JP 首页(bluearchive.jp)的做法:整个视口是一张场景插画,UI 浮在场景之上, 而不是"白底 + 留白里贴几个人物"。之前几版反复调摆位都显得怪,根源就是缺了这层场景—— 人物没有环境,怎么摆都是贴纸。 - 新增教室场景两张(1920×1080 / 720×1003,共 28KB):生成后裁掉右下角水印、 混白 38%、模糊 1.4px,保证白卡片仍有对比度; - 卡片与顶栏改半透明白 + backdrop-filter 磨砂(深色关闭,背后没场景时半透明只会变浑); - 人物站在场景左侧地面(340px,离底边 36px)+ 椭圆接触阴影; - 浅色不再叠平铺纹样(压在实景上会变噪点),pattern.svg 删除,深色保留 pattern-dark; - 顺带修 ruleBody 不剥 CSS 注释的缺陷:令牌前写注释会让 tokenValue 取到粘连键, 色块预览静默失效(新增 TestRuleBodyIgnoresComments 守住); - StaticVersion → 20261019q
228 lines
6.5 KiB
Go
228 lines
6.5 KiB
Go
// Package theme 维护箱主主题的注册表与取值回退。
|
|
//
|
|
// 一个主题就是一个 CSS 文件(static/css/themes/<slug>.css),只覆盖设计令牌:
|
|
// 配色、页面背景图/图案,不涉及布局。新增主题不需要改任何模板或 Go 代码,
|
|
// 只要放文件并在 [theme] available 里登记。
|
|
package theme
|
|
|
|
import (
|
|
"io/fs"
|
|
"regexp"
|
|
"strings"
|
|
"sync"
|
|
|
|
"github.com/sirupsen/logrus"
|
|
|
|
"github.com/tamakyi/TamaBox/internal/conf"
|
|
"github.com/tamakyi/TamaBox/static"
|
|
)
|
|
|
|
const (
|
|
// DefaultSlug 内置默认主题:不加载任何 css,等价于站点原本的外观。
|
|
DefaultSlug = "default"
|
|
|
|
themeCSSDir = "css/themes/"
|
|
)
|
|
|
|
var (
|
|
slugRe = regexp.MustCompile(`^[a-z0-9][a-z0-9-]{0,31}$`)
|
|
// 仅接受纯色值,避免把主题文件里的任意内容拼进设置页的 style 属性。
|
|
colorRe = regexp.MustCompile(`^(#[0-9a-fA-F]{3,8}|rgba?\([0-9.,\s%/]+\))$`)
|
|
// 主题 css 里的块注释;取令牌前先剥掉,避免注释与令牌粘连
|
|
commentRe = regexp.MustCompile(`(?s)/\*.*?\*/`)
|
|
)
|
|
|
|
// Theme 是设置页需要的一项。名称由 i18n 键 theme.name.<slug> 提供,
|
|
// Swatch 是可直接放进 style 的预览背景(取不到颜色时为空)。
|
|
type Theme struct {
|
|
Slug string
|
|
Swatch string
|
|
}
|
|
|
|
var (
|
|
once sync.Once
|
|
themes []Theme
|
|
bySlug map[string]Theme
|
|
siteDef string // 站点默认主题;空串表示「基础外观,不加载主题 css」
|
|
)
|
|
|
|
func load() {
|
|
once.Do(func() {
|
|
themes, siteDef, bySlug = build(conf.Theme.Default, conf.Theme.Available)
|
|
})
|
|
}
|
|
|
|
// build 是注册表的纯函数形态,便于单测直接喂配置。
|
|
func build(defaultSlug, available string) ([]Theme, string, map[string]Theme) {
|
|
bySlug := make(map[string]Theme)
|
|
var list []Theme
|
|
|
|
add := func(slug string) {
|
|
if _, ok := bySlug[slug]; ok {
|
|
return
|
|
}
|
|
css, err := static.FS.ReadFile(themeCSSDir + slug + ".css")
|
|
if err != nil {
|
|
logrus.WithField("theme", slug).Warn("主题文件不存在,已从可用列表忽略")
|
|
return
|
|
}
|
|
t := Theme{Slug: slug, Swatch: swatchOf(string(css), slug)}
|
|
bySlug[slug] = t
|
|
list = append(list, t)
|
|
}
|
|
|
|
for _, raw := range strings.Split(available, ",") {
|
|
slug := normalize(raw)
|
|
if slug == "" {
|
|
continue
|
|
}
|
|
add(slug)
|
|
}
|
|
|
|
def := normalize(defaultSlug)
|
|
if def == DefaultSlug || def == "" {
|
|
def = ""
|
|
} else if _, ok := bySlug[def]; !ok {
|
|
logrus.WithField("theme", def).Warn("站点默认主题不可用,回退基础外观")
|
|
def = ""
|
|
}
|
|
|
|
reportRegistry(list, bySlug)
|
|
return list, def, bySlug
|
|
}
|
|
|
|
// reportRegistry 把注册表状态写进启动日志。
|
|
// 没有这段时,主题文件已随二进制发布、却忘了在 [theme] available 登记,
|
|
// 表现只是"设置页里找不到这个主题",从日志里完全看不出原因。
|
|
func reportRegistry(list []Theme, bySlug map[string]Theme) {
|
|
enabled := make([]string, 0, len(list))
|
|
for _, t := range list {
|
|
enabled = append(enabled, t.Slug)
|
|
}
|
|
logrus.WithField("enabled", strings.Join(enabled, ",")).Info("主题注册表已加载")
|
|
|
|
var pending []string
|
|
for _, slug := range discover() {
|
|
if slug == DefaultSlug {
|
|
continue
|
|
}
|
|
if _, ok := bySlug[slug]; ok {
|
|
continue
|
|
}
|
|
pending = append(pending, slug)
|
|
}
|
|
if len(pending) > 0 {
|
|
logrus.WithFields(logrus.Fields{
|
|
"themes": strings.Join(pending, ","),
|
|
"available": strings.Join(append(enabled, pending...), ","),
|
|
}).Warn("[theme] available 未登记以下主题,它们不会出现在设置页")
|
|
}
|
|
}
|
|
|
|
// discover 列出内嵌的主题 css(不符合 slug 规则的模板文件如 _scaffold.css 会被跳过)。
|
|
func discover() []string {
|
|
matches, err := fs.Glob(static.FS, themeCSSDir+"*.css")
|
|
if err != nil {
|
|
return nil
|
|
}
|
|
slugs := make([]string, 0, len(matches))
|
|
for _, m := range matches {
|
|
slug := strings.TrimSuffix(strings.TrimPrefix(m, themeCSSDir), ".css")
|
|
if slugRe.MatchString(slug) {
|
|
slugs = append(slugs, slug)
|
|
}
|
|
}
|
|
return slugs
|
|
}
|
|
|
|
func normalize(slug string) string {
|
|
slug = strings.ToLower(strings.TrimSpace(slug))
|
|
if !slugRe.MatchString(slug) {
|
|
if slug != "" {
|
|
logrus.WithField("theme", slug).Warn("主题 slug 非法(只允许小写字母/数字/连字符),已忽略")
|
|
}
|
|
return ""
|
|
}
|
|
return slug
|
|
}
|
|
|
|
// swatchOf 从主题 css 的浅色块里取底色与主色,拼成设置页的小预览。
|
|
// 取不到(或颜色格式可疑)就返回空串,模板退化为纯色占位。
|
|
func swatchOf(css, slug string) string {
|
|
block := ruleBody(css, `html[data-theme-style="`+slug+`"]`)
|
|
if block == "" {
|
|
return ""
|
|
}
|
|
bg := tokenValue(block, "--tb-bg")
|
|
primary := tokenValue(block, "--tb-primary")
|
|
if !colorRe.MatchString(bg) || !colorRe.MatchString(primary) {
|
|
return ""
|
|
}
|
|
return "linear-gradient(135deg, " + bg + " 0 45%, " + primary + " 45% 100%)"
|
|
}
|
|
|
|
// ruleBody 返回 selector 对应的第一个声明块内容(主题令牌块内不含嵌套规则)。
|
|
func ruleBody(css, selector string) string {
|
|
i := strings.Index(css, selector)
|
|
if i < 0 {
|
|
return ""
|
|
}
|
|
open := strings.IndexByte(css[i:], '{')
|
|
if open < 0 {
|
|
return ""
|
|
}
|
|
start := i + open + 1
|
|
end := strings.IndexByte(css[start:], '}')
|
|
if end < 0 {
|
|
return ""
|
|
}
|
|
// 注释必须剥掉:tokenValue 按 ";" 切分再按 ":" 取值,行内注释会和后面的令牌粘成一段,
|
|
// 取到的键变成 "/* ... */ --tb-surface",色块预览就静默失效。
|
|
return commentRe.ReplaceAllString(css[start:start+end], "")
|
|
}
|
|
|
|
func tokenValue(block, name string) string {
|
|
for _, line := range strings.Split(block, ";") {
|
|
kv := strings.SplitN(line, ":", 2)
|
|
if len(kv) != 2 || strings.TrimSpace(kv[0]) != name {
|
|
continue
|
|
}
|
|
return strings.TrimSpace(kv[1])
|
|
}
|
|
return ""
|
|
}
|
|
|
|
// List 返回设置页可选项(顺序与 [theme] available 一致)。
|
|
func List() []Theme {
|
|
load()
|
|
return themes
|
|
}
|
|
|
|
// IsAvailable 判断 slug 是否在白名单内且文件存在。
|
|
func IsAvailable(slug string) bool {
|
|
load()
|
|
_, ok := bySlug[strings.ToLower(strings.TrimSpace(slug))]
|
|
return ok
|
|
}
|
|
|
|
// Resolve 返回该页面要加载的主题 slug;空串表示不加载主题 css(基础外观)。
|
|
//
|
|
// 回退顺序:箱主选择 > 站点默认 > 基础外观。
|
|
// 注意 "" 与 "default" 语义不同:"" 是「没选,跟随站点默认」,
|
|
// "default" 是箱主明确选择基础外观(即使站点默认是别的主题也不覆盖)。
|
|
func Resolve(userTheme string) string {
|
|
load()
|
|
return resolve(userTheme, siteDef, bySlug)
|
|
}
|
|
|
|
func resolve(userTheme, siteDef string, available map[string]Theme) string {
|
|
slug := strings.ToLower(strings.TrimSpace(userTheme))
|
|
if slug == DefaultSlug {
|
|
return ""
|
|
}
|
|
if _, ok := available[slug]; ok {
|
|
return slug
|
|
}
|
|
return siteDef
|
|
}
|