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 {