fix network view

punchnet/Views/Network/NetworkView.swift

@@ -4,11 +4,9 @@
 import SwiftUI
 import Observation
 
-// 连接状态
+// MARK: - 基础模型协议 (确保代码可编译，请根据实际 Model 调整)
 enum ConnectState {
-    case waitAuth
+    case waitAuth, connected, disconnected
-    case connected
-    case disconnected
 }
 
 // MARK: - 主网络视图
@@ -31,40 +29,31 @@ struct NetworkView: View {
     
     var body: some View {
         VStack(spacing: 0) {
-            // 头部：使用原生毛玻璃材质
+            // 1. 头部区域 (Header)
             headerSection
             
             Divider()
             
-            // 内容区
+            // 2. 内容区域 (Content)
-            ZStack {
+            Group {
-                VisualEffectView(material: .windowBackground, blendingMode: .behindWindow)
-                    .ignoresSafeArea()
-                
-                ScrollView {
-                    VStack(spacing: 20) {
                 switch connectState {
                 case .waitAuth:
-                            statusLoadingView
+                    NetworkWaitAuthView(networkModel: networkModel)
                 case .connected:
                     connectedContent
                 case .disconnected:
                     disconnectedContent
                 }
             }
-                    .padding(24)
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .background(VisualEffectView(material: .windowBackground, blendingMode: .behindWindow))
         }
-                .scrollIndicators(.hidden)
+        .frame(minWidth: 700, minHeight: 500) // 适当调大宽度以适应 SplitView
-            }
-        }
-        .frame(minWidth: 550, minHeight: 480)
         .onAppear {
             syncState(vpnManager.vpnStatus)
         }
         .onChange(of: vpnManager.vpnStatus) { _, newStatus in
-            withAnimation(.snappy) {
+            withAnimation(.snappy) { syncState(newStatus) }
-                syncState(newStatus)
-            }
         }
     }
 }
@@ -74,7 +63,6 @@ extension NetworkView {
     
     private var headerSection: some View {
         HStack(spacing: 16) {
-            // 状态指示器
             statusIndicator
             
             VStack(alignment: .leading, spacing: 2) {
@@ -109,7 +97,7 @@ extension NetworkView {
             .help("配置中心")
         }
         .padding(.horizontal, 20)
-        .padding(.vertical, 16)
+        .padding(.vertical, 14)
         .background(VisualEffectView(material: .headerView, blendingMode: .withinWindow))
     }
     
@@ -117,75 +105,58 @@ extension NetworkView {
         ZStack {
             Circle()
                 .fill(connectState == .connected ? Color.green.opacity(0.15) : Color.primary.opacity(0.05))
-                .frame(width: 40, height: 40)
+                .frame(width: 36, height: 36)
             
             Image(systemName: connectState == .connected ? "checkmark.shield.fill" : "shield.slash.fill")
                 .symbolRenderingMode(.hierarchical)
                 .foregroundStyle(connectState == .connected ? Color.green : Color.secondary)
-                .font(.system(size: 18))
+                .font(.system(size: 16))
-                .symbolEffect(.bounce, value: connectState == .connected)
         }
     }
     
+    @ViewBuilder
     private var connectedContent: some View {
-        VStack(spacing: 16) {
         if showMode == .resource {
-                LazyVGrid(columns: [GridItem(.adaptive(minimum: 220), spacing: 16)], spacing: 16) {
+            // 资源视图：网格布局
+            ScrollView {
+                LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 16)], spacing: 16) {
                     ForEach(networkModel.networkContext.resourceList, id: \.id) { res in
                         ResourceItemCard(resource: res)
                     }
                 }
+                .padding(20)
+            }
+            .transition(.opacity)
         } else {
-                VStack(spacing: 0) {
+            // 设备视图：双栏布局
-                    let nodes = networkModel.networkContext.nodeList
+            NetworkDeviceGroupView(networkModel: networkModel)
-                    ForEach(nodes, id: \.id) { node in
+                .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .opacity))
-                        DeviceItemRow(node: node, isLast: node.id == nodes.last?.id)
-                    }
-                }
-                .background(Color(NSColor.controlBackgroundColor).opacity(0.4))
-                .cornerRadius(12)
-                .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color.primary.opacity(0.08), lineWidth: 1))
-            }
         }
     }
     
     private var disconnectedContent: some View {
-        VStack(spacing: 24) {
+        VStack(spacing: 20) {
-            Spacer().frame(height: 40)
+            Spacer()
-            
             Image(systemName: "antenna.radiowaves.left.and.right")
-                .font(.system(size: 48, weight: .ultraLight))
+                .font(.system(size: 40, weight: .ultraLight))
                 .foregroundStyle(.tertiary)
                 .symbolEffect(.pulse, options: .repeating)
             
-            VStack(spacing: 8) {
             Text("尚未接入网络").font(.headline)
-                Text("连接后即可访问内部资源与成员节点").font(.subheadline).foregroundColor(.secondary)
-            }
             
             Button(action: { startConnection() }) {
                 if isConnecting {
-                    ProgressView().controlSize(.small).frame(width: 110)
+                    ProgressView().controlSize(.small).frame(width: 80)
                 } else {
-                    Text("建立安全连接").fontWeight(.medium).frame(width: 110)
+                    Text("建立安全连接").frame(width: 80)
                 }
             }
             .buttonStyle(.borderedProminent)
-            .controlSize(.large)
             .disabled(isConnecting)
-            
             Spacer()
         }
     }
     
-    private var statusLoadingView: some View {
-        VStack(spacing: 16) {
-            ProgressView()
-            Text("正在同步网络状态...").font(.subheadline).foregroundColor(.secondary)
-        }
-        .frame(maxWidth: .infinity, minHeight: 300)
-    }
-    
     private func syncState(_ status: VPNManager.VPNStatus) {
         switch status {
         case .connected: connectState = .connected
@@ -198,13 +169,7 @@ extension NetworkView {
         isConnecting = true
         Task {
             do {
-                guard let session = userContext.networkSession else {
+                guard let session = userContext.networkSession else { return }
-                    await MainActor.run {
-                        isConnecting = false
-                    }
-                    return
-                }
-                
                 try await networkModel.connect(networkSession: session)
                 let context = networkModel.networkContext
                 if let options = SystemConfig.getOptions(
@@ -219,105 +184,130 @@ extension NetworkView {
                 ) {
                     try await vpnManager.enableVpn(options: options)
                 }
-            } catch {
+            } catch { print("Connection error: \(error)") }
-                print("Connection error: \(error)")
-            }
             await MainActor.run { isConnecting = false }
         }
     }
 }
 
-// MARK: - 子组件：资源卡片
+// MARK: - 设备组视图 (NavigationSplitView)
-struct ResourceItemCard: View {
+struct NetworkDeviceGroupView: View {
-    let resource: Resource
+    @Bindable var networkModel: NetworkModel
-    @State private var isHovered = false
+    @State private var selectedId: Int?
     
     var body: some View {
-        VStack(alignment: .leading, spacing: 10) {
+        NavigationSplitView {
-            HStack {
+            List(networkModel.networkContext.nodeList, id: \.id, selection: $selectedId) { node in
-                Image(systemName: "safari.fill")
+                NetworkNodeHeadView(node: node)
-                    .foregroundColor(.accentColor)
+                    .tag(node.id)
-                    .font(.title3)
-                Spacer()
-                Circle()
-                    .fill(Color.green)
-                    .frame(width: 6, height: 6)
-                    .shadow(color: .green.opacity(0.5), radius: 2)
             }
-            
+            .listStyle(.sidebar)
-            Text(resource.name)
+            .navigationSplitViewColumnWidth(min: 200, ideal: 220)
-                .font(.system(size: 13, weight: .semibold))
+        } detail: {
-                .lineLimit(1)
+            if let selectedNode = networkModel.networkContext.nodeList.first(where: { $0.id == selectedId }) {
-            
+                NetworkNodeDetailView(node: selectedNode)
-            Text(resource.url)
+            } else {
-                .font(.system(size: 10, design: .monospaced))
+                ContentUnavailableView("选择成员设备", systemImage: "macbook.and.iphone", description: Text("查看详细网络信息和服务"))
-                .foregroundColor(.secondary)
-                .lineLimit(1)
             }
-        .padding(14)
-        .background(isHovered ? Color.primary.opacity(0.05) : Color(NSColor.controlBackgroundColor).opacity(0.3))
-        .cornerRadius(12)
-        .overlay(RoundedRectangle(cornerRadius: 12).stroke(isHovered ? Color.accentColor.opacity(0.3) : Color.primary.opacity(0.08), lineWidth: 1))
-        .onHover { isHovered = $0 }
-        .contextMenu {
-            Button("复制链接") {
-                NSPasteboard.general.clearContents()
-                NSPasteboard.general.setString(resource.url, forType: .string)
-            }
-            Button("在浏览器打开") {
-                if let url = URL(string: resource.url) {
-                    NSWorkspace.shared.open(url)
         }
+        .onAppear {
+            if selectedId == nil {
+                selectedId = networkModel.networkContext.nodeList.first?.id
             }
         }
     }
 }
 
-// MARK: - 子组件：设备行
+// MARK: - 子组件
-struct DeviceItemRow: View {
+struct NetworkNodeHeadView: View {
-    let node: Node
+    var node: Node
-    let isLast: Bool
-    @State private var isHovered = false
-    
     var body: some View {
-        VStack(spacing: 0) {
+        HStack(spacing: 10) {
-            HStack(spacing: 12) {
+            Circle()
-                Image(systemName: "desktopcomputer")
+                .fill(node.connectionStatus == "在线" ? Color.green : Color.secondary.opacity(0.4))
-                    .font(.title3)
+                .frame(width: 8, height: 8)
-                    .foregroundStyle(isHovered ? .primary : .secondary)
             
             VStack(alignment: .leading, spacing: 2) {
                 Text(node.name).font(.system(size: 13, weight: .medium))
                 Text(node.ip).font(.system(size: 11, design: .monospaced)).foregroundColor(.secondary)
             }
+        }
+        .padding(.vertical, 4)
+    }
+}
 
-                Spacer()
+struct NetworkNodeDetailView: View {
+    @Environment(UserContext.self) var userContext
+    var node: Node
+    @State private var resources: [Resource] = []
+    @State private var isLoading = false
 
-                HStack(spacing: 4) {
+    var body: some View {
-                    Text("直连").font(.system(size: 9, weight: .bold))
+        List {
-                        .padding(.horizontal, 4).padding(.vertical, 1)
+            Section("节点信息") {
-                        .background(Color.accentColor.opacity(0.1)).foregroundColor(.accentColor).cornerRadius(3)
+                LabeledContent("连接状态", value: node.connectionStatus)
-                    Circle().fill(Color.green).frame(width: 6, height: 6)
+                LabeledContent("虚拟IPv4", value: node.ip)
+                LabeledContent("系统环境", value: node.system ?? "未知")
             }
-            }
-            .padding(.vertical, 12)
-            .padding(.horizontal, 16)
-            .contentShape(Rectangle())
-            .background(isHovered ? Color.primary.opacity(0.03) : Color.clear)
-            .onHover { isHovered = $0 }
             
-            if !isLast {
+            Section("提供的服务") {
-                Divider().padding(.leading, 44).opacity(0.5)
+                if isLoading {
+                    ProgressView().controlSize(.small)
+                } else if resources.isEmpty {
+                    Text("该节点暂未发布资源").foregroundColor(.secondary).font(.callout)
+                } else {
+                    ForEach(resources, id: \.id) { res in
+                        VStack(alignment: .leading) {
+                            Text(res.name).font(.body)
+                            Text(res.url).font(.caption).foregroundColor(.secondary)
                         }
                     }
-        .contextMenu {
-            Button("复制 IP 地址") {
-                NSPasteboard.general.clearContents()
-                NSPasteboard.general.setString(node.ip, forType: .string)
                 }
-            Button("终端 SSH 连接") {
-                /* 呼起终端逻辑 */
             }
         }
+        .task(id: node.id) { await loadNodeResources(id: node.id) }
+    }
+    
+    private func loadNodeResources(id: Int) async {
+        guard let session = userContext.networkSession else { return }
+        isLoading = true
+        defer { isLoading = false }
+        
+        let params: [String: Any] = [
+            "client_id": SystemConfig.getClientId(),
+            "access_token": session.accessToken,
+            "id": id
+        ]
+        if let detail = try? await SDLAPIClient.doPost(path: "/get_node_resources", params: params, as: NodeDetail.self) {
+            self.resources = detail.resourceList
+        }
+    }
+}
+
+struct ResourceItemCard: View {
+    let resource: Resource
+    @State private var isHovered = false
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            Image(systemName: "safari.fill").foregroundColor(.accentColor).font(.title3)
+            Text(resource.name).font(.headline).lineLimit(1)
+            Text(resource.url).font(.caption2).foregroundColor(.secondary).lineLimit(1)
+        }
+        .padding()
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(Color(NSColor.controlBackgroundColor).opacity(isHovered ? 0.8 : 0.4))
+        .cornerRadius(10)
+        .onHover { isHovered = $0 }
+    }
+}
+
+struct NetworkWaitAuthView: View {
+    @Bindable var networkModel: NetworkModel
+    var body: some View {
+        VStack(spacing: 16) {
+            ProgressView()
+            Text("等待认证确认中...").foregroundColor(.secondary)
+        }
     }
 }