UID列表使用图像进行渲染，样式尚未完全稳定

plugins/genshin/model/db/UserDB.js

@@ -76,7 +76,20 @@ class UserDB extends BaseModel {
       }
     })
     db.ltuids = ltuids.join(',')
-    db.games = user._games
+    let games = {}
+    lodash.forEach(user._games, (gameDs, game) => {
+      games[game] = {
+        uid: gameDs.uid,
+        data: {}
+      }
+      lodash.forEach(gameDs.data, (ds, uid) => {
+        games[game].data[uid] = {
+          uid: ds.uid,
+          type: ds.type
+        }
+      })
+    })
+    db.games = games
     await this.save()
   }
 }

plugins/genshin/model/user.js

@@ -191,7 +191,7 @@ export default class User extends base {
   }
 
   /** #uid */
-  async showUid () {
+  async showUid_bak () {
     let user = await this.user()
     let msg = []
     let typeMap = { ck: 'CK Uid', reg: '绑定 Uid' }
@@ -216,7 +216,7 @@ export default class User extends base {
   }
 
   /** #uid */
-  async showUid2 () {
+  async showUid () {
     let user = await this.user()
     let uids = [{
       key: 'gs',
@@ -233,6 +233,9 @@ export default class User extends base {
         if (player) {
           uidDs.name = player.name
           uidDs.level = player.level
+          let imgs = player?.faceImgs || {}
+          uidDs.face = imgs.face
+          uidDs.banner = imgs.banner
         }
       })
     })
@@ -425,13 +428,14 @@ export default class User extends base {
       await user.save()
       if (fs.existsSync(`./data/MysCookie/${qq}.yaml`)) {
         try {
-          let src = `./data/MysCookie/${qq}.yaml`;
+          let src = `./data/MysCookie/${qq}.yaml`
-          let dest = `./temp/MysCookieBak/${qq}.yaml`;
+          let dest = `./temp/MysCookieBak/${qq}.yaml`
-          await fs.promises.unlink(dest).catch((_) => { });
+          await fs.promises.unlink(dest).catch((_) => {
-          await fs.promises.copyFile(src, dest);
+          })
-          await fs.promises.unlink(src);
+          await fs.promises.copyFile(src, dest)
+          await fs.promises.unlink(src)
         } catch (err) {
-          console.log(err);
+          console.log(err)
         }
       }
       count++

plugins/genshin/resources/html/user/uid-list.css

@@ -1,21 +1,165 @@
-.uid-list {
+.container {
-  display: flex;
+  width: 500px;
 }
-.uid-list .cont {
+.uid-list .game-cont {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(255, 255, 255, 0.65);
-  margin: 5px;
+  margin: 0 0 10px;
-  width: 50%;
+  border-radius: 10px;
+  overflow: hidden;
 }
-.uid-list .cont .cont-body {
+.uid-list .game-cont .game-title {
+  font-size: 16px;
+  background: rgba(255, 255, 255, 0.8);
+  padding: 8px 15px 5px;
+}
+.uid-list .game-cont .game-title strong {
+  margin-right: 15px;
+}
+.uid-list .game-cont .game-title span {
+  font-size: 12px;
+  color: #888;
+}
+.uid-list .game-cont .game-title nobr {
+  font-size: 12px;
+  background: #888;
+  color: #fff;
+  display: inline-block;
+  padding: 1px 2px;
+  border-radius: 3px;
+  margin: 0 1px;
+}
+.uid-list .game-cont .cont-body {
   background: none;
   padding: 0;
 }
-.uid-list li {
+.uid-list .game-ul {
-  list-style: none;
+  padding: 8px;
-  display: flex;
+}
-  height: 30px;
+.uid-list .game-idx {
+  height: 50px;
+  padding: 13px 0;
+  margin-right: 5px;
+}
+.uid-list .game-idx span {
+  display: block;
+  width: 18px;
+  height: 22px;
+  border-radius: 6px;
+  background: #fff;
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+}
+.uid-list .game-bar {
+  height: 50px;
   line-height: 30px;
   margin: 0;
-  border-radius: 5px;
+  border-radius: 25px;
+  background: right top no-repeat #f0ece4;
+  background-size: auto 100%;
+  padding: 3px;
+  width: 425px;
+  display: flex;
+  position: relative;
+}
+.uid-list .game-bar .face {
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+  box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, 0.5);
+  border: 1px solid #fff;
+  overflow: hidden;
+  background-size: cover;
+}
+.uid-list .game-bar .face span {
+  display: block;
+  width: 64px;
+  height: 64px;
+  background-size: auto 100%;
+  background-repeat: no-repeat;
+}
+.uid-list .game-bar .info {
+  padding: 4px 10px;
+  line-height: 18px;
+  color: #414e64;
+}
+.uid-list .game-bar .info .uid {
+  font-size: 16px;
+  display: flex;
+}
+.uid-list .game-bar .info .uid span {
+  display: block;
+  padding-right: 5px;
+}
+.uid-list .game-bar .info .uid strong {
+  width: 35px;
+  font-size: 12px;
+  font-weight: normal;
+  background: #4a5366;
+  height: 18px;
+  display: block;
+  text-align: center;
+  border-radius: 4px;
+  color: #fff;
+  vertical-align: middle;
+  transform: scale(0.9);
+}
+.uid-list .game-bar .info .uid strong.ck {
+  background: #d3bc8e;
+  color: #3a2702;
+  font-weight: bold;
+  box-shadow: 0 0 3px 0 #000;
+}
+.uid-list .game-bar .info .uid strong.reg {
+  background: #666;
+}
+.uid-list .game-bar .info .name {
+  font-size: 16px;
+}
+.uid-list .game-bar .info .no-info {
+  font-size: 12px;
+  color: #555;
+}
+.uid-list .game-bar:after {
+  display: block;
+  content: "";
+  width: 28px;
+  height: 28px;
+  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;
+}
+.uid-list .game-li {
+  display: flex;
+  margin-bottom: 10px;
+}
+.uid-list .game-li:last-child {
+  margin-bottom: 0;
+}
+.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;
+}
+.tips {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  font-size: 12px;
+  padding: 8px 12px;
+  color: #555;
+  margin-bottom: 10px;
+}
+.tips nobr {
+  font-size: 12px;
+  background: #555;
+  color: #fff;
+  display: inline-block;
+  padding: 1px 2px;
+  border-radius: 3px;
+  margin: 0 1px;
 }
 /*# sourceMappingURL=uid-list.css.map */

plugins/genshin/resources/html/user/uid-list.html

@@ -9,31 +9,51 @@
 gs:{mark:'#'},
 sr:{mark:'*'}
 }; }}
-<div class="head-box">
+
-  <div class="label">111</div>
+<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="cont">
+  <div class="game-cont">
-    <div class="cont-title">{{game.name}}<span><nobr>{{mark}}uid+序号</nobr>切换</span></div>
+    <div class="game-title"><strong>{{game.name}}</strong><span>使用<nobr>{{mark}}uid1</nobr>切换uid
-    <div class="cont-body">
+    </div>
-
+    <div class="game-ul">
       {{each game.uidList uid idx}}
-      <div class="{{game.uid === uid.uid ? 'active':''}}">
+      <div class="game-li  {{game.uid*1 === uid.uid*1 ? 'active':''}}">
-        <div class="idx">{{idx+1}}</div>
+        <div class="game-idx">
-        {{if uid.name && uid.level}}
+          <span>{{idx+1}}</span>
-        <div>{{uid.name}} (Lv.{{uid.level}})</div>
+        </div>
-        {{/if}}
+        <div class="game-bar" style="background-image:url({{_miao_path}}{{uid.banner}})">
-        <div>
+          <div class="face" style="background-image:url({{_miao_path}}{{uid.face}})"></div>
-          <span class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</span>
+          <div class="info">
+            <div class="uid">
               <span>{{uid.uid}}</span>
+              <strong class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</strong>
+            </div>
+            {{if uid.name && uid.level}}
+            <div class="name">
+              <div>{{uid.name}} Lv.{{uid.level}}</div>
+            </div>
+            {{else}}
+            <div class="no-info">暂无uid信息</div>
+            {{/if}}
+          </div>
         </div>
       </div>
       {{/each}}
-      </ul>
     </div>
+
   </div>
   {{/each}}
 </div>
+
+
 {{/block}}

plugins/genshin/resources/html/user/uid-list.less

@@ -1,11 +1,40 @@
+.container {
+  width: 500px;
+}
 
 .uid-list {
-  display: flex;
 
-  .cont {
+  .game-cont {
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(255, 255, 255, .65);
-    margin: 5px;
+    margin: 0 0 10px;
-    width: 50%;
+    border-radius: 10px;
+    overflow: hidden;
+
+    .game-title {
+      font-size: 16px;
+      background: rgba(255, 255, 255, .8);
+      padding: 8px 15px 5px;
+
+
+      strong {
+        margin-right: 15px;
+      }
+
+      span {
+        font-size: 12px;
+        color: #888;
+      }
+
+      nobr {
+        font-size: 12px;
+        background: #888;
+        color: #fff;
+        display: inline-block;
+        padding: 1px 2px;
+        border-radius: 3px;
+        margin: 0 1px;
+      }
+    }
 
     .cont-body {
       background: none;
@@ -13,16 +42,156 @@
     }
   }
 
-  li {
+  .game-ul {
-    list-style: none;
+    padding: 8px;
-    display: flex;
+  }
-    height: 30px;
+
+  .game-idx {
+    height: 50px;
+    padding: 13px 0;
+    margin-right: 5px;
+
+    span {
+      display: block;
+      width: 18px;
+      height: 22px;
+      border-radius: 6px;
+      background: #fff;
+      text-align: center;
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .game-bar {
+    height: 50px;
     line-height: 30px;
     margin: 0;
-    border-radius: 5px;
+    border-radius: 25px;
+    background: right top no-repeat #f0ece4;
+    background-size: auto 100%;
+    padding: 3px;
+    width: 425px;
+    display: flex;
+    position: relative;
+
+    .face {
+      width: 44px;
+      height: 44px;
+      border-radius: 22px;
+      box-shadow: 0 0 1px #000, 0 0 5px rgba(0, 0, 0, .5);
+      border: 1px solid #fff;
+      overflow: hidden;
+      background-size: cover;
+
+      span {
+        display: block;
+        width: 64px;
+        height: 64px;
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+      }
+    }
+
+    .info {
+      padding: 4px 10px;
+      line-height: 18px;
+      color: #414e64;
+
+      .uid {
+        font-size: 16px;
+        display: flex;
+
+        span {
+          display: block;
+          padding-right: 5px;
+        }
 
         strong {
+          width: 35px;
+          font-size: 12px;
+          font-weight: normal;
+          background: #4a5366;
+          height: 18px;
+          display: block;
+          text-align: center;
+          border-radius: 4px;
+          color: #fff;
+          vertical-align: middle;
+          transform: scale(.9);
 
+          &.ck {
+            background: #d3bc8e;
+            color: #3a2702;
+            font-weight: bold;
+            box-shadow: 0 0 3px 0 #000;
+          }
+
+          &.reg {
+            background: #666;
+          }
+        }
+      }
+
+      .name {
+        font-size: 16px;
+      }
+
+      .no-info {
+        font-size: 12px;
+        color: #555;
+      }
+    }
+
+    &:after {
+      display: block;
+      content: "";
+      width: 28px;
+      height: 28px;
+      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;
+    }
+  }
+
+  .game-li {
+    display: flex;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.active {
+      .game-bar:after {
+        opacity: 1;
+        background: url('../../img/icon/check.webp') center center no-repeat #4a5366;
+        background-size: 70% auto;
+      }
     }
   }
 }
+
+.tips {
+  background: rgba(255, 255, 255, .8);
+  border-radius: 10px;
+  font-size: 12px;
+  padding: 8px 12px;
+  color: #555;
+  margin-bottom: 10px;
+
+
+  nobr {
+    font-size: 12px;
+    background: #555;
+    color: #fff;
+    display: inline-block;
+    padding: 1px 2px;
+    border-radius: 3px;
+    margin: 0 1px;
+  }
+}