💄 style: improve images display in chat messages #3475
Conversation
1.一行最多3个图片。 2.列的个数以第一行的个数为准。 3.多图时，最大宽度比率计算公式为：scale = firstRow.length * (firstRow.length / items.length)，避免多图时占用窗口太大。
|
@vual is attempting to deploy a commit to the LobeHub Pro Team on Vercel. A member of the Team first needs to authorize it. |
|
👍 @vual Thank you for raising your pull request and contributing to our Community |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3475 +/- ##
========================================
Coverage 92.18% 92.18%
========================================
Files 464 464
Lines 31862 31862
Branches 3022 2165 -857
========================================
Hits 29371 29371
Misses 2491 2491
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
这个方案感觉不太好，如果是 4 个话应该不会变成4宫格吧？ 之前做图片展示逻辑是参考的 discord ，感觉目前的方案是一个比较优的展示方案了。比如5个的场景我觉得还是现在的方案能撑满 体验好。 |
This plan doesn't feel very good. If there are 4, it shouldn't become a 4-square grid, right? The previous picture display logic was based on discord. I feel that the current solution is a better display solution. For example, for 5 scenes, I think the current solution can fully support it and provide a good experience. |
3个以内是一排，4个就你原来的逻辑，4宫格 |
3 or less is a row, 4 is your original logic, 4 squares |
|
如果按照原来的逻辑，个数是3的倍数的时候，比如6个或9个时，图片就会变成600宽，并且是2行或3行，那图片铺满屏幕了。 |
If according to the original logic, when the number is a multiple of 3, such as 6 or 9, the picture will become 600 wide and 2 or 3 lines long, then the picture will fill the screen. |
|
@vual 能不能看下 8、9 、10 个的时候样子？ 根据你现在的截图，我感觉 5 个的时候并没有比原来好，但 7 个的时候可能是你现在的会好一点。 |
@vual Can you see what it looks like at 8, 9, and 10? Based on your current screenshots, I feel that the 5-bit version is no better than the original one, but the 7-bit version may be a little better than what you have now. |
arvinxx
changed the title
大于3个时，就按一行3个显示。 |
When there are more than 3, they will be displayed as 3 in a row. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
dosubot
bot
added
the
size:S
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
修改聊天界面多图展示效果。
1.一行最多3个图片。
2.列的个数以第一行的个数为准。
3.多图时，最大宽度比率计算公式为：scale = firstRow.length * (firstRow.length / items.length)，避免多图时占用窗口太大。
修改前：
修改后：
📝 补充信息 | Additional Information