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

This commit is contained in:
Kokomi 2023-06-29 04:18:38 +08:00
parent 08da5dab3f
commit ffe7251026
5 changed files with 399 additions and 49 deletions

View File

@ -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()
}
}

View File

@ -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 dest = `./temp/MysCookieBak/${qq}.yaml`;
await fs.promises.unlink(dest).catch((_) => { });
await fs.promises.copyFile(src, dest);
await fs.promises.unlink(src);
let src = `./data/MysCookie/${qq}.yaml`
let dest = `./temp/MysCookieBak/${qq}.yaml`
await fs.promises.unlink(dest).catch((_) => {
})
await fs.promises.copyFile(src, dest)
await fs.promises.unlink(src)
} catch (err) {
console.log(err);
console.log(err)
}
}
count++

View File

@ -1,21 +1,165 @@
.uid-list {
display: flex;
.container {
width: 500px;
}
.uid-list .cont {
background: rgba(0, 0, 0, 0.5);
margin: 5px;
width: 50%;
.uid-list .game-cont {
background: rgba(255, 255, 255, 0.65);
margin: 0 0 10px;
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 {
list-style: none;
display: flex;
height: 30px;
.uid-list .game-ul {
padding: 8px;
}
.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 */

View File

@ -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="cont-title">{{game.name}}<span><nobr>{{mark}}uid+序号</nobr>切换</span></div>
<div class="cont-body">
<div class="game-cont">
<div class="game-title"><strong>{{game.name}}</strong><span>使用<nobr>{{mark}}uid1</nobr>切换uid
</div>
<div class="game-ul">
{{each game.uidList uid idx}}
<div class="{{game.uid === uid.uid ? 'active':''}}">
<div class="idx">{{idx+1}}</div>
{{if uid.name && uid.level}}
<div>{{uid.name}} (Lv.{{uid.level}})</div>
{{/if}}
<div>
<span class="{{uid.type}}">{{uid.type==='ck'?'CK':'绑定'}}</span>
<span>{{uid.uid}}</span>
<div class="game-li {{game.uid*1 === uid.uid*1 ? 'active':''}}">
<div class="game-idx">
<span>{{idx+1}}</span>
</div>
<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>
{{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}}

View File

@ -1,11 +1,40 @@
.container {
width: 500px;
}
.uid-list {
display: flex;
.cont {
background: rgba(0, 0, 0, 0.5);
margin: 5px;
width: 50%;
.game-cont {
background: rgba(255, 255, 255, .65);
margin: 0 0 10px;
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 {
list-style: none;
display: flex;
height: 30px;
line-height: 30px;
margin: 0;
border-radius: 5px;
.game-ul {
padding: 8px;
}
strong {
.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: 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;
}
}