群角色排行查看功能样式微调

apps/character/ProfileRank.js

@@ -43,7 +43,7 @@ export async function groupRank (e) {
     }
   } else if (type === 'list') {
     let uids = await ProfileRank.getGroupUidList(groupId, char.id, mode)
-    return renderCharRankList({ e, uids, char, mode })
+    return renderCharRankList({ e, uids, char, mode, groupId })
   }
 }
 
@@ -73,7 +73,7 @@ export async function resetRank (e) {
   e.reply(`本群${charName}排名已重置...`)
 }
 
-async function renderCharRankList ({ e, uids, char, mode }) {
+async function renderCharRankList ({ e, uids, char, mode, groupId }) {
   let list = []
   for (let ds of uids) {
     let uid = ds.value
@@ -88,8 +88,14 @@ async function renderCharRankList ({ e, uids, char, mode }) {
       }
       let dmg = await profile.calcDmg({ mode: 'single' })
       if (dmg && dmg.avg) {
+        let title = dmg.title
+        // 稍微缩短下title
+        if (title.length > 10) {
+          title = title.replace(/[ ·]*/g, '')
+        }
+        title = title.length > 10 ? title.replace(/伤害$/, '') : title
         tmp.dmg = {
-          title: dmg.title,
+          title: title,
           avg: Format.comma(dmg.avg, 1)
         }
       }
@@ -97,6 +103,7 @@ async function renderCharRankList ({ e, uids, char, mode }) {
     }
   }
   let title = `#${char.name}${mode === 'mark' ? '圣遗物' : ''}排行`
+  const rankCfg = await ProfileRank.getGroupCfg(groupId)
   // 渲染图像
   return await Common.render('character/rank-profile-list', {
     save_id: char.id,
@@ -104,6 +111,7 @@ async function renderCharRankList ({ e, uids, char, mode }) {
     title,
     elem: char.elem,
     bodyClass: `char-${char.name}`,
+    rankCfg,
     mode
   }, { e, scale: 1.4 })
 }

components/Format.js

@@ -1,3 +1,5 @@
+import lodash from 'lodash'
+
 let Format = {
   int: function (d) {
     return parseInt(d)
@@ -6,7 +8,7 @@ let Format = {
     num = parseFloat((num * 1).toFixed(fix))
     let [integer, decimal] = String.prototype.split.call(num, '.')
     integer = integer.replace(/\d(?=(\d{3})+$)/g, '$&,') // 正则先行断言
-    return `${integer}${decimal ? '.' + decimal : ''}`
+    return `${integer}${fix > 0 ? '.' + (decimal || lodash.repeat('0', fix)) : ''}`
   },
   pct: function (num, fix = 1) {
     return (num * 1).toFixed(fix) + '%'

models/Avatar.js

@@ -198,7 +198,8 @@ export default class Avatar extends Base {
         names,
         abbrs: [...abbrs, ...abbrs2],
         imgs,
-        name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
+        name: (abbrs.length > 1 || abbrs2[0].length > 7) ? abbrs.join('+') : abbrs2[0],
+        sName: abbrs.join('+')
       }
     }
     if (this.profile) {

models/ProfileArtis.js

@@ -170,7 +170,8 @@ export default class ProfileArtis extends Base {
       names,
       imgs,
       abbrs: [...abbrs, ...abbrs2],
-      name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
+      name: (abbrs.length > 1 || abbrs2[0].length > 7) ? abbrs.join('+') : abbrs2[0],
+      sName: abbrs.join('+')
     }
     return this._setData
   }

resources/character/character-card.html

@@ -73,7 +73,7 @@
 
         {{/each}}
       </div>
-      <div class="artis-sets">{{data.artisSet?.name||'圣遗物'}}</div>
+      <div class="artis-sets">{{data.artisSet?.sName||'圣遗物'}}</div>
     </div>
   </div>
 

resources/character/rank-profile-list.css

@@ -13,43 +13,61 @@ body {
   background-size: cover;
   overflow: hidden;
 }
-.char-item {
+.group-rank-icon {
+  width: 16px;
+  height: 16px;
+  background: url("./imgs/mark-icon.png");
+  background-size: auto 100%;
+  display: inline-block;
+  vertical-align: bottom;
+  margin: -1px 3px -1px 0;
+}
+.group-rank-icon.mark-icon {
+  background-position: 100% 0;
+}
+.char-list-item {
   height: 60px;
   background-size: auto 150%;
   display: flex;
   padding: 5px;
   overflow: visible;
 }
-.char-item .line {
+.char-list-item .line {
-  margin-left: 10px;
+  margin-left: 15px;
   position: relative;
 }
-.char-item .line:before {
+.char-list-item .line:before {
   content: "";
   display: block;
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, 0.8);
+  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
   position: absolute;
-  left: -5px;
+  left: -15px;
   top: 5px;
 }
+.char-idx {
+  width: 48px;
+}
 .char-idx span {
   display: inline-block;
   width: 24px;
   height: 24px;
-  margin: 13px 10px;
+  margin: 13px 12px;
   background: url('./imgs/mark-icon.png');
   background-size: auto 100%;
   text-align: center;
   font-size: 12px;
   line-height: 24px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
 }
 .char-idx span.idx-1 {
   width: 48px;
   margin: 13px 0;
   background-image: url('./imgs/mark-icon2.png');
   color: rgba(0, 0, 0, 0);
+  text-shadow: none;
 }
 .char-idx span.mode-mark {
   background-position: 100% 0;
@@ -70,10 +88,13 @@ body {
   border-radius: 50%;
 }
 .char-info .name {
+  margin-top: 4px;
   height: 24px;
   line-height: 24px;
   font-size: 18px;
   color: #d3bc8e;
+  font-weight: normal;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
 }
 .char-info .cons {
   height: 16px;
@@ -82,9 +103,10 @@ body {
   width: 16px;
   text-align: center;
   padding: 0;
+  margin-right: -2px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
 }
 .char-info .info {
-  margin-top: 4px;
   height: 20px;
   font-size: 12px;
   line-height: 20px;
@@ -92,37 +114,6 @@ body {
 .char-name {
   width: 100px;
 }
-.char-weapon {
-  width: 130px;
-  display: flex;
-}
-.char-weapon .img {
-  margin: -3px 0;
-  width: 56px;
-  height: 56px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.char-weapon .weapon-info {
-  padding-left: 5px;
-}
-.char-weapon .cons {
-  width: 28px;
-  font-size: 12px;
-  transform: scale(0.9);
-  transform-origin: 0 50%;
-}
-.char-weapon .name {
-  height: 20px;
-  line-height: 20px;
-  margin-bottom: 3px;
-}
-.char-weapon .name strong {
-  color: #fff;
-  font-size: 13px;
-  font-weight: normal;
-}
 .char-talent {
   display: flex;
   padding: 0 5px;
@@ -193,6 +184,50 @@ body {
   top: -2px;
   margin-left: -9px;
 }
+.char-item {
+  vertical-align: middle;
+  height: 50px;
+}
+.char-item .item {
+  position: relative;
+  width: 36px;
+  height: 36px;
+  margin: 7px 5px 7px 0;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
+  display: inline-block;
+  overflow: visible;
+  vertical-align: middle;
+}
+.char-weapon {
+  width: 125px;
+  display: flex;
+}
+.char-weapon .img {
+  margin: -10px -5px;
+  width: 46px;
+  height: 56px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.char-weapon .weapon-info {
+  padding-left: 5px;
+}
+.char-weapon .cons {
+  width: 28px;
+  font-size: 12px;
+  transform: scale(0.9);
+  transform-origin: 0 50%;
+}
+.char-weapon .name {
+  height: 20px;
+  line-height: 20px;
+  margin-bottom: 3px;
+}
+.char-weapon .name strong {
+  font-size: 13px;
+  font-weight: normal;
+}
 .char-artis {
   display: flex;
   width: 130px;
@@ -221,28 +256,16 @@ body {
   background: #aaa;
 }
 .char-artis .artis-mark-class {
-  border-radius: 5px;
-  display: inline-block;
-  text-align: center;
-  background: rgba(51, 51, 51, 0.68);
-  height: 20px;
-  line-height: 20px;
-  box-shadow: 0 0 1px 0 #ffe4b4;
-  position: relative;
-  z-index: 9;
-  color: #fff;
   width: 28px;
-  font-size: 12px;
+  margin-right: -2px;
   transform: scale(0.9);
   transform-origin: 0 50%;
-  margin-right: -2px;
 }
 .char-artis .artis {
   position: relative;
   width: 36px;
   height: 36px;
   margin: 7px 5px 7px 0;
-  box-shadow: 0 0 1px 0 #ffe4b4;
   display: inline-block;
 }
 .char-artis .artis.no-artis {
@@ -267,21 +290,25 @@ body {
 }
 .char-artis .artis-title {
   font-size: 12px;
+  white-space: nowrap;
 }
 .char-artis .artis-mark {
   height: 23px;
-  margin-top: 5px;
 }
 .char-dmg {
-  text-align: right;
   width: 120px;
 }
-.char-dmg .dmg {
+.char-dmg .dmg-value {
-  height: 25px;
+  height: 30px;
-  margin-top: 5px;
+  line-height: 30px;
   font-size: 18px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
 }
 .char-dmg .dmg-title {
+  height: 15px;
+  line-height: 15px;
+  margin-top: 5px;
   font-size: 12px;
+  color: #aaa;
 }
 /*# sourceMappingURL=rank-profile-list.css.map */

resources/character/rank-profile-list.html

@@ -10,8 +10,31 @@
   <div class="title">{{title}}</div>
 </div>
 <div id="profile-stat">
+
+  <div class="cont group-rank-tip {{groupRank?'has-rank':'no-rank'}}">
+    <div class="cont-title">
+      群排名说明
+    </div>
+    <div class="cont-body">
+      <ul class="cont-msg">
+        <li>
+          <i class="group-rank-icon dmg-icon"></i><strong>综合练度排名：</strong>
+          以期望伤害（计算暴击率的平均伤害，不代表实际伤害值）为排序的群内排名
+        </li>
+        <li>
+          <i class="group-rank-icon mark-icon"></i><strong>圣遗物评分排名：</strong>
+          基于角色评分规则进行圣遗物评分。评分规则为线性规则，无法体现词条平衡等实际因素，评分仅供娱乐
+        </li>
+        <li>
+          <strong>排名范围：</strong>
+          本群内 / 时间点：{{rankCfg.time}} 后 / 在群内主动通过 #面板 命令查看过的面板数据
+        </li>
+      </ul>
+    </div>
+  </div>
+
   {{each list ds idx}}
-  <div class="cont char-item">
+  <div class="cont char-list-item">
     <div class="char-idx">
       <span class="idx-{{idx+1}} mode-{{mode}}">{{idx+1}}</span>
     </div>
@@ -19,13 +42,14 @@
       <span class="img" style="background-image:url({{_res_path}}{{ds.imgs?.face}})"></span>
     </div>
     <div class="char-info char-name">
-      <div class="info">
+
-        Uid: {{ds.uid}}
-      </div>
       <div class="name">
         <span class="cons cons-{{ds.cons}}">{{ds.cons}}</span>
         <strong>{{ds.sName}}</strong>
       </div>
+      <div class="info">
+        Uid: {{ds.uid}}
+      </div>
     </div>
 
     <div class="char-talent">
@@ -44,48 +68,50 @@
       {{/each}}
     </div>
 
-    <div class=" char-weapon line">
+    <div class="char-item char-weapon line">
       {{set w = ds.weapon }}
-      <div class="img" style="background-image:url({{_res_path}}{{w.img}})"></div>
+      <div class="item item-icon star{{w.star}}">
+        <div class="img" style="background-image:url({{_res_path}}{{w.img}})"></div>
+      </div>
       <div class="char-info weapon-info">
-        <div class="info">
-          <span class="cons cons-{{w.affix+1}}">精{{w.affix}}</span> Lv.{{w.leve || w.level}}
-        </div>
         <div class="name">
           <strong> {{w.name.length > 4 ? (w.abbr||w.name) : w.name}}</strong>
         </div>
+        <div class="info">
+          <span class="cons cons-{{w.affix+1}}">精{{w.affix}}</span> Lv.{{w.leve || w.level}}
+        </div>
       </div>
     </div>
 
 
     {{set mark = ds.artisMark || false }}
     {{set aImgs = ds?.artisSet?.imgs || []}}
-    <div class="char-artis class-{{mark?.markClass||'D'}}">
+    <div class="char-item char-artis class-{{mark?.markClass||'D'}}">
-      <div class="item item-banner avatar-artis artis{{aImgs.length}}">
+      <div
-        <div class="artis item-icon {{aImgs.length>0?'star5':'no-artis'}}">
+          class="item artis item-icon avatar-artis  {{aImgs.length>0?'star5':'no-artis'}} artis{{aImgs.length}}">
-          {{each aImgs img}}
+        {{each aImgs img}}
-          <div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
+        <div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
-          {{/each}}
+        {{/each}}
-          {{if aImgs.length === 0}}
+        {{if aImgs.length === 0}}
-          <span class="img no-artis"></span>
+        <span class="img no-artis"></span>
-          {{/if}}
+        {{/if}}
-        </div>
+
       </div>
-      <div>
+      <div class="char-info artis-info">
-        <div class="artis-mark">
+        <div class="name artis-title">
-          <span class="artis-mark-class class-{{mark?.markClass||'D'}}">{{mark.markClass}}</span>
-          {{mark.mark}}
-        </div>
-        <div class="artis-title">
           {{ds?.artisSet?.name}}
         </div>
+        <div class="artis-mark">
+          <span class="cons artis-mark-class class-{{mark?.markClass||'D'}}">{{mark.markClass}}</span>
+          {{mark.mark}}
+        </div>
       </div>
     </div>
 
     <div class="char-dmg line">
       {{if ds.dmg}}
-      <div class="dmg">{{ds.dmg?.avg}}</div>
       <div class="dmg-title">{{ds.dmg?.title}}</div>
+      <div class="dmg-value">{{ds.dmg?.avg}}</div>
       {{else}}
       {{/if}}
     </div>

resources/character/rank-profile-list.less

@@ -11,7 +11,21 @@ body {
   overflow: hidden;
 }
 
-.char-item {
+.group-rank-icon {
+  width: 16px;
+  height: 16px;
+  background: url("./imgs/mark-icon.png");
+  background-size: auto 100%;
+  display: inline-block;
+  vertical-align: bottom;
+  margin: -1px 3px -1px 0;
+
+  &.mark-icon {
+    background-position: 100% 0;
+  }
+}
+
+.char-list-item {
   height: 60px;
   background-size: auto 150%;
   display: flex;
@@ -19,7 +33,7 @@ body {
   overflow: visible;
 
   .line {
-    margin-left: 10px;
+    margin-left: 15px;
     position: relative;
 
     &:before {
@@ -28,24 +42,28 @@ body {
       width: 1px;
       height: 40px;
       background: rgba(255, 255, 255, .8);
+      background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .8), rgba(255, 255, 255, .1));
       position: absolute;
-      left: -5px;
+      left: -15px;
       top: 5px;
     }
   }
 }
 
 .char-idx {
+  width: 48px;
+
   span {
     display: inline-block;
     width: 24px;
     height: 24px;
-    margin: 13px 10px;
+    margin: 13px 12px;
     background: url('./imgs/mark-icon.png');
     background-size: auto 100%;
     text-align: center;
     font-size: 12px;
     line-height: 24px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
 
 
     &.idx-1 {
@@ -53,6 +71,7 @@ body {
       margin: 13px 0;
       background-image: url('./imgs/mark-icon2.png');
       color: rgba(0, 0, 0, 0);
+      text-shadow: none;
     }
 
     &.mode-mark {
@@ -81,10 +100,13 @@ body {
 
 .char-info {
   .name {
+    margin-top: 4px;
     height: 24px;
     line-height: 24px;
     font-size: 18px;
     color: #d3bc8e;
+    font-weight: normal;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
   }
 
   .cons {
@@ -94,10 +116,11 @@ body {
     width: 16px;
     text-align: center;
     padding: 0;
+    margin-right: -2px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
   }
 
   .info {
-    margin-top: 4px;
     height: 20px;
     font-size: 12px;
     line-height: 20px;
@@ -108,43 +131,6 @@ body {
   width: 100px;
 }
 
-.char-weapon {
-  width: 130px;
-  display: flex;
-
-  .img {
-    margin: -3px 0;
-    width: 56px;
-    height: 56px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
-  }
-
-  .weapon-info {
-    padding-left: 5px;
-  }
-
-  .cons {
-    width: 28px;
-    font-size: 12px;
-    transform: scale(.9);
-    transform-origin: 0 50%;
-  }
-
-  .name {
-    height: 20px;
-    line-height: 20px;
-    margin-bottom: 3px;
-
-    strong {
-      color: #fff;
-      font-size: 13px;
-      font-weight: normal;
-    }
-  }
-}
-
 .char-talent {
   display: flex;
   padding: 0 5px;
@@ -223,6 +209,59 @@ body {
   }
 }
 
+.char-item {
+  vertical-align: middle;
+  height: 50px;
+
+  .item {
+    position: relative;
+    width: 36px;
+    height: 36px;
+    margin: 7px 5px 7px 0;
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
+    display: inline-block;
+    overflow: visible;
+    vertical-align: middle;
+  }
+}
+
+.char-weapon {
+  width: 125px;
+  display: flex;
+
+  .img {
+    margin: -10px -5px;
+    width: 46px;
+    height: 56px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .weapon-info {
+    padding-left: 5px;
+  }
+
+  .cons {
+    width: 28px;
+    font-size: 12px;
+    transform: scale(.9);
+    transform-origin: 0 50%;
+  }
+
+  .name {
+    height: 20px;
+    line-height: 20px;
+    margin-bottom: 3px;
+
+    strong {
+      font-size: 13px;
+      font-weight: normal;
+    }
+  }
+}
+
+
 .char-artis {
   display: flex;
   width: 130px;
@@ -261,21 +300,11 @@ body {
   }
 
   .artis-mark-class {
-    border-radius: 5px;
-    display: inline-block;
-    text-align: center;
-    background: rgba(51, 51, 51, 0.68);
-    height: 20px;
-    line-height: 20px;
-    box-shadow: 0 0 1px 0 #ffe4b4;
-    position: relative;
-    z-index: 9;
-    color: #fff;
     width: 28px;
-    font-size: 12px;
+    margin-right: -2px;
     transform: scale(.9);
     transform-origin: 0 50%;
-    margin-right: -2px;
+
   }
 
   .artis {
@@ -283,7 +312,6 @@ body {
     width: 36px;
     height: 36px;
     margin: 7px 5px 7px 0;
-    box-shadow: 0 0 1px 0 #ffe4b4;
     display: inline-block;
 
     &.no-artis {
@@ -317,25 +345,29 @@ body {
 
   .artis-title {
     font-size: 12px;
+    white-space: nowrap;
   }
 
   .artis-mark {
     height: 23px;
-    margin-top: 5px;
   }
 }
 
 .char-dmg {
-  text-align: right;
   width: 120px;
 
-  .dmg {
+  .dmg-value {
-    height: 25px;
+    height: 30px;
-    margin-top: 5px;
+    line-height: 30px;
     font-size: 18px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
   }
 
   .dmg-title {
+    height: 15px;
+    line-height: 15px;
+    margin-top: 5px;
     font-size: 12px;
+    color: #aaa
   }
 }