错题统计

src/main.ts

@@ -12,6 +12,7 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { Quasar, Notify } from 'quasar'
+import quasarZHCN from 'quasar/lang/zh-CN'
 // Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
 // Import Quasar css
@@ -35,6 +36,7 @@ app.use(Quasar, {
       primary: 'var(--czr-main-color)',
     },
   },
+  lang: quasarZHCN,
 })
 app.mount('#app')
 // 设置为 true 以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。

src/views/study/chinese/index.vue

@@ -255,6 +255,7 @@
               <div class="mt-3 flex justify-end">
                 <button
                   class="text-subject-color flex items-center text-xs hover:underline"
+                  @click="$router.push({ name: 'chinese-question' })"
                 >
                   <i class="fas fa-file-alt mr-1"></i>
                   查看详情
@@ -308,6 +309,7 @@
               <div class="mt-3 flex justify-end">
                 <button
                   class="text-subject-color flex items-center text-xs hover:underline"
+                  @click="$router.push({ name: 'chinese-question' })"
                 >
                   <i class="fas fa-file-alt mr-1"></i>
                   查看详情
@@ -362,6 +364,7 @@
               <div class="mt-3 flex justify-end">
                 <button
                   class="text-subject-color flex items-center text-xs hover:underline"
+                  @click="$router.push({ name: 'chinese-question' })"
                 >
                   <i class="fas fa-file-alt mr-1"></i>
                   查看详情
@@ -415,6 +418,7 @@
               <div class="mt-3 flex justify-end">
                 <button
                   class="text-subject-color flex items-center text-xs hover:underline"
+                  @click="$router.push({ name: 'chinese-question' })"
                 >
                   <i class="fas fa-file-alt mr-1"></i>
                   查看详情
@@ -429,43 +433,83 @@
           <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
             <div class="flex items-center text-xl font-bold">
               <i class="fas fa-clock mr-2"></i>
-              近期考试提醒
+              错题统计
+              <div
+                class="subject-questions-btn bg-subject-color ml-auto flex items-center rounded-full px-3 py-1 text-sm"
+                @click="$router.push({ name: 'chinese-question' })"
+              >
+                <i class="fas fa-question-circle mr-1"></i>
+                <span>查看详情</span>
+              </div>
             </div>
           </div>
-          <div class="p-4">
-            <div
-              class="flex items-start rounded-lg border border-yellow-100 bg-yellow-50 p-3"
-            >
-              <div class="mr-3 rounded-full bg-yellow-100 p-2">
-                <i class="fas fa-exclamation-circle text-yellow-600"></i>
-              </div>
-              <div class="flex-1">
-                <div class="flex items-start justify-between">
-                  <div class="font-semibold text-gray-800">语文周测</div>
-                  <span
-                    class="rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-800"
-                    >3天后</span
+          <div class="flex flex-col p-4">
+            <div class="flex gap-4">
+              <div
+                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
+              >
+                <div class="flex items-center">
+                  <div
+                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100"
                   >
+                    <i class="fas fa-clipboard-list text-blue-600"></i>
+                  </div>
+                  <div>
+                    <div class="text-sm text-gray-500">本学科总做题数</div>
+                    <div class="text-lg font-bold">246题</div>
+                  </div>
                 </div>
-                <div class="mt-1 text-sm text-gray-600">
-                  本周五 14:00-15:00 | 时长60分钟
-                </div>
-                <div class="text-sm text-gray-600">范围：第5单元文言文阅读</div>
-                <div class="mt-3 flex items-center justify-between">
-                  <div class="flex items-center">
-                    <i class="fas fa-book-open mr-1 text-gray-400"></i>
-                    <span class="text-xs text-gray-500"
-                      >建议复习时间：30分钟</span
-                    >
+              </div>
+
+              <div
+                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
+              >
+                <div class="flex items-center">
+                  <div
+                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-red-100"
+                  >
+                    <i class="fas fa-times-circle text-red-600"></i>
                   </div>
