From cf553ecaab9cead98f505a9a0568253f91386ce6 Mon Sep 17 00:00:00 2001
From: UCPr <2032385471@qq.com>
Date: Tue, 1 Apr 2025 23:22:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E9=9D=A2=E6=9D=BF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E8=AF=84=E5=88=86=E8=A7=84=E5=88=99=E5=90=8D=E3=80=81?=
 =?UTF-8?q?=E6=9C=89=E7=9B=8A/=E6=9C=89=E6=95=88=E8=AF=8D=E6=9D=A1?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 model/avatar.js           |   4 +-
 resources/panel/card.css  |  73 ++++++++++-----
 resources/panel/card.html |  45 ++++++----
 resources/panel/card.scss | 183 ++++++++++++++++++++++----------------
 4 files changed, 190 insertions(+), 115 deletions(-)

diff --git a/model/avatar.js b/model/avatar.js
index 78fe6a7..9ffefef 100644
--- a/model/avatar.js
+++ b/model/avatar.js
@@ -262,7 +262,9 @@ export class ZZZAvatarInfo {
     this.isNew = isNew;
     /** @type {number}  等级级别（取十位数字）*/
     this.level_rank = Math.floor(this.level / 10);
-    this.scoreWeight = formatScoreWeight(scoreFnc[this.id] && scoreFnc[this.id](this)?.[1]) || scoreWeight[this.id];
+    const weight = scoreFnc[this.id] && scoreFnc[this.id](this);
+    this.weightRule = weight?.[0] || '默认';
+    this.scoreWeight = formatScoreWeight(weight?.[1]) || scoreWeight[this.id];
     for (const equip of this.equip) {
       equip.get_score(this.scoreWeight);
     }
diff --git a/resources/panel/card.css b/resources/panel/card.css
index 3341243..c7292ac 100644
--- a/resources/panel/card.css
+++ b/resources/panel/card.css
@@ -492,19 +492,23 @@
 .card .equip-stats {
   display: flex;
   padding: 0 1.8em;
-  height: 6em;
+  height: 7.5em;
 }
-.card .equip-stats .equip-score {
+.card .equip-stats .box1 {
+  width: 30%;
   border: #707070 solid;
   border-width: 0.2em 0 0.2em 0.2em;
   border-radius: 0.6em 0 0 0.6em;
+}
+.card .equip-stats .box1 .equip-score {
+  height: 80%;
+  border: #707070 solid;
+  border-width: 0 0 0.1em 0;
   display: flex;
   justify-content: center;
-  font-size: 1em;
   align-items: center;
-  width: 30%;
 }
-.card .equip-stats .equip-score .comment-box {
+.card .equip-stats .box1 .equip-score .comment-box {
   font-size: 1.2em;
   width: 2em;
   display: flex;
@@ -518,30 +522,43 @@
   position: relative;
   z-index: 1;
 }
-.card .equip-stats .equip-score .value {
+.card .equip-stats .box1 .equip-score .value {
   border: 0.1em solid rgb(155, 155, 155);
   border-left: none;
   padding: 0.1em 1em 0.1em 1em;
   margin-left: -0.6em;
   border-radius: 0 1em 1em 0;
 }
-.card .equip-stats .equip-score .value .subt {
+.card .equip-stats .box1 .equip-score .value .subt {
   font-size: 0.8em;
 }
-.card .equip-stats .property-stats {
+.card .equip-stats .box1 .weight-rule {
+  height: 20%;
+  font-size: 0.8em;
+  color: #aaa;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.card .equip-stats .box2 {
   width: 70%;
-  height: 100%;
+  border: #707070 solid;
+  border-width: 0.2em;
+  border-radius: 0 0.6em 0.6em 0;
+}
+.card .equip-stats .box2 .property-stats {
+  height: 80%;
+  border: #707070 solid;
+  border-width: 0 0 0.125em 0;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   font-size: 0.8em;
   align-items: center;
-  border: #707070 solid;
-  border-width: 0.2em;
-  border-radius: 0 0.6em 0.6em 0;
   overflow: hidden;
 }
-.card .equip-stats .property-stats .stat-item {
+.card .equip-stats .box2 .property-stats .stat-item {
   width: 33.33%;
   height: 33.33%;
   padding: 0 0.2em;
@@ -552,27 +569,28 @@
   color: #eee;
   border: #707070 0.1em solid;
 }
-.card .equip-stats .property-stats .stat-item:nth-child(7) {
+.card .equip-stats .box2 .property-stats .stat-item:nth-child(7) {
   border-radius: 0 0.4em 0 0;
 }
-.card .equip-stats .property-stats .stat-item:nth-child(9) {
-  border-radius: 0 0 0.4em 0;
+.card .equip-stats .box2 .property-stats .stat-item:nth-child(3n) {
+  border: #707070 solid;
+  border-width: 0.1em 0.1em 0 0.1em;
 }
-.card .equip-stats .property-stats .stat-item.great {
+.card .equip-stats .box2 .property-stats .stat-item.great {
   color: rgb(249, 189, 64);
 }
-.card .equip-stats .property-stats .stat-item.good {
+.card .equip-stats .box2 .property-stats .stat-item.good {
   color: rgb(238, 207, 139);
 }
-.card .equip-stats .property-stats .stat-item.useless {
+.card .equip-stats .box2 .property-stats .stat-item.useless {
   color: #999999;
 }
-.card .equip-stats .property-stats .stat-item span.title {
+.card .equip-stats .box2 .property-stats .stat-item span.title {
   padding-left: 0.1em;
   text-align: left;
   width: 48%;
 }
-.card .equip-stats .property-stats .stat-item span.title span.count {
+.card .equip-stats .box2 .property-stats .stat-item span.title span.count {
   display: inline-block;
   text-align: center;
   background-color: black;
@@ -581,12 +599,23 @@
   border: #696969 0.15em solid;
   border-radius: 0.4em;
 }
-.card .equip-stats .property-stats .stat-item span.value {
+.card .equip-stats .box2 .property-stats .stat-item span.value {
   padding-right: 0.2em;
   width: 52%;
   overflow: hidden;
   text-align: right;
 }
+.card .equip-stats .box2 .useful-stats {
+  height: 20%;
+  font-size: 0.8em;
+  color: #aaa;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border: #707070 solid;
+  border-width: 0 0.1em 0 0.1em;
+}
 .card .equip-list {
   width: 100%;
   display: grid;
diff --git a/resources/panel/card.html b/resources/panel/card.html
index 073ee7a..77c0ed1 100644
--- a/resources/panel/card.html
+++ b/resources/panel/card.html
@@ -141,26 +141,37 @@
     </div>
     {{if charData.equip_score !== false}}
     <div class="equip-stats">
-      <div class="equip-score {{charData.equip_comment}}">
-        <div class="comment-box">
-          <div class="comment">{{charData.equip_comment}}</div>
-        </div>
-        <div class="value">
-          <span>{{charData.equip_score.toFixed(2)}}</span>
-          <span class="subt">分</span>
+      <div class="box1">
+        <div class="equip-score {{charData.equip_comment}}">
+          <div class="comment-box">
+            <div class="comment">{{charData.equip_comment}}</div>
+          </div>
+          <div class="value">
+            <span>{{charData.equip_score.toFixed(2)}}</span>
+            <span class="subt">分</span>
+          </div>
         </div>
+        <div class="weight-rule">规则：{{charData.weightRule || '默认'}}</div>
       </div>
-      <div class="property-stats">
-        {{set stats = charData.propertyStats.slice(0, 9)}}
-        {{each stats item}}
-        <div class="stat-item {{item.weight == 1 ? 'great' : (item.weight >= 0.75 ? 'good' : (item.weight > 0 ? 'useful' : 'useless'))}}">
-          <span class="title"><span class="count">{{item.count}}</span> {{item.name}}</span>
-          <span class="value">+{{item.value}}</span>
+      <div class="box2">
+        <div class="property-stats">
+          {{set stats = charData.propertyStats.slice(0, 9)}}
+          {{each stats item}}
+          <div class="stat-item {{item.weight == 1 ? 'great' : (item.weight >= 0.75 ? 'good' : (item.weight > 0 ? 'useful' : 'useless'))}}">
+            <span class="title"><span class="count">{{item.count}}</span> {{item.name}}</span>
+            <span class="value">+{{item.value}}</span>
+          </div>
+          {{/each}}
+          <% for (let i = 0; i < 9-stats.length; i++) { %>
+            <div class="stat-item"></div>
+          <% } %>
+        </div>
+        <div class="useful-stats">有益词条数：{{
+            stats.reduce((acc, stat) => stat.weight ? acc + stat.count : acc, 0)
+          }} 有效词条数：{{
+            (stats.reduce((acc, stat) => acc + stat.count * stat.weight, 0)).toFixed(2)
+          }}
         </div>
-        {{/each}}
-        <% for (let i = 0; i < 9-stats.length; i++) { %>
-          <div class="stat-item"></div>
-        <% } %>
       </div>
     </div>
     {{/if}}
diff --git a/resources/panel/card.scss b/resources/panel/card.scss
index e9890e6..e7e48f6 100644
--- a/resources/panel/card.scss
+++ b/resources/panel/card.scss
@@ -481,109 +481,142 @@
   .equip-stats {
     display: flex;
     padding: 0 1.8em;
-    height: 6em;
+    height: 7.5em;
 
-    .equip-score {
+    .box1 {
+      width: 30%;
       border: #707070 solid;
       border-width: 0.2em 0 0.2em 0.2em;
       border-radius: 0.6em 0 0 0.6em;
-      display: flex;
-      justify-content: center;
-      font-size: 1em;
-      align-items: center;
-      width: 30%;
-      .comment-box {
-        font-size: 1.2em;
-        width: 2em;
+
+      .equip-score {
+        height: 80%;
+        border: #707070 solid;
+        border-width: 0 0 0.1em 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        background-color: rgba(32, 32, 32, 0.4);
-        box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
-        border: 0.2em solid rgb(216, 216, 216);
-        position: relative;
-        z-index: 1;
-      }
-      .value {
-        border: 0.1em solid rgba(155, 155, 155);
-        border-left: none;
-        padding: 0.1em 1em 0.1em 1em;
-        margin-left: -0.6em;
-        border-radius: 0 1em 1em 0;
-        .subt {
-          font-size: 0.8em;
+        .comment-box {
+          font-size: 1.2em;
+          width: 2em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          aspect-ratio: 1;
+          border-radius: 50%;
+          background-color: rgba(32, 32, 32, 0.4);
+          box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
+          border: 0.2em solid rgb(216, 216, 216);
+          position: relative;
+          z-index: 1;
         }
+        .value {
+          border: 0.1em solid rgba(155, 155, 155);
+          border-left: none;
+          padding: 0.1em 1em 0.1em 1em;
+          margin-left: -0.6em;
+          border-radius: 0 1em 1em 0;
+          .subt {
+            font-size: 0.8em;
+          }
+        }
+      }
+
+      .weight-rule {
+        height: 20%;
+        font-size: 0.8em;
+        color: #aaa;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
       }
     }
 
-    .property-stats {
+    .box2 {
       width: 70%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      flex-wrap: wrap;
-      font-size: 0.8em;
-      align-items: center;
       border: #707070 solid;
       border-width: 0.2em;
       border-radius: 0 0.6em 0.6em 0;
-      overflow: hidden;
 
-      .stat-item {
-        width: 33.33%;
-        height: 33.33%;
-        padding: 0 0.2em;
-        position: relative;
+      .property-stats {
+        height: 80%;
+        border: #707070 solid;
+        border-width: 0 0 0.125em 0;
         display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        font-size: 0.8em;
         align-items: center;
-        white-space: nowrap;
-        color: #eee;
-        border: #707070 0.1em solid;
+        overflow: hidden;
 
-        &:nth-child(7) {
-          border-radius: 0 0.4em 0 0;
-        }
+        .stat-item {
+          width: 33.33%;
+          height: 33.33%;
+          padding: 0 0.2em;
+          position: relative;
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          color: #eee;
+          border: #707070 0.1em solid;
 
-        &:nth-child(9) {
-          border-radius: 0 0 0.4em 0;
-        }
+          &:nth-child(7) {
+            border-radius: 0 0.4em 0 0;
+          }
+          
+          &:nth-child(3n){
+            border: #707070 solid;
+            border-width: 0.1em 0.1em 0 0.1em;
+          }
 
-        &.great {
-          color: rgb(249, 189, 64);
-        }
+          &.great {
+            color: rgb(249, 189, 64);
+          }
 
-        &.good {
-          color: rgb(238, 207, 139);
-        }
+          &.good {
+            color: rgb(238, 207, 139);
+          }
 
-        &.useless {
-          color: #999999;
-        }
+          &.useless {
+            color: #999999;
+          }
 
-        span.title {
-          padding-left: 0.1em;
-          text-align: left;
-          width: 48%;
+          span.title {
+            padding-left: 0.1em;
+            text-align: left;
+            width: 48%;
 
-          span.count {
-            display: inline-block;
-            text-align: center;
-            background-color: black;
-            width: 1.6em;
-            height: 1.6em;
-            border: #696969 0.15em solid;
-            border-radius: 0.4em;
+            span.count {
+              display: inline-block;
+              text-align: center;
+              background-color: black;
+              width: 1.6em;
+              height: 1.6em;
+              border: #696969 0.15em solid;
+              border-radius: 0.4em;
+            }
+          }
+
+          span.value {
+            padding-right: 0.2em;
+            width: 52%;
+            overflow: hidden;
+            text-align: right;
           }
         }
+      }
 
-        span.value {
-          padding-right: 0.2em;
-          width: 52%;
-          overflow: hidden;
-          text-align: right;
-        }
+      .useful-stats {
+        height: 20%;
+        font-size: 0.8em;
+        color: #aaa;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        border: #707070 solid;
+        border-width: 0 0.1em 0 0.1em;
       }
     }
   }