EasyApp

设置页面

了解 EasyAppSwiftUI 设置页面模块

settings

设置页面模块

Settings 模块提供了完整的应用设置功能,包括用户资料管理、订阅状态、系统配置、帮助信息等核心功能。

模块结构

Settings/
├── View/
│   └── SettingsView.swift           # 主设置页面
└── SubPages/
    ├── UserProfile/                 # 用户资料管理
    │   ├── View/UserProfile.swift
    │   ├── ViewModel/
    │   └── Model/
    ├── About/                       # 关于页面
    │   └── View/AboutView.swift
    ├── Policy/                      # 隐私政策
    │   └── View/PrivacyPolicyView.swift
    └── FQA/                         # 常见问题
        ├── View/FQAView.swift
        ├── Model/
        └── Datas/

核心功能

1. 用户信息管理

功能特性:

  • 用户头像展示和更新
  • 用户名和邮箱信息
  • 订阅状态显示
  • 个人资料编辑
struct UserInfoView: View {
    @EnvironmentObject private var authManager: AuthManager
    var viewModel: UserProfileVM
    
    var body: some View {
        HStack {
            AvatarImage(data: viewModel.avatarData, width: 40)
            
            VStack(alignment: .leading) {
                Text(viewModel.email)
                    .font(.headline)
                
                Text(viewModel.username)
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                
                // 订阅状态显示
                Text(
                    String(
                        format: String(localized: "current_membership_format"),
                        authManager.storeKitProduct?.displayName ?? String(localized: "free")
                    )
                )
                .font(.subheadline)
                .foregroundColor(.secondary)
            }
        }
    }
}

2. 导航路由系统

使用枚举定义清晰的导航路径:

enum SettingsPath: Hashable, Equatable {
    case userInfo           // 用户信息
    case inAppPurchases     // 应用内购买
    case policy             // 隐私政策
    case about              // 关于页面
    case fqa                // 常见问题
}

3. 分组设置布局

用户信息区域

Section(header: Text("user_information")) {
    EANavigationLink(value: SettingsPath.userInfo) {
        UserInfoView(viewModel: viewModel)
            .redacted(if: viewModel.state.isLoading)
    }
}

应用内购买管理

Section(header: Text("in_app_purchases")) {
    EANavigationLink(value: SettingsPath.inAppPurchases) {
        HStack(spacing: 12) {
            Image(systemName: "creditcard.fill")
                .resizable()
                .frame(width: 30, height: 30)
                .foregroundStyle(Color.onboardingBackground)
            
            VStack(alignment: .leading, spacing: 6) {
                Text("in_app_purchases")
                    .font(.headline)
                Text("manage_in_app_purchases")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

4. 系统设置集成

语言设置

EANavigationLink(action: {
    OpenApp.openUrlOutsideApp(UIApplication.openSettingsURLString)
}) {
    HStack {
        Label("language", systemImage: "globe.americas.fill")
        Spacer()
        Image(systemName: "chevron.right")
            .foregroundColor(Color(UIColor.tertiaryLabel))
    }
}

5. 用户资料页面

支持完整的用户资料管理:

struct UserProfileView: View {
    @StateObject private var viewModel = UserProfileVM()
    @EnvironmentObject private var authManager: AuthManager
    
    var body: some View {
        List {
            // 头像选择区域
            Section {
                HStack {
                    Spacer()
                    Group {
                        if viewModel.uploadLoading {
                            ProgressView()
                                .frame(width: 100, height: 100)
                        } else {
                            AvatarImage(data: viewModel.avatarData, width: 100)
                                .onTapGesture {
                                    viewModel.showPhotosPicker = true
                                }
                        }
                    }
                    Spacer()
                }
            }
            
            // 用户信息编辑区域
            // ...
        }
        .photosPicker(
            isPresented: $viewModel.showPhotosPicker,
            selection: $viewModel.imageSelection,
            matching: .images
        )
    }
}

6. 关于页面

展示应用基本信息和联系方式:

struct AboutView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                // 应用图标
                if let logo = UIImage(named: "appicon") {
                    Image(uiImage: logo)
                        .resizable()
                        .frame(width: 100, height: 100)
                        .circle()
                        .shadowCompat(radius: 2)
                }
                
                // 应用信息
                VStack(spacing: 8) {
                    Text(AppData.appName)
                        .font(.title)
                        .bold()
                    
                    Text(
                        String(
                            format: "version_build", 
                            AppData.appVersion,
                            AppData.appBuildNumber
                        )
                    )
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                }
                
                // 联系方式
                SocialLinkView(
                    url: "mailto:\(AppData.supportEmail)", 
                    image: "envelope", 
                    title: "Support Email"
                )
                
                SocialLinkView(
                    url: AppData.websiteURL, 
                    image: "globe", 
                    title: "Website"
                )
            }
        }
    }
}

7. 账户管理功能

登出功能

Section {
    Button(action: {
        showSignOutAlert.toggle()
    }) {
        Text("sign_out")
            .multilineTextAlignment(.center)
            .frame(maxWidth: .infinity)
    }
    .tint(.red)
}

删除账户功能

Section {
    Button(action: {
        showDeleteUserAlert.toggle()
    }) {
        Text("delete_user")
            .multilineTextAlignment(.center)
            .frame(maxWidth: .infinity)
    }
    .tint(.red)
}

8. 安全确认对话框

.alert("delete_user", isPresented: $showDeleteUserAlert) {
    Button("cancel", role: .cancel) {
        showDeleteUserAlert.toggle()
    }
    
    Button("ok", role: .destructive) {
        Task {
            await authManager.deleteUser()
        }
    }
}

页面导航系统

使用 SwiftUI 的 NavigationStack 实现页面导航:

.navigationDestination(for: SettingsPath.self) { path in
    switch path {
    case .userInfo:
        UserProfileView()
    case .inAppPurchases:
        InAppPurchasesView()
    case .policy:
        PrivacyPolicyView()
    case .about:
        AboutView()
    case .fqa:
        FQAView()
    }
}

特色功能

1. 订阅状态集成

  • 支持 RevenueCat 和 StoreKit2 两种订阅管理
  • 实时显示用户当前订阅状态

2. 头像管理

  • 支持从相册选择头像
  • 头像缓存和优化显示

3. 多语言支持

  • 完整的国际化支持
  • 系统语言设置跳转
  • 本地化字符串管理

4. 状态管理

  • 使用 MVVM 架构
  • 响应式数据绑定
  • 错误处理和重试机制

Last updated on