// Swift 有 var 和 let 两种声明
var name = "Alice"       // 可变变量（≈ JS 的 let）
name = "Bob"             // 可以修改

let age = 25             // 不可变常量（≈ JS 的 const，但更严格）
// age = 26              // 编译错误！

// 基本类型
let integer: Int = 42
let double: Double = 3.14
let text: String = "Hello"
let flag: Bool = true

// 类型注解（可选，编译器能推断）
var count: Int = 0
var prices: [Double] = [9.99, 19.99]

// ? 表示这个值可能是 nil（≈ TypeScript 的 string | null）
var maybeName: String? = "Alice"
maybeName = nil  // 可以是 nil

// 安全解包（≈ JS 的 if (name != null)）
if let name = maybeName {
    print("Hello, \(name)")  // 只有 name 有值时才执行
}

// 守卫解包（提前退出）
guard let name = maybeName else {
    print("No name!")
    return
}
print("Hello, \(name)")  // name 在这里一定有效

// 空合运算符（≈ JS 的 ?? 或 ||）
let displayName = maybeName ?? "Anonymous"

let count = maybeName?.count  // count 是 Int?（还是 Optional）

struct User {
    var name: String
}

var a = User(name: "Alice")
var b = a        // 拷贝！不是引用！
b.name = "Bob"
print(a.name)    // "Alice" —— a 不受影响

final class Counter {
    var count: Int = 0
}

let a = Counter()
let b = a        // 指向同一个对象！
b.count = 42
print(a.count)   // 42 —— 两者是同一个实例

// 简单枚举（≈ TS 的 enum）
enum Direction {
    case north, south, east, west
}

// 带关联值的枚举（≈ TS 的 discriminated union）
enum Route {
    case home
    case profile(userID: String)  // 携带数据
    case settings
    case detail(id: Int, title: String)  // 携带多个值
}

// 使用
let route = Route.profile(userID: "123")

// 模式匹配（≈ TS 的 switch + 类型收窄）
switch route {
case .home:
    print("Home")
case .profile(let userID):  // 解构关联值
    print("Profile: \(userID)")
case .settings:
    print("Settings")
case .detail(let id, let title):
    print("Detail \(id): \(title)")
}

// 函数定义
func greet(name: String, age: Int) -> String {
    return "Hello, \(name)! You are \(age) years old."
}

// 调用时参数标签必须写（≈ Kotlin 的命名参数）
greet(name: "Alice", age: 25)  // 不是 greet("Alice", 25)

// 省略参数标签
func add(_ a: Int, _ b: Int) -> Int {
    return a + b
}
add(3, 5)  // 可以用 _ 隐藏参数标签

// 闭包（≈ 箭头函数）
let numbers = [1, 2, 3, 4, 5]
let doubled = numbers.map { number in
    return number * 2
}

// 简写形式（≈ numbers.map(n => n * 2)）
let doubled2 = numbers.map { $0 * 2 }  // $0 是第一个参数

// 尾随闭包 —— Swift 的特色语法
// 如果最后一个参数是闭包，可以写在括号外面
numbers.sorted { a, b in
    return a > b
}

someAsyncTask { [weak self] result in
    self?.handleResult(result)
}

// 协议（≈ TypeScript Interface，但更强大）
protocol Identifiable {
    var id: String { get }
}

// 遵循协议
struct Product: Identifiable {
    let id: String
    let name: String
}

// 扩展（给已有类型添加功能，JS 没有对应物）
extension String {
    var isEmail: Bool {
        return self.contains("@") && self.contains(".")
    }
}
"test@example.com".isEmail  // true

// 协议扩展（≈ Rust trait 默认实现）
extension Identifiable where Self: View {
    var identifier: String { "view-\(id)" }
}

// @State ≈ useState()
@State private var count = 0

// @Binding ≈ props 传递（子组件可以修改父组件的状态）
@Binding var isOn: Bool

// @Environment ≈ useContext()
@Environment(AppState.self) private var appState

// 定义可能抛出错误的函数
func loadData() throws -> Data {
    guard let url = URL(string: "https://api.example.com") else {
        throw URLError(.badURL)
    }
    return try Data(contentsOf: url)
}

// 调用时必须处理错误
do {
    let data = try loadData()
    // 使用 data
} catch {
    print("Error: \(error)")
}

// try? 把错误转为 nil（≈ catch { return null }）
let data = try? loadData()  // data 是 Data?

// try! 强制解包（危险，崩溃时用）
let data = try! loadData()  // 如果抛出错误，程序崩溃

