feat(ui): 移动端适配 #88
Merged
feat(ui): 移动端适配 #88
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
主要变化包括： - 实现了响应式主布局，带有可折叠的汉堡菜单，用于移动导航。 - 调整了仪表板、密钥管理和信息卡中的网格布局，使其在较小的屏幕上垂直堆叠内容。 - 使图表和数据表可水平滚动或使其元素换行，以防止溢出并保持可用性。 - 添加了 `@vueuse/core` 库，用于动态检测屏幕尺寸以实现响应式逻辑。 - 改进了各种组件（如按钮、字体和间距）的样式，以改善移动设备上的视觉层次结构。
Owner
|
非常好的PR，正式目前所需的移动端适配！！！ 已经在本地进行测试，没有大的问题，提些意见：
当然，目前PR的代码对于gpt-load已经非常有价值了，如果您没有时间进行这些细节优化，就等PR合并之后，下个版本我再进行细节调整。 非常感谢你的贡献！ |
Owner
|
另外，欢迎进TG群交流 https://t.me/+GHpy5SwEllg3MTUx |
Contributor
Author
re 优化移动版本尽量不影响现有的PC版本ok re PC版秘钥展示目前变成2列，个人感觉太长了，还是保持之前的3列合适点。已调整： re PC版本日志的筛选栏，由之前的2行，变为了3行，并且展示起来感觉比较乱。已调整： re 移动端编辑分组的表单好像还没做适配。已适配： re 移动端，footer展示补全，只有一个项目名称。目前我改成这样了： |
本次提交主要对上一个移动端适配commit进行了优化和问题修复。 - **PC端布局修复**: - 修复了密钥表格在PC端显示为2列的问题，恢复为3列布局，优化了视觉效果。 - 重新设计了日志页面的筛选器布局，从多行改为响应式网格布局，解决了PC端筛选栏显示混乱的问题。 - **移动端适配优化**: - 完善了页脚（Footer）在移动端的显示，确保所有链接和信息都能完整展示。 - 对编辑分组的表单进行了移动端适配，优化了表单项的排列方式，提升了在小屏幕上的可用性。 - **代码优化**: - 在分组表单中为配置项增加了提示（Tooltip），增强了用户体验。 - 统一和优化了部分组件的样式，使其在不同设备上表现更一致。
tbphp
approved these changes
Jul 31, 2025
Owner
|
This PR got merged and will be out in version v1.0.18. Big thanks for your contribution! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
主要变化包括：
@vueuse/core库，用于动态检测屏幕尺寸以实现响应式逻辑。关联 Issue / Related Issue
Closes #
变更内容 / Change Content
自查清单 / Checklist