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
@@ -1,3 +1,52 @@
|
||||
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: '显示 & 布局',
|
||||
@@ -6,10 +55,12 @@ export const layoutSchema = {
|
||||
defaults: {
|
||||
theme_mode: 'time-auto',
|
||||
theme_mode_button: ['pc_nav', 'm_menu'],
|
||||
primary_color: '#1890ff',
|
||||
theme_img_bg: { ...bgDefault },
|
||||
dark_theme_img_bg: { ...bgDefault },
|
||||
theme_skin_custom: '',
|
||||
theme_skin: 'f04494',
|
||||
dark_primary_color: '',
|
||||
border_radius: 8,
|
||||
dark_theme_skin_custom: '',
|
||||
close_backdrop: false,
|
||||
theme_main_radius: 12,
|
||||
container_max_width: 1200,
|
||||
sidebar_enabled: true,
|
||||
@@ -22,6 +73,7 @@ export const layoutSchema = {
|
||||
sidebar_page_enabled: true,
|
||||
sidebar_search_enabled: true,
|
||||
font_family: 'system',
|
||||
font_family_custom: '',
|
||||
qj_loading: false,
|
||||
qj_dh_xs: 'no1',
|
||||
},
|
||||
@@ -61,50 +113,41 @@ export const layoutSchema = {
|
||||
fields: [
|
||||
{
|
||||
key: 'theme_mode',
|
||||
label: '默认主题模式',
|
||||
label: '主题模式',
|
||||
type: 'radio',
|
||||
default: 'time-auto',
|
||||
options: [
|
||||
{ label: '浅色', value: 'white-theme' },
|
||||
{ label: '深色', value: 'dark-theme' },
|
||||
{ label: '跟随系统', value: 'time-auto' },
|
||||
{ label: '日间亮色主题', value: 'white-theme' },
|
||||
{ label: '夜间深色主题', value: 'dark-theme' },
|
||||
{ label: '早晚8点自动切换', value: 'time-auto' },
|
||||
],
|
||||
help: '此处设置为默认风格，实际显示风格以用户设置优先。如需固定风格，则关闭还需下方主题切换按钮',
|
||||
},
|
||||
{
|
||||
key: 'theme_mode_button',
|
||||
label: '主题切换按钮位置',
|
||||
label: '主题切换按钮',
|
||||
type: 'checkbox',
|
||||
default: ['pc_nav', 'm_menu'],
|
||||
options: [
|
||||
{ label: 'PC 顶部导航', value: 'pc_nav' },
|
||||
{ label: '移动端菜单', value: 'm_menu' },
|
||||
{ label: 'PC端顶部导航', value: 'pc_nav' },
|
||||
{ label: '移动端弹出菜单', value: 'm_menu' },
|
||||
],
|
||||
help: '控制主题切换按钮在哪些位置显示',
|
||||
help: '如果关闭此功能，则前端不会显示切换按钮',
|
||||
},
|
||||
{ key: 'primary_color', label: '主题色', type: 'color', default: '#f04494', help: '按钮、链接和强调元素的主色调' },
|
||||
bgField('theme_img_bg', '全局背景图', '注意：要达到良好的效果需要图片与参数配合，同时需注意颜色搭配！配合不好容易降低显示美感'),
|
||||
bgField('dark_theme_img_bg', '夜间模式背景图', '如未设置夜间模式背景图，则夜间模式也显示上方背景图'),
|
||||
{ key: 'theme_skin_custom', label: '全局主题色', type: 'color', default: '', help: '默认主题高亮颜色。如需选择下方预置颜色，请先清空上方颜色' },
|
||||
{
|
||||
key: 'theme_skin',
|
||||
label: '预设主题色',
|
||||
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' },
|
||||
],
|
||||
help: '选择预设主题色，将覆盖上方自定义主题色',
|
||||
dependsOn: { key: 'theme_skin_custom', operator: 'empty' },
|
||||
options: SKIN_PALETTE,
|
||||
},
|
||||
{ key: 'dark_primary_color', label: '暗色模式主题色', type: 'color', default: '', help: '暗色模式下独立的主题色，留空则跟随浅色模式' },
|
||||
{ key: 'border_radius', label: '全局圆角 (px)', type: 'slider', min: 0, max: 20, step: 1, default: 8 },
|
||||
{ key: 'theme_main_radius', label: '卡片圆角 (px)', type: 'number', min: 0, max: 30, default: 12, help: '独立卡片圆角，留空则使用全局圆角 +4' },
|
||||
{ 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: '页面卡片的圆角尺寸' },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -112,16 +155,7 @@ export const layoutSchema = {
|
||||
title: '布局设置',
|
||||
icon: 'fa fas fa-columns',
|
||||
fields: [
|
||||
{ key: 'container_max_width', label: '内容最大宽度 (px)', type: 'select', default: 1200, options: [
|
||||
{ label: '1200px', value: 1200 },
|
||||
{ label: '1320px', value: 1320 },
|
||||
{ label: '1440px', value: 1440 },
|
||||
{ label: '1600px', value: 1600 },
|
||||
{ label: '1800px', value: 1800 },
|
||||
{ label: '2000px', value: 2000 },
|
||||
{ label: '2200px', value: 2200 },
|
||||
{ label: '全宽', value: 0 },
|
||||
]},
|
||||
{ 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' },
|
||||
@@ -153,7 +187,8 @@ export const layoutSchema = {
|
||||
{ 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 字体栈，多个字体用英文逗号分隔；留空使用系统字体。' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in new issue
Block a user