✨ Add today's word review.

src/components/WordOfTodayItem.vue

@@ -1,5 +1,48 @@
 <template>
-    <div class="p-1 shadow-xs shadow-pink-300 rounded-xs inset-ring-2">1</div>
+    <div
+        @click="handleItemClick"
+        :class="classObj"
+        class="font-bold px-1 py-16 shadow-md shadow-slate-300 rounded-xs ring-1 ring-slate-300 flex justify-around items-center cursor-pointer transform duration-300 hover:bg-slate-300 hover:scale-105"
+    >
+        <template v-if="!hasRotated"
+            ><span class="text-xl">{{ wordText }}</span></template
+        >
+        <template v-else
+            ><div class="flex-col">
+                <div class="rotate-y-180" v-for="translation in translationContent" :key="translation">
+                    {{ translation.pos }} {{ translation.zh }}
+                </div>
+            </div></template
+        >
+    </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { request } from '@/utils/service';
+import { reactive, ref } from 'vue';
+
+const props = defineProps<{
+    wordText: string;
+}>();
+
+const hasRotated = ref(false);
+
+const classObj = reactive({
+    'bg-pink-300': false,
+    'rotate-y-180': false,
+});
+
+const translationContent = reactive([]);
+
+function handleItemClick() {
+    classObj['bg-pink-300'] = !classObj['bg-pink-300'];
+    classObj['rotate-y-180'] = !classObj['rotate-y-180'];
+    hasRotated.value = !hasRotated.value;
+    getTranslation(props.wordText);
+}
+
+async function getTranslation(wordText: string) {
+    const t = await request({ url: '/translation/content/', method: 'post', data: { word: wordText } });
+    Object.assign(translationContent, t.data.dicList);
+}
+</script>

src/views/TodayWords.vue

@@ -1,17 +1,33 @@
 <template>
     <Header title="Words of Today" @goBack="handleGoBack"></Header>
-    <div class="p-2 grid grid-cols-5 gap-3">
-        <word-of-today-item v-for="i in 30" :key="i"></word-of-today-item>
+    <div class="p-2 grid lg:grid-cols-5 grid-cols-3 lg:gap-3 gap-2">
+        <word-of-today-item :wordText="i.en" v-for="i in todayWord.wordList" :key="i"></word-of-today-item>
     </div>
 </template>
 
 <script setup lang="ts">
 import Header from '@/components/Header.vue';
 import WordOfTodayItem from '@/components/WordOfTodayItem.vue';
+import { request } from '@/utils/service';
+import { onMounted, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
+const todayWord = reactive({
+    count: 0,
+    wordList: [],
+});
+
+onMounted(async () => {
+    Object.assign(todayWord, await getTodayWordCount());
+});
+
 const router = useRouter();
 function handleGoBack() {
     router.go(-1);
 }
+
+async function getTodayWordCount() {
+    const info = await request({ url: '/word/today' });
+    return info.data;
+}
 </script>