// Swift 风格：提前退出
func processUser(_ user: User?) {
    guard let user = user else {
        print("No user")
        return
    }
    // 这里 user 一定有效，且作用域在整个函数内
    print("Hello, \(user.name)")
}

// 前端风格（不推荐在 Swift 中使用）
func processUser(_ user: User?) {
    if let user = user {
        // 这里 user 有效，但嵌套更深
        print("Hello, \(user.name)")
    } else {
        print("No user")
    }
}

// 这是 UIKit 的写法（不要学，只是对比用）
let label = UILabel()
label.text = "Hello"
label.textColor = .black
label.font = UIFont.systemFont(ofSize: 17)
view.addSubview(label)

// 需要更新时，手动修改
label.text = newText
label.textColor = newColor
// 你告诉系统"怎么做"——每一步都要手动操作

struct GreetingView: View {
    var name: String
    var isHighlighted: Bool

    var body: some View {
        Text("Hello, \(name)")
            .font(.system(size: 17))
            .foregroundStyle(isHighlighted ? .blue : .black)
    }
}
// 你告诉系统"我想要什么"——SwiftUI 会自动处理更新

// React: <Container><Text>Hello</Text></Container>
// SwiftUI:
Container {
    Text("Hello")
}

// 定义接受内容的组件
struct Container<Content: View>: View {
    @ViewBuilder let content: Content  // ← 这就是 children
    var body: some View {
        content.padding()
    }
}

const [isFollowing, setIsFollowing] = useState(false)
return (
    <button onClick={() => setIsFollowing(!isFollowing)}>
        {isFollowing ? "已关注" : "关注"}
    </button>
)

struct FollowButton: View {
    @State private var isFollowing = false

    var body: some View {
        Button(isFollowing ? "已关注" : "关注") {
            isFollowing.toggle()
        }
        .buttonStyle(.borderedProminent)
        .tint(isFollowing ? .gray : .blue)
    }
}

// MyFirstAppApp.swift —— App 入口文件（≈ index.js / main.tsx）
import SwiftUI  // 导入 SwiftUI 框架（≈ import React from 'react'）

@main             // 标记：这是程序的入口点（≈ ReactDOM.render()）
struct MyFirstAppApp: App {  // 遵循 App 协议
    var body: some Scene {   // body 返回一个场景
        WindowGroup {         // 标准窗口场景
            ContentView()     // 根视图（≈ <App />）
        }
    }
}

// ContentView.swift —— 根视图（≈ App.tsx）
import SwiftUI

struct ContentView: View {  // 遵循 View 协议
    var body: some View {   // 必须实现 body 计算属性
        VStack {             // 垂直布局容器（≈ flex-direction: column）
            Image(systemName: "globe")  // SF Symbol 图标
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")  // 文本标签（≈ <Text>Hello</Text>）
        }
        .padding()  // 内边距
    }
}

#Preview {  // 预览宏 —— 在 Xcode 画布中实时预览
    ContentView()
}

// 示例 1：先 padding 再 background
Text("Hello")
    .padding(20)          // 先加 20pt 的内边距
    .background(.blue)    // 背景色覆盖 padding 区域
// 结果：蓝色背景很大，文字周围有 20pt 的蓝色空间

// 示例 2：先 background 再 padding
Text("Hello")
    .background(.blue)    // 背景色只覆盖文字区域
    .padding(20)          // 在蓝色背景外面再加 20pt 透明空间
// 结果：蓝色背景很小，紧贴文字，外面有 20pt 透明空间

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        VStack(spacing: 20) {
            // 头像
            Image(systemName: "person.circle.fill")
                .resizable()           // 允许缩放
                .frame(width: 80, height: 80)
                .foregroundStyle(.blue)

            // 问候语
            if name.isEmpty {
                Text("What's your name?")
                    .font(.title2)
                    .foregroundStyle(.secondary)
            } else {
                Text("Hello, \(name)!")
                    .font(.title)
                    .fontWeight(.bold)
            }

            // 输入框
            TextField("Your name", text: $name)
                .textFieldStyle(.roundedBorder)
                .frame(width: 250)
                .multilineTextAlignment(.center)
        }
        .padding()
    }
}

protocol View {
    associatedtype Body: View  // 关联类型：body 返回的必须是 View
    @ViewBuilder var body: Self.Body { get }  // 唯一要求
}

// 1. VStack —— 垂直排列（≈ flex-direction: column）
VStack(alignment: .leading, spacing: 12) {
    Text("Title").font(.headline)
    Text("Subtitle").font(.subheadline)
    Text("Body content goes here")
}

