From ce68d52eae8c18621d07f74b398f802fb8824608 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=8F=B6?= <1936472877@qq.com>
Date: Sun, 24 Nov 2024 21:40:01 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20steam=E8=AE=BE=E7=BD=AE=E6=AF=8F?=
 =?UTF-8?q?=E8=A1=8C=E4=B8=AA=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/achievement.js              | 12 ++++++------
 apps/discounts.js                |  2 +-
 apps/inventory.js                |  6 +++---
 apps/push.js                     |  6 +++---
 apps/search.js                   |  2 +-
 components/Render.js             | 11 ++++++++++-
 config/default_config/other.yaml |  3 +++
 models/setting/index.js          |  9 +++++++++
 models/task/index.js             |  4 ++--
 resources/inventory/index.css    | 32 +++++++++++++++++---------------
 resources/inventory/index.html   | 23 ++++++++++++++---------
 11 files changed, 69 insertions(+), 41 deletions(-)

diff --git a/apps/achievement.js b/apps/achievement.js
index 8c3e873..a733b29 100644
--- a/apps/achievement.js
+++ b/apps/achievement.js
@@ -51,7 +51,7 @@ export const rule = {
             name: achievementsByGame.gameName,
             appid
           }],
-          column: 2
+          size: 'large'
         }
       ]
       if (regRet[1] === '成就') {
@@ -80,13 +80,13 @@ export const rule = {
             title: '已完成成就',
             desc: `共${completeAchievements.length}个`,
             games: completeAchievements,
-            column: 2
+            size: 'large'
           },
           {
             title: '未完成成就',
             desc: `共${unCompleteAchievements.length}个`,
             games: unCompleteAchievements,
-            column: 2
+            size: 'large'
           }
         )
       } else if (regRet[1] === '统计') {
@@ -112,7 +112,7 @@ export const rule = {
             title: '已完成统计',
             desc: `共${completeStats.length}个`,
             games: completeStats,
-            column: 2
+            size: 'large'
           }
         )
       }
@@ -149,7 +149,7 @@ export const rule = {
             name: achievementsByGame.gameName,
             appid
           }],
-          column: 2
+          size: 'large'
         }
       ]
       const games = []
