题目页面

src/main.ts

@@ -28,6 +28,11 @@ app.use(router)
 app.use(ElementPlus as any)
 app.use(Quasar, {
   plugins: {}, // import Quasar plugins and add here
+  config: {
+    brand: {
+      primary: 'var(--czr-main-color)',
+    },
+  },
 })
 app.mount('#app')
 // 设置为 true 以在浏览器开发工具的 performance/timeline 面板中启用对组件初始化、编译、渲染和更新的性能追踪。

src/style/index.scss

@@ -133,3 +133,6 @@ body,
 .q-tree__node--selected .q-tree__node-header-content {
   color: var(--czr-main-color) !important;
 }
+// FILE (create it): src/quasar-variables.sass
+
+

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

@@ -0,0 +1,728 @@
+<template>
+  <StudyLayout>
+    <div class="grid h-full w-full grid-cols-4 gap-6 overflow-hidden p-6">
+      <div
+        class="col-span-1 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
+      >
+        <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-book mr-2"></i>
+            知识点分类
+            <div class="ml-auto flex space-x-1 font-normal">
+              <div
+                id="expandAll"
+                class="text-subject-color flex items-center text-xs hover:underline"
+                @click="ref_tree.expandAll()"
+              >
+                <i class="fas fa-plus-square mr-1"></i>
+                <span>全部展开</span>
+              </div>
+              <div
+                id="collapseAll"
+                class="text-subject-color flex items-center text-xs hover:underline"
+                @click="ref_tree.collapseAll()"
+              >
+                <i class="fas fa-minus-square mr-1"></i>
+                <span>全部折叠</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="border-b border-b-[#e5e7eb] p-3">
+          <div class="relative">
+            <!--            <input-->
+            <!--              type="text"-->
+            <!--              placeholder="搜索知识点..."-->
+            <!--              class="search-input w-full rounded-lg border border-[#e5e7eb] py-1.5 pr-3 pl-9 text-sm focus:border-[var(&#45;&#45;czr-main-color)]/20 focus:outline-none"-->
+            <!--            />-->
+            <!--            <i-->
+            <!--              class="fas fa-search absolute top-1/2 left-3 -translate-y-1/2 transform text-sm text-[#6b7280]"-->
+            <!--            ></i>-->
+            <div class="quasar-css">
+              <q-input
+                v-model="state.treeText"
+                outlined
+                placeholder="搜索知识点..."
+                :dense="true"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="search" />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="state.treeText !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="state.treeText = ''"
+                  />
+                </template>
+              </q-input>
+            </div>
+          </div>
+        </div>
+        <div class="quasar-css overflow-y-auto p-2">
+          <q-tree
+            ref="ref_tree"
+            :nodes="treeData"
+            node-key="name"
+            label-key="name"
+            v-model:selected="state.selected"
+            :filter="state.treeText"
+          >
+            <template v-slot:default-header="prop">
+              <div class="flex w-full items-center text-sm">
+                <div class="">
+                  {{ prop.node.name }}
+                </div>
+                <div class="ml-auto">{{ prop.node.total }}题</div>
+              </div>
+            </template>
+          </q-tree>
+        </div>
+      </div>
+      <div
+        class="col-span-3 flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-md"
+      >
+        <div class="bg-[var(--czr-main-color)]/80 p-4 text-white">
+          <div class="relative flex items-center text-xl font-bold">
+            <i class="fas fa-book mr-2"></i>
+            题目列表
+            <span class="text-base" v-if="state.selected">
+              （{{ treeMapCpt.get(state.selected).name }} - 共{{
+                treeMapCpt.get(state.selected).total
+              }}题）
+            </span>
+            <div class="quasar-css absolute right-2 ml-auto flex">
+              <q-input
+                class="w-[140px]"
+                v-model="state.query.p1"
+                borderless
+                placeholder="搜索题目..."
+                :dense="true"
+                :input-style="{ color: '#ffffff' }"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="search" color="white" />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="state.query.p1"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="state.query.p1 = ''"
+                    color="white"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                class="select ml-4 w-[100px]"
+                borderless
+                v-model="state.query.p2"
+                :options="[
+                  { label: '全部题型', value: '全部题型' },
+                  { label: '选择题', value: '选择题' },
+                  { label: '填空题', value: '填空题' },
+                ]"
+                :dense="true"
+              >
+              </q-select>
+              <q-toggle
+                class="ml-4 text-sm font-normal"
+                v-model="state.query.p3"
+                label="只看错题"
+                :dense="true"
+                color="var(--czr-main-color)"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="flex-1 overflow-y-auto p-4" id="questionsContainer">
+          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+            <!-- 题目卡片1 -->
+            <div
+              class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
+            >
+              <div class="p-4">
+                <div class="mb-3 flex items-start justify-between">
+                  <div class="text-base font-semibold text-gray-800">
+                    题目 1 - 下列汉字中属于独体字的是哪一项？
+                  </div>
+                  <div class="flex space-x-1">
+                    <div
+                      class="text-gray-dark hover:text-warning-color transition-colors"
+                      title="收藏题目"
+                    >
+                      <i class="fas fa-star"></i>
+                    </div>
+                    <div
+                      class="text-gray-dark hover:text-danger-color transition-colors"
+                      title="错题标记"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 题目的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/24/400/200"
+                    alt="题目图片"
+                    class="max-h-40 rounded"
+                  />
+                </div>
+
+                <!-- 答案的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/20/400/150"
+                    alt="答案图片"
+                    class="max-h-32 rounded"
+                  />
+                </div>
+
+                <!-- 视频解析列表 -->
+                <div>
+                  <div class="mb-2 text-sm font-medium text-gray-800">
+                    视频解析：
+                  </div>
+                  <ul class="space-y-2">
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">独体字与合体字的区别</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video1.mp4"
+                        data-title="独体字与合体字的区别"
+                        data-duration="10:24"
+                        data-views="1.2k"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">常见独体字结构分析</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video2.mp4"
+                        data-title="常见独体字结构分析"
+                        data-duration="8:45"
+                        data-views="986"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <!-- 题目卡片2 -->
+            <div
+              class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
+            >
+              <div class="p-4">
+                <div class="mb-3 flex items-start justify-between">
+                  <div class="font-semibold text-gray-800">
+                    题目 2 - 下列哪组汉字都是左右结构？
+                  </div>
+                  <div class="flex space-x-1">
+                    <div
+                      class="text-warning-color hover:text-gray-dark transition-colors"
+                      title="已收藏"
+                    >
+                      <i class="fas fa-star"></i>
+                    </div>
+                    <div
+                      class="text-gray-dark hover:text-danger-color transition-colors"
+                      title="错题标记"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 题目的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/28/400/200"
+                    alt="题目图片"
+                    class="max-h-40 rounded"
+                  />
+                </div>
+
+                <!-- 答案的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/26/400/150"
+                    alt="答案图片"
+                    class="max-h-32 rounded"
+                  />
+                </div>
+
+                <!-- 视频解析列表 -->
+                <div>
+                  <div class="mb-2 text-sm font-medium text-gray-800">
+                    视频解析：
+                  </div>
+                  <ul class="space-y-2">
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">汉字结构分类详解</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video3.mp4"
+                        data-title="汉字结构分类详解"
+                        data-duration="12:10"
+                        data-views="2.1k"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <!-- 题目卡片3 -->
+            <div
+              class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
+            >
+              <div class="p-4">
+                <div class="mb-3 flex items-start justify-between">
+                  <div class="font-semibold text-gray-800">
+                    题目 3 - 找出下列选项中书写有误的汉字并改正
+                  </div>
+                  <div class="flex space-x-1">
+                    <div
+                      class="text-gray-dark hover:text-warning-color transition-colors"
+                      title="收藏题目"
+                    >
+                      <i class="fas fa-star"></i>
+                    </div>
+                    <div
+                      class="text-danger-color hover:text-gray-dark transition-colors"
+                      title="已标记为错题"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 题目的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/42/400/200"
+                    alt="题目图片"
+                    class="max-h-40 rounded"
+                  />
+                </div>
+
+                <!-- 答案的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/49/400/150"
+                    alt="答案图片"
+                    class="max-h-32 rounded"
+                  />
+                </div>
+
+                <!-- 视频解析列表 -->
+                <div>
+                  <div class="mb-2 text-sm font-medium text-gray-800">
+                    视频解析：
+                  </div>
+                  <ul class="space-y-2">
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">常见形近字辨析</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video4.mp4"
+                        data-title="常见形近字辨析"
+                        data-duration="15:30"
+                        data-views="1.8k"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">易错字书写规则</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video5.mp4"
+                        data-title="易错字书写规则"
+                        data-duration="9:42"
+                        data-views="1.5k"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">汉字笔画顺序规则</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video6.mp4"
+                        data-title="汉字笔画顺序规则"
+                        data-duration="7:55"
+                        data-views="1.3k"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <!-- 题目卡片4 -->
+            <div
+              class="question-card overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm"
+            >
+              <div class="p-4">
+                <div class="mb-3 flex items-start justify-between">
+                  <div class="font-semibold text-gray-800">
+                    题目 4 - 下列哪个汉字是上下结构？
+                  </div>
+                  <div class="flex space-x-1">
+                    <div
+                      class="text-gray-dark hover:text-warning-color transition-colors"
+                      title="收藏题目"
+                    >
+                      <i class="fas fa-star"></i>
+                    </div>
+                    <div
+                      class="text-gray-dark hover:text-danger-color transition-colors"
+                      title="错题标记"
+                    >
+                      <i class="fas fa-exclamation-circle"></i>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 题目的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/60/400/200"
+                    alt="题目图片"
+                    class="max-h-40 rounded"
+                  />
+                </div>
+
+                <!-- 答案的图片 -->
+                <div
+                  class="bg-gray-light mb-4 flex justify-center rounded-lg p-4"
+                >
+                  <img
+                    src="https://picsum.photos/id/65/400/150"
+                    alt="答案图片"
+                    class="max-h-32 rounded"
+                  />
+                </div>
+
+                <!-- 视频解析列表 -->
+                <div>
+                  <div class="mb-2 text-sm font-medium text-gray-800">
+                    视频解析：
+                  </div>
+                  <ul class="space-y-2">
+                    <li
+                      class="video-item flex items-center justify-between rounded-lg border border-[#e5e7eb] p-2"
+                    >
+                      <span class="text-sm">汉字结构类型及特点</span>
+                      <div
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
+                        data-video="https://example.com/video7.mp4"
+                        data-title="汉字结构类型及特点"
+                        data-duration="11:20"
+                        data-views="954"
+                      >
+                        <i class="fas fa-play text-xs"></i>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页控件 -->
+          <div class="mt-6 flex justify-center">
+            <div class="flex items-center space-x-1">
+              <div
+                class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
+              >
+                <i class="fas fa-chevron-left text-xs"></i>
+              </div>
+              <div
+                class="pagination-item active flex h-8 w-8 items-center justify-center rounded"
+              >
+                1
+              </div>
+              <div
+                class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
+              >
+                2
+              </div>
+              <div
+                class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
+              >
+                3
+              </div>
+              <span class="flex h-8 w-8 items-center justify-center">...</span>
+              <div
+                class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
+              >
+                6
+              </div>
+              <div
+                class="pagination-item hover:bg-gray-light flex h-8 w-8 items-center justify-center rounded transition-colors"
+              >
+                <i class="fas fa-chevron-right text-xs"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </StudyLayout>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import StudyLayout from '@/views/study/components/study-layout.vue'
+
+const state: any = reactive({
+  selected: null,
+  treeText: '',
+  query: {
+    p1: '',
+    p2: '全部题型',
+    p3: true,
+  },
+})
+const ref_tree = ref()
+const treeData = [
+  {
+    name: '基础知识',
+    total: 328,
+    children: [
+      {
+        name: '字音字形',
+        total: 128,
+        children: [
+          {
+            name: '声母韵母',
+            total: 48,
+            children: [
+              { name: '声母辨析', total: 25 },
+              { name: '韵母辨析', total: 18 },
+              { name: '整体认读音节', total: 5 },
+            ],
+          },
+          {
+            name: '字形结构',
+            total: 80,
+            children: [
+              { name: '独体字', total: 24 },
+              { name: '合体字', total: 32 },
+              { name: '形近字', total: 16 },
+              { name: '多音字', total: 8 },
+            ],
+          },
+        ],
+      },
+      {
+        name: '词语辨析',
+        total: 145,
+        children: [
+          { name: '近义词', total: 45 },
+          { name: '反义词', total: 35 },
+          { name: '成语辨析', total: 50 },
+          { name: '熟语运用', total: 15 },
+        ],
+      },
+      {
+        name: '句子运用',
+        total: 55,
+        children: [
+          { name: '病句辨析', total: 30 },
+          { name: '修辞手法', total: 15 },
+          { name: '句式转换', total: 10 },
+        ],
+      },
+    ],
+  },
+  {
+    name: '文言文',
+    total: 196,
+    children: [
+      {
+        name: '文言实词',
+        total: 96,
+        children: [
+          { name: '一词多义', total: 40 },
+          { name: '古今异义', total: 35 },
+          { name: '通假字', total: 21 },
+        ],
+      },
+      {
+        name: '文言虚词',
+        total: 65,
+        children: [
+          { name: '之乎者也', total: 35 },
+          { name: '而何乃焉', total: 30 },
+        ],
+      },
+      {
+        name: '文言句式',
+        total: 35,
+      },
+    ],
+  },
+  {
+    name: '现代文阅读',
+    total: 178,
+    children: [
+      {
+        name: '记叙文',
+        total: 78,
+        children: [
+          { name: '写人记事', total: 45 },
+          { name: '写景状物', total: 33 },
+        ],
+      },
+      {
+        name: '说明文',
+        total: 55,
+        children: [
+          { name: '事物说明', total: 30 },
+          { name: '事理说明', total: 25 },
+        ],
+      },
+      {
+        name: '议论文',
+        total: 45,
+        children: [
+          { name: '论点论据', total: 25 },
+          { name: '论证方法', total: 20 },
+        ],
+      },
+    ],
+  },
+  {
+    name: '诗歌鉴赏',
+    total: 164,
+    children: [
+      {
+        name: '古诗',
+        total: 104,
+        children: [
+          { name: '唐诗', total: 45 },
+          { name: '宋诗', total: 35 },
+          { name: '乐府诗', total: 24 },
+        ],
+      },
+      {
+        name: '词曲',
+        total: 45,
+        children: [
+          { name: '宋词', total: 30 },
+          { name: '元曲', total: 15 },
+        ],
+      },
+      {
+        name: '现代诗',
+        total: 15,
+      },
+    ],
+  },
+  {
+    name: '写作技巧',
+    total: 120,
+    children: [
+      {
+        name: '记叙文写作',
+        total: 65,
+        children: [
+          { name: '人物描写', total: 35 },
+          { name: '情节安排', total: 30 },
+        ],
+      },
+      {
+        name: '议论文写作',
+        total: 45,
+        children: [
+          { name: '论点确立', total: 20 },
+          { name: '论据选择', total: 25 },
+        ],
+      },
+      {
+        name: '应用文写作',
+        total: 10,
+      },
+    ],
+  },
+]
+const treeMapCpt = computed(() => {
+  const map = new Map()
+  const deep = (arr) => {
+    arr.forEach((v) => {
+      map.set(v.name, v)
+      if (v.children?.length > 0) {
+        deep(v.children)
+      }
+    })
+  }
+  deep(treeData)
+  return map
+})
+onMounted(() => {})
+</script>
+
+<style lang="scss" scoped>
+$primary: red;
+
+.search-input:focus {
+  box-shadow: 0 0 0 3px rgba(var(--czr-main-color-rgb), 0.2);
+}
+.question-card {
+  transition: all 0.3s ease;
+}
+
+.question-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+}
+:deep(.select) {
+  .ellipsis {
+    color: #ffffff;
+  }
+  .q-select__dropdown-icon {
+    color: #ffffff;
+  }
+}
+</style>