From 3d54e240a7cf4384cb8db85c5894104dc5667a1c Mon Sep 17 00:00:00 2001 From: bietiaop <1527109126@qq.com> Date: Thu, 18 Jul 2024 13:47:03 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9D=A2=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/panel.js | 73 +++++------ resources/panel/card.css | 26 ++++ resources/panel/card.html | 3 +- resources/panel/card.scss | 26 ++++ resources/panel/images/ARANK.png | Bin 2097 -> 0 bytes resources/panel/images/BRANK.png | Bin 1549 -> 0 bytes resources/panel/images/SRANK.png | Bin 1476 -> 0 bytes ...@XO~)U1BIPPR}NN9CI7.png => avatar_box.png} | Bin resources/panel/list.html | 33 +++++ resources/panel/refresh.css | 119 +++++++++++------- resources/panel/refresh.html | 11 +- resources/panel/refresh.scss | 107 +++++++++------- 12 files changed, 266 insertions(+), 132 deletions(-) delete mode 100644 resources/panel/images/ARANK.png delete mode 100644 resources/panel/images/BRANK.png delete mode 100644 resources/panel/images/SRANK.png rename resources/panel/images/{@~8B@XO~)U1BIPPR}NN9CI7.png => avatar_box.png} (100%) create mode 100644 resources/panel/list.html diff --git a/apps/panel.js b/apps/panel.js index 4030a70..2d2aef3 100644 --- a/apps/panel.js +++ b/apps/panel.js @@ -14,20 +14,23 @@ export class Panel extends ZZZPlugin { priority: _.get(settings.getConfig('priority'), 'panel', 70), rule: [ { - reg: `${rulePrefix}((刷新|更新)面板|面板(刷新|更新))$`, - fnc: 'refreshPanel', - }, - { - reg: `${rulePrefix}面板(列表)?$`, - fnc: 'getCharPanelList', - }, - { - reg: `${rulePrefix}(.+)面板$`, - fnc: 'getCharPanel', + reg: `${rulePrefix}(.*)面板(.*)$`, + fnc: 'handleRule', }, ], }); } + 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); - // 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 newChar = result.filter(item => item.isNew); 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); - if (!noteData) return false; - await this.getPlayerInfo(); - let str = '面板列表获取成功，共计' + noteData.length + '个角色：'; - for (const item of noteData) { - str += item.name_mi18n + '、'; + const result = getPanelList(uid); + if (!result) { + await this.reply('未找到面板列表，请先刷新面板'); + return false; } - str = str.slice(0, -1); - await this.reply(str); - // const finalData = { - // list: noteData, - // }; - // await render(this.e, 'panel/list.html', finalData); + await this.getPlayerInfo(); + const timer = setTimeout(() => { + if (this?.reply) { + this.reply('查询成功，正在下载图片资源，请稍候。'); + } + }, 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); diff --git a/resources/panel/card.css b/resources/panel/card.css index 24b6b39..39cf676 100644 --- a/resources/panel/card.css +++ b/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); diff --git a/resources/panel/card.html b/resources/panel/card.html index 0a82328..2127abd 100644 --- a/resources/panel/card.html +++ b/resources/panel/card.html @@ -6,6 +6,7 @@ {{block 'main'}}
+
UID {{uid}}
@@ -178,4 +179,4 @@
-{{/block}} +{{/block}} \ No newline at end of file diff --git a/resources/panel/card.scss b/resources/panel/card.scss index 3333025..c5c3fba 100644 --- a/resources/panel/card.scss +++ b/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); diff --git a/resources/panel/images/ARANK.png b/resources/panel/images/ARANK.png deleted file mode 100644 index 4b4111fc53792bffc33c47f1ea7d2d7ab7f15b16..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2097 zcmV-12+sG3P)Px#1ZP1_K>z@;j|==^1pojC+et)0R9HvtSZiz?R~7zdX4mVr*XuZTT*q#bwt2L9 zv}xLeCT;9>T1qQbLeP{-M5+W*)v8kYg~a0*h#xcvBtR4uK_x_0idwamD4-%FstSr~ zP#zNMBWfB%8ryjg?8N(=-JKb}@6L>~-mJYQsz8FC@wfLe_n!IYoO92;V|*n4>taRa za^wc$A!3DTUAfEPb3fYjB0iqIkFzZP{Ts$7 zrN9eV_;}^w3;5!R&#Cv5#IICYO6;g?CppJTV!Zb*BuXhbg(U2`1nhhWrwz=QQW8nG z6LWno(<7!b^Wq*}(s?@Q&dsKQIVy`Mo$#MwhZ0g$C zIZ6w7B;e7#EJ?|;d<2AVvCmxU=fyFepm8kgEX^f?)Um5m;b-E|FkMQPLvVaUdMkRo zKJ$33L|rrpEl0nyZn4)=ouIKy9tqbh$1Q-!)^L?Ij5Vq2q}%v0UXOlPe%%wWYUl{<6>}32oF`hWTi?sQzvB?(XGm2(vG0sknxve z{CISyY!ixVqN$jaHJu=VlQ@oZ)@hQp=E)lv`{@cTD>q9gB}v?_%3{)v;9iSEcBV$n zLqtTx0)~$vz!qs6$AhtWr1U0^mM36yfNf$dPUe~wlGB`8P&YawSu!8CBbd83bv^p5 zRS}`cBE~8zMVi*)L$$LUD!hq9BCeZ>TOiJNzK z=S&_`8WF-}aS0yXt`a15xJU~YCtx{BJ)$D=vHi?aGSHkFSN6xkbhDG_RHc7K^DBZ{f#Qy61yoet>#-^^%+})hFplG9QEr;Ozwh(Oul7HUyjL+~jMJi2qu+S4%5FQQFf^jYQ}kuK zh2t8<=Jwc^=)%{|9l&qro-eYij}Z3-vX}+6|0Z|Py+yx{vRp@7RGCVuBq{d@m4^C^ zU&eVa#Ef5=?~lh_4i9CXaBk@`+p!Fyqyh4LxON{Mpm-gkBakv=4-0I{yWStQdgDPAGyi27n6^3<{jZj~V=6egF z1t)K~M1j9UiH+!U^hL3Jf?D>wwx{=C)^kw^T)IOFYsS5yb$G@zWuwI!tr*{Lg!*K; zkf?MPsk`9Sa8s8e%7j%yl}2erP&p~Jx$_RpGL}j~4HdfCrD7?sQE|;&D&uxsj}hN* zgkDg3;yA9O1KBW&n21SOZHn^qa%wSmOd`@T6c!F*QYmTL3JkwDUR_{&3Zw8zHj!}Cty&&8KC zZ-Fpmu`l~5SH5=4XuIQ&4q)0z%%PT7C$+A2I`P=4Elg)K`pVPS-n=vu)bZ!ySZ06v z&J|BEMrue}4pLSM36>6_LqT{_;bcDWaQ^%F#mqs|ZkERfpTxSZ{ZUKgm`h2{oGV3= zSAseQ?KFP+&qw*9ztOk1&Y)&{moyW+miXIf<}(c3PZ=UfW?w^zBULuWgtq>dXAk1N z%8{sNp={@O%)Px|h+3hDq)e&9gn2_&I{4y$$p0LFD*jSK28n;D(n^%g;{(Wl14@+( z{x;fYP(G52G6{>%&b@#GKi z`<;I@?Yv*agGcVemp6YMSz|@~U_Ke8s(cdNJ$w^ug%y$6O zy&h4=4J*cw?p>oqZm;@#;I#H@qGfx=VQJ%=b{~ z36LBZK)$<#QOC)Gf#Lo zKY@XftsGmzt258wOkx@xR}EtAz)d)D;V{mY{;re5Q$$H*T8Wl;g=h}m{}e( bhXDTqXb|s?Xd%wQ00000NkvXXu0mjf-USkE diff --git a/resources/panel/images/BRANK.png b/resources/panel/images/BRANK.png deleted file mode 100644 index 81db7a163bbb767fc203f4fe214a6879fa24740a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1549 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 +{{/block}} + +{{block 'main'}} +
+
+ {{include sys.playerInfo}} +
共计 {{count}} 个角色
+
+
+
+ {{each list item}} +
+
+ +
+ {{item.rank}} +
+
+
+ {{item.name_mi18n}} +
+
+
+ {{/each}} +
+
+{{/block}} + + \ No newline at end of file diff --git a/resources/panel/refresh.css b/resources/panel/refresh.css index eb7dfa9..df5e681 100644 --- a/resources/panel/refresh.css +++ b/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-size: contain; + background: url("./images/avatar_box.png") center/contain no-repeat; 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"); - background-size: 100% 100%; - background-repeat: no-repeat; + padding: 0.1em 0; + padding-left: 0.5em; + 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; - background-size: 100% 100%; - transform: translateY(0.03em); -} -.panel > .list .item .name .img.S, .panel > .list .item .name .img.s { - background-image: url(./images/SRANK.png); -} -.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); + flex-shrink: 0; + flex-grow: 0; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + background-size: 70%; + box-shadow: 0 0 0 0.07em rgba(85, 85, 85, 0.5); } .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 */ \ No newline at end of file + flex-grow: 1; + flex-shrink: 1; +} + +/*# sourceMappingURL=refresh.css.map */ diff --git a/resources/panel/refresh.html b/resources/panel/refresh.html index 6db9c84..f092c93 100644 --- a/resources/panel/refresh.html +++ b/resources/panel/refresh.html @@ -6,22 +6,23 @@ {{block 'main'}}
-
-
+
+ {{include sys.playerInfo}} +
已为您更新 {{newChar}} 个角色
+
-
你好，已为 UID{{uid}} 成功更新 {{newChar}} 个角色！
{{each list item}}
-
+
{{item.rank}}
-
{{item.name_mi18n}} +
{{/each}} diff --git a/resources/panel/refresh.scss b/resources/panel/refresh.scss index 398e7c2..52f8d6a 100644 --- a/resources/panel/refresh.scss +++ b/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-size: contain; + background: url('./images/avatar_box.png') center / contain no-repeat; 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'); - background-size: 100% 100%; - background-repeat: no-repeat; + padding: 0.1em 0; + padding-left: 0.5em; + 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; - background-size: 100% 100%; - transform: translateY(0.03em); - &.S, - &.s { - background-image: url(./images/SRANK.png); - } - &.A, - &.a { - background-image: url(./images/ARANK.png); - } - &.B, - &.b { - background-image: url(./images/BRANK.png); - } + flex-shrink: 0; + flex-grow: 0; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + background-size: 70%; + box-shadow: 0 0 0 0.07em rgba(85, 85, 85, 0.5); + // margin-top: -0.02em; } span { @@ -130,6 +147,8 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + flex-grow: 1; + flex-shrink: 1; } } }