ai-question-pro 0.0.16 → 0.0.18

package/components/demo/src/main.vue

@@ -6,19 +6,19 @@
         <el-drawer :visible.sync="addShow" :direction="direction" :wrapperClosable="false" destroy-on-close>
             <template slot="title">
                 <div class="add_question_title">
-                    <span>AI出题</span>
-<!--                    <img src="../static/robot.png">-->
+                    <img src="../static/logo.png" alt="" style="width: 32px; height: 18px;"/>
+                    <span>出题</span>
                 </div>
             </template>
             <div class="add_question_body">
                 <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left">
-                    <el-form-item label="题型" prop="questionType">
+                    <el-form-item label="题目类型" prop="questionType">
 <!--                        <el-checkbox-group v-model="form.questionTypes">-->
 <!--                            <el-checkbox v-for="item in quesTypeList" :key="item.id" :label="item.id">-->
 <!--                                {{ item.name }}-->
 <!--                            </el-checkbox>-->
 <!--                        </el-checkbox-group>-->
-                      <el-radio-group v-model="form.questionType" size="medium">
+                      <el-radio-group v-model="form.questionType" >
 <!--                        <el-radio-button v-for="item in quesTypeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>-->
                         <el-radio v-for="item in quesTypeList"
                                   style="margin-right: 8px; margin-bottom: 8px"
@@ -26,38 +26,38 @@
                                   :label="item.id">{{ item.name }}</el-radio>
                       </el-radio-group>
                     </el-form-item>
-                    <el-form-item label="题目数量" prop="count">
-                        <el-input class="number_input" v-model="form.count" min="1" max="10" type="number"
-                            @input="handleInput" style="width: 20%;"></el-input>
-                        <div class="remind">(为避免您等待时间过长,一次性最多生成10道题)</div>
-                    </el-form-item>
-                    <el-form-item label="关联知识点" prop="knowledgeIds">
-<!--                        <el-cascader v-model="form.knowledgeId" :options="knowledgeList" @change="closeDrowdown"-->
-<!--                            :show-all-levels="false" ref="cascader" :props="{ checkStrictly: true, ...propFormat }"-->
-<!--                            clearable></el-cascader>-->
-                      <cy-tree-select v-model="form.knowledgeIds" filterable :data="knowledgeList"></cy-tree-select>
-                    </el-form-item>
-                    <el-form-item label="难度" prop="difficulty">
-<!--                        <el-checkbox-group v-model="form.difficultys">-->
-<!--                            <el-checkbox :label="item.id" v-for="item in difficultyList" :key="item.id">{{ item.name-->
-<!--                                }}</el-checkbox>-->
-<!--                        </el-checkbox-group>-->
+                    <el-form-item label="题目难度" prop="difficulty">
+                      <!--                        <el-checkbox-group v-model="form.difficultys">-->
+                      <!--                            <el-checkbox :label="item.id" v-for="item in difficultyList" :key="item.id">{{ item.name-->
+                      <!--                                }}</el-checkbox>-->
+                      <!--                        </el-checkbox-group>-->
                       <el-radio-group v-model="form.difficulty" size="medium">
-<!--                        <el-radio-button v-for="item in difficultyList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>-->
+                        <!--                        <el-radio-button v-for="item in difficultyList" :key="item.id" :label="item.id">{{ item.name }}</el-radio-button>-->
                         <el-radio v-for="item in difficultyList"
                                   style="margin-right: 8px; margin-bottom: 8px"
                                   :key="item.id"
                                   :label="item.id">{{ item.name }}</el-radio>
                       </el-radio-group>
                     </el-form-item>
+                    <el-form-item label="关联知识点" prop="knowledgeIds">
+                      <!--                        <el-cascader v-model="form.knowledgeId" :options="knowledgeList" @change="closeDrowdown"-->
+                      <!--                            :show-all-levels="false" ref="cascader" :props="{ checkStrictly: true, ...propFormat }"-->
+                      <!--                            clearable></el-cascader>-->
+                      <cy-tree-select v-model="form.knowledgeIds" filterable :data="knowledgeList"></cy-tree-select>
+                    </el-form-item>
+                    <el-form-item label="题目数量" prop="count">
+                        <el-input class="number_input" v-model="form.count" min="1" max="10" type="number" placeholder="请输入"
+                            @input="handleInput"></el-input>
+                        <div class="remind">(为避免您等待时间过长,一次性最多生成10道题)</div>
+                    </el-form-item>
                     <el-form-item label="自定义提示语">
