基本完成所有修复，准备换电脑测试

src/views/AIEvaluationPage/AIEvaluationPage.vue

@@ -1,21 +1,21 @@
 <template>
-  <div style="display: flex">
+  <div class="ai-evaluation-container">
     <!-- 1.作文展示区域 -->
-    <div style="width: 40%; height: 90vh; margin: 10px; position: relative;">
-      <el-breadcrumb :separator-icon="ArrowRight" style="height: 30px; align-content: center; margin-left: 6px">
+    <div class="essay-section">
+      <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
         <el-breadcrumb-item :to="{ path: `/home/Assignment/${assignmentId}/edit` }">写作</el-breadcrumb-item>
         <el-breadcrumb-item><span style="color: rgba(22,119,255,0.62); font-weight: bold; cursor:pointer;">智能批改</span></el-breadcrumb-item>
       </el-breadcrumb>
 
-      <el-card  shadow="never">
+      <el-card shadow="never" class="essay-card">
         <!-- 原文标识 -->
-        <div style="display: flex;justify-content: center;align-items: center;width: 100px; height: 50px; background-color:#87CEEB; position: absolute; top: 40px; left: 0; clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);">
-          <span style="margin-left: -20px;color: white">原文</span>
+        <div class="original-text-label">
+          <span>原文</span>
         </div>
         <!-- 作文内容展示区域 -->
-        <div style="white-space: pre-wrap; margin-top: 80px; line-height: 30px">
-          <el-scrollbar height="760px">
-          <span style="position: relative;">
+        <div class="essay-content-wrapper">
+          <el-scrollbar height="760px" class="essay-scrollbar">
+          <span class="essay-content">
             <template v-if="data.sentenceEvaluationList?.length != 0">
               <span v-for="sentenceEvaluation in data.sentenceEvaluationList"
                     :key="sentenceEvaluation.id"
@@ -43,9 +43,9 @@
 
 
     <!-- 2.AI评价区域 -->
-    <div style="width: 40%; margin: 10px; height: 89vh;">
+    <div class="evaluation-section">
       <div class="combined-box">
-        <div style="display: flex">
+        <div class="tab-container">
           <div
               class="trapezoid"
               :class="{ active: selected === 'trapezoid' }"
@@ -63,21 +63,16 @@
         </div>
         <div class="rectangle">
           <template v-if="selected === 'trapezoid'">
-            <el-scrollbar height="820px">
-              <div style="display: flex;align-items: flex-start;margin-bottom: 15px;">
-                <div>
-                  <!--展示头像-->
-                  <!--<el-avatar src="@/image/seecoderLogo.png" :size="32" :shape="'circle'">-->
-                  <!--</el-avatar>-->
-                  <div style="border-radius: 50%; background-color:#fff; width: 40px; height: 40px;display: flex;justify-content: center;align-items: center;">
+            <el-scrollbar height="100%" class="evaluation-scrollbar">
+              <div class="overall-evaluation-content">
+                <div class="avatar-container">
+                  <div class="avatar-wrapper">
                     <img src="@/image/seecoderLogo.png" width="32" >
                   </div>
                 </div>
-                <div style="margin-left: 15px">
-                  <!--名字-->
-                  <div style="margin-bottom: 2px">SEEAI英语助手</div>
-                  <!--内容-->
-                  <div style="background-color: #f0f0f0;padding: 8px 12px;border-radius: 16px;white-space: pre-line;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
+                <div class="evaluation-message">
+                  <div class="assistant-name">SEEAI英语助手</div>
+                  <div class="message-content">
                     {{ data.overallEvaluation?.evaluation }}
                   </div>
                 </div>
@@ -85,22 +80,23 @@
             </el-scrollbar>
           </template>
           <template v-else>
-              <el-scrollbar height="820px">
-                <div style="display: flex; flex-direction: column;">
+              <el-scrollbar height="100%" class="evaluation-scrollbar">
+                <div class="sentence-evaluation-content">
                   <template v-if="data.sentenceEvaluationList?.length == 0">
-                    暂无逐句评价
+                    <div class="no-evaluation">暂无逐句评价</div>
                   </template>
                   <el-card v-for="sentenceEvaluation in data.sentenceEvaluationList"
                            :key="sentenceEvaluation.id"
-                           style="cursor: pointer; margin-bottom: 10px; position: relative;" shadow="hover"
+                           class="sentence-card" 
+                           shadow="hover"
                            @mouseenter="highlightSentenceId = sentenceEvaluation.id"
                            @mouseleave="highlightSentenceId = -1"
                   >
