OL-LearnPlatform-Frontend/src/views/teacher/course/HomeworkReviewView.vue

<template>
  <div class="homework-review-view">
    <!-- 头部信息区域 -->
    <div class="header-section">
      <!-- 左侧：头像、名称、时间 -->
      <div class="user-info">
        <div class="avatar-section">
          <n-button quaternary circle size="large" @click="goBack">
            <template #icon>
              <n-icon>
                <ArrowBackOutline />
              </n-icon>
            </template>
          </n-button>
          <div class="avatar">
            <img src="/images/activity/1.png" alt="头像" />
          </div>
        </div>

        <div class="user-details">
          <div class="user-name">王伦国</div>
          <div class="submit-time">2025-07-21</div>
        </div>
      </div>

      <!-- 右侧：作业状态 -->
      <div class="homework-status">
        <span class="status-text" :class="homeworkInfo.status === '已批阅' ? 'reviewed' : 'unreviewed'">
          {{ homeworkInfo.status }}
        </span>
      </div>
    </div>

    <!-- 作业内容区域 -->
    <div class="content-section">
      <!-- 作业标题 -->
      <h1 class="homework-title">{{ homeworkInfo.title }}</h1>

      <!-- 作业内容 -->
      <div class="homework-content">
        <p>{{ homeworkInfo.content }}</p>
      </div>

      <!-- 作业图片 -->
      <div class="homework-images" v-if="homeworkInfo.images && homeworkInfo.images.length > 0">
        <div class="image-grid">
          <div v-for="(image, index) in homeworkInfo.images" :key="index" class="image-item">
            <img :src="image.url" :alt="`作业图片${index + 1}`" />
          </div>
        </div>
      </div>

      <!-- 附件列表 -->
      <div class="attachments" v-if="homeworkInfo.attachments && homeworkInfo.attachments.length > 0">
        <div class="attachment-list">
          <template v-for="(attachment, index) in homeworkInfo.attachments" :key="attachment.id">
            <div class="attachment-item" @click="downloadAttachment(attachment)">
              <div class="attachment-icon">
                <img src="/images/teacher/文件格式.png" alt="文件图标" />
              </div>
              <span class="attachment-name">{{ attachment.name }}</span>
              <div class="download-icon">
                <img src="/images/teacher/下载-蓝.png" alt="下载图标" />
              </div>
            </div>
            <n-divider v-if="index < homeworkInfo.attachments.length - 1" vertical class="attachment-divider" />
          </template>
        </div>
      </div>
    </div>

    <!-- 底部操作区域 -->
    <div class="actions-section">
      <n-button type="primary" class="reply-btn" @click="handleReply">
        回复
      </n-button>

      <!-- 回复输入区域 -->
      <div class="reply-input-section" v-if="showReplyInput">
        <div class="reply-input-container">
          <textarea v-model="replyContent" placeholder="请输入回复内容" class="reply-input"></textarea>
          <div class="reply-actions">
            <n-button type="primary" class="send-btn" @click="sendReply">
              发送
            </n-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 我的回复区域 -->
    <div class="my-reply-section" v-if="myReply">
      <h3 class="reply-title">我的回复</h3>
      <div class="reply-item">
        <div class="reply-content">
          <span class="user-tag">本人</span>
          <span class="user-name">{{ myReply.userName }}:</span>
          <span class="reply-text">{{ myReply.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NDivider } from 'naive-ui'
import { ArrowBackOutline } from '@vicons/ionicons5'
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}

// 作业信息
const homeworkInfo = ref({
  title: '作业标题作业标题作业标题作业标',
  content: '作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容内作业内容作业内容作业内容作业内容作业内容作业内容作业内容作业内容作 业内容作业内容',
  status: '已批阅', // '已批阅' 或 '未批阅'
  images: [
    { url: '/images/teacher/homework.png' },
    { url: '/images/teacher/homework.png' },
    { url: '/images/teacher/homework.png' },
    { url: '/images/teacher/homework.png' },
    { url: '/images/teacher/homework.png' }
  ],
  attachments: [
    { id: 1, name: '文件名称.PDF' },
    { id: 2, name: '文件名称.PDF' }
  ]
})

