card basic

apps/card.js

@@ -0,0 +1,40 @@
+import { ZZZPlugin } from '../lib/plugin.js';
+import _ from 'lodash';
+import render from '../lib/render.js';
+import { rulePrefix } from '../lib/common.js';
+import { ZZZIndexResp } from '../model/index.js';
+
+export class Card extends ZZZPlugin {
+  constructor() {
+    super({
+      name: '[ZZZ-Plugin]Card',
+      dsc: 'zzzcard',
+      event: 'message',
+      priority: 100,
+      rule: [
+        {
+          reg: `${rulePrefix}card$`,
+          fnc: 'card',
+        },
+      ],
+    });
+  }
+  async card() {
+    const { api, deviceFp } = await this.getAPI();
+    const userData = await this.getPlayerInfo();
+    if (!userData) return false;
+    let indexData = await api.getData('zzzIndex', { deviceFp });
+    indexData = await api.checkCode(this.e, indexData, 'zzzIndex', {});
+    if (!indexData || indexData.retcode !== 0) {
+      await this.reply('[zzznote]Index数据获取失败');
+      return false;
+    }
+    indexData = indexData.data;
+    indexData = new ZZZIndexResp(indexData);
+    this.e.playerCard.player.region_name = indexData.stats.world_level_name;
+    const data = {
+      card: indexData,
+    };
+    await render(this.e, 'card/index.html', data);
+  }
+}

apps/gachalog.js

@@ -71,6 +71,12 @@ export class GachaLog extends ZZZPlugin {
     this.getLog(key);
   }
   async getLog(key) {
+    const lastQueryTime = await redis.get(`ZZZ:GACHA:${uid}:LASTTIME`);
+    if (lastQueryTime && Date.now() - lastQueryTime < 1000 * 60 * 5) {
+      await this.reply('1分钟内只能刷新一次，请稍后重试');
+      return false;
+    }
+    await redis.set(`ZZZ:GACHA:${uid}:LASTTIME`, Date.now());
     const uid = await this.getUID();
     const data = await updateGachaLog(key, uid);
     let msg = `抽卡记录更新成功，共${Object.keys(data).length}个卡池`;

apps/note.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import render from '../lib/render.js';
 import { ZZZNoteResp } from '../model/note.js';
 import { rulePrefix } from '../lib/common.js';
+import { ZZZIndexResp } from '../model/index.js';
 
 export class Note extends ZZZPlugin {
   constructor() {
@@ -19,35 +20,21 @@ export class Note extends ZZZPlugin {
       ],
     });
   }
-  async note(e) {
+  async note() {
     const { api, deviceFp } = await this.getAPI();
-    if (!api) return false;
-    let userData = await api.getData('zzzUser');
-    if (!userData?.data || _.isEmpty(userData.data.list)) {
-      await e.reply('[zzznote]玩家信息获取失败');
-      return false;
-    }
-    userData = userData?.data?.list[0];
+    const userData = await this.getPlayerInfo();
+    if (!userData) return false;
     let noteData = await api.getData('zzzNote', { deviceFp });
-    noteData = await api.checkCode(e, noteData, 'zzzNote', {});
+    noteData = await api.checkCode(this.e, noteData, 'zzzNote', {});
     if (!noteData || noteData.retcode !== 0) {
-      await e.reply('[zzznote]每日数据获取失败');
+      await this.reply('[zzznote]每日数据获取失败');
       return false;
     }
     noteData = noteData.data;
     noteData = new ZZZNoteResp(noteData);
-    let avatar = this.e.bot.avatar;
-    // 头像
-    if (this.e.member?.getAvatarUrl) {
-      avatar = await this.e.member.getAvatarUrl();
-    } else if (this.e.friend?.getAvatarUrl) {
-      avatar = await this.e.friend.getAvatarUrl();
-    }
     const finalData = {
-      avatar,
-      player: userData,
       note: noteData,
     };
-    await render(e, 'note/index.html', finalData);
+    await render(this.e, 'note/index.html', finalData);
   }
 }

