💄 UI: Add empty state view for app list

Author: nookery

Core/View/Apps/AppList.swift

@@ -6,7 +6,8 @@ import SwiftUI
  * 应用列表视图
  * 
  * 显示和管理应用列表，支持根据显示类型过滤应用。
- * 当防火墙未运行或列表为空时显示引导视图。
+ * 当防火墙未运行或需要升级时显示引导视图。
+ * 当列表为空时显示优雅的空视图。
  */
 struct AppList: View, SuperLog {
     /// UI状态提供者
@@ -51,23 +52,35 @@ struct AppList: View, SuperLog {
     /// 构建应用列表视图
     var body: some View {
         ZStack {
-            ScrollView {
-                VStack(spacing: 0) {
-                    ForEach(Array((filtedApps.isNotEmpty ? filtedApps : SmartApp.samples).enumerated()), id: \.element.id) { index, app in
-                        AppLine(app: app)
-                        if index < (allApps.isNotEmpty ? allApps : SmartApp.samples).count - 1 {
-                            Divider()
+            if filtedApps.isEmpty && !shouldShowGuide {
+                // 显示空视图：当列表为空且不需要显示引导视图时
+                AppListEmptyView(displayType: ui.displayType)
+            } else {
+                ScrollView {
+                    VStack(spacing: 0) {
+                        ForEach(Array((filtedApps.isNotEmpty ? filtedApps : SmartApp.samples).enumerated()), id: \.element.id) { index, app in
+                            AppLine(app: app)
+                            if index < (allApps.isNotEmpty ? allApps : SmartApp.samples).count - 1 {
+                                Divider()
+                            }
                         }
                     }
                 }
             }
 
-            if firewall.status.isNotRunning() || filtedApps.isEmpty || ui.shouldShowUpgradeGuide {
+            if shouldShowGuide {
                 GuideView()
             }
         }
         .onAppear(perform: handleOnAppear)
     }
+    
+    /// 是否需要显示引导视图
+    /// 
+    /// 当防火墙未运行或需要升级时显示引导视图。
+    private var shouldShowGuide: Bool {
+        firewall.status.isNotRunning() || ui.shouldShowUpgradeGuide
+    }
 }
 
 // MARK: - Setter
@@ -149,6 +162,12 @@ extension AppList {
 
 // MARK: - Preview
 #Preview("App") {
+    ContentView()
+        .inRootView()
+        .frame(width: 600, height: 600)
+}
+
+#Preview("AppList") {
     AppList()
         .inRootView()
         .frame(width: 600, height: 800)

Core/View/Apps/AppListEmptyView.swift

@@ -0,0 +1,82 @@
+import SwiftUI
+import MagicCore
+
+/**
+ * 应用列表空视图
+ * 
+ * 当应用列表为空时显示的空状态视图。
+ * 根据显示类型（全部/允许/拒绝）显示相应的提示信息。
+ */
+struct AppListEmptyView: View {
+    /// 显示类型
+    let displayType: DisplayType
+    
+    /// 构建空视图
+    var body: some View {
+        VStack(spacing: 16) {
+            Image(systemName: "app.badge")
+                .font(.system(size: 48))
+                .foregroundColor(.secondary)
+            
+            Text(title)
+                .font(.headline)
+                .foregroundColor(.primary)
+            
+            if let description = description {
+                Text(description)
+                    .font(.subheadline)
+                    .foregroundColor(.secondary)
+                    .multilineTextAlignment(.center)
+                    .padding(.horizontal, 40)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+    }
+    
+    /// 空状态标题
+    private var title: String {
+        switch displayType {
+        case .All:
+            return "暂无应用"
+        case .Allowed:
+            return "暂无网络活动"
+        case .Rejected:
+            return "暂无被拒绝的应用"
+        }
+    }
+    
+    /// 空状态描述
+    private var description: String? {
+        switch displayType {
+        case .All:
+            return "当前没有应用产生网络活动"
+        case .Allowed:
+            return "当前没有网络活动"
+        case .Rejected:
+            return "当前没有拒绝访问网络的应用"
+        }
+    }
+}
+
+// MARK: - Preview
+#Preview("App") {
+    ContentView()
+        .inRootView()
+        .frame(width: 600, height: 600)
+}
+
+#Preview("AppListEmptyView - All") {
+    AppListEmptyView(displayType: .All)
+        .frame(width: 600, height: 400)
+}
+
+#Preview("AppListEmptyView - Allowed") {
+    AppListEmptyView(displayType: .Allowed)
+        .frame(width: 600, height: 400)
+}
+
+#Preview("AppListEmptyView - Rejected") {
+    AppListEmptyView(displayType: .Rejected)
+        .frame(width: 600, height: 400)
+}
+