wake-ios/wake/ContentView.swift

import SwiftUI

// 自定义从左向右的过渡动画
extension AnyTransition {
    static var slideFromLeading: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .move(edge: .leading).combined(with: .opacity)
        )
    }
}

// 1. 定义路由
enum Route: Hashable {
    case settings
}

struct ContentView: View {
    @State private var showModal = false
    @State private var showSettings = false
    @State private var navigationPath = NavigationPath()
    @State private var contentOffset: CGFloat = 0
    
        var body: some View {
        NavigationStack(path: $navigationPath) {
            // 添加动画修饰符到 NavigationStack
            let _ = Self._printChanges()
            let _ = print("Navigation path changed: \(navigationPath)")
            
            ZStack {
                VStack {
                    VStack(spacing: 20) {
                        // This spacer ensures content stays below the status bar
                        Spacer().frame(height: UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0)
                        // 顶部栏
                        HStack {
                            Spacer()
                            Button(action: {
                                withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                                    showModal = true
                                }
                            }) {
                                Image(systemName: "gearshape")
                                    .font(.title2)
                                    .padding()
                            }
                        }
                        Spacer()
                    }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color(.systemBackground))
                .offset(x: showModal ? UIScreen.main.bounds.width * 0.35 : 0)
                .animation(.spring(response: 0.5, dampingFraction: 0.8), value: showModal)
                .edgesIgnoringSafeArea(.all)
            }
            // 添加半透明遮罩层
            if showModal {
                Color.black.opacity(0.4)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                            showModal = false
                        }
                    }
                    .transition(.opacity)
            }

            // Modal with animation - will be pushed off-screen by SettingsView
            SlideInModal(isPresented: $showModal, onDismiss: {
                withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                    showModal = false
                }
            }) {
                // Modal content
                // Modal content with offset for SettingsView
                VStack(spacing: 20) {
                    // 用户信息区域
                    HStack(alignment: .center, spacing: 16) {
                        // 头像
                        Image(systemName: "person.circle.fill")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: 60, height: 60)
                            .foregroundColor(.blue)
                            .clipShape(Circle())
                        
                        // 姓名和ID
                        VStack(alignment: .leading, spacing: 4) {
                            Text("用户名")
                                .font(.headline)
                                .foregroundColor(.primary)
                            
                            Text("ID: 12345678")
                                .font(.subheadline)
                                .foregroundColor(.secondary)
                        }
                        
                        Spacer()
                    }
                    .padding(.horizontal, 16)
                    .padding(.top, 16)
                    
                    VStack(alignment: .leading, spacing: 8) {
                        Text("会员等级")
                            .font(.headline)
                            .foregroundColor(.primary)
                        Text("会员时间")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        Text("会员中心")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(16)
                    .background(Color(red: 0.92, green: 0.92, blue: 0.92))
                    .cornerRadius(10)
                    .padding(.horizontal, 16)

                     VStack(spacing: 12) {
                        // memories
                        Button(action: {
                            print("memories")
                        }) {
                            HStack(spacing: 16) {
                                Image(systemName: "crown.fill")
                                    .foregroundColor(.orange)
                                    .frame(width: 24, height: 24)
                               
                                    Text("My Memories")
                                        .font(.headline)
                                        .foregroundColor(.primary)
                                
                                Spacer()
                            }
                            .padding()
                            .cornerRadius(10)
                            .contentShape(Rectangle()) // 使整个区域可点击
                        }
                        .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                        
                        // Box
                        Button(action: {
                            print("Box")
                        }) {
                            HStack(spacing: 16) {
                                Image(systemName: "clock.fill")
                                    .foregroundColor(.blue)
                                    .frame(width: 24, height: 24)
                                    Text("My Bind Box")
                                        .font(.headline)
                                        .foregroundColor(.primary)
                                    
                                Spacer()
                            }
                            .padding()
                            .cornerRadius(10)
                            .contentShape(Rectangle()) // 使整个区域可点击
                        }
                        .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                        
                        // setting
                        Button(action: {
                            withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                                showSettings = true
                            }
                        }) {
                            HStack(spacing: 16) {
                                Image(systemName: "person.circle.fill")
                                    .foregroundColor(.purple)
                                    .frame(width: 24, height: 24)
                                Text("Setting")
                                    .font(.headline)
                                    .foregroundColor(.primary)
                                Spacer()
                                Image(systemName: "chevron.right")
                                    .foregroundColor(.gray)
                            }
                            .padding()
                            .background(Color(.systemBackground))
                            .cornerRadius(10)
                            .contentShape(Rectangle()) // 使整个区域可点击
                        }
                        .buttonStyle(PlainButtonStyle()) // 移除按钮默认样式
                    }
                    .padding(.horizontal, 16)
                    // 这里可以添加其他设置项
                    Spacer()
                }
                .padding(.vertical, 8)
            }

            // Apply offset to the entire modal when SettingsView is shown
            .offset(x: showSettings ? UIScreen.main.bounds.width : 0)
            .animation(.spring(response: 0.5, dampingFraction: 0.8), value: showSettings)
            
            ZStack {
                // Semi-transparent overlay for settings
                if showSettings {
                    Color.black.opacity(0.4)
                        .edgesIgnoringSafeArea(.all)
                        .onTapGesture {
                            withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                                showSettings = false
                            }
                        }
                        .transition(.opacity)
                }
                
                // Full screen settings view with slide animation
                if showSettings {
                    SettingsView(isPresented: $showSettings)
                        .transition(.move(edge: .leading))
                        .zIndex(1) // Ensure it's above other content
                        .onAppear {
                            // Reset the navigation path when settings appear
                            navigationPath.removeLast(navigationPath.count)
                        }
                }
            }
            .animation(.spring(response: 0.5, dampingFraction: 0.8), value: showSettings)
            }
            }
            }
}         
#Preview {
    ContentView()
}