From 412a796ecb240ef1928adae4352ca282c119b1a6 Mon Sep 17 00:00:00 2001
From: yuk255 <yuk255@qq.com>
Date: Tue, 14 Oct 2025 22:03:55 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=BD=9C=E4=B8=9A=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/userCenter.ts              |   55 +-
 src/components/profile/HomeworkContent.vue | 1454 ++++++++++++++++++++
 src/views/Profile.vue                      |  638 +++------
 3 files changed, 1670 insertions(+), 477 deletions(-)
 create mode 100644 src/components/profile/HomeworkContent.vue

diff --git a/src/api/modules/userCenter.ts b/src/api/modules/userCenter.ts
index d868f0a..f954194 100644
--- a/src/api/modules/userCenter.ts
+++ b/src/api/modules/userCenter.ts
@@ -1,15 +1,58 @@
 // 学员中心相关API接口
-import { ApiRequest } from '../request'
-
+import { ApiRequest } from "../request";
 
+// 活动相关API
 export class ActivityListApi {
   static async getActivityList(): Promise<any> {
-    return ApiRequest.get('/aiol/aiolActivity/list')
+    return ApiRequest.get("/aiol/aiolActivity/list");
+  }
+}
+// 用户信息相关API
+export class UserInfoApi {
+  static async editUserInfo(data: any): Promise<any> {
+    return ApiRequest.post("/aiol/aiolUser/edit_profile", data);
   }
 }
 
