feat: UI 商业化改造 + 连接前 tmux 会话选择（真机验证）
按 Claude Design 定稿（归档在 docs/design/）重做 UI，并把 tmux 从 「从不自动进」修成「连接前探测 → 让用户选会话」。 设计令牌与导航地基 - Theme 拆三层：TXAccent(恒定 blurple) / TXChrome(中性阶×4 表) / TXFlavor(Catppuccin 终端) - vendor JetBrains Mono 四权重（附 OFL 许可） - AppRouter + SessionManager：多会话并存，路由与会话生命周期解耦 - SessionCanvas 常驻挂载会话 surface（摘除即丢内容，也是缩回动画的前提） 按设计稿落地的屏 - 沉浸轨道页：56pt 轨道 + 浮起标题/状态胶囊 + 侧边栏三态（遮罩不 resize、Pin 各一次） - 首页：活动会话卡（readViewportText 文本镜像）+ 主机网格 + 筛选 chips - 关闭二次确认（tmux 仅断开 / 原生窗口两套文案）、分屏菜单、pane 拖拽条 - 空状态：首次运行 / 无会话 / 搜索无命中 / 连接中·失败·已关闭 tmux 真实链路（真机查出并修掉 4 个 bug） - 全代码库从来没人发起 attach → 连接前探测 + 会话选择器（接回 / 新建 / 原生终端） - format 分隔符 tab 经 PTY 变成下划线 → 改用 |:| - controller 变化不冒泡到 session → Combine 转发（否则数据解析对了 UI 不刷新） - 当前会话名不能靠 session_attached 反推 → 改用 display-message 传输层：SSH connect 加超时（原来阻塞到系统 TCP 超时 75s+） 无头验证设施：假会话 fixture · terminalx://ui/* 驱动 · 横屏截图脚本 · 对拍走查法 TXCore 45 tests 绿（新增 5 个会话探测单测） Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kid
173
apps/TerminalX/iOS/SettingsView.swift
Normal file
173
apps/TerminalX/iOS/SettingsView.swift
Normal file
@@ -0,0 +1,173 @@
|
||||
import SwiftUI
|
||||
|
||||
/// 设置容器（首页齿轮 → sheet）。过渡形态：`NavigationStack` + 分类跳转。
|
||||
/// UI-5 将按设计稿 `1g 设置-外观` 重写为「左 280pt 类别栏 + 右内容区」。
|
||||
struct SettingsHost: View {
|
||||
@ObservedObject var credStore: FileCredentialStore
|
||||
@ObservedObject var tailscaleStore: TailscaleStore
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
@EnvironmentObject var theme: TXThemeManager
|
||||
/// known hosts 是无状态的 keychain/文件访问层，容器自持一个即可。
|
||||
private let knownHosts = KeychainKnownHostsStore()
|
||||
private var p: TXPalette { theme.palette }
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ZStack {
|
||||
p.bg.ignoresSafeArea()
|
||||
List {
|
||||
Section("外观") {
|
||||
NavigationLink { SettingsView() } label: { row("paintbrush", "外观与主题") }
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
Section("保险库") {
|
||||
NavigationLink { KeychainListView(store: credStore) } label: {
|
||||
row("key.fill", "Keychain 凭据")
|
||||
}
|
||||
NavigationLink { KnownHostsView(store: knownHosts) } label: {
|
||||
row("checkmark.shield", "Known Hosts")
|
||||
}
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
Section("网络") {
|
||||
NavigationLink { TailscaleListView(store: tailscaleStore) } label: {
|
||||
row("network", "Tailscale")
|
||||
}
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
}
|
||||
.scrollContentBackground(.hidden)
|
||||
.foregroundStyle(p.text)
|
||||
}
|
||||
.navigationTitle("设置")
|
||||
.toolbarBackground(p.bg, for: .navigationBar)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .topBarTrailing) {
|
||||
Button("完成") { dismiss() }.tint(TXAccent.base)
|
||||
}
|
||||
}
|
||||
}
|
||||
.tint(TXAccent.base)
|
||||
}
|
||||
|
||||
private func row(_ icon: String, _ title: String) -> some View {
|
||||
Label(title, systemImage: icon)
|
||||
.font(TX.Font.mono(13))
|
||||
.foregroundStyle(p.text)
|
||||
}
|
||||
}
|
||||
|
||||
/// 设置页：主题（app 与终端统一）+ 终端 + 关于。
|
||||
struct SettingsView: View {
|
||||
@EnvironmentObject var theme: TXThemeManager
|
||||
private var p: TXPalette { theme.palette }
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
p.bg.ignoresSafeArea()
|
||||
List {
|
||||
Section("主题（app 与终端统一）") {
|
||||
ForEach(TXPalette.all) { pal in
|
||||
Button { theme.apply(pal) } label: { themeRow(pal) }
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
Section("终端") {
|
||||
row("textformat", "字体与大小", value: "系统等宽")
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
Section("关于") {
|
||||
row("info.circle", "terminalX", value: "0.0.1")
|
||||
}
|
||||
.listRowBackground(p.surface)
|
||||
}
|
||||
.scrollContentBackground(.hidden)
|
||||
.foregroundStyle(p.textPrimary)
|
||||
}
|
||||
.navigationTitle("设置")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbarBackground(p.bg, for: .navigationBar)
|
||||
}
|
||||
|
||||
/// 主题行：色板预览（底/面/强调）+ 名称 + 选中勾。
|
||||
private func themeRow(_ pal: TXPalette) -> some View {
|
||||
HStack(spacing: TX.Space.m) {
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 7).fill(pal.bg)
|
||||
HStack(spacing: 3) {
|
||||
Circle().fill(pal.accent).frame(width: 7, height: 7)
|
||||
Circle().fill(pal.mosh).frame(width: 7, height: 7)
|
||||
}
|
||||
}
|
||||
.frame(width: 40, height: 28)
|
||||
.overlay(RoundedRectangle(cornerRadius: 7).stroke(p.border, lineWidth: 1))
|
||||
|
||||
Text(pal.name).foregroundStyle(p.textPrimary)
|
||||
Spacer()
|
||||
if pal.id == theme.palette.id {
|
||||
Image(systemName: "checkmark").foregroundStyle(p.accent).font(.system(size: 14, weight: .semibold))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func row(_ icon: String, _ title: String, value: String) -> some View {
|
||||
HStack {
|
||||
Image(systemName: icon).foregroundStyle(p.textSecondary).frame(width: 26)
|
||||
Text(title).foregroundStyle(p.textPrimary)
|
||||
Spacer()
|
||||
Text(value).foregroundStyle(p.textSecondary).font(.system(size: 14))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 已信任 host key（TOFU pin）查看/删除页。
|
||||
struct KnownHostsView: View {
|
||||
let store: KeychainKnownHostsStore
|
||||
@EnvironmentObject var theme: TXThemeManager
|
||||
@State private var entries: [KnownHostEntry] = []
|
||||
private var p: TXPalette { theme.palette }
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
p.bg.ignoresSafeArea()
|
||||
ScrollView {
|
||||
VStack(alignment: .leading, spacing: TX.Space.s) {
|
||||
if entries.isEmpty {
|
||||
TXEmptyState(icon: "checkmark.shield", title: "还没有已信任的主机密钥",
|
||||
subtitle: "首次连接主机时会自动记住其 host key")
|
||||
} else {
|
||||
ForEach(entries) { e in
|
||||
row(e)
|
||||
.contextMenu {
|
||||
Button(role: .destructive) {
|
||||
store.removeKey(e.id); reload()
|
||||
} label: { Label("移除信任", systemImage: "trash") }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(TX.Space.m)
|
||||
}
|
||||
}
|
||||
.navigationTitle("Known Hosts")
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbarBackground(p.bg, for: .navigationBar)
|
||||
.onAppear(perform: reload)
|
||||
}
|
||||
|
||||
private func row(_ e: KnownHostEntry) -> some View {
|
||||
VStack(alignment: .leading, spacing: 3) {
|
||||
Text("\(e.host):\(e.port)").font(.system(size: 15, weight: .semibold)).foregroundStyle(p.textPrimary)
|
||||
Text("出口：\(e.egress)").font(TX.Font.mono(11)).foregroundStyle(p.textSecondary)
|
||||
Text(e.fingerprint).font(TX.Font.mono(11)).foregroundStyle(p.textTertiary)
|
||||
.textSelection(.enabled)
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(TX.Space.m)
|
||||
.background(p.surface, in: RoundedRectangle(cornerRadius: TX.Radius.card))
|
||||
.overlay(RoundedRectangle(cornerRadius: TX.Radius.card).stroke(p.border, lineWidth: 1))
|
||||
}
|
||||
|
||||
private func reload() { entries = store.entries() }
|
||||
}
|
||||
Reference in New Issue
Block a user