4b5292107b
业务逻辑（用户定稿）： - 点主机总是新建会话（会话:主机=多:1）；activate 选中断线会话自动重连 - 「直接输入」凭据保存时自动落 Keychain（去重复用），主机只存引用 - 主机编辑页可就地新建 Tailscale 连接；删无人引用的旧 HostsListView 首页/弹框减法： - 删侧边栏「连接新主机」、无 tmux 横幅与安装引导、页头「新建连接」 - 搜索移到「全部主机」行；添加主机虚线卡与主机卡等高（骨架复刻） - 会话卡加 ✕ + 复用终端页同款二次确认 - 会话选择器 sheet → 项目风格居中弹框（去手柄/Header/最近） 终端页修复： - 侧边栏会话列表改创建顺序，切换不再重排抖动 - 焦点高亮上移到 pane 容器边框（四边完整，去负 padding） - 软键盘双重让位修复：画布忽略键盘 + TXKeyboardObserver 显式让位一次 - 自动聚焦：focusTick 脉冲强制翻转 FocusState + surface 就绪补聚焦； vendor 补 iPadOS 触摸板 indirectPointer 的 becomeFirstResponder Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
673 lines
29 KiB
Swift
673 lines
29 KiB
Swift
import SwiftUI
|
||
|
||
/// 首页 · 主机管理（设计稿 `1e 主机-会话卡`）。
|
||
///
|
||
/// App 冷启动落点。首要动作是**「回到刚才那个会话」**，所以活动会话卡在最上面、占最大面积；
|
||
/// 「全部主机」在下面按内容高度铺 4 列。左右留白 40pt。
|
||
struct HomeView: View {
|
||
@ObservedObject var manager: SessionManager
|
||
@ObservedObject var router: AppRouter
|
||
@ObservedObject var hostStore: HostStore
|
||
@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
|
||
@State private var showEditor = false
|
||
@State private var editing: SavedHost?
|
||
@State private var showSettings = false
|
||
/// 待关闭确认的会话（会话卡 ✕）。与终端页红点共用同一个 `CloseConfirmDialog`。
|
||
@State private var closing: TerminalSession?
|
||
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
/// 分组 chips：「全部」+ 主机里出现过的分组（按首次出现顺序，不排序以免抖动）。
|
||
private var groups: [String] {
|
||
var seen: [String] = []
|
||
for h in hostStore.hosts {
|
||
if let g = h.group, !seen.contains(g) { seen.append(g) }
|
||
}
|
||
return seen
|
||
}
|
||
|
||
private var filteredHosts: [SavedHost] {
|
||
hostStore.hosts.filter { h in
|
||
let matchesGroup = groupFilter == nil || h.group == groupFilter
|
||
guard matchesGroup else { return false }
|
||
guard !search.isEmpty else { return true }
|
||
let q = search.lowercased()
|
||
return h.name.lowercased().contains(q) || h.host.lowercased().contains(q)
|
||
|| (h.os?.lowercased().contains(q) ?? false)
|
||
}
|
||
}
|
||
|
||
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)
|
||
}
|
||
// 会话卡 ✕ 的二次确认（与终端页红点同一对话框、同一套动作语义）。
|
||
.overlay {
|
||
if let s = closing {
|
||
CloseConfirmDialog(
|
||
session: s,
|
||
onDetach: { closeFromHome(s, kill: false) },
|
||
onKill: { closeFromHome(s, kill: true) },
|
||
onCancel: { withAnimation(TX.Motion.standard) { closing = nil } })
|
||
.transition(TX.Motion.pop)
|
||
}
|
||
}
|
||
}
|
||
|
||
/// 执行关闭（与 `TerminalScreen.closeSession` 同语义）：tmux 默认仅 detach（服务端继续跑），
|
||
/// `kill=true` 才 kill-session；原生窗口直接 teardown。给命令 250ms 落地再拆传输层。
|
||
private func closeFromHome(_ s: TerminalSession, kill: Bool) {
|
||
withAnimation(TX.Motion.standard) { closing = nil }
|
||
if let tmux = s.tmuxController {
|
||
if kill { tmux.killSession() } else { tmux.detach() }
|
||
}
|
||
Task { @MainActor in
|
||
try? await Task.sleep(nanoseconds: 250_000_000)
|
||
manager.close(s.id)
|
||
}
|
||
}
|
||
|
||
private func content(safeBottom: CGFloat) -> some View {
|
||
VStack(alignment: .leading, spacing: 0) {
|
||
header
|
||
if hostStore.hosts.isEmpty && manager.sessions.isEmpty {
|
||
firstRunEmptyState
|
||
} else {
|
||
ScrollView {
|
||
VStack(alignment: .leading, spacing: TX.Space.m) {
|
||
// 点主机后先留在首页探测 tmux → 这里给出进度，不让用户对着不动的界面等。
|
||
ForEach(manager.connectingSessions) { s in
|
||
ConnectingRow(session: s) { manager.close(s.id) }
|
||
}
|
||
if liveSessions.isEmpty {
|
||
if manager.connectingSessions.isEmpty { noSessionHint }
|
||
} else {
|
||
TXSectionLabel(text: "活动会话")
|
||
.padding(.top, TX.Space.xs)
|
||
sessionCards
|
||
}
|
||
HStack(alignment: .center, spacing: TX.Space.s) {
|
||
TXSectionLabel(text: "全部主机")
|
||
Spacer()
|
||
if !groups.isEmpty { chips }
|
||
// 搜索就近放在它作用的列表旁（用户裁决：从页头移到这里）。
|
||
TXSearchField(text: $search, placeholder: "搜索主机")
|
||
.frame(minWidth: 120, maxWidth: 220)
|
||
}
|
||
.padding(.top, manager.sessions.isEmpty ? TX.Space.xs : TX.Space.s)
|
||
if filteredHosts.isEmpty {
|
||
noMatchState
|
||
} else {
|
||
hostGrid
|
||
}
|
||
}
|
||
.padding(.horizontal, gutter)
|
||
// 末行要能完整滚到安全区之上（否则最后一排主机卡永远被 home indicator 压着）。
|
||
.padding(.bottom, TX.Space.xxl + safeBottom)
|
||
}
|
||
// 列表内容从物理底边流出去（系统滚动视图的标准观感），别在安全区上方硬切一刀。
|
||
.ignoresSafeArea(edges: .bottom)
|
||
// 会话卡/进度行的增减跟着同一条曲线，避免连上/断开时整页跳一下。
|
||
.animation(TX.Motion.standard, value: manager.sessions.count)
|
||
}
|
||
}
|
||
}
|
||
|
||
// MARK: - 空状态
|
||
|
||
/// 首次运行：一台主机都没有。给一条明确的下一步，而不是空网格。
|
||
private var firstRunEmptyState: some View {
|
||
VStack(spacing: TX.Space.m) {
|
||
Spacer()
|
||
Image(systemName: "terminal")
|
||
.font(.system(size: 40, weight: .ultraLight))
|
||
.foregroundStyle(TXAccent.mid)
|
||
VStack(spacing: 6) {
|
||
Text("还没有主机")
|
||
.font(TX.Font.mono(15, .medium))
|
||
.foregroundStyle(p.text)
|
||
Text("添加一台服务器就能开始：SSH 直连，或经 Tailscale 出口访问内网。\n开启 mosh 后断线自动接回。")
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.textWeak)
|
||
.multilineTextAlignment(.center)
|
||
.lineSpacing(4)
|
||
}
|
||
HStack(spacing: TX.Space.s) {
|
||
TXButton(title: "新建连接", emphasized: true) {
|
||
editing = nil
|
||
showEditor = true
|
||
}
|
||
TXButton(title: "先配置 Tailscale") { showSettings = true }
|
||
}
|
||
.padding(.top, TX.Space.xs)
|
||
Spacer()
|
||
}
|
||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||
}
|
||
|
||
/// 有主机但没有会话：不留白，提示从下面的主机开始。
|
||
private var noSessionHint: some View {
|
||
HStack(spacing: TX.Space.s) {
|
||
Image(systemName: "arrow.down")
|
||
.font(.system(size: 12))
|
||
.foregroundStyle(p.textWeak)
|
||
Text("还没有在跑的会话 —— 点下面任意主机即可连接")
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.textWeak)
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 40)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.card))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.card)
|
||
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [4, 4]))
|
||
.foregroundStyle(p.divider)
|
||
)
|
||
.padding(.top, TX.Space.xs)
|
||
}
|
||
|
||
/// 搜索/筛选无命中：说明命中为空的原因（是筛选还是搜索），并给一键清除。
|
||
private var noMatchState: some View {
|
||
VStack(spacing: TX.Space.s) {
|
||
Text(search.isEmpty ? "该分组下没有主机" : "没有匹配「\(search)」的主机")
|
||
.font(TX.Font.mono(12.5, .medium))
|
||
.foregroundStyle(p.text3)
|
||
TXButton(title: "清除筛选") {
|
||
search = ""
|
||
groupFilter = nil
|
||
}
|
||
}
|
||
.frame(maxWidth: .infinity)
|
||
.padding(.vertical, TX.Space.xl)
|
||
}
|
||
|
||
// MARK: - 页头
|
||
|
||
private var header: some View {
|
||
HStack(alignment: .top) {
|
||
VStack(alignment: .leading, spacing: 4) {
|
||
Text("terminalX")
|
||
.font(TX.Font.mono(34, .medium))
|
||
.tracking(-0.85)
|
||
.foregroundStyle(p.text)
|
||
Text(subtitle)
|
||
.font(TX.Font.mono(12))
|
||
.foregroundStyle(p.textWeak)
|
||
}
|
||
Spacer(minLength: TX.Space.s)
|
||
// 「新建连接」按钮已删（用户裁决减法）：添加主机走网格尾部的虚线卡；
|
||
// 搜索框下移到「全部主机」标题行。页头右侧只剩设置。
|
||
TXIconButton(icon: "gearshape", label: "设置") { showSettings = true }
|
||
}
|
||
.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) 个会话在跑") }
|
||
parts.append("\(hostStore.hosts.count) 台主机")
|
||
if let tailnet = tailscaleStore.connections.first {
|
||
parts.append("Tailscale \(tailnet.name)")
|
||
}
|
||
return parts.joined(separator: " · ")
|
||
}
|
||
|
||
private var chips: some View {
|
||
HStack(spacing: TX.Space.xs) {
|
||
TXChip(text: "全部", isSelected: groupFilter == nil) { groupFilter = nil }
|
||
ForEach(groups, id: \.self) { g in
|
||
TXChip(text: g, isSelected: groupFilter == g) { groupFilter = g }
|
||
}
|
||
}
|
||
}
|
||
|
||
// MARK: - 活动会话卡
|
||
|
||
/// 已建立的会话。**排除正在连接的**（它们走 ConnectingRow）—— 否则同一会话既有进度行又有卡片，
|
||
/// 而且卡片里的 tmux 信息此刻还没定（会先显示成「原生窗口」再跳变）。
|
||
private var liveSessions: [TerminalSession] {
|
||
let connecting = Set(manager.connectingSessions.map(\.id))
|
||
return manager.activeSessions.filter {
|
||
($0.isLive || $0.isMinimized) && !connecting.contains($0.id)
|
||
}
|
||
}
|
||
|
||
/// 会话卡：**一排固定 3 格**，不足 3 条从左往右排（不拉伸、不居中），每格 **4:3**。
|
||
///
|
||
/// 固定 3 列的好处：卡片尺寸与位置不随会话数跳动 —— 连上第二台主机时第一张卡不该改变大小。
|
||
/// 超过 3 条自动换行到下一排。
|
||
private var sessionCards: some View {
|
||
LazyVGrid(
|
||
columns: Array(repeating: GridItem(.flexible(), spacing: TX.Space.m), count: 3),
|
||
spacing: TX.Space.m
|
||
) {
|
||
ForEach(liveSessions) { s in
|
||
SessionCard(
|
||
session: s,
|
||
shortcutIndex: (liveSessions.firstIndex { $0.id == s.id } ?? 0) + 1,
|
||
isFocused: manager.focusedID == s.id,
|
||
onOpen: {
|
||
// activate：聚焦 + 已断开的自动重连（与侧边栏行同语义）。
|
||
manager.activate(s)
|
||
router.enter(s.id)
|
||
},
|
||
onClose: { withAnimation(TX.Motion.standard) { closing = s } }
|
||
)
|
||
.aspectRatio(4.0 / 3.0, contentMode: .fit)
|
||
}
|
||
}
|
||
}
|
||
|
||
// MARK: - 全部主机（4 列，按内容高度）
|
||
|
||
private var hostGrid: some View {
|
||
// 设计基准 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,
|
||
credName: credName(for: host),
|
||
hasTsnet: host.tailscaleID != nil,
|
||
liveSession: manager.sessions.first { $0.host?.id == host.id }) {
|
||
// 只发起连接：探测 tmux → 弹会话选择器 → 选完由 manager.enterRequest 进终端。
|
||
manager.open(host: host)
|
||
}
|
||
.contextMenu {
|
||
Button { editing = host; showEditor = true } label: {
|
||
Label("编辑", systemImage: "pencil")
|
||
}
|
||
Button(role: .destructive) { hostStore.remove(host) } label: {
|
||
Label("删除", systemImage: "trash")
|
||
}
|
||
}
|
||
}
|
||
addHostTile
|
||
}
|
||
}
|
||
|
||
private var addHostTile: some View {
|
||
Button {
|
||
editing = nil
|
||
showEditor = true
|
||
} label: {
|
||
// 高度骨架 = HostTile 的内部结构原样复刻（图标行 30pt + 徽章行），只是全部隐形
|
||
// —— 与主机卡**天然等高**，不靠魔法数（曾用 minHeight 96，比主机卡高一截）。
|
||
VStack(alignment: .leading, spacing: TX.Space.s) {
|
||
Color.clear.frame(width: 30, height: 30)
|
||
TXBadge(text: " ").opacity(0)
|
||
}
|
||
.padding(TX.Space.s)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.overlay {
|
||
HStack(spacing: TX.Space.xs) {
|
||
Image(systemName: "plus")
|
||
.font(.system(size: 11, weight: .medium))
|
||
Text("添加主机")
|
||
.font(TX.Font.mono(12, .medium))
|
||
}
|
||
.foregroundStyle(p.textWeak)
|
||
}
|
||
.background(
|
||
RoundedRectangle(cornerRadius: TX.Radius.card)
|
||
.strokeBorder(style: StrokeStyle(lineWidth: 1, dash: [4, 4]))
|
||
.foregroundStyle(p.border)
|
||
)
|
||
}
|
||
.buttonStyle(.txPress)
|
||
}
|
||
|
||
private func credName(for host: SavedHost) -> String? {
|
||
if case .credential(let id) = host.auth {
|
||
return credStore.list().first { $0.id == id }?.name
|
||
}
|
||
return nil
|
||
}
|
||
}
|
||
|
||
/// 首页的「正在连接」行：点主机后到进终端之间的反馈（探测 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: - 活动会话卡
|
||
|
||
/// 会话缩略卡：卡头（状态 + 主机名 + tmux + 链路）· 终端文本镜像（底对齐）· 卡脚（元信息 + 主动作）。
|
||
/// 离线/重连中的卡片压一层遮罩 + 说明（设计要求遮罩是内容的最后一层，故用 overlay）。
|
||
struct SessionCard: View {
|
||
@ObservedObject var session: TerminalSession
|
||
let shortcutIndex: Int
|
||
let isFocused: Bool
|
||
let onOpen: () -> Void
|
||
/// 卡右上 ✕（弹二次确认，与终端页红点同语义）。
|
||
let onClose: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
private var statusColor: Color {
|
||
switch session.link {
|
||
case .direct, .relay: p.online
|
||
case .reconnecting: p.reconnecting
|
||
case .connecting: p.text4
|
||
case .offline: p.offline
|
||
}
|
||
}
|
||
|
||
private var isTroubled: Bool {
|
||
switch session.link {
|
||
case .reconnecting, .offline: true
|
||
default: false
|
||
}
|
||
}
|
||
|
||
/// 整张卡是**一个**按钮：卡脚的「回到会话 →」与点卡片是同一个动作，做成嵌套 Button 只会
|
||
/// 抢命中区、还各自一套按压反馈。故卡脚那行只作为文字提示（affordance），不再是控件。
|
||
var body: some View {
|
||
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())
|
||
}
|
||
.buttonStyle(.txPress)
|
||
// ✕ 悬浮在卡右上（cardHead 已用占位让出这块）：整卡是一个大按钮，✕ 不能做
|
||
// 嵌套子按钮（抢命中/双重按压反馈），overlay 在外层才各点各的。
|
||
.overlay(alignment: .topTrailing) {
|
||
Button(action: onClose) {
|
||
Image(systemName: "xmark")
|
||
.font(.system(size: 11, weight: .medium))
|
||
.foregroundStyle(p.textWeak)
|
||
.frame(width: 34, height: 36)
|
||
.contentShape(Rectangle())
|
||
}
|
||
.buttonStyle(.txPressTight)
|
||
.accessibilityLabel("关闭会话 \(session.displayName)")
|
||
}
|
||
}
|
||
|
||
private var cardHead: some View {
|
||
HStack(spacing: TX.Space.xs) {
|
||
TXStatusDot(color: statusColor)
|
||
Text(session.displayName)
|
||
.font(TX.Font.mono(13, .semibold))
|
||
.foregroundStyle(p.text)
|
||
.lineLimit(1)
|
||
if let t = session.tmuxSummary {
|
||
Text(t.name.isEmpty ? "tmux" : "tmux \(t.name)")
|
||
.font(TX.Font.mono(11))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
Spacer(minLength: TX.Space.xs)
|
||
linkTag
|
||
// ✕ 的占位（真按钮在卡外层 overlay）：留出宽度免得链路标压在 ✕ 底下。
|
||
Color.clear.frame(width: 26, height: 1)
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 36)
|
||
}
|
||
|
||
/// 链路标：设计里这格是 RTT 数字，首版无 RTT 管道 → 显示链路类型/重连次数（见 HANDOFF §12.4）。
|
||
@ViewBuilder private var linkTag: some View {
|
||
switch session.link {
|
||
case .direct:
|
||
tag("直连", p.online)
|
||
case .relay:
|
||
tag("tsnet", p.online)
|
||
case .connecting:
|
||
tag("连接中", p.text4)
|
||
case .reconnecting(let n):
|
||
tag("重连中 · 第 \(n) 次", p.reconnecting)
|
||
case .offline:
|
||
tag("离线", p.offline)
|
||
}
|
||
}
|
||
|
||
private func tag(_ s: String, _ c: Color) -> some View {
|
||
Text(s).font(TX.Font.mono(11, .medium)).foregroundStyle(c).lineLimit(1)
|
||
}
|
||
|
||
/// 遮罩：转圈 + 两行说明。压在终端镜像之上，说明「屏幕内容已缓存，恢复后原样接回」。
|
||
private var troubleVeil: some View {
|
||
ZStack {
|
||
Color(hex: 0x181A28).opacity(0.72)
|
||
VStack(spacing: TX.Space.s) {
|
||
if case .reconnecting = session.link {
|
||
ProgressView().controlSize(.regular).tint(p.reconnecting)
|
||
}
|
||
Text(veilTitle)
|
||
.font(TX.Font.mono(12, .medium))
|
||
.foregroundStyle(p.reconnecting)
|
||
Text("屏幕内容已缓存，恢复后原样接回")
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.text4)
|
||
}
|
||
.multilineTextAlignment(.center)
|
||
.padding(TX.Space.m)
|
||
}
|
||
}
|
||
|
||
private var veilTitle: String {
|
||
switch session.link {
|
||
case .reconnecting(let n): "\(session.moshEngaged ? "mosh " : "")会话保活中 · 第 \(n) 次重连"
|
||
default: "已断开"
|
||
}
|
||
}
|
||
|
||
private var cardFoot: some View {
|
||
HStack(spacing: TX.Space.xs) {
|
||
Text(footMeta)
|
||
.font(TX.Font.mono(11))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
Spacer(minLength: TX.Space.xs)
|
||
Text("⌘\(shortcutIndex)")
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textFaint)
|
||
Text(isTroubled ? "立即重试" : "回到会话 →")
|
||
.font(TX.Font.mono(11.5, .medium))
|
||
.foregroundStyle(TXAccent.textBright)
|
||
}
|
||
.padding(.horizontal, TX.Space.s)
|
||
.frame(height: 38)
|
||
}
|
||
|
||
private var footMeta: String {
|
||
var parts: [String] = []
|
||
if let t = session.tmuxSummary {
|
||
parts.append("\(t.windows) window\(t.windows == 1 ? "" : "s")")
|
||
if t.panes > 0 { parts.append("\(t.panes) panes") }
|
||
} else {
|
||
parts.append("原生窗口")
|
||
}
|
||
if session.isMinimized {
|
||
parts.append("最小化中")
|
||
} else {
|
||
parts.append(Self.relative(session.lastActiveAt))
|
||
}
|
||
return parts.joined(separator: " · ")
|
||
}
|
||
|
||
/// 「上次活跃」相对时间（秒/分/小时/天）。
|
||
static func relative(_ date: Date) -> String {
|
||
let s = Int(Date().timeIntervalSince(date))
|
||
if s < 60 { return "\(max(1, s)) 秒前" }
|
||
if s < 3600 { return "\(s / 60) 分钟前" }
|
||
if s < 86400 { return "\(s / 3600) 小时前" }
|
||
return "\(s / 86400) 天前"
|
||
}
|
||
}
|
||
|
||
// MARK: - 主机卡
|
||
|
||
/// 主机卡（4 列网格）：图标 + 名称 + os 副行 + 徽章行 + 右上状态点。
|
||
struct HostTile: View {
|
||
let host: SavedHost
|
||
let credName: String?
|
||
let hasTsnet: Bool
|
||
/// 该主机是否已有活动会话（有则右上点亮——只是状态提示；点击**总是新建**一条并行会话，
|
||
/// 回到旧会话走上方会话卡 / 侧边栏）。
|
||
let liveSession: TerminalSession?
|
||
let onTap: () -> Void
|
||
@EnvironmentObject var theme: TXThemeManager
|
||
private var p: TXPalette { theme.palette }
|
||
|
||
private var icon: String {
|
||
let os = (host.os ?? "").lowercased()
|
||
if os.contains("macos") { return "desktopcomputer" }
|
||
if os.contains("raspberry") { return "cpu" }
|
||
if os.contains("nas") || host.name.lowercased().contains("nas") { return "externaldrive" }
|
||
return "server.rack"
|
||
}
|
||
|
||
var body: some 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(TXTech.osTint(host.os, p))
|
||
.frame(width: 30, height: 30)
|
||
.background(p.surface, in: RoundedRectangle(cornerRadius: 8))
|
||
VStack(alignment: .leading, spacing: 2) {
|
||
Text(host.name)
|
||
.font(TX.Font.mono(13, .semibold))
|
||
.foregroundStyle(p.text)
|
||
.lineLimit(1)
|
||
Text(host.os ?? host.addressLine)
|
||
.font(TX.Font.mono(10.5))
|
||
.foregroundStyle(p.textWeak)
|
||
.lineLimit(1)
|
||
}
|
||
Spacer(minLength: 0)
|
||
if let s = liveSession {
|
||
TXStatusDot(color: s.link == .offline ? p.offline
|
||
: (s.isMinimized ? TXAccent.mid : p.online))
|
||
} else {
|
||
TXStatusDot(color: p.offline.opacity(0.5))
|
||
}
|
||
}
|
||
HStack(spacing: 5) {
|
||
// 传输协议（互斥）着语义冷色；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)
|
||
.frame(maxWidth: .infinity, alignment: .leading)
|
||
.background(p.surfaceDark, in: RoundedRectangle(cornerRadius: TX.Radius.card))
|
||
.overlay(
|
||
RoundedRectangle(cornerRadius: TX.Radius.card)
|
||
.strokeBorder(p.border, lineWidth: 1)
|
||
)
|
||
}
|
||
.buttonStyle(.txPress)
|
||
}
|
||
}
|