// 2. HStack —— 水平排列（≈ flex-direction: row）
HStack(alignment: .center, spacing: 8) {
    Image(systemName: "star.fill")
    Text("Favorites")
    Spacer()  // 弹性空间（≈ flex: 1）
    Text("\(count)")
}

// 3. ZStack —— 层叠排列（≈ position: absolute）
ZStack {
    Image("background")        // 底层
    VStack {
        Text("Title")          // 上层
    }
}
// 注意：ZStack 中后写的视图在上面

// 4. Group —— 逻辑分组（不改变布局）
// 用于：绕过 10 个子视图限制、共享修饰符
Group {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
.foregroundStyle(.blue)  // 所有子视图都会变蓝

// 5. ScrollView + LazyVStack —— 可滚动内容
ScrollView {
    LazyVStack(spacing: 16) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
    .padding()
}
// LazyVStack: 只创建屏幕上可见的视图（≈ 虚拟列表）

// 6. Form —— 系统风格表单（≈ iOS 原生表单样式）
Form {
    Section("Profile") {
        TextField("Name", text: $name)
        TextField("Email", text: $email)
    }
    Section("Preferences") {
        Toggle("Notifications", isOn: $notifications)
    }
}

// 1. 样式修饰符 —— 改变视觉效果
Text("Hello")
    .font(.title)              // 字体
    .fontWeight(.bold)         // 字重
    .foregroundStyle(.blue)    // 前景色
    .background(.yellow)       // 背景色
    .opacity(0.8)              // 不透明度
    .shadow(radius: 5)         // 阴影

// 2. 布局修饰符 —— 改变大小和位置
Text("Hello")
    .frame(width: 200, height: 100)  // 固定尺寸
    .frame(maxWidth: .infinity)      // 最大宽度（撑满）
    .padding(16)                      // 内边距
    .padding(.horizontal, 20)        // 水平方向内边距
    .offset(x: 10, y: -5)            // 偏移（不影响布局）

// 3. 行为修饰符 —— 添加交互
Button("Tap Me") { }
    .buttonStyle(.borderedProminent)
    .disabled(true)

// 4. 条件修饰符
Text("Status")
    .foregroundStyle(isError ? .red : .primary)
    .font(isTitle ? .title : .body)

// React: <Card><Text>Hello</Text></Card>
// SwiftUI:
Card {
    Text("Hello")
}

struct Card<Content: View>: View {
    @ViewBuilder let content: Content

    var body: some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(.rect(cornerRadius: 12))
    }
}

// React: <Page header={<Header />} footer={<Footer />} />
// SwiftUI:
PageLayout(
    header: { HeaderView() },
    footer: { FooterView() }
)

struct PageLayout<Header: View, Footer: View>: View {
    @ViewBuilder let header: Header
    @ViewBuilder let footer: Footer

    var body: some View {
        VStack {
            header
            Spacer()
            footer
        }
    }
}

// 类似 React 的 render props
struct LazyView<Content: View>: View {
    let build: () -> Content

    var body: some View {
        build()  // 只在 body 执行时才创建内容
    }
}

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            headerView
            counterView
        }
    }

    private var headerView: some View {
        Text("Dashboard")
            .font(.largeTitle)
    }

    private var counterView: some View {
        HStack {
            Text("Count: \(count)")
            Button("+1") { count += 1 }
        }
    }
}

// 基础玻璃效果（默认胶囊形状）
Button("To Top", systemImage: "chevron.up") {
    scrollToTop()
}
.padding()
.glassEffect()

// 自定义形状
Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(in: .rect(cornerRadius: 16))

// 着色玻璃
Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.tint(.green))

// 交互效果（缩放、弹跳、微光）
Label("Desert", systemImage: "sun.max.fill")
    .padding()
    .glassEffect(.regular.interactive())

@Namespace var namespace

GlassEffectContainer {
    VStack {
        if isExpanded {
            ForEach(badges) { badge in
                BadgeLabel(badge: badge)
                    .glassEffect()
                    .glassEffectID(badge.id, in: namespace)
            }
        }
        BadgeToggle()
            .buttonStyle(.glass)
            .glassEffectID("badgeToggle", in: namespace)
    }
}

Button("Get Started") { }
    .buttonStyle(.glassProminent)

Button("Learn More") { }
    .buttonStyle(.glass)

// 新尺寸
Button("Extra Large") { }
    .controlSize(.extraLarge)

// ❌ 不要在 body 中创建对象
struct BadView: View {
    var body: some View {
        let formatter = DateFormatter()  // 每次 body 执行都创建！
        return Text(formatter.string(from: Date()))
    }
}