-export class UserInfoApi {
-  static async editUserInfo(data: any): Promise<any> {
-    return ApiRequest.post('/aiol/aiolUser/edit_profile', data)
+// 作业相关API
+export class HomeworkApi {
+  static async getHomeworkList(params: { type: number }): Promise<any> {
+    try {
+      return await ApiRequest.get("/aiol/aiolHomework/myHomeworkList", params);
+    } catch (error) {
+      console.error("Error fetching homework list:", error);
+      throw error;
+    }
+  }
+
+  static async submitHomework(data: any): Promise<any> {
+    try {
+      return await ApiRequest.post("/aiol/aiolHomework/submit", data);
+    } catch (error) {
+      console.error("Error submitting homework:", error);
+      throw error;
+    }
+  }
+}
+// 考试相关API
+export class ExamApi {
+  static async getExamList(params: { type: number }): Promise<any> {
+    try {
+      return await ApiRequest.get("/aiol/aiolExam/myExamList", params);
+    } catch (error) {
+      console.error("Error fetching exam list:", error);
+      throw error;
+    }
+  }
+}
+// 练习相关API
+export class PracticeApi {
+  static async getExamList(params: { type: number }): Promise<any> {
+    try {
+      return await ApiRequest.get("/aiol/aiolExam//myPracticeList", params);
+    } catch (error) {
+      console.error("Error fetching practice list:", error);
+      throw error;
+    }
   }
 }
diff --git a/src/components/profile/HomeworkContent.vue b/src/components/profile/HomeworkContent.vue
new file mode 100644
index 0000000..f3dd697
--- /dev/null
+++ b/src/components/profile/HomeworkContent.vue
@@ -0,0 +1,1454 @@
+<template>
+  <div class="homework-content">
+    <template v-if="showDetailView && detailAssignment">
+      <!-- 作业详情视图 -->
+      <div class="group_11">
+        <div class="back">
+          <n-button circle @click="back">
+            <template #icon>
+              <n-icon><ArrowBack /></n-icon>
+            </template>
+          </n-button>
+        </div>
+        <!-- 头部信息 -->
+        <div class="box_5">
+          <div class="image-text_2">
+            <!-- <div class="avatar-line"></div> -->
+            <img
+              v-if="detailAssignment.teacherAvatar"
+              :src="detailAssignment.teacherAvatar"
+              alt="教师头像"
+              class="image_22"
+            />
+            <div class="text-group_3">
+              <span class="text_30">{{ detailAssignment.teacherName }}</span>
+              <span class="text_31"
+                >{{ detailAssignment.createTime
+                }}{{
+                  detailAssignment.endTime
+                    ? " -- " + detailAssignment.endTime
+                    : ""
+                }}</span
+              >
+            </div>
+          </div>
+
+          <span class="text_32">
+            <img
+              v-if="detailAssignment.status === 1"
+              src="/images/profile/55.png"
+              alt=""
+            />
+            <span
+              :style="{
+                color: detailAssignment.status === 1 ? '#FF560C' : '#999999',
+                fontSize: '14px',
+              }"
+            >
+              {{
+                detailAssignment.status === 1
+                  ? detailAssignment.submitCount
+                  : getStatusText(detailAssignment.status)
+              }}
+            </span>
+          </span>
+        </div>
+
+        <!-- 作业内容 -->
+        <div class="text-group_4">
+          <div class="course-divider"></div>
+          <span class="text_33">{{ detailAssignment.title }}</span>
+          <div class="description-container">
+            <span
+              class="text_34 description-full-view"
+              v-html="detailAssignment.description"
+            >
+            </span>
+          </div>
+        </div>
+
+        <!-- 作业附件区域 -->
+        <div class="box_6">
+          <div class="attachment-images">
+            <img
+              v-for="(_, index) in detailAssignment.attachments.slice(0, 5)"
+              :key="index"
+              src="/images/traings/traing1.png"
+              :class="['image_' + (24 + index)]"
+            />
+          </div>
+        </div>
+
+        <div
+          class="files-container"
+          v-if="
+            detailAssignment.aiolHomeworkSubmits &&
+            detailAssignment.aiolHomeworkSubmits.length
+          "
+        >
+          <div
+            class="file-items"
+            v-for="item in detailAssignment.aiolHomeworkSubmits"
+            :key="item.id"
+          >
+            <div class="content" v-html="item.content"></div>
+            <!-- <div class="file">
+              <img src="/images/auth/file.png" alt="" class="files-icon" />
+              <span>文件名称.PDF</span>
+              <img src="/images/auth/download.png" alt="" class="files-icon" />
+            </div> -->
+          </div>
+        </div>
+
+        <!-- <div class="course-name">这里是课程名称!!! <span>查看详情></span></div> -->
+
+        <!-- 作业按钮区域 -->
+        <div class="assignment-buttons">
+          <!-- <template
+            v-if="detailAssignment.status === 1"
+          > -->
+          <NButton @click="showUploadFromDetail" type="primary"
+            >上传作业</NButton
+          >
+          <!-- </template> -->
+        </div>
+      </div>
+    </template>
+    <template v-if="showDraftBoxView && draftAssignment">
+      <!-- 草稿箱视图 -->
+      <div>
+        <div class="detail-header">
+          <div class="breadcrumb-nav">
+            <span class="breadcrumb-item" @click="backFromDraftBox"
+              >全部作业</span
+            >
+            <span class="breadcrumb-separator">></span>
+            <span class="breadcrumb-current">草稿箱</span>
+          </div>
+        </div>
+
+        <div class="group_11">
+          <div class="box_5">
+            <div class="image-text_2">
+              <img
+                :src="draftAssignment.teacherAvatar"
+                alt="教师头像"
+                class="image_22"
+              />
+              <div class="text-group_3">
+                <span class="text_30">{{ draftAssignment.teacherName }}</span>
+                <span class="text_31">{{ draftAssignment.createTime }}</span>
+              </div>
+            </div>
+            <span class="text_32">
+              <img
+                v-if="draftAssignment.status === 2"
+                src="/images/profile/55.png"
+                alt=""
+              />
+              <span
+                :style="{
+                  color: draftAssignment.status === 1 ? '#FF560C' : '#999999',
+                  fontSize: '14px',
+                }"
+              >
+                {{
+                  draftAssignment.status === 1
+                    ? draftAssignment.submitCount
+                    : getStatusText(draftAssignment.status)
+                }}
+              </span>
+            </span>
+          </div>
+
+          <!-- 作业内容 -->
+          <div class="text-group_4">
+            <span class="text_33">{{ draftAssignment.title }}</span>
+            <div class="description-container">
+              <span class="text_34 description-full-view">
+                {{ draftAssignment.description }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 作业附件区域 -->
+          <div class="box_6">
+            <div class="attachment-images">
+              <img
+                v-for="(_, index) in draftAssignment.attachments.slice(0, 5)"
+                :key="index"
+                src="/images/traings/traing1.png"
+                :class="['image_' + (24 + index)]"
+              />
+            </div>
+          </div>
+
+          <div class="files-container">
+            <div class="file-items">
+              <img src="/images/auth/file.png" alt="" class="files-icon" />
+              <span>文件名称.PDF</span>
+              <img src="/images/auth/download.png" alt="" class="files-icon" />
+            </div>
+          </div>
+
+          <!-- 草稿操作按钮 -->
+          <div class="assignment-buttons">
+            <NButton @click="showUploadModal(draftAssignment)" type="primary"
+              >上传作业</NButton
+            >
+            <div class="text-wrapper_8 anew-button" @click="reEditDraft">
+              <span class="text_36">重新编辑</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="!showDetailView && !showDraftBoxView">
+      <!-- 作业筛选标签 -->
+      <div v-if="!showDraftBoxView" class="text-wrapper_1 flex-row">
+        <template v-for="item in tabType" :key="item.value">
+          <span
+            class="text_12"
+            :class="{ active: activeHomeworkTab === item.value }"
+            @click="handleHomeworkTabChange(item.value)"
+            >{{ item.label }}</span
+          >
+        </template>
+        <!-- <span class="draftbox" @click="showDraftBox">
+        <img src="/images/auth/mti.png" alt="">
+        <span>草稿箱</span>
+      </span> -->
+      </div>
+
+      <!-- 分割线 -->
+      <div v-if="!showDraftBoxView" class="course-divider"></div>
+      <!-- 作业列表 -->
+      <div>
+        <template v-if="assignments && assignments.length">
+          <div
+            v-for="assignment in assignments"
+            :key="assignment.id"
+            class="group_11"
+          >
+            <!-- 作业头部信息 -->
+            <div class="box_5">
+              <div class="image-text_2">
+                <!-- <div class="avatar-line"></div> -->
+                <img :src="assignment.teacherAvatar" class="image_22" />
+                <div class="text-group_3">
+                  <span class="text_30">{{ assignment.teacherName }}</span>
+                  <span class="text_31"
+                    >{{ assignment.createTime
+                    }}{{
+                      assignment.endTime ? " -- " + assignment.endTime : ""
+                    }}</span
+                  >
+                </div>
+              </div>
+              <span class="text_32">
+                <span
+                  :style="{
+                    color:
+                      assignment.status === 1 || assignment.status === 2
+                        ? '#FF560C'
+                        : '#999999',
+                    fontSize: '14px',
+                  }"
+                >
+                  {{ getStatusText(assignment.status) }}
+                </span>
+              </span>
+            </div>
+
+            <!-- 作业内容 -->
+            <div class="text-group_4">
+              <!-- 分割线 -->
+              <div class="course-divider"></div>
+
+              <span class="text_33">{{ assignment.title }}</span>
+              <div class="description-container">
+                <span
+                  class="text_34 text-truncated"
+                  v-html="assignment.description"
+                >
+                </span>
+              </div>
+            </div>
+
+            <!-- 作业附件区域 -->
+            <div class="box_6">
+              <!-- 附件图片列表 -->
+              <!-- <div class="attachment-images">
+              <img
+                v-for="(_, index) in assignment.attachments.slice(0, 5)"
+                :key="index"
+                src="/images/traings/traing1.png"
+                :class="['image_' + (24 + index)]"
+              />
+            </div> -->
+
+              <div class="attachment-images attachment-number-container">
+                <img
+                  src="/images/profile/55.png"
+                  alt=""
+                  class="attachment-number-icon"
+                />
+                <span class="attachment-number-text"
+                  >{{ assignment.submitCount }}人已完成</span
+                >
+              </div>
+            </div>
+
+            <!-- <div
+              class="files-container"
+              v-if="
+                assignment.aiolHomeworkSubmits &&
+                assignment.aiolHomeworkSubmits.length
+              "
+            >
+              <div
+                class="file-items"
+                v-for="item in assignment.aiolHomeworkSubmits"
+              >
+                <img src="/images/auth/file.png" alt="" class="files-icon" />
+                <span>文件名称.PDF</span>
+                <img
+                  src="/images/auth/download.png"
+                  alt=""
+                  class="files-icon"
+                />
+              </div>
+            </div> -->
+
+            <!-- 作业操作按钮 -->
+            <div class="assignment-buttons">
+              <template v-if="assignment.status === 0">
+                <NButton disabled type="primary">未到作业时间</NButton>
+              </template>
+              <!-- 未完成状态显示两个按钮 -->
+              <template v-else-if="assignment.status === 1">
+                <!-- 查看详细 -->
+                <NButton @click="showUploadModal(assignment)" type="primary"
+                  >上传作业</NButton
+                >
+                <NButton @click="viewAssignmentDetail(assignment)"
+                  >查看详情</NButton
+                >
+              </template>
+              <!-- 已完成状态只显示一个按钮 -->
+              <template v-else>
+                <NButton
+                  @click="viewAssignmentDetail(assignment)"
+                  type="primary"
+                  >查看详情</NButton
+                >
+              </template>
+            </div>
+          </div>
+        </template>
+        <div class="empty" v-else>
+          <n-empty description="没有数据"></n-empty>
+        </div>
+      </div>
+    </template>
+
+    <!-- 上传作业弹窗 -->
+    <div
+      v-if="showModal"
+      class="custom-modal-overlay"
+      @click="closeUploadModal"
+    >
+      <div class="custom-modal" @click.stop>
+        <div v-if="currentAssignment" class="modal-content">
+          <n-form ref="formRef" :model="uploadForm">
+            <!-- <n-form-item label="标题名称" required>
+              <n-input
+                v-model:value="uploadForm.title"
+                placeholder="请输入标题"
+              />
+            </n-form-item> -->
+            <n-form-item label="作业内容" required>
+              <QuillEditor
+                v-model="uploadForm.content"
+                placeholder="请输入内容"
+                height="400px"
+              />
+            </n-form-item>
+            <n-form-item label="上传附件">
+              <n-upload
+                v-model:file-list="uploadForm.files"
+                :max="5"
+                multiple
+                :show-file-list="true"
+                :default-upload="false"
+                :on-before-upload="handleBeforeUpload"
+              >
+                <n-button>选择文件</n-button>
+              </n-upload>
+            </n-form-item>
+          </n-form>
+          <div class="modal-footer">
+            <n-button type="primary" @click="submitAssignment"> 确认 </n-button>
+            <n-button @click="closeUploadModal">取消</n-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import {
+  NFormItem,
+  NForm,
+  NUpload,
+  useMessage,
+} from "naive-ui";
+import { ArrowBack } from "@vicons/ionicons5";
+// @ts-ignore
+import QuillEditor from "@/components/common/QuillEditor.vue";
+import { HomeworkApi } from "@/api/modules/userCenter";
+import { UploadApi } from "@/api/modules/upload";
+import { useUserStore } from "@/stores/user";
+
+const userStore = useUserStore();
+
+const formRef = ref();
+const message = useMessage();
+
+const tabType = ref([
+  { label: "全部作业", value: 4 },
+  { label: "未完成", value: 1 },
+  { label: "已提交", value: 2 },
+  { label: "已完成", value: 3 },
+]);
+
+const statusMap: Record<number, string> = {
+  0: "未开始",
+  1: "未提交",
+  2: "待批阅",
+  3: "已完成",
+  4: "全部",
+};
+
+const getStatusText = (status: number) => {
+  return statusMap[status] || "";
+};
+
+// 定义作业接口
+interface Assignment {
+  id: number;
+  teacherName: string;
+  teacherAvatar: string;
+  createTime: string;
+  endTime: string;
+  status: number;
+  title: string;
+  description: string;
+  attachments: Array<{
+    icon: string;
+    name: string;
+  }>;
+  aiolHomeworkSubmits: Array<any>;
+  submitCount: number;
+  mainImage: string;
+  showFullDescription?: boolean;
+}
+
+// 作业筛选状态
+const activeHomeworkTab = ref(4);
+
+// 详情视图状态
+const showDetailView = ref(false);
+const detailAssignment = ref<Assignment | null>(null);
+
+// 草稿箱视图状态
+const showDraftBoxView = ref(false);
+const draftAssignment = ref<Assignment | null>(null);
+
+// 上传作业弹窗状态
+const showModal = ref(false);
+const currentAssignment = ref<Assignment | null>(null);
+const uploadForm = reactive({
+  title: "",
+  content: "",
+  files: [] as any[],
+});
+
+// 模拟作业数据
+const assignments = ref<Assignment[]>([]);
+
+// 方法
+const handleHomeworkTabChange = async (tab: number) => {
+  activeHomeworkTab.value = tab;
+  await getList();
+};
+
+// 查看作业详情
+const viewAssignmentDetail = (assignment: Assignment) => {
+  detailAssignment.value = assignment;
+  showDetailView.value = true;
+  showDraftBoxView.value = false;
+};
+
+// 从详情页面跳转到上传作业
+const showUploadFromDetail = () => {
+  showUploadModal(detailAssignment.value!);
+};
+
+// 显示草稿箱
+// const showDraftBox = () => {
+//   // 模拟草稿箱数据，实际应该从后端获取
+//   draftAssignment.value = {
+//     id: 1,
+//     title: "教育心理学课程设计作业",
+//     description:
+//       "请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。",
+//     teacherName: "张老师",
+//     teacherAvatar: "/images/traings/traing1.png",
+//     createTime: "2024-01-15",
+//     status: "草稿",
+//     attachments: [
+//       { icon: "/images/auth/file.png", name: "file1.pdf" },
+//       { icon: "/images/auth/file.png", name: "file2.pdf" },
+//     ],
+//     mainImage: "",
+//   };
+//   showDraftBoxView.value = true;
+//   showDetailView.value = false;
+// };
+
+// 返回作业列表（从草稿箱）
+const backFromDraftBox = () => {
+  showDraftBoxView.value = false;
+  draftAssignment.value = null;
+};
+
+// 重新编辑草稿
+const reEditDraft = () => {
+  showUploadModal(draftAssignment.value!);
+};
+
+// 显示上传作业弹窗
+const showUploadModal = (assignment: Assignment) => {
+  currentAssignment.value = assignment;
+  console.log(currentAssignment.value);
+
+  uploadForm.title = "";
+  uploadForm.content = "";
+  uploadForm.files = [];
+  showModal.value = true;
+};
+
+// 关闭上传作业弹窗
+const closeUploadModal = () => {
+  showModal.value = false;
+  currentAssignment.value = null;
+};
+
+const back = () => {
+  showDetailView.value = false;
+  detailAssignment.value = null;
+};
+
+// 文件上传前的处理
+const handleBeforeUpload = (data: { file: any; fileList: any[] }) => {
+  const { file } = data;
+  // 这里可以添加文件类型或大小的验证
+  console.log("准备上传文件:", file);
+  return true; // 返回 true 表示允许添加文件到列表
+};
+
+// 提交作业
+const submitAssignment = async () => {
+  // if (!uploadForm.title.trim()) {
+  //   message.error("请输入标题");
+  //   return;
+  // }
+
+  if (!uploadForm.content.trim()) {
+    message.error("请输入内容");
+    return;
+  }
+
+  // 处理文件上传信息
+  let uploadedFiles: any[] = [];
+  if (uploadForm.files && uploadForm.files.length > 0) {
+    console.log("提交的文件:", uploadForm.files);
+    // 上传文件
+    const uploadPromises = uploadForm.files.map(async (file) => {
+      if (file.url) {
+        // 文件已经上传过，直接返回
+        return {
+          name: file.name,
+          url: file.url,
+        };
+      } else {
+        const uploadRes = await UploadApi.uploadCourseThumbnail(file.file);
+        return {
+          name: file.name,
+          url: uploadRes.data.message,
+        };
+      }
+    });
+    uploadedFiles = await Promise.all(uploadPromises);
+  }
+
+  HomeworkApi.submitHomework({
+    homeworkId: currentAssignment.value?.id,
+    studentId: userStore.user?.id,
+    content: uploadForm.content,
+    status: 2,
+    attachment: uploadedFiles
+      .map((file) => {
+        return file.url;
+      })
+      .join(","),
+  })
+    .then(() => {
+      message.success("作业提交成功");
+      getList(); // 提交后刷新列表
+    })
+    .catch(() => {
+      message.error("作业提交失败，请重试");
+    });
+
+  message.success("作业提交成功");
+
+  closeUploadModal();
+};
+
+const getList = async () => {
+  assignments.value = [];
+  const type =
+    typeof activeHomeworkTab.value === "number" ? activeHomeworkTab.value : 4;
+  const res = await HomeworkApi.getHomeworkList({ type });
+  assignments.value = res.data.result?.map((item: any) => {
+    return {
+      id: item.aiolHomework.id,
+      teacherName: item.realName,
+      teacherAvatar: item.avatar || "",
+      submitCount: item.submitCount || 0,
+      createTime: item.aiolHomework.createTime,
+      endTime: item.aiolHomework.endTime,
+      status: item.aiolHomework.status,
+      title: item.aiolHomework.title,
+      description: item.aiolHomework.description,
+      attachments: item.aiolHomework.attachments || [],
+      mainImage: item.aiolHomework.mainImage || "",
+      aiolHomeworkSubmits: item.aiolHomeworkSubmits || [],
+    };
+  });
+};
+
+onMounted(async () => {
+  await getList();
+});
+</script>
+
+<style scoped>
+/* 筛选标签样式 */
+.text-wrapper_1 {
+  width: 100%;
+  height: 2.08vh;
+  /* 40px转换为vh */
+  align-items: center;
+  margin: 20px 0 20px 0;
+  /* 32px转换为vh */
+  gap: 2.81vw;
+  /* 54px转换为vw：54/1920*100 = 2.81vw */
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.text_12,
+.text_13,
+.text_14,
+.text_15 {
+  font-size: 0.94vw;
+  /* 18px转换为vw */
+  color: #000;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  cursor: pointer;
+  padding: 0.42vh 0;
+  /* 去掉左右内边距，只保留上下 */
+  transition: color 0.3s ease;
+  /* 只保留颜色过渡 */
+  background: transparent;
+  /* 确保背景透明 */
+}
+
+.text_12.active,
+.text_13.active,
+.text_14.active,
+.text_15.active {
+  color: rgba(2, 134, 206, 1);
+  /* 只改变字体颜色，去掉背景色 */
+}
+
+.text_12:hover,
+.text_13:hover,
+.text_14:hover,
+.text_15:hover {
+  color: rgba(2, 134, 206, 1);
+}
+
+/* 课程区域分割线 */
+.course-divider {
+  width: 100%;
+  /* 与课程卡片宽度一致 */
+  height: 1px;
+  /* 1px转换为vh */
+  background: #e6e6e6;
+  margin-bottom: 1vh;
+  /* 与课程列表的间距 */
+}
+
+.draftbox {
+  margin-left: auto;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.draftbox img {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}
+
+.draftbox span {
+  font-size: 16px;
+  color: #000;
+}
+
+.draftbox:hover {
+  color: #40a9ff;
+}
+
+/* 文件容器样式 */
+.files-container {
+  margin: 15px 20px 0 83px;
+  /* width: 100%; */
+  background-color: #f5f9fc;
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+.file-items {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.file-items span {
+  font-size: 12px;
+}
+
+.files-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* 弹窗样式 */
+.custom-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.custom-modal {
+  background: #f7f7f7;
+  width: 799px;
+  max-width: 90vw;
+  /* max-height: 758px; */
+  overflow-y: auto;
+}
+
+.modal-content {
+  padding: 22px;
+  width: 100%;
+  background: #fff;
+}
+
+/* 弹窗表单标签样式 */
+.n-form-item-label {
+  font-size: 18px !important;
+  color: #333 !important;
+  font-weight: 500;
+}
+
+/* 弹窗表单项目间距 */
+.n-form-item {
+  margin-bottom: 24px !important;
+}
+
+/* 弹窗表单项目内部间距 */
+.n-form-item-blank {
+  margin-top: 8px !important;
+}
+
+/* 弹窗底部按钮区域 */
+.modal-footer {
+  display: flex;
+  gap: 12px;
+}
+
+/* 作业部分样式 - 严格按照蓝湖UI */
+.homework-content {
+  width: 100%;
+}
+
+.back {
+  margin: 0 16px;
+}
+
+.empty {
+  margin-top: 10%;
+}
+
+/* 作业卡片主容器 */
+.group_11 {
+  padding-top: 15px;
+  position: relative;
+  width: 100%;
+  height: auto;
+  /* background: url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng75139e59843c2accc2ef713eac90adeeea2be065395a76d5e5e3d7365677e090') -0.05vw -0.05vh no-repeat; */
+  background-size: 100% auto;
+  background-color: #fff;
+  margin: 0.2vh 0 1vh 0;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid #ececec;
+}
+
+/* 头部信息容器 */
+.box_5 {
+  margin: 1vh 0 0 1.2vw;
+  /* 22px 0 0 23px转换 */
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+/* 教师信息 */
+.image-text_2 {
+  width: 8.07vw;
+  /* 155px转换为vw */
+  /* height: 2.81vh; */
+  /* 54px转换为vh */
+  display: flex;
+  align-items: center;
+  /* margin-top: 3.3vh; */
+  /* 25px转换为vh (25/1920*100) */
+  position: relative;
+  gap: 8px;
+}
+
+.avatar-line {
+  position: absolute;
+  left: -4px;
+  top: 53%;
+  transform: translateY(-50%);
+  width: 57px;
+  height: 56px;
+  border-radius: 50%;
+  border: 2px solid #0288d1;
+}
+
+/* 教师头像 */
+.image_22 {
+  width: 2.71vw;
+  /* 52px转换为vw */
+  height: 2.71vw;
+  /* 改为vw单位，保持正圆形 */
+  border-radius: 50%;
+  object-fit: cover;
+  /* margin-top: 2vh; */
+  /* 头像向下移动 */
+}
+
+.image-avatar {
+  width: 2.71vw;
+  /* 52px转换为vw */
+  height: 2.71vw;
+  border: 2px solid #000;
+  background-color: pink;
+}
+
+/* 教师详细信息容器 */
+.text-group_3 {
+  /* width: 4.43vw; */
+  /* 85px转换为vw */
+  height: auto;
+  /* 改为自适应高度 */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  /* 增加垂直间距 */
+  margin-left: 0.52vw;
+  /* 10px转换为vw，头像和姓名之间的间距 */
+  /* margin-top: -2vh; */
+  /* 25px转换为vh (25/1920*100) */
+}
+
+/* 教师姓名 */
+.text_30 {
+  width: 2.81vw;
+  /* 54px转换为vw */
+  height: 1.3vh;
+  /* 25px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(51, 51, 51, 1);
+  font-size: 0.94vw;
+  /* 18px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.3vh;
+  /* 恢复原来的行高 */
+  margin-top: 0.5vh;
+  /* 调整姓名位置 */
+}
+
+/* 作业时间 */
+.text_31 {
+  overflow-wrap: break-word;
+  color: #999999;
+  font-size: 14px;
+  /* 14px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  margin-top: 1.2vh;
+  margin-top: 15px;
+  /* 调整时间与姓名的间距 */
+}
+
+/* 作业状态 */
+.text_32 {
+  width: auto;
+  /* 42px转换为vw */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  margin-top: 0.47vh;
+  margin-right: 25px;
+  /* 9px转换为vh */
+  display: flex;
+  align-items: center;
+}
+
+.text_32 img {
+  margin-right: 7px;
+  width: 16px;
+  height: 16px;
+}
+
+/* 作业内容区域 */
+.text-group_4 {
+  /* width: 48.02vw; */
+  /* 922px转换为vw */
+  height: auto;
+  /* 改为自适应高度 */
+  margin: 2vh 1vw 0 5vw;
+  /* 减少顶部margin，让内容更紧凑 */
+  flex-grow: 1;
+  /* 允许内容区域伸展 */
+}
+
+/* 作业标题 */
+.text_33 {
+  width: 16.67vw;
+  /* 320px转换为vw */
+  min-height: 1.46vh;
+  /* 最小高度，允许内容增长 */
+  height: auto;
+  /* 自适应高度 */
+  overflow-wrap: break-word;
+  color: rgba(0, 0, 0, 1);
+  font-size: 1.04vw;
+  /* 20px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: normal;
+  /* 允许文本换行 */
+  line-height: 1.8vh;
+  /* 增加行高，提高可读性 */
+  padding-top: 10px;
+  padding-bottom: 5px;
+  margin-bottom: 1vh;
+  /* 添加底部间距 */
+  display: block;
+  /* 确保是块级元素 */
+}
+
+/* 作业描述容器 */
+.description-container {
+  /* width: 48.02vw; */
+  /* 922px转换为vw */
+  position: relative;
+}
+
+/* 作业描述 */
+.text_34 {
+  width: 100%;
+  min-height: 1.15vh;
+  /* 最小高度 */
+  height: auto;
+  /* 自适应高度 */
+  overflow-wrap: break-word;
+  color: rgba(102, 102, 102, 1);
+  font-size: 0.83vw;
+  /* 16px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: normal;
+  /* 允许文本换行 */
+  line-height: 1.8vh;
+  /* 增加行高，提高可读性 */
+  display: block;
+  /* 确保是块级元素 */
+  margin-top: 0;
+  /* 移除顶部间距，因为已经在标题添加了底部间距 */
+  transition: all 0.3s ease;
+  /* 添加过渡动画 */
+}
+
+/* 文本截断样式 */
+.text_34.text-truncated {
+  /* display: -webkit-box; */
+  -webkit-line-clamp: 1;
+  line-height: 1.4;
+  /* 限制显示1行 */
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description-full-view {
+  white-space: pre-wrap;
+  line-height: 1.6;
+  color: #666;
+  font-size: 14px;
+}
+
+/* 展开/收起按钮 */
+.expand-toggle {
+  color: #1890ff;
+  cursor: pointer;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  margin-left: 0.5vw;
+  user-select: none;
+  transition: color 0.3s ease;
+}
+
+.expand-toggle:hover {
+  color: #40a9ff;
+  text-decoration: underline;
+}
+
+/* 作业详情弹窗样式 */
+.assignment-detail {
+  padding: 20px 0;
+}
+
+.detail-header {
+  /* padding-bottom: 20px; */
+}
+
+.detail-header h2 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.assignment-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.teacher-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.teacher-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.teacher-name {
+  font-weight: 500;
+  color: #333;
+}
+
+.assignment-time {
+  color: #666;
+  font-size: 14px;
+}
+
+.assignment-status {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.assignment-status.未完成,
+.assignment-status.待提交 {
+  color: #ff4d4f;
+}
+
+.assignment-status.已完成,
+.assignment-status.已完成 {
+  color: #52c41a;
+}
+
+.detail-content h3 {
+  margin: 20px 0 10px 0;
+  color: #333;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.description-full {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.attachments-section {
+  margin-top: 20px;
+}
+
+.attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.attachment-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+}
+
+.attachment-name {
+  color: #333;
+  font-size: 14px;
+}
+
+/* 附件区域 */
+.box_6 {
+  /* width: 48.65vw; */
+  /* 934px转换为vw */
+  height: auto;
+  /* 改为自适应高度 */
+  margin: 0 0 0 5vw;
+  /* 18px 0 0 67px转换 */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 附件小图标 */
+.thumbnail_6 {
+  width: 0.83vw;
+  /* 16px转换为vw */
+  height: 0.83vw;
+  /* 保持宽高比一致 */
+}
+
+/* 附件大图标 */
+.image_23 {
+  width: 0.83vw;
+  /* 16px转换为vw */
+  height: 2.03vh;
+  /* 39px转换为vh */
+  margin: 6.51vh 0 0 0.94vw;
+  /* 125px 0 0 18px转换 */
+}
+
+/* 附件数量文本 */
+.text_35 {
+  width: 4.27vw;
+  /* 82px转换为vw */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  margin: 7.76vh 0 0 0.31vw;
+  /* 149px 0 0 6px转换 */
+  position: absolute;
+}
+
+/* 附件头部区域 */
+.attachment-header {
+  position: relative;
+  height: 3vh;
+  margin-bottom: 1vh;
+}
+
+/* 附件图片容器 */
+.attachment-images {
+  display: flex;
+  gap: 0.7vw;
+  align-items: center;
+  margin-top: 12px;
+  /* margin-left: 2.5vh; */
+}
+
+.attachment-number-container {
+  justify-content: left;
+  gap: 0;
+  align-items: center;
+}
+
+.attachment-number-icon {
+  width: 14px;
+  height: 12px;
+}
+
+.attachment-number-text {
+  margin-left: 5px;
+  font-size: 14px;
+  color: #999;
+}
+
+/* 附件图片样式 - 使用flex布局避免重叠 */
+.image_24,
+.image_25,
+.image_26,
+.image_27,
+.image_28 {
+  width: 6.5vw;
+  /* 缩小图片尺寸 */
+  height: 6.5vw;
+  /* 保持正方形 */
+  object-fit: cover;
+  border: 0.05vw solid #e9ecef;
+}
+
+/* 作业按钮区域 */
+.assignment-buttons {
+  display: flex;
+  gap: 1vw;
+  margin: 1vh 0 2vh 4.95vw;
+}
+
+/* 提交按钮容器 */
+.text-wrapper_8 {
+  height: 1.72vh;
+  /* 33px转换为vh */
+  width: 5.31vw;
+  /* 102px转换为vw */
+  position: relative;
+  /* 改为相对定位 */
+  cursor: pointer;
+  align-self: flex-start;
+  /* 按钮靠左对齐 */
+  border-radius: 0.2vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #0288d1;
+  color: #fff;
+}
+
+/* 上传作业按钮 - 未完成状态 */
+.submit-button {
+  width: 102px;
+  height: 33px;
+  border: 1px solid #0288d1;
+}
+
+.anew-button {
+  width: 102px;
+  height: 33px;
+  background-color: #fff;
+  color: #0288d1 !important;
+  border: 1px solid #0288d1;
+  font-size: 14px;
+}
+
+/* 查看情况按钮 - 未完成状态 */
+.view-button {
+  width: 102px;
+  height: 33px;
+  background-color: white;
+  border: 1px solid #0288d1;
+  color: #0288d1;
+  font-size: 14px;
+}
+
+/* 查看详情按钮 - 已完成状态 */
+.details-button {
+  width: 102px;
+  height: 33px;
+  background-color: #0288d1;
+  color: white !important;
+}
+
+/* 提交按钮文字 */
+.text_36 {
+  width: auto;
+  /* 自适应宽度 */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  overflow-wrap: break-word;
+  color: #fff;
+  font-size: 14px;
+  /* 14px转换为vw */
+  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 1.04vh;
+  margin: 0;
+}
+
+.text-view {
+  color: #0288d1;
+}
+
+/* 主图样式 */
+.image_29 {
+  position: absolute;
+  left: 4.95vw;
+  /* 95px转换为vw */
+  top: 12vh;
+  /* 调整位置，避免与附件重叠 */
+  width: 6.98vw;
+  /* 134px转换为vw */
+  height: 6.98vh;
+  /* 134px转换为vh */
+  object-fit: cover;
+  border-radius: 0.3vw;
+  border: 0.05vw solid #e9ecef;
+}
+
+/* 面包屑导航样式 */
+.breadcrumb-nav {
+  display: flex;
+  align-items: center;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  color: #666;
+  margin-bottom: 1.04vh;
+  /* 20px转换为vh */
+}
+
+.breadcrumb-item {
+  width: 3.39vw;
+  /* 65px转换为vw */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  color: #333333;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.breadcrumb-item:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+.breadcrumb-separator {
+  margin: 0 0.52vw;
+  /* 10px转换为vw */
+  color: #999;
+}
+
+.breadcrumb-current {
+  width: 2.97vw;
+  /* 57px转换为vw */
+  height: 1.04vh;
+  /* 20px转换为vh */
+  font-family: AppleSystemUIFont, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: 0.73vw;
+  /* 14px转换为vw */
+  color: #999999;
+  line-height: 1.04vh;
+  /* 20px转换为vh */
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.course-name {
+  margin: 10px 20px 0 83px;
+  font-size: 14px;
+  color: #666;
+}
+
+.course-name span {
+  color: #0288d1;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 56cab2c..f365413 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -134,269 +134,7 @@
 
 
         <!-- 作业内容 -->
-        <div v-else-if="isHomeworkTab" class="homework-content">
-          <!-- 作业筛选标签 -->
-          <div v-if="!showDraftBoxView" class="text-wrapper_1 flex-row">
-            <span class="text_12" :class="{ active: activeHomeworkTab === 'all' }"
-              @click="handleHomeworkTabChange('all')">全部作业</span>
-            <span class="text_13" :class="{ active: activeHomeworkTab === 'pending' }"
-              @click="handleHomeworkTabChange('pending')">未完成</span>
-            <span class="text_14" :class="{ active: activeHomeworkTab === 'completed' }"
-              @click="handleHomeworkTabChange('completed')">已完成</span>
-            <span class="draftbox" @click="showDraftBox">
-              <img src="/images/auth/mti.png" alt="">
-              <span>草稿箱</span>
-            </span>
-          </div>
-          <!-- 分割线 -->
-          <div v-if="!showDraftBoxView" class="course-divider"></div>
-
-          <!-- 面包屑 -->
-          <!-- <div class="breadcrumb-wrapper flex-row">
-            <span class="text_15">全部作业</span>
-            <span class="text_15">></span>
-            <span class="text_15 homework">作业名称</span>
-          </div> -->
-
-          <!-- 作业详情视图 -->
-          <div v-if="showDetailView && detailAssignment">
-            <!-- <div class="detail-header">
-              <div class="breadcrumb-nav">
-                <span class="breadcrumb-item" @click="backToAssignmentList">全部作业</span>
-                <span class="breadcrumb-separator">></span>
-                <span class="breadcrumb-current">作业名称</span>
-              </div>
-            </div> -->
-
-            <div class="group_11">
-              <!-- 头部信息 -->
-              <div class="box_5">
-                <div class="image-text_2">
-                  <div class="avatar-line"></div>
-                  <img :src="detailAssignment.teacherAvatar" alt="教师头像" class="image_22" />
-                  <div class="text-group_3">
-                    <span class="text_30">{{ detailAssignment.teacherName }}</span>
-                    <span class="text_31">{{ detailAssignment.assignTime }}</span>
-                  </div>
-                </div>
-
-                <span class="text_32">
-                  <img v-if="detailAssignment.status === '已提交'" src="/images/profile/55.png" alt="">
-                  <span :style="{
-                    color: detailAssignment.status === '未完成' || detailAssignment.status === '待提交' ? '#FF560C' : '#999999',
-                    fontSize: '14px'
-                  }">
-                    {{ detailAssignment.status === '未完成' || detailAssignment.status === '待提交' ? '未完成' :
-                    (detailAssignment.status === '已完成' ? '已完成' : '541人已完成') }}
-                  </span>
-                </span>
-              </div>
-
-              <!-- 作业内容 -->
-              <div class="text-group_4">
-                <div class="course-divider"></div>
-                <span class="text_33">{{ detailAssignment.title }}</span>
-                <div class="description-container">
-                  <span class="text_34 description-full-view">
-                    {{ detailAssignment.description }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 作业附件区域 -->
-              <div class="box_6">
-                <div class="attachment-images">
-                  <img v-for="(_, index) in detailAssignment.attachments.slice(0, 5)" :key="index"
-                    src="/images/traings/traing1.png" :class="['image_' + (24 + index)]" />
-                </div>
-              </div>
-
-              <div class="files-container">
-                <div class="file-items">
-                  <img src="/images/auth/file.png" alt="" class="files-icon">
-                  <span>文件名称.PDF</span>
-                  <img src="/images/auth/download.png" alt="" class="files-icon">
-                </div>
-                <div class="file-items">
-                  <img src="/images/auth/file.png" alt="" class="files-icon">
-                  <span>文件名称.PDF</span>
-                  <img src="/images/auth/download.png" alt="" class="files-icon">
-                </div>
-              </div>
-
-              <div class="course-name">这里是课程名称!!! <span>查看详情></span></div>
-
-
-              <!-- 作业按钮区域 -->
-              <div class="assignment-buttons">
-                <template v-if="detailAssignment.status === '未完成' || detailAssignment.status === '待提交'">
-                  <div class="text-wrapper_8 submit-button" @click="showUploadFromDetail">
-                    <span class="">上传作业</span>
-                  </div>
-
-                </template>
-              </div>
-            </div>
-          </div>
-
-          <!-- 草稿箱视图 -->
-          <div v-if="showDraftBoxView && draftAssignment">
-            <div class="detail-header">
-              <div class="breadcrumb-nav">
-                <span class="breadcrumb-item" @click="backFromDraftBox">全部作业</span>
-                <span class="breadcrumb-separator">></span>
-                <span class="breadcrumb-current">草稿箱</span>
-              </div>
-            </div>
-
-            <div class="group_11">
-              <!-- 头部信息 -->
-              <div class="box_5">
-                <div class="image-text_2">
-                  <div class="avatar-line"></div>
-                  <img :src="draftAssignment.teacherAvatar" alt="教师头像" class="image_22" />
-                  <div class="text-group_3">
-                    <span class="text_30">{{ draftAssignment.teacherName }}</span>
-                    <span class="text_31">{{ draftAssignment.assignTime }}</span>
-                  </div>
-                </div>
-                <span class="text_32">
-                  <img v-if="draftAssignment.status === '已提交'" src="/images/profile/55.png" alt="">
-                  <span :style="{
-                    color: draftAssignment.status === '未完成' || draftAssignment.status === '待提交' ? '#FF560C' : '#999999',
-                    fontSize: '14px'
-                  }">
-                    {{ draftAssignment.status === '未完成' || draftAssignment.status === '待提交' ? '未完成' :
-                    (draftAssignment.status === '已完成' ? '已完成' : '541人已完成') }}
-                  </span>
-                </span>
-              </div>
-
-              <!-- 作业内容 -->
-              <div class="text-group_4">
-                <span class="text_33">{{ draftAssignment.title }}</span>
-                <div class="description-container">
-                  <span class="text_34 description-full-view">
-                    {{ draftAssignment.description }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 作业附件区域 -->
-              <div class="box_6">
-                <div class="attachment-images">
-                  <img v-for="(_, index) in draftAssignment.attachments.slice(0, 5)" :key="index"
-                    src="/images/traings/traing1.png" :class="['image_' + (24 + index)]" />
-                </div>
-              </div>
-
-              <div class="files-container">
-                <div class="file-items">
-                  <img src="/images/auth/file.png" alt="" class="files-icon">
-                  <span>文件名称.PDF</span>
-                  <img src="/images/auth/download.png" alt="" class="files-icon">
-                </div>
-                <div class="file-items">
-                  <img src="/images/auth/file.png" alt="" class="files-icon">
-                  <span>文件名称.PDF</span>
-                  <img src="/images/auth/download.png" alt="" class="files-icon">
-                </div>
-              </div>
-
-              <div class="course-name">这里是课程名称!!! <span>查看详情></span></div>
-
-              <!-- 作业按钮区域 -->
-              <div class="assignment-buttons">
-                <div class="text-wrapper_8 submit-button" @click="showUploadModal(draftAssignment)">
-                  <span class="text_36">上传作业</span>
-                </div>
-                <div class="text-wrapper_8 anew-button" @click="reEditDraft">
-                  <span class="text_36">重新编辑</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 作业列表 -->
-          <div v-else-if="!showDetailView && !showDraftBoxView">
-            <div v-for="assignment in filteredAssignments" :key="assignment.id" class="group_11">
-              <!-- 作业头部信息 -->
-              <div class="box_5">
-                <div class="image-text_2">
-                  <div class="avatar-line"></div>
-                  <img src="/images/traings/traing1.png" class="image_22" />
-                  <div class="text-group_3">
-                    <span class="text_30">{{ assignment.teacherName }}</span>
-                    <span class="text_31">{{ assignment.assignTime }}</span>
-                  </div>
-                </div>
-                <span class="text_32">
-                  <span :style="{
-                    color: assignment.status === '未完成' || assignment.status === '待提交' ? '#FF560C' : '#999999',
-                    fontSize: '14px'
-                  }">
-                    {{ assignment.status === '未完成' || assignment.status === '待提交' ? '未完成' : '已完成' }}
-                  </span>
-                </span>
-              </div>
-
-
-              <!-- 作业内容 -->
-              <div class="text-group_4">
-                <!-- 分割线 -->
-                <div class="course-divider"></div>
-
-                <span class="text_33">{{ assignment.title }}</span>
-                <div class="description-container">
-                  <span class="text_34 text-truncated">
-                    {{ assignment.description }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 作业附件区域 -->
-              <div class="box_6">
-
-
-                <!-- 附件图片列表 -->
-                <div class="attachment-images">
-                  <img v-for="(_, index) in assignment.attachments.slice(0, 5)" :key="index"
-                    src="/images/traings/traing1.png" :class="['image_' + (24 + index)]" />
-                </div>
-
-                <div class="attachment-images attachment-number-container">
-                  <img src="/images/profile/55.png" alt="" class="attachment-number-icon">
-                  <span class="attachment-number-text">541人已完成</span>
-                </div>
-
-
-
-              </div>
-
-              <!-- 作业按钮区域 -->
-              <div class="assignment-buttons">
-                <!-- 未完成状态显示两个按钮 -->
-                <template v-if="assignment.status === '未完成' || assignment.status === '待提交'">
-                  <div class="text-wrapper_8 view-button" @click="showUploadModal(assignment)">
-                    <span class="text_36 text-view">上传作业</span>
-                  </div>
-                  <!-- 查看详细  -->
-                  <div class="text-wrapper_8 details-button" @click="viewAssignmentDetail(assignment)">
-                    <span class="text_36">查看详情</span>
-                  </div>
-                </template>
-                <!-- 已完成状态只显示一个按钮 -->
-                <template v-else>
-                  <div class="text-wrapper_8 details-button" @click="viewAssignmentDetail(assignment)">
-                    <span class="text_36">查看详情</span>
-                  </div>
-                </template>
-              </div>
-
-
-            </div>
-          </div>
-        </div>
+        <HomeworkContent v-else-if="isHomeworkTab"></HomeworkContent>
 
         <!-- 考试内容 -->
         <div v-else-if="isExamTab" class="exam-content">
@@ -849,58 +587,15 @@
       </div>
     </div>
   </div>
-
-  <!-- 上传作业弹窗 -->
-  <div v-if="showModal" class="custom-modal-overlay" @click="closeUploadModal">
-    <div class="custom-modal" @click.stop>
-      <div v-if="currentAssignment" class="modal-content">
-        <n-form>
-          <div class="form-item">
-            <label class="form-label">标题名称 <span class="required">*</span></label>
-            <input v-model="uploadForm.title" type="text" class="form-input" placeholder="" />
-          </div>
-          <n-form-item label="编辑内容" required>
-            <QuillEditor v-model="uploadForm.content" placeholder="请输入内容" height="400px" />
-          </n-form-item>
-          <!-- <n-form-item label="上传文件" required>
-            <n-upload multiple directory-dnd :custom-request="customRequest" :default-upload="false">
-              <n-button>选择文件</n-button>
-            </n-upload>
-            <div class="file-list" v-if="uploadForm.files.length > 0">
-              <div v-for="(file, index) in uploadForm.files" :key="index" class="file-item">
-                <div class="file-icon">
-                  <img src="/images/auth/file.png" alt="文件图标" />
-                </div>
-                <div class="file-info">
-                  <div class="file-name">{{ file.name }}</div>
-                  <div class="file-size">{{ (file.size / 1024).toFixed(2) }}KB</div>
-                </div>
-                <button class="file-delete" @click="removeFile(index)">🗑️</button>
-              </div>
-            </div>
-          </n-form-item> -->
-        </n-form>
-        <div class="modal-footer">
-          <button type="primary" @click="submitAssignment" style="margin-left: 12px;">确认</button>
-          <button @click="closeUploadModal" class="cancel">取消</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
   <!-- 考试详情页面 -->
-
-
-
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onActivated, reactive } from 'vue'
-import { useMessage, NInput, NForm, NFormItem } from 'naive-ui'
+import { useMessage, NInput } from 'naive-ui'
 // import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/stores/user'
 import SafeAvatar from '@/components/common/SafeAvatar.vue'
-import QuillEditor from '@/components/common/QuillEditor.vue'
 import InstantMessage from '@/components/InstantMessage.vue'
 import { useRouter, useRoute } from 'vue-router'
 import { MessageApi, type BackendMessageItem } from '@/api'
@@ -909,6 +604,7 @@ import CourseContent from '@/components/profile/CourseContent.vue'
 import PracticeContent from '@/components/profile/PracticeContent.vue'
 import ActivityContent from '@/components/profile/ActivityContent.vue'
 import MaterialsContent from '@/components/profile/MaterialsContent.vue'
+import HomeworkContent from '@/components/profile/HomeworkContent.vue'
 
 // const { t, locale } = useI18n()
 const router = useRouter()
@@ -939,20 +635,20 @@ const route = useRoute()
 // }
 
 // 定义作业接口
-interface Assignment {
-  id: number
-  teacherName: string
-  teacherAvatar: string
-  assignTime: string
-  status: string
-  title: string
-  description: string
-  attachments: Array<{
-    icon: string
-    name: string
-  }>
-  mainImage: string
-}
+// interface Assignment {
+//   id: number
+//   teacherName: string
+//   teacherAvatar: string
+//   assignTime: string
+//   status: string
+//   title: string
+//   description: string
+//   attachments: Array<{
+//     icon: string
+//     name: string
+//   }>
+//   mainImage: string
+// }
 
 // 定义考试接口
 interface Exam {
@@ -1087,7 +783,7 @@ const activeTab = ref<TabType>('courses')
 // const activeCourseTab = ref('all')
 
 // 作业筛选状态
-const activeHomeworkTab = ref('all')
+// const activeHomeworkTab = ref('all')
 
 // 考试筛选状态
 const activeExamTab = ref('all')
@@ -1306,71 +1002,71 @@ const downloadFiles = reactive([
 // ]
 
 // 模拟作业数据（基于蓝湖UI设计）
-const mockAssignments: Assignment[] = [
-  {
-    id: 1,
-    teacherName: '张老师',
-    teacherAvatar: '/images/traings/traing1.png',
-    assignTime: '2024-01-15',
-    status: '待提交',
-    title: '教育心理学课程设计作业',
-    description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
-    attachments: [
-      { icon: '/images/traings/traing1.png', name: '作业要求.pdf' },
-      { icon: '/images/traings/traing1.png', name: '参考资料.docx' },
-      { icon: '/images/traings/traing1.png', name: '模板文件.pptx' },
-      { icon: '/images/traings/traing1.png', name: '评分标准.pdf' },
-      { icon: '/images/traings/traing1.png', name: '案例分析.xlsx' }
-    ],
-    mainImage: '/images/traings/traing1.png'
-  },
-  {
-    id: 2,
-    teacherName: '李老师',
-    teacherAvatar: '/images/traings/traing1.png',
-    assignTime: '2024-01-20',
-    status: '已完成',
-    title: '现代教育技术应用实践报告',
-    description: '结合本学期所学的现代教育技术知识，选择一个具体的教学场景，设计并实施一个融合信息技术的教学活动，撰写实践报告。',
-    attachments: [
-      { icon: '/images/traings/traing1.png', name: '实践指导.pdf' },
-      { icon: '/images/traings/traing1.png', name: '报告模板.docx' },
-      { icon: '/images/traings/traing1.png', name: '技术工具清单.xlsx' },
-      { icon: '/images/traings/traing1.png', name: '评价量表.pdf' },
-      { icon: '/images/traings/traing1.png', name: '优秀案例.pptx' }
-    ],
-    mainImage: '/images/traings/traing1.png'
-  },
-  {
-    id: 3,
-    teacherName: '王老师',
-    teacherAvatar: '/images/traings/traing1.png',
-    assignTime: '2024-01-18',
-    status: '未完成',
-    title: '数字化教学资源开发',
-    description: '开发一套完整的数字化教学资源，包括课件制作、视频录制、在线测试设计等，要求体现现代教育技术的应用特点。',
-    attachments: [
-      { icon: '/images/traings/traing1.png', name: '开发指南.pdf' },
-      { icon: '/images/traings/traing1.png', name: '技术要求.docx' },
-      { icon: '/images/traings/traing1.png', name: '示例资源.zip' }
-    ],
-    mainImage: '/images/traings/traing1.png'
-  },
-  {
-    id: 4,
-    teacherName: '刘老师',
-    teacherAvatar: '/images/traings/traing1.png',
-    assignTime: '2024-01-10',
-    status: '已完成',
-    title: '在线教育平台使用报告',
-    description: '体验并分析主流在线教育平台的功能特点，撰写详细的使用报告和改进建议。',
-    attachments: [
-      { icon: '/images/traings/traing1.png', name: '平台列表.pdf' },
-      { icon: '/images/traings/traing1.png', name: '评价标准.docx' }
-    ],
-    mainImage: '/images/traings/traing1.png'
-  }
-]
+// const mockAssignments: Assignment[] = [
+//   {
+//     id: 1,
+//     teacherName: '张老师',
+//     teacherAvatar: '/images/traings/traing1.png',
+//     assignTime: '2024-01-15',
+//     status: '待提交',
+//     title: '教育心理学课程设计作业',
+//     description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
+//     attachments: [
+//       { icon: '/images/traings/traing1.png', name: '作业要求.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '参考资料.docx' },
+//       { icon: '/images/traings/traing1.png', name: '模板文件.pptx' },
+//       { icon: '/images/traings/traing1.png', name: '评分标准.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '案例分析.xlsx' }
+//     ],
+//     mainImage: '/images/traings/traing1.png'
+//   },
+//   {
+//     id: 2,
+//     teacherName: '李老师',
+//     teacherAvatar: '/images/traings/traing1.png',
+//     assignTime: '2024-01-20',
+//     status: '已完成',
+//     title: '现代教育技术应用实践报告',
+//     description: '结合本学期所学的现代教育技术知识，选择一个具体的教学场景，设计并实施一个融合信息技术的教学活动，撰写实践报告。',
+//     attachments: [
+//       { icon: '/images/traings/traing1.png', name: '实践指导.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '报告模板.docx' },
+//       { icon: '/images/traings/traing1.png', name: '技术工具清单.xlsx' },
+//       { icon: '/images/traings/traing1.png', name: '评价量表.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '优秀案例.pptx' }
+//     ],
+//     mainImage: '/images/traings/traing1.png'
+//   },
+//   {
+//     id: 3,
+//     teacherName: '王老师',
+//     teacherAvatar: '/images/traings/traing1.png',
+//     assignTime: '2024-01-18',
+//     status: '未完成',
+//     title: '数字化教学资源开发',
+//     description: '开发一套完整的数字化教学资源，包括课件制作、视频录制、在线测试设计等，要求体现现代教育技术的应用特点。',
+//     attachments: [
+//       { icon: '/images/traings/traing1.png', name: '开发指南.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '技术要求.docx' },
+//       { icon: '/images/traings/traing1.png', name: '示例资源.zip' }
+//     ],
+//     mainImage: '/images/traings/traing1.png'
+//   },
+//   {
+//     id: 4,
+//     teacherName: '刘老师',
+//     teacherAvatar: '/images/traings/traing1.png',
+//     assignTime: '2024-01-10',
+//     status: '已完成',
+//     title: '在线教育平台使用报告',
+//     description: '体验并分析主流在线教育平台的功能特点，撰写详细的使用报告和改进建议。',
+//     attachments: [
+//       { icon: '/images/traings/traing1.png', name: '平台列表.pdf' },
+//       { icon: '/images/traings/traing1.png', name: '评价标准.docx' }
+//     ],
+//     mainImage: '/images/traings/traing1.png'
+//   }
+// ]
 
 // 模拟考试数据
 const mockExams: Exam[] = [
@@ -2025,14 +1721,14 @@ const mockFollows = [
 // })
 
 // 获取筛选后的作业
-const filteredAssignments = computed(() => {
-  if (activeHomeworkTab.value === 'pending') {
-    return mockAssignments.filter(assignment => assignment.status === '待提交' || assignment.status === '未完成')
-  } else if (activeHomeworkTab.value === 'completed') {
-    return mockAssignments.filter(assignment => assignment.status === '已完成' || assignment.status === '已完成')
-  }
-  return mockAssignments
-})
+// const filteredAssignments = computed(() => {
+//   if (activeHomeworkTab.value === 'pending') {
+//     return mockAssignments.filter(assignment => assignment.status === '待提交' || assignment.status === '未完成')
+//   } else if (activeHomeworkTab.value === 'completed') {
+//     return mockAssignments.filter(assignment => assignment.status === '已完成' || assignment.status === '已完成')
+//   }
+//   return mockAssignments
+// })
 
 // 获取筛选后的考试
 const filteredExams = computed(() => {
@@ -2148,9 +1844,9 @@ const handleMenuSelect = (key: TabType) => {
 // }
 
 // 处理作业筛选变化
-const handleHomeworkTabChange = (tab: string) => {
-  activeHomeworkTab.value = tab
-}
+// const handleHomeworkTabChange = (tab: string) => {
+//   activeHomeworkTab.value = tab
+// }
 
 // 处理考试筛选变化
 const handleExamTabChange = (tab: string) => {
@@ -3088,23 +2784,23 @@ const getTabTitle = (tab: TabType) => {
 }
 
 // 上传作业弹窗状态
-const showModal = ref(false)
-const currentAssignment = ref<Assignment | null>(null)
-const uploadForm = reactive({
-  title: '',
-  content: '',
-  files: [] as File[]
-})
+// const showModal = ref(false)
+// const currentAssignment = ref<Assignment | null>(null)
+// const uploadForm = reactive({
+//   title: '',
+//   content: '',
+//   files: [] as File[]
+// })
 
 
 
 // 作业详情视图状态
-const showDetailView = ref(false)
-const detailAssignment = ref<Assignment | null>(null)
+// const showDetailView = ref(false)
+// const detailAssignment = ref<Assignment | null>(null)
 
 // 草稿箱视图状态
-const showDraftBoxView = ref(false)
-const draftAssignment = ref<Assignment | null>(null)
+// const showDraftBoxView = ref(false)
+// const draftAssignment = ref<Assignment | null>(null)
 
 // 考试详情视图状态
 
@@ -3122,11 +2818,11 @@ const draftAssignment = ref<Assignment | null>(null)
 // }
 
 // 查看作业详情
-const viewAssignmentDetail = (assignment: Assignment) => {
-  detailAssignment.value = assignment
-  showDetailView.value = true
-  showDraftBoxView.value = false
-}
+// const viewAssignmentDetail = (assignment: Assignment) => {
+//   detailAssignment.value = assignment
+//   showDetailView.value = true
+//   showDraftBoxView.value = false
+// }
 
 // 返回作业列表
 // const backToAssignmentList = () => {
@@ -3135,78 +2831,78 @@ const viewAssignmentDetail = (assignment: Assignment) => {
 // }
 
 // 从详情页面跳转到上传作业
-const showUploadFromDetail = () => {
-  showUploadModal(detailAssignment.value!)
-}
+// const showUploadFromDetail = () => {
+//   showUploadModal(detailAssignment.value!)
+// }
 
 // 显示草稿箱
-const showDraftBox = () => {
-  // 模拟草稿箱数据，实际应该从后端获取
-  draftAssignment.value = {
-    id: 1,
-    title: '教育心理学课程设计作业',
-    description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
-    teacherName: '张老师',
-    teacherAvatar: '/images/traings/traing1.png',
-    assignTime: '2024-01-15',
-    status: '草稿',
-    attachments: [
-      { icon: '/images/auth/file.png', name: 'file1.pdf' },
-      { icon: '/images/auth/file.png', name: 'file2.pdf' }
-    ],
-    mainImage: '/images/traings/traing1.png'
-  }
-  showDraftBoxView.value = true
-  showDetailView.value = false
-}
+// const showDraftBox = () => {
+//   // 模拟草稿箱数据，实际应该从后端获取
+//   draftAssignment.value = {
+//     id: 1,
+//     title: '教育心理学课程设计作业',
+//     description: '请根据所学的教育心理学理论，设计一个完整的课程教学方案，包括教学目标、教学内容、教学方法、教学评价等方面。要求理论联系实际，体现现代教育理念。',
+//     teacherName: '张老师',
+//     teacherAvatar: '/images/traings/traing1.png',
+//     assignTime: '2024-01-15',
+//     status: '草稿',
+//     attachments: [
+//       { icon: '/images/auth/file.png', name: 'file1.pdf' },
+//       { icon: '/images/auth/file.png', name: 'file2.pdf' }
+//     ],
+//     mainImage: '/images/traings/traing1.png'
+//   }
+//   showDraftBoxView.value = true
+//   showDetailView.value = false
+// }
 
 // 返回作业列表（从草稿箱）
-const backFromDraftBox = () => {
-  showDraftBoxView.value = false
-  draftAssignment.value = null
-}
+// const backFromDraftBox = () => {
+//   showDraftBoxView.value = false
+//   draftAssignment.value = null
+// }
 
 // 重新编辑草稿
-const reEditDraft = () => {
-  showUploadModal(draftAssignment.value!)
-}
+// const reEditDraft = () => {
+//   showUploadModal(draftAssignment.value!)
+// }
 
 // 显示上传作业弹窗
-const showUploadModal = (assignment: Assignment) => {
-  currentAssignment.value = assignment
-  uploadForm.title = ''
-  uploadForm.content = ''
-  uploadForm.files = []
-  showModal.value = true
-}
+// const showUploadModal = (assignment: Assignment) => {
+//   currentAssignment.value = assignment
+//   uploadForm.title = ''
+//   uploadForm.content = ''
+//   uploadForm.files = []
+//   showModal.value = true
+// }
 
 // 关闭上传作业弹窗
-const closeUploadModal = () => {
-  showModal.value = false
-  currentAssignment.value = null
-}
+// const closeUploadModal = () => {
+//   showModal.value = false
+//   currentAssignment.value = null
+// }
 
 // 提交作业
-const submitAssignment = () => {
-  if (!uploadForm.title.trim()) {
-    message.error('请输入标题')
-    return
-  }
+// const submitAssignment = () => {
+//   if (!uploadForm.title.trim()) {
+//     message.error('请输入标题')
+//     return
+//   }
 
-  if (!uploadForm.content.trim()) {
-    message.error('请输入内容')
-    return
-  }
+//   if (!uploadForm.content.trim()) {
+//     message.error('请输入内容')
+//     return
+//   }
 
-  if (uploadForm.files.length === 0) {
-    message.error('请上传至少一个文件')
-    return
-  }
+//   if (uploadForm.files.length === 0) {
+//     message.error('请上传至少一个文件')
+//     return
+//   }
 
-  // 这里可以添加实际的提交逻辑
-  message.success('作业提交成功')
-  closeUploadModal()
-}
+//   // 这里可以添加实际的提交逻辑
+//   message.success('作业提交成功')
+//   closeUploadModal()
+// }
 
 const menuItems = ref<any[]>([])
 const getMenu = async () => {