教师批改页面重新布局

src/components/AIChatter/AIChatter.module.scss

@@ -1,7 +1,7 @@
 .container {
   position: relative;
   width: 100%;
-  height: 60%; // 原值：60%
+  height: 90%; // 原值：60%
   padding: 10px;
   box-sizing: border-box;
   background-color: #ffffff;
@@ -25,7 +25,7 @@
 
   .message-box {
     width: 100%;
-    height: 80%;
+    height: 98%;
     overflow-y: auto;
 
     .item {
@@ -83,8 +83,8 @@
 
   .message-box {
     width: 100%;
-    height: 34vh;
-    overflow: auto;
+    height: 90vh;
+    overflow-y: auto;
 
     .item {
       display: flex;

src/views/CorrectPage/CorrectPage.vue

@@ -21,9 +21,14 @@
     <div class="right-side">
       <!-- update: 仅保留AI历史对话 -->
       <div class="my-correct-record">
-        <h2>学生与AI对话历史记录</h2>
+        <h3>学生与AI对话历史记录</h3>
         <AIChatter :dialogueId="dataForm.dialogueId" :messages="dataForm.messages" :is-teacher="true" />
-        <el-button @click="showDialog = true">查看行为记录</el-button>
+        <!-- <el-button @click="showDialog = true">查看行为记录</el-button> -->
+        
+      </div>
+      <div class="my-correct-behavior ">
+        <h3>学生行为记录</h3>
+        <BehaviorDialog :fileList="fileList" />
       </div>
 
       <!-- 教师评分、修改意见及评价 -->
@@ -36,26 +41,7 @@
       </div>
     </div>
   </div>
-
-  <el-dialog v-model="showDialog" title="文件信息">
-
-      <el-table :data="fileList" stripe>
-        <el-table-column prop="id" label="ID"></el-table-column>
-        <el-table-column prop="assignmentId" label="作业 ID"></el-table-column>
-        <el-table-column prop="recordFileUrl" label="文件链接" width="300px">
-          <template #default="scope">
-            <a :href="scope.row.recordFileUrl" target="_blank">{{ scope.row.recordFileUrl }}</a>
-          </template>
-        </el-table-column>
-        <el-table-column prop="time" label="时间"></el-table-column>
-        <el-table-column prop="studentId" label="学生 ID"></el-table-column>
-      </el-table>
-
-    <template #footer>
-      <el-button @click="showDialog = false">取消</el-button>
-      <el-button type="primary" @click="downloadAllFiles">导出</el-button>
-    </template>
-  </el-dialog>
+  
 
 </template>
 
@@ -75,6 +61,7 @@ import { useRoute } from 'vue-router'
 import StudentEssay from "../Home/component/StudentEssay/StudentEssay.vue";
 import StudentWritingRequirements from "../Home/component/StudentEssay/StudentWritingRequirements.vue";
 import Remark from "../Home/component/Remark/Remark.vue";
+import BehaviorDialog from "../Home/component/BehaviorDialog/BehaviorDialog.vue";
 
 
 // 获得路由中的assignmentId

src/views/CorrectPage/index.scss

@@ -4,37 +4,51 @@
     height: calc(100vh - 40px);
     display: flex;
     gap: 20px;
+    
     //border: 1px solid black;
 
     .my-correct-goback{
       position: absolute;  
-      bottom: 5vh;  
+      bottom: 1.8vh;  
       right: 3vh; 
     }
   
     .my-correct-header {
+      // display: flex;
       width: 50%;
       height: 100%;
-      flex-shrink: 0;
+      overflow-y: auto;
+      // flex-shrink: 0;
       //border: 1px solid black;
       // background-color:#fff;
     }
 
     .right-side{
       display: flex;
-      gap: 10px;
+      gap: 2vh;
       flex-direction: column;
       height: 100%;
       width: 50%;
 
       .my-correct-record {
-        height: 36vh;
+        height: 29vh;
         background-color: #f9f9f9;  
         border-radius: 5px;  
         padding: 15px;  
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         //border: 1px solid black;
         background-color: #fff;
+        overflow-y: auto;
+      }
+
+      .my-correct-behavior {
+         background-color: #f9f9f9;
+         background-color: #fff; 
+         border-radius: 5px;  
+         padding: 15px;  
+         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+         overflow-y: auto;
+         height: 29vh;  
       }
 
       .my-correct-remark {
@@ -42,9 +56,10 @@
         border-radius: 5px;  
         padding: 15px;  
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        height: 63vh;
+        height: 30vh;
         //border: 1px solid black;
         background-color: #fff;
+        // overflow-y: auto;
       }
 
 

src/views/Home/component/BehaviorDialog/BehaviorDialog.vue

@@ -0,0 +1,31 @@
+<!-- BehaviorDialog.vue -->
+<template>
+    <div>
+      <el-table :data="fileList" stripe>
+        <el-table-column prop="id" label="ID"></el-table-column>
+        <el-table-column prop="assignmentId" label="作业 ID"></el-table-column>
+        <el-table-column prop="recordFileUrl" label="文件链接" width="300px">
+          <template #default="scope">
+            <a :href="scope.row.recordFileUrl" target="_blank">{{ scope.row.recordFileUrl }}</a>
+          </template>
+        </el-table-column>
+        <el-table-column prop="time" label="时间"></el-table-column>
+        <el-table-column prop="studentId" label="学生 ID"></el-table-column>
+      </el-table>
+    </div>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  
+  export default defineComponent({
+    name: 'BehaviorDialog',
+    props: {
+      fileList: {
+        type: Array as PropType<Array<{ id: number; assignmentId: number; recordFileUrl: string; time: string; studentId: number }>>,
+        required: true,
+      },
+    },
+  });
+  </script>
+  

src/views/Home/component/Remark/index.scss

@@ -1,7 +1,8 @@
 
 .remark {  
   display: flex;  
-  flex-direction: column; // 垂直布局  
+  flex-direction: column; // 垂直布局 
+  display: flex; 
   gap: 10px; // 元素之间的间隙  
   padding: 10px; // 内边距  
   border: 1px solid #ccc; // 边框  
@@ -34,13 +35,14 @@
 
 // 文本区域样式  
 textarea { 
+  display: flex;
+  overflow-y: auto;
   margin-bottom: 10px; /* 为textarea底部留出空间给提交按钮 */ 
-  height:35vh;
+  height:18vh;
   width: 100%; // 宽度占满父容器
   box-sizing: border-box; // 内容区域包括内边距和边框，不会撑大元素
   padding: 10px; // 内边距   
   border: 1px solid #ccc; // 边框  
   border-radius: 4px; // 边框圆角  
   font-size: 18px;  
-  resize: none; // 禁止用户调整大小
 }   

src/views/Home/component/StudentEssay/studentEssay.scss

@@ -3,6 +3,11 @@
     width: 800px;
     margin: 0 auto;
     padding: 20px;
+    max-height: 70vh;
+    min-height: 40vh;
+    overflow-y: auto;
+    display: flex;
+
     //background-color: #fff;
   
     .student-essay-info {
@@ -14,11 +19,14 @@
       gap: 20px;
       background-color: #fff;
       line-height: 30px;
+      overflow-y: auto;
+
   
       .student-essay-text {
         display: flex;
         flex-direction: column;
         gap: 15px;
+        overflow-y: auto;
       }
   
       .title {

src/views/Home/component/StudentEssay/studentWritingRequirements.scss

@@ -3,6 +3,10 @@
     margin: 0 auto;
     // padding: 20px;
     //background-color: #fff;
+    display: flex;
+    overflow-y: auto;
+    max-height: 50vh;
+    min-height: 20vh;
   
     .homework-details-info {
       box-sizing: border-box;