ai-question-pro 0.0.20 → 0.0.21

package/components/demo/src/questionItem.vue

@@ -1,5 +1,12 @@
 <template>
     <div class="ai_question_contain">
+        <div class="question_header">
+            <div class="question_header_left">
+                <el-checkbox v-model="isSelected" :disabled="isJoined || joined" @change="handleSelectionChange"></el-checkbox>
+                <span class="type-name" :class="getTypeClass(detail.type)">{{ getQuestionTypeName(detail.type) }}</span>
+            </div>
+            <span v-if="!joined && !isJoined" class="join" @click="join">+ 加入题库</span>
+        </div>
         <div class="question_contain_title">
             <span class="question_contain_title_left">
                 <span>{{ index + 1 }}.</span>
@@ -21,13 +28,14 @@
                 <span>{{ item }}</span>
             </div>
         </div>
-        <div class="question_contain_answer">参考答案:
+       <div class="question_answer_info">
+         <div class="question_contain_answer">参考答案:
             <span v-html="detail.answer"></span>
-        </div>
-        <div class="question_contain_parse">
-            <span class="question_contain_parse_analysis">题目解析: {{ detail.analysis }}</span>
-            <span v-if="!joined" class="join" @click="join">加入题库</span>
-        </div>
+         </div>
+         <div class="question_contain_parse">
+             <span class="question_contain_parse_analysis"><span style="font-weight: bold">题目解析:</span> {{ detail.analysis }}</span>
+         </div>
+       </div>
     </div>
 </template>
 <script>
@@ -40,6 +48,10 @@ export default {
         },
         index: {
             type: Number
+        },
+        isJoined: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -62,46 +74,103 @@ export default {
                 { name: 'H', id: 7 },
                 { name: 'I', id: 8 },
             ],
-          joined: false
+          joined: false,
+          isSelected: false
         }
     },
     methods: {
         agree(e) {
             this.$emit('agree', this.index, e)
         },
-        join(e) {
+        join() {
             this.$emit('join', this.detail)
             this.joined = true;
+            // 当加入题库后，自动取消选中状态
+            if (this.isSelected) {
+                this.isSelected = false;
+                this.handleSelectionChange(false);
+            }
+        },
+        // 获取题目类型中文名称
+        getQuestionTypeName(type) {
+            const typeMap = {
+                single: '单选题',
+                multiple: '多选题',
+                gapfilling: '填空题',
+                judge: '判断题',
+                shortanswer: '简答题'
+            };
+            return typeMap[type] || type;
+        },
+        // 获取题目类型样式类
+        getTypeClass(type) {
+            const classMap = {
+                single: 'type-single',
+                multiple: 'type-multiple',
+                gapfilling: 'type-gapfilling',
+                judge: 'type-judge',
+                shortanswer: 'type-shortanswer'
+            };
+            return classMap[type] || '';
+        },
+        // 处理选择变化
+        handleSelectionChange(value) {
+            this.$emit('selectionChange', {
+                index: this.index,
+                selected: value,
+                detail: this.detail
+            });
+        },
+        // 清空选中状态 - 供父组件调用
+        clearSelection() {
+            this.isSelected = false;
         }
     }
 }
 </script>
 <style lang="scss" scoped>
 .ai_question_contain {
-    margin-bottom: 10px;
-    padding: 10px;
-    border-radius: 8px;
+    margin-bottom: 20px;
+    padding: 20px;
     background: rgba(255, 255, 255, .6);
+    border: 1px solid #DADCE0;
+    border-radius: 24px;
+    font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
 
-    .question_contain_title {
+    .question_header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         margin-bottom: 16px;
+
+        .question_header_left {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+    }
+
+    .question_contain_title {
+        margin-bottom: 15px;
         display: flex;
         justify-content: space-between;
 
         .question_contain_title_left {
             color: #333333;
-            font-weight: 600;
-            font-size: 14px;
-            width: 80%;
+            font-weight: bold;
+            font-size: 16px;
+            width: 100%;
+            line-height: 28px;
 
             .difficult {
                 margin: 0 6px;
-                font-weight: 400;
-                padding: 2px 4px;
-                color: #fff;
-                background: #3E7BFA;
-                font-size: 10px;
-                border-radius: 2px;
+                font-weight: bold;
+                padding: 5px 7px;
+                color: #333333;
+                font-size: 12px;
+                border-radius: 24px;
+                border: 1px solid #2828E07A;
+                background: transparent;
             }
         }
 
@@ -118,14 +187,25 @@ export default {
 
     .question_contain_question {
         margin-bottom: 16px;
+        font-size: 14px;
+        padding-left: 5px;
 
         div {
             margin: 5px 0;
         }
     }
 
+    .question_answer_info {
+      border-radius: 15px;
+      padding: 20px;
+      background-color: rgba(64, 48, 240, 0.08);
+    }
+
     .question_contain_answer {
         margin-bottom: 16px;
+        font-size: 13px;
+        color: #6040E0;
+        font-weight: bold;
     }
 
     .question_contain_parse {
@@ -134,15 +214,79 @@ export default {
         justify-content: space-between;
 
         .question_contain_parse_analysis {
-            width: 80%;
+            width: 100%;
+            font-size: 13px;
+            color: #262626;
         }
+    }
+  .type-name {
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 54px;
+    color: #fff;
+    height: 40px;
+    width: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-        .join {
-            align-self: self-end;
-            user-select: none;
-            cursor: pointer;
-            color: #3E7BFA;
-        }
+    &.type-single {
+      background: #8060F029;
+      color: #6040F0;
+    }
+
+    &.type-multiple {
+      background: #0090F029;
+      color: #0090FF;
+    }
+
+    &.type-gapfilling {
+      background: #60C09029;
+      color: #60C090;
+    }
+
+    &.type-judge {
+      background: #F0A00029;
+      color: #F0A000;
+    }
+
+    &.type-shortanswer {
+      background: #E060C029;
+      color: #E060C0;
+    }
+  }
+
+  .join {
+    align-self: self-end;
+    user-select: none;
+    cursor: pointer;
+    font-weight: bold;
+    color: #6040E0;
+    font-size: 14px;
+    line-height: 32px;
+  }
+
+  .ai_warning_tip {
+    margin-top: 16px;
+    padding: 12px 16px;
+    background: rgba(124, 77, 255, 0.05);
+    border: 1px solid rgba(124, 77, 255, 0.15);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .el-icon-info {
+      color: #7C4DFF;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    span {
+      font-size: 12px;
+      color: #666;
+      line-height: 1.4;
     }
+  }
 }
 </style>