fix(layout): align color scheme, content width and fonts with reference theme
- Color scheme: zibll field order/labels, theme_skin_custom overrides palette, hex palette swatches, dark_theme_skin_custom, light/dark background images, close_backdrop via body.fps-accelerat, theme_main_radius drives --main-radius - Emit --theme-color / --focus-shadow-color / --focus-color-opacity* vars - Drop border_radius, primary_color readers and legacy value maps - Content max width: free 1200-2200 number field; fix font family/custom stack Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed
1 parent
6da08d9d4f
commit
74021d26bb
8 files changed
+319
-221
No files matched your search
@@ -101,38 +101,26 @@ class GlobalSchema {
|
||||
'option_key' => 'aksrt_settings',
|
||||
'groups' => [
|
||||
['key' => 'color', 'title' => '色彩方案', 'fields' => [
|
||||
['key' => 'theme_mode', 'label' => '默认主题模式', 'type' => 'radio', 'default' => 'time-auto', 'options' => [
|
||||
['label' => '浅色', 'value' => 'white-theme'],
|
||||
['label' => '深色', 'value' => 'dark-theme'],
|
||||
['label' => '跟随系统', 'value' => 'time-auto'],
|
||||
['key' => 'theme_mode', 'label' => '主题模式', 'type' => 'radio', 'default' => 'time-auto', 'help' => '此处设置为默认风格，实际显示风格以用户设置优先。如需固定风格，则关闭还需下方主题切换按钮', 'options' => [
|
||||
['label' => '日间亮色主题', 'value' => 'white-theme'],
|
||||
['label' => '夜间深色主题', 'value' => 'dark-theme'],
|
||||
['label' => '早晚8点自动切换', 'value' => 'time-auto'],
|
||||
]],
|
||||
['key' => 'theme_mode_button', 'label' => '主题切换按钮位置', 'type' => 'checkbox', 'default' => ['pc_nav', 'm_menu'], 'options' => [
|
||||
['label' => 'PC 顶部导航', 'value' => 'pc_nav'],
|
||||
['label' => '移动端菜单', 'value' => 'm_menu'],
|
||||
['key' => 'theme_mode_button', 'label' => '主题切换按钮', 'type' => 'checkbox', 'default' => ['pc_nav', 'm_menu'], 'help' => '如果关闭此功能，则前端不会显示切换按钮', 'options' => [
|
||||
['label' => 'PC端顶部导航', 'value' => 'pc_nav'],
|
||||
['label' => '移动端弹出菜单', 'value' => 'm_menu'],
|
||||
]],
|
||||
['key' => 'theme_skin', 'label' => '预设主题色', 'type' => 'palette', 'default' => 'f04494', 'options' => [
|
||||
['label' => '玫红', 'value' => 'ff1856'],
|
||||
['label' => '粉色', 'value' => 'f04494'],
|
||||
['label' => '紫色', 'value' => 'ae53f3'],
|
||||
['label' => '靛蓝', 'value' => '627bf5'],
|
||||
['label' => '天蓝', 'value' => '00a2e3'],
|
||||
['label' => '青绿', 'value' => '16b597'],
|
||||
['label' => '翠绿', 'value' => '36af18'],
|
||||
['label' => '黄绿', 'value' => '8fb107'],
|
||||
['label' => '棕金', 'value' => 'b18c07'],
|
||||
['label' => '橘橙', 'value' => 'e06711'],
|
||||
['label' => '朱红', 'value' => 'f74735'],
|
||||
]],
|
||||
['key' => 'primary_color', 'label' => '自定义主题色', 'type' => 'color', 'default' => '#f04494'],
|
||||
['key' => 'dark_primary_color', 'label' => '暗色模式主题色', 'type' => 'color', 'default' => '#f04494'],
|
||||
['key' => 'border_radius', 'label' => '全局圆角', 'type' => 'slider', 'default' => 8, 'min' => 0, 'max' => 20],
|
||||
['key' => 'theme_main_radius', 'label' => '卡片圆角 (px)', 'type' => 'number', 'default' => 12, 'min' => 0, 'max' => 30, 'help' => '独立卡片圆角，不填则使用全局圆角 +4'],
|
||||
['key' => 'close_backdrop', 'label' => '关闭毛玻璃效果', 'type' => 'switch', 'default' => false],
|
||||
self::background_field('theme_img_bg', '全局背景图', '注意：要达到良好的效果需要图片与参数配合，同时需注意颜色搭配！配合不好容易降低显示美感'),
|
||||
self::background_field('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' => self::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' => 12, 'min' => 0, 'max' => 30, 'step' => 1, 'unit' => 'PX', 'description' => '页面卡片的圆角尺寸'],
|
||||
]],
|
||||
['key' => 'layout', 'title' => '布局设置', 'fields' => [
|
||||
// 0（全宽）与 1200–2200 与设置页下拉选项、Settings::container_max_width() 归一化区间一致；
|
||||
// 上限低于 UI 可选项会让后台保存被校验拒绝，页面宽度卡在旧值。
|
||||
['key' => 'container_max_width', 'label' => '内容最大宽度', 'type' => 'number', 'default' => 1200, 'min' => 0, 'max' => 2200],
|
||||
// 1200–2200 与 Settings::container_max_width() 归一化区间一致。
|
||||
['key' => 'container_max_width', 'label' => '内容最大宽度', 'type' => 'number', 'default' => 1200, 'min' => 1200, 'max' => 2200, 'step' => 50, 'unit' => 'PX'],
|
||||
['key' => 'sidebar_enabled', 'label' => '开启侧边栏', 'type' => 'switch', 'default' => true],
|
||||
['key' => 'sidebar_position', 'label' => '侧边栏位置', 'type' => 'radio', 'default' => 'right', 'options' => [
|
||||
['label' => '左侧', 'value' => 'left'],
|
||||
@@ -153,6 +141,7 @@ class GlobalSchema {
|
||||
['label' => '思源宋体', 'value' => 'noto-serif-sc'],
|
||||
['label' => '自定义', 'value' => 'custom'],
|
||||
]],
|
||||
['key' => 'font_family_custom', 'label' => '自定义字体', 'type' => 'input', 'default' => '', 'dependsOn' => ['key' => 'font_family', 'value' => 'custom']],
|
||||
]],
|
||||
['key' => 'performance', 'title' => '性能优化', 'fields' => [
|
||||
['key' => 'qj_loading', 'label' => '全站加载动画', 'type' => 'switch', 'default' => false],
|
||||
@@ -458,4 +447,57 @@ class GlobalSchema {
|
||||
],
|
||||
];
|
||||
}
|
||||
/** 与 assets/admin/src/schema/sections/global/layout.js 的 skinPalette 保持一致；label 即色块颜色。 */
|
||||
private static function skin_palette(): array {
|
||||
$map = [
|
||||
'ff1856' => '#fd2760', 'f04494' => '#f04494', 'ae53f3' => '#ae53f3', '627bf5' => '#627bf5',
|
||||
'00a2e3' => '#00a2e3', '16b597' => '#16b597', '36af18' => '#36af18', '8fb107' => '#8fb107',
|
||||
'b18c07' => '#b18c07', 'e06711' => '#e06711', 'f74735' => '#f74735',
|
||||
];
|
||||
$options = [];
|
||||
foreach ($map as $value => $label) {
|
||||
$options[] = ['label' => $label, 'value' => (string) $value];
|
||||
}
|
||||
return $options;
|
||||
}
|
||||
|
||||
/** 背景图配置（对齐参考主题 background 字段：颜色/图片/位置/重复/附着/尺寸/原点）。 */
|
||||
private static function background_field(string $key, string $label, string $help): array {
|
||||
$opts = static function (array $map): array {
|
||||
$out = [['label' => '默认', 'value' => '']];
|
||||
foreach ($map as $value => $text) {
|
||||
$out[] = ['label' => $text, 'value' => $value];
|
||||
}
|
||||
return $out;
|
||||
};
|
||||
return [
|
||||
'key' => $key, 'label' => $label, 'type' => 'fieldset', 'help' => $help,
|
||||
// 子键与 layout.js bgField 及 ThemeSearch::background_css() 白名单一致。
|
||||
'default' => [
|
||||
'color' => '', 'image' => '', 'position' => 'center top',
|
||||
'repeat' => 'no-repeat', 'attachment' => 'fixed', 'size' => '100%', 'origin' => '',
|
||||
],
|
||||
'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',
|
||||
])],
|
||||
],
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user