28e9cfc207
按 Claude Design 定稿（归档在 docs/design/）重做 UI，并把 tmux 从 「从不自动进」修成「连接前探测 → 让用户选会话」。 设计令牌与导航地基 - Theme 拆三层：TXAccent(恒定 blurple) / TXChrome(中性阶×4 表) / TXFlavor(Catppuccin 终端) - vendor JetBrains Mono 四权重（附 OFL 许可） - AppRouter + SessionManager：多会话并存，路由与会话生命周期解耦 - SessionCanvas 常驻挂载会话 surface（摘除即丢内容，也是缩回动画的前提） 按设计稿落地的屏 - 沉浸轨道页：56pt 轨道 + 浮起标题/状态胶囊 + 侧边栏三态（遮罩不 resize、Pin 各一次） - 首页：活动会话卡（readViewportText 文本镜像）+ 主机网格 + 筛选 chips - 关闭二次确认（tmux 仅断开 / 原生窗口两套文案）、分屏菜单、pane 拖拽条 - 空状态：首次运行 / 无会话 / 搜索无命中 / 连接中·失败·已关闭 tmux 真实链路（真机查出并修掉 4 个 bug） - 全代码库从来没人发起 attach → 连接前探测 + 会话选择器（接回 / 新建 / 原生终端） - format 分隔符 tab 经 PTY 变成下划线 → 改用 |:| - controller 变化不冒泡到 session → Combine 转发（否则数据解析对了 UI 不刷新） - 当前会话名不能靠 session_attached 反推 → 改用 display-message 传输层：SSH connect 加超时（原来阻塞到系统 TCP 超时 75s+） 无头验证设施：假会话 fixture · terminalx://ui/* 驱动 · 横屏截图脚本 · 对拍走查法 TXCore 45 tests 绿（新增 5 个会话探测单测） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
530 lines
22 KiB
Swift
530 lines
22 KiB
Swift
import SwiftUI
|
||
|
||
// 设计稿 `1b 终端-沉浸轨道` 的左侧 56pt 轨道 + `3a 侧边栏-遮罩态/Pin 态` 的 288pt 面板。
|
||
//
|
||
// **开合语义（唯一、不歧义）**：`›` 方块是 App logo，不可点。开合只有一枚按钮，两态方向相反——
|
||
// 折叠态在轨道底部（»展开），展开态在标题右侧（«收起）。Pin 是独立按钮，只在展开态出现。
|
||
// 三态元素不增不减，只是展示密度不同。
|
||
|
||
/// 折叠轨道（56pt，竖屏 48pt）。元素中心线统一在轨道正中。
|
||
struct RailView: View {
|
||
@ObservedObject var manager: SessionManager
|
||
@ObservedObject var router: AppRouter
|
||
/// 当前会话（TMUX 段列它的 window）。
|
||
@ObservedObject var session: TerminalSession
|
||
let onNewHost: () -> Void
|
||
let onSettings: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
@Environment(\.horizontalSizeClass) private var hSize
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
private var width: CGFloat {
|
||
hSize == .compact ? TX.Layout.railWidthCompact : TX.Layout.railWidth
|
||
}
|
||
private var avatarSize: CGFloat { hSize == .compact ? 34 : 38 }
|
||
|
||
// 纵向节奏取自设计稿 `1b` 的实测坐标（1366×1024 画板扫描）：
|
||
// logo 28..62 · 搜索 75..109 · 首页 118..152 · 分隔 160 · 头像 174/220/266（间距 8）
|
||
// · 虚线+ 313..351 · 分隔 370 · TMUX 标签 382 · window 数字 408 起（间距 7）
|
||
// · 底部自下而上：齿轮 985..1019 · 展开键 932..967 · 状态点 914。
|
||
var body: some View {
|
||
VStack(spacing: 0) {
|
||
logo
|
||
.padding(.top, 28)
|
||
.padding(.bottom, 13)
|
||
// 搜索 / 首页 / 设置在设计稿里是**裸图标**（无底无框），只有 logo 与展开键有框。
|
||
TXIconButton(icon: "magnifyingglass", bare: true, hitSize: 34, label: "搜索") {
|
||
router.toggleSidebar()
|
||
}
|
||
.padding(.bottom, 9)
|
||
TXIconButton(icon: "house", bare: true, hitSize: 34, label: "首页") { router.goHome() }
|
||
.padding(.bottom, 8)
|
||
divider
|
||
.padding(.bottom, 13)
|
||
hostAvatars
|
||
newHostButton
|
||
divider
|
||
.padding(.top, 9)
|
||
.padding(.bottom, 12)
|
||
tmuxSection
|
||
Spacer(minLength: TX.Space.s)
|
||
TXStatusDot(color: linkColor, punchOut: p.surfaceDark)
|
||
.padding(.bottom, 11)
|
||
// 折叠态的开合键：方向朝右（展开）。设计稿里这一枚**有框**。
|
||
TXIconButton(icon: "chevron.right.2", hitSize: 34, label: "展开侧边栏") {
|
||
router.toggleSidebar()
|
||
}
|
||
.padding(.bottom, 18)
|
||
TXIconButton(icon: "gearshape", bare: true, hitSize: 34, label: "设置", action: onSettings)
|
||
.padding(.bottom, 5)
|
||
}
|
||
.frame(width: width)
|
||
.background(p.surfaceDark)
|
||
}
|
||
|
||
/// App logo（`›`）。**不可点** —— 开合是另一枚按钮的职责。
|
||
private var logo: some View {
|
||
Text("›")
|
||
.font(TX.Font.mono(16, .bold))
|
||
.foregroundStyle(TXAccent.text)
|
||
.frame(width: 34, height: 34)
|
||
.background(p.surface, in: RoundedRectangle(cornerRadius: 11))
|
||
.overlay(RoundedRectangle(cornerRadius: 11).strokeBorder(p.border, lineWidth: 1))
|
||
.accessibilityLabel("terminalX")
|
||
}
|
||
|
||
private var divider: some View {
|
||
Rectangle()
|
||
.fill(p.divider)
|
||
.frame(width: 24, height: 1)
|
||
}
|
||
|
||
private var hostAvatars: some View {
|
||
VStack(spacing: 8) {
|
||
ForEach(manager.activeSessions) { s in
|
||
Button {
|
||
manager.focus(s)
|
||
router.enter(s.id)
|
||
} label: {
|
||
TXInitialsAvatar(initials: s.initials,
|
||
size: avatarSize,
|
||
isSelected: router.route.sessionID == s.id,
|
||
status: RailSidebarStyle.statusColor(s, p),
|
||
punchOut: p.surfaceDark)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 虚线 + 号：在当前主机之外新开会话。
|
||
private var newHostButton: some View {
|
||
Button(action: onNewHost) {
|
||
Image(systemName: "plus")
|
||
.font(.system(size: 13, weight: .medium))
|
||
.foregroundStyle(p.textWeak)
|
||
.frame(width: avatarSize, height: avatarSize)
|
||
.background(
|
||
RoundedRectangle(cornerRadius: 11)
|
||
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [3, 3]))
|
||
.foregroundStyle(p.border)
|
||
)
|
||
}
|
||
.buttonStyle(.plain)
|
||
.padding(.top, 9)
|
||
}
|
||
|
||
/// TMUX 段：标签 + window 数字。无 tmux 的主机换成「窗口」段（客户端窗口）。
|
||
private var tmuxSection: some View {
|
||
VStack(spacing: 7) {
|
||
Text(session.tmuxSummary == nil ? "窗口" : "TMUX")
|
||
.font(TX.Font.mono(9, .semibold))
|
||
.tracking(0.9)
|
||
// 设计稿：轨道的 TMUX 段标签用 accent-500（弱化强调），不是中性灰。
|
||
.foregroundStyle(TXAccent.mid)
|
||
.padding(.bottom, 9)
|
||
if let tmux = session.tmuxController {
|
||
ForEach(tmux.windows) { win in
|
||
Button { tmux.selectWindow(win.id) } label: {
|
||
windowNumber("\(win.index)", isActive: win.id == tmux.activeWindowID)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
} else {
|
||
// 还没 attach（或假会话）时按概览里的 window 数占位，保持轨道高度稳定。
|
||
ForEach(0 ..< max(1, session.tmuxSummary?.windows ?? 1), id: \.self) { i in
|
||
windowNumber("\(i)", isActive: i == 0)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/// window 数字格（34×30，选中态填控件底 + 中等描边）。
|
||
private func windowNumber(_ text: String, isActive: Bool) -> some View {
|
||
Text(text)
|
||
.font(TX.Font.mono(12, isActive ? .semibold : .regular))
|
||
.foregroundStyle(isActive ? p.text : p.text4)
|
||
.frame(width: 34, height: 30)
|
||
.background(isActive ? p.surface : .clear, in: RoundedRectangle(cornerRadius: 8))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: 8)
|
||
.strokeBorder(isActive ? p.borderDialog : .clear, lineWidth: 1)
|
||
)
|
||
}
|
||
|
||
private var linkColor: Color { RailSidebarStyle.statusColor(session, p) }
|
||
}
|
||
|
||
/// 轨道与面板共用的状态色映射。
|
||
@MainActor
|
||
enum RailSidebarStyle {
|
||
static func statusColor(_ s: TerminalSession, _ p: TXPalette) -> Color {
|
||
switch s.link {
|
||
case .direct, .relay: s.isMinimized ? TXAccent.mid : p.online
|
||
case .reconnecting: p.reconnecting
|
||
case .connecting: p.text4
|
||
case .offline: p.offline
|
||
}
|
||
}
|
||
}
|
||
|
||
// MARK: - 288pt 侧边栏面板
|
||
|
||
/// 展开态面板（遮罩 / Pin 共用同一套内容）。
|
||
///
|
||
/// 行规格：会话行 = 26pt 头像列 + 10pt gap；window 行 = 26×22pt 徽标列 + 10pt gap
|
||
/// → 两者标题左缘对齐。选中态用 **inset 描边**（`strokeBorder`）而非 border，避免内容位移 1pt。
|
||
struct SidebarPanel: View {
|
||
@ObservedObject var manager: SessionManager
|
||
@ObservedObject var router: AppRouter
|
||
@ObservedObject var session: TerminalSession
|
||
@ObservedObject var tailscaleStore: TailscaleStore
|
||
let onNewHost: () -> Void
|
||
let onSettings: () -> Void
|
||
@Binding var search: String
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
VStack(alignment: .leading, spacing: 0) {
|
||
header
|
||
TXSearchField(text: $search, placeholder: "搜索主机 · 会话")
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.bottom, TX.Space.s)
|
||
homeRow
|
||
sessionsSection
|
||
// 设计：1pt **渐隐**分隔（两端淡出，不是通栏实线）。
|
||
LinearGradient(colors: [p.divider.opacity(0), p.divider, p.divider.opacity(0)],
|
||
startPoint: .leading, endPoint: .trailing)
|
||
.frame(height: 1)
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.vertical, TX.Space.s)
|
||
tmuxSection
|
||
Spacer(minLength: 0)
|
||
tailscaleFoot
|
||
}
|
||
.frame(width: TX.Layout.sidebarWidth)
|
||
.background(p.surfaceDark)
|
||
}
|
||
|
||
private var header: some View {
|
||
HStack(spacing: TX.Space.s) {
|
||
Text("›")
|
||
.font(TX.Font.mono(15, .bold))
|
||
.foregroundStyle(TXAccent.text)
|
||
.frame(width: 30, height: 30)
|
||
.background(p.surface, in: RoundedRectangle(cornerRadius: 9))
|
||
.overlay(RoundedRectangle(cornerRadius: 9).strokeBorder(p.border, lineWidth: 1))
|
||
Text("terminalX")
|
||
.font(TX.Font.mono(14, .medium))
|
||
.foregroundStyle(p.text)
|
||
Spacer()
|
||
// Pin 只在展开态出现；钉住时高亮。
|
||
TXIconButton(icon: "pin", size: 28, isSelected: router.sidebar == .pinned,
|
||
label: "钉在左侧") { router.togglePin() }
|
||
// 展开态的开合键：方向朝左（收起）。
|
||
TXIconButton(icon: "chevron.left.2", size: 28, label: "收起") { router.toggleSidebar() }
|
||
}
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.top, 11)
|
||
.padding(.bottom, 6)
|
||
}
|
||
|
||
private var homeRow: some View {
|
||
Button { router.goHome() } label: {
|
||
HStack(spacing: TX.Space.s) {
|
||
Image(systemName: "house")
|
||
.font(.system(size: 13))
|
||
.foregroundStyle(p.text2)
|
||
.frame(width: 26)
|
||
Text("首页")
|
||
.font(TX.Font.mono(13, .medium))
|
||
.foregroundStyle(p.text)
|
||
Spacer()
|
||
Text("⌘⇧H")
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textFaint)
|
||
}
|
||
.padding(.horizontal, TX.Space.m)
|
||
.frame(height: 36)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
|
||
private var sessionsSection: some View {
|
||
VStack(alignment: .leading, spacing: 2) {
|
||
TXSectionLabel(text: "活动会话", trailing: "\(manager.sessions.count)")
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.top, TX.Space.s)
|
||
.padding(.bottom, 2)
|
||
if manager.activeSessions.isEmpty {
|
||
Text("没有在跑的会话")
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.padding(.leading, 53)
|
||
.frame(height: 32, alignment: .leading)
|
||
}
|
||
ForEach(manager.activeSessions) { s in
|
||
SidebarSessionRow(session: s, isSelected: router.route.sessionID == s.id) {
|
||
manager.focus(s)
|
||
router.enter(s.id)
|
||
}
|
||
}
|
||
Button(action: onNewHost) {
|
||
Text("连接新主机…")
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.text4)
|
||
.padding(.leading, 53) // 与会话行标题左缘对齐
|
||
.frame(height: 32, alignment: .leading)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
}
|
||
|
||
private var tmuxSection: some View {
|
||
VStack(alignment: .leading, spacing: 2) {
|
||
TXSectionLabel(text: tmuxHeader)
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.bottom, 2)
|
||
if let tmux = session.tmuxController {
|
||
ForEach(tmux.windows) { win in
|
||
SidebarWindowRow(window: win,
|
||
isSelected: win.id == tmux.activeWindowID) {
|
||
tmux.selectWindow(win.id)
|
||
}
|
||
}
|
||
newWindowRow { tmux.newWindow() }
|
||
} else if let summary = session.tmuxSummary {
|
||
// 已知是 tmux 会话但 controller 还没 attach：按概览占位，避免与分组标题矛盾。
|
||
ForEach(0 ..< max(1, summary.windows), id: \.self) { i in
|
||
placeholderWindowRow(
|
||
index: i,
|
||
title: i == 0 && !summary.currentTitle.isEmpty ? summary.currentTitle : "window \(i)",
|
||
detail: i == 0 && summary.panes > 0
|
||
? "\(summary.panes) pane\(summary.panes == 1 ? "" : "s")" : "",
|
||
isSelected: i == 0)
|
||
}
|
||
newWindowRow {}
|
||
} else {
|
||
Text("无 tmux · 客户端窗口")
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.padding(.horizontal, TX.Space.m)
|
||
.padding(.vertical, TX.Space.xs)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 「新建 window ⌘T」行（左缘与 window 行标题对齐 x=53）。
|
||
private func newWindowRow(_ action: @escaping () -> Void) -> some View {
|
||
Button(action: action) {
|
||
HStack {
|
||
Text("新建 window")
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.text4)
|
||
Spacer()
|
||
Text("⌘T")
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textFaint)
|
||
}
|
||
.padding(.leading, 53)
|
||
.padding(.trailing, TX.Space.m)
|
||
.frame(height: 32)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
|
||
/// controller 未就绪时的 window 行占位（视觉与 SidebarWindowRow 一致）。
|
||
private func placeholderWindowRow(index: Int, title: String, detail: String,
|
||
isSelected: Bool) -> some View {
|
||
HStack(spacing: TX.Space.s) {
|
||
Text("\(index)")
|
||
.font(TX.Font.mono(11, .semibold))
|
||
.foregroundStyle(isSelected ? TXAccent.text : p.text4)
|
||
.frame(width: 26, height: 22)
|
||
.background(isSelected ? TXAccent.selectedBg : .clear,
|
||
in: RoundedRectangle(cornerRadius: 5))
|
||
VStack(alignment: .leading, spacing: 1) {
|
||
Text(title)
|
||
.font(TX.Font.mono(13, isSelected ? .medium : .regular))
|
||
.foregroundStyle(isSelected ? p.text : p.text2)
|
||
.lineLimit(1)
|
||
if !detail.isEmpty {
|
||
Text(detail)
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textWeak)
|
||
}
|
||
}
|
||
Spacer(minLength: 0)
|
||
if isSelected { TXStatusDot(color: p.online, size: 7) }
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 44)
|
||
.background(isSelected ? TXAccent.selectedBg.opacity(0.75) : .clear,
|
||
in: RoundedRectangle(cornerRadius: TX.Radius.control))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.control)
|
||
.strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
|
||
)
|
||
.padding(.horizontal, TX.Space.s)
|
||
}
|
||
|
||
private var tmuxHeader: String {
|
||
let host = session.displayName
|
||
if let t = session.tmuxSummary, !t.name.isEmpty { return "TMUX · \(host) · \(t.name)" }
|
||
return session.tmuxSummary == nil ? "窗口 · \(host)" : "TMUX · \(host)"
|
||
}
|
||
|
||
/// 面板脚：tailnet 状态（绿点 + tailnet + 设备 IP）。
|
||
///
|
||
/// **与舞台底部提示条同高**（都是 `TX.Layout.footHeight`），故两侧的分割线落在同一条 y 上；
|
||
/// 分割线用 1pt divider（设计稿如此），不加底色块、不加阴影。
|
||
private var tailscaleFoot: some View {
|
||
VStack(spacing: 0) {
|
||
Rectangle().fill(p.divider).frame(height: 1)
|
||
HStack(spacing: TX.Space.s) {
|
||
TXStatusDot(color: tailscaleStore.connections.isEmpty ? p.offline : p.online)
|
||
VStack(alignment: .leading, spacing: 1) {
|
||
Text(tailscaleStore.connections.isEmpty ? "Tailscale 未配置" : "Tailscale 已连接")
|
||
.font(TX.Font.mono(11.5, .medium))
|
||
.foregroundStyle(p.text2)
|
||
if let c = tailscaleStore.connections.first {
|
||
// 设计：tailnet 内主机名 + 本机 tailnet IP（Up 后缓存的 SelfIP）。
|
||
Text([c.hostname, c.lastSelfIP].compactMap { $0 }.joined(separator: " · "))
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
}
|
||
Spacer(minLength: 0)
|
||
}
|
||
.padding(.horizontal, TX.Space.m)
|
||
.frame(height: TX.Layout.footHeight)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 侧边栏会话行：26pt 头像 + 名称·window title + 右侧链路/重连标。
|
||
struct SidebarSessionRow: View {
|
||
@ObservedObject var session: TerminalSession
|
||
let isSelected: Bool
|
||
let onTap: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
Button(action: onTap) {
|
||
HStack(spacing: TX.Space.s) {
|
||
TXInitialsAvatar(initials: session.initials, size: 26,
|
||
isSelected: isSelected,
|
||
status: RailSidebarStyle.statusColor(session, p),
|
||
punchOut: isSelected ? TXAccent.selectedBg : p.surfaceDark)
|
||
VStack(alignment: .leading, spacing: 1) {
|
||
Text(title)
|
||
.font(TX.Font.mono(13, .medium))
|
||
.foregroundStyle(p.text)
|
||
.lineLimit(1)
|
||
Text(subtitle)
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
Spacer(minLength: TX.Space.xs)
|
||
trailingTag
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 48)
|
||
.background(isSelected ? TXAccent.selectedBg : .clear,
|
||
in: RoundedRectangle(cornerRadius: TX.Radius.control))
|
||
// inset 描边而非 border：选中时内容不位移 1pt。
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.control)
|
||
.strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
|
||
)
|
||
.padding(.horizontal, TX.Space.s)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
|
||
private var title: String {
|
||
if let t = session.tmuxSummary, !t.name.isEmpty {
|
||
return "\(session.displayName) · \(t.name)"
|
||
}
|
||
return session.displayName
|
||
}
|
||
|
||
private var subtitle: String {
|
||
if session.isMinimized { return "最小化中" }
|
||
guard let t = session.tmuxSummary else { return "原生窗口" }
|
||
let title = t.currentTitle.isEmpty ? session.phaseText : t.currentTitle
|
||
return "\(title) · \(t.windows) window\(t.windows == 1 ? "" : "s")"
|
||
}
|
||
|
||
@ViewBuilder private var trailingTag: some View {
|
||
switch session.link {
|
||
case .reconnecting:
|
||
Text("重连中").font(TX.Font.mono(10.5, .medium)).foregroundStyle(p.reconnecting)
|
||
case .offline:
|
||
Text("离线").font(TX.Font.mono(10.5)).foregroundStyle(p.offline)
|
||
default:
|
||
EmptyView()
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 侧边栏 window 行：26×22pt 编号徽标 + title + cwd/panes。
|
||
struct SidebarWindowRow: View {
|
||
@ObservedObject var window: TmuxWindow
|
||
let isSelected: Bool
|
||
let onTap: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
private var subtitle: String {
|
||
var parts: [String] = []
|
||
if !window.cwd.isEmpty { parts.append(TerminalTitleCapsule.abbreviate(window.cwd)) }
|
||
let n = window.panes.count
|
||
if n > 1 { parts.append("\(n) panes") }
|
||
return parts.isEmpty ? "1 pane" : parts.joined(separator: " · ")
|
||
}
|
||
|
||
var body: some View {
|
||
Button(action: onTap) {
|
||
HStack(spacing: TX.Space.s) {
|
||
Text("\(window.index)")
|
||
.font(TX.Font.mono(11, .semibold))
|
||
.foregroundStyle(isSelected ? TXAccent.text : p.text4)
|
||
.frame(width: 26, height: 22)
|
||
.background(isSelected ? TXAccent.selectedBg : .clear,
|
||
in: RoundedRectangle(cornerRadius: 5))
|
||
VStack(alignment: .leading, spacing: 1) {
|
||
Text(window.title)
|
||
.font(TX.Font.mono(13, isSelected ? .medium : .regular))
|
||
.foregroundStyle(isSelected ? p.text : p.text2)
|
||
.lineLimit(1)
|
||
// 设计：cwd · n panes（cwd 来自 #{pane_current_path}）
|
||
Text(subtitle)
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
Spacer(minLength: 0)
|
||
if isSelected {
|
||
TXStatusDot(color: p.online, size: 7)
|
||
}
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 44)
|
||
.background(isSelected ? TXAccent.selectedBg.opacity(0.75) : .clear,
|
||
in: RoundedRectangle(cornerRadius: TX.Radius.control))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.control)
|
||
.strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
|
||
)
|
||
.padding(.horizontal, TX.Space.s)
|
||
}
|
||
.buttonStyle(.plain)
|
||
}
|
||
}
|