feat.批改页面AI对话历史

src/apis/axios.config.ts

@@ -3,7 +3,7 @@ import axios from "axios";
 // const BASEURL = 'http://47.111.23.171:8081'
 // const BASEURL = 'http://localhost:8080'
 // const BASEURL = 'http://8.130.126.86:8080'
-const BASEURL = ''
+const BASEURL = 'https://air.seec.seecoder.cn/'
 
 const axiosInstance = axios.create({
     baseURL: BASEURL,

src/components/AIChatter/AIChatter.module.scss

@@ -1,7 +1,7 @@
 .container {
   position: relative;
   width: 100%;
-  height: 58%; // 原值：60%
+  height: 90%; // 原值：60%
   padding: 10px;
   box-sizing: border-box;
   background-color: #ffffff;
@@ -69,6 +69,38 @@
     }
   }
 
+}
+//教师视图 应当适配correctPage
+.teacher-view{
+  position: relative;
+  width: 100%;
+  height: 90%; 
+  padding: 5px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border-radius: 10px;
+
+
+  .message-box {
+    width: 100%;
+    height: 34vh;
+    overflow: auto;
+
+    .item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 15px;
+
+      .content {
+        background-color: #f0f0f0;
+        padding: 8px 12px;
+        border-radius: 16px;
+        word-break: break-word;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
 }
 
 //  .question-box {

src/components/AIChatter/AIChatter.vue

@@ -4,22 +4,26 @@
   Created Date: 2024-6-21
 -->
 <template>
-  <div :class="$style.container">
+  <div :class="[{'teacher-view': props.isTeacher},$style.container]">
     <!--大语言模型选择器-->
-    <div :class="$style.header">
-      <div :class="$style['model-selector']">
-        <el-dropdown trigger="click" @command="handleCommand">
-        <span style="font-size: 16px">
-          {{ data.model }}<el-icon ><arrow-down/></el-icon>
-        </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item v-for="model in modelOptions" :command="model">{{ model }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+    <!-- Update: 目前只有glm4可用 删掉其他选项 -->
+     <div v-if="!props.isTeacher">
+      <div :class="$style.header">
+        <div :class="$style['model-selector']">
+          <el-dropdown trigger="click" @command="handleCommand">
+          <span style="font-size: 16px">
+            {{ data.model }}<el-icon ><arrow-down/></el-icon>
+          </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="model in modelOptions" :command="model">{{ model }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
       </div>
-    </div>
+     </div>
+  
     <!-- 消息区域，采用ChatGPT的交互模式 -->
     <div :class="$style['message-box']" ref="containerTopRef">
       <div
@@ -39,7 +43,7 @@
         </div>
         <div style="margin-left: 15px">
           <!--名字-->
-          <div style="margin-bottom: 2px">{{ index % 2 === 0 ? 'You' : data.model }}</div>
+          <div style="margin-bottom: 2px">{{ index % 2 === 0 ? 'Student' : data.model }}</div>
           <!--内容-->
           <div :class="$style.content">{{ item?.content }}</div>
         </div>
@@ -48,38 +52,40 @@
     </div>
 
     <!-- 对话框区域，用于AI提问和提示词模版展现 -->
-    <div :class="$style['question-box']">
-      <div :class="$style['input-group']">
-        <el-input
-            v-model="data.questionContent"
-            ref="inputRef"
-            :placeholder="`Message ${data.model} ...`"
-        >
-        </el-input>
-        <el-button
-            :disabled="data.questionContent === ''"
-            @click="handleSendQuestion"
-            style="width: 40px; border: none"
-            v-loading="data.loading"
-        >
-          <el-icon><Top/></el-icon>
-        </el-button>
-        <el-dropdown @command="handleMenuClick">
-          <el-button type="text" style="width: 40px;">
-            <el-icon><ArrowDown/></el-icon>
+    <div v-if="!props.isTeacher">
+      <div :class="$style['question-box']">
+        <div :class="$style['input-group']">
+          <el-input
+              v-model="data.questionContent"
+              ref="inputRef"
+              :placeholder="`Message ${data.model} ...`"
+          >
+          </el-input>
+          <el-button
+              :disabled="data.questionContent === ''"
+              @click="handleSendQuestion"
+              style="width: 40px; border: none"
+              v-loading="data.loading"
+          >
+            <el-icon><Top/></el-icon>
           </el-button>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item
-                  v-for="(template, index) in questionTemplates"
-                  :key="index"
-                  :command="index"
-              >
-                {{ template }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-            </template>
-        </el-dropdown>
+          <el-dropdown @command="handleMenuClick">
+            <el-button type="text" style="width: 40px;">
+              <el-icon><ArrowDown/></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                    v-for="(template, index) in questionTemplates"
+                    :key="index"
+                    :command="index"
+                >
+                  {{ template }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+              </template>
+          </el-dropdown>
+        </div>        
       </div>
     </div>
   </div>
@@ -103,21 +109,23 @@
           L 15 15
         " style="fill: rgba(0, 0, 0, 0)"/>
       `
-
+//update: 加入isTeacher属性，用于判断是否是教师批改界面
   interface IProps {
     dialogueId: string;
     messages: IDialogue[]
+    isTeacher: boolean
   }
 
   const props = defineProps<{
     dialogueId: string,
     messages: IDialogue[]
+    isTeacher: boolean
   }>()
 
   const apis = useApis()
   const store = useStore()
-  // ChatGLM改为4
-  const modelOptions = ["ChatGPT", "ChatGLM4", "QWen14B"]
+  //UPDATE: 目前只有ChatGLM4
+  const modelOptions = ["ChatGLM4"]
   const questionTemplates = [
     "xxx是什么意思？",
     "英文如何描述xxx",
@@ -220,6 +228,7 @@
     inputRef.value.focus();// 设置焦点自动回到Input
   };
 
+
 </script>
 
 <script lang="ts">

src/views/CorrectPage/CorrectPage.vue

@@ -14,10 +14,10 @@
       </div>
       
       <div class="right-side">
-        <!-- TODO:AI评分及写作过程记录：框架已完成，内容调取待完成 -->
+        <!-- update: 仅保留AI历史对话 -->
         <div class="my-correct-record">
-            <h2>历史记录</h2><br>
-            <ContentSelector :dialogueId="dataForm.dialogueId" :messages="dataForm.messages"/>
+            <h2>学生与AI对话历史记录</h2><br>
+            <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true"/>
         </div>
         
         <!-- 教师评分、修改意见及评价 -->
@@ -64,7 +64,7 @@ const studentId = Number(route.query.studentId)
 const apis = useApis()
 const store = useStore()
 
-//直接搬的EditPage，不知是否需要修改
+
 const dataForm = reactive<{
   messages: IDialogue[],
   dialogueId: string;

src/views/CorrectPage/index.scss

@@ -35,7 +35,7 @@
         border-radius: 5px;  
         padding: 15px;  
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        height: 35vh;
+        height: 36vh;
         //border: 1px solid black;
         background-color: #fff;
         
@@ -45,7 +45,7 @@
         border-radius: 5px;  
         padding: 15px;  
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        height: 64vh;
+        height: 63vh;
         //border: 1px solid black;
         background-color: #fff;
         

src/views/EditPage/EditPage.vue

@@ -9,9 +9,9 @@
 
     <div class="my-work-slider">
       <el-button class="back" color="#597D3B" @click="handleBack">&lt;返回</el-button>
-      <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" />
-
-      <Dictionaries />
+      <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="false" />
+<!-- TODO:删掉字典 或接入gpt -->
+      <!-- <Dictionaries /> -->
     </div>
     <div class="my-work-input">
       <Edit :engagement="dataForm.engagement"/>

src/views/Home/component/ContentSelector/ContentSelector.vue

@@ -3,33 +3,49 @@
   Author: XiaoYu
   Created Date: 2024-7-27
 -->
-<!-- TODO:还是demo，三个内容还不能用 -->
+<!-- update: 已弃用 -->
 <template>  
   <div class="content-selector">  
     <!-- 按钮组 -->  
     <div class="button-group">
       <el-button color="#597D3B" class="submit-button" @click="selectContent(0)">AI对话</el-button>
-      <el-button color="#597D3B" class="submit-button" @click="selectContent(1)">字典查询</el-button>
-      <el-button color="#597D3B" class="submit-button" @click="selectContent(2)">浏览器搜索</el-button>  
     </div>  
   
-    <!-- 内容输入框，带有实线边框 -->  
+    <!-- update: 删掉了字典和浏览器记录的按钮，只保留AI对话 -->  
     <div class="content-input-box">  
       <!-- 根据selectedContent的值动态显示内容 -->  
       <div v-if="selectedContent === 0" class="content-item">  
-        <!-- 这里可以是一个真正的输入框或其他内容显示区域 -->  
-        <textarea disabled placeholder="AI对话的内容将显示在这里..." class="input-area"></textarea>  
-      </div>  
-      <div v-if="selectedContent === 1" class="content-item">  
-        <textarea disabled placeholder="字典查询的结果将显示在这里..." class="input-area"></textarea>  
-      </div>  
-      <div v-if="selectedContent === 2" class="content-item">  
-        <textarea disabled placeholder="浏览器搜索的结果将显示在这里..." class="input-area"></textarea>  
+        <!-- TODO:调取AI对话内容，并显示在这里 -->  
+        <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" />  
       </div>  
     </div>  
   </div>  
 </template>
 
+<script setup lang="ts">  
+import AIChatter from '@/components/AIChatter/AIChatter.vue';
+import { IDialogue } from '@/types/dialogue';
+import { reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from '@/store';
+import useApis from '@/apis';
+
+const route = useRoute()
+const assignmentId  = Number(route.params.assignmentId) 
+const apis = useApis()
+const store = useStore()
+
+
+const dataForm =reactive<{
+  messages: IDialogue[],
+  dialogueId: string,
+
+}>({
+  messages: [],
+  dialogueId: ''
+})
+</script>
+
 <script>  
 export default {  
   name: 'ContentSelector', // 组件名称  

src/views/LoginPage/component/Register.vue

@@ -84,13 +84,9 @@ const roleOptions = [
   {
     label: "教师",
     value: Role.TEACHER,
-    disabled: true
+    disabled: false
   },
-  {
-    label: "管理员",
-    value: Role.ADMIN,
-    disabled: true
-  }
+  
 ]
 
 const formSize = ref<ComponentSize>('default')