fix(vault): 限制主机列表行最大宽度，避免全屏时右侧空白误触 - #2860
Open
ice616 wants to merge 1 commit into
Open
Conversation
树形视图和列表视图的行容器此前会撑满可用宽度，全屏下右侧大片 空白仍会响应整行点击，容易误触打开/选中主机。为分组行、主机行 （树形）及置顶/最近/分组/常规主机卡片（列表模式）统一加上 max-w-[480px]，网格视图不受影响。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
窗口全屏或容器较宽时，主机列表（树形视图 / 列表视图）的每一行会撑满可用宽度，导致主机名后面出现大片空白，这块空白仍绑定了整行的点击事件（打开/选中主机），非常容易误触。
Type of Change
Related Issue (optional)
N/A
Changes Made
components/vault/VaultTreeRow.tsx：VaultTreeGroupRow（分组行）和VaultTreeItemRow（主机行）最外层容器加上max-w-[480px]。components/vault/VaultHostListSection.tsx：列表模式（viewMode === "list"）下的置顶主机、最近主机、分组、常规主机（含分组内）共 5 处卡片容器加上max-w-[480px]；网格（grid）视图分支未改动。选中态背景、hover 背景均绘制在行容器自身，收窄宽度后会跟随收窄，不会出现背景与内容宽度不一致的问题。虚拟化列表的绝对定位父层未改动，仅调整内层实际渲染行的最大宽度。
Screenshots / Demo
该应用依赖 Electron 的
window.electronIPC 桥接获取真实主机数据，无法在独立浏览器预览环境中渲染验证（已尝试，页面为空白但无报错，属预期的环境限制）。改动为纯 Tailwind className 调整，无 JS 逻辑变化，已通过类型检查与 lint。建议在npm run dev启动的 Electron 环境中人工验证全屏下的实际效果。Testing
npm run dev)npm run lint)npm test)npm run generate:capability-tools)Checklist