From 550685183b7b948a8b74cfa36454ee9384b35db0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=8F=B6?= <1936472877@qq.com>
Date: Thu, 21 Nov 2024 17:32:45 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=9B=B4=E6=94=B9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            |   2 +-
 apps/achievement.js                  |   2 +-
 apps/discounts.js                    |   2 +-
 apps/inventory.js                    |   2 +-
 apps/search.js                       |   2 +-
 components/Render.js                 |   3 +
 resources/common/layout/default.html |   2 +-
 resources/inventory/index.css        | 112 ++++++++++++++
 resources/inventory/index.html       | 218 ++++++---------------------
 9 files changed, 170 insertions(+), 175 deletions(-)
 create mode 100644 resources/inventory/index.css

diff --git a/README.md b/README.md
index 2de032d..856dfd5 100644
--- a/README.md
+++ b/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)
diff --git a/apps/achievement.js b/apps/achievement.js
index e2fb3d3..5047151 100644
--- a/apps/achievement.js
+++ b/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 {
diff --git a/apps/discounts.js b/apps/discounts.js
index 0d993b9..a2a1c55 100644
--- a/apps/discounts.js
+++ b/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 {
diff --git a/apps/inventory.js b/apps/inventory.js
index 68972ab..8d7f1cb 100644
--- a/apps/inventory.js
+++ b/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) {
diff --git a/apps/search.js b/apps/search.js
index 0cb5dde..bf9d8b9 100644
--- a/apps/search.js
+++ b/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 {
diff --git a/components/Render.js b/components/Render.js
index 8341fe8..5cbfc3e 100644
--- a/components/Render.js
+++ b/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)
diff --git a/resources/common/layout/default.html b/resources/common/layout/default.html
index 1ae5069..7e212c9 100644
--- a/resources/common/layout/default.html
+++ b/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>
diff --git a/resources/inventory/index.css b/resources/inventory/index.css
new file mode 100644
index 0000000..a9780a4
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/resources/inventory/index.html b/resources/inventory/index.html
index ce6fe30..929ae41 100644
--- a/resources/inventory/index.html
+++ b/resources/inventory/index.html
@@ -1,177 +1,57 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>inventory</title>
-    <style>
-        #container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: 900px;
-        }
-
-        .header {
-            text-align: center;
-        }
-
-        .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: 220px;
-            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;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="container">
-        {{each data item}}
-        <div class="header">
-            <h2>{{item.title}}</h2>
-            <h4>
-                {{item.desc}}
-            </h4>
-        </div>
-        <div class="games">
-            {{each item.games i}}
-            <div class="column-{{item.column}}">
-                <div class="header-img">
-                    {{if i.header_image}}
-                    <img src="{{i.header_image}}" class="{{i.header_image_class || 'rectangle'}}">
-                    {{else if !i.noImg}}
-                    <img
-                        src="https://steamcdn-a.akamaihd.net/steam/{{i.header_image_type || 'apps'}}/{{i.appid}}/header.jpg">
-                    {{/if}}
+{{extend defaultLayout}}
+
+{{block 'css'}}
+<link rel="stylesheet" type="text/css" href="{{pluResPath}}inventory/index.css" />
+{{/block}}
+
+    {{block 'main'}}
+    {{each data item}}
+    <div class="header">
+        <h2>{{item.title}}</h2>
+        <h4 class="header-desc">
+            {{item.desc}}
+        </h4>
+    </div>
+    <div class="games">
+        {{each item.games i}}
+        <div class="column-{{item.column}}">
+            <div class="header-img">
+                {{if i.header_image}}
+                <img src="{{i.header_image}}" class="{{i.header_image_class || 'rectangle'}}">
+                {{else if !i.noImg}}
+                <img
+                    src="https://steamcdn-a.akamaihd.net/steam/{{i.header_image_type || 'apps'}}/{{i.appid}}/header.jpg">
+                {{/if}}
+            </div>
+            <div
+                class="game-info overflow column-{{item.column}}-info {{(!i.price && item.column === 2 ) ? `column-full${i.noImg ? '-noimg' : ''}` : '' }}">
+                <div class="game-title">
+                    {{i.name || ''}}
                 </div>
-                <div
-                    class="game-info overflow column-{{item.column}}-info {{(!i.price && item.column === 2 ) ? `column-full${i.noImg ? '-noimg' : ''}` : '' }}">
-                    <div class="game-title">
-                        {{i.name || ''}}
-                    </div>
-                    <div class="game-appid">
-                        {{i.appid || ''}}
-                    </div>
-                    <div class="game-time">
-                        {{i.desc || ''}}
-                    </div>
+                <div class="game-appid">
+                    {{i.appid || ''}}
                 </div>
-                {{if i.price}}
-                <div class="overflow">
-                    <div class="{{i.price.discount ? 'through' : ''}}">
-                        {{i.price.original || ''}}
-                    </div>
-                    {{if i.price.discount}}
-                    <div class="discount-percent">
-                        - {{i.price.discount}}%
-                    </div>
-                    <div>
-                        {{i.price.current}}
-                    </div>
-                    {{/if}}
+                <div class="game-time">
+                    {{i.desc || ''}}
+                </div>
+            </div>
+            {{if i.price}}
+            <div class="overflow">
+                <div class="{{i.price.discount ? 'through' : ''}}">
+                    {{i.price.original || ''}}
+                </div>
+                {{if i.price.discount}}
+                <div class="discount-percent">
+                    - {{i.price.discount}}%
+                </div>
+                <div>
+                    {{i.price.current}}
                 </div>
                 {{/if}}
             </div>
-            {{/each}}
+            {{/if}}
         </div>
         {{/each}}
     </div>
-</body>
-
-</html>
\ No newline at end of file
+    {{/each}}
+    {{/block}}
\ No newline at end of file