最近刷题记录

src/views/study/chinese/index.vue

@@ -18,7 +18,10 @@
           </div>
         </div>
         <!-- 图表容器 -->
-        <div class="flex-1 overflow-y-auto p-4">
+        <div
+          class="flex flex-1 flex-col overflow-y-auto p-4"
+          style="flex-wrap: unset"
+        >
           <!-- 图表切换标签 -->
           <div class="mt-2 mb-4 flex space-x-2">
             <button
@@ -57,7 +60,7 @@
           </div>
 
           <!-- 知识点掌握情况图表 -->
-          <div class="mb-6 h-[300px]">
+          <div class="mb-6 flex-1">
             <chart1 v-if="state.type === 1" />
             <chart2 v-if="state.type === 2" />
             <chart3 v-if="state.type === 3" />
@@ -103,26 +106,137 @@
             </div>
           </div>
 
-          <!-- 薄弱知识点提示 -->
-          <div
-            class="mt-6 rounded-lg border border-yellow-100 bg-yellow-50 p-3"
-          >
-            <div class="flex items-center font-semibold text-gray-800">
-              <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
-              学习建议
+          <div class="flex items-center justify-between py-3">
+            <div class="font-semibold text-gray-800">最近刷题记录</div>
+            <div class="ml-auto">
+              <q-input
+                class="date w-[250px]"
+                rounded
+                standout="focus"
+                :dense="true"
+                v-model="dateStr"
+                readonly
+              >
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="">
+                    <q-popup-proxy
+                      cover
+                      transition-show="scale"
+                      transition-hide="scale"
+                    >
+                      <q-date
+                        v-model="state.query.date"
+                        mask="YYYY-MM-DD"
+                        range
+                      >
+                        <div class="row items-center justify-end">
+                          <q-btn
+                            v-close-popup
+                            label="Close"
+                            color="primary"
+                            flat
+                          />
+                        </div>
+                      </q-date>
+                    </q-popup-proxy>
+                  </q-icon>
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="dateStr"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="state.query.date = {}"
+                  />
+                </template>
+              </q-input>
             </div>
-            <div class="mt-2 text-sm text-gray-600">
-              根据你的学习数据，建议重点加强
-              <span class="font-medium text-red-500">诗歌鉴赏</span> 和
-              <span class="font-medium text-red-500">文言文</span> 部分的练习。
-              这两个知识点的掌握程度低于你的平均水平，可通过专项练习提升。
+          </div>
+          <div class="max-h-[30%] overflow-y-auto py-3">
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
             </div>
-            <button
-              class="text-subject-color mt-3 flex items-center text-sm hover:underline"
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
             >
-              <i class="fas fa-graduation-cap mr-1"></i>
-              查看推荐练习
-            </button>
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
+            </div>
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
+            </div>
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
+            </div>
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
+            </div>
+            <div
+              class="record-item cursor-pointer rounded-lg border border-gray-100 p-2"
+              @click="$router.push({ name: 'chinese-question' })"
+            >
+              <div class="flex items-center justify-between">
+                <span class="text-sm font-medium">文言文阅读专项</span>
+              </div>
+              <div class="mt-1 text-xs text-gray-500">
+                2025-07-06 | 25题（<span class="text-red">5</span>/<span
+                  class="text-green"
+                  >20</span
+                >） | 正确率80%
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -506,7 +620,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
 import chart1 from './chart-1.vue'
 import chart2 from './chart-2.vue'
@@ -517,8 +631,15 @@ const state: any = reactive({
   query: {
     p1: '近三个月',
     p2: '全部类型',
+    date: {},
   },
 })
+const dateStr = computed(() => {
+  if (state.query.date.from && state.query.date.to) {
+    return `${state.query.date.from} - ${state.query.date.to}`
+  }
+  return ''
+})
 onMounted(() => {})
 </script>