优化拼写输入 UI，字母格和输入框更精致

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

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)
         }
     }