fix network view

punchnet/Views/Network/NetworkView.swift

@@ -1,366 +1,313 @@
 //
 //  NetworkView.swift
 //  punchnet
-//
-//  Created by 安礼成 on 2026/1/16.
-//
-
 import SwiftUI
+import Observation
 
-// 连接状态
+// MARK: - 基础模型协议 (确保代码可编译，请根据实际 Model 调整)
 enum ConnectState {
-    case waitAuth
-    case connected
-    case disconnected
+    case waitAuth, connected, disconnected
 }
 
+// MARK: - 主网络视图
 struct NetworkView: View {
-    @Environment(UserContext.self) var userContext: UserContext
+    @Environment(UserContext.self) var userContext
+    @Environment(AppContext.self) var appContext
     @Environment(\.openWindow) private var openWindow
+    
     @State private var networkModel = NetworkModel()
     @State private var showMode: ShowMode = .resource
-    // 状态管理
     @State private var connectState: ConnectState = .disconnected
-    @State private var isOn: Bool = false
-    @State private var vpnManager: VPNManager = VPNManager.shared
+    @State private var isConnecting: Bool = false
 
-    // 展示状态
-    enum ShowMode {
-        case resource
-        case device
+    private var vpnManager = VPNManager.shared
+
+    enum ShowMode: String, CaseIterable {
+        case resource = "访问资源"
+        case device = "成员设备"
     }
     
     var body: some View {
-        VStack {
-            HStack {
-                
-                VStack {
-                    HStack(alignment: .center) {
-                        Text(userContext.networkSession?.networkName ?? "未知")
-                        Text(">")
-                        Spacer()
-                    }
-                    
-                    HStack {
-                        Toggle("", isOn: $isOn)
-                            .toggleStyle(SwitchToggleStyle(tint: .green))
-                            .disabled(true)
-                        
-                        Text("已连接")
-                        
-                        Spacer()
-                    }
-                }
-                .frame(width: 320)
-                
-                if self.connectState == .connected {
-                    // 显示设备和资源选项
-                    HStack {
-                        Button {
-                            self.showMode = .resource
-                        } label: {
-                            Text("资源")
-                        }
-                        
-                        Button {
-                            self.showMode = .device
-                        } label: {
-                            Text("设备")
-                        }
-                    }
-                }
-                Spacer()
-            }
+        VStack(spacing: 0) {
+            // 1. 头部区域 (Header)
+            headerSection
             
+            Divider()
+            
+            // 2. 内容区域 (Content)
             Group {
-                switch self.connectState {
+                switch connectState {
                 case .waitAuth:
-                    NetworkWaitAuthView(networkModel: self.networkModel)
+                    NetworkWaitAuthView(networkModel: networkModel)
                 case .connected:
-                    Group {
-                        switch self.showMode {
-                        case .resource:
-                            NetworkResourceGroupView(networkModel: self.networkModel)
-                        case .device:
-                            NetworkDeviceGroupView(networkModel: self.networkModel)
-                        }
-                    }
+                    connectedContent
                 case .disconnected:
-                    NetworkDisconnctedView(networkModel: self.networkModel)
+                    disconnectedContent
+                }
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .background(VisualEffectView(material: .windowBackground, blendingMode: .behindWindow))
+        }
+        .frame(minWidth: 700, minHeight: 500) // 适当调大宽度以适应 SplitView
+        .onAppear {
+            syncState(vpnManager.vpnStatus)
+        }
+        .onChange(of: vpnManager.vpnStatus) { _, newStatus in
+            withAnimation(.snappy) { syncState(newStatus) }
+        }
+    }
+}
+
+// MARK: - 视图组件扩展
+extension NetworkView {
+    
+    private var headerSection: some View {
+        HStack(spacing: 16) {
+            statusIndicator
+            
+            VStack(alignment: .leading, spacing: 2) {
+                Text(userContext.networkSession?.networkName ?? "未连接网络")
+                    .font(.system(size: 14, weight: .semibold))
+                
+                if connectState == .connected {
+                    Text("虚拟局域网 IP: \(networkModel.networkContext.ip)")
+                        .font(.system(size: 11, design: .monospaced))
+                        .foregroundColor(.secondary)
+                } else {
+                    Text("PunchNet 服务未就绪").font(.caption).foregroundColor(.secondary)
                 }
             }
             
             Spacer()
-        }
-        .padding(.top, 10)
-        .padding(.leading, 10)
-        .onChange(of: vpnManager.vpnStatus) { _, newState in
-            NSLog("print view change: \(newState)")
-            switch newState {
-            case .connected:
-                self.connectState = .connected
-                self.isOn = true
-            case .disconnected:
-                self.connectState = .disconnected
-                self.isOn = false
-            }
-        }
-        .toolbar {
-            if self.connectState == .connected {
-                ToolbarItem(placement: .primaryAction) {
-                    Button {
-                        openWindow(id: "settings")
-                    } label: {
-                        Image(systemName: "gearshape")
-                    }
+            
+            if connectState == .connected {
+                Picker("", selection: $showMode) {
+                    ForEach(ShowMode.allCases, id: \.self) { Text($0.rawValue).tag($0) }
                 }
+                .pickerStyle(.segmented)
+                .frame(width: 160)
             }
+            
+            Button { openWindow(id: "settings") } label: {
+                Image(systemName: "slider.horizontal.3")
+                    .font(.system(size: 14))
+                    .foregroundColor(.secondary)
+            }
+            .buttonStyle(.plain)
+            .help("配置中心")
         }
+        .padding(.horizontal, 20)
+        .padding(.vertical, 14)
+        .background(VisualEffectView(material: .headerView, blendingMode: .withinWindow))
     }
-}
-
-// 网络处于未连接状态
-struct NetworkDisconnctedView: View {
-    @Bindable var networkModel: NetworkModel
-    @Environment(AppContext.self) var appContext: AppContext
-    @Environment(UserContext.self) var userContext: UserContext
     
-    @State private var showAlert = false
-    @State private var errorMessage = ""
-
-    var body: some View {
+    private var statusIndicator: some View {
         ZStack {
-            Color.clear
+            Circle()
+                .fill(connectState == .connected ? Color.green.opacity(0.15) : Color.primary.opacity(0.05))
+                .frame(width: 36, height: 36)
             
-            VStack {
-                Button {
-                    Task { @MainActor in
-                        do {
-                            try await self.connect()
-                            try await self.startVpn()
-                        } catch let err {
-                            self.showAlert = true
-                            self.errorMessage = err.localizedDescription
-                        }
+            Image(systemName: connectState == .connected ? "checkmark.shield.fill" : "shield.slash.fill")
+                .symbolRenderingMode(.hierarchical)
+                .foregroundStyle(connectState == .connected ? Color.green : Color.secondary)
+                .font(.system(size: 16))
+        }
+    }
+    
+    @ViewBuilder
+    private var connectedContent: some View {
+        if showMode == .resource {
+            // 资源视图：网格布局
+            ScrollView {
+                LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 16)], spacing: 16) {
+                    ForEach(networkModel.networkContext.resourceList, id: \.id) { res in
+                        ResourceItemCard(resource: res)
                     }
-                } label: {
-                    Text("连接")
-                        .font(.system(size: 14, weight: .regular))
-                        .padding([.top, .bottom], 8)
-                        .padding([.leading, .trailing], 30)
-                        .foregroundColor(.white)
-                    
                 }
-                .background(Color(red: 74/255, green: 207/255, blue: 154/255))
-                .cornerRadius(5)
-                .frame(width: 120, height: 35)
-                
-                Button {
-                    Task {
-                        try await VPNManager.shared.disableVpn()
-                    }
-                } label: {
-                    Text("关闭")
-                        .font(.system(size: 14, weight: .regular))
-                        .padding([.top, .bottom], 8)
-                        .padding([.leading, .trailing], 30)
-                        .foregroundColor(.white)
-                    
+                .padding(20)
+            }
+            .transition(.opacity)
+        } else {
+            // 设备视图：双栏布局
+            NetworkDeviceGroupView(networkModel: networkModel)
+                .transition(.asymmetric(insertion: .move(edge: .trailing), removal: .opacity))
+        }
+    }
+    
+    private var disconnectedContent: some View {
+        VStack(spacing: 20) {
+            Spacer()
+            Image(systemName: "antenna.radiowaves.left.and.right")
+                .font(.system(size: 40, weight: .ultraLight))
+                .foregroundStyle(.tertiary)
+                .symbolEffect(.pulse, options: .repeating)
+            
+            Text("尚未接入网络").font(.headline)
+            
+            Button(action: { startConnection() }) {
+                if isConnecting {
+                    ProgressView().controlSize(.small).frame(width: 80)
+                } else {
+                    Text("建立安全连接").frame(width: 80)
                 }
-                .background(Color(red: 74/255, green: 207/255, blue: 154/255))
-                .cornerRadius(5)
-                .frame(width: 120, height: 35)
             }
+            .buttonStyle(.borderedProminent)
+            .disabled(isConnecting)
+            Spacer()
         }
-        .alert(isPresented: $showAlert) {
-            Alert(title: Text("提示"), message: Text(self.errorMessage))
-        }
-        
     }
     
-    private func connect() async throws {
-        guard let networkSession = userContext.networkSession else {
-            return
+    private func syncState(_ status: VPNManager.VPNStatus) {
+        switch status {
+        case .connected: connectState = .connected
+        case .disconnected: connectState = .disconnected
+        @unknown default: connectState = .disconnected
         }
-        try await networkModel.connect(networkSession: networkSession)
     }
     
-    // 执行登陆操作
-    private func startVpn() async throws {
-        guard let networkSession = userContext.networkSession else {
-            return
-        }
-        
-        let networkContext = networkModel.networkContext
-        let options = SystemConfig.getOptions(networkId: UInt32(networkSession.networkId),
-                                              networkDomain: networkSession.networkDomain,
-                                              ip: networkContext.ip,
-                                              maskLen: networkContext.maskLen,
-                                              accessToken: networkSession.accessToken,
-                                              identityId: networkContext.identityId,
-                                              hostname: networkContext.hostname,
-                                              noticePort: self.appContext.noticePort)
-        // token存在则优先使用token
-        try await VPNManager.shared.enableVpn(options: options!)
-    }
-    
-}
-
-// 网络处于连接状态
-
-// 显示资源信息
-struct NetworkResourceGroupView: View {
-    @Bindable var networkModel: NetworkModel
-    
-    var body: some View {
-        LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 3), spacing: 8) {
-            ForEach(self.networkModel.networkContext.resourceList, id: \.id) { resource in
-                NetworkResourceView(resource: resource)
-            }
+    private func startConnection() {
+        isConnecting = true
+        Task {
+            do {
+                guard let session = userContext.networkSession else { return }
+                try await networkModel.connect(networkSession: session)
+                let context = networkModel.networkContext
+                if let options = SystemConfig.getOptions(
+                    networkId: UInt32(session.networkId),
+                    networkDomain: session.networkDomain,
+                    ip: context.ip,
+                    maskLen: context.maskLen,
+                    accessToken: session.accessToken,
+                    identityId: context.identityId,
+                    hostname: context.hostname,
+                    noticePort: appContext.noticePort
+                ) {
+                    try await vpnManager.enableVpn(options: options)
+                }
+            } catch { print("Connection error: \(error)") }
+            await MainActor.run { isConnecting = false }
         }
     }
 }
 
-struct NetworkResourceView: View {
-    var resource: Resource
-    
-    var body: some View {
-        VStack {
-            HStack {
-                Text(resource.connectionStatus)
-                
-                Text(resource.name)
-                    .font(.system(size: 14, weight: .regular))
-            }
-            
-            Text(resource.url)
-                .font(.system(size: 14, weight: .regular))
-                .padding(.leading, 30)
-            
-        }
-    }
-}
-
-// 显示设备信息
+// MARK: - 设备组视图 (NavigationSplitView)
 struct NetworkDeviceGroupView: View {
     @Bindable var networkModel: NetworkModel
     @State private var selectedId: Int?
     
     var body: some View {
         NavigationSplitView {
-            List(self.networkModel.networkContext.nodeList, id: \.id, selection: $selectedId) { node in
+            List(networkModel.networkContext.nodeList, id: \.id, selection: $selectedId) { node in
                 NetworkNodeHeadView(node: node)
+                    .tag(node.id)
             }
             .listStyle(.sidebar)
-            .onChange(of: selectedId) {
-                self.networkModel.changeSelectedNode(nodeId: selectedId)
-            }
-            .onAppear {
-                if selectedId == nil {
-                    selectedId = self.networkModel.networkContext.nodeList.first?.id
-                }
-            }
+            .navigationSplitViewColumnWidth(min: 200, ideal: 220)
         } detail: {
-            NetworkNodeDetailView(node: networkModel.selectedNode)
+            if let selectedNode = networkModel.networkContext.nodeList.first(where: { $0.id == selectedId }) {
+                NetworkNodeDetailView(node: selectedNode)
+            } else {
+                ContentUnavailableView("选择成员设备", systemImage: "macbook.and.iphone", description: Text("查看详细网络信息和服务"))
+            }
+        }
+        .onAppear {
+            if selectedId == nil {
+                selectedId = networkModel.networkContext.nodeList.first?.id
+            }
         }
     }
-    
 }
 
+// MARK: - 子组件
 struct NetworkNodeHeadView: View {
     var node: Node
-    
     var body: some View {
-        VStack {
-            HStack {
-                Text(node.connectionStatus)
-                
-                Text(node.name)
-                    .font(.system(size: 14, weight: .regular))
-            }
+        HStack(spacing: 10) {
+            Circle()
+                .fill(node.connectionStatus == "在线" ? Color.green : Color.secondary.opacity(0.4))
+                .frame(width: 8, height: 8)
             
-            Text(node.ip)
-                .font(.system(size: 14, weight: .regular))
-                .padding(.leading, 30)
+            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)
     }
 }
 
 struct NetworkNodeDetailView: View {
-    @Environment(UserContext.self) var userContext: UserContext
-    var node: Node?
+    @Environment(UserContext.self) var userContext
+    var node: Node
     @State private var resources: [Resource] = []
+    @State private var isLoading = false
 
     var body: some View {
-        Group {
-            if let node {
-                List {
-                    Section {
-                        HStack {
-                            Text("连接状态")
-                            Text("\(node.connectionStatus)")
-                            Spacer()
-                        }
-                        
-                        HStack {
-                            Text("虚拟IPv4")
-                            Text("\(node.ip)")
-                            Spacer()
-                        }
-                        
-                        HStack {
-                            Text("操作系统")
-                            Text(node.system ?? "未知")
-                            Spacer()
-                        }
-                    }
-                    
-                    Section("服务列表") {
-                        ForEach(resources, id: \.id) { resource in
-                            HStack {
-                                Text("\(resource.name)")
-                                Text("\(resource.url)")
-                            }
+        List {
+            Section("节点信息") {
+                LabeledContent("连接状态", value: node.connectionStatus)
+                LabeledContent("虚拟IPv4", value: node.ip)
+                LabeledContent("系统环境", value: node.system ?? "未知")
+            }
+            
+            Section("提供的服务") {
+                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)
                         }
                     }
                 }
-                .task(id: node.id) {
-                    await self.loadNodeResources(id: node.id)
-                }
-            } else {
-                EmptyView()
             }
         }
+        .task(id: node.id) { await loadNodeResources(id: node.id) }
     }
     
     private func loadNodeResources(id: Int) async {
-        guard let networkSession = userContext.networkSession else {
-            return
-        }
+        guard let session = userContext.networkSession else { return }
+        isLoading = true
+        defer { isLoading = false }
         
         let params: [String: Any] = [
             "client_id": SystemConfig.getClientId(),
-            "access_token": networkSession.accessToken,
+            "access_token": session.accessToken,
             "id": id
         ]
-        
-        if let nodeDetail = try? await SDLAPIClient.doPost(path: "/get_node_resources", params: params, as: NodeDetail.self) {
-            self.resources = nodeDetail.resourceList
+        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 {
-        Color.clear
-            .overlay {
-                Text("等待确认中")
-            }
+        VStack(spacing: 16) {
+            ProgressView()
+            Text("等待认证确认中...").foregroundColor(.secondary)
+        }
     }
 }
-
-#Preview {
-    NetworkView()
-}