ai-question-pro 0.0.20 → 0.0.21

package/components/demo/src/main.vue

@@ -1,336 +1,597 @@
 <template>
-    <div class="ai_contain">
-        <slot>
-            <span class="ai_button" @click="showAddQuestion">AI出题</span>
-        </slot>
-        <el-drawer :visible.sync="addShow" :direction="direction" :wrapperClosable="false" destroy-on-close>
-            <template slot="title">
-                <div class="add_question_title">
-                    <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-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" >
-<!--                        <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"
-                                  :key="item.id"
-                                  :label="item.id">{{ item.name }}</el-radio>
-                      </el-radio-group>
-                    </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-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 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} " maxlength="200" show-word-limit></el-input>
-                    </el-form-item>
-                </el-form>
+  <div class="ai_contain">
+    <slot>
+      <span class="ai_button" @click="showAddQuestion">AI出题</span>
+    </slot>
+    <el-drawer :visible.sync="addShow" :direction="direction" :wrapperClosable="false" destroy-on-close>
+      <template slot="title">
+        <div class="add_question_title">
+          <img src="../static/logo.png" alt="" style="width: 32px; height: 18px;"/>
+          <span>出题</span>
+        </div>
+        <div class="ai-bot-switch-wrap" style="position: absolute; left: 120px">
+          <div class="ai-bot-switch" @click="dropdownVisible = !dropdownVisible">
+            <img src="../static/aiBot-icon.png" alt="" style="width: 24px; height: 24px">
+            <span class="ai-bot-label">
+                    {{ currentBot === 'course' ? '课程智能体' : '通义千问' }}
+                  </span>
+            <img src="../static/check-icon.png" alt="" style="width: 12px; height: 12px">
+          </div>
+          <div
+              v-if="dropdownVisible"
+              class="ai-bot-dropdown"
+              @mousedown.prevent
+              style="position: absolute; z-index: 1000; min-width: 20%;"
+          >
+            <div
+                class="ai-bot-dropdown-item"
+                :class="{ active: currentBot === 'tongyi' }"
+                @click="selectBot('tongyi')"
+            >通义千问
             </div>
-            <div class="add_question_footer">
-                <button class="button-handle button-cancel" @click="addShow = false">取 消</button>
-                <button class="button-handle button-generate-question" @click="generate">生成题目</button>
+<!--            <div-->
+<!--                v-if="courseId"-->
+<!--                class="ai-bot-dropdown-item"-->
+<!--                :class="{ active: currentBot === 'course' }"-->
+<!--                @click="selectBot('course')"-->
+<!--            >课程智能体-->
+<!--            </div>-->
+          </div>
+        </div>
+      </template>
+      <div class="add_question_body">
+        <div class="question-type-header">
+          <span class="required-mark">*</span>
+          <span class="section-title">题目类型：</span>
+          <span class="tip-text">(为避免您等待时间过长，一次性最多生成10道题)</span>
+        </div>
+
+        <!-- 题目类型列表 -->
+        <div class="question-type-list">
+          <div
+              v-for="(item, index) in quesTypeList"
+              :key="item.id"
+              class="question-type-item"
+              :class="{ 'disabled': !form.selectedTypes[item.id] }"
+          >
+            <div class="type-left">
+              <el-checkbox
+                  v-model="form.selectedTypes[item.id]"
+                  class="type-checkbox"
+                  @change="handleTypeChange(item.id)"
+              ></el-checkbox>
+              <span class="type-name" :class="getTypeClass(item.id)">{{ item.name }}</span>
             </div>
-        </el-drawer>
-        <el-dialog :visible.sync="showQues" :close-on-click-modal="false">
-            <template slot="title">
-                <div class="question_title">
-                    <img src="../static/robot.png">
-                    <span>{{ title }}</span>
-                </div>
-            </template>
-            <div class="question_body" ref="generateDiv">
-                <questionItem v-if="aiResponse.questions && aiResponse.questions.length > 0" @agree="agree" @join="join"
-                    v-for="item, idx in aiResponse.questions" :key="idx" :detail="item" :index="idx">
-                </questionItem>
+
+            <div class="type-right">
+              <el-input
+                  v-model="form.typeCounts[item.id]"
+                  size="small"
+                  class="count-input"
+                  placeholder="请输入生成数量"
+                  min="1"
+                  max="10"
+                  @input="handleCountInput(item.id)"
+              ></el-input>
+              <div class="slider-container" :class="{ 'disabled': !form.selectedTypes[item.id] }">
+                <el-slider
+                    v-model="form.typeDifficulties[item.id]"
+                    :min="0"
+                    :max="4"
+                    :disabled="!form.selectedTypes[item.id]"
+                    class="difficulty-slider"
+                    :show-tooltip="false"
+                ></el-slider>
+              </div>
+              <span class="difficulty-label" :class="{ 'disabled': !form.selectedTypes[item.id] }">
+                {{ form.selectedTypes[item.id] ? getDifficultyLabel(form.typeDifficulties[item.id]) : '题目难度' }}
+              </span>
             </div>