// ✅ 使用静态属性
struct GoodView: View {
    private static let formatter: DateFormatter = {
        let f = DateFormatter()
        f.dateStyle = .long
        return f
    }()

    var body: some View {
        Text(Self.formatter.string(from: Date()))
    }
}

// ❌ 不要在 body 中做复杂计算
struct BadFilterView: View {
    let items: [Item]
    var body: some View {
        List(items.filter { $0.isEnabled }.sorted { $0.name < $1.name }) { item in
            Text(item.name)
        }
    }
}

// ✅ 预计算
struct GoodFilterView: View {
    let items: [Item]
    private var filteredItems: [Item] {
        items.filter { $0.isEnabled }.sorted { $0.name < $1.name }
    }
    var body: some View {
        List(filteredItems) { item in
            Text(item.name)
        }
    }
}

struct CounterView: View {
    @State private var count = 0  // ≈ const [count, setCount] = useState(0)

    var body: some View {
        VStack(spacing: 20) {
            Text("Count: \(count)")
                .font(.largeTitle)

            HStack(spacing: 20) {
                Button("-") { count -= 1 }
                Button("+") { count += 1 }
            }
        }
    }
}

// ❌ 错误：用 @State 接收外部值
struct ChildView: View {
    @State var name: String  // 父视图更新 name 时，这里不会更新！

    var body: some View {
        Text(name)  // 永远显示初始值
    }
}

// ✅ 正确：用 let 接收
struct ChildView: View {
    let name: String  // 父视图更新时，这里也会更新

    var body: some View {
        Text(name)
    }
}

// 父视图 —— 拥有状态
struct ParentView: View {
    @State private var isOn = false

    var body: some View {
        ToggleRow(isOn: $isOn)  // $ 符号：传递 binding
    }
}

// 子视图 —— 通过 Binding 修改父视图的状态
struct ToggleRow: View {
    @Binding var isOn: Bool  // ≈ props + onChange 回调

    var body: some View {
        Toggle("Enable Feature", isOn: $isOn)
    }
}

// 1. 定义数据模型
@Observable           // ← 这个宏自动生成所有观察能力
@MainActor            // ← 标记为在主线程上操作（UI 安全）
final class UserModel {
    var name = ""
    var email = ""
    var isLoggedIn = false
    var isLoading = false
}

// 2. 在视图中创建和持有
struct ContentView: View {
    @State private var model = UserModel()  // 用 @State，不是 @StateObject

    var body: some View {
        VStack {
            if model.isLoading {
                ProgressView()
            } else {
                Text("Hello, \(model.name)")
            }
        }
        .task {
            model.isLoading = true
            // 加载数据...
            model.isLoading = false
        }
    }
}

// 3. 传递给子视图
struct UserProfileView: View {
    @Bindable var model: UserModel  // 需要 $model.name 时用 @Bindable

    var body: some View {
        Form {
            TextField("Name", text: $model.name)
        }
    }
}

@Observable
@MainActor
final class SettingsModel {
    // ✅ 必须加 @ObservationIgnored
    @ObservationIgnored @AppStorage("isDarkMode") var isDarkMode = false

    // 普通属性不需要
    var isLoading = false
}

// ✅ 正确
@State private var model = UserModel()

// ❌ 错误
let model = UserModel()  // View 重建时 model 也会重建，丢失状态

// 步骤 1：定义全局状态
@Observable
@MainActor
final class AppState {
    var isLoggedIn = false
    var currentUser: User?
}

// 步骤 2：在 App 入口注入
@main
struct MyApp: App {
    @State private var appState = AppState()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(appState)  // ← 注入到环境
        }
    }
}

// 步骤 3：在任意深度的子视图中读取
struct SomeDeeplyNestedView: View {
    @Environment(AppState.self) private var appState  // ← 从环境读取

    var body: some View {
        if appState.isLoggedIn {
            Text("Welcome, \(appState.currentUser?.name ?? "")")
        } else {
            Button("Log In") {
                appState.isLoggedIn = true
            }
        }
    }
}

// frame —— 设置尺寸
Text("Hello")
    .frame(width: 200, height: 100)          // 固定尺寸
    .frame(maxWidth: .infinity)                // 最大宽度撑满
    .frame(minWidth: 100, idealWidth: 200)     // 最小/理想宽度

// padding —— 内边距
Text("Hello")
    .padding()                    // 默认系统内边距（约 16pt）
    .padding(20)                  // 所有方向 20pt
    .padding(.horizontal, 20)     // 水平方向 20pt
    .padding(.top, 10)            // 上方 10pt

