diff --git a/.changeset/desktop-sidebar-status-right.md b/.changeset/desktop-sidebar-status-right.md index e3642b40..13e52a26 100644 --- a/.changeset/desktop-sidebar-status-right.md +++ b/.changeset/desktop-sidebar-status-right.md @@ -2,4 +2,4 @@ "@sfmc-bds/desktop": patch --- -实例状态灯移到侧栏右侧,实例名称与侧栏其余文字左对齐。 +实例行与侧栏导航对齐:类型图标在名称前,状态灯在行尾。 diff --git a/packages/desktop/src/renderer/components/Sidebar.tsx b/packages/desktop/src/renderer/components/Sidebar.tsx index 5abdb364..30cfb53c 100644 --- a/packages/desktop/src/renderer/components/Sidebar.tsx +++ b/packages/desktop/src/renderer/components/Sidebar.tsx @@ -20,7 +20,7 @@ export function profileSubtitle(profile: InstanceProfile): string { : `${profile.username ? `${profile.username}@` : ""}${profile.host}${profile.port && profile.port !== 22 ? `:${profile.port}` : ""} ${profile.os === "windows" ? "Windows" : "Linux"}`; } -/** 实例列表:每行一个实例,名称在左、状态点在右。当前实例高亮,悬停显示设置按钮 */ +/** 实例列表:图标与名称对齐导航项,状态点在行尾。当前实例高亮,悬停显示设置按钮 */ function InstanceList({ collapsed }: { collapsed: boolean }) { const { profiles, current, setCurrent, models, openProfileDialog } = useDesktop(); return ( @@ -50,13 +50,18 @@ function InstanceList({ collapsed }: { collapsed: boolean }) { > @@ -76,11 +81,11 @@ function InstanceList({ collapsed }: { collapsed: boolean }) { diff --git a/packages/desktop/src/renderer/styles/shell.css b/packages/desktop/src/renderer/styles/shell.css index d02c1bd3..0cf36d44 100644 --- a/packages/desktop/src/renderer/styles/shell.css +++ b/packages/desktop/src/renderer/styles/shell.css @@ -134,50 +134,38 @@ } .sb-instance { + position: relative; display: flex; align-items: center; - border-radius: var(--r-12); -} - -.sb-instance:hover, -.sb-instance.active { - background: var(--c-fill); } .sb-instance-main { - display: flex; - align-items: center; - gap: 8px; flex: 1; min-width: 0; - height: 32px; - padding: 0 8px; - text-align: left; -} - -.sb-instance-kind { - margin-left: auto; - color: var(--c-text-4); } .sb-instance-edit { + position: absolute; + right: 4px; + top: 50%; + transform: translateY(-50%); opacity: 0; - margin-right: 2px; + pointer-events: none; } .sb-instance:hover .sb-instance-edit, .sb-instance.active .sb-instance-edit, .sb-instance-edit:focus-visible { opacity: 1; + pointer-events: auto; } -.sb-instance-empty { - display: flex; - align-items: center; - gap: 8px; - height: 32px; - padding: 0 8px; - border-radius: var(--r-12); +.sidebar-open .sb-instance:hover .sb-instance-main, +.sidebar-open .sb-instance.active .sb-instance-main { + padding-right: 36px; +} + +.sb-item.sb-instance-empty { color: var(--c-text-3); } @@ -311,9 +299,6 @@ .sidebar-collapsed .sb-instance-kind { margin-left: 0; - width: 20px; - height: 20px; - color: var(--c-text-2); } .sidebar-collapsed .sb-instance-main > .status-dot {