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

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

LearnEnglish/LearnEnglish/Views/QuizView.swift

@@ -131,19 +131,52 @@ 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)
+
+            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))
+                            }
+                        }
+                    }
+                }
+
+                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 }
@@ -153,10 +186,12 @@ struct QuizView: View {
                 }
             }
             .buttonStyle(.borderedProminent)
+            .font(.headline)
+            .frame(maxWidth: .infinity)
+            .frame(height: 44)
             .disabled(userInput.trimmingCharacters(in: .whitespaces).isEmpty || selectedOption != nil)
         }
     }
-    }
 
     private func optionColor(_ option: String, for question: QuizQuestion) -> Color {
         guard let selectedOption else { return .accentColor }