lib/common.js

@@ -1,7 +1,7 @@
 import User from '../../genshin/model/user.js';
 import { getStoken } from './authkey.js';
 
-export const rulePrefix = '((#|\\*)?(zzz|ZZZ|绝区零)|\\*|＊)';
+export const rulePrefix = '((#|\\%)?(zzz|ZZZ|绝区零)|\\*|＊)';
 
 export async function getCk(e, s = false) {
   e.isSr = true;

lib/convert.js

@@ -0,0 +1 @@
+export * as element from './convert/element.js';

lib/convert/element.js

@@ -0,0 +1,15 @@
+const ELEMENT_TYPE = {
+  203: 'thunder',
+  205: 'dungeon',
+  202: 'ice',
+  200: 'physdmg',
+  201: 'fire',
+};
+/**
+ *
+ * @param {keyof ELEMENT_TYPE} id
+ * @returns
+ */
+export const IDToElement = id => {
+  return ELEMENT_TYPE[id];
+};

lib/plugin.js

@@ -47,4 +47,26 @@ export class ZZZPlugin extends plugin {
     }
     return { api, uid, deviceFp };
   }
+  async getPlayerInfo() {
+    const { api } = await this.getAPI();
+    if (!api) return false;
+    let userData = await api.getData('zzzUser');
+    if (!userData?.data || _.isEmpty(userData.data.list)) {
+      await this.reply('[zzznote]玩家信息获取失败');
+      return false;
+    }
+    userData = userData?.data?.list[0];
+    let avatar = this.e.bot.avatar;
+    // 头像
+    if (this.e.member?.getAvatarUrl) {
+      avatar = await this.e.member.getAvatarUrl();
+    } else if (this.e.friend?.getAvatarUrl) {
+      avatar = await this.e.friend.getAvatarUrl();
+    }
+    this.e.playerCard = {
+      avatar: avatar,
+      player: userData,
+    };
+    return userData;
+  }
 }

lib/render.js

@@ -36,6 +36,8 @@ function render(e, renderPath, renderData = {}, cfg = {}) {
       const layoutPath = data.pluResPath + 'common/layout/';
       const renderPathFull = data.pluResPath + renderPath.split('/')[0] + '/';
       return {
+        player: e?.playerCard?.player,
+        avatar: e?.playerCard?.avatar,
         ...data,
         _res_path: resPath,
         _layout_path: layoutPath,
@@ -44,6 +46,7 @@ function render(e, renderPath, renderData = {}, cfg = {}) {
           scale: pct,
           resourcesPath: resPath,
           currentPath: renderPathFull,
+          playerInfo: path.join(layoutPathFull, 'playerinfo.html'),
           copyright: `Created By ${version.name}<span class="version">${version.yunzai}</span> & ${pluginName}<span class="version">${version.version}</span>`,
           createdby: `Created By <span class="highlight">${pluginName}</span> & Powered By <span class="highlight">ZZZure</span>`,
         },

model/avatar.js

@@ -1,3 +1,8 @@
+import { element } from '../lib/convert.js';
+import { Equip, Weapon } from './equip.js';
+import { Property } from './property.js';
+import { Skill } from './skill.js';
+
 /**
  * @class
  */
@@ -42,6 +47,8 @@ export class Avatar {
     this.hollow_icon_path = hollow_icon_path;
     this.rank = rank;
     this.is_chosen = is_chosen;
+
+    this.element_str = element.IDToElement(element_type);
   }
 }
 
@@ -100,6 +107,8 @@ export class ZZZAvatarBasic {
     this.icon_paths = icon_paths;
     this.rank = rank;
     this.is_chosen = is_chosen;
+
+    this.element_str = element.IDToElement(element_type);
   }
 }
 
