fxi view

punchnet/Views/Network/NetworkState.swift

@@ -31,7 +31,7 @@ class NetworkState {
         var schema: String
     }
     
-    struct Device: Equatable, Hashable {
+    struct Device {
         var id: Int
         var status: Int
         var name: String
@@ -54,11 +54,14 @@ class NetworkState {
         var name: String
     }
     
+    // 状态管理
     var connectState: ConnectState = .connected
     var model: NetworkModel = .init(name: "123@abc.com的网络")
-    
     var showModel: ShowMode = .device
     
+    // 当前选中的设备
+    var selectedDevice: Device?
+    
     var resources: [Resource] = [
         .init(id: 1, status: 1, name: "OA", schema: "http://100.92.108.1:8080"),
         .init(id: 2, status: 0, name: "数据资源", schema: "http://100.92.108.1:8080"),
@@ -73,9 +76,9 @@ class NetworkState {
     
     init() {
         self.devices = [
-            .init(id: 1, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
+            .init(id: 1, status: 1, name: "test1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
-            .init(id: 2, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
+            .init(id: 2, status: 1, name: "test2", ipv4: "192.168.1.2", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
-            .init(id: 3, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
+            .init(id: 3, status: 1, name: "test3", ipv4: "192.168.1.3", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
             .init(id: 4, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
             .init(id: 5, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
             .init(id: 15, status: 1, name: "阿里云1", ipv4: "192.168.1.1", ipv6: "fa9d.fa9d.fa9d.fa9d", system: "MacOS 12", resources: self.resources),
@@ -86,4 +89,12 @@ class NetworkState {
         ]
     }
     
+    func changeSelectedDevice(deviceId: Int?) {
+        if let deviceId {
+            if let device = self.devices.first(where: { $0.id == deviceId}) {
+                self.selectedDevice = device
+            }
+        }
+    }
+    
 }

punchnet/Views/Network/NetworkView.swift

@@ -108,9 +108,9 @@ struct NetworkConnctedView: View {
             Group {
                 switch state.showModel {
                 case .resource:
-                    NetworkResourceGroupView(resources: self.state.resources)
+                    NetworkResourceGroupView(state: self.state)
                 case .device:
-                    NetworkDeviceGroupView(devices: self.state.devices, selection: self.state.devices[0])
+                    NetworkDeviceGroupView(state: self.state)
                 }
             }
         }
@@ -119,54 +119,58 @@ struct NetworkConnctedView: View {
 
 // 显示资源信息
 struct NetworkResourceGroupView: View {
-    var resources: [NetworkState.Resource]
+    @Bindable var state: NetworkState
-    
-    struct NetworkResourceView: View {
-        var resource: NetworkState.Resource
-        
-        var body: some View {
-            VStack {
-                HStack {
-                    Text(resource.status == 1 ? "yes" : "no")
-                    
-                    Text(resource.name)
-                        .font(.system(size: 14, weight: .regular))
-                }
-                
-                Text(resource.schema)
-                    .font(.system(size: 14, weight: .regular))
-                    .padding(.leading, 30)
-
-            }
-        }
-    }
     
     var body: some View {
         LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 3), spacing: 8) {
-            ForEach(resources, id: \.id) { resource in
+            ForEach(self.state.resources, id: \.id) { resource in
                 NetworkResourceView(resource: resource)
             }
         }
     }
 }
 
+struct NetworkResourceView: View {
+    var resource: NetworkState.Resource
+    
+    var body: some View {
+        VStack {
+            HStack {
+                Text(resource.status == 1 ? "yes" : "no")
+                
+                Text(resource.name)
+                    .font(.system(size: 14, weight: .regular))
+            }
+            
+            Text(resource.schema)
+                .font(.system(size: 14, weight: .regular))
+                .padding(.leading, 30)
+
+        }
+    }
+}
+
 // 显示设备信息
 struct NetworkDeviceGroupView: View {
-    var devices: [NetworkState.Device]
+    @Bindable var state: NetworkState
-    @State private var selection: NetworkState.Device
+    @State private var selectedId: Int?
-    
-    init(devices: [NetworkState.Device], selection: NetworkState.Device) {
-        self.devices = devices
-        self.selection = selection
-    }
     
     var body: some View {
         NavigationSplitView {
-            List(devices, id: \.id, selection: $selection) { device in
+            List(self.state.devices, id: \.id, selection: $selectedId) { device in
                 NetworkDeviceHeadView(device: device)
             }
+            .listStyle(.sidebar)
+            .onChange(of: selectedId) {
+                self.state.changeSelectedDevice(deviceId: selectedId)
+            }
+            .onAppear {
+                if selectedId == nil {
+                    selectedId = self.state.devices.first?.id
+                }
+            }
         } detail: {
-            NetworkDeviceDetailView(device: $selection)
+            NetworkDeviceDetailView(device: $state.selectedDevice)
         }
     }
     
@@ -192,50 +196,59 @@ struct NetworkDeviceHeadView: View {
 }
 
 struct NetworkDeviceDetailView: View {
-    @Binding var device: NetworkState.Device
+    @Binding var device: NetworkState.Device?
 
     var body: some View {
-        VStack {
+        Group {
-            HStack {
+            if let device {
-                Text("连接状态")
+                List {
+                    Section {
+                        HStack {
+                            Text("连接状态")
                             
-                Text("\(device.status)")
+                            Text("\(device.status)")
-            }
                             
-            HStack {
+                            Spacer()
-                Text("虚拟IPv4")
+                        }
                         
-                Text("\(device.ipv4)")
+                        HStack {
-            }
+                            Text("虚拟IPv4")
                             
-            HStack {
+                            Text("\(device.ipv4)")
-                Text("虚拟IPv6")
+                            Spacer()
+                        }
                         
-                Text("\(device.ipv6)")
+                        HStack {
-            }
+                            Text("虚拟IPv6")
                             
-            HStack {
+                            Text("\(device.ipv6)")
-                Text("操作系统")
+                            Spacer()
+                        }
                         
-                Text("\(device.system)")
+                        HStack {
-            }
+                            Text("操作系统")
                             
-            VStack {
+                            Text("\(device.system)")
-                Text("服务列表")
+                            Spacer()
+                        }
+                    }
                     
-                List(device.resources, id: \.id) { resource in
+                    Section("服务列表") {
-                    HStack {
+                        ForEach(device.resources, id: \.id) { resource in
-                        Text("\(resource.name)")
+                            HStack {
-                        Text("\(resource.schema)")
+                                Text("\(resource.name)")
+                                Text("\(resource.schema)")
+                            }
+                        }
                     }
                 }
+            } else {
+                EmptyView()
             }
         }
     }
 }
 
-
-
 #Preview {
     NetworkView()
 }

punchnet/punchnetApp.swift

@@ -45,7 +45,7 @@ struct punchnetApp: App {
     var body: some Scene {
         WindowGroup(id: "mainWindow") {
             //IndexView(noticeServer: self.noticeServer)
-            LoginView()
+            NetworkView()
                 .onAppear {
                     // 获取主屏幕的尺寸
                     guard let screenFrame = NSScreen.main?.frame else { return }