// Spacer —— 弹性空间（≈ flex: 1）
HStack {
    Text("Left")
    Spacer()          // 占据所有剩余空间
    Text("Right")
}
// 结果：Left 在左端，Right 被推到右端

// 多个 Spacer 按比例分配
HStack {
    Spacer()          // 占 1/3
    Text("Center")
    Spacer()          // 占 1/3
    Text("Right")
    Spacer()          // 占 1/3
}

// Divider —— 分割线
VStack {
    Text("Above")
    Divider()
    Text("Below")
}

// VStack 的对齐（≈ align-items 在交叉轴方向）
VStack(alignment: .leading) {  // 子视图左对齐
    Text("Short")
    Text("A much longer text")
}

// HStack 的对齐
HStack(alignment: .top) {  // 子视图顶部对齐
    Text("Short")
    Text("Tall\nmultiline\ntext")
}

// ZStack 的对齐
ZStack(alignment: .topLeading) {
    Color.blue.frame(width: 300, height: 300)
    Text("Corner")  // 在左上角
}

// frame 内的对齐
Text("Centered")
    .frame(maxWidth: .infinity, alignment: .leading)  // 文字在 frame 内左对齐

// GeometryReader：获取父视图的几何信息
GeometryReader { geometry in
    VStack {
        Text("Width: \(geometry.size.width)")
        Text("Height: \(geometry.size.height)")
    }
}
// ⚠️ GeometryReader 会尽可能撑满所有可用空间

// ✅ 更好的替代方案

// 1. containerRelativeFrame —— 相对于容器的尺寸
Image("hero")
    .resizable()
    .containerRelativeFrame(.horizontal) { length, _ in
        length * 0.8  // 占容器宽度的 80%
    }

// 2. visualEffect —— 位置相关的视觉效果（不改变布局）
ScrollView {
    ForEach(items) { item in
        ItemCard(item: item)
            .visualEffect { content, geometry in
                let frame = geometry.frame(in: .scrollView)
                let distance = min(0, frame.minY)
                return content.opacity(1 + distance / 200)
            }
    }
}

// 3. onGeometryChange —— 观察几何变化（iOS 18+）
Text("Content")
    .onGeometryChange(for: CGFloat.self) { proxy in
        proxy.size.height
    } action: { newHeight in
        print("Height changed to \(newHeight)")
    }

// 忽略安全区域（≈ CSS 的 env(safe-area-inset-*)）
Color.blue
    .ignoresSafeArea()  // 延伸到屏幕边缘（包括刘海/灵动岛区域）

// 部分忽略
Color.blue
    .ignoresSafeArea(edges: .top)  // 只忽略顶部

// 安全区域内边距
ScrollView {
    content
}
.contentMargins(.horizontal, 16)  // 设置滚动内容的安全内边距
.safeAreaInset(edge: .bottom) {
    BottomBar()  // 在安全区域上方插入视图
}

struct Message: Identifiable, Equatable {
    let id = UUID()
    let text: String
    let isFromCurrentUser: Bool
    let timestamp: Date
}

struct ChatView: View {
    @State private var messages: [Message] = []
    @State private var newMessage = ""

    var body: some View {
        VStack(spacing: 0) {
            // 消息列表
            ScrollViewReader { proxy in
                ScrollView {
                    LazyVStack(spacing: 12) {
                        ForEach(messages) { message in
                            MessageBubble(message: message)
                        }
                        Color.clear.frame(height: 1).id("bottom")
                    }
                    .padding(.horizontal)
                    .padding(.top, 8)
                }
                .onChange(of: messages.count) { _, _ in
                    withAnimation {
                        proxy.scrollTo("bottom", anchor: .bottom)
                    }
                }
            }

            Divider()

            // 输入区域
            HStack(spacing: 12) {
                TextField("Message", text: $newMessage, axis: .vertical)
                    .lineLimit(1...5)
                    .padding(12)
                    .background(.gray.opacity(0.1))
                    .clipShape(.rect(cornerRadius: 20))

                Button {
                    sendMessage()
                } label: {
                    Image(systemName: "arrow.up.circle.fill")
                        .font(.system(size: 32))
                        .foregroundStyle(newMessage.isEmpty ? .gray : .blue)
                }
                .disabled(newMessage.isEmpty)
            }
            .padding(.horizontal)
            .padding(.vertical, 8)
            .background(.regularMaterial)
        }
    }

    private func sendMessage() {
        guard !newMessage.trimmingCharacters(in: .whitespaces).isEmpty else { return }
        let message = Message(text: newMessage, isFromCurrentUser: true, timestamp: Date())
        withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
            messages.append(message)
        }
        newMessage = ""
    }
}

