合并版 v0.1.0

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@onlyoffice/document-editor-vue": "^1.4.0",
         "axios": "^1.7.2",
+        "docx-preview": "^0.3.2",
         "element-plus": "^2.7.5",
         "mitt": "^3.0.1",
         "pinia": "^2.1.7",
@@ -1616,6 +1617,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1713,6 +1720,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/docx-preview": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmmirror.com/docx-preview/-/docx-preview-0.3.2.tgz",
+      "integrity": "sha512-YRsyiiejdauCQ2boKNHKjJMiIhOCXs643+NCHnmbCM31e7JWqmPiobtzlmHOnv4i+ft9w+ajPEK1hK7VymyRXQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jszip": ">=3.0.0"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.7.5",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.5.tgz",
@@ -2285,6 +2301,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.6.tgz",
@@ -2330,8 +2352,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -2384,6 +2405,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
@@ -2429,6 +2456,18 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -2451,6 +2490,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-6.0.0.tgz",
@@ -2738,6 +2786,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
@@ -2928,6 +2982,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -2975,6 +3035,21 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
@@ -3080,6 +3155,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/sass": {
       "version": "1.77.5",
       "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.5.tgz",
@@ -3109,6 +3190,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3156,6 +3243,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -3277,8 +3373,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
       "version": "5.2.13",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@onlyoffice/document-editor-vue": "^1.4.0",
     "axios": "^1.7.2",
+    "docx-preview": "^0.3.2",
     "element-plus": "^2.7.5",
     "mitt": "^3.0.1",
     "pinia": "^2.1.7",

