From b4b71a50751e0335a37283ea26cba15c70cffcec Mon Sep 17 00:00:00 2001
From: fish <zhongpengapp@hotmail.com>
Date: Sat, 18 Jul 2026 21:38:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8B=BC=E5=86=99=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=20UI=EF=BC=8C=E5=AD=97=E6=AF=8D=E6=A0=BC=E5=92=8C?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E6=9B=B4=E7=B2=BE=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../LearnEnglish/Views/QuizView.swift         | 75 ++++++++++++++-----
 1 file changed, 55 insertions(+), 20 deletions(-)

diff --git a/LearnEnglish/LearnEnglish/Views/QuizView.swift b/LearnEnglish/LearnEnglish/Views/QuizView.swift
index fb0e78c..b8f1469 100644
--- a/LearnEnglish/LearnEnglish/Views/QuizView.swift
+++ b/LearnEnglish/LearnEnglish/Views/QuizView.swift
@@ -131,30 +131,65 @@ struct QuizView: View {
     }
 
     private func spellingView(_ question: QuizQuestion) -> some View {
-        VStack(spacing: 20) {
-            Text(question.blankedWord)
-                .font(.system(size: 44, weight: .bold, design: .monospaced))
-                .tracking(6)
-            Text("\(question.word.word.count) 个字母")
-                .font(.subheadline)
+        VStack(spacing: 24) {
+            Text(question.prompt)
+                .font(.title.weight(.medium))
                 .foregroundStyle(.secondary)
-            HStack(spacing: 12) {
-                TextField("填写完整单词", text: $userInput)
-                    .textFieldStyle(.roundedBorder)
-                    .autocapitalization(.none)
-                    .disableAutocorrection(true)
-                    .disabled(selectedOption != nil)
-                Button("确认") {
-                    let answer = userInput.trimmingCharacters(in: .whitespaces).lowercased()
-                    guard !answer.isEmpty else { return }
-                    selectedOption = answer
-                    if answer != question.answer {
-                        wrongWords.append(question.word)
+
+            VStack(spacing: 8) {
+                HStack(spacing: 6) {
+                    ForEach(Array(question.blankedWord.enumerated()), id: \.offset) { i, ch in
+                        ZStack {
+                            RoundedRectangle(cornerRadius: 8)
+                                .fill(.quaternary.opacity(0.15))
+                                .frame(width: 36, height: 44)
+                            RoundedRectangle(cornerRadius: 8)
+                                .stroke(.quaternary, lineWidth: 1)
+                                .frame(width: 36, height: 44)
+                            if ch == "_" {
+                                Rectangle()
+                                    .fill(.secondary.opacity(0.5))
+                                    .frame(width: 16, height: 2)
+                                    .offset(y: 12)
+                            } else {
+                                Text(ch.uppercased())
+                                    .font(.title2.weight(.bold))
+                            }
+                        }
                     }
                 }
-                .buttonStyle(.borderedProminent)
-                .disabled(userInput.trimmingCharacters(in: .whitespaces).isEmpty || selectedOption != nil)
+
+                Text("\(question.word.word.count) 个字母，填写完整单词")
+                    .font(.caption)
+                    .foregroundStyle(.tertiary)
             }
+
+            TextField("在此输入完整单词", text: $userInput)
+                .font(.body)
+                .autocapitalization(.none)
+                .disableAutocorrection(true)
+                .disabled(selectedOption != nil)
+                .padding(.horizontal, 16)
+                .padding(.vertical, 14)
+                .background(.quaternary.opacity(0.2), in: RoundedRectangle(cornerRadius: 12))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 12)
+                        .stroke(.quaternary, lineWidth: 1)
+                )
+
+            Button("确认") {
+                let answer = userInput.trimmingCharacters(in: .whitespaces).lowercased()
+                guard !answer.isEmpty else { return }
+                selectedOption = answer
+                if answer != question.answer {
+                    wrongWords.append(question.word)
+                }
+            }
+            .buttonStyle(.borderedProminent)
+            .font(.headline)
+            .frame(maxWidth: .infinity)
+            .frame(height: 44)
+            .disabled(userInput.trimmingCharacters(in: .whitespaces).isEmpty || selectedOption != nil)
         }
     }