-                    <div :style="{display: 'flex',justifyContent: 'center',alignItems: 'center',width: '20px', height: '100%', backgroundColor: getTextDecorationColor(sentenceEvaluation), position: 'absolute', top: '0', left: 'calc(100% - 20px)'}">
+                    <div class="color-indicator" :style="{backgroundColor: getTextDecorationColor(sentenceEvaluation)}">
                     </div>
-                    <div style="padding-right: 30px">
-                      <div style="font-weight: bold; line-height: 30px">{{ sentenceEvaluation.category }}</div>
-                      {{ sentenceEvaluation.evaluation }}
+                    <div class="sentence-content">
+                      <div class="sentence-category">{{ sentenceEvaluation.category }}</div>
+                      <div class="sentence-evaluation">{{ sentenceEvaluation.evaluation }}</div>
                     </div>
                   </el-card>
                 </div>
@@ -111,44 +107,15 @@
     </div>
 
     <!-- 3.历史版本选择区域 -->
-    <el-card
-        style="
-          width: 15%;  /* 固定宽度代替百分比 */
-          height: 90vh;
-          margin: 10px 0 10px auto;  /* 关键：左侧自动边距 */
-          border-left: 1px solid #e4e7ed;
-          border-radius: 0 8px 8px 0;
-          box-shadow: -2px 0 4px rgba(0,0,0,0.05);
-          /*position: sticky;  !* 新增固定定位 *!*/
-          right: 0;
-      "
-        shadow="never"
-    >
-      <div style="
-        position: relative;
-        height: 100%;
-        padding: 20px 10px;
-      ">
+    <el-card class="version-section" shadow="never">
+      <div class="version-container">
         <!-- 版本选择标题 -->
-        <div style="
-          position: absolute;
-          top: 0;
-          left: -20px;
-          width: 80px;
-          height: 40px;
-          background: #87CEEB;
-          clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
-          color: white;
-          display: flex;
-          align-items: center;
-          padding-left: 12px;
-          font-size: 13px;
-        ">
+        <div class="version-header">
           版本历史
         </div>
 
         <!-- 版本列表 -->
-        <el-scrollbar height="800px" style="margin-top: 50px;">
+        <el-scrollbar height="800px" class="version-scrollbar">
           <div
               v-for="version in data.versionList"
               :key="version.id"
@@ -165,14 +132,7 @@
         </el-scrollbar>
 
         <!-- 当前版本提示 -->
-        <div style="
-          position: absolute;
-          bottom: 10px;
-          left: 10px;
-          right: 10px;
-          font-size: 12px;
-          color: #666;
-        ">
+        <div class="current-version">
           当前选择：v{{ selectedVersion }}
         </div>
       </div>
