diff --git a/ui/src/components/session/SessionPanel.vue b/ui/src/components/session/SessionPanel.vue index 8c427a4..44e011f 100644 --- a/ui/src/components/session/SessionPanel.vue +++ b/ui/src/components/session/SessionPanel.vue @@ -139,14 +139,6 @@ const doDelete = async () => { - - @@ -196,22 +188,6 @@ const doDelete = async () => { flex-direction: column; gap: 10px; } -.panel-settings-btn { - display: flex; - align-items: center; - gap: 8px; - width: calc(100% - 32px); - margin: 0 16px 12px; - padding: 8px 12px; - border: 1px solid var(--pa-border, #e5e7eb); - border-radius: var(--pa-r-pill, 8px); - background: transparent; - color: var(--pa-text, #111827); - font-size: 13px; - cursor: pointer; -} -.panel-settings-btn svg { width: 16px; height: 16px; flex: none; } -.panel-settings-btn:hover { background: var(--pa-surface-2, #f3f4f6); } .new-task-btn { display: flex; diff --git a/ui/src/components/session/SessionRail.vue b/ui/src/components/session/SessionRail.vue index d0e0606..2b387bf 100644 --- a/ui/src/components/session/SessionRail.vue +++ b/ui/src/components/session/SessionRail.vue @@ -37,9 +37,11 @@ const emit = defineEmits(['open', 'goto-kg', 'goto-settings']); .collapsed-rail { display: flex; flex-direction: column; - align-items: center; + align-items: flex-start; /* 展开态:图标靠左(原样图标,14px 对齐内容边距) */ gap: 14px; - padding-top: 14px; + width: 100%; + padding: 0 0 14px 14px; + margin-top: auto; /* 沉底:与折叠态同一元素,切换时 Y 高度不变 */ } .rail-item { display: inline-flex; diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css index 1a176a0..f468420 100644 --- a/ui/src/styles/base.css +++ b/ui/src/styles/base.css @@ -171,12 +171,12 @@ html.drawer-open { overflow: hidden; } min-width: 0; overflow: hidden; transition: all .3s var(--pa-ease-out); } -.session-panel .inner { display: flex; flex-direction: column; min-height: 0; width: 260px; transition: opacity .2s var(--pa-ease); } +.session-panel .inner { display: flex; flex-direction: column; min-height: 0; width: 260px; flex: 1; transition: opacity .2s var(--pa-ease); } .side-collapsed .session-panel .inner { opacity: 0; pointer-events: none; } -.session-panel .collapsed-rail { - display: none; flex-direction: column; align-items: center; gap: 14px; padding-top: 14px; +.side-collapsed .session-panel .collapsed-rail { + align-items: center; /* 折叠态:64px 轨内居中,图标原样 */ + padding: 0 0 14px; /* 折叠态:去掉展开态的左 14px(底 14px 两态一致) */ } -.side-collapsed .session-panel .collapsed-rail { display: flex; } .rail-item { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--pa-r-md); @@ -694,16 +694,20 @@ html.drawer-open { overflow: hidden; } /* ---------- 折叠把手(UI_SPEC §3,FR-SHELL-004) ---------- */ .side-handle-btn { - position: absolute; left: 0; bottom: 40px; z-index: 7; + /* 位于左栏右边线、侧栏区域(顶栏与底栏之间)垂直居中;跨线半嵌 */ + position: absolute; left: 260px; z-index: 7; + top: calc(var(--topbar-h) + (100% - var(--topbar-h) - var(--statusbar-h)) / 2); + transform: translate(-50%, -50%); width: 26px; height: 26px; border: 1px solid var(--pa-hairline); background: var(--pa-surface-1); border-radius: var(--pa-r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--pa-ink-muted); + transition: left .3s var(--pa-ease-out), background .2s var(--pa-ease), color .2s var(--pa-ease); } -.side-handle-btn svg { width: 13px; height: 13px; transition: transform .3s var(--pa-ease-out); } -.side-handle-btn.collapsed svg { transform: rotate(180deg); } +.side-handle-btn svg { width: 13px; height: 13px; } +.app-shell.side-collapsed .side-handle-btn { left: 64px; } /* ---------- 通用抽屉(UI_SPEC §5 / §7:drawer / drawer-scrim) ---------- */ .drawer-scrim {