星铁面板天赋展示更新，支持展示行迹信息

CHANGELOG.md

@@ -1,15 +1,8 @@
-# 2.4.5
+# 2.4.6
 
-* 增加原神4.0、星铁1.3的角色数据与资源
+* 星铁面板天赋展示更新，支持展示行迹信息
-* 增加林尼、卡夫卡、银狼的伤害计算**@Aluxes**
-* 增加原神4.0相关的武器计算 **@SmallK111407**
 
-# 2.4.4
+# 2.4.1 ~ 2.4.5
-
-* 增加`#星铁日历`功能 **@Aluxes**
-* 更新卡芙卡、卢卡的角色数据与资源
-
-# 2.4.1 ~ 2.4.3
 
 * 初步支持星铁面板数据获取与展示
   * 可使用`#星铁更新面板`来获取面板信息，通过`#希儿面板`来进行查看
@@ -18,8 +11,15 @@
 * 请配合使用Miao-Yunzai 3.1.0可达到最佳效果
   * Miao-Yunzai可使用`*`来代填`#星铁`前缀，能区分游戏使用不同UID
   * 其他Yunzai版本出现原神与星铁UID混淆情况为正常情况，请手动切换UID或命令后附加UID查询
-* 增加林尼、琳妮特、菲米尼的角色信息，可通过`#林尼天赋`、`#林尼图鉴`查看
+* 角色数据及资源更新
+  * 增加林尼、琳妮特、菲米尼的角色信息，可通过`#林尼天赋`、`#林尼图鉴`查看
+  * 更新卡芙卡、卢卡的角色数据与资源
+  * 增加原神4.0、星铁1.3的角色数据与资源
+* 伤害计算更新
+  * 增加林尼、卡夫卡、银狼的伤害计算**@Aluxes**
+  * 增加原神4.0相关的武器计算 **@SmallK111407**
 * 增加`#喵喵api`命令，用于查看喵ApiToken的有效期
+* 增加`#星铁日历`功能 **@Aluxes**
 * 停用旧面板格式数据，非AttrIDs格式的数据不会展示，部分角色面板数据不展示是正常情况，重新更新面板数据即可
 * 一些已知问题修复
 

apps/profile/ProfileDetail.js