-                        <el-input v-model="form.prompt" placeholder="这里可以写对于题目的要求和补充，比如：“出题内容请围绕一下知识内容：智能水利物联网是指利用物联网技术和智能化手段，对水利工程设施进行实时监测、数据采集、远程控制和智能分析，以实现对水资源的高效利用、水利设施的智能运营和管理。通过传感器、无线通信技术、云计算平台和大数据分析等技术手段，实现对水利系统各个环节的智能监测和管理，提高水资源利用效率，降低水利工程运行成本，保障水利工程安全稳定运行。”" type="textarea" :autosize="{ minRows: 10, maxRows: 10}"></el-input>
+                        <el-input v-model="form.prompt" placeholder="这里可以写对于题目的要求和补充，比如：“出题内容请围绕一下知识内容：智能水利物联网是指利用物联网技术和智能化手段，对水利工程设施进行实时监测、数据采集、远程控制和智能分析，以实现对水资源的高效利用、水利设施的智能运营和管理。通过传感器、无线通信技术、云计算平台和大数据分析等技术手段，实现对水利系统各个环节的智能监测和管理，提高水资源利用效率，降低水利工程运行成本，保障水利工程安全稳定运行。”" type="textarea" :autosize="{ minRows: 10, maxRows: 10} " maxlength="200" show-word-limit></el-input>
                     </el-form-item>
                 </el-form>
             </div>
             <div class="add_question_footer">
-                <el-button type="primary" @click="generate">生成题目</el-button>
-                <el-button @click="addShow = false">取 消</el-button>
+                <button class="button-handle button-cancel" @click="addShow = false">取 消</button>
+                <button class="button-handle button-generate-question" @click="generate">生成题目</button>
             </div>
         </el-drawer>
         <el-dialog :visible.sync="showQues" :close-on-click-modal="false">
@@ -453,128 +453,204 @@ export default {
 }   
 </script>
 <style lang="scss" scoped>
