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 4b4111f..0000000 Binary files a/resources/panel/images/ARANK.png and /dev/null differ diff --git a/resources/panel/images/BRANK.png b/resources/panel/images/BRANK.png deleted file mode 100644 index 81db7a1..0000000 Binary files a/resources/panel/images/BRANK.png and /dev/null differ diff --git a/resources/panel/images/SRANK.png b/resources/panel/images/SRANK.png deleted file mode 100644 index 39a1c89..0000000 Binary files a/resources/panel/images/SRANK.png and /dev/null differ diff --git a/resources/panel/images/@~8B@XO~)U1BIPPR}NN9CI7.png b/resources/panel/images/avatar_box.png similarity index 100% rename from resources/panel/images/@~8B@XO~)U1BIPPR}NN9CI7.png rename to resources/panel/images/avatar_box.png diff --git a/resources/panel/list.html b/resources/panel/list.html new file mode 100644 index 0000000..8a0622e --- /dev/null +++ b/resources/panel/list.html @@ -0,0 +1,33 @@ +{{extend defaultLayout}} + +{{block 'css'}} + +{{/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; } } }