polish(v0.6): redesign Sessions/Projects toggle + hide keybar on home
- Segmented control: replace the two free-standing bordered boxes with a single rounded track holding two pill buttons (iOS-style), active segment filled Amber; centred via fit-content + margin auto. Panel top-offset 44→68px. - Hide the bottom key-bar on the home chooser (it only targets an active terminal): updateHomeView toggles body.home-open; CSS hides #keybar. Frontend-only. 415 tests green; both typechecks clean; verified in-browser (toggle pill renders, keybar hidden on home, reappears when a tab opens).
This commit is contained in:
@@ -146,6 +146,14 @@
|
|||||||
- **commit**: <hash 或 N/A>
|
- **commit**: <hash 或 N/A>
|
||||||
======================================================= -->
|
======================================================= -->
|
||||||
|
|
||||||
|
### 2026-06-30 · v0.6 UI 打磨 — 首页段控重设计 + 选择器隐藏键栏
|
||||||
|
|
||||||
|
- **状态**: `[x]` DONE。415 测试全绿 · 双 typecheck 干净 · `build:web` OK · 真浏览器验证通过。
|
||||||
|
- **反馈**(用户): ① Sessions/Projects 段控在 UI 上"有点别扭"(原为两个独立描边方块浮在顶部);② 首页(Sessions/Projects 视图)底部那排终端快捷键栏没必要显示。
|
||||||
|
- **修复**(纯前端,`public/style.css` + `public/tabs.ts`): ① `.home-seg` 重设计为 **iOS 风分段控件**——一个圆角"轨道"(`surface-2` 底 + 圆角 999px + 内边距)内含两个 pill 按钮,激活项填 Amber;`width:fit-content + margin:auto` 居中;去掉 first/last/only-child 圆角拼接;面板 `inset` 44→68px 适配新高度。② `TabApp.updateHomeView` 在显示首页时给 `document.body` 加 `home-open` 类,CSS `body.home-open #keybar{display:none}` 隐藏键栏;打开 tab(终端激活)即恢复。
|
||||||
|
- **验证**: `npx tsc`(双)干净;`npx vitest run` 415/415;真浏览器:Projects 视图段控为圆角分段 pill(Projects 高亮)、键栏隐藏、83 卡片正常;开 tab 后键栏恢复。
|
||||||
|
- **commit**: (本次提交)
|
||||||
|
|
||||||
### 2026-06-30 · v0.6 UX 修复 — 会话内无法返回 Projects 首页
|
### 2026-06-30 · v0.6 UX 修复 — 会话内无法返回 Projects 首页
|
||||||
|
|
||||||
- **状态**: `[x]` DONE。**415 测试全绿**(+3)· 双 typecheck 干净 · `build:web` OK · 真浏览器验证通过。
|
- **状态**: `[x]` DONE。**415 测试全绿**(+3)· 双 typecheck 干净 · `build:web` OK · 真浏览器验证通过。
|
||||||
|
|||||||
@@ -684,7 +684,7 @@ body {
|
|||||||
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
|
/* ── Launcher (home session chooser, shown when no tab is open) ──── */
|
||||||
.launcher {
|
.launcher {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
|
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 22px 18px 40px;
|
padding: 22px 18px 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -898,7 +898,7 @@ body {
|
|||||||
/* Panel wrapper (same host as .launcher; toggled via display) */
|
/* Panel wrapper (same host as .launcher; toggled via display) */
|
||||||
.proj-panel {
|
.proj-panel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 44px 0 0 0; /* top offset reserves space for .home-seg (height ~32px + gap) */
|
inset: 68px 0 0 0; /* top offset reserves space for .home-seg (track pill + margins) */
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 22px 18px 40px;
|
padding: 22px 18px 40px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -1118,46 +1118,49 @@ body {
|
|||||||
/* ── Home segmented control (P6 builds the DOM; styles defined here per spec) */
|
/* ── Home segmented control (P6 builds the DOM; styles defined here per spec) */
|
||||||
|
|
||||||
/* Horizontal pill container, centered above the home grid */
|
/* Horizontal pill container, centered above the home grid */
|
||||||
|
/* Segmented control: a single rounded "track" holding two pill buttons, with
|
||||||
|
* the active one filled (iOS-style). Centred with fit-content + margin auto. */
|
||||||
.home-seg {
|
.home-seg {
|
||||||
|
width: fit-content;
|
||||||
|
margin: 14px auto 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
gap: 3px;
|
||||||
margin-bottom: 20px;
|
padding: 3px;
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inactive segment */
|
/* Inactive segment */
|
||||||
.home-seg-btn {
|
.home-seg-btn {
|
||||||
background: var(--surface-2);
|
background: transparent;
|
||||||
border: 1px solid var(--border-strong);
|
border: none;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 8px 20px;
|
font-weight: 500;
|
||||||
|
padding: 6px 22px;
|
||||||
|
border-radius: 999px;
|
||||||
transition: background 0.12s ease, color 0.12s ease;
|
transition: background 0.12s ease, color 0.12s ease;
|
||||||
}
|
}
|
||||||
.home-seg-btn:first-child {
|
|
||||||
border-radius: 20px 0 0 20px;
|
|
||||||
}
|
|
||||||
.home-seg-btn:last-child {
|
|
||||||
border-radius: 0 20px 20px 0;
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
.home-seg-btn:only-child {
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
.home-seg-btn:not(.active):hover {
|
.home-seg-btn:not(.active):hover {
|
||||||
background: var(--surface-3);
|
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
background: var(--surface-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Active segment — Amber accent; text uses --on-accent for contrast */
|
/* Active segment — Amber accent; text uses --on-accent for contrast */
|
||||||
.home-seg-btn.active {
|
.home-seg-btn.active {
|
||||||
background: var(--accent);
|
background: var(--accent);
|
||||||
color: var(--on-accent);
|
color: var(--on-accent);
|
||||||
border-color: var(--accent);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.home-seg-btn.active:hover {
|
.home-seg-btn.active:hover {
|
||||||
background: var(--accent-2);
|
background: var(--accent-2);
|
||||||
border-color: var(--accent-2);
|
}
|
||||||
|
|
||||||
|
/* On the home chooser (Sessions/Projects), there is no active terminal, so the
|
||||||
|
* bottom key-bar is just noise — hide it. Toggled by TabApp.updateHomeView(). */
|
||||||
|
body.home-open #keybar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -122,6 +122,10 @@ export class TabApp {
|
|||||||
// The ⌂ button is "pressed" only while overlaying home on top of open tabs.
|
// The ⌂ button is "pressed" only while overlaying home on top of open tabs.
|
||||||
this.homeBtn?.classList.toggle('active', this.homeForced && this.tabs.length > 0)
|
this.homeBtn?.classList.toggle('active', this.homeForced && this.tabs.length > 0)
|
||||||
|
|
||||||
|
// Hide the bottom key-bar on the home chooser — it only sends keys to an
|
||||||
|
// active terminal, so it's noise on the Sessions/Projects views.
|
||||||
|
document.body.classList.toggle('home-open', showHome)
|
||||||
|
|
||||||
if (showHome) {
|
if (showHome) {
|
||||||
// Overlay home: hide every terminal pane so the chooser is on top.
|
// Overlay home: hide every terminal pane so the chooser is on top.
|
||||||
for (const t of this.tabs) t.session.hide()
|
for (const t of this.tabs) t.session.hide()
|
||||||
|
|||||||
Reference in New Issue
Block a user