feat: improve answer tips

apps/client/components/main/QuestionInput/QuestionInput.vue

@@ -10,7 +10,22 @@
           :class="getWordsClassNames(i)"
           :style="{ minWidth: `${inputWidth(w)}ch` }"
         >
-          {{ userInputWords[i]["userInput"] }}
+          <span v-if="isAnswerTip()">
+            <template v-if="tipWords[i].noInput">
+              <span class="text-gray-500">{{ w }}</span>
+            </template>
+            <template v-else>
+              <span
+                v-for="char in tipWords[i].characters"
+                :class="[char.incorrect ? 'text-red-500' : 'text-green-500']"
+              >
+                {{ char.character }}
+              </span>
+            </template>
+          </span>
+          <span v-else>
+            {{ userInputWords[i]["userInput"] }}
+          </span>
         </div>
       </template>
       <input
@@ -63,14 +78,21 @@ const { handleAnswerError, resetCloseTip } = answerError();
 const { isAutoNextQuestion } = useAutoNextQuestion();
 const { isShowErrorTip } = useErrorTip();
 
-const { inputValue, userInputWords, submitAnswer, setInputValue, handleKeyboardInput, isFixMode } =
-  useInput({
-    source: () => courseStore.currentStatement?.english!,
-    setInputCursorPosition,
-    getInputCursorPosition,
-    inputChangedCallback,
-  });
-const { showAnswerTip, hiddenAnswerTip } = useAnswerTip();
+const {
+  inputValue,
+  userInputWords,
+  submitAnswer,
+  setInputValue,
+  handleKeyboardInput,
+  isFixMode,
+  tipWords,
+} = useInput({
+  source: () => courseStore.currentStatement?.english!,
+  setInputCursorPosition,
+  getInputCursorPosition,
+  inputChangedCallback,
+});
+const { showAnswerTip, hiddenAnswerTip, isAnswerTip } = useAnswerTip();
 
 onMounted(() => {
   focusInput();
@@ -82,6 +104,7 @@ focusInputWhenWIndowFocus();
 watch(
   () => inputValue.value,
   (val) => {
+    hiddenAnswerTip();
     setInputValue(val);
     courseTimer.time(String(courseStore.statementIndex));
   },
@@ -210,7 +233,7 @@ function handleKeydown(e: KeyboardEvent) {
     useSpaceSubmitAnswer: {
       enable: isUseSpaceSubmitAnswer(),
       rightCallback: handleAnswerRight,
-      errorCallback: handleAnswerError,
+      errorCallback: handleAnswerError, // 错误提示
     },
   });
 }

apps/client/composables/main/answerTip.ts

@@ -1,10 +1,12 @@
 import { ref } from "vue";
+import { validateInput } from "./question";
 
 const answerTip = ref(false);
 
 export function useAnswerTip() {
   function showAnswerTip() {
     answerTip.value = true;
+    validateInput()
   }
   function hiddenAnswerTip() {
     answerTip.value = false;

apps/client/composables/main/question.ts

@@ -1,4 +1,5 @@
 import { nextTick, reactive, ref, watchEffect } from "vue";
+import { useCourseStore } from "~/store/course";
 
 interface Word {
   text: string;
@@ -32,6 +33,44 @@ export function clearQuestionInput() {
   inputValue.value = "";
 }
 
+interface TipWord {
+  noInput: boolean;
+  characters: { incorrect: boolean; character: string }[];
+}
+
+const tipWords = reactive<TipWord[]>([]);
+
+export function validateInput() {
+  const userInputs = inputValue.value.toLowerCase().split(separator)
+
+  function getUserInput(index: number) {
+    return userInputs[index] || "";
+  }
+
+  function validateCharacter(word: string, index: number) {
+    const userInput = getUserInput(index);
+    const inputCharacters = userInput.split("");
+
+    const overLength = userInput.length > word.length;
+
+    return word
+      .toLowerCase()
+      .split("")
+      .map((character, index) => ({
+        character,
+        incorrect: character !== inputCharacters[index] || overLength,
+      }));
+  }
+
+  const courseStore = useCourseStore();
+  courseStore.words.forEach((word, index) => {
+    tipWords[index] = {
+      noInput: !Boolean(getUserInput(index)),
+      characters: validateCharacter(word, index),
+    };
+  });
+}
+
 export function useInput({
   source,
   setInputCursorPosition,
@@ -354,5 +393,6 @@ export function useInput({
     fixFirstIncorrectWord,
     resetUserInputWords,
     isFixMode,
+    tipWords,
   };
 }