-                  <button
-                    class="bg-subject-color hover:bg-subject-dark rounded-full px-3 py-1 text-sm text-white transition-colors"
+                  <div>
+                    <div class="text-sm text-gray-500">错题数</div>
+                    <div class="text-lg font-bold">59题</div>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                class="flex flex-1 items-center justify-between rounded-lg bg-gray-50 p-3"
+              >
+                <div class="flex items-center">
+                  <div
+                    class="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100"
                   >
-                    开始复习
-                  </button>
+                    <i class="fas fa-check-circle text-green-600"></i>
+                  </div>
+                  <div>
+                    <div class="text-sm text-gray-500">正确率</div>
+                    <div class="text-lg font-bold">76%</div>
+                  </div>
                 </div>
               </div>
             </div>
+            <div class="mt-4 border-t border-gray-100 pt-4">
+              <div class="mb-3 text-sm font-medium">错题最多的知识点</div>
+              <div class="flex flex-wrap gap-2">
+                <span
+                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
+                  >文言文虚词 (12题)</span
+                >
+                <span
+                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
+                  >现代文阅读理解 (9题)</span
+                >
+                <span
+                  class="mistake-tag rounded-full bg-red-100 px-2 py-1 text-xs text-red-800"
+                  >诗歌鉴赏 (7题)</span
+                >
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/views/study/chinese/question/index.vue

@@ -85,24 +85,66 @@
               }}题）
             </span>
             <div class="absolute right-2 ml-auto flex">
-              <q-select
-                class="select ml-4 w-[120px]"
+              <q-input
+                class="date w-[250px]"
                 rounded
                 standout="focus"
-                v-model="state.query.p2"
-                :options="['全部题', '错题', '正确提']"
                 :dense="true"
+                v-model="dateStr"
+                readonly
               >
-              </q-select>
+                <template v-slot:prepend>
+                  <q-icon name="event" class="cursor-pointer" color="white">
+                    <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 = {}"
+                    color="white"
+                  />
+                </template>
+              </q-input>
               <q-select
                 class="select ml-4 w-[120px]"
                 rounded
                 standout="focus"
-                v-model="state.query.p1"
-                :options="['近三个月', '本学期', '上学期', '本年度', '全部']"
+                v-model="state.query.p2"
+                :options="['全部题', '错题', '正确提']"
                 :dense="true"
               >
               </q-select>
+              <!--              <q-select-->
+              <!--                class="select ml-4 w-[120px]"-->
+              <!--                rounded-->
+              <!--                standout="focus"-->
+              <!--                v-model="state.query.p1"-->
+              <!--                :options="['近三个月', '本学期', '上学期', '本年度', '全部']"-->
+              <!--                :dense="true"-->
+              <!--              >-->
+              <!--              </q-select>-->
               <!--              <q-toggle-->
               <!--                class="ml-4 text-sm font-normal"-->
               <!--                v-model="state.query.p3"-->
@@ -538,10 +580,17 @@ const state: any = reactive({
     p1: '近三个月',
     p2: '全部题',
     p3: true,
+    date: {},
   },
   showVideo: false,
   showHistory: false,
 })
+const dateStr = computed(() => {
+  if (state.query.date.from && state.query.date.to) {
+    return `${state.query.date.from} - ${state.query.date.to}`
+  }
+  return ''
+})
 const ref_tree = ref()
 const treeData = [
   {
@@ -742,11 +791,15 @@ $primary: red;
   .q-select__dropdown-icon {
     color: #ffffff;
   }
-  .focus {
-    background: rgba(0, 0, 0, 0.1);
+}
+:deep(.date) {
+  .q-placeholder {
+    color: #ffffff;
   }
 }
-
+:deep(.focus) {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
 :deep(.q-tree__node--selected),
 :deep(.q-tree__node--selected .q-tree__node-header-content) {
   color: var(--czr-main-color) !important;