@@ -128,41 +137,44 @@ export class Rank {
  */
 export class ZZZAvatarInfo {
   /**
-   * @param {number} id
-   * @param {number} level
-   * @param {string} name_mi18n
-   * @param {string} full_name_mi18n
-   * @param {number} element_type
-   * @param {string} camp_name_mi18n
-   * @param {number} avatar_profession
-   * @param {string} rarity
-   * @param {string} group_icon_path
-   * @param {string} hollow_icon_path
-   * @param {Equip[]} equip
-   * @param {Weapon} weapon
-   * @param {Property[]} properties
-   * @param {Skill[]} skills
-   * @param {number} rank
-   * @param {Rank[]} ranks
+   * @param {{
+   *  id: number;
+   *  level: number;
+   *  name_mi18n: string;
+   *  full_name_mi18n: string;
+   *  element_type: number;
+   *  camp_name_mi18n: string;
+   *  avatar_profession: number;
+   *  rarity: string;
+   *  group_icon_path: string;
+   *  hollow_icon_path: string;
+   *  equip: Equip[];
+   *  weapon: Weapon;
+   *  properties: Property[];
+   *  skills: Skill[];
+   *  rank: number;
+   *  ranks: Rank[];
+   * }} data
    */
-  constructor(
-    id,
-    level,
-    name_mi18n,
-    full_name_mi18n,
-    element_type,
-    camp_name_mi18n,
-    avatar_profession,
-    rarity,
-    group_icon_path,
-    hollow_icon_path,
-    equip,
-    weapon,
-    properties,
-    skills,
-    rank,
-    ranks
-  ) {
+  constructor(data) {
+    const {
+      id,
+      level,
+      name_mi18n,
+      full_name_mi18n,
+      element_type,
+      camp_name_mi18n,
+      avatar_profession,
+      rarity,
+      group_icon_path,
+      hollow_icon_path,
+      equip,
+      weapon,
+      properties,
+      skills,
+      rank,
+      ranks,
+    } = data;
     this.id = id;
     this.level = level;
     this.name_mi18n = name_mi18n;
@@ -179,6 +191,8 @@ export class ZZZAvatarInfo {
     this.skills = skills;
     this.rank = rank;
     this.ranks = ranks;
+
+    this.element_str = element.IDToElement(element_type);
   }
 }
 

model/bangboo.js

@@ -1,3 +1,26 @@
+/**
+ * @class
+ */
+export class Buddy {
+  /**
+   * @param {{
+   *  id: number;
+   *  name: string;
+   *  rarity: string;
+   *  level: number;
+   *  star: number;
+   * }} data
+   */
+  constructor(data) {
+    const { id, name, rarity, level, star } = data;
+    this.id = id;
+    this.name = name;
+    this.rarity = rarity;
+    this.level = level;
+    this.star = star;
+  }
+}
+
 /**
  * @class
  */

model/index.js

@@ -1,22 +1,5 @@
-/**
- * @class
- */
-export class Buddy {
-  /**
-   * @param {number} id
-   * @param {string} name
-   * @param {string} rarity
-   * @param {number} level
-   * @param {number} star
-   */
-  constructor(id, name, rarity, level, star) {
-    this.id = id;
-    this.name = name;
-    this.rarity = rarity;
-    this.level = level;
-    this.star = star;
-  }
-}
+import { ZZZAvatarInfo } from './avatar.js';
+import { Buddy } from './bangboo.js';
 
 /**
  * @class
@@ -51,7 +34,7 @@ export class ZZZIndexResp {
   /**
    * @param {{
    *  stats: Stats;
-   *  avatar_list: Avatar[];
+   *  avatar_list: ZZZAvatarInfo[];
    *  cur_head_icon_url: string;
    *  buddy_list: Buddy[];
    * }} data
@@ -59,8 +42,8 @@ export class ZZZIndexResp {
   constructor(data) {
     const { stats, avatar_list, cur_head_icon_url, buddy_list } = data;
     this.stats = stats;
-    this.avatar_list = avatar_list;
+    this.avatar_list = avatar_list.map(item => new ZZZAvatarInfo(item));
     this.cur_head_icon_url = cur_head_icon_url;
-    this.buddy_list = buddy_list;
+    this.buddy_list = buddy_list.map(item => new Buddy(item));
   }
 }

model/property.js

@@ -1,7 +1,7 @@
 /**
  * @class
  */
-class Property {
+export class Property {
   /**
    * @param {string} property_name
    * @param {number} property_id

resources/card/index.css

@@ -0,0 +1,175 @@
+.card {
+  margin: 0 1em;
+}
+.card .user-info {
+  margin: 0 1em;
+}
+.card > .title {
+  width: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  align-items: stretch;
+  padding: 0 2.4em;
+  position: relative;
+  margin: 0.5em 0;
+}
+.card > .title .parallelograms {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  position: inherit;
+  padding-bottom: 0.4em;
+  z-index: 1;
+}
+.card > .title .parallelograms span {
+  width: 1.3em;
+  height: 80%;
+  background-color: rgb(246, 202, 69);
+  margin-right: -0.2em;
+  -webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
+  clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
+}
+.card > .title .bg-content {
+  position: absolute;
+  bottom: -0.1em;
+  left: 50%;
+  transform: translate(-50%, 0) skewX(-8deg);
+  color: rgba(255, 255, 255, 0.1);
+  font-size: 2.7em;
+}
+.card > .title .content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  font-size: 1.5em;
+  text-align: center;
+  position: inherit;
+  z-index: 1;
+}
+.card .status {
+  display: flex;
+  align-items: center;
+  background: url("./images/status.png") no-repeat center center;
+  background-size: 110% 160%;
+  aspect-ratio: 2.4;
+  overflow: hidden;
+  margin: 0 1em;
+  margin-bottom: 1.5em;
+  padding-top: 4em;
+  padding-left: 3em;
+  padding-right: 3em;
+  padding-bottom: 3.5em;
+  justify-content: space-around;
+}
+.card .status .item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.card .status .item .value {
+  font-size: 1.8em;
+}
+.card .status .item .label {
+  font-size: 0.95em;
+  color: #e2e2e2;
+}
+.card .list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1em;
+  padding: 0.5em 3em;
+  margin-bottom: 1.5em;
+}
+.card .list .item {
+  width: 100%;
+  position: relative;
+}
+.card .list .item * {
+  position: inherit;
+  z-index: 1;
+}
+.card .list .item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0.2em;
+  left: -0.2em;
+  width: 100%;
+  height: 100%;
+  background: rgb(138, 51, 183);
+  z-index: 0;
+}
+.card .list .item .rank {
+  position: absolute;
+  top: 0.2em;
+  left: 0.1em;
+  width: 1.5em;
+  aspect-ratio: 1;
+  background: url("./images/RANK_A.png") no-repeat center center;
+  background-size: contain;
+  color: white;
+  z-index: 2;
+}
+.card .list .item.rankS::after {
+  background: rgb(230, 119, 51);
+}
+.card .list .item.rankS .rank {
+  background-image: url("./images/RANK_S.png");
+}
+.card .list .item.rankB::after {
+  background: rgb(93, 183, 249);
+}
+.card .list .item.rankB .rank {
+  background-image: url("./images/RANK_B.png");
+}
+.card .list .item .image {
+  width: 100%;
+  aspect-ratio: 0.8;
+  background-color: #e2e2e2;
+}
+.card .list .item .image img {
+  width: 100%;
+  display: block;
+}
+.card .list .item .level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgb(0, 0, 0);
+  color: white;
+  text-align: center;
+}
+.card .list .item .property {
+  position: absolute;
+  top: 0.2em;
+  right: 0.1em;
+  width: 1.6em;
+  aspect-ratio: 1;
+  background-color: #000;
+  border-radius: 50%;
+  border: solid 0.1em #000;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: white;
+  z-index: 2;
+}
+.card .list .item .property.fire {
+  background-image: url("./images/IconFire.png");
+}
+.card .list .item .property.ice {
+  background-image: url("./images/IconIce.png");
+}
+.card .list .item .property.physdmg {
+  background-image: url("./images/IconPhysDmg.png");
+}
+.card .list .item .property.thunder {
+  background-image: url("./images/IconThunder.png");
+}
+.card .list .item .property.dungeon {
+  background-image: url("./images/IconDungeonBuffEther.png");
+}
+
+/*# sourceMappingURL=index.css.map */

resources/card/index.html

@@ -0,0 +1,86 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
+{{/block}}
+
+{{block 'main'}}
+<div class="card">
+  {{include sys.playerInfo}}
+  <div class="status">
+    <div class="item">
+      <div class="value">{{card.stats.active_days}}</div>
+      <div class="label">活跃天数</div>
+    </div>
+    <div class="item">
+      <div class="value">{{card.stats.avatar_num}}</div>
+      <div class="label">获得代理人</div>
+    </div>
+    <div class="item">
+      <div class="value">{{card.stats.buddy_num}}</div>
+      <div class="label">获得邦布</div>
+    </div>
+    <div class="item">
+      <div class="value">{{card.stats.cur_period_zone_layer_count}}</div>
+      <div class="label">式舆防卫战</div>
+    </div>
+  </div>
+  <div class="title">
+    <div class="bg-content">
+      AGENT
+    </div>
+    <div class="parallelograms">
+      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+    </div>
+    <div class="content">
+      代理人信息
+    </div>
+    <div class="parallelograms">
+      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+    </div>
+  </div>
+
+
+  <div class="list">
+    {{each card.avatar_list char i}}
+    <div class="item rank{{char.rarity}}">
+      <div class="rank rank{{char.rarity}}"></div>
+      <div class="property {{char.element_str}}"></div>
+      <div class="image">
+        <img src="./images/status.png" alt="">
+      </div>
+      <div class="level">等级{{char.level}}</div>
+    </div>
+    {{/each}}
+  </div>
+
+
+  <div class="title">
+    <div class="bg-content">
+      BANGBOO
+    </div>
+    <div class="parallelograms">
+      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+    </div>
+    <div class="content">
+      邦布信息
+    </div>
+    <div class="parallelograms">
+      <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+    </div>
+  </div>
+
+
+  <div class="list">
+    {{each card.buddy_list bangboo i}}
+    <div class="item rank{{bangboo.rarity}}">
+      <div class="rank rank{{bangboo.rarity}}"></div>
+      <div class="image">
+        <img src="./images/status.png" alt="">
+      </div>
+      <div class="level">等级{{bangboo.level}}</div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{/block}}

resources/card/index.scss

@@ -0,0 +1,188 @@
+.card {
+  margin: 0 1em;
+  .user-info {
+    margin: 0 1em;
+  }
+  > .title {
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: flex;
+    align-items: stretch;
+    padding: 0 2.4em;
+    position: relative;
+    margin: 0.5em 0;
+    .parallelograms {
+      $pwidth: 0.7em;
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: flex-end;
+      position: inherit;
+      padding-bottom: 0.4em;
+      z-index: 1;
+      span {
+        width: 1.3em;
+        height: 80%;
+        background-color: rgb(246, 202, 69);
+        margin-right: -0.2em;
+        -webkit-clip-path: polygon(
+          $pwidth 0%,
+          100% 0%,
+          calc(100% - $pwidth) 100%,
+          0% 100%
+        );
+        clip-path: polygon(
+          $pwidth 0%,
+          100% 0%,
+          calc(100% - $pwidth) 100%,
+          0% 100%
+        );
+      }
+    }
+    .bg-content {
+      position: absolute;
+      bottom: -0.1em;
+      left: 50%;
+      transform: translate(-50%, 0) skewX(-8deg);
+      color: rgba(255, 255, 255, 0.1);
+      font-size: 2.7em;
+    }
+    .content {
+      flex-grow: 1;
+      flex-shrink: 1;
+      font-size: 1.5em;
+      text-align: center;
+      position: inherit;
+      z-index: 1;
+    }
+  }
+  .status {
+    display: flex;
+    align-items: center;
+    background: url('./images/status.png') no-repeat center center;
+    background-size: 110% 160%;
+    aspect-ratio: 2.4;
+    overflow: hidden;
+    margin: 0 1em;
+    margin-bottom: 1.5em;
+    padding-top: 4em;
+    padding-left: 3em;
+    padding-right: 3em;
+    padding-bottom: 3.5em;
+    justify-content: space-around;
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .value {
+        font-size: 1.8em;
+      }
+      .label {
+        font-size: 0.95em;
+        color: #e2e2e2;
+      }
+    }
+  }
+  .list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1em;
+    padding: 0.5em 3em;
+    margin-bottom: 1.5em;
+    .item {
+      width: 100%;
+      position: relative;
+      * {
+        position: inherit;
+        z-index: 1;
+      }
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.2em;
+        left: -0.2em;
+        width: 100%;
+        height: 100%;
+        background: rgb(138, 51, 183);
+        z-index: 0;
+      }
+      .rank {
+        position: absolute;
+        top: 0.2em;
+        left: 0.1em;
+        width: 1.5em;
+        aspect-ratio: 1;
+        background: url('./images/RANK_A.png') no-repeat center center;
+        background-size: contain;
+        color: white;
+        z-index: 2;
+      }
+      &.rankS {
+        &::after {
+          background: rgb(230, 119, 51);
+        }
+        .rank {
+          background-image: url('./images/RANK_S.png');
+        }
+      }
+      &.rankB {
+        &::after {
+          background: rgb(93, 183, 249);
+        }
+        .rank {
+          background-image: url('./images/RANK_B.png');
+        }
+      }
+      .image {
+        width: 100%;
+        aspect-ratio: 0.8;
+        background-color: #e2e2e2;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+      .level {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: rgb(0, 0, 0);
+        color: white;
+        text-align: center;
+      }
+      .property {
+        position: absolute;
+        top: 0.2em;
+        right: 0.1em;
+        width: 1.6em;
+        aspect-ratio: 1;
+        background-color: #000;
+        border-radius: 50%;
+        border: solid 0.1em #000;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        color: white;
+        z-index: 2;
+        &.fire {
+          background-image: url('./images/IconFire.png');
+        }
+        &.ice {
+          background-image: url('./images/IconIce.png');
+        }
+        &.physdmg {
+          background-image: url('./images/IconPhysDmg.png');
+        }
+        &.thunder {
+          background-image: url('./images/IconThunder.png');
+        }
+        &.dungeon {
+          background-image: url('./images/IconDungeonBuffEther.png');
+        }
+      }
+    }
+  }
+}

resources/common/layout/playerinfo.css

@@ -0,0 +1,76 @@
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  padding: 0 1em;
+  padding-bottom: 1em;
+  padding-top: 1.7em;
+}
+.user-info .avatar {
+  width: 4em;
+  height: 4em;
+  border-radius: 50%;
+  border-image: url("../images/SuitBg.png");
+  border-image-width: 0;
+  border-image-outset: 0.4em;
+  border-image-repeat: round;
+  border-image-slice: 1 fill;
+  overflow: hidden;
+}
+.user-info .avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.user-info .info-bar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  gap: 0.2em;
+}
+.user-info .info-bar .info {
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  gap: 0.5em;
+  padding-left: 0.5em;
+}
+.user-info .info-bar .info .nickname {
+  font-size: 1.2em;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.user-info .info-bar .info .label {
+  -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
+  clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
+  padding: 0 0.4em;
+  font-size: 0.9em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: rgb(43, 38, 40);
+  margin: 0.1em 0;
+}
+.user-info .info-bar .info .label.level {
+  background-color: rgb(243, 203, 69);
+}
+.user-info .info-bar .info .label.server {
+  background-color: rgb(81, 177, 253);
+}
+.user-info .info-bar .uid {
+  border-image: url("../images/UIDBg.png");
+  border-image-slice: 0 100 0 100 fill;
+  border-image-width: 0em 1.6em 0em 1.6em;
+  border-image-outset: 0;
+  border-image-repeat: stretch stretch;
+  padding: 0.3em 1.6em;
+  font-size: 0.9em;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/*# sourceMappingURL=playerinfo.css.map */

resources/common/layout/playerinfo.html

@@ -0,0 +1,14 @@
+<link rel="stylesheet" type="text/css" href="{{@sys.resourcesPath}}/common/layout/playerinfo.css" />
+<div class="user-info">
+  <div class="avatar">
+    <img src="{{avatar}}" alt="Avatar">
+  </div>
+  <div class="info-bar">
+    <div class="info">
+      <div class="nickname">{{player.nickname}}</div>
+      <div class="label level">Lv{{player.level}}</div>
+      <div class="label server">{{player.region_name}}</div>
+    </div>
+    <div class="uid">UID {{player.game_uid}}</div>
+  </div>
+</div>

resources/common/layout/playerinfo.scss

@@ -0,0 +1,95 @@
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  padding: 0 1em;
+  padding-bottom: 1em;
+  padding-top: 1.7em;
+  .avatar {
+    width: 4em;
+    height: 4em;
+    border-radius: 50%;
+    border-image: url('../images/SuitBg.png');
+    border-image-width: 0;
+    border-image-outset: 0.4em;
+    border-image-repeat: round;
+    border-image-slice: 1 fill;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  }
+  .info-bar {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    gap: 0.2em;
+    .info {
+      width: 100%;
+      display: flex;
+      overflow: hidden;
+      gap: 0.5em;
+      padding-left: 0.5em;
+      .nickname {
+        font-size: 1.2em;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .label {
+        $label-width: 0.2em;
+        -webkit-clip-path: polygon(
+          $label-width 0%,
+          calc(100% - $label-width) 0%,
+          100% $label-width,
+          100% calc(100% - $label-width),
+          calc(100% - $label-width) 100%,
+          $label-width 100%,
+          0% calc(100% - $label-width),
+          0% $label-width
+        );
+        clip-path: polygon(
+          $label-width 0%,
+          calc(100% - $label-width) 0%,
+          100% $label-width,
+          100% calc(100% - $label-width),
+          calc(100% - $label-width) 100%,
+          $label-width 100%,
+          0% calc(100% - $label-width),
+          0% $label-width
+        );
+        padding: 0 0.4em;
+        font-size: 0.9em;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: rgb(43, 38, 40);
+        margin: 0.1em 0;
+
+        &.level {
+          background-color: rgb(243, 203, 69);
+        }
+
+        &.server {
+          background-color: rgb(81, 177, 253);
+        }
+      }
+    }
+    .uid {
+      border-image: url('../images/UIDBg.png');
+      border-image-slice: 0 100 0 100 fill;
+      border-image-width: 0em 1.6em 0em 1.6em;
+      border-image-outset: 0;
+      border-image-repeat: stretch stretch;
+      padding: 0.3em 1.6em;
+      font-size: 0.9em;
+      color: rgba(255, 255, 255, 0.6);
+    }
+  }
+}

resources/note/index.css

@@ -11,80 +11,6 @@
   overflow: hidden;
   padding: 5em 2.2em 2.2em 2.2em;
 }
-.card .user-info {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1em;
-  margin-top: 1.7em;
-  gap: 1em;
-  padding: 0 1em;
-}
-.card .user-info .avatar {
-  width: 4em;
-  height: 4em;
-  border-radius: 50%;
-  border-image: url("./images/SuitBg.png");
-  border-image-width: 0;
-  border-image-outset: 0.4em;
-  border-image-repeat: round;
-  border-image-slice: 1 fill;
-  overflow: hidden;
-}
-.card .user-info .avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  display: block;
-}
-.card .user-info .info-bar {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
-  gap: 0.2em;
-}
-.card .user-info .info-bar .info {
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  gap: 0.5em;
-  padding-left: 0.5em;
-}
-.card .user-info .info-bar .info .nickname {
-  font-size: 1.2em;
-  font-weight: bold;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.card .user-info .info-bar .info .label {
-  -webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
-  clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
-  padding: 0 0.4em;
-  font-size: 0.9em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: rgb(43, 38, 40);
-  margin: 0.1em 0;
-}
-.card .user-info .info-bar .info .label.level {
-  background-color: rgb(243, 203, 69);
-}
-.card .user-info .info-bar .info .label.server {
-  background-color: rgb(81, 177, 253);
-}
-.card .user-info .info-bar .uid {
-  border-image: url("./images/UIDBg.png");
-  border-image-slice: 0 100 0 100 fill;
-  border-image-width: 0em 1.6em 0em 1.6em;
-  border-image-outset: 0;
-  border-image-repeat: stretch stretch;
-  padding: 0.3em 1.6em;
-  font-size: 0.9em;
-  color: rgba(255, 255, 255, 0.6);
-}
 .card > .title {
   width: 100%;
   background-size: contain;

resources/note/index.html

@@ -6,19 +6,7 @@
 
 {{block 'main'}}
 <div class="card">
-  <div class="user-info">
-    <div class="avatar">
-      <img src="{{avatar}}" alt="Avatar">
-    </div>
-    <div class="info-bar">
-      <div class="info">
-        <div class="nickname">{{player.nickname}}</div>
-        <div class="label level">Lv{{player.level}}</div>
-        <div class="label server">{{player.region_name}}</div>
-      </div>
-      <div class="uid">UID {{player.game_uid}}</div>
-    </div>
-  </div>
+  {{include sys.playerInfo}}
   <div class="title">
     <div class="bg-content">
       STAMINA

resources/note/index.scss

@@ -9,101 +9,6 @@
   min-height: 30em;
   overflow: hidden;
   padding: 5em 2.2em 2.2em 2.2em;
-  .user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1em;
-    margin-top: 1.7em;
-    gap: 1em;
-    padding: 0 1em;
-    .avatar {
-      width: 4em;
-      height: 4em;
-      border-radius: 50%;
-      border-image: url('./images/SuitBg.png');
-      border-image-width: 0;
-      border-image-outset: 0.4em;
-      border-image-repeat: round;
-      border-image-slice: 1 fill;
-      overflow: hidden;
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        display: block;
-      }
-    }
-    .info-bar {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      flex: 1;
-      gap: 0.2em;
-      .info {
-        width: 100%;
-        display: flex;
-        overflow: hidden;
-        gap: 0.5em;
-        padding-left: 0.5em;
-        .nickname {
-          font-size: 1.2em;
-          font-weight: bold;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .label {
-          $label-width: 0.2em;
-          -webkit-clip-path: polygon(
-            $label-width 0%,
-            calc(100% - $label-width) 0%,
-            100% $label-width,
-            100% calc(100% - $label-width),
-            calc(100% - $label-width) 100%,
-            $label-width 100%,
-            0% calc(100% - $label-width),
-            0% $label-width
-          );
-          clip-path: polygon(
-            $label-width 0%,
-            calc(100% - $label-width) 0%,
-            100% $label-width,
-            100% calc(100% - $label-width),
-            calc(100% - $label-width) 100%,
-            $label-width 100%,
-            0% calc(100% - $label-width),
-            0% $label-width
-          );
-          padding: 0 0.4em;
-          font-size: 0.9em;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: rgb(43, 38, 40);
-          margin: 0.1em 0;
-
-          &.level {
-            background-color: rgb(243, 203, 69);
-          }
-
-          &.server {
-            background-color: rgb(81, 177, 253);
-          }
-        }
-      }
-      .uid {
-        border-image: url('./images/UIDBg.png');
-        border-image-slice: 0 100 0 100 fill;
-        border-image-width: 0em 1.6em 0em 1.6em;
-        border-image-outset: 0;
-        border-image-repeat: stretch stretch;
-        padding: 0.3em 1.6em;
-        font-size: 0.9em;
-        color: rgba(255, 255, 255, 0.6);
-      }
-    }
-  }
   > .title {
     width: 100%;
     background-size: contain;