// 下载附件
const downloadAttachment = (attachment: any) => {
  console.log('下载附件:', attachment.name)
  // 这里实现下载逻辑
}

// 回复功能相关数据
const showReplyInput = ref(false)
const replyContent = ref('')

// 我的回复数据
const myReply = ref({
  userName: '王伦过',
  content: '没事多看看课程你就懂了'
})

// 显示回复输入框
const handleReply = () => {
  showReplyInput.value = true
}

// 发送回复
const sendReply = () => {
  if (replyContent.value.trim()) {
    console.log('发送回复:', replyContent.value)
    // 这里实现发送回复的逻辑
    // 发送成功后可以隐藏输入框
    showReplyInput.value = false
    replyContent.value = ''
  }
}
</script>

<style scoped>
.homework-review-view {
  padding: 30px;
  background: #fff;
  height: 100%;
  margin: 0 auto;
}

/* 头部信息区域 */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid #E6E6E6;
}

/* 左侧用户信息 */
.user-info {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.avatar-section{
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #198FD4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar img {
  width: 95%;
  height: 95%;
  object-fit: cover;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.user-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.submit-time {
  font-size: 14px;
  color: #999;
}

/* 右侧作业状态 */
.homework-status {
  display: flex;
  align-items: center;
}

.status-text {
  padding-top: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #0288D1;
}

/* 作业内容区域 */
.content-section {}

.homework-title {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 5px;
  line-height: 1.4;
}

.homework-content {
  margin-bottom: 30px;
}

.homework-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin: 0;
}

/* 作业图片 */
.homework-images {
  margin-bottom: 30px;
}

.image-grid {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.image-item {
  width: 120px;
  height: 120px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 附件列表 */
.attachments {}

.attachment-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  background-color: #F5F8FB;
  padding: 0 10px;
}

.attachment-item {
  display: flex;
  align-items: left;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.attachment-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.attachment-icon {
  width: 16px;
  height: 16px;
}

.attachment-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.attachment-name {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.download-icon {
  width: 16px;
  height: 16px;
}

.download-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 附件分割线 */
.attachment-divider {
  margin: 0 10px;
}

/* 底部操作区域 */
.actions-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 20px;
  gap: 20px;
}

.reply-btn {
  padding: 0 40px;
  font-size: 14px;
  border-radius: 4px;
  background: #0288D1;
  border-color: #0288D1;
  height: 32px;
}

.reply-btn:hover {
  background: #0277bd;
  border-color: #0277bd;
}

/* 回复输入区域 */
.reply-input-section {
  width: 100%;
}

.reply-input-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reply-input {
  width: 100%;
}

/* 自定义输入框样式 */
.reply-input {
  border: 1.5px solid #D8D8D8;
  background-color: #F5F8FB;
  min-height: 86px;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
  resize: none;
  line-height: 1.5;
  color: #000;
}

.reply-input::placeholder {
  color: #999999;
  font-size: 14px;
}

.reply-input:focus {
  border-color: #0288D1;
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
}

.send-btn {
  padding: 0 30px;
  font-size: 14px;
  border-radius: 4px;
  background: #0288D1;
  border-color: #0288D1;
  height: 32px;
}

.send-btn:hover {
  background: #0277bd;
  border-color: #0277bd;
}

/* 我的回复区域 */
.my-reply-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1.5px solid #E6E6E6;
}

.reply-title {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-bottom: 20px;
  padding-bottom: 30px;
  border-bottom: 1.5px solid #E6E6E6;
}

.reply-item {
  background-color: #F5F8FB;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 15px;
}

.reply-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-tag {
  background-color: #E5F3FA;
  color: #0388D1;
  font-size: 8px;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #464646;
  white-space: nowrap;
}

.reply-text {
  font-size: 14px;
  color: #464646;
  line-height: 1.5;
}
</style>