From b3ed88602f6d177986c580d6c37da9bf29a11bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Mon, 1 Sep 2025 20:04:57 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Aai=E4=BC=B4=E5=AD=A6=E7=9A=84?=
 =?UTF-8?q?=E6=9C=AA=E6=8A=A5=E5=90=8D=E5=B7=B2=E6=8A=A5=E5=90=8D=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E5=A4=AE=E8=A7=86=E4=BF=AE=E6=94=B9=EF=BC=8C=E6=8A=95?=
 =?UTF-8?q?=E8=AF=89=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84=EF=BC=8Cai?=
 =?UTF-8?q?=E5=8A=A9=E6=89=8Bbug=E4=BF=AE=E6=94=B9=EF=BC=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/CourseExchanged.vue | 322 ++++++++++++++++++++++++++++++++--
 1 file changed, 312 insertions(+), 10 deletions(-)

diff --git a/src/views/CourseExchanged.vue b/src/views/CourseExchanged.vue
index 0871467..0089595 100644
--- a/src/views/CourseExchanged.vue
+++ b/src/views/CourseExchanged.vue
@@ -126,8 +126,8 @@
 
                 <!-- 课程描述 -->
                 <div class="course-description">
-                  <div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span>这里</span> 反馈</div>
-                  <span>稿件投诉</span>
+                  <div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span @click="openComplaintModal('feedback')">这里</span> 反馈</div>
+                  <span @click="openComplaintModal('complaint')">稿件投诉</span>
                 </div>
 
 
@@ -696,10 +696,10 @@
             </div>
           </div>
           <div class="ai-assistant-interface">
-            <div class="banner-button">
+            <!-- <div class="banner-button">
               <img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
               <span class="button-text">普通</span>
-            </div>
+            </div> -->
 
 
             <!-- AI主要内容区域 -->
@@ -966,6 +966,59 @@
       </div>
     </div>
   </div>
+
+  <!-- 投诉/反馈弹窗 -->
+  <n-modal v-model:show="complaintModalVisible" style="width: 600px;">
+    <div class="complaint-modal">
+      <!-- 自定义标题 -->
+      <div class="complaint-modal-header">
+        <div class="complaint-modal-title">投诉/反馈</div>
+        <div class="complaint-modal-divider"></div>
+      </div>
+
+      <div class="complaint-modal-content">
+        <!-- 投诉内容 -->
+        <div class="complaint-section">
+          <div class="complaint-label">投诉内容：</div>
+          <div class="complaint-input-wrapper">
+            <n-input
+              v-model:value="complaintContent"
+              type="textarea"
+              placeholder="请输入您想要投诉或反馈的内容"
+              :rows="8"
+              :maxlength="500"
+              show-count
+              class="complaint-textarea"
+            />
+          </div>
+        </div>
+
+        <!-- 上传图片 -->
+        <div class="upload-section">
+          <div class="upload-label">上传图片：</div>
+          <div class="upload-wrapper">
+            <n-upload
+              v-model:file-list="uploadFileList"
+              :max="5"
+              list-type="image-card"
+              accept="image/*"
+              :custom-request="handleUpload"
+            >
+              <div class="upload-area">
+                <div class="upload-plus">+</div>
+              </div>
+            </n-upload>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部按钮 -->
+      <div class="modal-actions">
+        <n-button @click="cancelComplaint" class="cancel-btn">取消</n-button>
+        <n-button type="primary" @click="submitComplaint" class="submit-btn">提交</n-button>
+      </div>
+    </div>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
@@ -1935,6 +1988,63 @@ const notesList = ref([
 ])
 const editingNoteIndex = ref(-1)
 
