解决界面效果问题

punchnet/Views/Settings/SettingsState.swift

@@ -20,14 +20,21 @@ class SettingsState {
         var name: String
     }
     
+    enum MenuItem {
+        case accout
+        case network
+        case device
+        case system
+        case about
+    }
     
     var networks: [Network]
     var selectedNetwork: Network
     
-    
     var exitNodes: [ExitNode]
     var selectedExitNode: ExitNode
     
+    var currentMeun: MenuItem = .accout
     
     init() {
         let networks: [Network] = [

punchnet/Views/Settings/SettingsView.swift

@@ -8,11 +8,68 @@
 import SwiftUI
 
 struct SettingsView: View {
+    @State private var state = SettingsState()
+    
     var body: some View {
-        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
+        NavigationSplitView {
+            List {
+                SettingsMenuItemView(title: "账号", .accout, state: state)
+                SettingsMenuItemView(title: "网络", .network, state: state)
+                SettingsMenuItemView(title: "设备", .device, state: state)
+                SettingsMenuItemView(title: "软件", .system, state: state)
+                SettingsMenuItemView(title: "关于", .about, state: state)
+            }
+            .listStyle(.sidebar)
+            .border(Color.red)
+            
+        } detail: {
+            Group {
+                switch self.state.currentMeun {
+                case .accout:
+                    SettingsAccountView(state: self.state)
+                case .network:
+                    SettingsNetworkView(state: self.state)
+                case .device:
+                    SettingsDeviceView()
+                case .system:
+                    SettingsSystemView()
+                case .about:
+                    SettingsAboutView()
+                }
+            }
+            .padding()
+            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        }
+    }
+    
+}
+
+struct SettingsMenuItemView: View {
+    var title: String
+    var role: SettingsState.MenuItem
+    @Bindable var state: SettingsState
+    
+    init(title: String, _ role: SettingsState.MenuItem, state: SettingsState) {
+        self.title = title
+        self.role = role
+        self.state = state
+    }
+    
+    var body: some View {
+        HStack(alignment: .center) {
+                Rectangle()
+                    .frame(width: 3, height: 25)
+                    .foregroundColor(self.state.currentMeun == role ? .black : .clear)
+            
+            Text(title)
+                .onTapGesture {
+                    self.state.currentMeun = self.role
+                }
+        }
     }
 }
 
+
 #Preview {
     SettingsView()
 }