-            <div class="question_footer" slot="footer">
-                <span class="question_remind">题目内容由人工智能大模型生成,请您审慎核查,确认内容准确,无不妥后再使用</span>
-                <el-button type="primary" @click="rebuild" :disabled="rebuildFlag">重新生成</el-button>
+          </div>
+        </div>
+
+        <!-- 关联知识点 -->
+        <div class="knowledge-section">
+          <div class="section-header">
+            <span class="required-mark">*</span>
+            <span class="section-title">关联知识点：</span>
+            <span class="tip-text">(最多可以关联1个知识点)</span>
+          </div>
+          <div class="knowledge-input">
+            <cy-tree-select
+                v-model="form.knowledgeIds"
+                filterable
+                :data="knowledgeList"
+                placeholder="请选择"
+            ></cy-tree-select>
+            <img src="../static/link-icon.png" class="el-icon-link knowledge-icon" alt=""/>
+          </div>
+        </div>
+
+        <!-- 自定义提示语 -->
+        <div class="prompt-section">
+          <div class="section-header">
+            <span class="section-title" style="margin-left: 15px;">自定义提示语：</span>
+          </div>
+          <el-input
+              v-model="form.prompt"
+              type="textarea"
+              :autosize="{ minRows: 8, maxRows: 10 }"
+              maxlength="200"
+              show-word-limit
+              placeholder="这里可以写对于题目的要求和补充，比如：出题内容请围绕以下知识内容：智能水利物联网是指利用物联网技术和智能化手段，对水利工程设施进行实时监测、数据采集、远程控制和智能分析，以实现对水资源的高效利用、水利设施的智能运营和管理。通过传感器、无线通信技术、云计算平台和大数据分析等技术手段，实现对水利系统各个环节的智能监测和管理，提高水资源利用效率，降低水利工程运行成本，保障水利工程安全稳定运行。"
+              class="prompt-textarea"
+              resize="none"
+          ></el-input>
+        </div>
+      </div>
+      <div class="add_question_footer">
+        <button class="button-handle button-cancel" @click="addShow = false">取 消</button>
+        <button class="button-handle button-generate-question" @click="generate">
+          <img src="../static/generate-question-icon.png" style="width: 24px; height: 24px;" alt=""></img>
+          生成题目
+        </button>
+      </div>
+    </el-drawer>
+    <el-drawer :visible.sync="showQues" :wrapperClosable="false" destroy-on-close class="question-result-drawer">
+      <template slot="title">
+        <div class="add_question_title">
+          <img src="../static/logo.png" alt="" style="width: 32px; height: 18px;"/>
+          <span>出题</span>
+        </div>
+      </template>
+      <div class="drawer_content_wrapper">
+        <div class="question_summary_warp">
+          <div class="question_summary">
+          <span class="summary_text">共为您生成了 {{
+              aiResponse.questions ? aiResponse.questions.length : 0
+            }} 道题目</span>
+            <div class="question_types_summary">
+            <span v-for="typeInfo in getQuestionTypeSummary()" :key="typeInfo.id" class="type_item">
+              {{ typeInfo.name }} <span class="summary_text">{{ typeInfo.count }}</span> 道
+            </span>
             </div>
-        </el-dialog>
-    </div>
+          </div>
+          <div class="question_summary_button">
+            <button class="button-handle button-cancel" @click="rebuild">重新生成</button>
+            <button class="button-handle button-generate-question" @click="addAllToBank">
+              加入题库
+            </button>
+          </div>
+        </div>
+        <div class="question_body" ref="generateDiv">
+          <questionItem v-if="aiResponse.questions && aiResponse.questions.length > 0" @agree="agree" @join="join"
+                        @selectionChange="handleQuestionSelection"
+                        :isJoined="joinedQuestions.includes(idx)"
+                        :ref="`questionItem_${idx}`"
+                        v-for="item, idx in aiResponse.questions" :key="idx" :detail="item" :index="idx">
+          </questionItem>
+        </div>
+        <div class="question_footer_fixed">
+          <div class="footer_warning">
+            <img src="../static/warning-icon.png" class="el-icon-info" alt=""/>
+            <span class="question_remind">题目内容由人工智能大模型生成，请您审慎核查，确认内容准确，无不妥后再使用</span>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
 </template>
 <script>
 import questionItem from './questionItem.vue'
 import CyTreeSelect from './CyTreeSelect.vue'
-// import {
-//     Button, Drawer, Form, FormItem, Checkbox, CheckboxGroup, Input, Cascader, Dialog, Loading, this.$message
-// } from "element-ui"
-import { getAiQuestion, agreeQuestion, createBurial, checkVersion } from '../api/index'
+import {getAiQuestion, agreeQuestion, createBurial, checkVersion} from '../api/index'
 import Cookies from 'js-cookie';
