颜色单词增加颜色圆点指示

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

LearnEnglish/LearnEnglish/Views/ColorDotView.swift

@@ -0,0 +1,28 @@
+import UIKit
+
+final class ColorDotView: UIView {
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        layer.borderWidth = 1
+        updateBorder()
+    }
+
+    @available(*, unavailable)
+    required init?(coder: NSCoder) { fatalError() }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        layer.cornerRadius = bounds.width / 2
+    }
+
+    override func traitCollectionDidChange(_ previous: UITraitCollection?) {
+        super.traitCollectionDidChange(previous)
+        if traitCollection.hasDifferentColorAppearance(comparedTo: previous) {
+            updateBorder()
+        }
+    }
+
+    private func updateBorder() {
+        layer.borderColor = UIColor.label.withAlphaComponent(0.15).cgColor
+    }
+}

LearnEnglish/LearnEnglish/Views/WordCardCell.swift

@@ -2,6 +2,7 @@ import UIKit
 
 final class WordCardCell: UITableViewCell {
     private let cardView = UIView()
+    private let colorDot = ColorDotView()
     private let wordLabel = UILabel()
     private let phoneticLabel = UILabel()
     private let meaningLabel = UILabel()
@@ -33,7 +34,19 @@ final class WordCardCell: UITableViewCell {
         meaningLabel.font = .preferredFont(forTextStyle: .subheadline)
         meaningLabel.textColor = .secondaryLabel
 
-        let textStack = UIStackView(arrangedSubviews: [wordLabel, phoneticLabel, meaningLabel])
+        let wordRowSpacer = UIView()
+        wordRowSpacer.setContentHuggingPriority(.init(1), for: .horizontal)
+        let wordRow = UIStackView(arrangedSubviews: [wordLabel, colorDot, wordRowSpacer])
+        wordRow.axis = .horizontal
+        wordRow.alignment = .center
+        wordRow.spacing = 8
+        colorDot.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            colorDot.widthAnchor.constraint(equalToConstant: 12),
+            colorDot.heightAnchor.constraint(equalToConstant: 12)
+        ])
+
+        let textStack = UIStackView(arrangedSubviews: [wordRow, phoneticLabel, meaningLabel])
         textStack.axis = .vertical
         textStack.spacing = 8
 
@@ -68,6 +81,8 @@ final class WordCardCell: UITableViewCell {
         wordLabel.text = word.word
         phoneticLabel.text = word.phonetic
         meaningLabel.text = word.meaning
+        colorDot.backgroundColor = word.color
+        colorDot.isHidden = word.color == nil
         updateSpeakerState()
     }
 

LearnEnglish/LearnEnglish/Views/WordDetailViewController.swift

@@ -87,6 +87,19 @@ final class WordDetailViewController: UIViewController {
         wordLabel.font = Theme.Font.wordHero()
         wordLabel.textAlignment = .center
 
+        let colorDot = ColorDotView()
+        colorDot.backgroundColor = word.color
+        colorDot.isHidden = word.color == nil
+        colorDot.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            colorDot.widthAnchor.constraint(equalToConstant: 20),
+            colorDot.heightAnchor.constraint(equalToConstant: 20)
+        ])
+        let wordRow = UIStackView(arrangedSubviews: [colorDot, wordLabel])
+        wordRow.axis = .horizontal
+        wordRow.alignment = .center
+        wordRow.spacing = 12
+
         let phoneticIcon = UIImageView(image: UIImage(
             systemName: "speaker.wave.2",
             withConfiguration: UIImage.SymbolConfiguration(pointSize: 13, weight: .medium)))
@@ -115,7 +128,7 @@ final class WordDetailViewController: UIViewController {
             speakButton.heightAnchor.constraint(equalToConstant: 56)
         ])
 
-        let stack = UIStackView(arrangedSubviews: [wordLabel, phoneticRow, speakButton])
+        let stack = UIStackView(arrangedSubviews: [wordRow, phoneticRow, speakButton])
         stack.axis = .vertical
         stack.spacing = 16
         stack.alignment = .center