面板

apps/panel.js

@@ -14,20 +14,23 @@ export class Panel extends ZZZPlugin {
       priority: _.get(settings.getConfig('priority'), 'panel', 70),
       rule: [
         {
-          reg: `${rulePrefix}((刷新|更新)面板|面板(刷新|更新))$`,
+          reg: `${rulePrefix}(.*)面板(.*)$`,
-          fnc: 'refreshPanel',
+          fnc: 'handleRule',
-        },
-        {
-          reg: `${rulePrefix}面板(列表)?$`,
-          fnc: 'getCharPanelList',
-        },
-        {
-          reg: `${rulePrefix}(.+)面板$`,
-          fnc: 'getCharPanel',
         },
       ],
     });
   }
+  async handleRule() {
+    if (!this.e.msg) return;
+    const reg = new RegExp(`${rulePrefix}(.*)面板(.*)$`);
+    const pre = this.e.msg.match(reg)[4].trim();
+    const suf = this.e.msg.match(reg)[5].trim();
+    if (['刷新', '更新'].includes(pre) || ['刷新', '更新'].includes(suf))
+      return this.refreshPanel();
+    if (!pre || suf === '列表') return this.getCharPanelList();
+    return this.getCharPanel();
+  }
+
   async refreshPanel() {
     const uid = await this.getUID();
     if (!uid) return;
@@ -36,7 +39,7 @@ export class Panel extends ZZZPlugin {
     const coldTime = _.get(panelSettings, 'interval', 300);
     if (lastQueryTime && Date.now() - lastQueryTime < 1000 * coldTime) {
       await this.reply(`${coldTime}秒内只能刷新一次，请稍后再试`);
-      return;
+      return false;
     }
     const { api, deviceFp } = await this.getAPI();
     if (!api) return false;
@@ -46,39 +49,38 @@ export class Panel extends ZZZPlugin {
     const result = await refreshPanel(this.e, api, uid, deviceFp);
     if (!result) {
       await this.reply('面板列表刷新失败，请稍后再试');
-      return;
+      return false;
     }
-    const newChar = result.filter((item) => item.isNew);
+    const newChar = result.filter(item => item.isNew);
-    // let str = '面板列表获取成功，本次共刷新了' + newChar.length + '个角色：\n'
-    // for (const item of result) {
-    //   str += item.name_mi18n + (item.isNew ? '（新）' : '') + '、'
-    // }
-    // str = str.slice(0, -1)
-    // str += '\n总计' + result.length + '个角色'
-    // await this.reply(str)
     const finalData = {
-      uid: uid,
       newChar: newChar.length,
       list: result,
-    }
+    };
     await render(this.e, 'panel/refresh.html', finalData);
   }
   async getCharPanelList() {
     const uid = await this.getUID();
     if (!uid) return false;
-    const noteData = getPanelList(uid);
+    const result = getPanelList(uid);
-    if (!noteData) return false;
+    if (!result) {
-    await this.getPlayerInfo();
+      await this.reply('未找到面板列表，请先刷新面板');
-    let str = '面板列表获取成功，共计' + noteData.length + '个角色：';
+      return false;
-    for (const item of noteData) {
-      str += item.name_mi18n + '、';
     }
-    str = str.slice(0, -1);
+    await this.getPlayerInfo();
-    await this.reply(str);
+    const timer = setTimeout(() => {
-    // const finalData = {
+      if (this?.reply) {
-    //   list: noteData,
+        this.reply('查询成功，正在下载图片资源，请稍候。');
-    // };
+      }
-    // await render(this.e, 'panel/list.html', finalData);
+    }, 3000);
+    for (const item of result) {
+      await item.get_basic_assets();
+    }
+    clearTimeout(timer);
+    const finalData = {
+      count: result?.length || 0,
+      list: result,
+    };
+    await render(this.e, 'panel/list.html', finalData);
   }
   async getCharPanel() {
     const uid = await this.getUID();
@@ -88,7 +90,7 @@ export class Panel extends ZZZPlugin {
     if (['刷新', '更新'].includes(name)) return this.getCharPanelList();
     const data = getPanel(uid, name);
     if (!data) {
-      await this.reply(`未找到角色${name}的面板信息`);
+      await this.reply(`未找到角色${name}的面板信息，请先刷新面板`);
       return;
     }
     const timer = setTimeout(() => {
@@ -99,6 +101,7 @@ export class Panel extends ZZZPlugin {
     await data.get_detail_assets();
     clearTimeout(timer);
     const finalData = {
+      uid: uid,
       charData: data,
     };
     await render(this.e, 'panel/card.html', finalData);

resources/panel/card.css

@@ -1,6 +1,23 @@
 .card {
   padding-top: 0.8em;
   overflow: hidden;
+  position: relative;
+}
+.card .uid {
+  font-size: 0.6em;
+  text-align: center;
+  position: absolute;
+  border-image-source: url("./images/GroceryActivityBtnBg.png");
+  border-image-slice: 30 90 30 90 fill;
+  border-image-width: 0.4em 1.2em 0.4em 1.2em;
+  border-image-outset: 0em 0em 0em 0em;
+  border-image-repeat: stretch stretch;
+  padding: 0.5em 1.2em;
+  font-size: 1em;
+  top: 0.1em;
+  color: rgb(255, 255, 255);
+  stroke: 0.05em rgba(0, 0, 0, 0.6);
+  -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6);
 }
 .card .star {
   width: 5.5em;
@@ -299,6 +316,9 @@
   flex-shrink: 1;
   font-size: 0.65em;
   color: rgb(166, 166, 166);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .card .basic .info .property_info .list .properties .label.yellow {
   color: rgb(247, 199, 54);
@@ -389,6 +409,9 @@
   flex-shrink: 1;
   font-size: 0.7em;
   color: rgb(222, 222, 222);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .card .basic .info .weapon_info .icon {
   position: absolute;
@@ -566,6 +589,9 @@
   flex-shrink: 1;
   font-size: 0.7em;
   color: rgb(222, 222, 222);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .card .equip-list .box .property-list .properties .value {
   color: rgb(249, 189, 64);

resources/panel/card.html

@@ -6,6 +6,7 @@
 
 {{block 'main'}}
 <div class="card">
+  <div class="uid">UID {{uid}}</div>
   <div class="basic">
     <div class="char">
       <div class="avatar">
@@ -178,4 +179,4 @@
     </div>
   </div>
 </div>
-{{/block}}
+{{/block}}

resources/panel/card.scss

@@ -1,6 +1,23 @@
 .card {
   padding-top: 0.8em;
   overflow: hidden;
+  position: relative;
+  .uid {
+    font-size: 0.6em;
+    text-align: center;
+    position: absolute;
+    border-image-source: url('./images/GroceryActivityBtnBg.png');
+    border-image-slice: 30 90 30 90 fill;
+    border-image-width: 0.4em 1.2em 0.4em 1.2em;
+    border-image-outset: 0em 0em 0em 0em;
+    border-image-repeat: stretch stretch;
+    padding: 0.5em 1.2em;
+    font-size: 1em;
+    top: 0.1em;
+    color: rgb(255, 255, 255);
+    stroke: 0.05em rgba(0, 0, 0, 0.6);
+    -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.6);
+  }
   .star {
     width: 5.5em;
     height: 1.5em;
@@ -172,6 +189,9 @@
               flex-shrink: 1;
               font-size: 0.65em;
               color: rgb(166, 166, 166);
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
               &.yellow {
                 color: rgb(247, 199, 54);
               }
@@ -280,6 +300,9 @@
                 flex-shrink: 1;
                 font-size: 0.7em;
                 color: rgb(222, 222, 222);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
               }
             }
           }
@@ -421,6 +444,9 @@
             flex-shrink: 1;
             font-size: 0.7em;
             color: rgb(222, 222, 222);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
           .value {
             color: rgb(249, 189, 64);

resources/panel/list.html

@@ -0,0 +1,33 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/refresh.css">
+{{/block}}
+
+{{block 'main'}}
+<div class="panel">
+  <div class="info">
+    {{include sys.playerInfo}}
+    <div class="count">共计 {{count}} 个角色</div>
+    <div class="icon"></div>
+  </div>
+  <div class="list">
+    {{each list item}}
+    <div class="item">
+      <div class="icon">
+        <img class="streng" src="{{item.square_icon}}" alt="" />
+        <div class="rank r{{item.rank}}">
+          <span> {{item.rank}} </span>
+        </div>
+      </div>
+      <div class="name">
+        <span>{{item.name_mi18n}}</span>
+        <div class="rank-icon img {{item.rarity}}"></div>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{/block}}
+
+</html>

resources/panel/refresh.css

@@ -3,25 +3,51 @@
   background-size: cover;
 }
 
-.panel > .icon {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0.5em;
-  padding-top: 0.5em;
-}
-.panel > .icon .img {
-  width: 2em;
-  height: 2em;
-  background-image: url(./images/refresh_title.png);
-  background-size: 100% 100%;
-}
 .panel > .info {
-  color: white;
-  font-size: 1em;
-  font-weight: normal;
-  margin-bottom: 1em;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  font-size: 0.7em;
+  padding: 0 2em;
+  margin-bottom: 1em;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(0.2em);
+}
+.panel > .info .user-info {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.panel > .info .count {
+  font-size: 1.4em;
+  flex-shrink: 0;
+  flex-grow: 0;
+  padding: 0.3em 0.7em;
+  border-radius: 0.5em;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  filter: drop-shadow(0 0 0.1em rgba(216, 255, 254, 0.6));
+  margin-right: 0.6em;
+  position: relative;
+}
+.panel > .info .count::after {
+  content: "";
+  position: absolute;
+  right: -0.38em;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 0.4em solid transparent;
+  border-left: 0.4em solid rgba(0, 0, 0, 0.8);
+  border-bottom: 0.4em solid transparent;
+}
+.panel > .info .icon {
+  width: 3.5em;
+  flex-grow: 0;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+  display: flex;
+  background: url("./images/refresh_title.png") center/contain no-repeat;
 }
 .panel > .list {
   border: 0.1em solid rgb(87, 80, 102);
@@ -44,8 +70,7 @@
   padding: 0.2em 0em;
 }
 .panel > .list .item .icon {
-  background-image: url("./images/@~8B@XO~)U1BIPPR}NN9CI7.png");
+  background: url("./images/avatar_box.png") center/contain no-repeat;
-  background-size: contain;
   margin-bottom: 0.2em;
   position: relative;
 }
@@ -54,8 +79,10 @@
   height: 3.5em;
   border-radius: 50%;
   padding: 0.25em 0.25em 0.3em 0.25em;
+  object-fit: cover;
+  object-position: center;
 }
-.panel > .list .item .icon .level {
+.panel > .list .item .icon .rank {
   position: absolute;
   right: 1.25em;
   bottom: -0.1em;
@@ -69,56 +96,50 @@
   padding: 0.05em;
   background-color: rgb(117, 117, 117);
 }
-.panel > .list .item .icon .level span {
+.panel > .list .item .icon .rank span {
   font-size: 0.7em;
 }
-.panel > .list .item .icon .level.r1 {
+.panel > .list .item .icon .rank.r1 {
   background-color: rgb(58, 116, 43);
 }
-.panel > .list .item .icon .level.r2 {
+.panel > .list .item .icon .rank.r2 {
   background-color: rgb(61, 132, 214);
 }
-.panel > .list .item .icon .level.r3 {
+.panel > .list .item .icon .rank.r3 {
   background-color: rgb(223, 118, 118);
 }
-.panel > .list .item .icon .level.r4 {
+.panel > .list .item .icon .rank.r4 {
   background-color: rgb(51, 54, 161);
 }
-.panel > .list .item .icon .level.r5 {
+.panel > .list .item .icon .rank.r5 {
   background-color: rgb(102, 127, 19);
 }
-.panel > .list .item .icon .level.r6 {
+.panel > .list .item .icon .rank.r6 {
   background-color: rgb(218, 48, 32);
 }
 .panel > .list .item .name {
-  height: 1.4em;
   width: 5.4em;
   overflow: visible;
-  background-image: url("./images/refresh_char_bg.png");
+  padding: 0.1em 0;
-  background-size: 100% 100%;
+  padding-left: 0.5em;
-  background-repeat: no-repeat;
+  border-image-slice: 0 30 0 40 fill;
+  border-image-width: 0em 0.45em 0em 0.7em;
+  border-image-outset: 0 0.11em 0 0;
+  border-image-repeat: stretch stretch;
+  border-image-source: url("./images/CurseBG04.png");
   display: flex;
   align-items: center;
-  justify-content: center;
   color: white;
-  padding: 0 0.7em;
 }
 .panel > .list .item .name .img {
   width: 1em;
-  height: 1em;
   display: inline-block;
-  margin-right: 0.05em;
+  flex-shrink: 0;
-  background-size: 100% 100%;
+  flex-grow: 0;
-  transform: translateY(0.03em);
+  background-color: rgba(0, 0, 0, 0.5);
-}
+  border-radius: 50%;
-.panel > .list .item .name .img.S, .panel > .list .item .name .img.s {
+  background-size: 70%;
-  background-image: url(./images/SRANK.png);
+  box-shadow: 0 0 0 0.07em rgba(85, 85, 85, 0.5);
-}
-.panel > .list .item .name .img.A, .panel > .list .item .name .img.a {
-  background-image: url(./images/ARANK.png);
-}
-.panel > .list .item .name .img.B, .panel > .list .item .name .img.b {
-  background-image: url(./images/BRANK.png);
 }
 .panel > .list .item .name span {
   font-size: 0.7em;
@@ -126,4 +147,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}/*# sourceMappingURL=refresh.css.map */
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+/*# sourceMappingURL=refresh.css.map */

resources/panel/refresh.html

@@ -6,22 +6,23 @@
 
 {{block 'main'}}
 <div class="panel">
-  <div class="icon">
+  <div class="info">
-    <div class="img"></div>
+    {{include sys.playerInfo}}
+    <div class="count">已为您更新 {{newChar}} 个角色</div>
+    <div class="icon"></div>
   </div>
-  <div class="info">你好，已为 UID{{uid}} 成功更新 {{newChar}} 个角色！</div>
   <div class="list">
     {{each list item}}
     <div class="item">
       <div class="icon">
         <img class="streng" src="{{item.square_icon}}" alt="" />
-        <div class="level r{{item.rank}}">
+        <div class="rank r{{item.rank}}">
           <span> {{item.rank}} </span>
         </div>
       </div>
       <div class="name">
-        <div class="img {{item.rarity}}"></div>
         <span>{{item.name_mi18n}}</span>
+        <div class="rank-icon img {{item.rarity}}"></div>
       </div>
     </div>
     {{/each}}

resources/panel/refresh.scss

@@ -3,25 +3,51 @@
   background-size: cover;
 }
 .panel {
-  & > .icon {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 0.5em;
-    padding-top: 0.5em;
-    .img {
-      width: 2em;
-      height: 2em;
-      background-image: url(./images/refresh_title.png);
-      background-size: 100% 100%;
-    }
-  }
   & > .info {
-    color: white;
-    font-size: 1em;
-    font-weight: normal;
-    margin-bottom: 1em;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    font-size: 0.7em;
+    padding: 0 2em;
+    margin-bottom: 1em;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(0.2em);
+    .user-info {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+    .count {
+      font-size: 1.4em;
+      flex-shrink: 0;
+      flex-grow: 0;
+      padding: 0.3em 0.7em;
+      border-radius: 0.5em;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: white;
+      filter: drop-shadow(0 0 0.1em rgba(216, 255, 254, 0.6));
+      margin-right: 0.6em;
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        right: -0.38em;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-top: 0.4em solid transparent;
+        border-left: 0.4em solid rgba(0, 0, 0, 0.8);
+        border-bottom: 0.4em solid transparent;
+      }
+    }
+    .icon {
+      width: 3.5em;
+      flex-grow: 0;
+      flex-shrink: 0;
+      aspect-ratio: 1;
+      display: flex;
+      background: url('./images/refresh_title.png') center / contain no-repeat;
+    }
   }
   & > .list {
     border: 0.1em solid rgba(87, 80, 102);
@@ -43,8 +69,7 @@
       align-items: center;
       padding: 0.2em 0em;
       .icon {
-        background-image: url('./images/@~8B@XO~\)U1BIPPR}NN9CI7.png');
+        background: url('./images/avatar_box.png') center / contain no-repeat;
-        background-size: contain;
         margin-bottom: 0.2em;
         position: relative;
         img.streng {
@@ -52,11 +77,11 @@
           height: 3.5em;
           border-radius: 50%;
           padding: 0.25em 0.25em 0.3em 0.25em;
+          object-fit: cover;
+          object-position: center;
         }
-        .level {
+        .rank {
           position: absolute;
-          // right: 0.2em;
-          // bottom: 0.25em;
           right: 1.25em;
           bottom: -0.1em;
           border-radius: 50%;
@@ -92,36 +117,28 @@
         }
       }
       .name {
-        height: 1.4em;
         width: 5.4em;
         overflow: visible;
-        background-image: url('./images/refresh_char_bg.png');
+        padding: 0.1em 0;
-        background-size: 100% 100%;
+        padding-left: 0.5em;
-        background-repeat: no-repeat;
+        border-image-slice: 0 30 0 40 fill;
+        border-image-width: 0em 0.45em 0em 0.7em;
+        border-image-outset: 0 0.11em 0 0;
+        border-image-repeat: stretch stretch;
+        border-image-source: url('./images/CurseBG04.png');
         display: flex;
         align-items: center;
-        justify-content: center;
         color: white;
-        padding: 0 0.7em;
         .img {
           width: 1em;
-          height: 1em;
           display: inline-block;
-          margin-right: 0.05em;
+          flex-shrink: 0;
-          background-size: 100% 100%;
+          flex-grow: 0;
-          transform: translateY(0.03em);
+          background-color: rgba(0, 0, 0, 0.5);
-          &.S,
+          border-radius: 50%;
-          &.s {
+          background-size: 70%;
-            background-image: url(./images/SRANK.png);
+          box-shadow: 0 0 0 0.07em rgba(85, 85, 85, 0.5);
-          }
+          // margin-top: -0.02em;
-          &.A,
-          &.a {
-            background-image: url(./images/ARANK.png);
-          }
-          &.B,
-          &.b {
-            background-image: url(./images/BRANK.png);
-          }
         }
 
         span {
@@ -130,6 +147,8 @@
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
+          flex-grow: 1;
+          flex-shrink: 1;
         }
       }
     }