+// 投诉/反馈弹窗相关状态
+const complaintModalVisible = ref(false)
+const complaintContent = ref('')
+const complaintType = ref<'feedback' | 'complaint'>('feedback')
+const uploadFileList = ref([])
+
+// 打开投诉弹窗
+const openComplaintModal = (type: 'feedback' | 'complaint') => {
+  complaintType.value = type
+  complaintModalVisible.value = true
+  complaintContent.value = ''
+  uploadFileList.value = []
+}
+
+// 取消投诉
+const cancelComplaint = () => {
+  complaintModalVisible.value = false
+  complaintContent.value = ''
+  uploadFileList.value = []
+}
+
+// 提交投诉
+const submitComplaint = async () => {
+  if (!complaintContent.value.trim()) {
+    message.warning('请输入投诉内容')
+    return
+  }
+
+  try {
+    // 这里可以调用API提交投诉
+    console.log('提交投诉:', {
+      type: complaintType.value,
+      content: complaintContent.value,
+      files: uploadFileList.value
+    })
+
+    message.success('提交成功，我们会尽快处理您的反馈')
+    complaintModalVisible.value = false
+    complaintContent.value = ''
+    uploadFileList.value = []
+  } catch (error) {
+    console.error('提交投诉失败:', error)
+    message.error('提交失败，请稍后重试')
+  }
+}
+
+// 处理文件上传
+const handleUpload = ({ file, onFinish, onError }: any) => {
+  // 这里可以实现真实的文件上传逻辑
+  console.log('上传文件:', file)
+
+  // 模拟上传成功
+  setTimeout(() => {
+    onFinish()
+  }, 1000)
+}
+
 // 发送聊天消息
 const sendMessage = () => {
   if (chatMessage.value.trim()) {
@@ -2097,9 +2207,10 @@ onActivated(() => {
 }
 
 .container {
-  /* max-width: 1400px; */
-  width: 100%;
-  margin: 0 auto;
+  max-width: none;
+  margin: 0;
+  padding-left: 120px;
+  padding-right: 120px;
 }
 
 .breadcrumb {
@@ -2126,7 +2237,7 @@ onActivated(() => {
 
 .course-content {
   display: flex;
-  gap: 20px;
+  gap: 32px;
   width: 100%;
   flex-direction: row-reverse;
 }
@@ -4109,7 +4220,8 @@ onActivated(() => {
 /* AI助手界面样式 */
 .ai-assistant-interface {
   position: relative;
-  min-width: 360px;
+  width: 360px; /* 固定宽度，不再自适应 */
+  flex-shrink: 0; /* 防止收缩 */
   /* background: white; */
   padding-top: 12px;
   margin-top: 30px;
@@ -5023,10 +5135,29 @@ onActivated(() => {
 }
 
 /* 响应式设计 */
+/* 大屏幕 - 使用120px左右边距 */
+@media (min-width: 1400px) {
+  .container {
+    padding-left: 120px;
+    padding-right: 120px;
+    max-width: none;
+    margin: 0;
+  }
+
+  .course-content {
+    gap: 32px;
+  }
+}
+
 @media (max-width: 1399px) and (min-width: 1200px) {
   .container {
     padding: 0 24px;
     max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .course-content {
+    gap: 20px;
   }
 
   .sidebar {
@@ -5038,6 +5169,7 @@ onActivated(() => {
   .container {
     padding: 0 20px;
     max-width: 992px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5054,6 +5186,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 768px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5070,6 +5203,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .course-content {
@@ -5091,6 +5225,7 @@ onActivated(() => {
   .container {
     padding: 0 16px;
     max-width: 576px;
+    margin: 0 auto;
   }
 
   .video-player.unregistered {
@@ -5355,6 +5490,8 @@ onActivated(() => {
 @media (max-width: 480px) {
   .container {
     padding: 0 12px;
+    margin: 0 auto;
+    max-width: 480px;
   }
 
   .video-player.unregistered {
@@ -5413,6 +5550,8 @@ onActivated(() => {
 @media (max-width: 360px) {
   .container {
     padding: 0 8px;
+    margin: 0 auto;
+    max-width: 360px;
   }
 
   .video-player.unregistered {
@@ -5599,7 +5738,7 @@ onActivated(() => {
   background: transparent;
   border: none;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 16px; /* 调整字体大小从12px到16px */
   color: #666;
   border-radius: 4px;
   transition: all 0.2s ease;
@@ -6189,4 +6328,167 @@ onActivated(() => {
 .no-comments {
   color: #999;
 }
+
+/* 投诉/反馈弹窗样式 */
+.complaint-modal {
+  background: white;
+  border-radius: 2px;
+  padding: 24px;
+}
+
+.complaint-modal-header {
+  margin-bottom: 24px;
+}
+
+.complaint-modal-title {
+  width: 72px;
+  height: 22px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 16px;
+  color: #000000;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  margin-bottom: 16px;
+}
+
+.complaint-modal-divider {
+  width: 506px;
+  height: 1px;
+  background: #E6E6E6;
+}
+
+.complaint-modal-content {
+  padding: 20px 0;
+}
+
+.complaint-section {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.complaint-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-right: 16px;
+  white-space: nowrap;
+  padding-top: 8px;
+}
+
+.complaint-input-wrapper {
+  flex: 1;
+}
+
+.complaint-textarea {
+  width: 428px;
+  height: 214px;
+  background: #F5F8FB;
+  border-radius: 2px;
+}
+
+.upload-section {
+  display: flex;
+  margin-bottom: 24px;
+  align-items: flex-start;
+}
+
+.upload-label {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+  margin-right: 16px;
+  white-space: nowrap;
+  padding-top: 8px;
+}
+
+.upload-wrapper {
+  flex: 1;
+}
+
+.upload-area {
+  width: 100px;
+  height: 100px;
+  background: white;
+  border: 1px dashed #d9d9d9;
+  border-radius: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: border-color 0.3s;
+}
+
+.upload-area:hover {
+  border-color: #40a9ff;
+}
+
+.upload-plus {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-plus::before,
+.upload-plus::after {
+  content: '';
+  position: absolute;
+  background: #666666;
+}
+
+.upload-plus::before {
+  width: 10px;
+  height: 1px;
+}
+
+.upload-plus::after {
+  width: 1px;
+  height: 10px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding-top: 24px;
+  
+}
+
+.cancel-btn {
+  background: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  color: #666;
+}
+
+.cancel-btn:hover {
+  background: #e6f7ff;
+  border-color: #40a9ff;
+  color: #40a9ff;
+}
+
+.submit-btn {
+  background: #1890ff;
+  border: 1px solid #1890ff;
+}
+
+.submit-btn:hover {
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
+
+/* 课程描述中的可点击元素样式 */
+.course-description span {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.course-description span:hover {
+  color: #40a9ff;
+}
 </style>
\ No newline at end of file