@@ -171,7 +171,7 @@ export const rule = {
         title: '全球成就统计',
         desc: `共${games.length}个`,
         games: _.orderBy(games, 'percent', 'desc'),
-        column: 2
+        size: 'large'
       })
       const img = await Render.render('inventory/index', { data })
       if (img) {
diff --git a/apps/discounts.js b/apps/discounts.js
index c420cfc..ae3cb55 100644
--- a/apps/discounts.js
+++ b/apps/discounts.js
@@ -35,7 +35,7 @@ export const rule = {
       for (const item of items) {
         const key = {
           title: item.title,
-          column: 2,
+          size: 'large',
           games: []
         }
         for (const i of res[item.key].items) {
diff --git a/apps/inventory.js b/apps/inventory.js
index 137d61d..35ae97b 100644
--- a/apps/inventory.js
+++ b/apps/inventory.js
@@ -25,7 +25,7 @@ export const rule = {
       const screenshotOptions = {
         title: '',
         games: [],
-        column: 3,
+        size: 'small',
         desc: ''
       }
       if (e.msg.includes('近')) {
@@ -73,7 +73,7 @@ export const rule = {
         }
         screenshotOptions.title = `${nickname} 愿望单共有 ${wishlist.length} 个游戏`
         screenshotOptions.games = _.orderBy(wishlist, 'date_added', 'desc')
-        screenshotOptions.column = 2
+        screenshotOptions.size = 'large'
       } else {
         const games = await api.IPlayerService.GetOwnedGames(steamId)
         if (!games.length) {
@@ -83,7 +83,7 @@ export const rule = {
         screenshotOptions.games = _.orderBy(games, 'playtime_forever', 'desc')
         screenshotOptions.title = `${nickname} 库存共有 ${games.length} 个游戏`
       }
-      if (screenshotOptions.column === 3) {
+      if (screenshotOptions.size === 'small') {
         let playtimeForever = 0
         let playtime2weeks = 0
         screenshotOptions.games.map(i => {
diff --git a/apps/push.js b/apps/push.js
index ba18238..d3323fa 100644
--- a/apps/push.js
+++ b/apps/push.js
@@ -85,7 +85,7 @@ export const rule = {
         title: `群${e.group_id}推送列表`,
         desc: `共${list.length}个推送用户`,
         games: userList,
-        column: 3
+        size: 'small'
       }]
       const img = await Render.render('inventory/index', { data })
       if (img) {
@@ -149,13 +149,13 @@ export const rule = {
           title: '正在玩游戏的群友',
           desc: `共${playing.length}个`,
           games: playing,
-          column: 3
+          size: 'small'
         },
         {
           title: '没有在玩游戏的群友',
           desc: `共${notPlaying.length}个`,
           games: notPlaying,
-          column: 3
+          size: 'small'
         }
       ]
       const img = await Render.render('inventory/index', { data })
diff --git a/apps/search.js b/apps/search.js
index 8491511..4a07077 100644
--- a/apps/search.js
+++ b/apps/search.js
@@ -39,7 +39,7 @@ export const rule = {
       const screenshotOptions = {
         title: `${name} 搜索结果`,
         games,
-        column: 2
+        size: 'large'
       }
       const img = await Render.render('inventory/index', { data: [screenshotOptions] })
       if (img) {
diff --git a/components/Render.js b/components/Render.js
index 773f4a6..db48386 100644
--- a/components/Render.js
+++ b/components/Render.js
@@ -25,9 +25,18 @@ const Render = {
       pageGotoParams: {
         waitUntil: 'networkidle0' // +0.5s
       },
-      hiddenLength: Config.other.hiddenLength,
       ...params
     }
+    if (path === 'inventory/index') {
+      data.hiddenLength = Config.other.hiddenLength
+      const minLength = Math.min(
+        Math.max(...params.data.map(i => i.games.length)),
+        Math.max(1, Number(Config.other.itemLength) || 1)
+      )
+      const size = params.data.findIndex(i => i.size === 'large') >= 0 ? 370 : 300
+      const len = minLength === 1 ? (size === 370 ? 1 : 1.4) : minLength
+      data.style = `<style>\n#container,.games{\nwidth: ${len * size}px;\n}\n</style>`
+    }
     return await puppeteer.screenshot(path, data)
   },
   async simpleRender (path, params) {
diff --git a/config/default_config/other.yaml b/config/default_config/other.yaml
index fa83679..9a1eaee 100644
--- a/config/default_config/other.yaml
+++ b/config/default_config/other.yaml
@@ -4,3 +4,6 @@ renderScale: 130
 # 截图时数量达到多少时隐藏剩余项目
 # 比如库存有几千个游戏，截图时只截取游玩最多的前99个，那么后面的游戏就隐藏了
 hiddenLength: 99
+
+# 截图时每行显示的最大数量
+itemLength: 3
diff --git a/models/setting/index.js b/models/setting/index.js
index e6b1c95..c349c96 100644
--- a/models/setting/index.js
+++ b/models/setting/index.js
@@ -158,6 +158,15 @@ export const cfgSchema = {
         def: 99,
         input: (n) => Math.max(1, n * 1 || 99),
         desc: '比如库存等超过设置的长度后会隐藏剩余的游戏, 避免太多而导致截图失败'
+      },
+      itemLength: {
+        title: '每行最多显示数量',
+        key: '每行个数',
+        type: 'number',
+        min: 1,
+        def: 3,
+        input: (n) => Math.max(1, n * 1 || 3),
+        desc: '截图时每行最多显示的数量'
       }
     }
   },
diff --git a/models/task/index.js b/models/task/index.js
index 3050639..5da4a63 100644
--- a/models/task/index.js
+++ b/models/task/index.js
@@ -123,14 +123,14 @@ export function startTimer () {
               data.push({
                 title: '开始玩游戏的群友',
                 games: i.start,
-                column: 2
+                size: 'large'
               })
             }
             if (i.end.length) {
               data.push({
                 title: '结束玩游戏的群友',
                 games: i.end,
-                column: 2
+                size: 'large'
               })
             }
             if (!data.length) {
diff --git a/resources/inventory/index.css b/resources/inventory/index.css
index 9810e82..bbdafbd 100644
--- a/resources/inventory/index.css
+++ b/resources/inventory/index.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 900px;
 }
 
 .header {
@@ -14,7 +13,6 @@
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
-    width: 890px;
 }
 
 .games>div {
@@ -26,11 +24,11 @@
     margin-bottom: 10px;
 }
 
-.column-2 {
-    width: 440px;
+.size-large {
+    width: 360px;
 }
 
-.column-3 {
+.size-small {
     width: 290px;
 }
 
@@ -55,29 +53,33 @@
     height: 60px;
 }
 
-.column-2-info {
-    width: 200px;
+.size-large-info {
+    width: 150px;
     margin-right: 10px;
 }
 
-.column-3-info {
+.size-small-info {
     width: 150px;
 }
 
-.column-2-info-noprice {
-    width: 260px;
+.size-large-info-noprice {
+    width: 210px;
 }
 
-.column-3-info-noprice {
+.size-small-info-noprice {
     width: 200px;
 }
 
-.column-full {
-    width: 350px;
+.size-large-square {
+    width: 270px;
+}
+
+.size-full {
+    width: 300px;
 }
 
-.column-full-noimg {
-    width: 410px;
+.size-full-noimg {
+    width: 360px;
 }
 
 .overflow {
diff --git a/resources/inventory/index.html b/resources/inventory/index.html
index 36add37..e78e176 100644
--- a/resources/inventory/index.html
+++ b/resources/inventory/index.html
@@ -2,35 +2,40 @@
 
 {{block 'css'}}
 <link rel="stylesheet" type="text/css" href="{{pluResPath}}inventory/index.css" />
+{{@ style}}
 {{/block}}
 
 {{block 'main'}}
 {{each data item}}
-<% const isHidden = item.games.length > hiddenLength %>
+<!-- TODO: 放到Render中处理 -->
+<% const isHidden=item.games.length> hiddenLength %>
+
 <div class="header">
     <h2>{{item.title}}</h2>
     <h4 class="header-desc">
         {{item.desc}}
         {{if isHidden}}
-        <br/>
-        <% const len = item.games.length - hiddenLength %>
-        太多辣 ! 已隐藏{{len}}个项目
-        {{/if}}
+        <br />
+        <% const len=item.games.length - hiddenLength %>
+            太多辣 ! 已隐藏{{len}}个项目
+            {{/if}}
     </h4>
 </div>
 <div class="games">
-    <% item.games.length = isHidden ? hiddenLength : item.games.length %>
+<% item.games.length=isHidden ? hiddenLength : item.games.length %>
     {{each item.games i}}
-    <div class="column-{{item.column}}">
+    <div class="size-{{item.size}}">
         <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">
+            <img
+                src="https://steamcdn-a.akamaihd.net/steam/{{i.header_image_type || 'apps'}}/{{i.appid}}/header.jpg">
             {{/if}}
         </div>
+        <!-- TODO: 待重构 屎一样 -->
         <div
-            class="game-info overflow column-{{item.column}}-info{{!i.price? '-noprice' :''}} {{(!i.price && item.column === 2 ) ? `column-full${i.noImg ? '-noimg' : ''}` : '' }}">
+            class="game-info overflow size-{{item.size}}-info{{!i.price? '-noprice' :''}} {{(!i.price && item.size === 'large' ) ? `size-full${i.noImg ? '-noimg' : ''}` : '' }} {{(i.header_image_class === 'square' && item.size === 'large' && !i.price) ? 'size-large-square' : ''}}">
             <div class="game-title">
                 {{i.name || ''}}
             </div>