struct MessageBubble: View {
    let message: Message

    var body: some View {
        HStack {
            if message.isFromCurrentUser { Spacer(minLength: 60) }

            VStack(alignment: message.isFromCurrentUser ? .trailing : .leading, spacing: 4) {
                Text(message.text)
                    .padding(.horizontal, 14)
                    .padding(.vertical, 10)
                    .background(
                        message.isFromCurrentUser ? .blue : .gray.opacity(0.15),
                        in: RoundedRectangle(cornerRadius: 18))
                    .foregroundStyle(message.isFromCurrentUser ? .white : .primary)

                Text(message.timestamp, style: .time)
                    .font(.caption2)
                    .foregroundStyle(.secondary)
            }

            if !message.isFromCurrentUser { Spacer(minLength: 60) }
        }
    }
}

struct ProductDetailView: View {
    let product: Product
    @State private var selectedVariant: Variant?
    @State private var quantity = 1

    var body: some View {
        ZStack(alignment: .bottom) {
            ScrollView {
                VStack(alignment: .leading, spacing: 0) {
                    // 商品图片轮播
                    TabView {
                        ForEach(product.images, id: \.self) { url in
                            AsyncImage(url: url) { image in
                                image.resizable().scaledToFill()
                            } placeholder: {
                                Color.gray.opacity(0.2)
                            }
                        }
                    }
                    .frame(height: 350)
                    .tabViewStyle(.page)

                    VStack(alignment: .leading, spacing: 16) {
                        // 价格
                        HStack(alignment: .firstTextBaseline, spacing: 4) {
                            Text("¥").font(.title3)
                            Text("\(product.price, specifier: "%.2f")")
                                .font(.system(size: 32, weight: .bold))
                        }
                        .foregroundStyle(.red)

                        // 商品名称
                        Text(product.name)
                            .font(.title3).fontWeight(.semibold)

                        // 规格选择
                        HStack(spacing: 10) {
                            ForEach(product.variants) { variant in
                                Button {
                                    withAnimation(.spring(response: 0.3)) {
                                        selectedVariant = variant
                                    }
                                } label: {
                                    Text(variant.name)
                                        .font(.caption)
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .background(
                                            selectedVariant?.id == variant.id
                                                ? .blue : .gray.opacity(0.1))
                                        .foregroundStyle(
                                            selectedVariant?.id == variant.id
                                                ? .white : .primary)
                                        .clipShape(.rect(cornerRadius: 8))
                                }
                            }
                        }
                    }
                    .padding()
                }
            }
            .ignoresSafeArea(edges: .top)

            // 固定在底部的购买栏
            HStack(spacing: 12) {
                Button { } label: {
                    Text("加入购物车")
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background(.orange)
                        .foregroundStyle(.white)
                        .clipShape(.rect(cornerRadius: 12))
                }
                Button { } label: {
                    Text("立即购买")
                        .fontWeight(.semibold)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background(.red)
                        .foregroundStyle(.white)
                        .clipShape(.rect(cornerRadius: 12))
                }
            }
            .padding(.horizontal)
            .padding(.vertical, 10)
            .background(.regularMaterial)
        }
    }
}

struct Person: Identifiable {
    let id = UUID()
    let name: String
}

let people = [
    Person(name: "Alice"),
    Person(name: "Bob"),
]

ForEach(people) { person in  // Person 遵循 Identifiable，自动使用 id
    Text(person.name)
}

struct ContentView: View {
    @State private var items = Item.samples
    @State private var selection: Set<Item.ID> = []

    var body: some View {
        List(selection: $selection) {
            ForEach(items) { item in
                ItemRow(item: item)
                    .listRowInsets(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
                    .listRowSeparator(.hidden)
            }
            .onDelete { indexSet in
                items.remove(atOffsets: indexSet)
            }
            .onMove { from, to in
                items.move(fromOffsets: from, toOffset: to)
            }
        }
        .listStyle(.plain)
        .refreshable {                        // 下拉刷新
            await loadMoreItems()
        }
    }
}

struct ContentView: View {
    @State private var items: [Item] = []
    @State private var isLoading = true
    @State private var errorMessage: String?

