From 16cca6d106656c3579fad3fde3bec6ff00f2c4ac Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Tue, 6 Oct 2026 18:26:48 +0000
Subject: [PATCH] =?UTF-8?q?fix(desktop):=20=E5=AE=9E=E4=BE=8B=E8=A1=8C?=
 =?UTF-8?q?=E4=B8=8E=E4=BE=A7=E6=A0=8F=E5=AF=BC=E8=88=AA=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=90=8C=E4=B8=80=E5=A5=97=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

类型图标放到名称前面，行高、间距和字色与导航项一致，状态灯留在行尾。

Co-authored-by: Shiroha <Tanya7z@users.noreply.github.com>
---
 .changeset/desktop-sidebar-status-right.md    |  2 +-
 .../src/renderer/components/Sidebar.tsx       | 17 +++++---
 .../desktop/src/renderer/styles/shell.css     | 41 ++++++-------------
 3 files changed, 25 insertions(+), 35 deletions(-)

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 }) {
                 >
                   <button
                     type="button"
-                    className="sb-instance-main"
+                    className={cx("sb-item", "sb-instance-main", active && "active")}
                     aria-label={profile.name}
                     aria-current={active ? "true" : undefined}
                     onClick={() => setCurrent(profile.id)}
                   >
-                    <span className="truncate">{profile.name}</span>
-                    <Icon name={profile.kind === "ssh" ? "server" : "monitor"} size={14} className="sb-instance-kind" />
+                    <Icon
+                      name={profile.kind === "ssh" ? "server" : "monitor"}
+                      size={20}
+                      weight={active ? "fill" : "duotone"}
+                      className="sb-instance-kind"
+                    />
+                    <span className="sb-item-label truncate">{profile.name}</span>
                     <StatusDot tone={state.tone} pulse={state.tone === "info"} />
                   </button>
                 </Tooltip>
@@ -76,11 +81,11 @@ function InstanceList({ collapsed }: { collapsed: boolean }) {
         <Tooltip content={collapsed ? "添加第一个实例" : undefined} side="right">
           <button
             type="button"
-            className="sb-instance-empty"
+            className="sb-item sb-instance-empty"
             aria-label="添加第一个实例"
             onClick={() => openProfileDialog(null)}
           >
-            <Icon name="plus" size={14} />
+            <Icon name="plus" size={20} weight="duotone" />
             <span className="sb-item-label">添加第一个实例</span>
           </button>
         </Tooltip>
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 {