@@ -325,34 +285,122 @@ export default {
 </script>
 
 <style scoped>
+/* 主容器 - 响应式布局 */
+.ai-evaluation-container {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  min-height: 90vh;
+  box-sizing: border-box;
+}
+
+/* 作文展示区域 */
+.essay-section {
+  flex: 0 0 40%;
+  min-width: 300px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.breadcrumb {
+  height: 30px;
+  align-content: center;
+  margin-left: 6px;
+  margin-bottom: 10px;
+}
+
+.essay-card {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.original-text-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 50px;
+  background-color: #87CEEB;
+  position: absolute;
+  top: 0;
+  left: 0;
+  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
+  z-index: 10;
+}
+
+.original-text-label span {
+  margin-left: -20px;
+  color: white;
+  font-weight: 500;
+}
+
+.essay-content-wrapper {
+  white-space: pre-wrap;
+  margin-top: 40px;
+  line-height: 30px;
+  height: calc(90vh - 80px);
+  overflow: hidden;
+}
+
+.essay-scrollbar {
+  height: 100% !important;
+  padding-right: 10px; /* 滚动条右移 */
+}
+
+.essay-content {
+  position: relative;
+  display: block;
+  padding-right: 15px; /* 确保内容不被滚动条遮挡 */
+}
+
+/* AI评价区域 */
+.evaluation-section {
+  flex: 0 0 40%;
+  min-width: 300px;
+  height: 89vh;
+  overflow: hidden;
+}
 
 .combined-box {
-  width: 100%; /* 整体宽度 */
+  width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-container {
+  display: flex;
+  flex-shrink: 0;
 }
 
 .trapezoid {
-  width: 100px; /* 梯形底边长度 */
+  width: 100px;
   height: 0;
-  border-bottom: 30px solid #cfcfcf; /* 梯形高度和颜色 */
+  border-bottom: 30px solid #cfcfcf;
   border-right: 20px solid transparent;
-  line-height: 30px; /* 与 border-bottom 高度相等 */
-  text-align: center; /* 水平居中 */
+  line-height: 30px;
+  text-align: center;
   z-index: 1;
   cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
 }
 
 .trapezoid2 {
-  width: 100px; /* 梯形底边长度 */
+  width: 100px;
   height: 0;
-  border-bottom: 30px solid #cfcfcf; /* 梯形高度和颜色 */
+  border-bottom: 30px solid #cfcfcf;
   border-right: 20px solid transparent;
   border-left: 20px solid transparent;
   margin-left: -20px;
   z-index: 2;
-  line-height: 30px; /* 与 border-bottom 高度相等 */
-  text-align: center; /* 水平居中 */
+  line-height: 30px;
+  text-align: center;
   cursor: pointer;
+  transition: all 0.3s;
+  font-size: 14px;
 }
 
 .trapezoid.active {
@@ -366,14 +414,152 @@ export default {
 }
 
 .rectangle {
-  width: 100%; /* 长方形宽度 */
-  height: calc(100% - 30px - 2vh); /* 长方形高度 */
-  border-top: none; /* 去掉顶部边框，使其与梯形无缝连接 */
-  /* 长方形底部的圆角 */
+  width: 100%;
+  flex: 1;
+  border-top: none;
+  background-color: #fff;
+  border-radius: 0 5px 5px 5px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* 重要：允许flexbox子元素正确收缩 */
+}
+
+/* 评价内容滚动区域 */
+.evaluation-scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+
+.overall-evaluation-content {
+  display: flex;
+  align-items: flex-start;
+  padding: 20px;
+  min-height: 100%;
+}
+
+.avatar-container {
+  flex-shrink: 0;
+}
+
+.avatar-wrapper {
+  border-radius: 50%;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
   align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.evaluation-message {
+  margin-left: 15px;
+  flex: 1;
+  min-width: 0; /* 允许文本换行 */
+}
+
+.assistant-name {
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+}
+
+.message-content {
+  background-color: #f0f0f0;
+  padding: 12px 16px;
+  border-radius: 16px;
+  white-space: pre-line;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.6;
+}
+
+.sentence-evaluation-content {
+  display: flex;
+  flex-direction: column;
   padding: 20px;
-  background-color: #fff; /* 长方形的背景颜色 */
-  border-radius: 0 5px 5px 5px;
+  gap: 10px;
+}
+
+.no-evaluation {
+  text-align: center;
+  color: #999;
+  padding: 40px 20px;
+  font-size: 14px;
+}
+
+.sentence-card {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+}
+
+.color-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: calc(100% - 20px);
+  border-radius: 0 4px 4px 0;
+}
+
+.sentence-content {
+  padding-right: 30px;
+}
+
+.sentence-category {
+  font-weight: bold;
+  line-height: 30px;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.sentence-evaluation {
+  line-height: 1.6;
+  color: #666;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/* 版本历史区域 */
+.version-section {
+  flex: 0 0 20%;
+  min-width: 180px;
+  height: 90vh;
+  border-left: 1px solid #e4e7ed;
+  border-radius: 0 8px 8px 0;
+  box-shadow: -2px 0 4px rgba(0,0,0,0.05);
+}
+
+.version-container {
+  position: relative;
+  height: 100%;
+  padding: 20px 10px;
+}
+
+.version-header {
+  position: absolute;
+  top: 0;
+  left: -20px;
+  width: 80px;
+  height: 40px;
+  background: #87CEEB;
+  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.version-scrollbar {
+  margin-top: 50px;
 }
 
 .version-item {
@@ -403,19 +589,175 @@ export default {
   border-radius: 50%;
   background: #cfcfcf;
   margin-right: 10px;
+  flex-shrink: 0;
 }
 
 .version-item.active .version-marker {
-  background: var(--system-color);
+  background: #87CEEB;
+}
+
+.version-info {
+  flex: 1;
+  min-width: 0;
 }
 
 .version-time {
   font-size: 12px;
   color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .version-author {
   font-size: 10px;
   color: #999;
+  margin-top: 2px;
+}
+
+.current-version {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  padding: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+/* 响应式设计 */
+/* 平板设备 */
+@media screen and (max-width: 1200px) {
+  .ai-evaluation-container {
+    flex-wrap: wrap;
+  }
+  
+  .essay-section,
+  .evaluation-section {
+    flex: 0 0 calc(50% - 10px);
+    min-width: 280px;
+  }
+  
+  .version-section {
+    flex: 0 0 100%;
+    height: auto;
+    min-height: 300px;
+    border-left: none;
+    border-top: 1px solid #e4e7ed;
+    border-radius: 8px;
+  }
+  
+  .version-header {
+    left: 0;
+    top: -10px;
+  }
+}
+
+/* 移动设备 */
+@media screen and (max-width: 768px) {
+  .ai-evaluation-container {
+    flex-direction: column;
+    padding: 5px;
+    gap: 8px;
+  }
+  
+  .essay-section,
+  .evaluation-section,
+  .version-section {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: auto;
+  }
+  
+  .essay-section {
+    height: 50vh;
+  }
+  
+  .essay-content-wrapper {
+    height: calc(50vh - 80px);
+  }
+  
+  .evaluation-section {
+    height: 60vh;
+  }
+  
+  .version-section {
+    height: 40vh;
+  }
+  
+  .trapezoid,
+  .trapezoid2 {
+    width: 80px;
+    font-size: 12px;
+  }
+  
+  .overall-evaluation-content {
+    padding: 15px;
+  }
+  
+  .avatar-wrapper {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .avatar-wrapper img {
+    width: 24px !important;
+  }
+  
+  .evaluation-message {
+    margin-left: 10px;
+  }
+  
+  .message-content {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+  
+  .sentence-evaluation-content {
+    padding: 15px;
+  }
+}
+
+/* 小屏幕移动设备 */
+@media screen and (max-width: 480px) {
+  .breadcrumb {
+    font-size: 12px;
+  }
+  
+  .original-text-label {
+    width: 80px;
+    height: 40px;
+    font-size: 12px;
+  }
+  
+  .essay-content {
+    font-size: 14px;
+    line-height: 24px;
+  }
+  
+  .trapezoid,
+  .trapezoid2 {
+    width: 70px;
+    font-size: 11px;
+    border-bottom-width: 25px;
+    line-height: 25px;
+  }
+  
+  .sentence-category {
+    font-size: 13px;
+  }
+  
+  .sentence-evaluation {
+    font-size: 12px;
+  }
+  
+  .version-header {
+    width: 70px;
+    height: 35px;
+    font-size: 11px;
+  }
 }
 </style>

src/views/EditPage/index.scss

@@ -23,6 +23,6 @@
     width: 100%;
     flex: 1;
     max-width: 100%;
-
+    margin-right: -10px;
   }
 }

src/views/Home/component/Silder/index.vue

@@ -87,6 +87,7 @@ import emitter from "@/utils/emitter";
   let open= ref(false)
   let showCorrectBtn = ref(false)
   let showCorrectToPageBtn = ref(false)
+  let hasStagedContent = ref(false) // 用于跟踪是否已暂存内容
 
   // 获得路由中的assignmentId
   const route = useRoute()
@@ -253,15 +254,22 @@ import emitter from "@/utils/emitter";
    */
   const getEvaluationVersionList = () => {
     if(JSON.stringify(props.engagement) !== '{}'){
+      // 检查是否已有暂存的作文内容
+      const hasContent = props.engagement.content && props.engagement.content.trim() !== '';
+      if (hasContent) {
+        hasStagedContent.value = true;
+      }
+      
       apis.getEvaluationVersionList(props.engagement.assignmentId, store.user.id)
           .then(res => {
             // 从未批改过
             if(res.data.data.length === 0){
-              showCorrectBtn.value = true
+              // 修改：从未批改过时，只有当已有暂存内容时才能启用批改按钮
+              showCorrectBtn.value = hasStagedContent.value
               showCorrectToPageBtn.value = false
             } else {
               showCorrectToPageBtn.value = true
-              showCorrectBtn.value = (res.data.data[0].version !== props.engagement.version)
+              showCorrectBtn.value = (res.data.data[0].version !== props.engagement.version) && hasStagedContent.value
             }
           })
           .catch(err => {
@@ -306,7 +314,8 @@ import emitter from "@/utils/emitter";
   // 监听暂存成功事件
   emitter.on('stage-success', () => {
     console.log('收到暂存成功事件，启用批改按钮')
-    // 暂存成功后，启用"开始批改"按钮
+    // 暂存成功后，标记已有暂存内容，并启用"开始批改"按钮
+    hasStagedContent.value = true
     showCorrectBtn.value = true
   })