    var body: some View {
        Group {
            if isLoading {
                ProgressView("Loading...")
            } else if let errorMessage {
                ContentUnavailableView(
                    "Error", systemImage: "wifi.slash",
                    description: Text(errorMessage))
            } else if items.isEmpty {
                ContentUnavailableView(
                    "No Items", systemImage: "tray",
                    description: Text("Your items will appear here."))
            } else {
                List(items) { item in ItemRow(item: item) }
            }
        }
        .task {
            do {
                isLoading = true
                items = try await fetchItems()
            } catch {
                errorMessage = error.localizedDescription
            }
            isLoading = false
        }
    }
}

// LazyVStack：只创建屏幕上可见的视图（≈ 虚拟列表）
ScrollView {
    LazyVStack(spacing: 16) {
        ForEach(0..<10000) { i in
            Text("Item \(i)")
                .frame(height: 100)
        }
    }
}
// 不是一次性创建 10000 个 Text，而是只创建屏幕上可见的约 10-15 个

struct PhotoGrid: View {
    let photos: [Photo]

    let columns = [
        GridItem(.adaptive(minimum: 150), spacing: 8)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 8) {
                ForEach(photos) { photo in
                    AsyncImage(url: photo.url) { image in
                        image.resizable().aspectRatio(contentMode: .fill)
                    } placeholder: {
                        Color.gray
                    }
                    .frame(height: 150)
                    .clipShape(.rect(cornerRadius: 8))
                }
            }
            .padding(8)
        }
    }
}
// GridItem(.adaptive(minimum: 150)) 表示：
// 每列最小宽度 150pt，自动计算能放多少列

@Observable
@MainActor
final class SearchViewModel {
    var query = ""
    var results: [SearchResult] = []
    var isLoading = false
    var searchTask: Task<Void, Never>?

    func search() async {
        searchTask?.cancel()  // 取消上一次搜索

        let query = query.trimmingCharacters(in: .whitespaces)
        guard !query.isEmpty else { results = []; return }

        searchTask = Task {
            try? await Task.sleep(for: .milliseconds(300))  // 防抖 300ms
            guard !Task.isCancelled else { return }

            isLoading = true
            defer { isLoading = false }

            do {
                let url = URL(string: "https://api.example.com/search?q=\(query)")!
                let (data, _) = try await URLSession.shared.data(from: url)
                results = try JSONDecoder().decode([SearchResult].self, from: data)
            } catch {
                if !Task.isCancelled { results = [] }
            }
        }
    }
}

struct SearchView: View {
    @State private var viewModel = SearchViewModel()
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            Group {
                if viewModel.isLoading {
                    ProgressView()
                } else if viewModel.results.isEmpty && !searchText.isEmpty {
                    ContentUnavailableView.search(text: searchText)
                } else {
                    List(viewModel.results) { result in
                        SearchResultRow(result: result)
                    }
                }
            }
            .searchable(text: $searchText, prompt: "Search items...")
            .onChange(of: searchText) { _, newValue in
                viewModel.query = newValue
                Task { await viewModel.search() }
            }
        }
    }
}

@Observable
@MainActor
final class PaginatedListViewModel {
    var items: [Item] = []
    var isLoading = false
    var hasMore = true
    private var currentPage = 0
    private let pageSize = 20

    func loadMore() async {
        guard !isLoading, hasMore else { return }
        isLoading = true
        defer { isLoading = false }

        do {
            let newItems = try await fetchPage(currentPage, pageSize: pageSize)
            items.append(contentsOf: newItems)
            currentPage += 1
            hasMore = newItems.count == pageSize
        } catch { }
    }

    func refresh() async {
        currentPage = 0; items = []; hasMore = true
        await loadMore()
    }
}

struct PaginatedListView: View {
    @State private var viewModel = PaginatedListViewModel()

    var body: some View {
        List {
            ForEach(viewModel.items) { item in
                ItemRow(item: item)
                    .onAppear {
                        // 当倒数第 5 个元素出现时，提前加载下一页
                        if item.id == viewModel.items.dropLast(5).last?.id {
                            Task { await viewModel.loadMore() }
                        }
                    }
            }
            if viewModel.isLoading {
                HStack { Spacer(); ProgressView(); Spacer() }
                    .listRowSeparator(.hidden)
            }
        }
        .refreshable { await viewModel.refresh() }
        .task { await viewModel.loadMore() }
    }
}

struct InboxListView: View {
    @State private var messages: [Message] = Message.samples

    var body: some View {
        List {
            ForEach(messages) { message in
                MessageRow(message: message)
                    .swipeActions(edge: .trailing) {
                        Button(role: .destructive) {
                            deleteMessage(message)
                        } label: {
                            Label("Delete", systemImage: "trash")
                        }
                        Button {
                            archiveMessage(message)
                        } label: {
                            Label("Archive", systemImage: "archivebox")
                        }
                        .tint(.orange)
                    }
                    .swipeActions(edge: .leading) {
                        Button {
                            toggleRead(message)
                        } label: {
                            Label(message.isRead ? "Unread" : "Read",
                                  systemImage: message.isRead ? "envelope.badge" : "envelope.open")
                        }
                        .tint(.blue)
                    }
            }
        }
    }
}

