优化角色图鉴的角色描述换行处理

This commit is contained in:
yoimiya-kokomi 2022-09-05 11:32:33 +08:00
parent cc6fbc69fa
commit 70d2bd50cd
6 changed files with 52 additions and 5 deletions

View File

@ -22,7 +22,7 @@ class Character extends Base {
if (!this.isCustom) { if (!this.isCustom) {
let meta = getMeta(name) let meta = getMeta(name)
this.meta = meta this.meta = meta
for (let key of 'abbr,title,star,allegiance,weapon,astro,cncv,jpcv,ver,desc,talentCons'.split(',')) { for (let key of 'abbr,title,star,allegiance,weapon,astro,cncv,jpcv,ver,talentCons'.split(',')) {
this[key] = meta[key] this[key] = meta[key]
} }
this.elem = CharId.getElem(elem || meta.elem) || 'anemo' this.elem = CharId.getElem(elem || meta.elem) || 'anemo'
@ -63,6 +63,10 @@ class Character extends Base {
return CharId.getElemName(this.elem) return CharId.getElemName(this.elem)
} }
get desc () {
return CharMeta.getDesc(this.meta.desc || '')
}
// 获取头像 // 获取头像
get face () { get face () {
return this.getImgs().face return this.getImgs().face

View File

@ -91,6 +91,49 @@ const CharMeta = {
}) })
}) })
return ret return ret
},
getDesc (desc) {
desc = desc.replace(/。$/, '')
desc = desc.replace('</br>', '')
desc = desc.replace(/[。,]/g, '')
desc = desc.replace('——', ',——')
let len = desc.length
if (len < 25) {
return desc
}
if (/-/.test(desc)) {
let idx = desc.indexOf('—')
return [desc.substr(0, idx), desc.substr(idx, desc.length)].join('</br>')
}
desc = desc.split('')
return CharMeta.getDescLine(desc)
},
getDescLine (inputs) {
let lens = []
let len = 0
let descs = []
for (let desc of inputs) {
if (len + desc.length < 56) {
lens.push(desc.length)
descs.push(desc)
len += desc.length
} else {
break
}
}
if (len <= 28) {
return descs.join('')
}
let ret = [[], [], []]
let idx = 0
for (let desc of descs) {
if (ret[idx].join(' ').length + desc.length > 28) {
idx++
}
ret[idx].push(desc)
}
return ret[0].join('') + '</br>' + ret[1].join('')
} }
} }
export default CharMeta export default CharMeta

View File

@ -19,7 +19,7 @@
<div class="head-detail"> <div class="head-detail">
<div class="name">{{title}}·{{name}}</div> <div class="name">{{title}}·{{name}}</div>
<div class="desc">{{desc}}</div> <div class="desc">{{@desc}}</div>
</div> </div>
<div class="data-box"> <div class="data-box">
<div class="tab-label">90级基础数据</div> <div class="tab-label">90级基础数据</div>

View File

@ -28,7 +28,7 @@ body {
height: 500px; height: 500px;
} }
.char-desc { .char-desc {
padding-left: 240px; padding-left: 220px;
font-size: 14px; font-size: 14px;
} }
.char-meta { .char-meta {

View File

@ -17,7 +17,7 @@
<div class="detail"> <div class="detail">
<div class="char-title"> <div class="char-title">
<div class="char-name"><span>{{data.title}} · </span>{{data.name}}</div> <div class="char-name"><span>{{data.title}} · </span>{{data.name}}</div>
<div class="char-lv char-desc">{{data.desc}}</div> <div class="char-lv char-desc">{{@data.desc}}</div>
</div> </div>
<div class="char-meta"> <div class="char-meta">
<div class="cont"> <div class="cont">

View File

@ -38,7 +38,7 @@ body {
} }
.char-desc { .char-desc {
padding-left: 240px; padding-left: 220px;
font-size: 14px; font-size: 14px;
} }