如何在macOS SwiftUI应用中实现Xcode风格的标签页文档功能？

要实现类似Xcode的局部标签页（左侧固定菜单、右侧标签化内容），你需要自己构建标签管理逻辑，而非依赖系统WindowGroup的全局标签。以下是适配你现有应用结构的完整实现方案：

1. 定义标签数据模型与管理器 #

首先创建标签项模型，以及负责标签增删切换的状态管理类：

// 单个标签的数据模型，存储请求相关状态
struct RequestTab: Identifiable {
    let id = UUID()
    var title: String = "New Request"
    // 可扩展请求相关属性，比如请求地址、方法、响应内容等
    var requestURL: String = ""
    var responseContent: String = ""
}

// 标签管理器，负责标签的状态维护
@MainActor
@Observable
class TabManager {
    var tabs: [RequestTab] = [RequestTab()] // 默认初始化一个标签
    var selectedTabId: UUID?
    
    init() {
        selectedTabId = tabs.first?.id
    }
    
    // 添加新标签
    func addNewTab() {
        let newTab = RequestTab()
        tabs.append(newTab)
        selectedTabId = newTab.id
    }
    
    // 关闭指定标签
    func closeTab(_ tabId: UUID) {
        guard let index = tabs.firstIndex(where: { $0.id == tabId }) else { return }
        
        // 关闭当前选中标签时，自动切换到相邻标签
        if tabId == selectedTabId {
            if tabs.count > 1 {
                selectedTabId = index > 0 ? tabs[index-1].id : tabs[index+1].id
            } else {
                // 至少保留一个标签
                return
            }
        }
        
        tabs.remove(at: index)
    }
    
    // 获取当前选中的标签
    var selectedTab: RequestTab? {
        tabs.first(where: { $0.id == selectedTabId })
    }
}

2. 修改RequestView布局，添加局部标签页 #

在RequestView中拆分布局：左侧固定菜单，右侧实现自定义标签栏+内容区域：

struct RequestView: View {
    @Environment(AuthenticationManager.self) var authManager
    @Environment(TabManager.self) var tabManager // 从环境获取标签管理器
    
    var body: some View {
        HStack(spacing: 0) {
            // 左侧固定垂直菜单
            VStack {
                Button("保存请求") {}
                Button("导出响应") {}
                Spacer()
                Button("退出登录") {
                    authManager.isAuthenticated = false
                }
            }
            .frame(width: 180)
            .padding()
            .background(Color(NSColor.controlBackgroundColor))
            
            // 右侧标签化内容区域
            VStack(spacing: 0) {
                // 自定义标签栏
                HStack(spacing: 0) {
                    ForEach(tabManager.tabs) { tab in
                        TabBarItem(tab: tab, isSelected: tab.id == tabManager.selectedTabId) {
                            tabManager.selectedTabId = tab.id
                        } closeAction: {
                            tabManager.closeTab(tab.id)
                        }
                    }
                    
                    // 添加新标签按钮
                    Button(action: tabManager.addNewTab) {
                        Image(systemName: "plus")
                            .frame(width: 30, height: 30)
                    }
                    .buttonStyle(.plain)
                }
                .background(Color(NSColor.controlBackgroundColor))
                
                // 当前选中标签的内容区域
                if let selectedTab = tabManager.selectedTab {
                    RequestContentView(tab: $selectedTab)
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

// 自定义标签栏项视图
struct TabBarItem: View {
    let tab: RequestTab
    let isSelected: Bool
    let selectAction: () -> Void
    let closeAction: () -> Void
    
    var body: some View {
        HStack(spacing: 4) {
            Button(action: selectAction) {
                Text(tab.title)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
            }
            .buttonStyle(.plain)
            .background(isSelected ? Color(NSColor.selectedControlColor) : .clear)
            .foregroundColor(isSelected ? .white : .primary)
            .cornerRadius(4)
            
            Button(action: closeAction) {
                Image(systemName: "xmark")
                    .frame(width: 16, height: 16)
            }
            .buttonStyle(.plain)
            .opacity(isSelected ? 1 : 0.5)
            .padding(.trailing, 4)
        }
        .hoverEffect(.highlight)
    }
}

// 单个标签的内容视图（请求编辑器+响应区域）
struct RequestContentView: View {
    @Binding var tab: RequestTab
    
    var body: some View {
        VStack(spacing: 0) {
            // 请求编辑器区域
            HStack {
                Button("GET") {}
                    .padding(.horizontal)
                TextField("输入请求URL", text: $tab.requestURL)
                    .padding()
                Button("发送请求") {
                    // 模拟请求发送，更新响应内容
                    tab.responseContent = "响应内容：\(tab.requestURL)\n时间：\(Date())"
                }
                .padding(.horizontal)
            }
            .border(Color(NSColor.separatorColor))
            
            // 响应内容区域
            TextEditor(text: $tab.responseContent)
                .padding()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

3. 绑定Cmd+T快捷键到新建标签 #

修改MyApp代码，将快捷键绑定到标签管理器的新建方法，并将管理器注入环境：

@main
struct MyApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    @State private var tabManager = TabManager()
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(AuthenticationManager(appDelegate: appDelegate))
                .environment(tabManager) // 将标签管理器注入环境
        }
        .commands {
            CommandGroup(after: .newItem) {
                Button("New Tab") {
                    tabManager.addNewTab()
                }
                .keyboardShortcut("t", modifiers: [.command])
                .disabled(tabManager.tabs.isEmpty)
            }
        }
    }
}

4. 禁用系统全局标签 #

为避免用户通过系统菜单创建全局标签（导致回到LoginView），在AppDelegate中禁用系统标签功能：

class AppDelegate: NSObject, NSApplicationDelegate {
    func applicationDidFinishLaunching(_ notification: Notification) {
        NSApplication.shared.windows.forEach { window in
            window.tabbingMode = .disallowed
        }
    }
}

关键说明 #

• 自定义标签管理器完全控制标签生命周期，确保所有标签都处于已认证状态（仅登录后才会进入RequestView）。
• 标签栏样式可按需自定义，比如添加拖拽排序、调整配色等，比系统TabView更灵活。
• 快捷键Cmd+T直接绑定到局部标签创建，符合用户操作习惯。

内容的提问来源于stack exchange，提问作者Pieter