+import {Image} from 'element-ui';
+
 export default {
-    name: 'aiQuestion',
-    components: {
-        // 'el-button': Button,
-        // 'el-drawer': Drawer,
-        // 'el-form': Form,
-        // 'el-form-item': FormItem,
-        // 'el-checkbox': Checkbox,
-        // 'el-checkbox-group': CheckboxGroup,
-        // 'el-input': Input,
-        // 'el-cascader': Cascader,
-        // 'el-dialog': Dialog,
-        questionItem,
-      CyTreeSelect
+  name: 'aiQuestion',
+  components: {
+    questionItem,
+    CyTreeSelect
+  },
+  props: {
+    top: {
+      type: [String, Number],
+      default: 0
     },
-    props: {
-        top: {
-            type: [String, Number],
-            default: 0
+    knowledgeList: {
+      type: Array,
+      default: () => [
+        {
+          id: '1',
+          label: '大学英语',
+          children: [
+            {
+              id: '1-1',
+              label: '用英语打招呼',
+            }
+          ]
         },
-        knowledgeList: {
-            type: Array,
-            default: () => [
-                {
-                    id: '1',
-                    label: '大学英语',
-                    children: [
-                        {
-                            id: '1-1',
-                            label: '用英语打招呼',
-                        }
-                    ]
-                },
-                {
-                  id: '2',
-                    label: '大学物理',
-                    children: [
-                        {
-                          id: '2-1',
-                            label: '结构力学',
-                            children: [
-                                {
-                                  id: '2-1-1',
-                                    label: '力的构成',
-                                }
-                            ]
-                        },
-                        {
-                          id: '2-2',
-                            label: '流体力学',
-                        }
-                    ]
-                },
+        {
+          id: '2',
+          label: '大学物理',
+          children: [
+            {
+              id: '2-1',
+              label: '结构力学',
+              children: [
                 {
-                  id: '3',
-                    label: '高数'
+                  id: '2-1-1',
+                  label: '力的构成',
                 }
-            ]
+              ]
+            },
+            {
+              id: '2-2',
+              label: '流体力学',
+            }
+          ]
         },
-        propFormat: {
-            type: Object,
-            default: () => ({
-                id: 'id',
-                label: 'label',
-                children: 'children'
-            })
+        {
+          id: '3',
+          label: '高数'
+        }
+      ]
+    },
+    propFormat: {
+      type: Object,
+      default: () => ({
+        id: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    },
+    businessSource: {
+      type: String,
+      default: "0",
+    },
+    courseId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showQues: false,
+      addShow: false,
+      generateCount: 0,
+      direction: 'rtl',
+      rebuildFlag: true,
+      form: {
+        selectedTypes: {
+          single: false,
+          multiple: false,
+          judge: false,
+          gapfilling: false,
+          shortanswer: false
         },
-        businessSource: {
-          type: String,
-          default: "0", // 默认值为空字符串
+        typeCounts: {
+          single: null,
+          multiple: null,
+          judge: null,
+          gapfilling: null,
+          shortanswer: null
         },
-        courseId: {
-          type: String,
-          default: ''
-        }
+        typeDifficulties: {
+          single: 0,
+          multiple: 0,
+          judge: 0,
+          gapfilling: 0,
+          shortanswer: 0
+        },
+        knowledgeIds: '',
+        knowledgeId: [],
+        knowledge: [],
+        prompt: ''
+      },
+      quesTypeList: [
+        {name: '单选题', id: 'single'},
+        {name: '多选题', id: 'multiple'},
+        {name: '填空题', id: 'gapfilling'},
+        {name: '判断题', id: 'judge'},
+        {name: '简答题', id: 'shortanswer'},
+      ],
+      difficultyList: [
+        {name: '超级简单', id: 0},
+        {name: '简单', id: 1},
+        {name: '一般', id: 2},
+        {name: '困难', id: 3},
+        {name: '非常困难', id: 4},
+      ],
+      loading: null,
+      aiResponse: {},
+      title: '单选题',
+      dropdownVisible: false,
+      currentBot: 'tongyi',
+      selectedQuestions: [], // 存储选中的题目
+      joinedQuestions: [], // 存储已加入题库的题目索引
+    }
+  },
+  watch: {
+    showQues(e) {
+      if (!e) {
+        this.aiResponse = {}
+      }
+    }
+  },
+  mounted() {
+    let doc = document.getElementsByClassName('rtl')[0]
+    if (this.top) {
+      doc.style.top = this.top + 'px'
+      doc.style.height = `calc( 100% - ${this.top}px)`
+    }
+    //国窖平台没有简答题
+    if (this.businessSource === '4') {
+      this.quesTypeList = [
+        {name: '单选题', id: 'single'},
+        {name: '多选题', id: 'multiple'},
+        {name: '判断题', id: 'judge'},
+        {name: '填空题', id: 'gapfilling'},
+      ]
+    }
+  },
+  methods: {
+    // 处理题目类型选择变化
+    handleTypeChange(typeId) {
+      // 可以在这里添加额外的逻辑
     },
-    data() {
-        return {
-            showQues: false,
-            addShow: false,
-            generateCount: 0,
-            direction: 'rtl',
-            rebuildFlag: true,
-            form: {
-                questionTypes: [],
-                questionType: null,
-                count: 1,
-                knowledgeId: [],
-                knowledgeIds: '',
-                difficultys: [],
-                difficulty: null,
-                knowledge: []
-            },
-            quesTypeList: [
-                { name: '单选题', id: 'single' },
-                { name: '多选题', id: 'multiple' },
-                { name: '判断题', id: 'judge' },
-                { name: '填空题', id: 'gapfilling' },
-                { name: '简答题', id: 'shortanswer' },
-            ],
-            difficultyList: [
-                { name: '非常简单', id: 0 },
-                { name: '简单', id: 1 },
-                { name: '一般', id: 2 },
-                { name: '困难', id: 3 },
-                { name: '非常困难', id: 4 },
-            ],
-            rules: {
-                questionTypes: [{ required: true, message: '此项必填', trigger: 'change' }],
-                questionType: [{ required: true, message: '此项必填', trigger: 'change' }],
-                count: [{ required: true, message: '此项必填', trigger: 'blur' }],
-                knowledgeIds: [{ required: true, message: '此项必填', trigger: 'change' }],
-                difficultys: [{ required: true, message: '此项必填', trigger: 'change' }],
-                difficulty: [{ required: true, message: '此项必填', trigger: 'change' }],
-            },
-            loading: null,
-            aiResponse: {},
-            title: '单选题'
-        }
+
+    // 处理数量变化，自动选中题目类型
+    handleCountChange(typeId) {
+      if (this.form.typeCounts[typeId] && this.form.typeCounts[typeId] > 0) {
+        this.form.selectedTypes[typeId] = true;
+      }
     },
-    watch: {
-        showQues(e) {
-            if (!e) {
-                this.aiResponse = {}
-            }
-        }
+
+    // 处理难度变化，自动选中题目类型
+    handleDifficultyChange(typeId) {
+      this.form.selectedTypes[typeId] = true;
     },
-    mounted() {
-        let doc = document.getElementsByClassName('rtl')[0]
-        if (this.top) {
-            doc.style.top = this.top + 'px'
-            doc.style.height = `calc( 100% - ${this.top}px)`
-        }
-        //国窖平台没有简答题
-        if(this.businessSource === '4'){
-          this.quesTypeList = [
-            { name: '单选题', id: 'single' },
-            { name: '多选题', id: 'multiple' },
-            { name: '判断题', id: 'judge' },
-            { name: '填空题', id: 'gapfilling' },
-          ]
-        }
+
+    // 处理数量输入验证
+    handleCountInput(typeId) {
+      let inputValue = this.form.typeCounts[typeId];
+
+      // 如果输入为空，允许为空
+      if (inputValue === '' || inputValue === null || inputValue === undefined) {
+        return;
+      }
+
+      let value = parseInt(inputValue);
+      if (isNaN(value) || value < 1) {
+        this.form.typeCounts[typeId] = 1;
+      } else if (value > 10) {
+        this.form.typeCounts[typeId] = 10;
+      } else {
+        this.form.typeCounts[typeId] = value;
+      }
     },
-    methods: {
-        handleInput(value) {
-            // value = parseFloat(value);
-            value = parseInt(value);
-            if (value < 1) {
-                this.form.count = 1;
-            } else if (value > 10) {
-                this.form.count = 10;
-            } else {
-                this.form.count = value;
-            }
-        },
-        //选中节点后关闭下拉框
-        closeDrowdown(e) {
-            this.$nextTick(() => {
-                this.$refs.cascader.dropDownVisible = false
-            });
+
+    // 获取题目类型的样式类
+    getTypeClass(typeId) {
+      const classMap = {
+        single: 'type-single',
+        multiple: 'type-multiple',
+        gapfilling: 'type-gapfilling',
+        judge: 'type-judge',
+        shortanswer: 'type-shortanswer'
+      }
+      return classMap[typeId] || ''
+    },
+
+    // 获取难度标签
+    getDifficultyLabel(difficultyId) {
+      const difficulty = this.difficultyList.find(item => item.id === difficultyId)
+      return difficulty ? difficulty.name : '一般'
+    },
+
+    //展示右边弹框
+    showAddQuestion() {
+      if (!Cookies.get("AiToken")) {
+        return this.$message.warning('未获取到登录信息,请重新登录')
+      }
+      this.resetForm()
+      this.addShow = !this.addShow
+      createBurial({
+        businessType: 3,
+        operatorType: 0,
+        businessSource: this.businessSource,
+        courseId: this.courseId
+      })
+    },
+
+    // 重置表单
+    resetForm() {
+      this.form = {
+        selectedTypes: {
+          single: false,
+          multiple: false,
+          judge: false,
+          gapfilling: false,
+          shortanswer: false
         },
-        //展示右边弹框
-        showAddQuestion() {
-            if (!Cookies.get("AiToken")) {
-                return this.$message.warning('未获取到登录信息,请重新登录')
-            }
-            this.form = {
-                questionTypes: [],
-                questionType: null,
-                count: 1,
-                knowledgeId: [],
-                knowledgeIds: '',
-                difficultys: [],
-                difficulty: null,
-                knowledge: []
-            }
-            this.addShow = !this.addShow
-            createBurial({
-                businessType: 3,
-                operatorType: 0,
-                businessSource:this.businessSource,
-                courseId: this.courseId
-            })
+        typeCounts: {
+          single: null,
+          multiple: null,
+          judge: null,
+          gapfilling: null,
+          shortanswer: null
         },
-        //生成题目
-        generate() {
-            this.$refs.form.validate(valid => {
-              if (valid) {
-                    this.form.knowledgeId = this.form.knowledgeIds.split(',');
-                    this.form.knowledgeId.forEach(item => {
-                        this.getKnowledgeName(item, this.knowledgeList)
-                    })
-                    this.form.questionTypes.push(this.form.questionType);
-                    this.form.difficultys.push(this.form.difficulty);
-                    if (this.form.questionTypes.length > 1) {
-                        this.title = '多类题'
-                    } else {
-                        this.title = this.quesTypeList.find(item => item.id == this.form.questionTypes[0]).name
-                    }
-                    this.showQues = true
-                    this.addShow = !this.addShow
-                    this.sendPost();
-                    this.$emit("questionCount", this.form.count);
-                }
-            })
+        typeDifficulties: {
+          single: 0,
+          multiple: 0,
+          judge: 0,
+          gapfilling: 0,
+          shortanswer: 0
         },
-        //重新生成
-        rebuild() {
-            this.sendPost()
+        knowledgeIds: '',
+        knowledgeId: [],
+        knowledge: [],
+        prompt: ''
+      }
+    },
+
+    //生成题目
+    generate() {
+      // 验证是否选择了题目类型
+      const selectedTypes = Object.keys(this.form.selectedTypes).filter(key => this.form.selectedTypes[key])
+      if (selectedTypes.length === 0) {
+        return this.$message.warning('请至少选择一种题目类型')
+      }
+
+      // 验证是否选择了知识点
+      if (!this.form.knowledgeIds) {
+        return this.$message.warning('请选择关联知识点')
+      }
+
+      // 处理知识点数据
+      this.form.knowledgeId = this.form.knowledgeIds.split(',');
+      this.form.knowledgeId.forEach(item => {
+        this.getKnowledgeName(item, this.knowledgeList)
+      })
+
+      // 设置标题
+      if (selectedTypes.length > 1) {
+        this.title = '多类题'
+      } else {
+        this.title = this.quesTypeList.find(item => item.id === selectedTypes[0]).name
+      }
+
+      this.showQues = true
+      this.addShow = !this.addShow
+      this.sendPost();
+
+      // 计算总题目数量
+      const totalCount = selectedTypes.reduce((sum, type) => sum + this.form.typeCounts[type], 0)
+      this.$emit("questionCount", totalCount);
+    },
+
+    //重新生成
+    rebuild() {
+      // 重新生成时清空已加入题库的状态
+      this.joinedQuestions = [];
+      this.selectedQuestions = [];
+      this.sendPost()
+    },
+
+    showGenerateResult() {
+      this.generateCount++;
+      const selectedTypes = Object.keys(this.form.selectedTypes).filter(key => this.form.selectedTypes[key])
+      const totalCount = selectedTypes.reduce((sum, type) => sum + this.form.typeCounts[type], 0)
+
+      if (this.generateCount == totalCount) {
+        this.$message.success('题目(' + totalCount + '道)全部生成完毕！');
+        this.rebuildFlag = false;
+      } else {
+        this.$message.success('生成' + this.generateCount + '道题目成功');
+      }
+      this.$nextTick(() => {
+        const generateDiv = this.$refs.generateDiv;
+        generateDiv.scrollTop = generateDiv.scrollHeight;
+      });
+    },
+
+    reSend() {
+      this.loading && this.loading.close()
+      this.loading = this.$loading({
+        target: '.el-dialog',
+        text: 'AI生成中...'
+      });
+
+      const selectedTypes = Object.keys(this.form.selectedTypes).filter(key => this.form.selectedTypes[key])
+      const questionTypes = selectedTypes
+      const difficultys = selectedTypes.map(type => this.form.typeDifficulties[type])
+
+      let obj = {
+        modelType: 'aliyun',
+        questionAddCmd: {
+          questionTypes: questionTypes,
+          count: 1,
+          knowledge: this.form.knowledge.join(' '),
+          knowledgeId: this.form.knowledgeId[this.form.knowledgeId.length - 1],
+          difficultys: difficultys,
+          prompt: this.form.prompt
         },
-        showGenerateResult(){
-          this.generateCount++;
-          if(this.generateCount == this.form.count){
-            this.$message.success( '题目(' + this.form.count + '道)全部生成完毕！');
-            this.rebuildFlag = false;
+        sessionId: this.aiResponse.sessionId ? this.aiResponse.sessionId : '',
+        businessSource: this.businessSource,
+        courseId: this.courseId,
+      }
+
+      getAiQuestion(obj).then(res => {
+        if (res.success) {
+          this.loading && this.loading.close()
+          if (res.data && res.data.questions && res.data.questions.length > 0) {
+            if (this.aiResponse.questions && this.aiResponse.questions.length > 0) {
+              this.aiResponse.questions.push(res.data.questions[0]);
+            } else {
+              this.aiResponse = res.data;
+            }
+            this.$set(res.data.questions[0], 'evaluate', 0)
+            this.showGenerateResult();
           } else {
-            this.$message.success('生成' + this.generateCount + '道题目成功');
+            this.$message.warning('题目获取失败,重新生成中...')
+            return this.reSend()
           }
-          this.$nextTick(() => {
-            const generateDiv = this.$refs.generateDiv;
-            generateDiv.scrollTop = generateDiv.scrollHeight;
-          });
-        },
-        reSend() {
+        } else {
           this.loading && this.loading.close()
-          this.loading = this.$loading({
-            target: '.el-dialog',
-            text: 'AI生成中...'
-          });
+          this.$message.warning('题目获取失败')
+          this.rebuildFlag = false;
+        }
+      }).catch(error => {
+        console.log("error:" + error);
+        this.loading && this.loading.close()
+        this.$message.warning('题目获取失败')
+        this.rebuildFlag = false;
+      })
+    },
+
+    //发送请求
+    sendPost() {
+      checkVersion(this.businessSource).then(res => {
+        console.log(res);
+        if (res.errCode === '403') {
+          this.$message.warning(res.errMessage)
+        } else {
+          this.postQuestion();
+        }
+      });
+    },
+
+    postQuestion() {
+      this.rebuildFlag = true;
+      this.generateCount = 0;
+      this.aiResponse = {}
+      this.loading && this.loading.close()
+      this.loading = this.$loading({
+        target: '.el-dialog',
+        text: 'AI生成中...'
+      });
+
+      const selectedTypes = Object.keys(this.form.selectedTypes).filter(key => this.form.selectedTypes[key])
+
+      // 按题型分别生成题目
+      selectedTypes.forEach(type => {
+        const count = this.form.typeCounts[type] || 1;
+        const difficulty = this.form.typeDifficulties[type];
+
+        // 为每种题型生成指定数量的题目
+        for (let i = 0; i < count; i++) {
           let obj = {
             modelType: 'aliyun',
             questionAddCmd: {
-              questionTypes: this.form.questionTypes,
-              // count: this.form.count,
+              questionTypes: [type], // 单个题型
               count: 1,
               knowledge: this.form.knowledge.join(' '),
               knowledgeId: this.form.knowledgeId[this.form.knowledgeId.length - 1],
-              difficultys: this.form.difficultys,
+              difficultys: [difficulty], // 对应的难度
               prompt: this.form.prompt
             },
             sessionId: this.aiResponse.sessionId ? this.aiResponse.sessionId : '',
-            businessSource:this.businessSource
-
+            businessSource: this.businessSource,
+            courseId: this.courseId,
           }
+          
           getAiQuestion(obj).then(res => {
             if (res.success) {
               this.loading && this.loading.close()
@@ -341,6 +602,8 @@ export default {
                   this.aiResponse = res.data;
                 }
                 this.$set(res.data.questions[0], 'evaluate', 0)
+                // 设置题目类型，便于后续统计
+                this.$set(res.data.questions[0], 'type', type)
                 this.showGenerateResult();
               } else {
                 this.$message.warning('题目获取失败,重新生成中...')
@@ -357,187 +620,218 @@ export default {
             this.$message.warning('题目获取失败')
             this.rebuildFlag = false;
           })
-        },
-        //发送请求
-        sendPost() {
-            checkVersion(this.businessSource).then(res => {
-              console.log(res);
-                if (res.errCode === '403') {
-                    this.$message.warning(res.errMessage)
-                } else {
-                    this.postQuestion();
-                }
-            });
-          // this.postQuestion();
-        },
-        postQuestion() {
-            this.rebuildFlag = true;
-            this.generateCount = 0;
-            this.aiResponse = {}
-            this.loading && this.loading.close()
-            this.loading = this.$loading({
-                target: '.el-dialog',
-                text: 'AI生成中...'
-            });
-            for(let i = 0; i<this.form.count; i++){
-                let obj = {
-                    modelType: 'aliyun',
-                    questionAddCmd: {
-                        questionTypes: this.form.questionTypes,
-                        // count: this.form.count,
-                        count: 1,
-                        knowledge: this.form.knowledge.join(' '),
-                        knowledgeId: this.form.knowledgeId[this.form.knowledgeId.length - 1],
-                        difficultys: this.form.difficultys,
-                        prompt: this.form.prompt
-                    },
-                    sessionId: this.aiResponse.sessionId ? this.aiResponse.sessionId : '',
-                    businessSource:this.businessSource
-                }
-                getAiQuestion(obj).then(res => {
-                    // console.log("questions obj is :" + JSON.stringify(res.data.questions));
-                    // console.log("res is :" + JSON.stringify(res));
-                    if (res.success) {
-                        this.loading && this.loading.close()
-                        // this.aiResponse = {}
-                        // this.aiResponse = res.data || {}
-                        if (res.data && res.data.questions && res.data.questions.length > 0) {
-                            // this.aiResponse.questions.forEach(item => {
-                            //   this.$set(item, 'evaluate', 0)
-                            // })
-                            if (this.aiResponse.questions && this.aiResponse.questions.length > 0) {
-                                this.aiResponse.questions.push(res.data.questions[0]);
-                            } else {
-                                this.aiResponse = res.data;
-                            }
-                            this.$set(res.data.questions[0], 'evaluate', 0)
-                            this.showGenerateResult();
-                        } else {
-                            this.$message.warning('题目获取失败,重新生成中...')
-                            return this.reSend()
-                        }
-                    } else {
-                        this.loading && this.loading.close()
-                        this.$message.warning('题目获取失败')
-                        this.rebuildFlag = false;
-                    }
-                }).catch(error => {
-                    console.log("error:" + error);
-                    this.loading && this.loading.close()
-                    this.$message.warning('题目获取失败')
-                    this.rebuildFlag = false;
-                })
-            }
-        },
-        //获取知识点名称
-        getKnowledgeName(e, array) {
-            array.forEach(item => {
-                if (e == item.id) {
-                    return this.form.knowledge.push(item.label)
-                } else if (item.children && item.children.length > 0) {
-                    this.getKnowledgeName(e, item.children)
-                }
-            });
-        },
-        //点赞
-        agree(e, j) {
-            this.aiResponse.questions[e].evaluate = j
-            let obj = {
-                modelType: 'aliyun',
-                ...this.aiResponse
-            }
-            agreeQuestion(obj).then(res => {
+        }
+      });
+    },
 
-            }).catch(error => {
-                console.log(error);
-            })
-        },
-        //加入题库
-        join(e) {
-            this.$emit('joinQuestionBank', { ...e, knowledgePointsId: this.form.knowledgeId[this.form.knowledgeId.length - 1] })
+    //获取知识点名称
+    getKnowledgeName(e, array) {
+      array.forEach(item => {
+        if (e == item.id) {
+          return this.form.knowledge.push(item.label)
+        } else if (item.children && item.children.length > 0) {
+          this.getKnowledgeName(e, item.children)
         }
-    }
-}   
+      });
+    },
+
+    //点赞
+    agree(e, j) {
+      this.aiResponse.questions[e].evaluate = j
+      let obj = {
+        modelType: 'aliyun',
+        ...this.aiResponse
+      }
+      agreeQuestion(obj).then(res => {
+        // 处理响应
+      }).catch(error => {
+        console.log(error);
+      })
+    },
+
+    //加入题库
+    join(e) {
+      this.$emit('joinQuestionBank', {...e, knowledgePointsId: this.form.knowledgeId[this.form.knowledgeId.length - 1]})
+      
+      // 当单个题目加入题库后，从选中列表中移除该题目
+      const questionIndex = this.aiResponse.questions.findIndex(q => q === e);
+      if (questionIndex !== -1) {
+        this.selectedQuestions = this.selectedQuestions.filter(q => q.index !== questionIndex);
+        
+        // 将题目索引添加到已加入题库列表
+        if (!this.joinedQuestions.includes(questionIndex)) {
+          this.joinedQuestions.push(questionIndex);
+        }
+      }
+    },
+
+    selectBot(bot) {
+      this.currentBot = bot;
+      this.dropdownVisible = false;
+    },
+
+    // 处理题目选择变化
+    handleQuestionSelection(data) {
+      const { index, selected, detail } = data;
+
+      if (selected) {
+        // 添加到选中列表
+        if (!this.selectedQuestions.find(q => q.index === index)) {
+          this.selectedQuestions.push({ index, detail });
+        }
+      } else {
+        // 从选中列表移除
+        this.selectedQuestions = this.selectedQuestions.filter(q => q.index !== index);
+      }
+    },
+
+    // 获取题目类型统计
+    getQuestionTypeSummary() {
+      if (!this.aiResponse.questions || this.aiResponse.questions.length === 0) {
+        return [];
+      }
+
+      const typeCounts = {};
+      const typeNameMap = {
+        single: '单选题',
+        multiple: '多选题',
+        gapfilling: '填空题',
+        judge: '判断题',
+        shortanswer: '简答题'
+      };
+
+      // 统计各类型题目数量
+      this.aiResponse.questions.forEach(question => {
+        const type = question.type || 'single'; // 默认为单选题
+        typeCounts[type] = (typeCounts[type] || 0) + 1;
+      });
+
+      // 转换为显示格式
+      return Object.keys(typeCounts).map(typeId => ({
+        id: typeId,
+        name: typeNameMap[typeId] || typeId,
+        count: typeCounts[typeId]
+      }));
+    },
+
+    // 批量加入题库
+    addAllToBank() {
+      if (this.selectedQuestions.length === 0) {
+        return this.$message.warning('请先选择要加入题库的题目');
+      }
+
+      // 批量加入选中的题目到题库
+      this.selectedQuestions.forEach(({ index, detail }) => {
+        // 调用单个题目的加入题库方法
+        this.$emit('joinQuestionBank', {
+          ...detail,
+          knowledgePointsId: this.form.knowledgeId[this.form.knowledgeId.length - 1]
+        });
+        
+        // 将题目索引添加到已加入题库列表
+        if (!this.joinedQuestions.includes(index)) {
+          this.joinedQuestions.push(index);
+        }
+
+        // 直接调用子组件方法清空选中状态
+        this.$nextTick(() => {
+          const questionItemRef = this.$refs[`questionItem_${index}`];
+          if (questionItemRef) {
+            // 如果是数组，取第一个元素；如果不是数组，直接使用
+            const componentInstance = Array.isArray(questionItemRef) ? questionItemRef[0] : questionItemRef;
+            if (componentInstance && componentInstance.clearSelection) {
+              componentInstance.clearSelection();
+            }
+          }
+        });
+      });
+      
+      // 清空选中状态
+      this.selectedQuestions = [];
+    },
+  }
+}
 </script>
 <style lang="scss" scoped>
 .ai_contain {
   display: inline-block;
+  font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
 
   ::v-deep {
     .el-drawer.rtl {
       border-radius: 15px 0 0 15px;
+      width: 720px !important;
     }
 
     .el-icon-close:before {
       color: #0e0e0e;
       font-weight: bold;
-      font-size: 16px;
+      font-size: 24px;
     }
 
     .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);        /* 从左到右的渐变色带 */
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white),
+      linear-gradient(to right, #BCB9F4, #D5C6F8, #E6C6F9);
+      margin-bottom: 0;
     }
 
     .el-drawer__body {
-      padding: 0 20px;
+      padding: 0 30px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
     }
 
-    .el-form-item__label {
-      font-weight: 700;
+    .el-checkbox__inner {
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
     }
 
-    .el-input__inner {
-      padding-right: 0;
-      border-radius: 25px;
+    .el-checkbox__input.is-checked .el-checkbox__inner {
+      background-color: #7C4DFF;
+      border-color: #7C4DFF;
     }
 
-    .el-cascader {
-      width: 100%;
-    }
-
-    .el-radio__inner {
-      width: 24px;
-      height: 24px;
-    }
-
-    .el-radio__input.is-checked+.el-radio__label {
-      color: #606266;
+    .el-checkbox__inner::after {
+      width: 4px;
+      height: 9px;
+      border: 3px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      left: 6px;
+      top: 2px;
     }
 
-    .el-radio__input.is-checked .el-radio__inner {
-      border-color: #7050D0;
-      background: #7050D0;
+    .el-slider__runway {
+      height: 6px;
+      background-color: #E5E5E5;
+      border-radius: 3px;
     }
 
-    .el-radio__input.is-checked .el-radio__inner::after {
-      display: none;
+    .el-slider__button {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #7C4DFF;
+      background-color: #7C4DFF;
     }
 
-    /* 使用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-slider__bar {
+      background-color: #7C4DFF;
     }
 
-    .el-select .el-input__inner {
-      border-radius: 25px;
+    .el-input__inner {
+      border-radius: 12px;
+      height: 48px;
+      border: 1px solid #E0E0E0;
     }
 
     .el-textarea__inner {
       border-radius: 16px;
+      border: 1px solid #E0E0E0;
+      font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
     }
 
     .el-loading-mask {
@@ -545,26 +839,6 @@ export default {
     }
   }
 
-  .button-handle {
-    width: 168px;
-    height: 48px;
-    font-size: 14px;
-    border-radius: 25px;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  .button-generate-question {
-    background: linear-gradient(to bottom, #7050D0, #2828E0);
-  }
-
-  .button-cancel {
-    border: 1px solid #2828E0;
-    background: transparent;
-    color: #3030C0;
-  }
-
   .ai_button {
     cursor: pointer;
     user-select: none;
@@ -582,29 +856,395 @@ export default {
     font-size: 18px;
     color: #333333;
     font-weight: bold;
-    gap: 5px;
+    gap: 7px;
   }
 
   .add_question_body {
-    .remind {
-      font-size: 14px;
-      color: #9BA1AE;
+    .question-type-header {
+      margin-bottom: 20px;
+
+      .required-mark {
+        color: #FF4455;
+        margin-right: 4px;
+      }
+
+      .section-title {
+        font-size: 14px;
+        color: #303040;
+      }
+
+      .tip-text {
+        font-size: 12px;
+        color: #999;
+        margin-left: 20px;
+      }
+    }
+
+    .question-type-list {
+      margin-bottom: 30px;
+
+      .question-type-item {
+        display: flex;
+        align-items: center;
+        padding: 5px 10px;
+        margin-bottom: 12px;
+        transition: all 0.3s ease;
+
+        .type-left {
+          display: flex;
+          align-items: center;
+
+          .type-checkbox {
+            margin-right: 12px;
+          }
+
+          .type-name {
+            font-size: 14px;
+            font-weight: bold;
+            border-radius: 54px;
+            color: #fff;
+            height: 40px;
+            width: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &.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;
+            }
+          }
+        }
+
+        .type-right {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+
+          .count-input {
+            width: 160px;
+            margin-left: 20px;
+
+            ::v-deep .el-input__inner {
+              height: 42px;
+              border-radius: 56px;
+              text-align: center;
+              font-size: 12px;
+            }
+          }
+
+          .slider-container {
+            width: 240px;
+            margin-left: 10px;
+
+            &.disabled {
+              ::v-deep .el-slider__button {
+                background-color: #ffffff;
+                border: 1px solid #797979;
+              }
+            }
+          }
+
+          .difficulty-label {
+            font-size: 14px;
+            color: #6040E0;
+            min-width: 80px;
+            font-weight: bold;
+
+            &.disabled {
+              color: #CCC;
+            }
+          }
+
+          .placeholder-text {
+            font-size: 12px;
+            color: #DDDDE0;
+            width: 160px;
+            border: 1px solid #DDDDE0;
+            border-radius: 56px;
+            height: 40px;
+            text-align: center;
+            margin-left: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .knowledge-section, .prompt-section {
+      margin-bottom: 24px;
+
+      .section-header {
+        margin-bottom: 12px;
+
+        .required-mark {
+          color: #FF4455;
+          margin-right: 4px;
+        }
+
+        .section-title {
+          font-size: 14px;
+          color: #303040;
+        }
+
+        .tip-text {
+          font-size: 12px;
+          color: #999;
+          margin-left: 20px;
+        }
+      }
+
+      .knowledge-input {
+        position: relative;
+
+        .knowledge-icon {
+          position: absolute;
+          right: 12px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #999;
+          font-size: 16px;
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+
+    .prompt-textarea {
+      .el-textarea__inner {
+        min-height: 120px !important;
+        font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
+      }
     }
   }
 
   .add_question_footer {
-    padding: 20px 0;
-    border-top: 1px solid #E6E6E6;
+    padding-bottom: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 30px;
+
+    .button-handle {
+      width: 168px;
+      height: 48px;
+      font-size: 14px;
+      border-radius: 25px;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+    }
+
+    .button-generate-question {
+      background: linear-gradient(to bottom, #7050D0 0%, #2828E0 100%);
+      width: 280px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .button-cancel {
+      border: 1px solid #7050D0;
+      background: transparent;
+      color: #3030C0;
+    }
   }
-}
 
-/* 对话框样式需要全局作用域，因为它会脱离当前组件 */
-</style>
+  .ai-bot-switch {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    justify-content: center;
+    border-radius: 49px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    height: 40px;
+    width: 144px;
+    cursor: pointer;
+    z-index: 2;
+    border: 1px solid #6040E0A3;
+    font-size: 12px;
+    color: #182028;
+  }
+
+  .ai-bot-label {
+    font-weight: 500;
+    margin-right: 2px;
+    margin-left: 5px;
+    width: 72px;
+  }
+
+  .ai-bot-dropdown {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e0e0ff;
+    padding: 4px 0;
+  }
+
+  .ai-bot-dropdown-item {
+    padding: 8px 20px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #333;
+    transition: background 0.2s;
+  }
+
+  .ai-bot-dropdown-item.active,
+  .ai-bot-dropdown-item:hover {
+    background: #f0f2f8;
+    color: #3830E0;
+  }
+
+  // 题目结果抽屉样式
+  .question-result-drawer {
+    ::v-deep .el-drawer__body {
+      padding: 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .drawer_content_wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 0 20px;
+    }
+
+    .question_summary_warp {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
 
+      .question_summary {
+        .summary_text {
+          color: #6040E0;
+          font-size: 14px;
+          font-weight: bold;
+        }
+
+        .question_types_summary {
+          .type_item {
+            font-size: 12px;
+            color: #182028A3;
+          }
+        }
+      }
+
+      .question_summary_button {
+        display: flex;
+        gap: 15px;
+        margin-right: 15px;
+
+        .button-handle {
+          width: 96px;
+          height: 40px;
+          font-size: 14px;
+          border-radius: 25px;
+          border: none;
+          color: #fff;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        }
+        .button-generate-question {
+          background: linear-gradient(to bottom, #7050D0 0%, #2828E0 100%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .button-cancel {
+          border: 1px solid #7050D0;
+          background: transparent;
+          color: #3030C0;
+        }
+      }
+    }
+
+    .question_body {
+      flex: 1;
+      overflow-y: auto;
+      padding-right: 10px;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(124, 77, 255, 0.3);
+        border-radius: 3px;
+
+        &:hover {
+          background: rgba(124, 77, 255, 0.5);
+        }
+      }
+    }
+
+    .question_footer_fixed {
+      flex-shrink: 0;
+      padding: 0 0 10px 0;
+      background: rgba(255, 255, 255, 0.9);
+      border-top: 1px solid rgba(255, 255, 255, 0.3);
+      backdrop-filter: blur(10px);
+
+      .footer_warning {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .el-icon-info {
+          width: 24px;
+          height: 24px;
+          flex-shrink: 0;
+        }
+
+        .question_remind {
+          font-size: 12px;
+          color: #797979;
+          line-height: 1.4;
+        }
+      }
+    }
+  }
+}
+</style>
 
 <style lang="scss">
 .ai-custom-dialog.el-dialog {
@@ -616,7 +1256,7 @@ export default {
     align-items: center;
     font-weight: 700;
     font-size: 23px;
-    color: #333333;
+    color: #181820;
 
     img {
       margin-right: 10px;
@@ -652,11 +1292,25 @@ export default {
   .question_footer {
     display: flex;
     justify-content: space-between;
+    align-items: center;
 
-    .question_remind {
-      align-self: flex-end;
-      font-size: 14px;
-      color: #9BA1AE;
+    .footer_warning {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+
+      .el-icon-info {
+        color: #7C4DFF;
+        font-size: 16px;
+        flex-shrink: 0;
+      }
+
+      .question_remind {
+        font-size: 14px;
+        color: #9BA1AE;
+        line-height: 1.4;
+      }
     }
   }
 }