Merge branch 'master' of https://gitee.com/touchscale/Miao-Yunzai

plugins/genshin/apps/sevenSaints.js

@@ -0,0 +1,59 @@
+import plugin from '../../../lib/plugins/plugin.js'
+import puppeteer from '../../../lib/puppeteer/puppeteer.js'
+import Deck from '../model/deck.js'
+
+export class sevenSaints extends plugin {
+  constructor() {
+    super({
+      name: '七圣召唤卡组查询',
+      dsc: '原神角色信息查询',
+      event: 'message',
+      priority: 5000,
+      rule: [
+        {
+          reg: '^#*七圣(召唤)?(牌|卡)组(列表)?[0-9]{0,2}$',
+          fnc: 'deckIndex'
+        },
+        {
+          reg: '^#*七圣(召唤)?(角色|行动)?(卡)?牌(列表)?$',
+          fnc: 'deck_cards'
+        }
+      ]
+    })
+  }
+
+  async deckIndex() {
+    let index = this.e.msg.match(/[0-9]{1,2}/g)
+    if (index && index[0]) {
+      await this.deck(index[0])
+    } else {
+      await this.deck_list()
+    }
+  }
+
+  async deck(id) {
+    let data = await new Deck(this.e).getIndex(id)
+    if (!data) return
+
+    let img = await puppeteer.screenshot('deck', data)
+    if (img) await this.reply(img)
+  }
+
+  async deck_list(id = 0) {
+    let data = await new Deck(this.e).getIndex(id, true)
+    if (!data) return
+
+    let img = await puppeteer.screenshot('deckList', data)
+    if (img) await this.reply(img)
+  }
+  async deck_cards(id = 0) {
+    if (this.e.msg.includes('角色')) id = 1
+    if (this.e.msg.includes('行动')) id = 2
+    await this.reply('卡牌数据获取中...')
+    let data = await new Deck(this.e).getcard(id)
+    if (!data) return
+
+    let img = await puppeteer.screenshot('deckCard', data)
+    if (img) await this.reply(img)
+  }
+}

plugins/genshin/model/deck.js

@@ -0,0 +1,76 @@
+import base from './base.js'
+import MysInfo from './mys/mysInfo.js'
+import lodash from 'lodash'
+
+export default class Deck extends base {
+  constructor(e) {
+    super(e)
+    this.model = 'deck'
+
+    this.headIndexStyle = `<style> .head_box { background: url(${this.screenData.pluResPath}img/roleIndex/namecard/${lodash.random(1, 8)}.png) #f5f5f5; background-position-x: 30px; background-repeat: no-repeat; border-radius: 15px; font-family: tttgbnumber; padding: 10px 20px; position: relative; background-size: auto 101%; }</style>`
+  }
+
+  async getdata(api) {
+    let seed_id = lodash.sample('abcdefghijklmnopqrstuvwxyz0123456789', 16).replace(/,/g, '')
+    let device_fp = await MysInfo.get(this.e, 'getFp', {
+      seed_id
+    })
+    let res = await MysInfo.get(this.e, api, {
+      headers: {
+        'x-rpc-device_fp': device_fp?.data?.device_fp
+      }
+    })
+    return res
+  }
+
+  async getIndex(id, list = false) {
+    let res = await this.getdata('deckList')
+    if (res?.retcode !== 0) return false
+
+    let Data
+    if (!list) {
+      for (let i of res.data.deck_list) {
+        if (i.id == id) Data = i
+      }
+      if (!Data) {
+        this.e.reply(`无牌组${id}，请查看#七圣卡组列表`)
+        return false
+      }
+    } else {
+      this.model = 'deckList'
+      Data = res.data.deck_list
+    }
+
+    /** 截图数据 */
+    let data = {
+      quality: 80,
+      ...this.screenData,
+      uid: this.e.uid,
+      saveId: this.e.uid,
+      nickname: res.data.nickname,
+      level: res.data.level,
+      Data,
+      headIndexStyle: this.headIndexStyle
+    }
+    return data
+  }
+  async getcard(id) {
+    let res = {}
+    for (let api of ['basicInfo', 'avatar_cardList', 'action_cardList']) {
+      if ((id == 2 && api == 'avatar_cardList') || (id == 1 && api == 'action_cardList')) continue
+      res[api] = (await this.getdata(api)).data
+    }
+    this.model = 'deckCard'
+
+    let data = {
+      quality: 80,
+      ...this.screenData,
+      uid: this.e.uid,
+      saveId: this.e.uid,
+      ...res,
+      headIndexStyle: this.headIndexStyle
+    }
+    return data
+  }
+
+}

plugins/genshin/model/gachaLog.js

