diff --git a/apps/panel.js b/apps/panel.js
index 519662f..4030a70 100644
--- a/apps/panel.js
+++ b/apps/panel.js
@@ -48,18 +48,20 @@ export class Panel extends ZZZPlugin {
       await this.reply('面板列表刷新失败，请稍后再试');
       return;
     }
-    const newChar = result.filter(item => item.isNew);
-    let str = '面板列表获取成功，本次共刷新了' + newChar.length + '个角色：\n';
-    for (const item of result) {
-      str += item.name_mi18n + (item.isNew ? '（新）' : '') + '、';
+    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 finalData = {
+      uid: uid,
+      newChar: newChar.length,
+      list: result,
     }
-    str = str.slice(0, -1);
-    str += '\n总计' + result.length + '个角色';
-    await this.reply(str);
-    // const finalData = {
-    //   list: noteData,
-    // };
-    // await render(this.e, 'panel/refresh.html', finalData);
+    await render(this.e, 'panel/refresh.html', finalData);
   }
   async getCharPanelList() {
     const uid = await this.getUID();
diff --git a/resources/panel/images/@~8B@XO~)U1BIPPR}NN9CI7.png b/resources/panel/images/@~8B@XO~)U1BIPPR}NN9CI7.png
new file mode 100644
index 0000000..3e36833
Binary files /dev/null and b/resources/panel/images/@~8B@XO~)U1BIPPR}NN9CI7.png differ
diff --git a/resources/panel/images/ARANK.png b/resources/panel/images/ARANK.png
new file mode 100644
index 0000000..4b4111f
Binary files /dev/null and b/resources/panel/images/ARANK.png differ
diff --git a/resources/panel/images/BRANK.png b/resources/panel/images/BRANK.png
new file mode 100644
index 0000000..81db7a1
Binary files /dev/null and b/resources/panel/images/BRANK.png differ
diff --git a/resources/panel/images/SRANK.png b/resources/panel/images/SRANK.png
new file mode 100644
index 0000000..39a1c89
Binary files /dev/null and b/resources/panel/images/SRANK.png differ
diff --git a/resources/panel/images/bg1.jpg b/resources/panel/images/bg1.jpg
new file mode 100644
index 0000000..eccc9da
Binary files /dev/null and b/resources/panel/images/bg1.jpg differ
diff --git a/resources/panel/images/refresh_char_bg.png b/resources/panel/images/refresh_char_bg.png
new file mode 100644
index 0000000..8163c13
Binary files /dev/null and b/resources/panel/images/refresh_char_bg.png differ
diff --git a/resources/panel/images/refresh_title.png b/resources/panel/images/refresh_title.png
new file mode 100644
index 0000000..3883003
Binary files /dev/null and b/resources/panel/images/refresh_title.png differ
diff --git a/resources/panel/panel.js b/resources/panel/panel.js
new file mode 100644
index 0000000..75127b4
--- /dev/null
+++ b/resources/panel/panel.js
@@ -0,0 +1,106 @@
+import { ZZZPlugin } from '../lib/plugin.js'
+import render from '../lib/render.js'
+import { rulePrefix } from '../lib/common.js'
+import { getPanelList, refreshPanel, getPanel } from '../lib/avatar.js'
+import settings from '../lib/settings.js'
+import _ from 'lodash'
+
+export class Panel extends ZZZPlugin {
+  constructor() {
+    super({
+      name: '[ZZZ-Plugin]Panel',
+      dsc: 'zzzpanel',
+      event: 'message',
+      priority: _.get(settings.getConfig('priority'), 'panel', 70),
+      rule: [
+        {
+          reg: `${rulePrefix}((刷新|更新)面板|面板(刷新|更新))$`,
+          fnc: 'refreshPanel',
+        },
+        {
+          reg: `${rulePrefix}面板(列表)?$`,
+          fnc: 'getCharPanelList',
+        },
+        {
+          reg: `${rulePrefix}(.+)面板$`,
+          fnc: 'getCharPanel',
+        },
+      ],
+    })
+  }
+  async refreshPanel() {
+    const uid = await this.getUID()
+    if (!uid) return
+    const lastQueryTime = await redis.get(`ZZZ:PANEL:${uid}:LASTTIME`)
+    const panelSettings = settings.getConfig('panel')
+    const coldTime = _.get(panelSettings, 'interval', 300)
+    if (lastQueryTime && Date.now() - lastQueryTime < 1000 * coldTime) {
+      await this.reply(`${coldTime}秒内只能刷新一次，请稍后再试`)
+      return
+    }
+    const { api, deviceFp } = await this.getAPI()
+    if (!api) return false
+    await redis.set(`ZZZ:PANEL:${uid}:LASTTIME`, Date.now())
+    await this.reply('正在刷新面板列表，请稍候...')
+    await this.getPlayerInfo()
+    const result = await refreshPanel(this.e, api, uid, deviceFp)
+    if (!result) {
+      await this.reply('面板列表刷新失败，请稍后再试')
+      return
+    }
+    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 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 + '、'
+    }
+    str = str.slice(0, -1)
+    await this.reply(str)
+    // const finalData = {
+    //   list: noteData,
+    // };
+    // await render(this.e, 'panel/list.html', finalData);
+  }
+  async getCharPanel() {
+    const uid = await this.getUID()
+    if (!uid) return false
+    const reg = new RegExp(`${rulePrefix}(.+)面板$`)
+    const name = this.e.msg.match(reg)[4]
+    if (['刷新', '更新'].includes(name)) return this.getCharPanelList()
+    const data = getPanel(uid, name)
+    if (!data) {
+      await this.reply(`未找到角色${name}的面板信息`)
+      return
+    }
+    const timer = setTimeout(() => {
+      if (this?.reply) {
+        this.reply('查询成功，正在下载图片资源，请稍候。')
+      }
+    }, 3000)
+    await data.get_detail_assets()
+    clearTimeout(timer)
+    const finalData = {
+      charData: data,
+    }
+    await render(this.e, 'panel/card.html', finalData)
+  }
+}
diff --git a/resources/panel/refresh.css b/resources/panel/refresh.css
new file mode 100644
index 0000000..eb7dfa9
--- /dev/null
+++ b/resources/panel/refresh.css
@@ -0,0 +1,129 @@
+.container {
+  background-image: url("./images/bg1.jpg");
+  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;
+}
+.panel > .list {
+  border: 0.1em solid rgb(87, 80, 102);
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0 1.5em 1.5em;
+  border-radius: 0.5em;
+  min-height: 3em;
+  min-width: 5em;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  padding: 0.4em 0.6em 0.5em;
+}
+.panel > .list .item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 20%;
+  align-items: center;
+  padding: 0.2em 0em;
+}
+.panel > .list .item .icon {
+  background-image: url("./images/@~8B@XO~)U1BIPPR}NN9CI7.png");
+  background-size: contain;
+  margin-bottom: 0.2em;
+  position: relative;
+}
+.panel > .list .item .icon img.streng {
+  width: 3.5em;
+  height: 3.5em;
+  border-radius: 50%;
+  padding: 0.25em 0.25em 0.3em 0.25em;
+}
+.panel > .list .item .icon .level {
+  position: absolute;
+  right: 1.25em;
+  bottom: -0.1em;
+  border-radius: 50%;
+  color: white;
+  width: 1em;
+  height: 1em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.05em;
+  background-color: rgb(117, 117, 117);
+}
+.panel > .list .item .icon .level span {
+  font-size: 0.7em;
+}
+.panel > .list .item .icon .level.r1 {
+  background-color: rgb(58, 116, 43);
+}
+.panel > .list .item .icon .level.r2 {
+  background-color: rgb(61, 132, 214);
+}
+.panel > .list .item .icon .level.r3 {
+  background-color: rgb(223, 118, 118);
+}
+.panel > .list .item .icon .level.r4 {
+  background-color: rgb(51, 54, 161);
+}
+.panel > .list .item .icon .level.r5 {
+  background-color: rgb(102, 127, 19);
+}
+.panel > .list .item .icon .level.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;
+  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);
+}
+.panel > .list .item .name span {
+  font-size: 0.7em;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}/*# sourceMappingURL=refresh.css.map */
\ No newline at end of file
diff --git a/resources/panel/refresh.html b/resources/panel/refresh.html
new file mode 100644
index 0000000..6db9c84
--- /dev/null
+++ b/resources/panel/refresh.html
@@ -0,0 +1,32 @@
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" href="{{@sys.currentPath}}/refresh.css">
+{{/block}}
+
+{{block 'main'}}
+<div class="panel">
+  <div class="icon">
+    <div class="img"></div>
+  </div>
+  <div class="info">你好，已为 UID{{uid}} 成功更新 {{newChar}} 个角色！</div>
+  <div class="list">
+    {{each list item}}
+    <div class="item">
+      <div class="icon">
+        <img class="streng" src="{{item.square_icon}}" alt="" />
+        <div class="level r{{item.rank}}">
+          <span> {{item.rank}} </span>
+        </div>
+      </div>
+      <div class="name">
+        <div class="img {{item.rarity}}"></div>
+        <span>{{item.name_mi18n}}</span>
+      </div>
+    </div>
+    {{/each}}
+  </div>
+</div>
+{{/block}}
+
+</html>
\ No newline at end of file
diff --git a/resources/panel/refresh.scss b/resources/panel/refresh.scss
new file mode 100644
index 0000000..398e7c2
--- /dev/null
+++ b/resources/panel/refresh.scss
@@ -0,0 +1,137 @@
+.container {
+  background-image: url('./images/bg1.jpg');
+  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;
+  }
+  & > .list {
+    border: 0.1em solid rgba(87, 80, 102);
+    background-color: rgba(0, 0, 0, 0.5);
+    margin: 0 1.5em 1.5em;
+    border-radius: 0.5em;
+    min-height: 3em;
+    min-width: 5em;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    padding: 0.4em 0.6em 0.5em;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 20%;
+      align-items: center;
+      padding: 0.2em 0em;
+      .icon {
+        background-image: url('./images/@~8B@XO~\)U1BIPPR}NN9CI7.png');
+        background-size: contain;
+        margin-bottom: 0.2em;
+        position: relative;
+        img.streng {
+          width: 3.5em;
+          height: 3.5em;
+          border-radius: 50%;
+          padding: 0.25em 0.25em 0.3em 0.25em;
+        }
+        .level {
+          position: absolute;
+          // right: 0.2em;
+          // bottom: 0.25em;
+          right: 1.25em;
+          bottom: -0.1em;
+          border-radius: 50%;
+          color: white;
+          width: 1em;
+          height: 1em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 0.05em;
+          background-color: rgb(117, 117, 117);
+          span {
+            font-size: 0.7em;
+          }
+          &.r1 {
+            background-color: rgb(58, 116, 43);
+          }
+          &.r2 {
+            background-color: rgb(61, 132, 214);
+          }
+          &.r3 {
+            background-color: rgb(223, 118, 118);
+          }
+          &.r4 {
+            background-color: rgb(51, 54, 161);
+          }
+          &.r5 {
+            background-color: rgb(102, 127, 19);
+          }
+          &.r6 {
+            background-color: rgb(218, 48, 32);
+          }
+        }
+      }
+      .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;
+        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);
+          }
+        }
+
+        span {
+          font-size: 0.7em;
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}