From 9a4624cd164aaa7e6d6f45999fa93086b42a08d7 Mon Sep 17 00:00:00 2001
From: Kokomi <102026640+yoimiya-kokomi@users.noreply.github.com>
Date: Fri, 30 Jun 2023 04:50:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4uid=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../genshin/resources/html/user/uid-list.css  | 108 +++++++++++-----
 .../genshin/resources/html/user/uid-list.html |  47 ++++---
 .../genshin/resources/html/user/uid-list.less | 120 +++++++++++++-----
 3 files changed, 192 insertions(+), 83 deletions(-)

diff --git a/plugins/genshin/resources/html/user/uid-list.css b/plugins/genshin/resources/html/user/uid-list.css
index 9a0832c..b6a2ea9 100644
--- a/plugins/genshin/resources/html/user/uid-list.css
+++ b/plugins/genshin/resources/html/user/uid-list.css
@@ -1,5 +1,14 @@
 .container {
-  width: 400px;
+  width: 450px;
+}
+nobr {
+  font-size: 12px;
+  background: #000;
+  color: #d3bc8e;
+  display: inline-block;
+  padding: 1px 2px;
+  border-radius: 3px;
+  margin: 0 1px;
 }
 .uid-list .game-cont {
   background: rgba(255, 255, 255, 0.65);
@@ -17,12 +26,13 @@
 }
 .uid-list .game-cont .game-title span {
   font-size: 12px;
-  color: #888;
+  color: #666;
+  float: right;
 }
 .uid-list .game-cont .game-title nobr {
+  background: none;
   font-size: 12px;
-  background: #888;
-  color: #fff;
+  color: #3a2702;
   display: inline-block;
   padding: 1px 2px;
   border-radius: 3px;
@@ -35,9 +45,13 @@
 .uid-list .game-ul {
   padding: 8px;
 }
+.uid-list .game-ul .no-uid {
+  font-size: 12px;
+  text-align: center;
+}
 .uid-list .game-idx {
   height: 50px;
-  padding: 13px 0;
+  padding: 20px 0 10px;
   margin-right: 5px;
 }
 .uid-list .game-idx span {
@@ -51,23 +65,23 @@
   line-height: 22px;
 }
 .uid-list .game-bar {
-  height: 50px;
+  height: 64px;
   line-height: 30px;
   margin: 0;
-  border-radius: 25px;
+  border-radius: 33px;
   background: right top no-repeat #f0ece4;
   background-size: auto 100%;
-  padding: 3px;
-  width: 325px;
+  padding: 4px;
+  width: 375px;
   display: flex;
   position: relative;
 }
 .uid-list .game-bar .face {
-  width: 44px;
-  height: 44px;
-  border-radius: 22px;
+  width: 56px;
+  height: 56px;
+  border-radius: 30px;
   box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
-  border: 1px solid #fff;
+  border: 2px solid #fff;
   overflow: hidden;
   background-size: cover;
 }
@@ -83,15 +97,30 @@
   line-height: 18px;
   color: #414e64;
 }
