5707d70dff
侧边栏（真机验证）： - 砍掉悬浮态，只留收起⇄固定展开；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>
471 lines
21 KiB
Swift
471 lines
21 KiB
Swift
import SwiftUI
|
||
|
||
// 设计稿 `1b 终端-沉浸轨道` 的浮起 chrome：左上标题胶囊 + 右上状态胶囊 + 底部提示条。
|
||
//
|
||
// 浮起（absolute + blur）而非占一行布局：终端面积最大化是这一屏的唯一目标。
|
||
// 终端内容容器顶部留 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
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
content
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 34)
|
||
.background {
|
||
RoundedRectangle(cornerRadius: TX.Radius.capsule)
|
||
.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)
|
||
)
|
||
.txShadow(TX.Elevation.floating)
|
||
}
|
||
}
|
||
|
||
/// 左上标题胶囊：红/黄圆点 → 竖分隔 → 状态点 → 主机名 → 「window title · cwd」。
|
||
struct TerminalTitleCapsule: View {
|
||
@ObservedObject var session: TerminalSession
|
||
let onClose: () -> Void
|
||
let onMinimize: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
FloatingCapsule {
|
||
HStack(spacing: TX.Space.xs) {
|
||
// 顺序沿用 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(.leading, 4)
|
||
.padding(.trailing, 2)
|
||
TXStatusDot(color: RailSidebarStyle.statusColor(session, p), size: 6)
|
||
Text(session.displayName)
|
||
.font(TX.Font.mono(12.5, .medium))
|
||
.foregroundStyle(p.text)
|
||
.lineLimit(1)
|
||
if !contextLine.isEmpty {
|
||
Text(contextLine)
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
// 终端格子数（设计稿 08 的「· 168×44」）。侧边栏开合会 resize ——
|
||
// 数字经 GridBox.onGridChange → session.objectWillChange 跟着刷新。
|
||
Text(gridLabel)
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.textFaint)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 「当前 window title · cwd」（设计稿 3a）。无 tmux 时退回连接状态文案。
|
||
private var contextLine: String {
|
||
guard let t = session.tmuxSummary else {
|
||
return session.isLive ? "" : session.phaseText
|
||
}
|
||
var parts: [String] = []
|
||
if !t.currentTitle.isEmpty { parts.append(t.currentTitle) }
|
||
if !t.cwd.isEmpty { parts.append(Self.abbreviate(t.cwd)) }
|
||
return parts.joined(separator: " · ")
|
||
}
|
||
|
||
/// `/Users/yz/src/x` → `~/src/x`（终端习惯写法，设计稿即此形态）。
|
||
static func abbreviate(_ path: String) -> String {
|
||
let home = NSHomeDirectory()
|
||
if !home.isEmpty, path.hasPrefix(home) { return "~" + path.dropFirst(home.count) }
|
||
// 远端 home 与本机不同，按常见前缀兜底。
|
||
for prefix in ["/home/", "/Users/"] where path.hasPrefix(prefix) {
|
||
let rest = path.dropFirst(prefix.count)
|
||
if let slash = rest.firstIndex(of: "/") { return "~" + rest[slash...] }
|
||
return "~"
|
||
}
|
||
return path
|
||
}
|
||
|
||
private var gridLabel: String {
|
||
let g = session.screenGrid.value
|
||
return "\(g.cols)×\(g.rows)"
|
||
}
|
||
|
||
/// 关闭 / 最小化按钮。
|
||
///
|
||
/// 原来是 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) {
|
||
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(.txPressTight)
|
||
.accessibilityLabel(label)
|
||
}
|
||
}
|
||
|
||
/// 右上状态胶囊：三格分层徽标 `tsnet | mosh | tmux`，格间 1×16pt 竖线。
|
||
///
|
||
/// **只染出问题的那层**：网络层不可达 → 第一格转琥珀；重连中 → 第二格转琥珀；tmux 缺失 → 第三格
|
||
/// 写「无 tmux · 客户端窗口」而非报错。首版第二格不显示 RTT 数字（见 HANDOFF §12.4）。
|
||
struct TerminalStatusCapsule: View {
|
||
@ObservedObject var session: TerminalSession
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
FloatingCapsule {
|
||
HStack(spacing: 0) {
|
||
cell(egressText, color: egressColor, dot: true)
|
||
separator
|
||
cell(transportText, color: transportColor, dot: false)
|
||
separator
|
||
cell(tmuxText, color: p.text2, dot: false)
|
||
}
|
||
}
|
||
}
|
||
|
||
private var separator: some View {
|
||
Rectangle().fill(p.border).frame(width: 1, height: 16)
|
||
.padding(.horizontal, TX.Space.s)
|
||
}
|
||
|
||
private func cell(_ text: String, color: Color, dot: Bool) -> some View {
|
||
HStack(spacing: 5) {
|
||
if dot { TXStatusDot(color: color, size: 6) }
|
||
Text(text)
|
||
.font(TX.Font.mono(12, .medium))
|
||
.foregroundStyle(color)
|
||
.lineLimit(1)
|
||
}
|
||
}
|
||
|
||
// 第一格：网络可达性（tsnet 出口 / 直连）
|
||
private var egressText: String {
|
||
switch session.link {
|
||
case .relay: "tsnet"
|
||
case .direct: "direct"
|
||
case .connecting: "连接中"
|
||
case .reconnecting: "tsnet"
|
||
case .offline: "离线"
|
||
}
|
||
}
|
||
|
||
private var egressColor: Color {
|
||
switch session.link {
|
||
case .direct, .relay: p.online
|
||
case .connecting: p.text4
|
||
case .reconnecting: p.reconnecting
|
||
case .offline: p.offline
|
||
}
|
||
}
|
||
|
||
// 第二格：传输层（mosh / SSH）
|
||
private var transportText: String {
|
||
if case .reconnecting(let n) = session.link {
|
||
return "\(session.moshEngaged ? "mosh" : "ssh") 重连 \(n)"
|
||
}
|
||
return session.moshEngaged ? "mosh" : "ssh"
|
||
}
|
||
|
||
private var transportColor: Color {
|
||
if case .reconnecting = session.link { return p.reconnecting }
|
||
// 设计：这一格的文字是中性色，只有 RTT 数字才染绿/琥珀（首版无 RTT → 全中性）。
|
||
return p.text2
|
||
}
|
||
|
||
// 第三格：会话复用层
|
||
private var tmuxText: String {
|
||
if let t = session.tmuxSummary { return t.name.isEmpty ? "tmux" : "tmux \(t.name)" }
|
||
// 还在探测 / 等用户选会话时别谎报「无 tmux」——那是探测确定不可用后才成立的结论。
|
||
if session.pendingSessionChoice != nil { return "选择 tmux 会话…" }
|
||
if session.tmuxSkipped { return "原生窗口 · 不经 tmux" }
|
||
if session.tmuxUnavailable { return "无 tmux · 客户端窗口" }
|
||
return session.isLive ? "检测 tmux…" : "—"
|
||
}
|
||
}
|
||
|
||
/// 终端区的**非内容态**覆盖层：连接中 / 失败 / 已关闭。
|
||
///
|
||
/// 真实连接不是瞬间的：解析凭据 → tsnet Up → dial → 认证 → （mosh 引导）→ tmux attach，
|
||
/// 期间终端一片空白。这层给出「现在在干什么、失败了能怎么办」，避免用户对着黑屏猜。
|
||
/// 已连接（含重连中，屏幕内容还在）时**不显示**，不遮挡终端。
|
||
struct TerminalStateOverlay: View {
|
||
@ObservedObject var session: TerminalSession
|
||
let onRetry: () -> Void
|
||
let onBack: () -> Void
|
||
/// 取消正在进行的连接（用户不想再等）。
|
||
let onCancel: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
/// 连接已等待秒数 —— 真实连接可能要走 tsnet Up / mosh 引导，等待要可见、可取消。
|
||
@State private var waited = 0
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
/// 失败态：phaseText 由 SessionMachine 给出（`失败：…`）。
|
||
private var failure: String? {
|
||
session.phaseText.hasPrefix("失败") ? String(session.phaseText.dropFirst(3)) : nil
|
||
}
|
||
|
||
private var isConnecting: Bool {
|
||
!session.isLive && failure == nil && session.phaseText != "已关闭"
|
||
}
|
||
|
||
var body: some View {
|
||
if let failure {
|
||
state(icon: "exclamationmark.triangle", tint: p.danger, title: "连接失败",
|
||
detail: failure) {
|
||
HStack(spacing: TX.Space.s) {
|
||
TXButton(title: "返回首页", action: onBack)
|
||
TXButton(title: "重试", emphasized: true, action: onRetry)
|
||
}
|
||
}
|
||
} else if session.phaseText == "已关闭" {
|
||
state(icon: "power", tint: p.textWeak, title: "会话已关闭",
|
||
detail: "服务端连接已断开。") {
|
||
HStack(spacing: TX.Space.s) {
|
||
TXButton(title: "返回首页", action: onBack)
|
||
TXButton(title: "重新连接", emphasized: true, action: onRetry)
|
||
}
|
||
}
|
||
} else if isConnecting {
|
||
state(icon: nil, tint: p.text4, title: session.phaseText,
|
||
detail: session.banner.isEmpty ? connectHint : session.banner) {
|
||
VStack(spacing: TX.Space.xs) {
|
||
if waited >= 3 {
|
||
Text("已等待 \(waited)s")
|
||
.font(TX.Font.mono(11))
|
||
.foregroundStyle(p.textFaint)
|
||
}
|
||
if waited >= 5 {
|
||
// 等久了才给取消：避免正常的 1–2s 连接闪现一个按钮。
|
||
TXButton(title: "取消连接", action: onCancel)
|
||
}
|
||
}
|
||
}
|
||
.task(id: session.phaseText) {
|
||
waited = 0
|
||
while !Task.isCancelled {
|
||
try? await Task.sleep(nanoseconds: 1_000_000_000)
|
||
waited += 1
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 分阶段提示：让等待有解释（尤其 tsnet 首次 Up 与 mosh 引导都要数秒）。
|
||
private var connectHint: String {
|
||
switch session.link {
|
||
case .relay: "正在经 Tailscale 出口建立连接…"
|
||
case .connecting, .direct: session.moshEngaged ? "正在引导 mosh…" : "正在建立 SSH 连接…"
|
||
case .reconnecting(let n): "第 \(n) 次重连中…"
|
||
case .offline: "等待连接…"
|
||
}
|
||
}
|
||
|
||
private func state<Actions: View>(icon: String?, tint: Color, title: String, detail: String,
|
||
@ViewBuilder actions: () -> Actions) -> some View {
|
||
VStack(spacing: TX.Space.s) {
|
||
if let icon {
|
||
Image(systemName: icon)
|
||
.font(.system(size: 26, weight: .light))
|
||
.foregroundStyle(tint)
|
||
} else {
|
||
ProgressView().controlSize(.regular).tint(TXAccent.base)
|
||
}
|
||
Text(title)
|
||
.font(TX.Font.mono(13, .medium))
|
||
.foregroundStyle(p.text)
|
||
Text(detail)
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.multilineTextAlignment(.center)
|
||
.lineLimit(3)
|
||
.frame(maxWidth: 420)
|
||
actions()
|
||
.padding(.top, TX.Space.xs)
|
||
}
|
||
.padding(TX.Space.l)
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
// 连上后这一层要淡出去，别"啪"地掀掉（动画由 paneArea 按 phaseText 驱动）。
|
||
.transition(.opacity)
|
||
}
|
||
}
|
||
|
||
/// 无 tmux 主机的行内横幅（设计稿 `2c`）：说明窗口由 App 维持、mosh 兜底，但**关掉 App 不会在
|
||
/// 服务端继续跑**；右侧给「安装并启用 tmux」次要按钮。**不弹窗、不强推**，可关闭。
|
||
struct NoTmuxBanner: View {
|
||
let onInstall: () -> Void
|
||
let onDismiss: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
var body: some View {
|
||
HStack(spacing: TX.Space.s) {
|
||
Image(systemName: "info.circle")
|
||
.font(.system(size: 12))
|
||
.foregroundStyle(p.warning)
|
||
Text("未检测到 tmux · 当前是客户端窗口：mosh 能兜断线，但**关掉 App 后服务端不会继续跑**")
|
||
.font(TX.Font.mono(11.5))
|
||
.foregroundStyle(p.text3)
|
||
.lineLimit(1)
|
||
Spacer(minLength: TX.Space.s)
|
||
TXButton(title: "安装并启用 tmux", action: onInstall)
|
||
Button(action: onDismiss) {
|
||
Image(systemName: "xmark")
|
||
.font(.system(size: 11, weight: .medium))
|
||
.foregroundStyle(p.textWeak)
|
||
.frame(width: 28, height: 28)
|
||
.contentShape(Rectangle())
|
||
}
|
||
.buttonStyle(.txPressTight)
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 40)
|
||
.background(p.surfaceDark.opacity(0.92))
|
||
.overlay(alignment: .bottom) { Rectangle().fill(p.divider).frame(height: 1) }
|
||
}
|
||
}
|
||
|
||
/// 「安装并启用 tmux」的引导（点横幅按钮后）：给出各发行版命令，用户可一键塞进终端执行。
|
||
struct TmuxInstallSheet: View {
|
||
let onRun: (String) -> Void
|
||
let onCancel: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
/// 常见包管理器。跨发行版探测一条命令搞定：有哪个用哪个。
|
||
private let combined = "command -v apt-get >/dev/null && sudo apt-get install -y tmux || " +
|
||
"command -v dnf >/dev/null && sudo dnf install -y tmux || " +
|
||
"command -v pacman >/dev/null && sudo pacman -S --noconfirm tmux || " +
|
||
"command -v apk >/dev/null && sudo apk add tmux || " +
|
||
"command -v brew >/dev/null && brew install tmux"
|
||
|
||
var body: some View {
|
||
TXModalScrim(onDismiss: onCancel) {
|
||
VStack(alignment: .leading, spacing: TX.Space.s) {
|
||
Text("安装 tmux")
|
||
.font(TX.Font.mono(15, .medium))
|
||
.foregroundStyle(p.text)
|
||
Text("tmux 让会话留在服务端：关掉 App、换网络、睡一觉回来都能原样接回。\n下面这条会按服务器的包管理器自动选择（需要 sudo 权限）。")
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.text3)
|
||
.lineSpacing(4)
|
||
Text(combined)
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.text4)
|
||
.padding(TX.Space.s)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.background(p.bgDeep, in: RoundedRectangle(cornerRadius: 8))
|
||
HStack(spacing: TX.Space.s) {
|
||
Spacer()
|
||
TXButton(title: "取消", action: onCancel)
|
||
TXButton(title: "在终端执行", emphasized: true) { onRun(combined) }
|
||
}
|
||
.padding(.top, TX.Space.xs)
|
||
}
|
||
.padding(TX.Space.l)
|
||
.frame(width: 520)
|
||
.background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.dialog))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.dialog)
|
||
.strokeBorder(p.borderStrong, lineWidth: 1)
|
||
)
|
||
.txShadow(TX.Elevation.dialog)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 舞台底部动作条。
|
||
///
|
||
/// **不是快捷键清单，而是真按钮**：iPad 大概率没接键盘，把「竖分屏 / 新 window / 回首页」
|
||
/// 只写成 `⌘D` 之类的文字提示等于这些功能对触控用户不存在。硬件键盘接上后这几个动作
|
||
/// 仍然可以走快捷键（UI-5），按钮照旧留着 —— 常驻可点是底线。
|
||
///
|
||
/// 高度 = 内容带 34pt + home indicator 安全区，内容在其中**居中** —— 与侧边栏脚、轨道齿轮
|
||
/// 同一条中心线。（此前只有 34pt 且被安全区顶起，屏幕底下留一条 24pt 的空带，看着像"没铺到底"。）
|
||
struct TerminalActionBar: View {
|
||
/// 左侧上下文说明（会话/链路状态一句话）。
|
||
let context: 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.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.footBand(safeBottom))
|
||
.animation(TX.Motion.standard, value: context)
|
||
}
|
||
}
|