src/apis/axios.config.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 // const BASEURL = 'http://47.111.23.171:8081'
-const BASEURL = 'http://localhost:8080'
+const BASEURL = '/api'
 // const BASEURL = 'http://8.130.126.86:8080'
 
 const axiosInstance = axios.create({
@@ -19,7 +19,8 @@ axiosInstance.interceptors.request.use(
         if(sessionStorage.getItem('user-storage')){
             token = JSON.parse(sessionStorage.getItem('user-storage') as string).token
         }
-
+        
+        console.log(token, "axios.configs")
         // 如果存在token，则每次请求前加入到请求头中
         if (token) config.headers["Authorization"] = token
         return config

src/views/CorrectPage/CorrectAssignmentPage.vue

@@ -127,6 +127,7 @@ import {useFormatDate} from "@/hooks/useFormatDate";
 
   const handleCorrect = (assignmentId:number, studentId:number) => {
     router.push(`/home/myCorrect/assignment/${assignmentId}`)
+    //第二次路由跳转至教师批改界面，并传递了该作业的srudentId
     router.push({
       path:
           `/home/assignment/${assignmentId}/correct`,

src/views/CorrectPage/CorrectPage.vue

@@ -1,5 +1,5 @@
 <!--
-  Description: 教师批改界面。
+  Description: 教师批改界面。改写于EditPage
   Author: XiaoYu
   Created Date: 2024-7-24
 -->
@@ -8,24 +8,21 @@
     <div class="my-correct">
       <!-- 写作题目 及 作文内容 -->
       <div class="my-correct-header">
-        <!-- TODO:将标题和内容改为引用 ？如何从服务器中调取？ -->
         <StudentWritingRequirements/> 
         <StudentEssay/> 
       </div>
       
       <div class="right-side">
-        <!-- AI评分及写作过程记录：AI对话 字典查询 浏览器搜索 -->
+        <!-- TODO:AI评分及写作过程记录：框架已完成，内容调取待完成 -->
         <div class="my-correct-item">
             <h2>AI评分:</h2><br>
             <ContentSelector/>
-            
-
         </div>
-        <!-- TODO:提交表单后的逻辑未写 -->
-        <RatingComponent/>
+        
         <!-- 教师评分、修改意见及评价 -->
+        <!--新修改：评分小组件放入Remark组件中了  -->
         <div class="my-correct-item">
-            <!-- TODO:将Edit改写乘Remark组件,明确提交逻辑 -->
+            <!-- 已完成，效果未知 是否是engagement也未知 -->
             <Remark :engagement="dataForm.engagement"/>              
         </div>    
         
@@ -51,7 +48,6 @@ import "./index.scss"
 import {useRoute} from 'vue-router'
 import StudentEssay from "../Home/component/StudentEssay/StudentEssay.vue";
 import ContentSelector from "../Home/component/ContentSelector/ContentSelector.vue";
-import RatingComponent from "./component/RatingComponent.vue";
 import StudentWritingRequirements from "../Home/component/StudentEssay/StudentWritingRequirements.vue";
 import Remark from "../Home/component/Remark/Remark.vue";
 
@@ -63,6 +59,7 @@ const assignmentId = Number(route.params.assignmentId)
 const apis = useApis()
 const store = useStore()
 
+//TODO:直接搬的EditPage，不知是否需要修改
 const dataForm = reactive<{
   messages: IDialogue[],
   dialogueId: string;

src/views/CorrectPage/component/RatingComponent.vue

@@ -1,48 +1,57 @@
 <!--
-  Description: 批改界面中的评分小组件
+  Description: 批改页面教师评论组件
   Author: XiaoYu
-  Created Date: 2024-7-27
+  Created Date: 重写于2024-8-2
 -->
 
-<template>  
-    <div class="rating-component-container">  
-      <div class="rating-label">评分：</div>  
-      <input  
-        type="number"  
-        v-model="score"  
-        :min="1"  
-        :max="100"  
-        placeholder="请输入1~100的数字"  
-        class="rating-input"  
-      />  
-      <el-button type="success" class="submit-button" @click="submitScore">提交</el-button>
-    </div>  
-  </template>
 
+<template>  
+  <div class="rating-component">
+    <div class="rating-lable">评分：</div>  
+    <input  
+      type="number"  
+      v-model.number="localScore"  
+      :min="1"  
+      :max="100"  
+      @input="validateScore"  
+      placeholder="请输入1~100的分数"  
+    />  
+  </div>  
+</template>  
+  
 <script>  
 export default {  
+  name: 'RatingComponent',  
+  props: {  
+    value: {  
+      type: Number,  
+      default: 0,  
+    },  
+  },  
   data() {  
     return {  
-      score: '', // 用户输入的分数  
-      showTooltip: false, // 控制鼠标悬停提示的显示  
+      localScore: this.value, // 使用本地数据来维护当前分数  
     };  
   },  
-  methods: {  
-    submitScore() {  
-      if (this.score >= 1 && this.score <= 100) {  
-        //TODO: 这里可以添加提交分数的逻辑，比如发送到服务器
-          
-        alert(`提交的分数是：${this.score}`);  
-      } else {  
-        alert('请输入有效的分数（1到100之间）');  
+  watch: {  
+    // 监听本地分数的变化，并通知父组件  
+    localScore(newValue) {  
+      this.$emit('input', newValue);  
+    },  
+    // 监听父组件通过 v-model 传递的值的变化  
+    value(newValue) {  
+      if (newValue !== this.localScore) {  
+        this.localScore = newValue;  
       }  
     },  
   },  
+  
 };  
-</script>
+</script>  
+  
 
 <style scoped>  
-.rating-component-container {  
+.rating-component {  
   display: flex; /* 应用Flexbox布局 */  
   align-items: center; /* 垂直居中子元素 */   
   padding: 10px;  
@@ -54,15 +63,12 @@ export default {
   margin-right: 10px; /* 右侧间距，以便输入框不会紧贴着文字 */  
 }  
   
-.rating-input {  
+.rating-component input {  
   /* 输入框的样式 */  
   width: 300px;
   padding: 8px;  
   margin-right: 100px; /* 右侧间距，以便按钮不会紧贴着输入框 */  
 }  
   
-.submit-button {  
-  /* 提交按钮的样式 */  
  
-}  
 </style>

src/views/Home/component/Remark/Remark.vue

@@ -1,96 +1,70 @@
-<!--
-  Description: 批改页面教师评论框，改写自Edit，内含onlyoffice
-  Author: XiaoYu
-  Created Date: 2024-7-28
--->
-<template>
-    <div class="remark">
-  <!--    <el-message :message="messageApi"></el-message>-->
-      <div class="remark-box">
-        <div>修改意见及评价</div>
-        <div class="remark-root">
-          <WordEditor
-              @value-change="handleValueChange"
-              :document-key="engagement?.fileKey"
-              :document-title="data.fileTitle"
-              :document-url="engagement?.fileUrl"
-              :user-id="store.user.id"
-              :username="store.user.name"
-          ></WordEditor>
-        </div>
-        <div class="button-right">
-          <el-button type="primary" @click="handleSubmit">提交</el-button>
-          <el-button type="primary" @click="handleStage">暂存</el-button>
-        </div>
-      </div>
-    </div>
-  </template>
+
+<!-- 此组件效果未知 -->
+
+<template>  
+  <div class="remark">  
+    <!-- 评分小组件 -->  
+    <rating-component v-model="correction.score" />  
   
-  <script lang="ts" setup>
-    import "./index.scss";
-    import type {engagementVO} from "@/types/vo";
-    import {defineProps, onMounted, reactive} from 'vue'
-    import router from '@/router'
-    import useApis from "@/apis";
-    import {useStore} from "@/store";
-    import {ElMessage} from "element-plus";
-    import WordEditor from "@/components/WordEditor/WordEditor.vue";
+    <!-- 评论输入框 -->  
+    <textarea v-model="correction.remark" placeholder="请输入评语"></textarea>  
   
-    interface IEditProps {
-      engagement: engagementVO
-    }
+    <!-- 提交按钮 -->
+    <div> </div>  
+    <el-button type="success" @click="handleCorrect">提交批改</el-button>
+  </div>  
+</template>  
   
-    const props = defineProps<{
-      engagement: engagementVO
-    }>()
-  
-    const apis = useApis()
-    const store = useStore()
-    const messageApi = ElMessage;
-  
-    const data = reactive<{
-      isModified: boolean,
-      hasModified: boolean,
-      isModalOpen: boolean,
-      fileTitle: string,
-    }>({
-      isModified: false,
-      hasModified: false,
-      isModalOpen: false,
-      fileTitle: '',
-    });
-  
-    // 设置文件标题
-    onMounted(() => {
-      data.fileTitle = `${store.user.name}_第一次作业.docx`;
-    });
-  
-    // 成功操作的消息提示
-    const success = (msg: string) => {
+<script lang="ts">  
+import "./index.scss"
+import RatingComponent from '@/views/CorrectPage/component/RatingComponent.vue'; // 假设评分小组件是本地的Vue文件  
+import {useRoute} from 'vue-router'  
+import useApis from "@/apis";
+import {useStore} from "@/store";
+import {ElMessage} from "element-plus";
+import router from '@/router'
+
+const apis = useApis()
+const store = useStore()
+const route = useRoute()
+const messageApi = ElMessage;
+
+ // 成功操作的消息提示
+ const success = (msg: string) => {
       messageApi.success(msg);
     };
   
     // 失败操作的消息提示
-    const error = (msg: string) => {
+  const error = (msg: string) => {
       console.log('失败操作', msg);
       messageApi.error(msg);
     };
+
+    
+
+
+
+export default {  
+  data() {  
+    return {  
+      // 初始化correction对象，它将被用作correctDTO的模板  
+      correction: {  
+        score: 0, 
+        remark:''
+      },  
+      // 可能还需要其他数据，比如teacherId, studentId, assignmentId等  
+      // 这些数据可能从props、Vuex、localStorage或其他地方获取  
+      teacherId: store.user.id,  
+      studentId: Number(route.params.studentId),
+      assignmentId: Number(route.params.assignmentId),   
+    };  
+  }, 
   
-    // 处理内容修改事件
-    // 用于检查，onlyoffice文本框是否被修改（同步的）
-    const handleValueChange = (state: boolean) => {
-      if (state) data.hasModified = true;
-      data.isModified = state;
-    };
-  
-    // 提交操作
-    const handleSubmit = () => {
-      // 内容已保存，且已经修改过，则可以点击提交
-      if (!data.isModified && data.hasModified) {
-        //TODO:批改提交缺studentID
-        //apis.engagementCorrect()
-        apis.engagementSubmit(store.user.id, 1)
-            .then((_res: any) => {
+  methods: {  
+    async handleCorrect() {  
+      
+      await apis.engagementCorrect(this.studentId,this.assignmentId,this.correction)
+        .then((_res: any) => {
               console.log(_res);
               success(_res.data.data);
               router.push("/home/myHomework")
@@ -99,41 +73,14 @@
               console.error('提交失败', error);
               error('提交失败');
             });
-      } else if (data.isModified) {
-        error('编辑内容未保存，请保存后提交！');
-      } else if (!data.hasModified) {
-        error('尚未编辑，不可提交！');
-      } else {
-        error('未知错误！');
-      }
-    };
-  
-    // 暂存操作
-    const handleStage = () => {
-      if (!data.isModified && data.hasModified) {
-        apis.engagementStage(store.user.id, 1)
-            .then((_res: any) => {
-              console.log(_res);
-              success(_res.data.data);
-            })
-            .catch((error: any) => {
-              console.error('暂存失败', error);
-              error('暂存失败');
-            });
-      } else if (data.isModified) {
-        error('编辑内容未保存，请保存后提交！');
-      } else if (!data.hasModified) {
-        error('尚未编辑，不可提交！');
-      } else {
-        error('未知错误！');
-      }
-    };
-  </script>
+      
+    },
+  },  
   
-  <script lang="ts">
-  export default {
-    name: "Remark"
-  }
-  </script>
+  // 如果你使用的是单文件组件，不要忘了在components选项中注册评分小组件  
+  components: {  
+    RatingComponent,  
+  }  
+}  
+</script>  
   
-  

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

@@ -1,47 +1,27 @@
-.remark {
-    
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  
-  .down {
-    text-align: right;
-  }
-  
-  .remark-box {
-    
-    max-height: 100%;
-    display: flex;
-    gap: 10px;
-    margin-top: 10px;
-    flex-direction: column;
-    height: 100%;
-  }
-  
-  
-  .button-right {
-    display: flex;
-    gap: 20px;
-    justify-content: flex-end;
-  
-  }
-  
-  
-  .edit-toolbar-box {
-    height: 300px;
-    overflow: auto;
-    width: 100%;
-  }
-  
-  .remark-root {
-    border: solid 1px rgba(199, 199, 199, 0.3);
-    height: 100%;
-  }
-  
-  .edit-box-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
+
+.remark {  
+  display: flex;  
+  flex-direction: column; // 垂直布局  
+  gap: 20px; // 元素之间的间隙  
+  padding: 20px; // 内边距  
+  border: 1px solid #ccc; // 边框  
+  border-radius: 4px; // 边框圆角  
+  background-color: #fff; // 背景色  
+  
+   
+  .rating-component {  
+    margin-bottom: 10px; // 下边距  
+  }  
+  
+  // 文本区域样式  
+  textarea {  
+    width: 100%; // 宽度占满父容器  
+    padding: 10px; // 内边距  
+    resize: none; // 禁止用户调整大小  
+    border: 1px solid #ccc; // 边框  
+    border-radius: 4px; // 边框圆角  
+    // 其他样式...  
+  }  
+  
+
+}  

src/views/Home/component/StudentEssay/StudentEssay.vue

@@ -17,12 +17,11 @@
                 {{data.studentId}}
         </div>
 
-        <div class="text">
-          
-        <!-- TODO:学生作文暂时不知道怎么调,写了个临时文件exampleText.txt -->
-         <!-- <p>{{ textContent }}</p> -->
-         <p v-html="textContent"></p>
-        </div>
+        <!--这里放学生作业  -->
+        <!-- 假设默认的作业文档就是.docx格式 -->
+        <!--通过插件docx preview 实现 npm i docx-preview --save  -->
+        <div ref="fileDiv" class="text"></div>
+        
         
       </div>
       
@@ -34,22 +33,26 @@
 </template>
 
 
-
-
 <script lang="ts" setup>
 import useApis from "@/apis";
+import axios from "axios";
 import {useRoute} from "vue-router";
 import {onMounted, reactive, ref} from "vue";
 import type {engagementVO} from "@/types/vo";
 import './studentEssay.scss'
-import exampleText from './exampleText.txt'; 
-
+import 'docx-preview';
+// import exampleText from './exampleText.txt'; 
+ 
 
 const apis = useApis()
 const route = useRoute()
 const assignmentId = +route.params.assignmentId //string转number
 const studentId = +route.params.studentId//string转number
-const textContent = ref(exampleText);
+//引入
+var docx = require("docx-preview");
+const fileDiv = ref(null);  
+
+// const textContent = ref(exampleText);
 
 let data = reactive<engagementVO>({
   id: null,
@@ -58,32 +61,46 @@ let data = reactive<engagementVO>({
   score: null,
   remark: "",
   fileUrl: "",
-  version: 0,
+  version: null,
   status: "",
   fileKey: ""
 })
 
-
-
-const fetchData = () => {
-  apis.getEngagement(studentId, assignmentId)
-      .then((res: any) => {
-        Object.assign(data, res.data.data)
-      })
-}
+const fetchData = async () => {  
+  const res = await useApis().getEngagement(studentId, assignmentId);  
+  Object.assign(data, res.data.data);  
+  loadFile();  
+};  
+  
+const loadFile = async () => {  
+  if (data.fileUrl) {  
+    try {  
+      const response = await axios({  
+        method: 'get',  
+        responseType: 'blob',  
+        url: data.fileUrl,  
+      });  
+      docx.renderAsync(response.data, fileDiv.value);  
+    } catch (error) {  
+      console.error('Failed to load file:', error);  
+    }  
+  }  
+};  
 
 onMounted(() => {
   fetchData()
 })
+
 </script>
 
 
 
 <script lang="ts">
 
-export default {
-  name: "StudentEssay"
-}
+export default {  
+  name: "StudentEssay",  
+  
+};  
 </script>
 
 

vite.config.ts

@@ -3,9 +3,26 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+//vite.config.ts 和 axios.config.ts和baiqi的版本有些许出入，若保留其版本无法正常登陆
+//目前用的还是xiaoyu的版本
+
 // https://vitejs.dev/config/
 export default defineConfig({
 
+    //配置代理，解决跨域问题。详见EAI问题文档
+    server: {
+      host: '127.0.0.1',
+      port: 4000,
+      proxy: {
+        '/api': {  
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
+    },
+  
+
   plugins: [
     vue(),
   ],
@@ -14,8 +31,5 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   },
- server: {
-   host: '127.0.0.1',
-   port: 4000
- }
+ 
 })