@@ -141,6 +141,7 @@ let ProfileDetail = {
     let attr = {}
     let game = char.game
     let isGs = game === 'gs'
+    let isSr = !isGs
 
     lodash.forEach((isGs ? 'hp,def,atk,mastery' : 'hp,def,atk,speed').split(','), (key) => {
       let fn = (n) => Format.comma(n, key === 'hp' ? 0 : 1)
@@ -183,6 +184,36 @@ let ProfileDetail = {
     let artisDetail = profile.getArtisMark()
     let artisKeyTitle = ProfileArtis.getArtisKeyTitle(game)
     let data = profile.getData('name,abbr,cons,level,talent,dataSource,updateTime,imgs,costumeSplash')
+    if (isSr) {
+      let treeData = []
+      let treeMap = {}
+      // 属性
+      lodash.forEach('0113355778'.split(''), (pos, idx) => {
+        treeData[pos] = treeData[pos] || []
+        let tmp = { type: 'tree', img: `/meta-sr/public/icons/tree-cpct.webp` }
+        treeData[pos].push(tmp)
+        treeMap[idx + 201 + ''] = tmp
+      })
+      // 能力
+      lodash.forEach([2, 4, 6], (pos, idx) => {
+        let tmp = { type: 'talent', img: data.imgs[`tree${idx + 1}`] }
+        treeData[pos] = tmp
+        treeMap[idx + 101 + ''] = tmp
+      })
+      lodash.forEach(profile.trees, (id) => {
+        let ret = /([12][01][0-9])$/.exec(id + '')
+        if (ret && ret[1]) {
+          let treeId = ret[1]
+          if (treeMap?.[treeId]) {
+            treeMap[treeId].value = 1
+          }
+          if (treeId[0] === '2') {
+            treeMap[treeId].img = `/meta-sr/public/icons/tree-${char.detail?.tree?.[id]?.key}.webp`
+          }
+        }
+      })
+      data.treeData = treeData
+    }
     data.weapon = profile.getWeaponDetail()
     let renderData = {
       save_id: uid,

resources/character/profile-detail.css

@@ -178,6 +178,9 @@ body {
 .i-effPct {
   background-position: -176px 0;
 }
+.i-effDef {
+  background-position: -192px 0;
+}
 .detail.attr li:nth-child(even) {
   background: rgba(0, 0, 0, 0.4);
 }
@@ -224,7 +227,7 @@ body {
   background-repeat: no-repeat;
   background-position: center;
 }
-.talent-icon span {
+.talent-icon strong {
   background: #fff;
   width: 34px;
   height: 26px;
@@ -239,7 +242,7 @@ body {
   color: #000;
   box-shadow: 0 0 5px 0 #000;
 }
-.talent-icon.talent-plus span {
+.talent-icon.talent-plus strong {
   background: #2e353e;
   color: #ffdfa0;
   font-weight: bold;
@@ -833,17 +836,12 @@ body {
   line-height: 20px;
   color: #bbb;
 }
-.game-sr .char-talents {
-  transform: scale(0.8);
-  transform-origin: top left;
-  margin: -8px 0 -14px;
-}
-.game-sr .char-talents .talent-item {
-  margin: 0 -3px;
-}
 .game-sr .artis-weapon {
   display: none;
 }
+.game-sr .char-lv {
+  margin-bottom: 25px;
+}
 .game-sr .char-attr .icon i {
   background-image: url('./imgs/icon-sr.png');
 }
@@ -945,6 +943,97 @@ body {
   padding: 0 3px;
   margin: 0 2px;
 }
+.sr-talent {
+  margin: 0 15px 10px 10px;
+  border-radius: 10px;
+  background: url("../common/cont/card-bg.png") top left repeat-x;
+  background-size: auto 150%;
+  position: relative;
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
+  overflow: hidden;
+  display: flex;
+  color: #fff;
+  height: 72px;
+  width: calc(100% - 25px);
+  padding: 8px 10px;
+}
+.sr-talent .char-talents {
+  transform-origin: center left;
+  margin: 0;
+  width: 260px;
+}
+.sr-talent .char-talents .talent-item {
+  margin: 0 -3px;
+}
+.sr-talent .char-talents .talent-icon {
+  width: 60px;
+  height: 60px;
+}
+.sr-talent .char-talents .talent-icon strong {
+  font-size: 13px;
+  width: 22px;
+  height: 20px;
+  line-height: 20px;
+  margin-left: -11px;
+  border-radius: 4px;
+}
+.sr-talent .char-talents .talent-icon span {
+  position: absolute;
+  top: -3px;
+  font-size: 12px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 0 3px #000, 1px 1px 1px #000;
+}
+.sr-talent .char-talents .talent-icon.talent-crown:after {
+  width: 22px;
+  height: 22px;
+  margin: 2px 0 0 5px;
+  background-image: url('../character/imgs/crown-sr.webp');
+  display: none;
+}
+.sr-talent .char-trees {
+  width: 290px;
+  padding-left: 10px;
+  position: relative;
+}
+.sr-talent .char-trees .talent-icon {
+  margin: 0 -5px;
+}
+.sr-talent .char-trees .talent-icon.off {
+  filter: grayscale(100%);
+  opacity: 0.4;
+}
+.sr-talent .char-trees:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 30px;
+  background: rgba(255, 255, 255, 0.8);
+  position: absolute;
+  left: 0;
+  top: 15px;
+}
+.sr-talent .char-trees .talent-item {
+  width: 40px;
+}
+.sr-talent .char-trees .talent-item .talent-icon {
+  margin: 0;
+}
+.sr-talent .char-trees .tree-item {
+  width: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.sr-talent .char-trees .tree-item .talent-icon {
+  width: 30px;
+  height: 30px;
+  margin: 0 -5px;
+}
 .copyright.ad {
   font-size: 12px;
 }

resources/character/profile-detail.html

@@ -23,6 +23,7 @@
         <span class="cons cons-{{data.cons}}">{{data.cons}}命</span></div>
       <div>
         {{if mode !== 'weapon'}}
+        {{if game === 'gs'}}
         <div class="char-talents">
           {{each talentMap tName key}}
           {{set talent = data.talent[key] || {} }}
@@ -32,14 +33,16 @@
                 {{talent.original >= 10 ? `talent-crown`:``}}">
               <div class="talent-icon-img"
                    style="background-image:url({{_res_path}}{{imgs[key]}})"></div>
-              <span>{{talent.level}}</span>
+              <strong>{{talent.level}}</strong>
             </div>
           </div>
           {{/each}}
         </div>
+        {{/if}}
         <ul class="char-attr">
           {{set attrMap = game === 'sr' ? {
-          hp:'生命值',atk:'攻击力',def:'防御力',speed:'速度',cpct:'暴击率',cdmg:'暴击伤害',dmg:'伤害加成',stance:'击破特攻',effPct:'效果命中'
+          hp:'生命值',atk:'攻击力',def:'防御力',speed:'速度',cpct:'暴击率',cdmg:'暴击伤害',dmg:'伤害加成',stance:'击破特攻',effPct:'效果命中',effDef:'效果抵抗',
+          heal:'治疗加成'
           }:{
           hp:'生命值',atk:'攻击力',def:'防御力',mastery:'元素精通',cpct:'暴击率',cdmg:'暴击伤害',recharge:'元素充能',dmg:'伤害加成'
           } }}
@@ -84,8 +87,7 @@
       {{each cons idx}}
       <div class="cons-item">
         <div class="talent-icon {{idx * 1 > data.cons * 1 ? 'off' : '' }}">
-          <div class="talent-icon-img"
+          <div class="talent-icon-img" style="background-image:url({{_res_path}}{{imgs[`cons${idx}`]}})"></div>
-               style="background-image:url({{_res_path}}{{imgs[`cons${idx}`]}})"></div>
         </div>
       </div>
       {{/each}}
@@ -112,6 +114,46 @@
   <!-- 【 武器+圣遗物列表】 -->
   <div>
     {{if game === 'sr'}}
+    <div class="sr-talent">
+      <div class="char-talents">
+        {{each talentMap tName key}}
+        {{set talent = data.talent[key] || {} }}
+        <div class="talent-item">
+          <div class="talent-icon
+               {{talent.level > talent.original ? `talent-plus`:``}}
+                {{talent.original >= 10 ? `talent-crown`:``}}">
+            <div class="talent-icon-img"
+                 style="background-image:url({{_res_path}}{{imgs[key]}})"></div>
+            <strong>{{talent.level}}</strong>
+            <span>{{tName}}</span>
+          </div>
+        </div>
+        {{/each}}
+      </div>
+
+      <div class="char-talents char-trees">
+
+        {{each data.treeData tCfg}}
+        {{if tCfg?.type === 'talent' }}
+        <div class="talent-item">
+          <div class="talent-icon {{tCfg.value ? '':'off'}}">
+            <div class="talent-icon-img" style="background-image:url({{_res_path}}{{tCfg.img}})"></div>
+          </div>
+        </div>
+        {{else}}
+        <div class="tree-item">
+          {{each tCfg tIdx}}
+          <div class="talent-icon  {{tIdx.value ? '':'off'}}">
+            <div class="talent-icon-img" style="background-image:url({{_res_path}}{{tIdx.img}})"></div>
+          </div>
+          {{/each}}
+        </div>
+        {{/if}}
+        {{/each}}
+
+      </div>
+    </div>
+
     {{if weapon && weapon.name}}
     <div class="sr-weapon">
       <div class="weapon-img" style="background-image:url({{_res_path}}{{weapon.splash}})"></div>
@@ -175,7 +217,6 @@
           <span class="title">{{if attr.eff}}<i class="eff">{{attr.eff || ''}}</i>{{/if}}{{if attr.upNum}}<i
             class="up-num up-{{attr.upNum}}"></i>{{/if}}{{artisKeyTitle[attr.key] || attr.key}}</span>
             <span class="val">+{{attr.value}}</span>
-
           </li>
           {{/if}}
           {{/each}}
@@ -283,7 +324,9 @@
       </div>
       <div class="cont-footer dmg-desc">
         <ul>
-          <li>大数字的含义为圣遗物副词条置换后<strong>平均伤害</strong>的变化，下方的详情数字为<strong>平均伤害</strong>/<strong>暴击伤害</strong>。</li>
+          <li>
+            大数字的含义为圣遗物副词条置换后<strong>平均伤害</strong>的变化，下方的详情数字为<strong>平均伤害</strong>/<strong>暴击伤害</strong>。
+          </li>
           <li>关于<strong>平均伤害</strong>：是将暴击率计算在内的伤害期望，能反映综合的输出能力，不等于实际伤害数字。</li>
           <li>可用于评估当前面板下圣遗物副词条的侧重方向。实际游戏情况更加复杂，结果供参考~</li>
           <li>如需更换计算的伤害类型，可使用命令 <strong>{{gameHash}}{{data.abbr}}伤害+序号</strong>来切换，序号参见伤害计算板块</li>

resources/character/profile-detail.less

@@ -216,6 +216,10 @@ body {
   background-position: @i*-11 0;
 }
 
+.i-effDef {
+  background-position: @i*-12 0;
+}
+
 .detail.attr {
   li {
     &:nth-child(even) {
@@ -271,7 +275,7 @@ body {
     background-position: center;
   }
 
-  span {
+  strong {
     background: #fff;
     width: 34px;
     height: 26px;
@@ -287,7 +291,7 @@ body {
     box-shadow: 0 0 5px 0 #000;
   }
 
-  &.talent-plus span {
+  &.talent-plus strong {
     background: #2e353e;
     color: #ffdfa0;
     font-weight: bold;
@@ -1049,21 +1053,15 @@ body {
 }
 
 .game-sr {
-  .char-talents {
-    transform: scale(.8);
-    transform-origin: top left;
-    margin: -8px 0 -14px;
-
-
-    .talent-item {
-      margin: 0 -3px;
-    }
-  }
 
   .artis-weapon {
     display: none;
   }
 
+  .char-lv {
+    margin-bottom: 25px;
+  }
+
   .char-attr {
     .icon i {
       background-image: url('./imgs/icon-sr.png');
@@ -1189,6 +1187,119 @@ body {
   }
 }
 
+.sr-talent {
+  margin: 0 15px 10px 10px;
+  border-radius: 10px;
+  background: url("../common/cont/card-bg.png") top left repeat-x;
+  background-size: auto 150%;
+  position: relative;
+  box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
+  overflow: hidden;
+  display: flex;
+  color: #fff;
+  height: 72px;
+  width: calc(100% - 25px);
+  padding: 8px 10px;
+
+
+  .char-talents {
+    transform-origin: center left;
+    margin: 0;
+    width: 260px;
+
+
+    .talent-item {
+      margin: 0 -3px;
+    }
+
+    .talent-icon {
+      width: 60px;
+      height: 60px;
+
+      strong {
+        font-size: 13px;
+        width: 22px;
+        height: 20px;
+        line-height: 20px;
+        margin-left: -11px;
+        border-radius: 4px;
+      }
+
+      span {
+        position: absolute;
+        top: -3px;
+        font-size: 12px;
+        left: 0;
+        right: 0;
+        text-align: center;
+        color: #fff;
+        text-shadow: 0 0 3px #000, 1px 1px 1px #000;
+      }
+
+      &.talent-crown:after {
+        width: 22px;
+        height: 22px;
+        margin: 2px 0 0 5px;
+        background-image: url('../character/imgs/crown-sr.webp');
+        display: none;
+      }
+    }
+  }
+
+  .char-trees {
+    width: 290px;
+    padding-left: 10px;
+    position: relative;
+
+    .talent-icon {
+      margin: 0 -5px;
+
+      &.off {
+        filter: grayscale(100%);
+        opacity: .4;
+      }
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      width: 1px;
+      height: 30px;
+      background: rgba(255, 255, 255, .8);
+      position: absolute;
+      left: 0;
+      top: 15px;
+    }
+
+    .talent-item {
+      width: 40px;
+
+      .talent-icon {
+        margin: 0;
+      }
+    }
+
+    .tree-item {
+      width: 20px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .talent-icon {
+        width: 30px;
+        height: 30px;
+        margin: 0 -5px;
+      }
+
+      .talent-icon-img {
+
+      }
+    }
+  }
+
+}
+
 .copyright.ad {
   font-size: 12px;
 }