perf: 更改图片渲染方式

README.md

@@ -6,7 +6,7 @@
 
 <br/>
 
-![GitHub release (latest by date)](https://img.shields.io/github/v/release/XasYer/YePanel)
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/XasYer/steam-plugin)
 ![GitHub stars](https://img.shields.io/github/stars/XasYer/steam-plugin?style=social)
 ![GitHub forks](https://img.shields.io/github/forks/XasYer/steam-plugin?style=social)
 ![GitHub license](https://img.shields.io/github/license/XasYer/steam-plugin)

apps/achievement.js

@@ -110,7 +110,7 @@ export const rule = {
           }
         )
       }
-      const img = await Render.simpleRender('inventory/index', { data })
+      const img = await Render.render('inventory/index', { data })
       if (img) {
         await e.reply(img)
       } else {

apps/discounts.js

@@ -58,7 +58,7 @@ export const rule = {
         }
         data.push(key)
       }
-      const img = await Render.simpleRender('inventory/index', { data })
+      const img = await Render.render('inventory/index', { data })
       if (img) {
         await e.reply(img)
       } else {

apps/inventory.js

@@ -91,7 +91,7 @@ export const rule = {
         })
         screenshotOptions.desc = `总游戏时长：${getTime(playtimeForever)} / 最近两周游戏时长：${getTime(playtime2weeks)}`
       }
-      const img = await Render.simpleRender('inventory/index', {
+      const img = await Render.render('inventory/index', {
         data: [screenshotOptions]
       })
       if (img) {

apps/search.js

@@ -41,7 +41,7 @@ export const rule = {
         games,
         column: 2
       }
-      const img = await Render.simpleRender('inventory/index', { data: [screenshotOptions] })
+      const img = await Render.render('inventory/index', { data: [screenshotOptions] })
       if (img) {
         await e.reply(img)
       } else {

components/Render.js

@@ -22,6 +22,9 @@ const Render = {
         scale: scale(params.scale || 1),
         copyright: params.copyright || `Created By <span class="version"> ${Version.BotName} v${Version.BotVersion} </span> & <span class="version"> ${Version.pluginName} v${Version.pluginVersion} </span>`
       },
+      pageGotoParams: {
+        waitUntil: 'networkidle0' // +0.5s
+      },
       ...params
     }
     return await puppeteer.screenshot(path, data)

resources/common/layout/default.html

@@ -8,7 +8,7 @@
     <link rel="preload" href="{{pluResPath}}common/font/NZBZ.woff" as="font" type="font/woff">
     <link rel="preload" href="{{pluResPath}}common/font/tttgbnumber.woff" as="font" type="font/woff">
     <link rel="stylesheet" type="text/css" href="{{pluResPath}}common/common.css"/>
-    <title>miao-plugin</title>
+    <title>steam-plugin</title>
     {{block 'css'}}
     {{/block}}
   </head>

resources/inventory/index.css

@@ -0,0 +1,112 @@
+#container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 900px;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.games {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    width: 890px;
+}
+
+.games>div {
+    box-sizing: border-box;
+    display: flex;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.column-2 {
+    width: 440px;
+}
+
+.column-3 {
+    width: 290px;
+}
+
+.header-img>img {
+    height: 60px;
+    border-radius: 5px;
+}
+
+.square {
+    width: 60px;
+}
+
+.rectangle {
+    width: 120px;
+}
+
+.game-info {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 60px;
+}
+
+.column-2-info {
+    width: 200px;
+    margin-right: 10px;
+}
+
+.column-3-info {
+    width: 150px;
+}
+
+.column-full {
+    width: 350px;
+}
+
+.column-full-noimg {
+    width: 410px;
+}
+
+.overflow {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.game-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+}
+
+.game-appid {
+    font-size: 16px;
+    color: #666;
+}
+
+.game-time {
+    font-size: 14px;
+    color: #999;
+}
+
+.discount-percent {
+    background-color: #beee11;
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 12px;
+    color: #333;
+}
+
+.none {
+    display: none;
+}
+
+.through {
+    text-decoration: line-through;
+    color: #999;
+}