@@ -46,16 +46,30 @@ export default class GachaLog extends base {
 
     this.e.reply('链接发送成功,数据获取中... 请耐心等待')
 
+    /**制作合并消息 */
+    let MakeMsg=[]
+    let tmpMsg=''
     /** 按卡池更新记录 */
     for (let i in this.pool) {
       this.type = this.pool[i].type
       this.typeName = this.pool[i].typeName
       let res = await this.updateLog()
-      if (res) await this.e.reply(`${this.typeName}记录获取成功，更新${res.num}条`)
+      if(res){
+        tmpMsg+=`[${this.typeName}]记录获取成功，更新${res.num}条\n`
+      }
       if (i <= 1) await common.sleep(500)
     }
+    //只去掉结尾的多余一个换行符
+    tmpMsg=tmpMsg.replace(/(\n)$/, '')
+    MakeMsg.push(tmpMsg)
+    MakeMsg.push(`抽卡记录更新完成，您还可回复\n【#${this?.e?.isSr?'星铁光锥':'武器'}记录】统计${this?.e?.isSr?'星铁光锥':'武器'}池数据\n【#${this?.e?.isSr?'星铁':''}角色统计】按卡池统计数据\n【#导出记录】导出记录数据`)
+    let Msg = await common.makeForwardMsg(this.e, MakeMsg, tmpMsg)
+    Msg.data=Msg.data
+        .replace(/\n/g, '')
+        .replace(/<title color="#777777" size="26">(.+?)<\/title>/g, '___')
+        .replace(/___+/, `<title color="#777777" size="26">${tmpMsg}</title>`)
 
-    await this.e.reply(`抽卡记录更新完成，您还可回复\n【#${this?.e?.isSr?'星铁光锥':'武器'}记录】统计${this?.e?.isSr?'星铁光锥':'武器'}池数据\n【#${this?.e?.isSr?'星铁':''}角色统计】按卡池统计数据\n【#导出记录】导出记录数据`)
+    await this.e.reply(Msg)
 
     this.isLogUrl = true
 

plugins/genshin/model/mys/apiTool.js

@@ -87,6 +87,21 @@ export default class apiTool {
           url: `${hostRecord}game_record/app/genshin/api/gcg/basicInfo`,
           query: `role_id=${this.uid}&server=${this.server}`
         },
+        /**七圣牌组 */
+        deckList: {
+          url: `${hostRecord}game_record/app/genshin/api/gcg/deckList`,
+          query: `role_id=${this.uid}&server=${this.server}`
+        },
+        /** 七圣召唤角色牌数据 */
+        avatar_cardList: {
+          url: `${hostRecord}game_record/app/genshin/api/gcg/cardList`,
+          query: `limit=999&need_action=false&need_avatar=true&need_stats=true&offset=0&role_id=${this.uid}&server=${this.server}`
+        },
+        /** 七圣召唤行动牌数据 */
+        action_cardList: {
+          url: `${hostRecord}game_record/app/genshin/api/gcg/cardList`,
+          query: `limit=999&need_action=true&need_avatar=false&need_stats=true&offset=0&role_id=${this.uid}&server=${this.server}`
+        },
         /**使用兑换码 目前仅限国际服,来自于国服的uid请求已在myinfo.js的init方法提前拦截 */
         useCdk: {
           url: 'PLACE_HOLDER',

plugins/genshin/model/mys/mysInfo.js

@@ -8,7 +8,7 @@ import DailyCache from './DailyCache.js'
 export default class MysInfo {
   static tips = '请先#绑定cookie\n发送【体力帮助】查看配置教程'
 
-  constructor (e) {
+  constructor(e) {
     if (e) {
       this.e = e
       this.userId = String(e.user_id)
@@ -25,10 +25,10 @@ export default class MysInfo {
     }
     // ck对应MysUser对象
     this.ckUser = null
-    this.auth = ['dailyNote', 'bbs_sign_info', 'bbs_sign_home', 'bbs_sign', 'ys_ledger', 'compute', 'avatarSkill', 'detail', 'blueprint', 'UserGame']
+    this.auth = ['dailyNote', 'bbs_sign_info', 'bbs_sign_home', 'bbs_sign', 'ys_ledger', 'compute', 'avatarSkill', 'detail', 'blueprint', 'UserGame', 'deckList', 'avatar_cardList', 'action_cardList']
   }
 
-  static async init (e, api) {
+  static async init(e, api) {
     await MysInfo.initCache()
 
     let mysInfo = new MysInfo(e)
@@ -75,7 +75,7 @@ export default class MysInfo {
    * @param matchMsgUid 用于判断消息是否为uid数据
    * @returns {Promise<string|boolean|*|string>}
    */
-  static async getUid (e, matchMsgUid = true) {
+  static async getUid(e, matchMsgUid = true) {
     let user = await NoteUser.create(e)
     if (e.uid && matchMsgUid) {
       /** 没有绑定的自动绑定 */
@@ -119,7 +119,7 @@ export default class MysInfo {
    * @param e
    * @returns {Promise<boolean|*>}
    */
-  static async getSelfUid (e) {
+  static async getSelfUid(e) {
     let { msg = '', at = '' } = e
     if (!msg) return false
 
@@ -152,7 +152,7 @@ export default class MysInfo {
    * @param option 配置
    * @param option.log 是否显示请求日志
    */
-  static async get (e, api, data = {}, option = {}) {
+  static async get(e, api, data = {}, option = {}) {
     let mysInfo = await MysInfo.init(e, api)
 
     if (!mysInfo.uid || !mysInfo.ckInfo.ck) return false
@@ -195,7 +195,7 @@ export default class MysInfo {
    * 初始化公共CK
    * @returns {Promise<void>}
    */
-  static async initPubCk () {
+  static async initPubCk() {
     // 初始化公共CK
     let pubCount = 0
     let pubCks = GsCfg.getConfig('mys', 'pubCk') || []
@@ -219,7 +219,7 @@ export default class MysInfo {
    * 默认会将用户CK加入查询池
    * @returns {Promise<void>}
    */
-  static async initUserCk () {
+  static async initUserCk() {
     // 初始化用户缓存
     let userCount = 0
     await MysUser.forEach(async (mys) => {
@@ -237,7 +237,7 @@ export default class MysInfo {
    * @param clearData 强制初始化时是否清除已有数据 (刷新/重置)
    * @returns {Promise<boolean>}
    */
-  static async initCache (force = false, clearData = false) {
+  static async initCache(force = false, clearData = false) {
     // 检查缓存标记
     let cache = DailyCache.create()
     if (!force && await cache.get('cache-ready')) {
@@ -260,13 +260,13 @@ export default class MysInfo {
     return true
   }
 
-  static async getBingCkUid () {
+  static async getBingCkUid() {
     let res = await GsCfg.getBingCk()
     return { ...res.ck }
   }
 
   // 获取uid绑定的ck信息
-  static async checkUidBing (uid, game = 'gs') {
+  static async checkUidBing(uid, game = 'gs') {
     let ckUser = await MysUser.getByQueryUid(uid, game, true)
     if (ckUser && ckUser.ck) {
       return ckUser
@@ -274,12 +274,12 @@ export default class MysInfo {
     return false
   }
 
-  static async delDisable () {
+  static async delDisable() {
     return await MysUser.delDisable()
   }
 
   /** 判断绑定ck才能查询 */
-  checkAuth (api) {
+  checkAuth(api) {
     if (api === 'cookie') {
       return true
     }
@@ -295,7 +295,7 @@ export default class MysInfo {
     return false
   }
 
-  async checkReply () {
+  async checkReply() {
     if (this.e.noTips === true) return
 
     if (!this.uid) {
@@ -316,7 +316,7 @@ export default class MysInfo {
    * @param onlySelfCk 是否只获取uid自己对应的ck。为true则只获取uid对应ck，若无则返回为空
    * @returns {Promise<string|string|*>} 查询ck，获取失败则返回空
    */
-  async getCookie (game = 'gs', onlySelfCk = false) {
+  async getCookie(game = 'gs', onlySelfCk = false) {
     if (this.ckUser?.ck) return this.ckUser?.ck
 
     let mysUser = await MysUser.getByQueryUid(this.uid, game, onlySelfCk)
@@ -335,7 +335,7 @@ export default class MysInfo {
     return this.ckUser?.ck
   }
 
-  async checkCode (res, type) {
+  async checkCode(res, type) {
     if (!res) {
       this.e.reply('米游社接口请求失败，暂时无法查询')
       return false
@@ -404,7 +404,7 @@ export default class MysInfo {
   }
 
   /** 删除失效ck */
-  async delCk () {
+  async delCk() {
     if (!this.ckUser) {
       return false
     }
@@ -414,7 +414,7 @@ export default class MysInfo {
   }
 
   /** 查询次数满，今日内标记失效 */
-  async disableToday (game = 'gs') {
+  async disableToday(game = 'gs') {
     /** 统计次数设为超限 */
     await this.ckUser.disable(game)
   }

plugins/genshin/resources/html/deck/deck.css

@@ -0,0 +1,214 @@
+@font-face {
+  font-family: "tttgbnumber";
+  src: url("../../font/tttgbnumber.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
+  transform: scale(2);
+  transform-origin: 0 0;
+}
+
+.container {
+  width: 465px;
+  padding: 20px 15px 10px 15px;
+  background-color: #ececec;
+}
+
+.head_box {
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+}
+
+.head_box .id_text {
+  font-size: 24px;
+}
+
+.head_box .role-name {
+  font-size: 24px;
+}
+
+.head_box .genshin_logo {
+  position: absolute;
+  top: 1px;
+  right: 15px;
+  width: 97px;
+}
+
+.basicInfo {
+  padding: 10px 5px 15px;
+  background: #f5f5f5;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  border-radius: 15px;
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.avatar_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.avatar_covers div {
+  flex: 0 0 33%;
+  padding: 10px;
+}
+
+.avatar_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.action_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action_covers div {
+  flex: 0 0 25%;
+  padding: 5px;
+}
+
+.action_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.card-wrapper {
+  position: relative;
+  width: 25%;
+  padding: 5px;
+}
+
+.card-wrapper img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.hp-container {
+  position: absolute;
+  top: 9%;
+  left: 12%;
+  transform: translate(-50%, -50%);
+}
+
+.hp-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 25px;
+  height: auto;
+}
+
+.rq-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: auto;
+}
+
+.cost-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.va-container {
+  position: relative;
+  top: -11px;
+  left: -2px;
+}
+
+.va-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: auto;
+}
+
+.ty-container {
+  position: relative;
+  top: -6px;
+  left: -7px;
+}
+
+.ty-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: auto;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.logo {
+  font-size: 12px;
+  font-family: "tttgbnumber";
+  text-align: center;
+  color: #7994a7;
+}
+
+.bottom-msg {
+  font-size: 12px;
+  font-family: "tttgbnumber";
+  text-align: center;
+  color: #7994a7;
+  margin-bottom: 5px;
+  margin-top: -5px;
+}
+
+.tab_lable {
+  position: absolute;
+  top: -10px;
+  left: -8px;
+  background: #d4b98c;
+  color: #fff;
+  font-size: 14px;
+  padding: 3px 10px;
+  border-radius: 15px 0px 15px 15px;
+  z-index: 20;
+}
+
+.num_lable {
+  position: absolute;
+  bottom: 0px;
+  right: 5px;
+  background: #8ca4d4;
+  color: #fff;
+  font-size: 14px;
+  padding: 3px 10px;
+  border-radius: 10px 10px 10px 10px;
+  z-index: 20;
+}

plugins/genshin/resources/html/deck/deck.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+  <link rel="shortcut icon" href="#" />
+  <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deck/deck.css" />
+  <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
+  <link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
+  {{@headIndexStyle}}
+</head>
+
+<body>
+  <div class="container" id="container">
+    <div class="head_box">
+      <div class="role-name">
+        {{nickname}} lv:{{level}}
+      </div>
+      <div class="id_text">
+        UID: {{uid}}
+      </div>
+      <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
+    </div>
+    <div style="height: 11px;"></div>
+
+    <div class="basicInfo">
+      <div class="tab_lable">角色牌详情</div>
+      <div style="height: 10px;"></div>
+      <div class="avatar_covers">
+        {{each Data.avatar_cards val}}
+        <div class="card-wrapper">
+          <div class="overlay">
+            <img src="{{pluResPath}}img/deck/边框.png" alt="">
+          </div>
+          <div class="overlay">
+            <div class="rq-container">
+              <img src="{{pluResPath}}img/deck/容器.png" alt="">
+            </div>
+            <div class="hp-container">
+              <img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
+            </div>
+          </div>
+          <img src="{{val.image}}" alt="">
+        </div>
+        {{/each}}
+      </div>
+    </div>
+    <div class="basicInfo">
+      <div class="tab_lable">行动牌详情</div>
+      <div style="height: 10px;"></div>
+      <div class="action_covers">
+        {{each Data.action_cards val}}
+        <div class="card-wrapper">
+          <div class="overlay">
+            <span>
+              <div class="num_lable">{{val.num}}</div>
+            </span>
+            <img src="{{pluResPath}}img/deck/边框.png" alt="">
+          </div>
+          <div class="cost-wrapper">
+            {{each val.action_cost vals}}
+            <div class="ty-container">
+              <img src="{{pluResPath}}img/deck/{{vals.cost_type}}.png" alt="" style="position: absolute; z-index: 1;">
+            </div>
+            <div class="va-container">
+              <img src="{{pluResPath}}img/deck/{{vals.cost_value}}.png" alt="" style="position: absolute; z-index: 2;">
+            </div>
+            <div style="height: 150px;"></div>
+            {{/each}}
+          </div>
+          <img src="{{val.image}}" alt="">
+        </div>
+        {{/each}}
+      </div>
+    </div>
+
+    <div class="logo">Created By Miao-Yunzai</div>
+  </div>
+</body>
+
+</html>

plugins/genshin/resources/html/deckCard/deckCard.css

@@ -0,0 +1,388 @@
+@font-face {
+  font-family: "tttgbnumber";
+  src: url("../../font/tttgbnumber.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
+  transform: scale(2);
+  transform-origin: 0 0;
+}
+
+.container {
+  width: 465px;
+  padding: 20px 15px 10px 15px;
+  background-color: #ececec;
+}
+
+.container-win {
+  width: 100px;
+  height: 60px;
+  padding: 0;
+  background-color: #c48989;
+  position: absolute;
+  top: -10px;
+  left: 0;
+}
+
+.head_box {
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+}
+
+.head_box .id_text {
+  font-size: 24px;
+}
+
+.head_box .genshin_logo {
+  position: absolute;
+  top: 1px;
+  right: 15px;
+  width: 97px;
+}
+
+.basicInfo {
+  padding: 10px 5px 15px;
+  background: #f5f5f5;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  border-radius: 15px;
+  position: relative;
+  margin-bottom: 10px;
+}
+
+.basicInfo_header {
+  display: flex;
+}
+
+.basicInfo_icon {
+  display: inline-block;
+  position: relative;
+}
+
+.basicInfo_icon {
+  background-image: url(../../img/deck/七圣召唤.png);
+  background-size: 70px 70px;
+  background-repeat: no-repeat;
+  width: 67px;
+  color: #fff;
+  text-align: center;
+  font-size: 35px;
+  line-height: 70px;
+  margin: 10px 10px 0;
+}
+
+.basicInfo_right {
+  display: inline-block;
+  width: calc(78% - 15px);
+  padding: 10px 0px;
+  margin-left: 7px;
+}
+
+.basicInfo_right .item {
+  width: 100%;
+  padding: 5px 10px 0;
+  height: 29px;
+  color: #877254;
+  font-size: 13px;
+  border: 1px solid #ebeadc;
+  margin: 5px 0;
+  background-color: #f5eee4;
+  display: flex;
+}
+
+.basicInfo_right .item div:first-child {
+  width: 50%;
+}
+
+.basicInfo_right .item div:nth-child(2) {
+  width: 50%;
+  text-align: right;
+}
+
+.item .text_box {
+  font-size: 12px;
+  background: #e9e5dc;
+  padding: 5px 0px 4px 0px;
+  font-family: tttgbnumber;
+  display: flex;
+  align-items: flex-start;
+}
+
+.item .text_box .weapon_box {
+  flex: 0 0 34px;
+  width: 34px;
+  height: 34px;
+  padding: 2px;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, .6);
+  overflow: hidden;
+  margin-left: 4px;
+}
+
+.item .text_box .weapon_boder {
+  border: 1px solid #d3bc8d;
+  border-radius: 5px;
+  width: 30px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.item .text_box .weapon_img {
+  width: 100%;
+  transform: scale(1.2, 1.2);
+
+}
+
+.item .text_box .weapon_name_box {
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
+.item .text_box .weapon_name_box .weapon_level {
+  margin-top: 2px;
+}
+
+.item .text_box .weapon_affix {
+  border-radius: 2px;
+  background-color: #ff5722;
+  padding: 2px 3px;
+  color: #fff;
+  display: inline-block;
+  transform: scale(0.8);
+  transform-origin: 12px 7px;
+}
+
+.avatar_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.avatar_covers div {
+  flex: 0 0 25%;
+  padding: 5px;
+}
+
+.avatar_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.action_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action_covers div {
+  flex: 0 0 20%;
+  padding: 5px;
+}
+
+.action_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.card-wrapper {
+  position: relative;
+  width: 25%;
+  padding: 5px;
+}
+
+.card-win {
+  font-size: 15px;
+  text-align: center;
+}
+
+.card-wrapper img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.hp-container {
+  position: absolute;
+  top: 9%;
+  left: 12%;
+  transform: translate(-50%, -50%);
+}
+
+.hp-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 25px;
+  height: auto;
+}
+
+.rq-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: auto;
+}
+
+.cost-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.va-container {
+  position: relative;
+  top: -11px;
+  left: -2px;
+}
+
+.va-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: auto;
+}
+
+.ty-container {
+  position: relative;
+  top: -6px;
+  left: -7px;
+}
+
+.ty-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: auto;
+}
+
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.logo {
+  font-size: 12px;
+  font-family: "tttgbnumber";
+  text-align: center;
+  color: #7994a7;
+}
+
+.tab_lable {
+  position: absolute;
+  top: -10px;
+  left: -8px;
+  background: #d4b98c;
+  color: #fff;
+  font-size: 14px;
+  padding: 3px 10px;
+  border-radius: 15px 0px 15px 15px;
+  z-index: 20;
+}
+
+.win_lable {
+  position: absolute;
+  bottom: 0px;
+  left: 5px;
+  background: #d4b98c;
+  color: #fff;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 10px 10px 10px 10px;
+  z-index: 20;
+}
+
+.num_lable {
+  position: absolute;
+  bottom: 0px;
+  right: 5px;
+  background: #8ca4d4;
+  color: #fff;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 10px 10px 10px 10px;
+  z-index: 20;
+}
+
+.tab-avatar-item {
+  height: 30px;
+  display: flex;
+  position: relative;
+  margin: 10px auto;
+  margin-top: 0;
+  margin-bottom: 20px;
+  cursor: pointer;
+  min-width: 100px;
+  width: 170px;
+  text-align: center;
+}
+
+.tab-avatar-item-left {
+  background: url(data:image/png;base64,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);
+  background-size: 70px 40px;
+  height: 40px;
+  width: 70px;
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.tab-avatar-item-middle {
+  z-index: 0;
+  height: 40px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABAAgMAAABNSE7QAAAACVBMVEUAAADx7Obv6eNXnHu8AAAAAXRSTlMAQObYZgAAABVJREFUCNdjWACEQAAkA+gJoXYuAAAl+xRROZX4mgAAAABJRU5ErkJggg==);
+  background-repeat: repeat-x;
+  background-size: contain;
+  position: absolute;
+  left: 20px;
+  right: 20px;
+  width: auto;
+}
+
+.tab-avatar-item-right {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAABACAMAAAAET1hZAAAA2FBMVEUAAADt5+Dt5+Ht5+Dr5d7r5d7u6eLr5d7r5d7r5d7r5d7t5+Dr5d7s5t/r5d7u6OLs5t/x7OXr5d7t5+Ds5t/t5+Ht5+Dr5d7s5t/t6OHv6ePr5d7s5t/r5d7u6OLv6uPs5t/r5d7t6OHs5t/r5d7s5t/x7Obr5d7s5+Ds5t/r5d7u6OHx6+Xv6uPt5+Dv6uTx7Obw6+Tt6OHr5d7v6uTs5t/t5+Ds5+Dx7Obx7Obu6eLu6eLx7Obu6eLu6eLr5d7x7Obx7Obu6eLw6uTw6+Tt5+Hu6OHr5d6e08eTAAAAQXRSTlMAAQMF5fQX++vYvTQtpY1yE9zRfVxMRDomIwnvoJuIY2BZURz83czLwqmUd2ZHD/bjwbWEaj4fDPns7OagjtKwrYRRDJYAAARaSURBVFjDxZnnYpswFEYvw3vHe4/s2ex0twFJ9/3fqMIGX2wFjGK7Pn+Mwcn5JDSQAGd/DK4qzVeIZ59+9LBLkzs4FOV8FhFTl7cGHIrO82MG8Whq/v/6L41uXnpSka6cIuZa8CHvn4MtWDvrci6cFb5c1LsA5jSHWKpu4yex6zoewsOROtdlaoIwDw0LrEoK7Zdt/b47MAgJ557RpZ846wkEd2pjE47zeHJtbOEPCu468wNinsJhyyoQKwHkN3nyrABG/QQHpq6f5ERYThHEshIczumS1HvwugmtFP6x9P1kJ78KJaBWQHr5eVGFQhZLhoaf7Kpfxb8LgW+h52wRSH49fYViFkc6frLH+ylBqApW9ZIfXSiksKHhJ/smP7U2RgG4IL1H7RimmOok9rMFGn6qAmn1S8+oOf5+gys8MoGItev5qb/7Afwk4d5wCb0cVhL5mb6ferxPoCcm0MLU8WY/C5GwARDhAMLTE9/TUMLhRj8L84FbLIkIwEi/yhC6mQxVQLSeUEseHEo//zAC54F+7arADgxOyp+rf8/M1vqnVKkRgk7gKHru/ITO+dDS9wduBTaPoFS/r1daxtc0tDs9fT/JVbxaUNu/qp9fqYCh2f7j7TTrUv8nvdoqzpKMfzp20sXrBV/8n66OP4Gdppx4fTAy38DxVVJ/Urs/0C/1IkovuYZ66i6Z3/X+RiOAr2cyR6T+zKr28SmRP2nhqR/QnYjS19LGJWKmkKj875pE6x3/4kPaKKPE7mzw69upI0Tqvz2b1Uuck53txc9i9Gc3d6/1LAbkm9bO/a50KQSlH5tQTiFxVNj1/Xd5tF5yf927e8oE9tau2z+jXh/1OHTfhIKNHkNr1/3f5dF6ogJdrwlc7XD8oxkoUh8qyDPMEI+s3Y7/zBEiRs84fw/4WoA8tmCTXycB80SOiqDxWB4FjKB5pDf/R0egNX+cnvNwO7gFs63rj8zAXEF2ZcwP9OEx8EsPCB2//+TLGO3FOJ48yr6ipwA/wTAMLT/hEMJfBMSuRGlIogC3MJsUdZ//1QSJV4Fi9YbUTMvuF3XXP5oZ/LqnyZACjGGC51r3X1sfbMXQgExXapaZw+le17/0sKHORrwJDcwZe13/Czd6OnyENxsbSfc/3C32P6jvhfiRhjJeGFr7P0n9tAUWGUC0oH2SKYLi19qAirMHhXecj25BBaqnWAfFr5cgwi5Z2QJ9VwaAEVh5zJt72P9c2wLmXJ5w1wP8MowS2uld7v+S3F1/ClsPIK7BGGK/uO3+t+NKSL3Yf2ehn831SoDvt2CVMNWGVT7x7kEs4BL54QRy9RmQc7Y8+5iGah777V29/wjm4tgnUBEEuJ8BvNhoF0HDr7/wkYgw/mBUu7HgrZzBfBp27ad7jhKugl/+zkwwGjZmnkzQ8m/Pt4dfzR6ANckhXhThIBiFchYx1zDg/1Ntjwc2Ip5PzQO8f85l0eN0VDzU++/++WDchTj+Ace+yEEyeEjrAAAAAElFTkSuQmCC);
+  background-size: 70px 40px;
+  height: 40px;
+  width: 70px;
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.tab-avatar-item-text {
+  z-index: 2;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 40px;
+  height: 40px;
+  position: relative;
+  margin: 0 auto;
+}

plugins/genshin/resources/html/deckCard/deckCard.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+  <link rel="shortcut icon" href="#" />
+  <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deckCard/deckCard.css" />
+  <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
+  <link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
+  {{@headIndexStyle}}
+</head>
+
+<body>
+  <div class="container" id="container">
+    <div class="head_box">
+      <div class="id_text">
+        {{basicInfo.nickname}}
+      </div>
+      <div class="id_text">
+        UID: {{uid}}
+      </div>
+      <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
+    </div>
+    <div style="height: 11px;"></div>
+
+    <div class="basicInfo">
+      {{if basicInfo.level>0}}
+      <div class="tab_lable">七圣召唤</div>
+      <div class="basicInfo_header">
+        <div class="basicInfo_icon"><span>{{basicInfo.level}}</span></div>
+        <div class="basicInfo_right">
+          <div class="item">
+            <div>已收集角色牌</div>
+            <div>{{basicInfo.avatar_card_num_gained}}/{{basicInfo.avatar_card_num_total}}</div>
+          </div>
+          <div class="item">
+            <div>已收集行动牌</div>
+            <div>{{basicInfo.action_card_num_gained}}/{{basicInfo.action_card_num_total}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    {{/if}}
+    <div style="height: 5px;"></div>
+
+    {{if avatar_cardList}}
+    <div class="basicInfo">
+      <div class="tab_lable">角色牌详情</div>
+      <div style="height: 10px;"></div>
+      <div class="avatar_covers">
+        {{each avatar_cardList.card_list val}}
+        {{if val.num>0}}
+        <div class="card-wrapper">
+          <div class="overlay">
+            <img src="{{pluResPath}}img/deck/边框.png" alt="">
+            <span>
+              <div class="win_lable">{{val.proficiency}}/{{val.use_count}}</div>
+            </span>
+          </div>
+          <div class="overlay">
+            <div class="rq-container">
+              <img src="{{pluResPath}}img/deck/容器.png" alt="">
+            </div>
+            <div class="hp-container">
+              <img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
+            </div>
+          </div>
+          <img src="{{val.image}}" alt="">
+        </div>
+        {{/if}}
+        {{/each}}
+      </div>
+      <div class="logo">左下角为胜利场数/使用次数，仅展示已有角色牌</div>
+    </div>
+    {{/if}}
+    {{if action_cardList}}
+    <div class="basicInfo">
+      <div class="tab_lable">行动牌详情</div>
+      <div style="height: 10px;"></div>
+      <div class="action_covers">
+        {{each action_cardList.card_list val}}
+        {{if val.num>0}}
+        <div class="card-wrapper">
+          <div class="overlay">
+            <img src="{{pluResPath}}img/deck/边框.png" alt="">
+            <span>
+              <div class="win_lable">{{val.use_count}}</div>
+            </span>
+            <span>
+              <div class="num_lable">{{val.num}}</div>
+            </span>
+          </div>
+          <div class="cost-wrapper">
+            {{each val.action_cost vals}}
+            <div class="ty-container">
+              <img src="{{pluResPath}}img/deck/{{vals.cost_type}}.png" alt="" style="position: absolute; z-index: 1;">
+            </div>
+            <div class="va-container">
+              <img src="{{pluResPath}}img/deck/{{vals.cost_value}}.png" alt="" style="position: absolute; z-index: 2;">
+            </div>
+            <div style="height: 150px;"></div>
+            {{/each}}
+          </div>
+          <img src="{{val.image}}" alt="">
+        </div>
+        {{/if}}
+        {{/each}}
+      </div>
+      <div class="logo">左下角为使用次数，仅展示已有行动牌</div>
+    </div>
+    {{/if}}
+    <div class="logo">Created By Miao-Yunzai</div>
+  </div>
+</body>
+
+</html>

plugins/genshin/resources/html/deckList/deckList.css

@@ -0,0 +1,213 @@
+@font-face {
+  font-family: "tttgbnumber";
+  src: url("../../font/tttgbnumber.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+}
+
+body {
+  font-size: 18px;
+  color: #1e1f20;
+  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
+  transform: scale(2);
+  transform-origin: 0 0;
+}
+
+.container {
+  width: 465px;
+  padding: 20px 15px 10px 15px;
+  background-color: #ececec;
+}
+
+.head_box {
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+}
+
+.head_box .id_text {
+  font-size: 24px;
+}
+
+.head_box .role-name {
+  font-size: 24px;
+}
+
+.head_box .genshin_logo {
+  position: absolute;
+  top: 1px;
+  right: 15px;
+  width: 97px;
+}
+
+.basicInfo {
+  padding: 10px 5px 15px;
+  background: #f5f5f5;
+  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%);
+  border-radius: 15px;
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.avatar_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.avatar_covers div {
+  flex: 0 0 33%;
+  padding: 10px;
+}
+
+.avatar_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.action_covers {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.action_covers div {
+  flex: 0 0 25%;
+  padding: 5px;
+}
+
+.action_covers img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.card-wrapper {
+  position: relative;
+  width: 25%;
+  padding: 5px;
+}
+
+.card-wrapper img {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #c3b6aa;
+  border-radius: 5px;
+}
+
+.hp-container {
+  position: absolute;
+  top: 9%;
+  left: 12%;
+  transform: translate(-50%, -50%);
+}
+
+.hp-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 25px;
+  height: auto;
+}
+
+.rq-container img {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: auto;
+}
+
+.cost-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.va-container {
+  position: relative;
+  top: -11px;
+  left: -2px;
+}
+
+.va-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: auto;
+}
+
+.ty-container {
+  position: relative;
+  top: -6px;
+  left: -7px;
+}
+
+.ty-container img {
+  position: relative;
+  border: none;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: auto;
+}
+.num {
+  position: absolute;
+  bottom: 15px;
+  right: 15px;
+  transform: translate(50%, 50%);
+}
+
+.num img {
+  border: none;
+  width: 30px;
+  height: auto;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.logo {
+  font-size: 12px;
+  font-family: "tttgbnumber";
+  text-align: center;
+  color: #7994a7;
+}
+
+.bottom-msg {
+  font-size: 12px;
+  font-family: "tttgbnumber";
+  text-align: center;
+  color: #7994a7;
+  margin-bottom: 5px;
+  margin-top: -5px;
+}
+
+.tab_lable {
+  position: absolute;
+  top: -10px;
+  left: -8px;
+  background: #d4b98c;
+  color: #fff;
+  font-size: 14px;
+  padding: 3px 10px;
+  border-radius: 15px 0px 15px 15px;
+  z-index: 20;
+}

plugins/genshin/resources/html/deckList/deckList.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
+  <link rel="shortcut icon" href="#" />
+  <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/deckList/deckList.css" />
+  <link rel="preload" href="{{resPath}}/font/tttgbnumber.ttf" as="font">
+  <link rel="preload" href="{{pluResPath}}img/roleIndex/namecard/{{bg}}.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg5.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg4.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/other/bg105.png" as="image">
+  <link rel="preload" href="{{pluResPath}}img/abyss/bg.png" as="image">
+  {{@headIndexStyle}}
+</head>
+
+<body>
+  <div class="container" id="container">
+    <div class="head_box">
+      <div class="role-name">
+        {{nickname}} lv:{{level}}
+      </div>
+      <div class="id_text">
+        UID: {{uid}}
+      </div>
+      <img class="genshin_logo" src="{{pluResPath}}img/other/原神.png" />
+    </div>
+    <div style="height: 12px;"></div>
+
+    {{each Data vals}}
+    <div class="basicInfo">
+      <div class="tab_lable">七圣卡组{{vals.id}} 使用#七圣卡组{{vals.id}}查看详情</div>
+      <div style="height: 10px;"></div>
+      <div class="avatar_covers">
+        {{each vals.avatar_cards val}}
+        <div class="card-wrapper">
+          <div class="overlay">
+            <img src="{{pluResPath}}img/deck/边框.png" alt="">
+          </div>
+          <div class="overlay">
+            <div class="rq-container">
+              <img src="{{pluResPath}}img/deck/容器.png" alt="">
+            </div>
+            <div class="hp-container">
+              <img src="{{pluResPath}}img/deck/{{val.hp}}.png" alt="">
+            </div>
+          </div>
+          <img src="{{val.image}}" alt="">
+        </div>
+        {{/each}}
+      </div>
+    </div>
+    {{/each}}
+    <div class="logo">Created By Miao-Yunzai</div>
+  </div>
+</body>
+
+</html>