重写#刻晴的角色卡片样式

CHANGELOG.md

@@ -1,9 +1,10 @@
-# 2.0 Alpha.3
+# 2.0 Alpha.4
 
-* 调整`#心海`的角色卡片样式，尚未完全稳定
+* 重写`#刻晴`的角色卡片样式
 * `#妮露天赋` 样式微调
+* 一些已知Bug修复
 
-# 2.0 Alpha.2
+# 2.0 Alpha.1~3
 
 * `#深渊配队`、`#戳一戳` 适配V3
 * 优化V3下获取Uid及CK的逻辑，防止一些情况下触发报错

apps/character/avatar-card.js

@@ -5,23 +5,20 @@ import { segment } from 'oicq'
 
 export async function renderAvatar (e, avatar, renderType = 'card') {
   // 如果传递的是名字，则获取
+  let uid = e.uid
   if (typeof (avatar) === 'string') {
     let char = Character.get(avatar)
     if (!char) {
       return false
     }
-
     let MysApi = await e.getMysApi({
       auth: 'all',
       targetType: Cfg.get('char.queryOther', true) ? 'all' : 'self',
       cookieType: 'all',
       actionName: '查询信息'
     })
-
     if (!MysApi) return true
-
-    let uid = MysApi.targetUser.uid
-
+    uid = MysApi.targetUser.uid
     if (char.isCustom) {
       avatar = { id: char.id, name: char.name, detail: false }
     } else {
@@ -43,6 +40,13 @@ export async function renderAvatar (e, avatar, renderType = 'card') {
       }
     }
   }
+  if (!avatar.isProfile) {
+    let profile = Profile.get(uid, avatar.id, true)
+    if (profile && profile.hasData) {
+      // 优先使用Profile数据
+      avatar = profile
+    }
+  }
   return await renderCard(e, avatar, renderType)
 }
 
@@ -68,7 +72,7 @@ async function renderCard (e, ds, renderType = 'card') {
       cookieType: 'all',
       actionName: '查询信息'
     })