-.uid-list .game-bar .info .uid {
-  font-size: 18px;
-  display: flex;
+.uid-list .game-bar .info div.shadow {
+  position: relative;
+  -webkit-text-stroke: 2px #fff;
 }
-.uid-list .game-bar .info .uid span {
+.uid-list .game-bar .info div.shadow span {
+  font-weight: normal;
   display: block;
-  padding-right: 5px;
+  position: absolute;
+  -webkit-text-stroke: 0px #fff;
+  left: 0;
+  top: 0;
 }
-.uid-list .game-bar .info .uid strong {
+.uid-list .game-bar .info .uid-info {
+  height: 25px;
+  font-size: 24px;
+  display: flex;
+  margin-top: 5px;
+}
+.uid-list .game-bar .info .uid-info .uid {
+  font-weight: normal;
+  display: block;
+  padding-right: 8px;
+}
+.uid-list .game-bar .info .uid-info .type {
   width: 35px;
   font-size: 12px;
   font-weight: normal;
@@ -104,34 +133,36 @@
   vertical-align: middle;
   transform: scale(0.9);
 }
-.uid-list .game-bar .info .uid strong.ck {
+.uid-list .game-bar .info .uid-info .type.ck {
   background: #d3bc8e;
   color: #3a2702;
   font-weight: bold;
   box-shadow: 0 0 3px 0 #000;
 }
-.uid-list .game-bar .info .uid strong.reg {
+.uid-list .game-bar .info .uid-info .type.reg {
   background: #666;
 }
-.uid-list .game-bar .info .name {
+.uid-list .game-bar .info .detail {
   font-size: 14px;
+  text-shadow: 0 0 2px #fff;
 }
-.uid-list .game-bar .info .no-info {
-  font-size: 12px;
+.uid-list .game-bar .info .detail .no-info {
   color: #555;
+  font-size: 12px;
+  text-shadow: 0 0 1px #fff;
 }
 .uid-list .game-bar:after {
   display: block;
   content: "";
-  width: 28px;
-  height: 28px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   border: 2px solid #ece5d8;
   opacity: 0;
   box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
   position: absolute;
-  right: 8px;
-  top: 8px;
+  right: 13px;
+  top: 12px;
 }
 .uid-list .game-li {
   display: flex;
@@ -140,23 +171,34 @@
 .uid-list .game-li:last-child {
   margin-bottom: 0;
 }
+.uid-list .game-li.active .game-bar {
+  box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
+}
 .uid-list .game-li.active .game-bar:after {
   opacity: 1;
   background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
   background-size: 70% auto;
 }
+.uid-list .game-li.active .game-idx span {
+  background: #d3bc8e;
+  color: #3a2702;
+  box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
+}
 .tips {
-  background: rgba(255, 255, 255, 0.8);
   border-radius: 10px;
   font-size: 12px;
-  padding: 8px 12px;
-  color: #555;
+  padding: 8px 12px 8px 24px;
+  color: #fff;
   margin-bottom: 10px;
+  background: rgba(0, 0, 0, 0.4);
+}
+.tips li {
+  padding: 2px 0;
 }
 .tips nobr {
   font-size: 12px;
-  background: #555;
-  color: #fff;
+  background: #000;
+  color: #d3bc8e;
   display: inline-block;
   padding: 1px 2px;
   border-radius: 3px;
diff --git a/plugins/genshin/resources/html/user/uid-list.html b/plugins/genshin/resources/html/user/uid-list.html
index 0435f30..c7351ef 100644
--- a/plugins/genshin/resources/html/user/uid-list.html
+++ b/plugins/genshin/resources/html/user/uid-list.html
@@ -10,22 +10,17 @@ gs:{mark:'#'},
 sr:{mark:'*'}
 }; }}
 
-<div class="tips">
-  #开头为原神，*开头为星穹铁道。发送CK可绑定CK对应uid<br>
-  <nobr>#删除uid1</nobr>
-  删除指定序号uid
-
-  <nobr>#绑定123456789</nobr>
-  绑定对应uid
-</div>
 
 <div class="uid-list">
   {{each uids game}}
   {{set mark = game.key==='gs'? '#':'*'}}
   <div class="game-cont">
-    <div class="game-title"><strong>{{game.name}}</strong><span>使用<nobr>{{mark}}uid1</nobr>切换uid
+    <div class="game-title">
+      <strong>{{mark}}{{game.name}}</strong>
+      <span>使用<nobr>{{mark}}uid1</nobr>切换uid</span>
     </div>
     <div class="game-ul">
+      {{if game.uidList?.length > 0 }}
       {{each game.uidList uid idx}}
       <div class="game-li  {{game.uid*1 === uid.uid*1 ? 'active':''}}">
         <div class="game-idx">
@@ -34,26 +29,42 @@ sr:{mark:'*'}
         <div class="game-bar" style="background-image:url({{_miao_path}}{{uid.banner}})">
           <div class="face" style="background-image:url({{_miao_path}}{{uid.face}})"></div>
           <div class="info">
-            <div class="uid">
-              <span>{{uid.uid}}</span>
-              <strong class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</strong>
+            <div class="uid-info">
+              <div class="uid shadow">{{uid.uid}}<span>{{uid.uid}}</span></div>
+              <div class="type {{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</div>
             </div>
-            {{if uid.name && uid.level}}
-            <div class="name">
-              <div>{{uid.name}} Lv.{{uid.level}}</div>
+            <div class="detail">
+              {{if uid.name && uid.level}}
+              <div class="name">{{uid.name}} Lv.{{uid.level}}</div>
+              {{else}}
+              <div class="no-info">暂无uid信息，可通过更新面板获取信息</div>
+              {{/if}}
             </div>
-            {{else}}
-            <div class="no-info">暂无uid信息</div>
-            {{/if}}
           </div>
         </div>
       </div>
       {{/each}}
+      {{else}}
+      <div class="no-uid">暂无uid，请发送CK或通过
+        <nobr>{{mark}}绑定123456789</nobr>
+        来绑定UID
+      </div>
+      {{/if}}
     </div>
 
   </div>
   {{/each}}
 </div>
 
+<ul class="tips">
+  <li>原神及通用命令以#开头，星铁命令以*开头。发送CK可绑定CK对应uid</li>
+  <li>游戏信息来自面板数据，如无信息或不准确请更新面板</li>
+  <li>
+    <nobr>#删除uid1</nobr>
+    删除指定序号uid
 
+    <nobr>#绑定123456789</nobr>
+    绑定对应uid
+  </li>
+</ul>
 {{/block}}
\ No newline at end of file
diff --git a/plugins/genshin/resources/html/user/uid-list.less b/plugins/genshin/resources/html/user/uid-list.less
index af35280..f4b7287 100644
--- a/plugins/genshin/resources/html/user/uid-list.less
+++ b/plugins/genshin/resources/html/user/uid-list.less
@@ -1,5 +1,15 @@
 .container {
-  width: 400px;
+  width: 450px;
+}
+
+nobr {
+  font-size: 12px;
+  background: #000;
+  color: #d3bc8e;
+  display: inline-block;
+  padding: 1px 2px;
+  border-radius: 3px;
+  margin: 0 1px;
 }
 
 .uid-list {
@@ -22,13 +32,14 @@
 
       span {
         font-size: 12px;
-        color: #888;
+        color: #666;
+        float: right;
       }
 
       nobr {
+        background: none;
         font-size: 12px;
-        background: #888;
-        color: #fff;
+        color: #3a2702;
         display: inline-block;
         padding: 1px 2px;
         border-radius: 3px;
@@ -39,16 +50,23 @@
     .cont-body {
       background: none;
       padding: 0;
+
+
     }
   }
 
   .game-ul {
     padding: 8px;
+
+    .no-uid {
+      font-size: 12px;
+      text-align: center;
+    }
   }
 
   .game-idx {
     height: 50px;
-    padding: 13px 0;
+    padding: 20px 0 10px;
     margin-right: 5px;
 
     span {
@@ -64,23 +82,23 @@
   }
 
   .game-bar {
-    height: 50px;
+    height: 64px;
     line-height: 30px;
     margin: 0;
-    border-radius: 25px;
+    border-radius: 33px;
     background: right top no-repeat #f0ece4;
     background-size: auto 100%;
-    padding: 3px;
-    width: 325px;
+    padding: 4px;
+    width: 375px;
     display: flex;
     position: relative;
 
     .face {
-      width: 44px;
-      height: 44px;
-      border-radius: 22px;
+      width: 56px;
+      height: 56px;
+      border-radius: 30px;
       box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
-      border: 1px solid #fff;
+      border: 2px solid #fff;
       overflow: hidden;
       background-size: cover;
 
@@ -98,16 +116,36 @@
       line-height: 18px;
       color: #414e64;
 
-      .uid {
-        font-size: 18px;
-        display: flex;
+
+      div.shadow {
+        position: relative;
+        -webkit-text-stroke: 2px #fff;
 
         span {
+          font-weight: normal;
           display: block;
-          padding-right: 5px;
+          position: absolute;
+          -webkit-text-stroke: 0px #fff;
+          left: 0;
+          top: 0;
+        }
+      }
+
+      .uid-info {
+        height: 25px;
+        font-size: 24px;
+        display: flex;
+        margin-top: 5px;
+
+        .uid {
+          font-weight: normal;
+          display: block;
+          padding-right: 8px;
+
+
         }
 
-        strong {
+        .type {
           width: 35px;
           font-size: 12px;
           font-weight: normal;
@@ -133,28 +171,32 @@
         }
       }
 
-      .name {
+      .detail {
         font-size: 14px;
+        text-shadow: 0 0 2px #fff;
+
+        .no-info {
+          color: #555;
+          font-size: 12px;
+          text-shadow: 0 0 1px #fff;
+        }
       }
 
-      .no-info {
-        font-size: 12px;
-        color: #555;
-      }
+
     }
 
     &:after {
       display: block;
       content: "";
-      width: 28px;
-      height: 28px;
+      width: 36px;
+      height: 36px;
       border-radius: 50%;
       border: 2px solid #ece5d8;
       opacity: 0;
       box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
       position: absolute;
-      right: 8px;
-      top: 8px;
+      right: 13px;
+      top: 12px;
     }
   }
 
@@ -167,28 +209,42 @@
     }
 
     &.active {
+      .game-bar {
+        box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
+      }
+
       .game-bar:after {
         opacity: 1;
         background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
         background-size: 70% auto;
       }
+
+      .game-idx span {
+        background: #d3bc8e;
+        color: #3a2702;
+        box-shadow: 0 0 1px 1px #fff, 0 0 5px 2px #d3bc8e;
+      }
     }
   }
 }
 
 .tips {
-  background: rgba(255, 255, 255, .8);
   border-radius: 10px;
   font-size: 12px;
-  padding: 8px 12px;
-  color: #555;
+  padding: 8px 12px 8px 24px;
+  color: #fff;
   margin-bottom: 10px;
+  background: rgba(0, 0, 0, .4);
+
+  li {
+    padding: 2px 0;
+  }
 
 
   nobr {
     font-size: 12px;
-    background: #555;
-    color: #fff;
+    background: #000;
+    color: #d3bc8e;
     display: inline-block;
     padding: 1px 2px;
     border-radius: 3px;