diff --git a/.gitignore b/.gitignore
index 386874cf..b604ccf9 100755
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,8 @@
/resources/character-img/*/upload/
/resources/help/help-list.js
/resources/help/help-cfg.js
+/resources/help/theme/*
+!/resources/help/theme/default
/config/character.js
/config/profile.js
-/config/help.js
+/config/help.js
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08d27dc7..546771ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,12 @@
# 2.0 Alpha.8
* `#喵喵帮助`配置功能升级
- * 为统一配置目录，配置文件迁移至**config/help.js**
- * 如之前自定义过配置文件，原目录下的help-cfg.js仍能够识别，但建议移至新目录以使用更多功能
- * 支持帮助文字、背景颜色通过配置自定义，防止后续css冲突
+ * 支持自定义帮助皮肤包，皮肤目录为**resources/help/theme**
+ * 若有多套皮肤包，默认随机使用，可通过**config/help.js**指定
+ * 支持配帮助文字颜色及容器颜色与透明度
* 支持图片毛玻璃效果，默认开启，可通过配置关闭
+ * **注意1：** 如之前更改过底图可能会在更新后失效，可将自定义底图放置在皮肤包目录内
+ * **注意2：** 为统一配置目录，帮助配置文件迁移至**config/help.js**，如之前自定义过配置文件，help-cfg.js仍能够识别，但建议移至新配置目录以使用后续更多功能
* `#上传深渊` 页面样式调整
* 队伍人数少于4人时展示样式优化，样式未完全稳定
diff --git a/apps/help.js b/apps/help.js
index a7a1401d..c6063f71 100644
--- a/apps/help.js
+++ b/apps/help.js
@@ -1,7 +1,7 @@
import lodash from 'lodash'
import fs from 'fs'
import { Cfg, Version, Common, Data, App } from '../components/index.js'
-import customStyle from './help/style.js'
+import Theme from './help/theme.js'
let app = App.init({
id: 'help',
@@ -74,15 +74,11 @@ async function help (e) {
helpGroup.push(group)
})
-
- let colCount = Math.min(5, Math.max(parseInt(helpConfig?.columnCount) || 3, 2))
- let style = customStyle(diyCfg.helpCfg?.style || {}, sysCfg.helpCfg?.style || {}, colCount)
-
+ let themeData = await Theme.getThemeData(diyCfg.helpCfg || {}, sysCfg.helpCfg || {})
return await Common.render('help/index', {
helpCfg: helpConfig,
helpGroup,
- style,
- colCount,
+ ...themeData,
element: 'default'
}, { e, scale: 1.2 })
}
diff --git a/apps/help/style.js b/apps/help/style.js
deleted file mode 100644
index a7132ed7..00000000
--- a/apps/help/style.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default function (diyStyle, sysStyle, columnCount = 3) {
- let width = Math.min(1360, Math.max(800, columnCount * 266 + 30))
- let ret = [`body,.container{width:${width}px}.help-table .td,.help-table .th{width:${100 / columnCount}%}`]
- let css = function (sel, css, key, def, fn) {
- let val = diyStyle[key] || sysStyle[key] || def
- if (fn) {
- val = fn(val)
- }
- ret.push(`${sel}{${css}:${val}}`)
- }
- css('.help-title,.help-group', 'color', 'fontColor', '#ceb78b')
- css('.help-title,.help-group', 'text-shadow', 'contBgColor', 'rgba(6, 21, 31, 0.5)', (c) => {
- c = c.replace(/,[^,]+\)/, ',1)')
- return `0 0 1px ${c};`
- })
- css('.help-desc', 'color', 'descColor', '#eee')
- css('.cont-box', 'background', 'contBgColor', 'rgba(43, 52, 61, 0.8)')
- css('.cont-box', 'backdrop-filter', 'contBgBlur', 3, (n) => `blur(${n}px)`)
- css('.help-group', 'background', 'headerBgColor', 'rgba(34, 41, 51, .4)')
- css('.help-table .tr:nth-child(odd)', 'background', 'rowBgColor1', 'rgba(34, 41, 51, .2)')
- css('.help-table .tr:nth-child(even)', 'background', 'rowBgColor2', 'rgba(34, 41, 51, .4)')
- return ``
-}
diff --git a/apps/help/theme.js b/apps/help/theme.js
new file mode 100644
index 00000000..00bf5822
--- /dev/null
+++ b/apps/help/theme.js
@@ -0,0 +1,71 @@
+import lodash from 'lodash'
+import fs from 'fs'
+import { Data } from '../../components/index.js'
+
+let Theme = {
+ async getThemeCfg (theme, exclude) {
+ let dirPath = './plugins/miao-plugin/resources/help/theme/'
+ let ret = []
+ let names = []
+ let dirs = fs.readdirSync(dirPath)
+ lodash.forEach(dirs, (dir) => {
+ if (fs.existsSync(`${dirPath}${dir}/main.png`)) {
+ names.push(dir)
+ }
+ })
+ if (lodash.isArray(theme)) {
+ ret = lodash.intersection(theme, names)
+ } else if (theme === 'all') {
+ ret = names
+ }
+ if (exclude && lodash.isArray(exclude)) {
+ ret = lodash.difference(ret, exclude)
+ }
+ if (ret.length === 0) {
+ ret = ['default']
+ }
+ let name = lodash.sample(ret)
+ let resPath = '{{_res_path}}/help/theme/'
+ return {
+ main: `${resPath}${name}/main.png`,
+ bg: fs.existsSync(`${dirPath}${name}/bg.jpg`) ? `${resPath}${name}/bg.jpg` : `${resPath}default/bg.jpg`,
+ style: (await Data.importModule(`resources/help/theme/${name}/config.js`)).style || {}
+ }
+ },
+ async getThemeData (diyStyle, sysStyle) {
+ let helpConfig = lodash.extend({}, diyStyle, sysStyle)
+ let colCount = Math.min(5, Math.max(parseInt(helpConfig?.colCount) || 3, 2))
+ let colWidth = Math.min(500, Math.max(100, parseInt(helpConfig?.colWidth) || 265))
+ let width = Math.min(2500, Math.max(800, colCount * colWidth + 30))
+ let theme = await Theme.getThemeCfg(helpConfig.theme, helpConfig.themeExclude)
+ let themeStyle = theme.style || {}
+ let ret = [`
+ body{background-image:url(${theme.bg});width:${width}px;}
+ .container{background-image:url(${theme.main});width:${width}px;}
+ .help-table .td,.help-table .th{width:${100 / colCount}%}
+ `]
+ let css = function (sel, css, key, def, fn) {
+ let val = themeStyle[key] || diyStyle[key] || sysStyle[key] || def
+ if (fn) {
+ val = fn(val)
+ }
+ ret.push(`${sel}{${css}:${val}}`)
+ }
+ css('.help-title,.help-group', 'color', 'fontColor', '#ceb78b')
+ css('.help-title,.help-group', 'text-shadow', 'contBgColor', 'rgba(6, 21, 31, 0.5)', (c) => {
+ c = c.replace(/,[^,]+\)/, ',1)')
+ return `0 0 1px ${c};`
+ })
+ css('.help-desc', 'color', 'descColor', '#eee')
+ css('.cont-box', 'background', 'contBgColor', 'rgba(43, 52, 61, 0.8)')
+ css('.cont-box', 'backdrop-filter', 'contBgBlur', 3, (n) => `blur(${n}px)`)
+ css('.help-group', 'background', 'headerBgColor', 'rgba(34, 41, 51, .4)')
+ css('.help-table .tr:nth-child(odd)', 'background', 'rowBgColor1', 'rgba(34, 41, 51, .2)')
+ css('.help-table .tr:nth-child(even)', 'background', 'rowBgColor2', 'rgba(34, 41, 51, .4)')
+ return {
+ style: ``,
+ colCount
+ }
+ }
+}
+export default Theme
diff --git a/config/help_default.js b/config/help_default.js
index 1d7db1c4..004a6dc1 100644
--- a/config/help_default.js
+++ b/config/help_default.js
@@ -10,18 +10,16 @@
export const helpCfg = {
title: '喵喵帮助', // 帮助标题
subTitle: 'Yunzai-Bot & Miao-Plugin', // 帮助副标题
- columnCount: 3, // 帮助表格列数，2-5
- style: {
- fontColor: '#ceb78b', // 主文字颜色
- descColor: '#eee', // 描述文字颜色
-
- contBgColor: 'rgba(6, 21, 31, .5)', // 面板整体底色，注意与主文字颜色过近或太透明可能导致阅读困难
- contBgBlur: 3, // 面板底图毛玻璃效果，数字越大越模糊，0-10 ，可为小数
-
- headerBgColor: 'rgba(6, 21, 31, .4)', // 板块标题栏底色
- rowBgColor1: 'rgba(6, 21, 31, .2)', // 帮助奇数行底色
- rowBgColor2: 'rgba(6, 21, 31, .35)' // 帮助偶数行底色
- }
+ colCount: 3, // 帮助表格列数，2-5
+ colWidth: 265, // 单列宽度，默认265
+ /* 皮肤选择，可多选，或设置为all
+ 皮肤包放置于 resources/help/theme
+ 皮肤名为对应文件夹名
+ theme: 'all', // 设置为全部皮肤
+ theme: ['default','theme2'], // 设置为指定皮肤
+ */
+ theme: 'all',
+ themeExclude: ['default'] // 排除皮肤：在有其他可选项时会忽略此中列举的皮肤
}
// 帮助菜单内容
diff --git a/config/system/help_system.js b/config/system/help_system.js
index eca2795f..17f501fd 100644
--- a/config/system/help_system.js
+++ b/config/system/help_system.js
@@ -9,6 +9,10 @@ export const helpCfg = {
title: '喵喵帮助',
subTitle: 'Yunzai-Bot & Miao-Plugin',
columnCount: 3,
+ colWidth: 265,
+ theme: 'all',
+ // 排除皮肤，在theme设置为all时会忽略此设置项中的皮肤
+ themeExclude: ['default'],
style: {
fontColor: '#ceb78b',
descColor: '#eee',
diff --git a/resources/help/index.html b/resources/help/index.html
index 50a5af6b..5a638c7d 100644
--- a/resources/help/index.html
+++ b/resources/help/index.html
@@ -2,6 +2,7 @@
{{block 'css'}}
+<% style = style.replace(/{{_res_path}}/g, _res_path) %>
{{@style}}
{{/block}}
@@ -26,7 +27,6 @@
{{help.title}}
{{help.desc}}
-
{{if idx%colCount === colCount-1 && idx>0 && idx< len-1}}
@@ -36,7 +36,6 @@
<% } %>