-    data = avatar.getData('id,name,sName,level,fetter,cons,weapon,elem,artis,imgs,dataSourceName,updateTime')
+    data = avatar.getData('id,name,sName,level,fetter,cons,weapon,elem,artis,artisSet,imgs,dataSourceName,updateTime')
     if (avatar.isProfile || (MysApi && MysApi.isSelfCookie)) {
       data.talent = await avatar.getTalent(MysApi)
       data.talentMap = ['a', 'e', 'q']
@@ -78,7 +82,7 @@ async function renderCard (e, ds, renderType = 'card') {
   }
   let width = 600
   if (bg.mode === 'left') {
-    width = 500 * bg.width / bg.height
+    width = 600 * bg.width / bg.height
   }
   // 渲染图像
   let msgRes = await Common.render('character/character-card', {

apps/index.js

@@ -7,14 +7,14 @@ import help from './help.js'
 import admin from './admin.js'
 
 export const characterApp = character.v2App()
+export const profileApp = profile.v2App()
 export const adminApp = admin.v2App()
 export const helpApp = help.v2App()
 export const statApp = stat.v2App()
 export const wikiApp = wiki.v2App()
 export const pokeApp = poke.v2App()
-export const profileApp = profile.v2App()
 
-let apps = { character, admin, help, stat, wiki, poke, profile }
+let apps = { character, poke, profile, stat, wiki, admin, help }
 let rule = {} // v2
 let rules = {} // v3
 for (let key in apps) {

apps/profile.js

@@ -12,7 +12,7 @@ let app = App.init({
   name: '角色面板'
 })
 app.reg('profile-detail', profileDetail, {
-  rule: /^#*(更新|录入)?(.+)(详细|详情|面板|面版|圣遗物|伤害[1-7]?)(更新)?$/,
+  rule: /^#*(更新|录入)?(.+)(详细|详情|面板|面版|圣遗物|伤害[1-7]?)(\d{9})*(更新)?$/,
   name: '角色面板'
 })
 

apps/wiki.js

@@ -50,8 +50,8 @@ async function wiki (e) {
   }
 
   if ((mode === 'pic' && Common.isDisable(e, 'wiki.pic')) ||
-    (mode !== 'pic' && Common.isDisable(e, 'wiki.wiki'))) {
-    return
+      (mode !== 'pic' && Common.isDisable(e, 'wiki.wiki'))) {
+    return false
   }
 
   let char = Character.get(ret[1])

models/Avatar.js

@@ -32,7 +32,7 @@ export default class Avatar extends Base {
   }
 
   get dataSourceName () {
-    return this.meta.dataSourceName || 'MysApi'
+    return this.meta.dataSourceName || '米游社'
   }
 
   get updateTime () {
@@ -131,4 +131,46 @@ export default class Avatar extends Base {
     ret.id = id
     return ret
   }
+
+  get artisSet () {
+    if (this.isProfile) {
+      let meta = this.meta
+      if (meta.artis) {
+        return meta.artis.getSetData()
+      }
+      return {}
+    }
+    if (this._artisSet) {
+      return this._artisSet
+    }
+    let artis = this.artis
+    let setCount = {}
+    lodash.forEach(artis, (arti, idx) => {
+      let set = arti?.set?.name
+      if (set) {
+        setCount[set] = (setCount[set] || 0) + 1
+      }
+    })
+    let sets = {}
+    let names = []
+    let abbrs = []
+    let abbrs2 = []
+    for (let set in setCount) {
+      if (setCount[set] >= 2) {
+        sets[set] = setCount[set] >= 4 ? 4 : 2
+        names.push(Artifact.getArtiBySet(set))
+      }
+    }
+    lodash.forEach(sets, (v, k) => {
+      abbrs.push(Artifact.getAbbrBySet(k) + v)
+      abbrs2.push(k + v)
+    })
+    this._artisSet = {
+      sets,
+      names,
+      abbrs: [...abbrs, ...abbrs2],
+      name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
+    }
+    return this._artisSet
+  }
 }

models/ProfileArtis.js

@@ -139,6 +139,7 @@ export default class ProfileArtis extends Base {
     let sets = {}
     let names = []
     let abbrs = []
+    let abbrs2 = []
     for (let set in setCount) {
       if (setCount[set] >= 2) {
         sets[set] = setCount[set] >= 4 ? 4 : 2
@@ -146,10 +147,15 @@ export default class ProfileArtis extends Base {
       }
     }
     lodash.forEach(sets, (v, k) => {
-      abbrs.push(k + v)
       abbrs.push(Artifact.getAbbrBySet(k) + v)
+      abbrs2.push(k + v)
     })
-    this._setData = { sets, names, abbrs }
+    this._setData = {
+      sets,
+      names,
+      abbrs: [...abbrs, ...abbrs2],
+      name: abbrs.length > 1 ? abbrs.join('+') : abbrs2[0]
+    }
     return this._setData
   }
 

models/ProfileData.js

@@ -133,6 +133,10 @@ export default class ProfileData extends Base {
     }[this.dataSource] || 'Enka.NetWork'
   }
 
+  get isProfile () {
+    return true
+  }
+
   // 获取当前profileData的圣遗物评分，withDetail=false仅返回简略信息
   getArtisMark (withDetail = true) {
     if (this.hasData) {

models/character-lib/CharTalent.js

@@ -7,7 +7,7 @@ const CharTalent = {
     lodash.forEach(['a', 'e', 'q'], (key) => {
       let ds = talent[key]
       if (!ds) {
-        ds = 1
+        return
       }
       let value
       let level
@@ -38,20 +38,6 @@ const CharTalent = {
       ret[key] = { level, original }
     })
     return ret
-  },
-
-  getConsTalent (talent, cons) {
-    if (!talent) {
-      return { e: 3, q: 5 }
-    }
-    let e = talent.e.name
-    let q = talent.q.name
-    let c3 = cons['3'].desc
-    let c5 = cons['5'].desc
-    return {
-      e: c3.includes(e) ? 3 : 5,
-      q: c5.includes(q) ? 5 : 3
-    }
   }
 }
 export default CharTalent

resources/character/character-card.css

@@ -153,12 +153,12 @@ body {
 .weapon-cont .star {
   height: 20px;
   width: 100px;
-  background: url("../common/item/star.png") no-repeat;
+  background: url("../common/item/star-ltr.png") no-repeat;
   background-size: 100px 100px;
   transform: scale(0.8);
   transform-origin: -5px center;
   display: inline-block;
-  margin: 1px 0;
+  margin: 1px 0 -2px;
 }
 .weapon-cont .star.star-2 {
   background-position: 0 -20px;
@@ -173,10 +173,10 @@ body {
   background-position: 0 -80px;
 }
 .weapon-cont .weapon-info {
-  padding: 13px 0 0 13px;
+  padding: 10px 0 0 0;
 }
 .weapon-cont .weapon-info strong {
-  font-size: 17px;
+  font-size: 18px;
 }
 .talent-cont {
   display: flex;
@@ -185,7 +185,7 @@ body {
 .talent-cont .talent-item,
 .talent-cont .talent-icon {
   width: 100px;
-  height: 100px;
+  height: 80px;
 }
 .talent-cont .talent-item {
   position: relative;
@@ -223,7 +223,7 @@ body {
   text-align: center;
   border-radius: 5px;
   position: absolute;
-  bottom: -15px;
+  bottom: -25px;
   left: 50%;
   margin-left: -15px;
   color: #000;
@@ -237,29 +237,41 @@ body {
 }
 .talent-cont .talent-icon.talent-crown:after {
   content: "";
-  display: none;
-  width: 24px;
-  height: 24px;
+  display: block;
+  width: 20px;
+  height: 20px;
   background: url("../character/imgs/crown.png") no-repeat;
   background-size: contain;
   position: absolute;
   left: 50%;
   top: -5px;
-  margin-left: -12px;
+  margin-left: -10px;
+}
+.artis-cont {
+  text-shadow: 1px 1px 1px #000;
+}
+.artis-cont .artis-sets {
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.3);
+  font-size: 14px;
 }
 .artis-cont .artis-list {
   display: flex;
-  height: 50px;
-  padding: 5px;
+  flex-wrap: wrap;
+  height: 65px;
 }
 .artis-cont .artis-list .item {
-  height: 50px;
+  height: 65px;
+  padding-top: 3px;
   width: 20%;
+  box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 .artis-cont .artis-list .item .item-icon {
   width: 110%;
-  height: 110%;
-  margin: -5% -5% 0;
+  height: 45px;
+  margin: -5%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -269,9 +281,33 @@ body {
   font-size: 14px;
   text-align: center;
 }
+.artis-cont .artis-list .item .lv:before {
+  content: "Lv.";
+  font-size: 12px;
+  display: inline-block;
+  transform: scale(0.8);
+  transform-origin: right 10px;
+  margin-left: -2px;
+}
+.artis-cont .artis-list .item:nth-child(odd) {
+  background: rgba(0, 0, 0, 0.2);
+}
+.artis-cont .artis-list .item:nth-child(even) {
+  background: rgba(134, 118, 85, 0.15);
+}
+.artis-cont .artis-list .item.no-item {
+  background: url('../common/item/artifact-icon.webp') center no-repeat;
+  background-size: 60% auto;
+}
 .bottom-mode {
   width: 600px;
 }
+.bottom-mode .char-title {
+  padding-top: 20px;
+}
+.bottom-mode .char-lv {
+  padding-top: 5px;
+}
 .bottom-mode .copyright {
   font-size: 12px;
   position: absolute;
@@ -298,7 +334,7 @@ body {
 .bottom-mode .char-detail > .cont {
   background: none;
   box-shadow: none;
-  margin: 8px 0 0;
+  margin: 5px 0 0;
 }
 .bottom-mode .char-detail > .cont.left-line:after,
 .bottom-mode .char-detail > .cont.right-line:after {
@@ -309,17 +345,27 @@ body {
   background: rgba(255, 255, 255, 0.5);
   position: absolute;
   top: 20px;
-  right: 0;
+  right: 5px;
 }
 .bottom-mode .char-detail > .cont.right-line:after {
+  display: none;
   right: initial;
   left: 0;
 }
 .bottom-mode .char-detail .notice-cont {
   padding-top: 40px;
 }
+.bottom-mode .char-detail .artis-cont {
+  margin-right: 10px;
+}
+.bottom-mode .char-detail .artis-cont .item {
+  box-shadow: none;
+}
+.bottom-mode .char-detail .talent-cont .talent-item {
+  padding-top: 5px;
+}
 .left-mode {
-  height: 500px;
+  height: 600px;
   width: auto;
 }
 .left-mode .container {
@@ -355,12 +401,18 @@ body {
   display: block;
 }
 .left-mode .char-detail > .cont {
-  padding-top: 8px;
   margin-top: 8px;
+  background-size: 100% 150%;
 }
 .left-mode .char-detail .notice-cont {
   height: 30px;
-  line-height: 16px;
+  line-height: 30px;
   background-size: 100% 200%;
 }
+.left-mode .char-detail .talent-cont .talent-item {
+  padding-top: 8px;
+}
+.left-mode .char-detail .talent-cont .talent-item span {
+  bottom: -20px;
+}
 /*# sourceMappingURL=character-card.css.map */

resources/character/character-card.html

@@ -20,24 +20,24 @@
         </div>
     </div>
     {{if data.level}}
-    {{set weapon = data.weapon }}
+    {{set w = data.weapon }}
 
     <div class="char-detail cont">
 
         <div class="cont weapon-cont left-line">
-            <img class="img" src="{{_res_path}}{{weapon.img}}"/>
+            <img class="img" src="{{_res_path}}{{w.img}}"/>
             <div class="weapon-info">
-                <strong>{{weapon.name}}</strong>
-                <div class="star star-{{weapon.star}}"></div>
-                <span>Lv.{{weapon.leve || weapon.level}} <span
-                        class="affix affix-{{weapon.affix}}">精{{weapon.affix}}</span></span>
+                <strong>{{w.name.length > 5 ? (w.abbr||w.name) : w.name}}</strong>
+                <div class="star star-{{w.star}}"></div>
+                <span>Lv.{{w.leve || w.level}} <span
+                        class="affix affix-{{w.affix}}">精{{w.affix}}</span></span>
             </div>
         </div>
 
 
         {{set talent = data.talent }}
         {{set keys = ['a','e','q'] }}
-        {{ if talent && talent.a && talent.a.level }}
+        {{ if talent && talent.a && talent.a.level}}
         <div class="cont talent-cont elem-{{data.elem}}">
             {{each keys key}}
             <div class="talent-item">
@@ -60,17 +60,23 @@
 
 
         <div class="cont artis-cont right-line">
-            {{if data.artis}}
+            {{set idxs = [1,2,3,4,5] }}
             <div class="artis-list">
-                {{each data.artis arti}}
+                {{each idxs idx}}
+                {{if data.artis && data.artis[idx]}}
+                {{set arti = data.artis[idx]}}
                 <div class="item">
                     <div class="item-icon"
                          style="background-image:url({{_res_path}}meta/reliquaries/icon/{{arti.name}}.png)"></div>
                     <span class="lv">{{arti.level}}</span>
                 </div>
+                {{else}}
+                <div class="item no-item"></div>
+                {{/if}}
+
                 {{/each}}
             </div>
-            {{/if}}
+            <div class="artis-sets">{{data.artisSet?.name||'圣遗物'}}</div>
         </div>
 
 

resources/character/character-card.less

@@ -177,12 +177,12 @@ body {
   .star {
     height: 20px;
     width: 100px;
-    background: url("../common/item/star.png") no-repeat;
+    background: url("../common/item/star-ltr.png") no-repeat;
     background-size: 100px 100px;
     transform: scale(0.8);
     transform-origin: -5px center;
     display: inline-block;
-    margin: 1px 0;
+    margin: 1px 0 -2px;
 
 
     &.star-2 {
@@ -203,10 +203,10 @@ body {
   }
 
   .weapon-info {
-    padding: 13px 0 0 13px;
+    padding: 10px 0 0 0;
 
     strong {
-      font-size: 17px;
+      font-size: 18px;
     }
   }
 
@@ -216,9 +216,10 @@ body {
   display: flex;
   padding: 0 5px;
 
+
   .talent-item, .talent-icon {
     width: 100px;
-    height: 100px;
+    height: 80px;
   }
 
   .talent-item {
@@ -259,7 +260,7 @@ body {
       text-align: center;
       border-radius: 5px;
       position: absolute;
-      bottom: -15px;
+      bottom: -25px;
       left: 50%;
       margin-left: -15px;
       color: #000;
@@ -275,33 +276,45 @@ body {
 
     &.talent-crown:after {
       content: "";
-      display: none;
-      width: 24px;
-      height: 24px;
+      display: block;
+      width: 20px;
+      height: 20px;
       background: url("../character/imgs/crown.png") no-repeat;
       background-size: contain;
       position: absolute;
       left: 50%;
       top: -5px;
-      margin-left: -12px;
+      margin-left: -10px;
     }
   }
 }
 
 .artis-cont {
+  text-shadow: 1px 1px 1px #000;
+
+  .artis-sets {
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    background: rgba(0, 0, 0, .3);
+    font-size: 14px;
+  }
+
   .artis-list {
     display: flex;
-    height: 50px;
-    padding: 5px;
+    flex-wrap: wrap;
+    height: 65px;
 
     .item {
-      height: 50px;
+      height: 65px;
+      padding-top: 3px;
       width: 20%;
+      box-shadow: 0 0 1px 0 rgba(255, 255, 255, .5);
 
       .item-icon {
         width: 110%;
-        height: 110%;
-        margin: -5% -5% 0;
+        height: 45px;
+        margin: -5%;
         background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
@@ -311,6 +324,28 @@ body {
         display: block;
         font-size: 14px;
         text-align: center;
+
+        &:before {
+          content: "Lv.";
+          font-size: 12px;
+          display: inline-block;
+          transform: scale(.8);
+          transform-origin: right 10px;
+          margin-left: -2px;
+        }
+      }
+
+      &:nth-child(odd) {
+        background: rgba(0, 0, 0, .2);
+      }
+
+      &:nth-child(even) {
+        background: rgba(134, 118, 85, 0.15);
+      }
+
+      &.no-item {
+        background: url('../common/item/artifact-icon.webp') center no-repeat;
+        background-size: 60% auto;
       }
     }
   }
@@ -319,6 +354,14 @@ body {
 .bottom-mode {
   width: 600px;
 
+  .char-title {
+    padding-top: 20px;
+  }
+
+  .char-lv {
+    padding-top: 5px;
+  }
+
   .copyright {
     font-size: 12px;
     position: absolute;
@@ -347,7 +390,7 @@ body {
     & > .cont {
       background: none;
       box-shadow: none;
-      margin: 8px 0 0;
+      margin: 5px 0 0;
 
       &.left-line,
       &.right-line {
@@ -359,11 +402,12 @@ body {
           background: rgba(255, 255, 255, .5);
           position: absolute;
           top: 20px;
-          right: 0;
+          right: 5px;
         }
       }
 
       &.right-line:after {
+        display: none;
         right: initial;
         left: 0;
       }
@@ -372,11 +416,25 @@ body {
     .notice-cont {
       padding-top: 40px;
     }
+
+    .artis-cont {
+      margin-right: 10px;
+
+      .item {
+        box-shadow: none;
+      }
+    }
+
+    .talent-cont {
+      .talent-item {
+        padding-top: 5px;
+      }
+    }
   }
 }
 
 .left-mode {
-  height: 500px;
+  height: 600px;
   width: auto;
 
   .container {
@@ -416,14 +474,24 @@ body {
     display: block;
 
     & > .cont {
-      padding-top: 8px;
       margin-top: 8px;
+      background-size: 100% 150%;
     }
 
     .notice-cont {
       height: 30px;
-      line-height: 16px;
+      line-height: 30px;
       background-size: 100% 200%;
     }
+
+    .talent-cont {
+      .talent-item {
+        padding-top: 8px;
+
+        span {
+          bottom: -20px;
+        }
+      }
+    }
   }
 }

resources/common/tpl.css

@@ -195,19 +195,6 @@
   position: relative;
   border-radius: 3px;
   box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
-  /*
-            &.talent-crown:before {
-              content: "";
-              display: block;
-              width: 10px;
-              height: 10px;
-              position: absolute;
-              left: 0;
-              top: 0;
-              background: url("../character/imgs/crown.png") center no-repeat;
-              background-size: contain;
-            }
-      */
 }
 .avatar-card .avatar-talent .talent-item.talent-plus {
   font-weight: bold;
@@ -218,6 +205,17 @@
   color: #3a2702;
   box-shadow: 0 0 2px 0 #000;
 }
+.avatar-card .avatar-talent.no-talent {
+  font-size: 12px;
+  color: rgba(100, 100, 100, 0.5);
+  text-align: center;
+  padding: 3px 0 2px;
+}
+.avatar-card .avatar-talent.no-talent span {
+  transform: scale(0.75);
+  white-space: nowrap;
+  margin-left: -1px;
+}
 .avatar-card .cons {
   position: absolute;
   right: 0;

resources/common/tpl/avatar-card.html

@@ -13,7 +13,7 @@
       <div class="avatar-level">Lv{{avatar.level}}</div>
     </div>
     {{set talent = avatar.talent || {} }}
-    {{if talent.a && talent.a.level }}
+    {{if talent.a && talent.a.level && false }}
     <div class="avatar-talent">
       {{each talentMap k}}
       {{set t = talent[k] || {} }}
@@ -21,7 +21,7 @@
       {{/each}}
     </div>
     {{else}}
-    <div class="avatar-talent"> -</div>
+    <div class="avatar-talent no-talent"><span>暂无天赋数据</span></div>
     {{/if}}
     <div class="avatar-detail">
       <div class="item avatar-weapon">

resources/common/tpl/avatar-card.less

@@ -77,6 +77,19 @@
         box-shadow: 0 0 2px 0 #000;
       }
     }
+
+    &.no-talent {
+      font-size: 12px;
+      color: rgba(100, 100, 100, .5);
+      text-align: center;
+      padding: 3px 0 2px;
+
+      span {
+        transform: scale(.75);
+        white-space: nowrap;
+        margin-left: -1px;
+      }
+    }
   }
 
   .cons {

tools/web.js

@@ -58,7 +58,6 @@ app.get('/:type', function (req, res) {
 
   let app = data._app || 'genshin'
   if (data._plugin) {
-    console.log(data._plugin)
     data._res_path = `/plugins/${data._plugin}/resources/`
   }
   let tplPath = `${app}/${page}/${page}.html`