更新新pod;

修改pod排版

src/components/GeneralRenderer.vue

@@ -75,6 +75,8 @@ onMounted(async () => {
 
 .renderer-container p {
   margin-bottom: 1rem;
+  display: flex;
+  justify-content: center;
 }
 
 .renderer-container code {
@@ -132,6 +134,18 @@ onMounted(async () => {
   background-color: #222;
   color: #f0f0f0;
 }
+.pod-image {
+  align-self: center;
+  filter: invert(92%);
+  height: auto;
+  max-height: 300px;
+  width: auto;
+  max-width: 100%;
+  margin: 10px 0;
+}
+.theme-light img {
+  filter: invert(0);
+}
 .theme-light .renderer-container {
   font-family: 'Arial', sans-serif;
   font-size: 1rem;

src/pages/Demos_home.vue

@@ -17,7 +17,7 @@ const demos = ref([
     date: '2025-2-26',
     author: ["Louis Zhou"],
     tags: ['课内'],
-    image: 'https://' + getDomain() + '/data/file/pod.png'
+    image: 'https://' + getDomain() + '/data/demos/pod/icon.png'
   },
 ]);
 

src/pages/demoPages/podExercise/Pod_page.vue

@@ -1,30 +1,51 @@
 <script setup>
 
-import {ref} from "vue";
+import {computed, ref} from "vue";
 
 const podList = ref([
   {
-    title: 'PHY MCQ 1',
+    title: 'MCQ 1',
-    file: 'phy250226',
+    categories: 'AP phy 1',
+    file: '250227',
     describe: '',
     date: '2025-2-26'
   },{
-    title: 'PHY MCQ 2',
+    title: 'MCQ 2',
-    file: 'phy250227',
+    categories: 'AP phy 1',
+    file: '250306',
     describe: '',
     date: '2025-2-27'
-  },
+  },{
+    title: 'MCQ 3',
+    categories: 'AP phy 1',
+    file: '250313',
+    describe: '',
+    date: '2025-3-6'
+  }
 ])
+
+const uniqueCats = computed(() => {
+  const keys = new Set();
+  podList.value.forEach(item => {
+    keys.add(item.categories);
+  });
+  return Array.from(keys);
+});
 </script>
 
 <template>
   <div class="container" v-if="/^\/demos\/pod\/?$/.test($route.path)">
     <h1>无限制做题大赛</h1>
-    <div class="pod-container">
+    <div class="pod-container" v-for="cat in uniqueCats">
-      <router-link class="pods" v-for="pod in podList" :to="`/demos/pod/quiz?id=${pod.file}`">
+      <div class="folder">
-        <div class="title">{{ pod.title }}</div>
+        <div class="folder-title">{{ cat }}</div>
-        <div class="date">{{ pod.date }}</div>
+        <div class="pods-display">
-      </router-link>
+          <router-link class="pods" v-for="pod in podList" :to="`/demos/pod/quiz?cat=${pod.categories.toLowerCase().replaceAll(' ', '')}&id=${pod.file}`">
+            <div class="title">{{ pod.title }}</div>
+            <div class="date">{{ pod.date }}</div>
+          </router-link>
+        </div>
+      </div>
     </div>
   </div>
   <router-view v-else />
@@ -49,6 +70,26 @@ const podList = ref([
   flex-wrap: wrap;
   gap: 20px;
 }
+.folder {
+  background: rgba(128, 128, 128, 0.11);
+  display: flex;
+  padding: 15px;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: center;
+  max-width: 520px;
+}
+.folder-title {
+  font-size: 25px;
+}
+.pods-display {
+  display: flex;
+  padding: 15px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
 .pods {
   display: flex;
   flex-direction: column;
@@ -56,12 +97,12 @@ const podList = ref([
   justify-content: center;
   width: 150px;
   height: 150px;
-  background: #2a2a2a;
+  background: #131313;
   max-width: 800px;
   cursor: pointer;
 }
 .theme-light .pods {
-  background: #efefef;
+  background: #ffffff;
 }
 .title {
   font-size: 20px;

src/pages/demoPages/podExercise/QuestionText.vue

@@ -26,7 +26,7 @@ function replaceMedia(text, medias) {
     if (medias[mediaKey]) {
       const [type, url, width, height] = medias[mediaKey];
       if (type === 'image') {
-        return `<img src="${url}" width="100%" height="auto" alt="Question Image" />`;
+        return `<img class="pod-image" src="${url}" width="100%" height="auto" alt="Question Image" />`;
       }
     }
     return '';
@@ -37,9 +37,5 @@ const processedText = computed(() => replaceMedia(props.text, props.medias));
 </script>
 
 <style scoped>
-img {
 
-  height: auto;
-  margin: 10px 0;
-}
 </style>

src/pages/demoPages/podExercise/Quiz.vue

@@ -43,11 +43,16 @@
         <div v-if="similarQuestions.length > 0" class="similar-questions">
           <h3>对比其他类似题目</h3>
           <div v-for="(similar, index) in similarQuestions" :key="index" class="similar-question">
-            <h4>题目 {{ index + 1 }}</h4>
+
+            <h4>-- 题目 {{ index + 1 }} --</h4>
             <QuestionText :text="similar.text" :medias="data.medias"/>
             <p>正确答案：
               <general-renderer :content-input="processMedia(similar.correctAnswer, data.medias)"></general-renderer>
             </p>
+            <div v-if="similar.explanation" class="explanation">
+              <h4>解题思路</h4>
+              <general-renderer :content-input="processMedia(similar.explanation, data.medias)"></general-renderer>
+            </div>
           </div>
         </div>
       </div>
@@ -84,7 +89,6 @@ const data = reactive({
   itemtypes: [],
   texts: [],
   explanations: [],
-  gradings: [],
   answerkeys: [],
   answers: [],
   medias: {}
@@ -115,9 +119,10 @@ const progressPercentage = computed(() => {
 });
 
 const initial = async () => {
-  const file = route.query.id || 'phy250226';
+  const categorise = route.query.cat || 'apphy1'
+  const file = route.query.id || 'phy250227';
   try {
-    const response = await axios.get(`https://mva-cyber.club/data/file/${file}.json`);
+    const response = await axios.get(`https://mva-cyber.club/data/demos/pod/${categorise}/${file}.json`);
     const jsonData = response.data;
     Object.assign(data, jsonData);
     generateNewExam(); // 初始生成一份试卷
@@ -170,7 +175,7 @@ function processMedia(text, medias) {
     if (medias[mediaKey]) {
       const [type, url, width, height] = medias[mediaKey];
       if (type === 'image') {
-        return `<img src="${url}" width="100%" height="auto" alt="Question Image" />`;
+        return `<img class="pod-image" src="${url}" width="100%" height="auto" alt="Question Image" />`;
       }
     }
     return '';
@@ -270,7 +275,8 @@ function findSimilarQuestions() {
       const correctIdx = data.answerkeys[i].findIndex((key, idx) => idx > 0 && key === 1) - 1;
       similar.push({
         text: data.texts[i],
-        correctAnswer: data.answers[i][correctIdx + 1]
+        correctAnswer: data.answers[i][correctIdx + 1],
+        explanation: data.explanations[i]
       });
     }
   }
@@ -334,7 +340,7 @@ function nextQuestion() {
   //max-width: 800px;
   margin: auto;
   height: calc(100vh - 109px);
-  overflow-y: auto;
+  overflow-y: scroll;
   padding: 20px;
   font-family: Arial, sans-serif;
 }