-::v-deep.ai_contain {
-    display: inline-block;
+.ai_contain {
+  display: inline-block;
 
-    .el-drawer__header {
-        padding-top: 0;
-        height: 80px;
-        background-image: url('../static/addQuesTitBg.png');
-        background-size: 100% 100%;
+  ::v-deep {
+    .el-drawer.rtl {
+      border-radius: 15px 0 0 15px;
     }
 
-    .el-drawer__body {
-        padding: 0 20px;
+    .el-icon-close:before {
+      color: #0e0e0e;
+      font-weight: bold;
+      font-size: 16px;
+    }
+
+    .el-drawer__header {
+      padding-top: 0;
+      height: 64px;
+      background:
+          linear-gradient(to bottom, rgba(255,255,255,0), white), /* 底部渐变到白色 */
+          linear-gradient(to right, #BCB9F4, #D5C6F8, #E6C6F9);        /* 从左到右的渐变色带 */
     }
 
     .el-drawer__body {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+      padding: 0 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
     }
 
     .el-form-item__label {
-        font-weight: 700;
+      font-weight: 700;
     }
 
     .el-input__inner {
-        padding-right: 0;
+      padding-right: 0;
+      border-radius: 25px;
     }
 
     .el-cascader {
-        width: 100%;
+      width: 100%;
     }
 
-    .ai_button {
-        cursor: pointer;
-        user-select: none;
-        padding: 9px 6px;
-        position: relative;
-        color: #fff;
-        background-color: #456BEA;
-        border-radius: 4px;
-        border: 1px solid #456BEA;
+    .el-radio__inner {
+      width: 24px;
+      height: 24px;
     }
 
-    .add_question_title {
-        display: flex;
-        align-items: center;
-        font-size: 23px;
-        color: #333333;
+    .el-radio__input.is-checked+.el-radio__label {
+      color: #606266;
     }
 
-    .add_question_body {
-        .remind {
-            font-size: 14px;
-            color: #9BA1AE;
-        }
+    .el-radio__input.is-checked .el-radio__inner {
+      border-color: #7050D0;
+      background: #7050D0;
     }
 
-    .add_question_footer {
-        padding: 20px 0;
-        border-top: 1px solid #E6E6E6;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    .el-radio__input.is-checked .el-radio__inner::after {
+      display: none;
+    }
+
+    /* 使用Element UI的对号图标 */
+    .el-radio__input.is-checked .el-radio__inner::before {
+      font-family: "element-icons", serif;
+      content: "\e6da"; /* Element UI check图标的Unicode */
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 12px;
+      color: #fff;
+    }
+
+    .el-select .el-input__inner {
+      border-radius: 25px;
+    }
+
+    .el-textarea__inner {
+      border-radius: 16px;
     }
 
     .el-loading-mask {
-        border-radius: 8px;
+      border-radius: 8px;
     }
+  }
 
-    .el-dialog {
-        background: linear-gradient(327deg, #DBECFE 0%, #F9FCFF 100%);
-        border-radius: 8px;
-
-        .question_title {
-            display: flex;
-            align-items: center;
-            font-weight: 700;
-            font-size: 23px;
-            color: #333333;
-
-            img {
-                margin-right: 10px;
-                width: 35px;
-                height: 40px;
-            }
-        }
+  .button-handle {
+    width: 168px;
+    height: 48px;
+    font-size: 14px;
+    border-radius: 25px;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+  }
 
-        .question_body {
-            padding: 10px;
-            min-height: 500px;
-            max-height: 500px;
-            overflow: auto;
+  .button-generate-question {
+    background: linear-gradient(to bottom, #7050D0, #2828E0);
+  }
 
-            &::-webkit-scrollbar {
-                width: 4px;
-            }
+  .button-cancel {
+    border: 1px solid #2828E0;
+    background: transparent;
+    color: #3030C0;
+  }
 
-            &::-webkit-scrollbar-button {
-                display: none;
-            }
+  .ai_button {
+    cursor: pointer;
+    user-select: none;
+    padding: 9px 6px;
+    position: relative;
+    color: #fff;
+    background-color: #456BEA;
+    border-radius: 4px;
+    border: 1px solid #456BEA;
+  }
 
-            &::-webkit-scrollbar-track-piece {
-                background-color: transparent;
-            }
+  .add_question_title {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #333333;
+    font-weight: bold;
+    gap: 5px;
+  }
 
-            &::-webkit-scrollbar-thumb {
-                border-radius: 3px;
-                background: rgba(0, 0, 0, .5);
-            }
-        }
+  .add_question_body {
+    .remind {
+      font-size: 14px;
+      color: #9BA1AE;
+    }
+  }
 
-        .question_footer {
-            display: flex;
-            justify-content: space-between;
+  .add_question_footer {
+    padding: 20px 0;
+    border-top: 1px solid #E6E6E6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+  }
+}
 
-            .question_remind {
-                align-self: flex-end;
-                font-size: 14px;
-                color: #9BA1AE;
-            }
-        }
+/* 对话框样式需要全局作用域，因为它会脱离当前组件 */
+</style>
+
+
+<style lang="scss">
+.ai-custom-dialog.el-dialog {
+  background: linear-gradient(327deg, #DBECFE 0%, #F9FCFF 100%);
+  border-radius: 8px;
+
+  .question_title {
+    display: flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 23px;
+    color: #333333;
+
+    img {
+      margin-right: 10px;
+      width: 35px;
+      height: 40px;
+    }
+  }
+
+  .question_body {
+    padding: 10px;
+    min-height: 500px;
+    max-height: 500px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-button {
+      display: none;
+    }
+
+    &::-webkit-scrollbar-track-piece {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background: rgba(0, 0, 0, .5);
+    }
+  }
+
+  .question_footer {
+    display: flex;
+    justify-content: space-between;
 
+    .question_remind {
+      align-self: flex-end;
+      font-size: 14px;
+      color: #9BA1AE;
     }
+  }
 }
 </style>

package/components/demo/src/questionItem.vue

@@ -26,7 +26,7 @@
         </div>
         <div class="question_contain_parse">
             <span class="question_contain_parse_analysis">题目解析: {{ detail.analysis }}</span>
-            <span class="join" @click="join">加入题库</span>
+            <span v-if="!joined" class="join" @click="join">加入题库</span>
         </div>
     </div>
 </template>
@@ -61,7 +61,8 @@ export default {
                 { name: 'G', id: 6 },
                 { name: 'H', id: 7 },
                 { name: 'I', id: 8 },
-            ]
+            ],
+          joined: false
         }
     },
     methods: {
@@ -70,6 +71,7 @@ export default {
         },
         join(e) {
             this.$emit('join', this.detail)
+            this.joined = true;
         }
     }
 }