#喵喵帮助支持皮肤自定义功能

.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

CHANGELOG.md

@@ -1,10 +1,12 @@
 # 2.0 Alpha.8
 
 * `#喵喵帮助`配置功能升级
-    * 为统一配置目录，配置文件迁移至**config/help.js**
+    * 支持自定义帮助皮肤包，皮肤目录为**resources/help/theme**
-    * 如之前自定义过配置文件，原目录下的help-cfg.js仍能够识别，但建议移至新目录以使用更多功能
+    * 若有多套皮肤包，默认随机使用，可通过**config/help.js**指定
-    * 支持帮助文字、背景颜色通过配置自定义，防止后续css冲突
+    * 支持配帮助文字颜色及容器颜色与透明度
     * 支持图片毛玻璃效果，默认开启，可通过配置关闭
+    * **注意1：** 如之前更改过底图可能会在更新后失效，可将自定义底图放置在皮肤包目录内
+    * **注意2：** 为统一配置目录，帮助配置文件迁移至**config/help.js**，如之前自定义过配置文件，help-cfg.js仍能够识别，但建议移至新配置目录以使用后续更多功能
 * `#上传深渊` 页面样式调整
     * 队伍人数少于4人时展示样式优化，样式未完全稳定
 

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 themeData = await Theme.getThemeData(diyCfg.helpCfg || {}, sysCfg.helpCfg || {})
-  let colCount = Math.min(5, Math.max(parseInt(helpConfig?.columnCount) || 3, 2))
-  let style = customStyle(diyCfg.helpCfg?.style || {}, sysCfg.helpCfg?.style || {}, colCount)
-
   return await Common.render('help/index', {
     helpCfg: helpConfig,
     helpGroup,
-    style,
+    ...themeData,
-    colCount,
     element: 'default'
   }, { e, scale: 1.2 })
 }

apps/help/style.js

@@ -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 `<style>${ret.join('\n')}</style>`
-}

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: `<style>${ret.join('\n')}</style>`,
+      colCount
+    }
+  }
+}
+export default Theme

config/help_default.js

@@ -10,18 +10,16 @@
 export const helpCfg = {
   title: '喵喵帮助', // 帮助标题
   subTitle: 'Yunzai-Bot & Miao-Plugin', // 帮助副标题
-  columnCount: 3, // 帮助表格列数，2-5
+  colCount: 3, // 帮助表格列数，2-5
-  style: {
+  colWidth: 265, // 单列宽度，默认265
-    fontColor: '#ceb78b', // 主文字颜色
+  /* 皮肤选择，可多选，或设置为all
-    descColor: '#eee', // 描述文字颜色
+    皮肤包放置于 resources/help/theme
-
+    皮肤名为对应文件夹名
-    contBgColor: 'rgba(6, 21, 31, .5)', // 面板整体底色，注意与主文字颜色过近或太透明可能导致阅读困难
+    theme: 'all', // 设置为全部皮肤
-    contBgBlur: 3, // 面板底图毛玻璃效果，数字越大越模糊，0-10 ，可为小数
+    theme: ['default','theme2'], // 设置为指定皮肤
-
+  */
-    headerBgColor: 'rgba(6, 21, 31, .4)', // 板块标题栏底色
+  theme: 'all',
-    rowBgColor1: 'rgba(6, 21, 31, .2)', // 帮助奇数行底色
+  themeExclude: ['default'] // 排除皮肤：在有其他可选项时会忽略此中列举的皮肤
-    rowBgColor2: 'rgba(6, 21, 31, .35)' // 帮助偶数行底色
-  }
 }
 
 // 帮助菜单内容

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',

resources/help/index.html

@@ -2,6 +2,7 @@
 
 {{block 'css'}}
 <link rel="stylesheet" type="text/css" href="{{_res_path}}/help/index.css"/>
+<% style = style.replace(/{{_res_path}}/g, _res_path) %>
 {{@style}}
 {{/block}}
 
@@ -26,7 +27,6 @@
         <strong class="help-title">{{help.title}}</strong>
         <span class="help-desc">{{help.desc}}</span>
       </div>
-
       {{if idx%colCount === colCount-1 && idx>0 && idx< len-1}}
     </div>
     <div class="tr">
@@ -36,7 +36,6 @@
       <div class="td"></div>
       <% } %>
     </div>
-
   </div>
 </div>
 {{/each}}

resources/help/index.less

@@ -10,9 +10,6 @@ body {
   width: 830px;
 }
 
-.label {
-}
-
 .head-box {
   margin: 60px 0 0 0;
   padding-bottom: 0;

resources/help/theme/default/config.js

@@ -0,0 +1,9 @@
+export const 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)' // 帮助偶数行底色
+}

resources/help/theme/目录说明.txt

@@ -0,0 +1,21 @@
+【default皮肤】
+default为默认皮肤，不建议改动，防止后续更新冲突
+如不想使用default可创建其他皮肤
+
+【增加自定义皮肤】
+可创建或下载皮肤包，放置在当前目录下，文件夹的名称为皮肤包的名称
+
+皮肤包中包含的文件：
+main.png：主图，高度自适应
+bg.jpg：背景图，如果main.png图片不够高的话则会使用bg.jpg进行填充
+config.js 颜色配置，可选。如无此文件会使用默认配置，如需自定义具体字段可参考default/config.js
+
+
+【皮肤选择】
+默认为随机皮肤，如需指定可到config/help.js中，设置theme的选项
+
+在有其他可选项时，会默认忽略default皮肤
+如在设置all时也包含default，可修改config/help.js，将themeExclude中的default删掉
+
+
+