struct FAQView: View {
    let faqs: [FAQItem]

    var body: some View {
        List {
            ForEach(faqs) { faq in
                DisclosureGroup {
                    Text(faq.answer)
                        .font(.body)
                        .foregroundStyle(.secondary)
                        .padding(.vertical, 8)
                } label: {
                    Text(faq.question)
                        .font(.headline)
                }
            }
        }
    }
}

struct EditableListView: View {
    @State private var items: [Item] = Item.samples
    @State private var selectedIDs: Set<Item.ID> = []
    @State private var editMode: EditMode = .inactive

    var body: some View {
        NavigationStack {
            List(selection: $selectedIDs) {
                ForEach(items) { item in
                    ItemRow(item: item)
                }
                .onDelete { indexSet in
                    items.remove(atOffsets: indexSet)
                }
            }
            .navigationTitle("Items")
            .environment(\.editMode, $editMode)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    if editMode == .active {
                        HStack {
                            Button("Delete (\(selectedIDs.count))") {
                                items.removeAll { selectedIDs.contains($0.id) }
                                selectedIDs.removeAll()
                                editMode = .inactive
                            }
                            .disabled(selectedIDs.isEmpty)
                            Button("Done") { editMode = .inactive }
                        }
                    } else {
                        Button("Edit") { editMode = .active }
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    let items: [Item]

    var body: some View {
        NavigationStack {
            List(items) { item in
                NavigationLink(value: item) {
                    ItemRow(item: item)
                }
            }
            .navigationTitle("Items")
            .navigationDestination(for: Item.self) { item in
                DetailView(item: item)
            }
        }
    }
}

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            VStack(spacing: 20) {
                Button("Go to Profile") {
                    path.append(Route.profile)  // ≈ navigation.navigate('Profile')
                }
            }
            .navigationDestination(for: Route.self) { route in
                switch route {
                case .profile: ProfileView()
                case .detail(let id): DetailView(id: id)
                }
            }
        }
    }
}

enum Route: Hashable {
    case profile
    case detail(id: Int)
}

// 多个 Sheet —— 使用枚举管理
struct ContentView: View {
    enum Sheet: Identifiable {
        case add, settings
        var id: String { "\(self)" }
    }

    @State private var sheet: Sheet?

    var body: some View {
        List {
            Button("Add Item") { sheet = .add }
        }
        .sheet(item: $sheet) { sheet in
            switch sheet {
            case .add: AddItemView()
            case .settings: SettingsView()
            }
        }
    }
}

struct EditItemView: View {
    @Environment(\.dismiss) private var dismiss  // ≈ navigation.goBack()

    var body: some View {
        NavigationStack {
            Form { /* ... */ }
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") { dismiss() }
                }
                ToolbarItem(placement: .confirmationAction) {
                    Button("Save") { dismiss() }
                }
            }
        }
    }
}

struct MainTabView: View {
    @State private var selectedTab: Tab = .home

    var body: some View {
        TabView(selection: $selectedTab) {
            Tab("Home", systemImage: "house", value: .home) { HomeView() }
            Tab("Search", systemImage: "magnifyingglass", value: .search) { SearchView() }
            Tab("Profile", systemImage: "person", value: .profile) { ProfileView() }
        }
    }
}

enum Tab: Hashable { case home, search, profile }

TabView { /* tabs */ }
    .tabBarMinimizeBehavior(.onScrollDown)  // 滚动时自动收起
    .tabViewBottomAccessory { NowPlayingBar() }  // Tab 栏上方常驻控件

// 专用搜索 Tab
TabView {
    Tab("Home", systemImage: "house") { HomeView() }
    Tab(role: .search) { SearchResultsView() }
}
.searchable(text: $searchText)

@Observable @MainActor
final class AuthManager {
    var isLoggedIn = false
    var currentUser: User?
    func login(email: String, password: String) async throws { /* ... */ }
    func logout() { isLoggedIn = false; currentUser = nil }
}

@main
struct MyApp: App {
    @State private var authManager = AuthManager()
    var body: some Scene {
        WindowGroup {
            Group {
                if authManager.isLoggedIn { MainTabView() }
                else { LoginView() }
            }
            .environment(authManager)
        }
    }
}