mirror of
https://github.com/yoimiya-kokomi/miao-plugin.git
synced 2024-11-21 22:48:13 +00:00
#喵喵帮助增加帮助列数自定义，界面透明度提升
This commit is contained in:
yoimiya-kokomi
parent
2309f57049
commit
cbdd2c303d
1
.gitignore
vendored
1
.gitignore
vendored
@ -11,3 +11,4 @@
|
||||
/resources/help/help-cfg.js
|
||||
/config/character.js
|
||||
/config/profile.js
|
||||
/config/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 })
|
||||
}
|
||||
|
||||
@ -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)`)
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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)' // 帮助偶数行底色
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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)'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/*
|
||||
* 圣遗物
|
||||
* */
|
||||
import Base from './Base.js'
|
||||
import { ArtifactSet } from './index.js'
|
||||
import { artiMap, attrMap } from '../resources/meta/artifact/index.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'
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*
|
||||
* 用户角色
|
||||
* 抹平Profile及Mys Avatar
|
||||
* 用户角色封装
|
||||
* 兼容处理面板 Profile Data 及 Mys Avatar 数据
|
||||
* */
|
||||
import Base from './Base.js'
|
||||
import lodash from 'lodash'
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
/*
|
||||
* 用户角色列表
|
||||
*
|
||||
* 批量管理及天赋等数据获取
|
||||
* 使用 Avatar Model实现兼容处理面板数据及Mys角色数据
|
||||
* */
|
||||
import Base from './Base.js'
|
||||
import lodash from 'lodash'
|
||||
import { Data, Common, Profile } from '../components/index.js'
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
/*
|
||||
* Base Model
|
||||
*
|
||||
* 使用Proxy实现meta数据的getter
|
||||
* 对Character等可复用设置实例缓存，提高性能
|
||||
* */
|
||||
import { Data } from '../components/index.js'
|
||||
|
||||
let cacheMap = {}
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
/*
|
||||
* 角色数据
|
||||
*
|
||||
* 支持角色查询及Meta元数据获取
|
||||
* 兼容处理自定义角色
|
||||
* */
|
||||
import lodash from 'lodash'
|
||||
import Base from './Base.js'
|
||||
import { Data } from '../components/index.js'
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
/*
|
||||
* 角色培养及天赋材料
|
||||
* */
|
||||
import lodash from 'lodash'
|
||||
import Base from './Base.js'
|
||||
import { Data } from '../components/index.js'
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
<div class="tr">
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<% for(let i=(len-1)%colCount; i< colCount-1 ; i++){ %>
|
||||
<div class="td"></div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user