eric/terminalX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 侧边栏两态重构（统一视图身份）+ 第四轮触控化走查

Browse Source 
侧边栏（真机验证）：
- 砍掉悬浮态，只留收起⇄固定展开；TerminalSidebar 单一视图身份，
  内容恒按 288pt 排版、收起=左侧裁切（clipped 宽度动画），
  图标列两态同尺寸同位置，明细淡入淡出，终端随宽度盖上/让开
- 开合入口收敛：Logo 位（收起态=»展开键/展开态=Logo）+ 头部«；
  删底部开合键与 Pin；LeadingHitShape 修 clipped 不裁触摸
- 修 GridBox 从不通知 UI：onGridChange→objectWillChange，
  标题胶囊格子数随开合实时刷新

触控化走查（上一轮，真机部署验证）：
- 窗口按钮 13pt 色点→22pt 圆角方块常显字形；动作条改可点按钮
- TXTech 拼写/配色规范（SSH/mosh/tmux 官方写法+品牌色映射）
- 首页会话卡固定 3 列 4:3；去掉未实现的 ⌘K 提示

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kid
2026-07-26 00:55:53 +08:00
parent 28e9cfc207
commit 5707d70dff
15 changed files with 1086 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/TerminalX/iOS/AppRouter.swift
View File

@@ -14,21 +14,19 @@ enum AppRoute: Equatable {
}
}
/// 侧边栏三态。同一条栏，元素不增不减，只是展示密度不同。
/// 侧边栏两态（用户裁决砍掉悬浮态：展开即固定）。同一条栏，元素不增不减，只是展示密度不同。
enum SidebarState: Equatable {
/// 56pt 轨道：只显图标与两字缩写
case collapsed
/// 288pt 面板**盖住**轨道，右侧终端压遮罩；点终端任意处收起。终端不 reflow、不触发 PTY resize。
case overlay
/// 288pt 钉在左侧：遮罩消失，终端变窄。**只在钉住/解除时各 resize 一次**。
/// 288pt 固定在左侧：终端变窄。开合各触发一次 resize。
case pinned
var isExpanded: Bool { self != .collapsed }
var isExpanded: Bool { self == .pinned }
/// 该状态下侧边栏占据的布局宽度（overlay 是浮层，不占位）。
/// 该状态下侧边栏占据的布局宽度。
var layoutWidth: CGFloat {
switch self {
case .collapsed, .overlay: TX.Layout.railWidth
case .collapsed: TX.Layout.railWidth
case .pinned: TX.Layout.sidebarWidth
}
}
@@ -51,47 +49,34 @@ final class AppRouter: ObservableObject {
/// 当前模态浮层（关闭确认 / 分屏菜单）。
@Published var modal: AppModal?
/// 状态切换动效：设计定稿 200–260ms easeOut（侧边栏浮层从左滑入 + 遮罩淡入）。
/// 所有侧边栏状态变更都经这里，键盘快捷键与点击拿到同一条曲线。
static let sidebarAnimation = Animation.easeOut(duration: 0.24)
private func animateSidebar(_ change: () -> Void) {
withAnimation(Self.sidebarAnimation, change)
/// 状态切换动效统一走 `TX.Motion.standard`（设计定稿 200–260ms easeOut，响应「减弱动态」）。
///
/// **路由 / 侧边栏 / 浮层的每一次变更都必须包在这条曲线里**，否则视图上的 `transition`
/// 拿不到动画事务就退化成硬切 —— 首页 ⇄ 终端、关闭确认、分屏菜单曾都是这么"啪"地跳出来的。
/// 收在 router 里的另一个好处：点击、⌘ 快捷键、无头 URL 三条入口天然同一手感。
private func animated(_ change: () -> Void) {
withAnimation(TX.Motion.standard, change)
}
/// 进入某会话（点会话卡 / 侧边栏会话行 / 新建连接后）。恢复焦点由会话自身持有。
func enter(_ sessionID: UUID) {
route = .terminal(sessionID)
animated { route = .terminal(sessionID) }
}
/// 回首页：会话完全不动（⌘⇧H / 侧边栏首页行）。
/// 回首页：会话完全不动（⌘⇧H / 侧边栏首页行）。展开态跨导航保留。
func goHome() {
modal = nil
route = .home
if sidebar == .overlay { animateSidebar { sidebar = .collapsed } }
}
/// 开合侧边栏（⌘\ / 开合键）。折叠 ⇄ 遮罩；Pin 态视作展开，收起回折叠。
func toggleSidebar() {
animateSidebar {
switch sidebar {
case .collapsed: sidebar = .overlay
case .overlay, .pinned: sidebar = .collapsed
}
animated {
modal = nil
route = .home
}
}
/// Pin 切换（只在展开态出现）。钉住/解除各触发一次终端 resize。
func togglePin() {
animateSidebar { sidebar = sidebar == .pinned ? .overlay : .pinned }
/// 开合侧边栏（⌘\ / Logo 位展开键 / 头部收起键）。收起 ⇄ 固定展开。
func toggleSidebar() {
animated { sidebar = sidebar == .collapsed ? .pinned : .collapsed }
}
/// 打开/关闭模态浮层（红点、⌘W、⌘D、⌘⇧D 与无头 URL 共用同一入口）。
func present(_ modal: AppModal) { self.modal = modal }
func dismissModal() { modal = nil }
/// 点终端任意处：遮罩态收起（Pin 态不受影响）。
func dismissOverlaySidebar() {
if sidebar == .overlay { animateSidebar { sidebar = .collapsed } }
}
func present(_ modal: AppModal) { animated { self.modal = modal } }
func dismissModal() { animated { modal = nil } }
}

163
apps/TerminalX/iOS/ContentView.swift
View File

@@ -94,7 +94,8 @@ struct RootView: View {
if router.route == .home {
HomeView(manager: manager, router: router, hostStore: hostStore,
credStore: credStore, tailscaleStore: tailscaleStore)
.transition(.opacity)
// 首页略微推远后淡出，与终端从 97% 放大到位对偶 —— 读作"推进到会话里"。
.transition(TX.Motion.pushBack)
}
}
.background(p.bgDeep.ignoresSafeArea())
@@ -142,6 +143,7 @@ struct SessionCanvas: View {
@ObservedObject var hostStore: HostStore
@ObservedObject var credStore: FileCredentialStore
@ObservedObject var tailscaleStore: TailscaleStore
@Environment(\.accessibilityReduceMotion) private var reduceMotion
var body: some View {
ZStack {
@@ -153,61 +155,55 @@ struct SessionCanvas: View {
// 离开终端时轻微缩小淡出，观感上"缩回首页卡片"。
// `scaleEffect` 只是渲染变换、不改 frame → **不触发 PTY resize**，
// 故不能用 frame 动画替代（那会让 tmux 反复重排）。
.scaleEffect(visible ? 1 : 0.97)
.animation(AppRouter.sidebarAnimation, value: visible)
.scaleEffect(visible || reduceMotion ? 1 : 0.97)
.animation(TX.Motion.standard, value: visible)
.allowsHitTesting(visible)
}
}
}
}
/// 终端主界面 · 沉浸轨道（设计稿 `1b` + `3a`）。
/// 终端主界面 · 沉浸轨道（设计稿 `1b` + `3a`，用户裁决后侧边栏只剩收起/固定两态）。
///
/// 布局：左 56pt 轨道（或 Pin 态的 288pt 面板）+ 右舞台。舞台顶部留 86pt 预留带给浮起胶囊，
/// 底部 34pt 提示条。遮罩态的面板是**浮层**，盖住轨道、不参与布局 → 终端不 reflow、不 resize；
/// 只有 Pin 切换才改变舞台宽度（各 resize 一次，符合设计约束）。
/// 布局：左侧 `TerminalSidebar`（56 ⇄ 288，直接参与布局）+ 右舞台。舞台顶部留 86pt
/// 预留带给浮起胶囊，底部一条提示条。开合就是侧边栏的宽度动画：收起时明细淡出、
/// 终端从右侧盖上来；展开反向。开合各触发一次终端 resize。
///
/// **安全区**：整屏 chrome 铺到**物理**边缘（`ignoresSafeArea()`），安全区由两处底栏
/// （提示条 / 侧边栏脚）自己让出 —— 见 `TX.Layout.footBand`，两侧分割线落在同一条 y 上。
struct TerminalScreen: View {
@ObservedObject var session: TerminalSession
@ObservedObject var manager: SessionManager
@ObservedObject var router: AppRouter
@ObservedObject var tailscaleStore: TailscaleStore
@EnvironmentObject var theme: TXThemeManager
@Environment(\.horizontalSizeClass) private var hSize
@State private var sidebarSearch = ""
/// 「安装并启用 tmux」引导弹层。
@State private var showTmuxInstall = false
private var p: TXPalette { theme.palette }
var body: some View {
HStack(spacing: 0) {
if router.sidebar == .pinned {
sidebarPanel
} else {
RailView(manager: manager, router: router, session: session,
onNewHost: goHomeToAddHost, onSettings: goHomeToAddHost)
}
stage
}
.background(p.bgDeep.ignoresSafeArea())
// 沉浸：内容顶到屏幕边缘（设计稿 1b/3a 顶部就是胶囊/logo）。状态栏的显隐归 RootView
// 统一控制 —— 本视图常驻挂载（SessionCanvas），在这里 hide 会连首页一起隐藏。
.ignoresSafeArea(edges: .top)
// 遮罩态：面板浮在最上层盖住轨道，其余压 50% 遮罩，点终端任意处收起。
// 动效：遮罩淡入 + 面板从左滑入（200–260ms easeOut，见 AppRouter 的动画包裹）。
.overlay(alignment: .leading) {
if router.sidebar == .overlay {
ZStack(alignment: .leading) {
Color(hex: 0x0A0B12).opacity(0.5)
.ignoresSafeArea()
.contentShape(Rectangle())
.onTapGesture { router.dismissOverlaySidebar() }
.transition(.opacity)
sidebarPanel
.transition(.move(edge: .leading))
}
// 浮层要顶到屏幕边缘（面板是全高的），否则被 safe area 推低。
// 先量安全区，再铺满物理屏（顺序反了就量不到，见 TXScreenMetrics）。
TXScreenMetrics { geo in
screen(safeTop: geo.safeAreaInsets.top, safeBottom: geo.safeAreaInsets.bottom)
.ignoresSafeArea()
}
}
}
private func screen(safeTop: CGFloat, safeBottom: CGFloat) -> some View {
HStack(spacing: 0) {
// 两态共用**同一个**视图实例（见 TerminalSidebar 的动画模型）：开合就是它自己的
// 宽度动画（56 ⇄ 288），直接参与布局 —— 内容淡出的同时终端从右侧盖上来（收起），
// 反之展开。开合各触发一次终端 resize。
TerminalSidebar(manager: manager, router: router, session: session,
tailscaleStore: tailscaleStore,
railWidth: railWidth, safeBottom: safeBottom,
onNewHost: goHomeToAddHost, onSettings: goHomeToAddHost,
search: $sidebarSearch)
stage(safeTop: safeTop, safeBottom: safeBottom)
}
.background(p.bgDeep)
// 关闭确认（3c）与分屏菜单（3b）：自绘浮层，不用系统 alert/sheet —— 设计给的是精确尺寸的卡片。
.overlay {
switch router.modal {
@@ -230,10 +226,10 @@ struct TerminalScreen: View {
if showTmuxInstall {
TmuxInstallSheet(
onRun: { cmd in
showTmuxInstall = false
withAnimation(TX.Motion.standard) { showTmuxInstall = false }
session.runInTerminal(cmd)
},
onCancel: { showTmuxInstall = false })
onCancel: { withAnimation(TX.Motion.standard) { showTmuxInstall = false } })
}
}
// host key 告警挂在会话上（多会话各自一份）：安全告警即使会话不在前台也应弹出。
@@ -248,11 +244,9 @@ struct TerminalScreen: View {
}
}
private var sidebarPanel: SidebarPanel {
SidebarPanel(manager: manager, router: router, session: session,
tailscaleStore: tailscaleStore,
onNewHost: goHomeToAddHost, onSettings: goHomeToAddHost,
search: $sidebarSearch)
/// 折叠轨道宽（竖屏/窄窗口 48）。占位列宽度必须与侧边栏收起宽一致，否则多出一条底色缝。
private var railWidth: CGFloat {
hSize == .compact ? TX.Layout.railWidthCompact : TX.Layout.railWidth
}
/// 轨道 + 号 / 设置齿轮：首版回首页（那里有「新建连接」与设置入口）。
@@ -263,13 +257,15 @@ struct TerminalScreen: View {
// MARK: - 舞台
private var stage: some View {
private func stage(safeTop: CGFloat, safeBottom: CGFloat) -> some View {
ZStack(alignment: .top) {
VStack(spacing: 0) {
// 无 tmux 时的行内引导横幅（设计 2c）：占一行，把 pane 往下推，不遮内容。
if session.tmuxUnavailable {
NoTmuxBanner(onInstall: { showTmuxInstall = true },
onDismiss: { session.dismissTmuxBanner() })
NoTmuxBanner(onInstall: { withAnimation(TX.Motion.standard) { showTmuxInstall = true } },
onDismiss: {
withAnimation(TX.Motion.standard) { session.dismissTmuxBanner() }
})
.padding(.top, TX.Layout.capsuleInset)
.transition(.opacity)
}
@@ -280,20 +276,35 @@ struct TerminalScreen: View {
.padding(.top, session.tmuxUnavailable ? TX.Space.hairline : TX.Layout.capsuleInset)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(p.terminalBackground)
.clipShape(RoundedRectangle(cornerRadius: 6))
.clipShape(paneShape)
.overlay(
RoundedRectangle(cornerRadius: 6).strokeBorder(p.border, lineWidth: 1)
paneShape.strokeBorder(p.border, lineWidth: 1)
// 顶边/右边与屏幕边缘齐平，那两条描边推出屏外：留着就是贴在屏幕
// 边上的一圈多余框线，还会在屏幕圆角处被切出斜口。
.padding(EdgeInsets(top: -1, leading: 0, bottom: 0, trailing: -1))
)
// 底部不留缝：pane 底边即与侧边栏脚同高的那条分割线。
.padding([.leading, .trailing, .top], TX.Layout.paneGap)
TerminalHintBar(context: hintContext, hints: hints)
// 只在**朝轨道那一侧**留 2pt 缝；顶边/右边直接铺到屏幕物理边缘（沉浸）。
// 底边不留缝：pane 底边即与侧边栏脚同高的那条分割线。
.padding(.leading, TX.Layout.paneGap)
TerminalActionBar(context: barContext, actions: barActions, safeBottom: safeBottom)
}
capsules
capsules(safeTop: safeTop)
}
.background(p.bgDeep)
.contentShape(Rectangle())
// 点终端任意处收起遮罩态侧边栏（Pin 态不受影响）。
.simultaneousGesture(TapGesture().onEnded { router.dismissOverlaySidebar() })
}
/// pane 容器的形状：**只在朝 app chrome 的那几个角收圆角**。
///
/// 终端右上角贴着屏幕物理边缘，而 iPad/iPhone 的屏幕本身是大圆角 —— 在那儿再画一个 6pt 小圆角，
/// 两种曲率必然打架：小圆角整段落在屏幕圆角之外，被"吃掉"，只在切口处露出一块底色三角。
/// 故顶边/右边**不收角、不描边**，由屏幕自己的圆角收口；左边（挨轨道）、底边（挨提示条）
/// 才是真正需要圆角把 pane 和 chrome 分开的地方。Stage Manager 的小窗同理（窗圆角接管）。
private var paneShape: UnevenRoundedRectangle {
UnevenRoundedRectangle(
topLeadingRadius: TX.Radius.pane,
bottomLeadingRadius: TX.Radius.pane,
bottomTrailingRadius: TX.Radius.pane,
topTrailingRadius: 0)
}
@ViewBuilder private var paneArea: some View {
@@ -312,17 +323,20 @@ struct TerminalScreen: View {
router.goHome()
manager.close(id)
})
// 连接中 → 已连接（或失败）时这层淡出，不硬切。
.animation(TX.Motion.standard, value: session.phaseText)
}
}
private var capsules: some View {
private func capsules(safeTop: CGFloat) -> some View {
HStack(alignment: .top) {
TerminalTitleCapsule(session: session, onClose: requestClose, onMinimize: minimizeSession)
Spacer(minLength: TX.Space.m)
TerminalStatusCapsule(session: session)
}
.padding(.horizontal, TX.Space.m)
.padding(.top, 14)
// iPad 隐藏状态栏后顶边无遮挡 → 设计值 14；灵动岛/刘海机型按硬件安全区下移。
.padding(.top, TX.Layout.capsuleTop(safeTop))
}
/// 红点：**必须**先确认（设计要求）。确认后的动作分两套，见 `closeSession(kill:)`。
@@ -337,7 +351,7 @@ struct TerminalScreen: View {
if let tmux = session.tmuxController {
if kill { tmux.killSession() } else { tmux.detach() }
}
withAnimation(AppRouter.sidebarAnimation) { router.goHome() }
router.goHome() // 动画在 router 里（TX.Motion.standard）
// 给 detach/kill 命令一点时间落地再拆传输层（tmux 会回 %exit 走既有 onExit 收尾）。
Task { @MainActor in
try? await Task.sleep(nanoseconds: 250_000_000)
@@ -348,7 +362,7 @@ struct TerminalScreen: View {
private func minimizeSession() {
session.captureSnapshot() // 缩回首页前抓一次镜像，卡片立刻有内容
manager.minimize(session.id)
withAnimation(AppRouter.sidebarAnimation) { router.goHome() }
router.goHome()
}
/// 分屏菜单选择后立即分屏（设计：选完不再问方向）。
@@ -373,20 +387,31 @@ struct TerminalScreen: View {
router.present(.splitMenu(vertical: vertical))
}
private var hintContext: String {
switch router.sidebar {
case .pinned: "Pin 态 · 终端变窄，仅在钉住/解除时 resize 一次"
case .overlay: "遮罩态 · 点终端任意处收起，终端不 reflow"
case .collapsed: session.isLive ? "已连接妙控键盘 · 附加行已收起" : session.phaseText
/// 动作条左侧那句话：说**当前会话**的状态（此前写死「已连接妙控键盘 · 附加行已收起」——
/// 没接键盘时那是假话；侧边栏三态的说明属于实现细节，用户不需要）。
private var barContext: String {
if !session.isLive { return session.phaseText }
if let t = session.tmuxSummary {
let name = t.name.isEmpty ? "tmux" : "tmux \(t.name)"
return "\(session.displayName) · \(name) · \(t.windows) window\(t.windows == 1 ? "" : "s")"
}
if session.tmuxSkipped { return "\(session.displayName) · 原生窗口" }
return session.displayName
}
private var hints: [(key: String, label: String)] {
switch router.sidebar {
case .pinned: [("Pin", "解除钉住"), ("⌘\\", "收起为轨道"), ("⌘⇧H", "回首页")]
case .overlay: [("⌘\\", "收起"), ("Pin", "钉在左侧"), ("⌘⇧H", "回首页")]
case .collapsed: [("⌘K", "命令面板"), ("⌘D", "竖分屏"), ("⌘T", "新 window"), ("⌘⇧H", "回首页")]
}
/// 底部动作（**触控可点**，不是快捷键提示）。tmux 相关的两个在原生窗口下灰显。
private var barActions: [TerminalActionBar.Action] {
let tmux = session.tmuxController
return [
.init(id: "split", icon: "square.split.2x1", title: "竖分屏", enabled: tmux != nil) {
requestSplit(vertical: true)
},
.init(id: "window", icon: "plus.rectangle.on.rectangle", title: "新建 window",
enabled: tmux != nil) {
tmux?.newWindow()
},
.init(id: "home", icon: "house", title: "回首页") { router.goHome() },
]
}
}

212
apps/TerminalX/iOS/HomeView.swift
View File

@@ -11,6 +11,7 @@ struct HomeView: View {
@ObservedObject var credStore: FileCredentialStore
@ObservedObject var tailscaleStore: TailscaleStore
@EnvironmentObject var theme: TXThemeManager
@Environment(\.horizontalSizeClass) private var hSize
@State private var search = ""
@State private var groupFilter: String? = nil
@@ -41,6 +42,31 @@ struct HomeView: View {
}
var body: some View {
// 量一次安全区：滚动内容要铺到物理底边（见下）。
TXScreenMetrics { geo in
content(safeBottom: geo.safeAreaInsets.bottom)
}
.background(p.bg.ignoresSafeArea())
// 首页可见时轮询会话内容做文本镜像（缩略卡「真实回滚」的落地方式）。
.task(id: manager.sessions.count) {
while !Task.isCancelled {
for s in manager.sessions { s.captureSnapshot() }
try? await Task.sleep(nanoseconds: 1_500_000_000)
}
}
.sheet(isPresented: $showEditor) {
HostEditorView(existing: editing, credStore: credStore, tailscaleStore: tailscaleStore,
existingGroups: groups) { host in
if hostStore.hosts.contains(where: { $0.id == host.id }) { hostStore.update(host) }
else { hostStore.add(host) }
}
}
.sheet(isPresented: $showSettings) {
SettingsHost(credStore: credStore, tailscaleStore: tailscaleStore)
}
}
private func content(safeBottom: CGFloat) -> some View {
VStack(alignment: .leading, spacing: 0) {
header
if hostStore.hosts.isEmpty && manager.sessions.isEmpty {
@@ -71,29 +97,16 @@ struct HomeView: View {
hostGrid
}
}
.padding(.horizontal, TX.Space.screenGutter)
.padding(.bottom, TX.Space.xxl)
.padding(.horizontal, gutter)
// 末行要能完整滚到安全区之上（否则最后一排主机卡永远被 home indicator 压着）。
.padding(.bottom, TX.Space.xxl + safeBottom)
}
// 列表内容从物理底边流出去（系统滚动视图的标准观感），别在安全区上方硬切一刀。
.ignoresSafeArea(edges: .bottom)
// 会话卡/进度行的增减跟着同一条曲线，避免连上/断开时整页跳一下。
.animation(TX.Motion.standard, value: manager.sessions.count)
}
}
.background(p.bg.ignoresSafeArea())
// 首页可见时轮询会话内容做文本镜像（缩略卡「真实回滚」的落地方式）。
.task(id: manager.sessions.count) {
while !Task.isCancelled {
for s in manager.sessions { s.captureSnapshot() }
try? await Task.sleep(nanoseconds: 1_500_000_000)
}
}
.sheet(isPresented: $showEditor) {
HostEditorView(existing: editing, credStore: credStore, tailscaleStore: tailscaleStore,
existingGroups: groups) { host in
if hostStore.hosts.contains(where: { $0.id == host.id }) { hostStore.update(host) }
else { hostStore.add(host) }
}
}
.sheet(isPresented: $showSettings) {
SettingsHost(credStore: credStore, tailscaleStore: tailscaleStore)
}
}
// MARK: - 空状态
@@ -178,22 +191,30 @@ struct HomeView: View {
.font(TX.Font.mono(12))
.foregroundStyle(p.textWeak)
}
Spacer()
Spacer(minLength: TX.Space.s)
HStack(spacing: TX.Space.s) {
TXSearchField(text: $search, placeholder: "搜索", shortcut: "⌘K")
.frame(width: 220)
TXSearchField(text: $search, placeholder: "搜索主机")
// 可伸缩而非死死 220：窄窗口（分屏 / iPhone）下固定宽度会把「新建连接」
// 挤出屏幕外。
.frame(minWidth: 120, maxWidth: 220)
TXButton(title: "新建连接", emphasized: true) {
editing = nil
showEditor = true
}
.fixedSize()
TXIconButton(icon: "gearshape", label: "设置") { showSettings = true }
}
}
.padding(.horizontal, TX.Space.screenGutter)
.padding(.horizontal, gutter)
.padding(.top, TX.Space.l)
.padding(.bottom, TX.Space.m)
}
/// 屏幕左右留白：设计基准（iPad 横屏）40pt；窄窗口收到 20pt，否则内容区被吃掉一大截。
private var gutter: CGFloat {
hSize == .compact ? TX.Space.l : TX.Space.screenGutter
}
private var subtitle: String {
var parts: [String] = []
if !manager.sessions.isEmpty { parts.append("\(manager.sessions.count) 个会话在跑") }
@@ -213,60 +234,7 @@ struct HomeView: View {
}
}
/// 首页的「正在连接」行：点主机后到进终端之间的反馈（探测 tmux、等选择、失败）。
/// 独立视图以直接订阅该会话（`SessionManager` 的转发只保证 manager 自身刷新）。
struct ConnectingRow: View {
@ObservedObject var session: TerminalSession
let onCancel: () -> Void
@EnvironmentObject var theme: TXThemeManager
private var p: TXPalette { theme.palette }
private var failed: Bool { session.phaseText.hasPrefix("失败") }
var body: some View {
HStack(spacing: TX.Space.s) {
if failed {
Image(systemName: "exclamationmark.triangle")
.font(.system(size: 13))
.foregroundStyle(p.danger)
} else {
ProgressView().controlSize(.small).tint(TXAccent.base)
}
VStack(alignment: .leading, spacing: 2) {
Text(failed ? "连接 \(session.displayName) 失败" : "正在连接 \(session.displayName)")
.font(TX.Font.mono(13, .medium))
.foregroundStyle(p.text)
Text(detail)
.font(TX.Font.mono(11))
.foregroundStyle(failed ? p.danger : p.textWeak)
.lineLimit(1)
}
Spacer(minLength: TX.Space.s)
if failed {
TXButton(title: "重试") { session.retry() }
}
TXButton(title: failed ? "移除" : "取消", action: onCancel)
}
.padding(.horizontal, TX.Space.m)
.padding(.vertical, TX.Space.s)
.frame(maxWidth: .infinity, alignment: .leading)
.background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.card))
.overlay(
RoundedRectangle(cornerRadius: TX.Radius.card)
.strokeBorder(failed ? p.danger.opacity(0.4) : p.border, lineWidth: 1)
)
.padding(.top, TX.Space.xs)
}
private var detail: String {
if failed { return String(session.phaseText.dropFirst(3)) }
if session.pendingSessionChoice != nil { return "等待选择 tmux 会话" }
if !session.banner.isEmpty { return session.banner }
return session.phaseText
}
}
// MARK: - 活动会话卡（3 列等宽）
// MARK: - 活动会话卡
/// 已建立的会话。**排除正在连接的**（它们走 ConnectingRow）—— 否则同一会话既有进度行又有卡片，
/// 而且卡片里的 tmux 信息此刻还没定（会先显示成「原生窗口」再跳变）。
@@ -277,8 +245,15 @@ struct ConnectingRow: View {
}
}
/// 会话卡：**一排固定 3 格**，不足 3 条从左往右排（不拉伸、不居中），每格 **4:3**。
///
/// 固定 3 列的好处：卡片尺寸与位置不随会话数跳动 —— 连上第二台主机时第一张卡不该改变大小。
/// 超过 3 条自动换行到下一排。
private var sessionCards: some View {
HStack(alignment: .top, spacing: TX.Space.m) {
LazyVGrid(
columns: Array(repeating: GridItem(.flexible(), spacing: TX.Space.m), count: 3),
spacing: TX.Space.m
) {
ForEach(liveSessions) { s in
SessionCard(
session: s,
@@ -288,15 +263,17 @@ struct ConnectingRow: View {
manager.focus(s)
router.enter(s.id)
}
.aspectRatio(4.0 / 3.0, contentMode: .fit)
}
}
.frame(height: 560)
}
// MARK: - 全部主机（4 列，按内容高度）
private var hostGrid: some View {
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: TX.Space.m), count: 4),
// 设计基准 4 列（iPad 横屏）；窄窗口 2 列，否则每张卡窄到主机名都放不下。
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: TX.Space.m),
count: hSize == .compact ? 2 : 4),
spacing: TX.Space.m) {
ForEach(filteredHosts) { host in
HostTile(host: host,
@@ -336,7 +313,7 @@ struct ConnectingRow: View {
.foregroundStyle(p.border)
)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
private func credName(for host: SavedHost) -> String? {
@@ -428,27 +405,36 @@ struct SessionCard: View {
}
}
/// 整张卡是**一个**按钮：卡脚的「回到会话 →」与点卡片是同一个动作，做成嵌套 Button 只会
/// 抢命中区、还各自一套按压反馈。故卡脚那行只作为文字提示（affordance），不再是控件。
var body: some View {
VStack(spacing: 0) {
cardHead
Rectangle().fill(p.divider).frame(height: 1)
// 离线/重连时缓存内容轻微模糊 + 压遮罩（设计：blur(1.5px) + rgba(24,26,40,.72)），
// 说明「内容还在，只是链路断了」。
TXTerminalMirror(lines: session.snapshotLines, background: p.terminalBackground)
.blur(radius: isTroubled ? 1.5 : 0)
.overlay { if isTroubled { troubleVeil } }
Rectangle().fill(p.divider).frame(height: 1)
cardFoot
Button(action: onOpen) {
VStack(spacing: 0) {
cardHead
Rectangle().fill(p.divider).frame(height: 1)
// 离线/重连时缓存内容轻微模糊 + 压遮罩（设计：blur(1.5px) + rgba(24,26,40,.72)），
// 说明「内容还在，只是链路断了」。
TXTerminalMirror(lines: session.snapshotLines, background: p.terminalBackground)
.blur(radius: isTroubled ? 1.5 : 0)
.overlay { if isTroubled { troubleVeil } }
Rectangle().fill(p.divider).frame(height: 1)
cardFoot
}
// **必须**主动填满外面给的高度：`.frame(height:)` 只是给了个 560 的框，内容不声明
// 要撑满就按自身理想高度居中放进去 —— 内容少的卡会比内容多的矮一截、上下各缩 10pt，
// 一排卡片的上下边就对不齐了（改成 LazyVGrid 之前是 HStack 顶对齐，只在底边露馅）。
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(p.surfaceDark)
.clipShape(RoundedRectangle(cornerRadius: 13))
.overlay(
RoundedRectangle(cornerRadius: 13)
.strokeBorder(isFocused ? TXAccent.selectedStroke : p.border, lineWidth: 1)
)
.txShadow(isFocused ? TX.Elevation.cardFocused : TX.Elevation.card)
.animation(TX.Motion.quick, value: isFocused)
.contentShape(Rectangle())
}
.background(p.surfaceDark)
.clipShape(RoundedRectangle(cornerRadius: 13))
.overlay(
RoundedRectangle(cornerRadius: 13)
.strokeBorder(isFocused ? TXAccent.selectedStroke : p.border, lineWidth: 1)
)
.shadow(color: .black.opacity(isFocused ? 0.4 : 0.2), radius: isFocused ? 9 : 5, y: 6)
.contentShape(Rectangle())
.onTapGesture(perform: onOpen)
.buttonStyle(.txPress)
}
private var cardHead: some View {
@@ -528,12 +514,9 @@ struct SessionCard: View {
Text("⌘\(shortcutIndex)")
.font(TX.Font.mono(10.5))
.foregroundStyle(p.textFaint)
Button(action: onOpen) {
Text(isTroubled ? "立即重试" : "回到会话 →")
.font(TX.Font.mono(11.5, .medium))
.foregroundStyle(TXAccent.textBright)
}
.buttonStyle(.plain)
Text(isTroubled ? "立即重试" : "回到会话 →")
.font(TX.Font.mono(11.5, .medium))
.foregroundStyle(TXAccent.textBright)
}
.padding(.horizontal, TX.Space.s)
.frame(height: 38)
@@ -590,9 +573,11 @@ struct HostTile: View {
Button(action: onTap) {
VStack(alignment: .leading, spacing: TX.Space.s) {
HStack(alignment: .top, spacing: TX.Space.s) {
// 图标染发行版品牌色（Ubuntu 橙 / Debian 红 / macOS 中性银…），
// 一眼扫过去就能按 OS 分辨主机；认不出的发行版回中性。
Image(systemName: icon)
.font(.system(size: 15, weight: .light))
.foregroundStyle(p.text4)
.foregroundStyle(TXTech.osTint(host.os, p))
.frame(width: 30, height: 30)
.background(p.surface, in: RoundedRectangle(cornerRadius: 8))
VStack(alignment: .leading, spacing: 2) {
@@ -614,9 +599,12 @@ struct HostTile: View {
}
}
HStack(spacing: 5) {
if host.useMosh { TXBadge(text: "mosh") } else { TXBadge(text: "SSH") }
if hasTsnet { TXBadge(text: "tsnet") }
if let credName { TXBadge(text: credName, emphasized: true) }
// 传输协议（互斥）着语义冷色；tsnet 是招牌能力，用 app 强调色；
// 凭据名是用户自己命的名、不是技术标签 → 中性（详见 TXTech）。
let transport = TXTech.transport(host.useMosh, p)
TXBadge(text: transport.text, tint: transport.tint)
if hasTsnet { TXBadge(text: "tsnet", emphasized: true) }
if let credName { TXBadge(text: credName) }
}
}
.padding(TX.Space.s)
@@ -627,6 +615,6 @@ struct HostTile: View {
.strokeBorder(p.border, lineWidth: 1)
)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}

2
apps/TerminalX/iOS/HostsView.swift
View File

@@ -146,7 +146,7 @@ struct HostCard: View {
.background(p.surface, in: RoundedRectangle(cornerRadius: TX.Radius.card))
.overlay(RoundedRectangle(cornerRadius: TX.Radius.card).stroke(p.border, lineWidth: 1))
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
private func badge(_ icon: String, _ text: String, _ color: Color) -> some View {

811
apps/TerminalX/iOS/RailSidebar.swift
View File

@@ -1,158 +1,380 @@
import SwiftUI
// 设计稿 `1b 终端-沉浸轨道` 的左侧 56pt 轨道 + `3a 侧边栏-遮罩态/Pin 态` 的 288pt 面板。
// 侧边栏两态（收起 56pt 轨道 ⇄ 固定展开 288pt）的**唯一**视图。
//
// **开合语义（唯一、不歧义）**：`›` 方块是 App logo，不可点。开合只有一枚按钮，两态方向相反——
// 折叠态在轨道底部（»展开），展开态在标题右侧（«收起）。Pin 是独立按钮，只在展开态出现。
// 三态元素不增不减，只是展示密度不同。
// 动画模型（关键，别再拆回"轨道 + 面板"两套视图）：
// 内容永远按 288pt 全宽排版；收起只是把容器宽度收到 railWidth 并 `clipped()`
// —— 「收起 = 展开在左侧裁切一部分」的字面实现。
// 最左 railWidth 是**图标列**：logo(展开键) / 搜索 / 首页 / 头像 / window 徽标 /
// 状态点 / 齿轮在两态里**同尺寸同位置**，宽度动画时纹丝不动；右侧明细
// （标题、副行、快捷键、选中底）随展开淡入、随收起淡出并被裁掉。
// 视图直接参与布局（无浮层/遮罩）：收起时明细淡出、终端从右侧盖上来，展开反向
// —— 用户定稿就要这个效果。开合入口：Logo 位（收起态=»）与头部收起键（«）。
//
// **命中裁剪**：`clipped()` 只裁绘制不裁触摸 —— 整行按钮（首页/会话/window 行）在
// 收起态会把不可见的明细区伸进终端里抢点击。所以每个整行按钮都用 `LeadingHitShape`
// 把命中区限制在当前可见宽度内；纯明细控件（搜索框、Pin、新建 window）额外
// `allowsHitTesting(expanded)`。
/// 折叠轨道（56pt，竖屏 48pt）。元素中心线统一在轨道正中。
struct RailView: View {
/// 整行按钮的命中形状：只有左起 `width` 宽度可点（随开合动画走）。
private struct LeadingHitShape: Shape {
var width: CGFloat
var animatableData: CGFloat {
get { width }
set { width = newValue }
}
func path(in rect: CGRect) -> Path {
Path(CGRect(x: 0, y: 0, width: width, height: rect.height))
}
}
struct TerminalSidebar: View {
@ObservedObject var manager: SessionManager
@ObservedObject var router: AppRouter
/// 当前会话（TMUX 段列它的 window）。
/// 当前会话（tmux 段列它的 window）。
@ObservedObject var session: TerminalSession
@ObservedObject var tailscaleStore: TailscaleStore
/// 收起态宽度（竖屏 48）。图标列宽 = 这个值，两态图标中心线才重合。
let railWidth: CGFloat
/// home indicator 安全区（沉浸页铺满物理屏，由底栏自己让位）。
let safeBottom: CGFloat
let onNewHost: () -> Void
let onSettings: () -> Void
@Binding var search: String
@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 }
private var expanded: Bool { router.sidebar.isExpanded }
private var currentWidth: CGFloat { expanded ? TX.Layout.sidebarWidth : railWidth }
// 纵向节奏取自设计稿 `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 与展开键有框。
content
.frame(width: TX.Layout.sidebarWidth, alignment: .leading)
.background(p.surfaceDark)
.frame(width: currentWidth, alignment: .leading)
.clipped()
}
private var content: some View {
VStack(alignment: .leading, spacing: 0) {
header
searchRow
.padding(.bottom, TX.Space.s)
homeRow
sectionRow(label: "活动会话", trailing: "\(manager.sessions.count)")
sessionRows
newHostRow
tmuxDivider
tmuxLabelRow
tmuxRows
Spacer(minLength: TX.Space.s)
tailscaleRow
footRow
}
}
// MARK: - 头部
/// Logo 位是展开的**主入口**（用户定稿：将来 App Logo 设计与展开按钮一体）：
/// 收起态显展开键（»），展开态还原成 Logo（`›`，不可点）。两者同框同位交叉淡化。
private var header: some View {
HStack(spacing: 0) {
ZStack {
logoBox { Image(systemName: "chevron.right.2").font(.system(size: 13, weight: .semibold)) }
.opacity(expanded ? 0 : 1)
logoBox { Text("›").font(TX.Font.mono(15, .bold)) }
.opacity(expanded ? 1 : 0)
}
.frame(width: railWidth)
.contentShape(Rectangle())
.onTapGesture { if !expanded { router.toggleSidebar() } }
.accessibilityLabel(expanded ? "terminalX" : "展开侧边栏")
.accessibilityAddTraits(expanded ? [] : .isButton)
HStack(spacing: TX.Space.s) {
Text("terminalX")
.font(TX.Font.mono(14, .medium))
.foregroundStyle(p.text)
Spacer(minLength: 0)
TXIconButton(icon: "chevron.left.2", size: 28, label: "收起侧边栏") {
router.toggleSidebar()
}
}
.padding(.trailing, TX.Space.s)
.opacity(expanded ? 1 : 0)
.allowsHitTesting(expanded)
}
.padding(.top, 14)
.padding(.bottom, 10)
}
/// Logo / 展开键共用的 30×30 方框（同框同位，只换内容物）。
private func logoBox(@ViewBuilder _ inner: () -> some View) -> some View {
inner()
.foregroundStyle(TXAccent.text)
.frame(width: 30, height: 30)
.background(p.surface, in: RoundedRectangle(cornerRadius: 9))
.overlay(RoundedRectangle(cornerRadius: 9).strokeBorder(p.border, lineWidth: 1))
}
/// 搜索：收起 = 裸图标（点击展开去搜），展开 = 输入框。字段的放大镜与图标列中心
/// 几乎重合（12 + 10 + 6 ≈ railWidth/2），交叉淡化读作"图标长成了输入框"。
private var searchRow: some View {
ZStack(alignment: .leading) {
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: railWidth)
.opacity(expanded ? 0 : 1)
.allowsHitTesting(!expanded)
TXSearchField(text: $search, placeholder: "搜索主机 · 会话")
.padding(.leading, 12)
.padding(.trailing, TX.Space.m)
.opacity(expanded ? 1 : 0)
.allowsHitTesting(expanded)
}
.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 homeRow: some View {
Button { router.goHome() } label: {
HStack(spacing: 0) {
Image(systemName: "house")
.font(.system(size: 17))
.foregroundStyle(p.text3)
.frame(width: railWidth)
HStack {
Text("首页")
.font(TX.Font.mono(13, .medium))
.foregroundStyle(p.text)
Spacer(minLength: 0)
Text("⌘⇧H")
.font(TX.Font.mono(10.5))
.foregroundStyle(p.textFaint)
}
.padding(.trailing, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.frame(height: 36)
.contentShape(LeadingHitShape(width: currentWidth))
}
.buttonStyle(.txPress)
.accessibilityLabel("首页")
}
private var divider: some View {
// MARK: - 分组标题 ⇄ 轨道短分隔线（同一行的两种密度）
/// 展开 = 分组小标题；收起 = 图标列里 24pt 短分隔线。语义同为"分组"，交叉淡化。
private func sectionRow(label: String, trailing: String? = nil) -> some View {
ZStack(alignment: .leading) {
shortDivider
.frame(width: railWidth)
.opacity(expanded ? 0 : 1)
TXSectionLabel(text: label, trailing: trailing)
.padding(.horizontal, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.frame(height: 26)
}
private var shortDivider: 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)
// MARK: - 会话
@ViewBuilder private var sessionRows: some View {
if manager.activeSessions.isEmpty {
Text("没有在跑的会话")
.font(TX.Font.mono(11.5))
.foregroundStyle(p.textWeak)
.padding(.leading, railWidth)
.frame(height: 32, alignment: .leading)
.opacity(expanded ? 1 : 0)
}
ForEach(manager.activeSessions) { s in
SidebarSessionRow(session: s,
isSelected: router.route.sessionID == s.id,
expanded: expanded, railWidth: railWidth,
hitWidth: currentWidth) {
manager.focus(s)
router.enter(s.id)
}
}
}
/// 虚线 + 号：在当前主机之外新开会话。
private var newHostButton: some View {
/// 虚线 + 号：在当前主机之外新开会话（两态都可点）。
private var newHostRow: 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)
)
HStack(spacing: 0) {
Image(systemName: "plus")
.font(.system(size: 12, weight: .medium))
.foregroundStyle(p.textWeak)
.frame(width: 30, height: 30)
.background(
RoundedRectangle(cornerRadius: 9)
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [3, 3]))
.foregroundStyle(p.border)
)
.frame(width: railWidth)
Text("连接新主机…")
.font(TX.Font.mono(12))
.foregroundStyle(p.text4)
.opacity(expanded ? 1 : 0)
Spacer(minLength: 0)
}
.frame(height: 40)
.contentShape(LeadingHitShape(width: currentWidth))
}
.buttonStyle(.plain)
.padding(.top, 9)
.buttonStyle(.txPress)
.accessibilityLabel("连接新主机")
}
/// TMUX 段：标签 + window 数字。无 tmux 的主机换成「窗口」段（客户端窗口）。
private var tmuxSection: some View {
VStack(spacing: 7) {
Text(session.tmuxSummary == nil ? "窗口" : "TMUX")
// MARK: - tmux 段
/// 展开 = 渐隐分隔（设计 3a）；收起 = 图标列短线。
private var tmuxDivider: some View {
ZStack(alignment: .leading) {
shortDivider
.frame(width: railWidth)
.opacity(expanded ? 0 : 1)
LinearGradient(colors: [p.divider.opacity(0), p.divider, p.divider.opacity(0)],
startPoint: .leading, endPoint: .trailing)
.frame(height: 1)
.padding(.horizontal, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.padding(.vertical, TX.Space.s)
}
/// 收起 = 图标列里的 accent 迷你标签（拼写按 TXTech 规范：tmux 小写）；
/// 展开 = 完整分组标题（tmux · 主机 · 会话名）。
private var tmuxLabelRow: some View {
ZStack(alignment: .leading) {
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)
.frame(width: railWidth)
.opacity(expanded ? 0 : 1)
TXSectionLabel(text: tmuxHeader)
.padding(.horizontal, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.frame(height: 22)
.padding(.bottom, 4)
}
@ViewBuilder private var tmuxRows: some View {
if let tmux = session.tmuxController {
ForEach(tmux.windows) { win in
SidebarWindowRow(window: win,
isSelected: win.id == tmux.activeWindowID,
expanded: expanded, railWidth: railWidth,
hitWidth: currentWidth) {
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
WindowRowBody(
index: "\(i)",
title: i == 0 && !summary.currentTitle.isEmpty ? summary.currentTitle : "window \(i)",
subtitle: i == 0 && summary.panes > 0
? "\(summary.panes) pane\(summary.panes == 1 ? "" : "s")" : "1 pane",
isSelected: i == 0,
expanded: expanded, railWidth: railWidth)
}
newWindowRow {}
} else {
Text("无 tmux · 客户端窗口")
.font(TX.Font.mono(11.5))
.foregroundStyle(p.textWeak)
.padding(.leading, railWidth)
.frame(height: 32, alignment: .leading)
.opacity(expanded ? 1 : 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)
)
/// 「新建 window ⌘T」：纯明细行 —— 收起态整行淡出但保留高度，两态节奏一致。
private func newWindowRow(_ action: @escaping () -> Void) -> some View {
Button(action: action) {
HStack(spacing: 0) {
Color.clear.frame(width: railWidth, height: 1)
Text("新建 window")
.font(TX.Font.mono(12))
.foregroundStyle(p.text4)
Spacer(minLength: 0)
Text("⌘T")
.font(TX.Font.mono(10.5))
.foregroundStyle(p.textFaint)
.padding(.trailing, TX.Space.m)
}
.frame(height: 32)
}
.buttonStyle(.txPress)
.opacity(expanded ? 1 : 0)
.allowsHitTesting(expanded)
}
private var linkColor: Color { RailSidebarStyle.statusColor(session, p) }
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)"
}
// MARK: - 底部（自上而下：tailnet 状态 · 分割线 + 齿轮）
/// tailnet 状态：点在图标列（两态可见），文字是明细。
private var tailscaleRow: some View {
HStack(spacing: 0) {
TXStatusDot(color: tailscaleStore.connections.isEmpty ? p.offline : p.online,
punchOut: p.surfaceDark)
.frame(width: railWidth)
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 {
Text([c.hostname, c.lastSelfIP].compactMap { $0 }.joined(separator: " · "))
.font(TX.Font.mono(10.5))
.foregroundStyle(p.textWeak)
.lineLimit(1)
}
}
.padding(.trailing, TX.Space.m)
.opacity(expanded ? 1 : 0)
Spacer(minLength: 0)
}
.frame(height: 40)
}
/// 底部带：分割线与舞台提示条的分割线同一条 y（都在 footBand 顶），齿轮居中在带内。
private var footRow: some View {
VStack(spacing: 0) {
Rectangle().fill(p.divider).frame(height: 1)
Button(action: onSettings) {
HStack(spacing: 0) {
Image(systemName: "gearshape")
.font(.system(size: 17))
.foregroundStyle(p.text3)
.frame(width: railWidth)
Text("设置")
.font(TX.Font.mono(12))
.foregroundStyle(p.text4)
.opacity(expanded ? 1 : 0)
Spacer(minLength: 0)
}
.frame(height: TX.Layout.footBand(safeBottom))
.contentShape(LeadingHitShape(width: currentWidth))
}
.buttonStyle(.txPress)
.accessibilityLabel("设置")
}
}
}
/// 轨道与面板共用的状态色映射。
@@ -168,283 +390,60 @@ enum RailSidebarStyle {
}
}
// MARK: - 288pt 侧边栏面板
// MARK: - 行
/// 展开态面板（遮罩 / 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 + 右侧链路/重连标。
/// 会话行：图标列 30pt 头像（两态同位）+ 明细（名称·window title + 链路标）。
/// 选中底随明细淡入淡出 —— 收起态由头像自身的选中样式表达，避免高亮块被裁出直边。
struct SidebarSessionRow: View {
@ObservedObject var session: TerminalSession
let isSelected: Bool
let expanded: Bool
let railWidth: CGFloat
let hitWidth: CGFloat
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,
HStack(spacing: 0) {
TXInitialsAvatar(initials: session.initials, size: 30,
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)
punchOut: isSelected && expanded ? TXAccent.selectedBg : p.surfaceDark)
.frame(width: railWidth)
HStack(spacing: TX.Space.s) {
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
}
Spacer(minLength: TX.Space.xs)
trailingTag
.padding(.trailing, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.padding(.horizontal, TX.Space.s)
.frame(height: 48)
.background(isSelected ? TXAccent.selectedBg : .clear,
in: RoundedRectangle(cornerRadius: TX.Radius.control))
// inset 描边而非 border：选中时内容不位移 1pt。
.overlay(
.frame(height: 44)
.background(
RoundedRectangle(cornerRadius: TX.Radius.control)
.strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
.fill(TXAccent.selectedBg)
.overlay(
RoundedRectangle(cornerRadius: TX.Radius.control)
.strokeBorder(TXAccent.selectedStroke, lineWidth: 1)
)
.padding(.horizontal, TX.Space.xs)
.opacity(isSelected && expanded ? 1 : 0)
)
.padding(.horizontal, TX.Space.s)
.contentShape(LeadingHitShape(width: hitWidth))
.animation(TX.Motion.quick, value: isSelected)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
private var title: String {
@@ -473,13 +472,14 @@ struct SidebarSessionRow: View {
}
}
/// 侧边栏 window 行：26×22pt 编号徽标 + title + cwd/panes。
/// window 行：图标列 26×22 编号徽标（两态同位，选中态徽标自己高亮）+ 明细（title + cwd/panes）。
struct SidebarWindowRow: View {
@ObservedObject var window: TmuxWindow
let isSelected: Bool
let expanded: Bool
let railWidth: CGFloat
let hitWidth: CGFloat
let onTap: () -> Void
@EnvironmentObject var theme: TXThemeManager
private var p: TXPalette { theme.palette }
private var subtitle: String {
var parts: [String] = []
@@ -491,19 +491,44 @@ struct SidebarWindowRow: View {
var body: some View {
Button(action: onTap) {
WindowRowBody(index: "\(window.index)", title: window.title, subtitle: subtitle,
isSelected: isSelected, expanded: expanded, railWidth: railWidth)
.contentShape(LeadingHitShape(width: hitWidth))
}
.buttonStyle(.txPress)
}
}
/// window 行的视觉本体（SidebarWindowRow 与占位行共用）。
struct WindowRowBody: View {
let index: String
let title: String
let subtitle: String
let isSelected: Bool
let expanded: Bool
let railWidth: CGFloat
@EnvironmentObject var theme: TXThemeManager
private var p: TXPalette { theme.palette }
var body: some View {
HStack(spacing: 0) {
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))
.overlay(
RoundedRectangle(cornerRadius: 5)
.strokeBorder(isSelected ? TXAccent.selectedStroke : .clear, lineWidth: 1)
)
.frame(width: railWidth)
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)
Text(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)
@@ -514,16 +539,20 @@ struct SidebarWindowRow: View {
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)
.padding(.trailing, TX.Space.m)
.opacity(expanded ? 1 : 0)
}
.buttonStyle(.plain)
.frame(height: 44)
.background(
RoundedRectangle(cornerRadius: TX.Radius.control)
.fill(TXAccent.selectedBg.opacity(0.75))
.overlay(
RoundedRectangle(cornerRadius: TX.Radius.control)
.strokeBorder(TXAccent.selectedStroke, lineWidth: 1)
)
.padding(.horizontal, TX.Space.xs)
.opacity(isSelected && expanded ? 1 : 0)
)
.animation(TX.Motion.quick, value: isSelected)
}
}

6
apps/TerminalX/iOS/SessionPickerSheet.swift
View File

@@ -84,7 +84,7 @@ struct SessionPickerSheet: View {
.background(p.surface, in: Capsule())
.overlay(Capsule().strokeBorder(p.border, lineWidth: 1))
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
.accessibilityLabel("直接连接原生终端，不经过 tmux")
}
}
@@ -115,7 +115,7 @@ struct SessionPickerSheet: View {
Button { onAttach(s.name) } label: {
sessionRow(s)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
if index < choice.sessions.count - 1 {
Rectangle().fill(p.divider).frame(height: 1)
.padding(.horizontal, TX.Space.m)
@@ -200,7 +200,7 @@ struct SessionPickerSheet: View {
.background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.card))
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}
}

2
apps/TerminalX/iOS/SettingsView.swift
View File

@@ -69,7 +69,7 @@ struct SettingsView: View {
Section("主题（app 与终端统一）") {
ForEach(TXPalette.all) { pal in
Button { theme.apply(pal) } label: { themeRow(pal) }
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}
.listRowBackground(p.surface)

163
apps/TerminalX/iOS/TXParts.swift
View File

@@ -2,6 +2,57 @@ import SwiftUI
// 设计稿反复出现的小件（首页 / 轨道 / 侧边栏共用）。数值取自 docs/design/UI-DESIGN-HANDOFF.md。
// MARK: - 通用修饰
extension View {
/// 统一走 `TX.Elevation` 的投影（别在视图里手写 `.shadow`，那样迟早各处不一致）。
func txShadow(_ s: TX.Shadow) -> some View {
shadow(color: .black.opacity(s.opacity), radius: s.radius, x: s.x, y: s.y)
}
}
/// 可按下容器的按压反馈：轻微缩放 + 压暗。
///
/// `.plain` 在深色界面里**完全没有**按下反馈 —— 触屏上"点了没反应"是最伤手感的一类瑕疵，
/// 尤其主机卡/会话卡这种点下去要等几百毫秒才有结果的入口。
struct TXPressStyle: ButtonStyle {
/// 大块卡片缩得更少（大面积缩放会显得晃）；小图标可以缩多一点。
var scale: CGFloat = 0.985
var dim: Double = 0.78
func makeBody(configuration: Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? scale : 1)
.opacity(configuration.isPressed ? dim : 1)
.animation(TX.Motion.quick, value: configuration.isPressed)
}
}
extension ButtonStyle where Self == TXPressStyle {
/// 卡片 / 列表行
static var txPress: TXPressStyle { TXPressStyle() }
/// 图标、圆点等小目标
static var txPressTight: TXPressStyle { TXPressStyle(scale: 0.9, dim: 0.7) }
}
/// 量一次屏幕度量（安全区 + 可用尺寸），供两件事用：
///
/// 1. **沉浸终端**要顶到物理屏幕边缘（`ignoresSafeArea`），于是必须自己让位 —— 底栏在
/// 「内容带 + 安全区」里居中、浮起胶囊按硬件遮挡下移。SwiftUI 没有读安全区的环境值，
/// 故必须在 `ignoresSafeArea` **之前**量。
/// 2. **首页**按屏高收敛会话卡高度（硬写 560pt 在竖屏/分屏/小 iPad 上会把主机网格挤出屏外）。
///
/// 旋转、分屏改尺寸都会自动重新量，不需要监听通知。
struct TXScreenMetrics<Content: View>: View {
@ViewBuilder let content: (GeometryProxy) -> Content
var body: some View {
GeometryReader { geo in
content(geo)
}
}
}
/// 状态点：8pt 实心 + 2pt 挖底描边（`box-shadow: 0 0 0 2px <底色>`，让点浮在头像/卡片边缘上）。
struct TXStatusDot: View {
let color: Color
@@ -18,6 +69,8 @@ struct TXStatusDot: View {
Circle().stroke(punchOut, lineWidth: 2)
}
}
// 链路状态变色（绿 → 琥珀 → 灰）渐变过去，别硬跳。
.animation(TX.Motion.quick, value: color)
}
}
@@ -55,7 +108,11 @@ struct TXInitialsAvatar: View {
}
}
/// 分组小标题（600 10px, ls .09em, uppercase）。
/// 分组小标题（600 10px, ls .09em）。
///
/// **不做 `.uppercased()`**：这类标签会嵌主机名/会话名/技术名（`tmux · mac-studio · dev`），
/// 排版性大写会把它们全改错（曾显示成 `TMUX · MAC-STUDIO · DEV`）。中文本来无大小写，
/// 英文标签直接按 `TXTech` 的规范拼写传进来即可。
struct TXSectionLabel: View {
let text: String
/// 右侧计数（如「活动会话 3」的 3 单独右对齐）。
@@ -66,7 +123,7 @@ struct TXSectionLabel: View {
var body: some View {
HStack {
Text(text.uppercased())
Text(text)
.font(TX.Font.mono(10, .semibold))
.tracking(0.9)
.foregroundStyle(color ?? p.textWeak)
@@ -80,25 +137,73 @@ struct TXSectionLabel: View {
}
}
/// 徽标胶囊（主机卡的 mosh / tsnet / SSH / SE key）。
/// 技术标签的**拼写与配色**规范（`SSH` / `mosh` / `tsnet` / `tmux` / 发行版名）。
///
/// **拼写**：一律照各自的官方写法 —— 缩写全大写（`SSH`、`TLS`）、项目名按作者的写法
/// （`mosh` / `tmux` / `tsnet` 本来就是小写）、产品名照抄（`macOS`、`TrueNAS`）。
/// 别为了"看起来统一"把 `mosh` 写成 `MOSH` 或把 `SSH` 写成 `ssh` —— 目标用户是开发者，
/// 写错拼写比大小写不齐更刺眼。同理**分组小标题的排版性大写不施加到名字上**
/// （`TMUX · MAC-STUDIO · DEV` 把主机名和会话名都改错了）。
///
/// **配色**：取各技术自己的"主题色"，映射到当前 flavor 的 Catppuccin 调色板。
/// 只染文字与描边、底色压到 12% —— 强调色不铺面（设计约束）。
@MainActor
enum TXTech {
/// 传输协议：冷色区分，两者互斥所以一行里只出现一个。
static func transport(_ useMosh: Bool, _ p: TXPalette) -> (text: String, tint: Color) {
useMosh ? ("mosh", p.mosh) : ("SSH", p.linkPath)
}
/// 发行版 / OS 的品牌色（Ubuntu 橙 → peach、Debian 红 → red、树莓 → red…）。
/// 认不出来就回中性色，不硬凑。
static func osTint(_ os: String?, _ p: TXPalette) -> Color {
let s = (os ?? "").lowercased()
if s.contains("ubuntu") { return p.reconnecting } // Ubuntu orange
if s.contains("debian") || s.contains("raspberry") { return p.danger }
if s.contains("centos") || s.contains("rhel") || s.contains("red hat") { return p.danger }
if s.contains("fedora") || s.contains("truenas") || s.contains("alpine") { return p.linkPath }
if s.contains("arch") { return p.mosh }
if s.contains("suse") { return p.online }
if s.contains("macos") || s.contains("darwin") { return p.text3 } // Apple 是中性银
return p.text4
}
}
/// 徽标胶囊（主机卡的 mosh / SSH / tsnet / 凭据名）。
///
/// `tint` 给技术标签上语义色（见 `TXTech`）；`emphasized` 是 app 强调色，**只留给 tsnet**
/// —— 它是本产品的招牌能力。凭据名是用户自己命的名、不是技术标签，保持中性，
/// 免得一排徽标全是彩色反而没有重点。
struct TXBadge: View {
let text: String
var tint: Color?
var emphasized: Bool = false
@EnvironmentObject var theme: TXThemeManager
private var p: TXPalette { theme.palette }
private var fg: Color { emphasized ? TXAccent.text : (tint ?? p.text4) }
private var stroke: Color {
if emphasized { return TXAccent.selectedStroke }
return tint?.opacity(0.35) ?? .clear
}
var body: some View {
Text(text)
.font(TX.Font.mono(11, .medium))
.foregroundStyle(emphasized ? TXAccent.text : p.text4)
.foregroundStyle(fg)
.padding(.horizontal, 7)
.padding(.vertical, 3)
.background(emphasized ? TXAccent.selectedBg : p.surface,
in: RoundedRectangle(cornerRadius: 5))
.overlay(
RoundedRectangle(cornerRadius: 5)
.strokeBorder(emphasized ? TXAccent.selectedStroke : .clear, lineWidth: 1)
)
.background {
let shape = RoundedRectangle(cornerRadius: 5)
if emphasized {
shape.fill(TXAccent.selectedBg)
} else if let tint {
shape.fill(tint.opacity(0.12))
} else {
shape.fill(p.surface)
}
}
.overlay(RoundedRectangle(cornerRadius: 5).strokeBorder(stroke, lineWidth: 1))
}
}
@@ -123,8 +228,9 @@ struct TXChip: View {
RoundedRectangle(cornerRadius: TX.Radius.badge)
.strokeBorder(isSelected ? TXAccent.selectedStroke : p.divider, lineWidth: 1)
)
.animation(TX.Motion.quick, value: isSelected)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}
@@ -134,20 +240,24 @@ struct TXSearchField: View {
var placeholder: String
var shortcut: String?
@EnvironmentObject var theme: TXThemeManager
/// 聚焦态：描边转强调色。接妙控键盘用 Tab 走焦点时必须看得出焦点在哪
/// （无障碍底线：键盘焦点可见）。
@FocusState private var focused: Bool
private var p: TXPalette { theme.palette }
var body: some View {
HStack(spacing: TX.Space.xs) {
Image(systemName: "magnifyingglass")
.font(.system(size: 12))
.foregroundStyle(p.textWeak)
.foregroundStyle(focused ? TXAccent.text : p.textWeak)
TextField(placeholder, text: $text)
.font(TX.Font.mono(12))
.foregroundStyle(p.text)
.textFieldStyle(.plain)
.autocorrectionDisabled()
.textInputAutocapitalization(.never)
if let shortcut, text.isEmpty {
.focused($focused)
if let shortcut, text.isEmpty, !focused {
Text(shortcut)
.font(TX.Font.mono(10.5))
.foregroundStyle(p.textFaint)
@@ -157,8 +267,10 @@ struct TXSearchField: View {
.frame(height: 32)
.background(p.surface, in: RoundedRectangle(cornerRadius: 8))
.overlay(
RoundedRectangle(cornerRadius: 8).strokeBorder(p.divider, lineWidth: 1)
RoundedRectangle(cornerRadius: 8)
.strokeBorder(focused ? TXAccent.border : p.divider, lineWidth: 1)
)
.animation(TX.Motion.quick, value: focused)
}
}
@@ -189,7 +301,7 @@ struct TXButton: View {
.strokeBorder(emphasized ? TXAccent.border : p.border, lineWidth: 1)
)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}
@@ -228,8 +340,9 @@ struct TXIconButton: View {
.frame(width: hitSize ?? max(size, TX.Layout.minTouch),
height: hitSize ?? max(size, TX.Layout.minTouch))
.contentShape(Rectangle())
.animation(TX.Motion.quick, value: isSelected)
}
.buttonStyle(.plain)
.buttonStyle(.txPressTight)
.accessibilityLabel(label ?? icon)
}
}
@@ -251,13 +364,24 @@ struct TXTerminalMirror: View {
var placeholder: String = "等待输出…"
var body: some View {
// 尺寸**完全由外部决定**：行堆叠放进 `Color.clear` 的 overlay —— overlay 不参与父视图定尺，
// 故行数再多也顶不高卡片。（此前行多的卡比同排的高 20pt，一排卡片上下边对不齐；
// 外层 `.frame(height:)` 也压不住它，因为 VStack 的最小高度就是各行高之和。）
// 溢出的旧行被 `clipped()` 切掉，正是想要的——内容底对齐，留住最新输出。
Color.clear
// 有输出时贴底（新行在下缘，与真终端的视觉重心一致）；空的时候占位文案居中。
.overlay(alignment: lines.isEmpty ? .center : .bottomLeading) { rows }
.background(background)
.clipped()
}
private var rows: some View {
VStack(alignment: .leading, spacing: 0) {
Spacer(minLength: 0)
if lines.isEmpty {
Text(placeholder)
.font(TX.Font.mono(fontSize))
.foregroundStyle(p.text4)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
.frame(maxWidth: .infinity, alignment: .center)
}
ForEach(Array(lines.enumerated()), id: \.offset) { _, line in
Text(line.isEmpty ? " " : line)
@@ -272,9 +396,6 @@ struct TXTerminalMirror: View {
}
.padding(.horizontal, 14)
.padding(.vertical, TX.Space.xs)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
.background(background)
.clipped()
}
/// 启发式着色：`readViewportText()` 只给纯文本（ANSI 属性已丢），故按行首符号/常见片段上色，

122
apps/TerminalX/iOS/TerminalChrome.swift
View File

@@ -6,6 +6,10 @@ import SwiftUI
// 终端内容容器顶部留 86pt 预留带给胶囊，预留带用 padding 实现（容器 clipped 防向上溢出）。
/// 浮起胶囊的共用外观：blur 材质 + 半透底 + 常规描边 + 圆角 11。
///
/// **扁平**：分层交给描边和材质，投影只留一点点（`TX.Elevation.floating`）。原先那道
/// `0 10px 30px rgba(0,0,0,.55)` 在终端文字上糊出一大团脏斑 —— 胶囊底本身是半透的，
/// 投影一重就成了"漏墨"。底色相应提到 .92，少了投影仍然读得清。
private struct FloatingCapsule<Content: View>: View {
@EnvironmentObject var theme: TXThemeManager
@ViewBuilder let content: Content
@@ -17,14 +21,14 @@ private struct FloatingCapsule<Content: View>: View {
.frame(height: 34)
.background {
RoundedRectangle(cornerRadius: TX.Radius.capsule)
.fill(p.surfaceDark.opacity(0.88))
.fill(p.surfaceDark.opacity(0.92))
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: TX.Radius.capsule))
}
.overlay(
RoundedRectangle(cornerRadius: TX.Radius.capsule)
.strokeBorder(p.border, lineWidth: 1)
)
.shadow(color: .black.opacity(0.55), radius: 15, y: 10)
.txShadow(TX.Elevation.floating)
}
}
@@ -39,10 +43,17 @@ struct TerminalTitleCapsule: View {
var body: some View {
FloatingCapsule {
HStack(spacing: TX.Space.xs) {
windowDot(TXWindowDot.close, "关闭会话", action: onClose)
windowDot(TXWindowDot.minimize, "最小化", action: onMinimize)
// 顺序沿用 macOS 的肌肉记忆（关闭在左、最小化在右），但形态改成带字形的按钮，
// 详见 windowButton。
windowButton(icon: "xmark", tint: TXWindowDot.close,
label: "关闭会话", action: onClose)
// 向下的 chevron 而不是双向内收箭头：后者在 9.5pt 下糊成一团认不出。
// 向下同时对上设计里的「下滑最小化」手势语义。
windowButton(icon: "chevron.down", tint: TXWindowDot.minimize,
label: "最小化到首页", action: onMinimize)
Rectangle().fill(p.border).frame(width: 1, height: 14)
.padding(.horizontal, 2)
.padding(.leading, 4)
.padding(.trailing, 2)
TXStatusDot(color: RailSidebarStyle.statusColor(session, p), size: 6)
Text(session.displayName)
.font(TX.Font.mono(12.5, .medium))
@@ -54,7 +65,8 @@ struct TerminalTitleCapsule: View {
.foregroundStyle(p.textWeak)
.lineLimit(1)
}
// 终端格子数（设计稿 08 的「· 168×44」）。首次布局后稳定，故不必 @Published。
// 终端格子数（设计稿 08 的「· 168×44」）。侧边栏开合会 resize ——
// 数字经 GridBox.onGridChange → session.objectWillChange 跟着刷新。
Text(gridLabel)
.font(TX.Font.mono(11.5))
.foregroundStyle(p.textFaint)
@@ -91,16 +103,30 @@ struct TerminalTitleCapsule: View {
return "\(g.cols)×\(g.rows)"
}
private func windowDot(_ color: Color, _ label: String, action: @escaping () -> Void) -> some View {
/// 关闭 / 最小化按钮。
///
/// 原来是 macOS 交通灯式的 13pt 纯色圆点，三处不合适：① 纯色块**不说明自己是干什么的** ——
/// mac 上靠 hover 才浮出字形，触屏没有 hover，于是永远只是两个色点；② 13pt 命中目标在
/// 触屏上太小，而"关闭"误触代价很高；③ 圆点是 mac 窗口的语汇，与本 app 通篇的圆角矩形
/// 控件语汇不搭。
///
/// 现在：22pt 圆角方块 + **常显字形**（`✕` 关闭 / `⌄` 收下去 = 缩回首页卡片），颜色语义保留
/// （红=关闭、琥珀=最小化），底色只上 14% 不铺满 —— 与徽标/控件同一套形状语言，命中 26×34。
private func windowButton(icon: String, tint: Color, label: String,
action: @escaping () -> Void) -> some View {
Button(action: action) {
Circle()
.fill(color)
.frame(width: 13, height: 13)
.overlay(Circle().strokeBorder(Color.black.opacity(0.25), lineWidth: 0.5))
.frame(width: 22, height: 30)
Image(systemName: icon)
.font(.system(size: 9.5, weight: .bold))
.foregroundStyle(tint)
.frame(width: 22, height: 22)
.background(tint.opacity(0.14), in: RoundedRectangle(cornerRadius: 7))
.overlay(
RoundedRectangle(cornerRadius: 7).strokeBorder(tint.opacity(0.45), lineWidth: 1)
)
.frame(width: 26, height: 34)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.buttonStyle(.txPressTight)
.accessibilityLabel(label)
}
}
@@ -287,6 +313,8 @@ struct TerminalStateOverlay: View {
}
.padding(TX.Space.l)
.frame(maxWidth: .infinity, maxHeight: .infinity)
// 连上后这一层要淡出去，别"啪"地掀掉（动画由 paneArea 按 phaseText 驱动）。
.transition(.opacity)
}
}
@@ -316,7 +344,7 @@ struct NoTmuxBanner: View {
.frame(width: 28, height: 28)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.buttonStyle(.txPressTight)
}
.padding(.horizontal, TX.Space.s)
.frame(height: 40)
@@ -369,38 +397,74 @@ struct TmuxInstallSheet: View {
RoundedRectangle(cornerRadius: TX.Radius.dialog)
.strokeBorder(p.borderStrong, lineWidth: 1)
)
.shadow(color: .black.opacity(0.7), radius: 40, y: 30)
.txShadow(TX.Elevation.dialog)
}
}
}
/// 底部提示条（34pt）：接硬件键盘时只留这条快捷键清单；触控时由键盘附加行替换（UI-5）。
struct TerminalHintBar: View {
/// 左侧上下文说明（如「Pin 态 · 终端变窄，仅在钉住/解除时 resize 一次」）。
/// 舞台底部动作条。
///
/// **不是快捷键清单，而是真按钮**：iPad 大概率没接键盘，把「竖分屏 / 新 window / 回首页」
/// 只写成 `⌘D` 之类的文字提示等于这些功能对触控用户不存在。硬件键盘接上后这几个动作
/// 仍然可以走快捷键（UI-5），按钮照旧留着 —— 常驻可点是底线。
///
/// 高度 = 内容带 34pt + home indicator 安全区，内容在其中**居中** —— 与侧边栏脚、轨道齿轮
/// 同一条中心线。（此前只有 34pt 且被安全区顶起，屏幕底下留一条 24pt 的空带，看着像"没铺到底"。）
struct TerminalActionBar: View {
/// 左侧上下文说明（会话/链路状态一句话）。
let context: String
let hints: [(key: String, label: String)]
let actions: [Action]
let safeBottom: CGFloat
@EnvironmentObject var theme: TXThemeManager
@Environment(\.horizontalSizeClass) private var hSize
private var p: TXPalette { theme.palette }
struct Action: Identifiable {
let id: String
let icon: String
let title: String
/// 不可用时灰显但仍在（如非 tmux 会话不能分屏）——不隐藏，免得布局跳。
var enabled: Bool = true
let run: () -> Void
}
/// 窄屏只留前两个：四个在 iPhone 上放不下，会折行把 34pt 的带撑破。
private var shown: [Action] { hSize == .compact ? Array(actions.prefix(2)) : actions }
var body: some View {
HStack(spacing: TX.Space.s) {
Text(context)
.font(TX.Font.mono(11.5))
.foregroundStyle(p.textWeak)
.lineLimit(1)
Spacer(minLength: TX.Space.m)
ForEach(hints, id: \.key) { hint in
HStack(spacing: 5) {
Text(hint.key)
.font(TX.Font.mono(11.5, .medium))
.foregroundStyle(p.text4)
Text(hint.label)
.font(TX.Font.mono(11.5))
.foregroundStyle(p.textWeak)
Spacer(minLength: TX.Space.s)
ForEach(shown) { action in
Button(action: action.run) {
HStack(spacing: 5) {
Image(systemName: action.icon)
.font(.system(size: 10.5, weight: .medium))
Text(action.title)
.font(TX.Font.mono(11.5, .medium))
}
.foregroundStyle(action.enabled ? p.text2 : p.textFaint)
.padding(.horizontal, TX.Space.xs)
.frame(height: 26)
.background(action.enabled ? p.surface : .clear,
in: RoundedRectangle(cornerRadius: TX.Radius.badge))
.overlay(
RoundedRectangle(cornerRadius: TX.Radius.badge)
.strokeBorder(action.enabled ? p.border : p.divider, lineWidth: 1)
)
// 动作条永远**单行**：宁可少放一个也不许折行（折行会溢出底部带）。
.lineLimit(1)
.fixedSize()
}
.buttonStyle(.txPress)
.disabled(!action.enabled)
}
}
.padding(.horizontal, TX.Space.m)
.frame(height: TX.Layout.footHeight)
.frame(height: TX.Layout.footBand(safeBottom))
.animation(TX.Motion.standard, value: context)
}
}

19
apps/TerminalX/iOS/TerminalDialogs.swift
View File

@@ -7,19 +7,24 @@ import SwiftUI
// - **红点 / ⌘W = 关闭**：弹一次确认，按主机能力两套文案；`esc` 取消、`⏎` 选推荐项。
/// 浮层容器：遮罩 + 居中卡片（对话框 / 菜单共用）。
///
/// 遮罩淡入、卡片从 96% 长出来（`TX.Motion.pop`）—— 两段分开写才有层次；整块套一个
/// `.transition(.opacity)` 的话卡片只是跟着变淡，弹出感全无。
/// 动画事务由 `AppRouter.present/dismissModal` 提供。
struct TXModalScrim<Content: View>: View {
let onDismiss: () -> Void
@ViewBuilder let content: Content
var body: some View {
ZStack {
Color(hex: 0x0A0B12).opacity(0.42)
TX.Scrim.color.opacity(TX.Scrim.dialog)
.ignoresSafeArea()
.contentShape(Rectangle())
.onTapGesture(perform: onDismiss)
.transition(.opacity)
content
.transition(TX.Motion.pop)
}
.transition(.opacity)
}
}
@@ -60,7 +65,7 @@ struct CloseConfirmDialog: View {
RoundedRectangle(cornerRadius: TX.Radius.dialog)
.strokeBorder(p.borderStrong, lineWidth: 1)
)
.shadow(color: .black.opacity(0.7), radius: 40, y: 30)
.txShadow(TX.Elevation.dialog)
}
}
@@ -102,7 +107,7 @@ struct CloseConfirmDialog: View {
.font(TX.Font.mono(12, confirmingKill ? .semibold : .regular))
.foregroundStyle(p.danger)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
Spacer()
TXButton(title: "取消", action: onCancel)
@@ -129,7 +134,7 @@ struct CloseConfirmDialog: View {
.strokeBorder(Color(hex: 0x8D5560), lineWidth: 1)
)
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
}
}
@@ -201,7 +206,7 @@ struct SplitMenuView: View {
RoundedRectangle(cornerRadius: TX.Radius.dialog - 1)
.strokeBorder(p.borderStrong, lineWidth: 1)
)
.shadow(color: .black.opacity(0.7), radius: 40, y: 30)
.txShadow(TX.Elevation.dialog)
}
}
@@ -273,7 +278,7 @@ struct SplitMenuView: View {
.padding(.horizontal, TX.Space.xs)
.contentShape(Rectangle())
}
.buttonStyle(.plain)
.buttonStyle(.txPress)
.disabled(disabled)
}
}

10
apps/TerminalX/iOS/TerminalSession.swift
View File

@@ -128,15 +128,20 @@ final class TmuxByteChannel: @unchecked Sendable {
final class GridBox: @unchecked Sendable {
private let lock = NSLock()
private var cols = 80, rows = 24, cellW = 0, cellH = 0
/// 格子数**变化**时回调（去重）。网格并非「首次布局后稳定」——侧边栏开合就会 resize，
/// 标题胶囊的格子数要跟着走；TerminalSession 用它转发 objectWillChange。
var onGridChange: (@Sendable () -> Void)?
var value: (cols: Int, rows: Int, cellW: Int, cellH: Int) {
lock.lock(); defer { lock.unlock() }; return (cols, rows, cellW, cellH)
}
func set(cols: Int, rows: Int, cellW: Int, cellH: Int) {
lock.lock()
let changed = self.cols != max(1, cols) || self.rows != max(1, rows)
self.cols = max(1, cols); self.rows = max(1, rows)
if cellW > 0 { self.cellW = cellW } // cell 尺寸稳定，保留最后有效值
if cellH > 0 { self.cellH = cellH }
lock.unlock()
if changed { onGridChange?() }
}
}
@@ -371,6 +376,11 @@ final class TerminalSession: ObservableObject, Identifiable {
self.state = state
self.gate = OutputGate(session: session)
// 格子数变化 → 主线程转发发布（标题胶囊等读 screenGrid 的视图才会刷新）。
screenGrid.onGridChange = { [weak self] in
Task { @MainActor in self?.objectWillChange.send() }
}
// tmux 网关字节：单消费者按序处理（enter 建 controller+喂初始，bytes 续喂）。
let ch = tmuxChannel
Task { @MainActor [weak self] in

92
apps/TerminalX/iOS/Theme.swift
View File

@@ -1,4 +1,5 @@
import SwiftUI
import UIKit
import GhosttyTerminal
import GhosttyTheme
@@ -257,6 +258,9 @@ enum TX {
static let dialog: CGFloat = 15
/// 浮起 chrome（标题/状态胶囊）
static let capsule: CGFloat = 11
/// 终端 pane 容器。**只用在朝 app chrome 的那几个角**——贴着屏幕物理边缘的角必须留直角，
/// 否则会与设备自身的大圆角打架（详见 `TerminalScreen.paneShape`）。
static let pane: CGFloat = 6
// 兼容旧名
static let chip: CGFloat = 9
@@ -291,8 +295,94 @@ enum TX {
static let minTouch: CGFloat = 44
/// 终端主 pane 顶部给浮起胶囊预留
static let capsuleInset: CGFloat = 86
/// 底部区高度：**舞台提示条与侧边栏脚共用**，故两侧的分割线落在同一条 y 上。
/// 底部区**内容带**高度：舞台提示条 / 侧边栏脚 / 轨道齿轮共用，故三者中心线与上方那条
/// 分割线都落在同一条 y 上。真机上还要在下面叠 home indicator 的安全区
/// —— 沉浸页把 chrome 铺到物理边缘，安全区由底栏自己让出（见 `TX.Layout.footBand`）。
static let footHeight: CGFloat = 34
/// 底部区总高 = 内容带 + 安全区。内容在其中**居中**：既贴住物理底边不留悬空的死带，
/// 又不会压到 home indicator 上。
static func footBand(_ safeBottom: CGFloat) -> CGFloat { footHeight + safeBottom }
/// 沉浸态浮起胶囊距**物理**顶边的距离。
///
/// iPad 隐藏状态栏后顶边没有遮挡 → 用设计值 14。灵动岛/刘海机型的安全区读数很大
/// （≥30），此时按硬件让位，避免胶囊钻到岛下面。
static func capsuleTop(_ safeTop: CGFloat) -> CGFloat {
safeTop > 30 ? safeTop - 12 : 14
}
}
/// 动效。设计定稿：状态切换 200–260ms `easeOut`。
///
/// 所有过渡都从这里取曲线 —— 点击、快捷键、无头 URL 驱动的同一个状态变更拿到同一条动画，
/// 并统一响应系统「减弱动态」（位移退化为纯淡入淡出）。
enum Motion {
/// 常规状态切换：路由、侧边栏三态、模态浮层。
@MainActor static var standard: Animation {
.easeOut(duration: (reduceMotion ? 0.12 : 0.24) * slowFactor)
}
/// 轻量反馈：选中态、状态点变色、按压回弹。短一点，避免拖泥带水。
@MainActor static var quick: Animation {
.easeOut(duration: (reduceMotion ? 0.08 : 0.14) * slowFactor)
}
@MainActor static var reduceMotion: Bool { UIAccessibility.isReduceMotionEnabled }
/// 无头验证用的慢放（`-txSlowMotion 1` → ×12）。
///
/// `simctl io screenshot` 本身要几百毫秒，抓不到 240ms 的过渡中间帧 —— 想用截图证明
/// "动效真的在跑"（而不是又退化成硬切）就得先把它放慢。仅 DEBUG。
private static var slowFactor: Double {
#if DEBUG
UserDefaults.standard.bool(forKey: "txSlowMotion") ? 12 : 1
#else
1
#endif
}
/// 有位移的转场（侧边栏浮层从左滑入）。开了「减弱动态」只淡入淡出。
@MainActor static func slide(_ edge: Edge) -> AnyTransition {
reduceMotion ? .opacity : .move(edge: edge)
}
/// 浮层弹出：淡入 + 极轻的缩放（96% → 100%），让对话框"长出来"而不是硬切。
@MainActor static var pop: AnyTransition {
reduceMotion ? .opacity : .opacity.combined(with: .scale(scale: 0.96))
}
/// 首页 ⇄ 终端：首页略微推远、终端从 97% 放大到位，读作"推进到会话里"。
@MainActor static var pushBack: AnyTransition {
reduceMotion ? .opacity : .opacity.combined(with: .scale(scale: 1.02))
}
}
/// 阴影。**刻意比设计初稿扁平**：暗色 chrome 靠描边分层，阴影只做极轻的浮起暗示。
/// 初稿那套 CSS 值（30–80px / .55–.7 黑）在深色底上会糊成一团脏斑，浮起胶囊尤其明显
/// —— 终端文字从投影里穿过去，观感是"胶囊在漏墨"。故统一收到小半径、低透明度。
struct Shadow {
let opacity: Double
let radius: CGFloat
var x: CGFloat = 0
var y: CGFloat = 0
}
enum Elevation {
/// 浮起 chrome（标题 / 状态胶囊）：贴在终端内容之上，投影必须几乎不可见。
static let floating = Shadow(opacity: 0.22, radius: 7, y: 2)
/// 侧边栏浮层：唯一带方向感的投影（往右推），让面板与被压暗的终端分层。
static let panel = Shadow(opacity: 0.28, radius: 16, x: 4)
/// 对话框 / 菜单。
static let dialog = Shadow(opacity: 0.34, radius: 16, y: 6)
/// 会话缩略卡（聚焦时略强）。
static let card = Shadow(opacity: 0.16, radius: 4, y: 2)
static let cardFocused = Shadow(opacity: 0.24, radius: 8, y: 3)
}
/// 浮层遮罩：对话框与侧边栏浮层共用同一底色，只有浓度不同。
enum Scrim {
static let color = Color(hex: 0x0A0B12)
/// 对话框：要求"必须先处理它"，压得更实。
static let dialog: Double = 0.5
/// 侧边栏浮层：面板本身已占掉一大片，遮罩轻一点。
static let sidebar: Double = 0.42
}
enum Font {

3
apps/TerminalX/iOS/UIPreviewFixture.swift
View File

@@ -242,7 +242,8 @@ enum UIPreviewFixture {
manager.focus(s)
router.enter(s.id)
case "sidebar":
if path.dropFirst().first == "pin" { router.togglePin() } else { router.toggleSidebar() }
// 悬浮态已砍（用户裁决）：只剩收起⇄固定，pin 与 toggle 同义（兼容旧脚本）。
router.toggleSidebar()
default:
return false
}