#喵喵帮助增加帮助列数自定义，界面透明度提升

.gitignore

@@ -11,3 +11,4 @@
 /resources/help/help-cfg.js
 /config/character.js
 /config/profile.js
+/config/help.js

apps/help.js

@@ -75,12 +75,14 @@ async function help (e) {
     helpGroup.push(group)
   })
 
-  let style = customStyle(diyCfg.helpCfg?.style || {}, sysCfg.helpCfg?.style || {})
+  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,
+    colCount,
     element: 'default'
   }, { e, scale: 1.2 })
 }

apps/help/style.js

@@ -1,5 +1,6 @@
-export default function (diyStyle, sysStyle) {
-  let ret = [];
+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) {
@@ -8,6 +9,10 @@ export default function (diyStyle, sysStyle) {
     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)`)

components/Data.js

@@ -82,7 +82,7 @@ let Data = {
     }
     if (fs.existsSync(`${root}/${file}`)) {
       try {
-        let data = await import(`file://${root}/${file}`)
+        let data = await import(`file://${root}/${file}?t=${new Date() * 1}`)
         return data || {}
       } catch (e) {
         console.log(e)

config/help_default.js

@@ -10,16 +10,17 @@
 export const helpCfg = {
   title: '喵喵帮助', // 帮助标题
   subTitle: 'Yunzai-Bot & Miao-Plugin', // 帮助副标题
+  columnCount: 3, // 帮助表格列数，2-5
   style: {
     fontColor: '#ceb78b', // 主文字颜色
     descColor: '#eee', // 描述文字颜色
 
-    contBgColor: 'rgba(43, 52, 61, 0.8)', // 面板整体底色，颜色过透明可能导致阅读困难
+    contBgColor: 'rgba(6, 21, 31, .5)', // 面板整体底色，注意与主文字颜色过近或太透明可能导致阅读困难
     contBgBlur: 3, // 面板底图毛玻璃效果，数字越大越模糊，0-10 ，可为小数
 
-    headerBgColor: 'rgba(34, 41, 51, .4)', // 板块标题栏底色
-    rowBgColor1: 'rgba(34, 41, 51, .2)', // 帮助奇数行底色
-    rowBgColor2: 'rgba(34, 41, 51, .4)' // 帮助偶数行底色
+    headerBgColor: 'rgba(6, 21, 31, .4)', // 板块标题栏底色
+    rowBgColor1: 'rgba(6, 21, 31, .2)', // 帮助奇数行底色
+    rowBgColor2: 'rgba(6, 21, 31, .35)' // 帮助偶数行底色
   }
 }
 

config/system/help_system.js

@@ -8,14 +8,15 @@
 export const helpCfg = {
   title: '喵喵帮助',
   subTitle: 'Yunzai-Bot & Miao-Plugin',
+  columnCount: 3,
   style: {
     fontColor: '#ceb78b',
     descColor: '#eee',
-    contBgColor: 'rgba(43, 52, 61, 0.8)',
+    contBgColor: 'rgba(6, 21, 31, .5)',
     contBgBlur: 3,
-    headerBgColor: 'rgba(34, 41, 51, .4)',
-    rowBgColor1: 'rgba(34, 41, 51, .2)',
-    rowBgColor2: 'rgba(34, 41, 51, .4)'
+    headerBgColor: 'rgba(6, 21, 31, .4)',
+    rowBgColor1: 'rgba(6, 21, 31, .2)',
+    rowBgColor2: 'rgba(6, 21, 31, .35)'
   }
 }
 

models/Artifact.js

@@ -1,3 +1,6 @@
+/*
+* 圣遗物
+* */
 import Base from './Base.js'
 import { ArtifactSet } from './index.js'
 import { artiMap, attrMap } from '../resources/meta/artifact/index.js'

models/ArtifactSet.js

@@ -1,3 +1,6 @@
+/*
+* 圣遗物套装
+* */
 import Base from './Base.js'
 import { abbr, artiMap, artiSetMap } from '../resources/meta/artifact/index.js'
 import { Artifact } from './index.js'

models/Avatar.js

@@ -1,6 +1,6 @@
 /*
-* 用户角色
-* 抹平Profile及Mys Avatar
+* 用户角色封装
+* 兼容处理面板 Profile Data 及 Mys Avatar 数据
 * */
 import Base from './Base.js'
 import lodash from 'lodash'

models/AvatarList.js

@@ -1,3 +1,9 @@
+/*
+* 用户角色列表
+*
+* 批量管理及天赋等数据获取
+* 使用 Avatar Model实现兼容处理面板数据及Mys角色数据
+* */
 import Base from './Base.js'
 import lodash from 'lodash'
 import { Data, Common, Profile } from '../components/index.js'

models/Base.js

@@ -1,3 +1,9 @@
+/*
+* Base Model
+*
+* 使用Proxy实现meta数据的getter
+* 对Character等可复用设置实例缓存，提高性能
+* */
 import { Data } from '../components/index.js'
 
 let cacheMap = {}

models/Character.js

@@ -1,3 +1,9 @@
+/*
+* 角色数据
+*
+* 支持角色查询及Meta元数据获取
+* 兼容处理自定义角色
+* */
 import lodash from 'lodash'
 import Base from './Base.js'
 import { Data } from '../components/index.js'

models/Material.js

@@ -1,3 +1,6 @@
+/*
+* 角色培养及天赋材料
+* */
 import lodash from 'lodash'
 import Base from './Base.js'
 import { Data } from '../components/index.js'

resources/help/index.css

@@ -35,7 +35,7 @@ body {
   border-radius: 0 0 10px 10px;
   display: table;
   overflow: hidden;
-  width: calc(100% + 30px);
+  width: 100%;
   color: #fff;
 }
 .help-table .tr {
@@ -49,7 +49,6 @@ body {
   padding: 12px 0 12px 50px;
   line-height: 24px;
   position: relative;
-  width: 33.33%;
   text-align: left;
 }
 .help-table .tr:last-child .td {

resources/help/index.html

@@ -6,6 +6,7 @@
 {{/block}}
 
 {{block 'main'}}
+
 <div class="info-box">
   <div class="head-box type{{bgType}}">
     <div class="title">{{helpCfg.title||"使用帮助"}}</div>
@@ -17,19 +18,25 @@
 <div class="cont-box">
   <div class="help-group">{{group.group}}</div>
   <div class="help-table">
-    {{each group.list help idx}}
-    {{if idx%3 == 0}}
     <div class="tr">
-      {{/if}}
+      {{set len = group.list.length }}
+      {{each group.list help idx}}
       <div class="td">
         <span class="help-icon" style="{{help.css}}"></span>
         <strong class="help-title">{{help.title}}</strong>
         <span class="help-desc">{{help.desc}}</span>
       </div>
-      {{if idx%3 ==2 || idx == group.list.length -1}}
+
+      {{if idx%colCount === colCount-1 && idx>0 && idx< len-1}}
     </div>
-    {{/if}}
-    {{/each}}
+    <div class="tr">
+      {{/if}}
+      {{/each}}
+      <% for(let i=(len-1)%colCount; i< colCount-1 ; i++){ %>
+      <div class="td"></div>
+      <% } %>
+    </div>
+
   </div>
 </div>
 {{/each}}

resources/help/index.less

@@ -44,7 +44,7 @@ body {
   border-radius: 0 0 10px 10px;
   display: table;
   overflow: hidden;
-  width: calc(100% + 30px);
+  width: 100%;
   color: #fff;
 }
 
@@ -60,7 +60,6 @@ body {
   padding: 12px 0 12px 50px;
   line-height: 24px;
   position: relative;
-  width: 33.33%;
   text-align: left;
 }