theme v1
This commit is contained in:
tamakyi
@@ -0,0 +1,176 @@
|
||||
// Package theme 维护箱主主题的注册表与取值回退。
|
||||
//
|
||||
// 一个主题就是一个 CSS 文件（static/css/themes/<slug>.css），只覆盖设计令牌：
|
||||
// 配色、页面背景图/图案，不涉及布局。新增主题不需要改任何模板或 Go 代码，
|
||||
// 只要放文件并在 [theme] available 里登记。
|
||||
package theme
|
||||
|
||||
import (
|
||||
"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%/]+\))$`)
|
||||
)
|
||||
|
||||
// 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 = ""
|
||||
}
|
||||
return list, def, bySlug
|
||||
}
|
||||
|
||||
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 ""
|
||||
}
|
||||
return 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
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
package theme
|
||||
|
||||
import (
|
||||
"io/fs"
|
||||
"strings"
|
||||
"testing"
|
||||
|
||||
"github.com/stretchr/testify/assert"
|
||||
"github.com/stretchr/testify/require"
|
||||
|
||||
"github.com/tamakyi/TamaBox/static"
|
||||
)
|
||||
|
||||
// 主题必须自带的一套颜色令牌（形状/字体/阴影允许继承基础层）。
|
||||
var requiredTokens = []string{
|
||||
"--tb-bg", "--tb-surface", "--tb-surface-2", "--tb-surface-hover", "--tb-border",
|
||||
"--tb-text", "--tb-text-secondary", "--tb-text-muted",
|
||||
"--tb-primary", "--tb-primary-weak",
|
||||
}
|
||||
|
||||
func TestBuildAvailable(t *testing.T) {
|
||||
list, def, _ := build("sakura", "default, sakura ,bad_Slug,missing")
|
||||
|
||||
assert.Equal(t, "sakura", def, "站点默认应取配置值")
|
||||
var slugs []string
|
||||
for _, item := range list {
|
||||
slugs = append(slugs, item.Slug)
|
||||
}
|
||||
// bad_Slug 非法、missing 没有 css 文件，都应被忽略
|
||||
assert.Equal(t, []string{"default", "sakura"}, slugs)
|
||||
}
|
||||
|
||||
func TestBuildInvalidDefault(t *testing.T) {
|
||||
_, def, _ := build("does-not-exist", "sakura")
|
||||
assert.Equal(t, "", def, "默认主题不可用时回退基础外观")
|
||||
|
||||
_, def, _ = build("default", "default,sakura")
|
||||
assert.Equal(t, "", def, "default 语义即基础外观，不应产生 css 请求")
|
||||
}
|
||||
|
||||
func TestResolve(t *testing.T) {
|
||||
// 站点默认是 sakura
|
||||
themes, siteDef, index := build("sakura", "default,sakura")
|
||||
require.Equal(t, "sakura", siteDef)
|
||||
require.Contains(t, index, "sakura")
|
||||
require.NotEmpty(t, themes)
|
||||
|
||||
assert.Equal(t, "sakura", resolve("", siteDef, index), "未选择时跟随站点默认")
|
||||
assert.Equal(t, "sakura", resolve("SAKURA", siteDef, index), "大小写不敏感")
|
||||
assert.Equal(t, "", resolve("default", siteDef, index), "显式选 default = 基础外观，不回退站点默认")
|
||||
assert.Equal(t, "sakura", resolve("nope", siteDef, index), "非法值回退站点默认")
|
||||
|
||||
// 站点默认是基础外观
|
||||
_, def2, index2 := build("default", "default,sakura")
|
||||
assert.Equal(t, "", resolve("", def2, index2))
|
||||
assert.Equal(t, "sakura", resolve("sakura", def2, index2))
|
||||
}
|
||||
|
||||
// TestThemeCSSComplete 防止「复制底稿只写了浅色块」这类问题：
|
||||
// 半套主题不会报错，只会让深色模式变成浅色配色。
|
||||
func TestThemeCSSComplete(t *testing.T) {
|
||||
entries, err := fs.ReadDir(static.FS, strings.TrimSuffix(themeCSSDir, "/"))
|
||||
require.NoError(t, err)
|
||||
require.NotEmpty(t, entries)
|
||||
|
||||
for _, e := range entries {
|
||||
name := e.Name()
|
||||
if !strings.HasSuffix(name, ".css") {
|
||||
continue
|
||||
}
|
||||
slug := strings.TrimSuffix(name, ".css")
|
||||
// _scaffold.css 是给人复制的模板，default.css 永不加载（仅提供色块预览）
|
||||
if strings.HasPrefix(slug, "_") || slug == DefaultSlug {
|
||||
continue
|
||||
}
|
||||
|
||||
raw, err := static.FS.ReadFile(themeCSSDir + name)
|
||||
require.NoError(t, err)
|
||||
css := string(raw)
|
||||
|
||||
light := ruleBody(css, `html[data-theme-style="`+slug+`"]`)
|
||||
require.NotEmpty(t, light, "%s：缺少浅色块 html[data-theme-style=\"%s\"]", name, slug)
|
||||
|
||||
dark := ruleBody(css, `html[data-theme="dark"][data-theme-style="`+slug+`"]`)
|
||||
require.NotEmpty(t, dark, "%s：缺少深色块 html[data-theme=\"dark\"][data-theme-style=\"%s\"]", name, slug)
|
||||
|
||||
for _, tok := range requiredTokens {
|
||||
assert.NotEmpty(t, tokenValue(light, tok), "%s 浅色块缺少 %s", name, tok)
|
||||
assert.NotEmpty(t, tokenValue(dark, tok), "%s 深色块缺少 %s", name, tok)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func TestSwatch(t *testing.T) {
|
||||
raw, err := static.FS.ReadFile(themeCSSDir + "sakura.css")
|
||||
require.NoError(t, err)
|
||||
sw := swatchOf(string(raw), "sakura")
|
||||
assert.True(t, strings.HasPrefix(sw, "linear-gradient("), "swatch 应为渐变串，实际 %q", sw)
|
||||
assert.Contains(t, sw, "#e5678f")
|
||||
|
||||
assert.Equal(t, "", swatchOf("/* 空文件 */", "sakura"), "取不到颜色时返回空串")
|
||||
assert.Equal(t, "", swatchOf(`html[data-theme-style="x"] { --tb-bg: url(evil); --tb-primary: #fff; }`, "x"),
|
||||
"非色值内容不得进入 swatch")
|
||||
}
|
||||
Reference in New Issue
Block a user