kate522andClaude Opus 5
b56b9bbe37
Traced against the running site (docker theme at AKSRT-theme) with real
computed styles:
- theme_main_radius defaulted to 12, so --main-radius was 12px and every
dropdown panel, card and button was rounder than the reference, which
sets 8px. Default is now 8 in the runtime reader and both schemas.
- The public bundle loads after main.min.css. Its bare img rule replaced
the inline image baseline the menu relies on, and html{overflow-x} made
the root a clipping context that crops the fixed senior mega menu.
Reset is now scoped to content; the horizontal-overflow guard is on body.
- The senior mega menu renders a .container inside the dropdown where the
reference keeps Bootstrap's 15px gutter; the padding-free site-shell
.container rule stripped it, running the card/link grid to the edges.
Rebuilt public.css / public.min.css and the admin SPA.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
196 lines
9.4 KiB
JavaScript
196 lines
9.4 KiB
JavaScript
const bgDefault = {
|
|
color: '',
|
|
image: '',
|
|
position: 'center top',
|
|
repeat: 'no-repeat',
|
|
attachment: 'fixed',
|
|
size: '100%',
|
|
origin: '',
|
|
}
|
|
|
|
const opts = (pairs) => pairs.map(([value, label]) => ({ label, value }))
|
|
|
|
// 与 Settings ThemeSearch::background_css() 的白名单一致。
|
|
const bgField = (key, label, help) => ({
|
|
key,
|
|
label,
|
|
type: 'fieldset',
|
|
default: { ...bgDefault },
|
|
help,
|
|
fields: [
|
|
{ key: 'color', label: '背景颜色', type: 'color', default: '' },
|
|
{ key: 'image', label: '背景图片', type: 'media', default: '' },
|
|
{ key: 'position', label: '背景位置', type: 'select', default: 'center top', options: opts([
|
|
['', '默认'], ['left top', '左上'], ['left center', '左中'], ['left bottom', '左下'],
|
|
['center top', '中上'], ['center center', '居中'], ['center bottom', '中下'],
|
|
['right top', '右上'], ['right center', '右中'], ['right bottom', '右下'],
|
|
]) },
|
|
{ key: 'repeat', label: '背景重复', type: 'select', default: 'no-repeat', options: opts([
|
|
['', '默认'], ['repeat', '重复'], ['no-repeat', '不重复'], ['repeat-x', '水平重复'], ['repeat-y', '垂直重复'],
|
|
]) },
|
|
{ key: 'attachment', label: '背景附着', type: 'select', default: 'fixed', options: opts([
|
|
['', '默认'], ['scroll', '滚动'], ['fixed', '固定'],
|
|
]) },
|
|
{ key: 'size', label: '背景尺寸', type: 'select', default: '100%', options: opts([
|
|
['', '默认'], ['100%', '100%'], ['cover', '覆盖 (cover)'], ['contain', '包含 (contain)'], ['auto', '自动 (auto)'],
|
|
]) },
|
|
{ key: 'origin', label: '背景原点', type: 'select', default: '', options: opts([
|
|
['', '默认'], ['padding-box', 'Padding Box'], ['border-box', 'Border Box'], ['content-box', 'Content Box'],
|
|
]) },
|
|
],
|
|
})
|
|
|
|
// palette 的 label 即色块背景色；ff1856 的色块沿用参考主题的 #fd2760。
|
|
const SKIN_PALETTE = [
|
|
['ff1856', '#fd2760'], ['f04494', '#f04494'], ['ae53f3', '#ae53f3'], ['627bf5', '#627bf5'],
|
|
['00a2e3', '#00a2e3'], ['16b597', '#16b597'], ['36af18', '#36af18'], ['8fb107', '#8fb107'],
|
|
['b18c07', '#b18c07'], ['e06711', '#e06711'], ['f74735', '#f74735'],
|
|
].map(([value, label]) => ({ label, value }))
|
|
|
|
export const layoutSchema = {
|
|
key: 'global.layout',
|
|
title: '显示 & 布局',
|
|
icon: 'fa fas fa-desktop',
|
|
description: '全局布局风格、颜色方案、字体设置。',
|
|
defaults: {
|
|
theme_mode: 'time-auto',
|
|
theme_mode_button: ['pc_nav', 'm_menu'],
|
|
theme_img_bg: { ...bgDefault },
|
|
dark_theme_img_bg: { ...bgDefault },
|
|
theme_skin_custom: '',
|
|
theme_skin: 'f04494',
|
|
dark_theme_skin_custom: '',
|
|
close_backdrop: false,
|
|
theme_main_radius: 8,
|
|
container_max_width: 1200,
|
|
sidebar_enabled: true,
|
|
sidebar_position: 'right',
|
|
sidebar_width: 311,
|
|
sidebar_home_enabled: true,
|
|
sidebar_category_enabled: true,
|
|
sidebar_tag_enabled: true,
|
|
sidebar_single_enabled: true,
|
|
sidebar_page_enabled: true,
|
|
sidebar_search_enabled: true,
|
|
font_family: 'system',
|
|
font_family_custom: '',
|
|
qj_loading: false,
|
|
qj_dh_xs: 'no1',
|
|
},
|
|
groups: [
|
|
{
|
|
key: 'loading-animation',
|
|
title: '加载动画',
|
|
icon: 'fa fas fa-spinner',
|
|
fields: [
|
|
{ key: 'qj_loading', label: '全站加载动画', type: 'switch', default: false, help: '开启后页面加载时显示全屏加载动画覆盖层' },
|
|
{
|
|
key: 'qj_dh_xs',
|
|
label: '加载动画样式',
|
|
type: 'select',
|
|
default: 'no1',
|
|
dependsOn: { key: 'qj_loading', value: true },
|
|
options: [
|
|
{ label: '样式 1', value: 'no1' },
|
|
{ label: '样式 2', value: 'no2' },
|
|
{ label: '样式 3', value: 'no3' },
|
|
{ label: '样式 4', value: 'no4' },
|
|
{ label: '样式 5', value: 'no5' },
|
|
{ label: '样式 6', value: 'no6' },
|
|
{ label: '样式 7', value: 'no7' },
|
|
{ label: '样式 8', value: 'no8' },
|
|
{ label: '样式 9', value: 'no9' },
|
|
{ label: '样式 10', value: 'no10' },
|
|
],
|
|
help: '10 种加载动画样式可选',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'color',
|
|
title: '色彩方案',
|
|
icon: 'fa fas fa-paint-brush',
|
|
fields: [
|
|
{
|
|
key: 'theme_mode',
|
|
label: '主题模式',
|
|
type: 'radio',
|
|
default: 'time-auto',
|
|
options: [
|
|
{ label: '日间亮色主题', value: 'white-theme' },
|
|
{ label: '夜间深色主题', value: 'dark-theme' },
|
|
{ label: '早晚8点自动切换', value: 'time-auto' },
|
|
],
|
|
help: '此处设置为默认风格，实际显示风格以用户设置优先。如需固定风格，则关闭还需下方主题切换按钮',
|
|
},
|
|
{
|
|
key: 'theme_mode_button',
|
|
label: '主题切换按钮',
|
|
type: 'checkbox',
|
|
default: ['pc_nav', 'm_menu'],
|
|
options: [
|
|
{ label: 'PC端顶部导航', value: 'pc_nav' },
|
|
{ label: '移动端弹出菜单', value: 'm_menu' },
|
|
],
|
|
help: '如果关闭此功能，则前端不会显示切换按钮',
|
|
},
|
|
bgField('theme_img_bg', '全局背景图', '注意：要达到良好的效果需要图片与参数配合，同时需注意颜色搭配！配合不好容易降低显示美感'),
|
|
bgField('dark_theme_img_bg', '夜间模式背景图', '如未设置夜间模式背景图，则夜间模式也显示上方背景图'),
|
|
{ key: 'theme_skin_custom', label: '全局主题色', type: 'color', default: '', help: '默认主题高亮颜色。如需选择下方预置颜色，请先清空上方颜色' },
|
|
{
|
|
key: 'theme_skin',
|
|
label: ' ',
|
|
type: 'palette',
|
|
default: 'f04494',
|
|
dependsOn: { key: 'theme_skin_custom', operator: 'empty' },
|
|
options: SKIN_PALETTE,
|
|
},
|
|
{ key: 'dark_theme_skin_custom', label: '夜间模式主题色', type: 'color', default: '', help: '在此可单独设置夜间模式的高亮色，清空此处则使用上方默认高亮色' },
|
|
{ key: 'close_backdrop', label: '全局关闭背景高斯模糊', type: 'switch', default: false, help: '在支持的浏览器上部分UI(例如导航栏)会显示背景高斯模糊的特效，但此功能比较消耗浏览器性能。同时系统会自动检测用户浏览器性能情况，如果性能较差，将自动关闭此特效，以提供更流畅的体验' },
|
|
{ key: 'theme_main_radius', label: '卡片圆角', type: 'spinner', default: 8, min: 0, max: 30, step: 1, unit: 'PX', description: '页面卡片的圆角尺寸' },
|
|
],
|
|
},
|
|
{
|
|
key: 'layout',
|
|
title: '布局设置',
|
|
icon: 'fa fas fa-columns',
|
|
fields: [
|
|
{ key: 'container_max_width', label: '内容最大宽度', type: 'number', default: 1200, min: 1200, max: 2200, step: 50, unit: 'PX', help: '页面布局的最大宽度，可设置 1200–2200PX。宽度过大会造成显示不协调，非特殊需求请勿调整。' },
|
|
{ key: 'sidebar_enabled', label: '开启侧边栏', type: 'switch', default: true },
|
|
{ key: 'sidebar_position', label: '侧边栏位置', type: 'radio', default: 'right', dependsOn: { key: 'sidebar_enabled', value: true }, options: [
|
|
{ label: '左侧', value: 'left' },
|
|
{ label: '右侧', value: 'right' },
|
|
]},
|
|
{ key: 'sidebar_width', label: '侧边栏宽度 (px)', type: 'number', default: 300, min: 200, max: 400, step: 10, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
],
|
|
},
|
|
{
|
|
key: 'sidebar-scope',
|
|
title: '侧边栏显示范围',
|
|
icon: 'fa fas fa-th-list',
|
|
fields: [
|
|
{ key: 'sidebar_home_enabled', label: '首页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
{ key: 'sidebar_category_enabled', label: '分类页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
{ key: 'sidebar_tag_enabled', label: '标签页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
{ key: 'sidebar_single_enabled', label: '文章页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
{ key: 'sidebar_page_enabled', label: '页面侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
{ key: 'sidebar_search_enabled', label: '搜索页侧边栏', type: 'switch', default: true, dependsOn: { key: 'sidebar_enabled', value: true } },
|
|
],
|
|
},
|
|
{
|
|
key: 'typography',
|
|
title: '字体设置',
|
|
icon: 'fa fas fa-font',
|
|
fields: [
|
|
{ key: 'font_family', label: '正文字体', type: 'select', default: 'system', options: [
|
|
{ label: '系统默认', value: 'system' },
|
|
{ label: '思源黑体', value: 'noto-sans-sc' },
|
|
{ label: '思源宋体', value: 'noto-serif-sc' },
|
|
{ label: '自定义', value: 'custom' },
|
|
], help: '思源字体不会远程加载，访客设备未安装时回退到系统字体。' },
|
|
{ key: 'font_family_custom', label: '自定义字体', type: 'input', default: '', placeholder: '例如："LXGW WenKai", "PingFang SC", sans-serif', dependsOn: { key: 'font_family', value: 'custom' }, help: 'CSS font-family 字体栈，多个字体用英文逗号分隔；留空使用系统字体。' },
|
|
],
|
|
},
|
|
],
|
|
}
|