Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_admin_template into develoop

src/api/user/messag.js

@@ -17,9 +17,22 @@ export const deleteSendMessageApi = (params) => {
         params,
     })
 }
+//一键已读
+function parseParams(params){
+    let str = '?'
+    try{
+        for (const paramsKey in params) {
+            str+=`${paramsKey}=${params[paramsKey]}&`
+        }
+        return str.slice(0,-1)
+    }catch (e) {
+        return ''
+    }
+}
+export const readMessagesBatch = (params) => {
+    return request.put(`/user-inbox/readmessagesbatch${parseParams(params)}`)
+}
 //发送邮件
-export const SendMessageApi = (params) => {
+export const SendMessageApi = (data) => {
-    return request.post('/messages/addmessage', {
+    return request.post(`/messages/addmessage`,data)
-        params,
-    })
 }

src/api/user/send.js

@@ -5,3 +5,7 @@ export const sendMessagesApi = (params) => {
         params,
     })
 }
+//获取课程学生列表
+export function getUserInfByCourse(userId) {
+    return request.get(`/api/coursesteacher/page/courseusers?userId=${userId}`);
+}

src/router/routers copy.ts

@@ -268,7 +268,7 @@ export const constantRoute: any = [
       },
       {
         path: '/messageContentList',
-        component: () => import('@/views/message/components/indexContentList.vue'),
+        component: () => import('@/views/message/components/receiveContentList.vue'),
         name: 'MessageContentList',
         meta: {
           title: '收到信息详情',

src/router/routers.ts

@@ -1,4 +1,3 @@
-
 export const constantRoute: any = [
   {
     path: '/',
@@ -127,14 +126,14 @@ export const constantRoute: any = [
         name: 'SendMessage',
         meta: {
           title: '个人发出',
-          hidden: false,
+          hidden: true,
           icon: '',
         },
       },
       {
         path: '/messageContentList',
         component: () =>
-          import('@/views/message/components/indexContentList.vue'),
+            import('@/views/message/components/receiveContentList.vue'),
         name: 'MessageContentList',
         meta: {
           title: '收到信息详情',
@@ -145,7 +144,7 @@ export const constantRoute: any = [
       {
         path: '/sendMessageList',
         component: () =>
-          import('@/views/message/components/sendMessageList.vue'),
+            import('@/views/message/components/sendMessageList.vue'),
         name: 'SendMessageList',
         meta: {
           title: '发送信息详情',
@@ -153,11 +152,10 @@ export const constantRoute: any = [
           icon: '',
         },
       },
-
       {
         path: '/messageContent',
         component: () =>
-          import('@/views/message/components/messageContent.vue'),
+            import('@/views/message/components/messageContent.vue'),
         name: 'MessageContent',
         meta: {
           title: '写栈内信函',
@@ -170,7 +168,7 @@ export const constantRoute: any = [
         component: () => import('@/views/news/index.vue'),
         name: 'NewsContent',
         meta: {
-          title: '资讯管理',
+          title: '资讯',
           hidden: false,
           icon: 'BellFilled',
         },
@@ -178,11 +176,11 @@ export const constantRoute: any = [
       {
         path: '/news/newsContentDetails',
         component: () =>
-          import('@/views/news/components/newsContentDetails.vue'),
+            import('@/views/news/components/newsContentDetails.vue'),
         name: 'NewsContentDetails',
         meta: {
           title: '栏目添加新闻信息',
-          hidden: true,
+          hidden: false,
           icon: 'Promotion',
         },
       },
@@ -199,7 +197,7 @@ export const constantRoute: any = [
       {
         path: '/myCourseStudyManagement/learningProcess1',
         component: () =>
-          import('@/views/MyCourseStudy/knowledgeLearningProcess.vue'),
+            import('@/views/MyCourseStudy/knowledgeLearningProcess.vue'),
         name: 'LearningProcess1',
         meta: {
           title: '知识点学习记录',
@@ -249,80 +247,4 @@ export const constantRoute: any = [
       },
     ],
   },
-
-
-
-  // {
-  //   path: '/portal',
-  //   component: () => import('@/views/portal/view.vue'),
-  //   name: 'Portal',
-  //   meta: {
-  //     title: '门户',
-  //     hidden: false,
-  //     icon: 'HomeFilled', // 菜单图标
-  //   },
-  //   children: [
-  //     {
-  //       path: '/portal/webHome',
-  //       component: () => import('@/views/portal/index.vue'),
-  //       name: 'WebHome',
-  //       meta: {
-  //         title: '网站首页',
-  //         hidden: false,
-  //         icon: 'Reading',
-  //       },
-  //     },
-  //     {
-  //       path: '/portal/courseHome',
-  //       component: () => import('@/views/portal/courseHomepage.vue'),
-  //       name: 'CourseHome',
-  //       meta: {
-  //         title: '课程首页',
-  //         hidden: false,
-  //         icon: 'Reading',
-  //       },
-  //     },
-  //     {
-  //       path: '/portal/LearningPathRecommendations',
-  //       component: () =>
-  //         import('@/views/portal/LearningPathRecommendations.vue'),
-  //       name: 'LearningPathRecommendations',
-  //       meta: {
-  //         title: '学习路径推荐',
-  //         hidden: false,
-  //         icon: 'Reading',
-  //       },
-  //     },
-  //     {
-  //       path: '/portal/knowledgePointLearning',
-  //       component: () => import('@/views/portal/knowledgePointLearning.vue'),
-  //       name: 'KnowledgePointLearning',
-  //       meta: {
-  //         title: '知识点学习',
-  //         hidden: false,
-  //         icon: 'Reading',
-  //       },
-  //     },
-  //     {
-  //       path: '/portal/courseReports',
-  //       component: () => import('@/views/portal/courseReports.vue'),
-  //       name: 'CourseReports',
-  //       meta: {
-  //         title: '课程报告',
-  //         hidden: false,
-  //         icon: 'Reading',
-  //       },
-  //     },
-  //   ],
-  // },
-  // {
-  //   path: '/curriculumCenter/largeScreen',
-  //   component: () => import('@/views/course/largeScreen.vue'),
-  //   name: 'LargeScreen', // name 要与权限一致
-  //   meta: {
-  //     title: '课程图谱',
-  //     hidden: true,
-  //     icon: 'Notebook',
-  //   },
-  // },
 ]

src/views/message/components/messageContent.vue

@@ -18,8 +18,9 @@
 <!--          输入框内容-->
             <el-input
                 v-model="inputPerson"
+
                 size="large"
-                placeholder="收件人："
+                placeholder="收件人id："
             >
             <template #append>
               <el-button @click="addPerson = true">
@@ -39,6 +40,11 @@
               type="textarea"
               placeholder="内容："
           />
+          <el-input
+              v-model="userStore.data.id"
+              disabled
+              style="margin-top: 20px"
+          />
           <!--添加收件人信息-->
           <el-dialog class="dialogType" v-model="addPerson" title="选择收件人">
             <el-divider/>
@@ -68,7 +74,7 @@
                 </div>
               </div>
               <div class="right-panel" style="flex: 1;">
-                <p>已选人:</p>
+                <p>已选人id:</p>
                 <el-divider/>
                 <li v-for="item in inputPerson">
                   <p>{{item}}</p>
@@ -90,67 +96,86 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref} from 'vue'
+import { ref,onMounted,watch} from 'vue'
-// import { Search } from '@element-plus/icons-vue'
 import { useRouter } from 'vue-router';
-import { userStudentListService } from '@/api/user/user'
+import { getUserInfByCourse } from '@/api/user/send.js'
 import useUserStore from '@/store/modules/user'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import {SendMessageApi} from "@/api/user/messag";
 
-const inputPerson = ref([])
+const inputPerson = ref('')
 const inputText = ref('')
 const textarea = ref('')
-// const inputSearch = ref('')
 const addPerson = ref(false)
 const router = useRouter()
 //获取当前用户下的学生姓名
 const userStore = useUserStore()
+// console.log(userStore.userInfo.id,userStore.data.id,'dddddddd')
 const stuList = ref([])
 const formattedData = ref([])
+//获取学生数据
 const getStuList = async () => {
-  const res = await userStudentListService(userStore.data.id)
+  const res = await getUserInfByCourse(userStore.data.id)
   stuList.value = res.data
-  // console.log(stuList.value, 'rrr')
-  dataForTree(stuList.value);//格式化数据
-};
-//树形化结构学生数据
-const dataForTree = (data) => {
-  // 假设每个学生对象都有name 属性
-  const formatted = data.map(student => ({
-    label: student.name,
-    value: student.name, // 如果需要的话，可以设置 value
-    // children: [], 只有嵌套数据时才需要
-  }));
-  formattedData.value = formatted;
 };
-getStuList()
+onMounted(async () => {
+  try {
+    await getStuList();
+    formattedData.value = formatData(stuList.value);
+  } catch (error) {
+    ElMessage.error('加载数据失败');
+  }
+});
 
+// 数据格式化函数
+function formatData(data) {
+  return data.map(course => ({
+    label: course.courseName,
+    children: course.usersInf.filter(student => !inputPerson.value.includes(student.id)).map(student => ({
+      label: student.receiverName,
+      value: student.id, // 这里使用学生的 id 作为值
+    })),
+  }));
+}
+// 监听 selectedStudents 的变化
+watch(inputPerson, (newVal, oldVal) => {
+  inputPerson.value = newVal;
+  // 更新 formattedData 以反映最新的选择状态
+  formattedData.value = formatData(stuList.value);
+}, { deep: true });
 //返回
 const back= ()=>{
   router.push('/messageManagement/message')
 }
+//选择收件人
+const confirm = ()=>{
+  addPerson.value = false
+  console.log(inputPerson.value,'inputPerson内容')
+}
+//取消
+const disappoint = ()=>{
+  addPerson.value = false
+}
 //发送信息
-const send = async (id: any) => {
+const send = async () => {
   await ElMessageBox.confirm('您确定发送这条信息吗', '温馨提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
     type: 'warning',
   })
+  // console.log(inputPerson,'ddddd')
   await SendMessageApi({
-    messageIds:id,
+    receiverId: inputPerson.value,
-    content:textarea,
+    title:inputText.value,
-    userId:userStore.userInfo.id
+    content:textarea.value,
+    senderId:userStore.data.id
+  }).then(()=>{
+    ElMessage({
+      message:'发送成功',
+      type:'success'
+    })
   })
 }
-//选择收件人
-const confirm = ()=>{
-  addPerson.value = false
-}
-//取消
-const disappoint = ()=>{
-  addPerson.value = false
-}
 </script>
 <style scoped>
 
@@ -164,7 +189,7 @@ const disappoint = ()=>{
   margin-bottom: 30px;
 }
 .header p{
-  color: gainsboro;
+  color: white;
 }
 li{
   list-style: none;

src/views/message/components/receiveContentList.vue

@@ -15,7 +15,7 @@
             <div class="header_content">
               <span class="sender">发送人：{{ Message.senderName }}</span>
               <span class="time">发送时间：{{ Message.sendTime }}</span>
-              <span class="read-status">是否阅读：{{Message.isRead}}</span>
+              <span class="read-status">是否阅读：{{Message.isRead ? '已读' : '未读' }}</span>
             </div>
             <div class="recipient">标题：{{ Message.title }}</div>
             <div class="content">

src/views/message/components/sendMessage.vue

@@ -11,12 +11,7 @@
         <input type="checkbox" class="custom-checkbox" @change="toggleAll" :checked="allSelected" />
         <p class="selected-count">已选 {{ selectedCount }} 条记录</p>
       </div>
-      <li v-for="item in sendMessage"
+      <li v-for="item in sendMessage" :key="item.title" class="message-list-item">
-          :key="item.title"
-          class="message-list-item"
-      >
-        <!--添加悬浮删除按钮-->
-<!--    <div class="message-list" @mouseover="hoveringOver = item.id" @mouseleave="hoveringOver = null">-->
         <div class="message-list">
           <!-- 添加勾选框 -->
           <div class="message-check">
@@ -28,10 +23,10 @@
           <div class="message-content" @click="handleClick(item)">
             <h2 class="message-title">{{item.title}}</h2>
             <div class="message-details">
-              <span class="sender">收件人:{{item.receiverName}}</span>
+              <span class="sender">收件人:{{item.receiverUsers}}</span>
               <span class="read-status">阅读人数：{{item.readUserNum}}</span>
             </div>
-            <div class="message-time">{{item.sendTime}}</div>
+            <div class="message-time">发送时间：{{item.sendTime}}</div>
           </div>
           <!-- 删除按钮，默认不显示，hover时显示 -->
 <!--      <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteSendMessage(item.id)" type="danger" round >删除</el-button>-->
@@ -44,7 +39,7 @@
       <el-pagination
           v-model:current-page="params.pageNo"
           v-model:page-size="params.pageSize"
-          :page-sizes="[2,3, 5, 7, 10]"
+          :page-sizes="[4,3, 5, 7, 10]"
           :background="true"
           layout="jumper,total, sizes, prev, pager, next "
           :total="total"
@@ -64,7 +59,7 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 const userStore = useUserStore()
 //传参
 const params = ref({
-  userId: userStore.userInfo.id,
+  userId: userStore.data.id,
   // userId: 4,
   isAsc:true,
   isDelete:0,
@@ -72,13 +67,26 @@ const params = ref({
   isSend:1,
   // messageId:false,
   pageNo:1,
-  pageSize:3,
+  pageSize:4,
-  sortBy:false,//排序字段
+  sortBy:false//排序字段
 })
 const total = ref(0)
 const sendMessage = ref([])
 const loading = ref(false)
 // const hoveringOver = ref(null)
+// 获取课程列表
+const getSendMessageList = async () => {
+  loading.value = true
+  const res = await getSendMessagesListApi(params.value)
+  sendMessage.value = res.data.list
+  total.value = res.data.total
+  loading.value = false
+  console.log(sendMessage.value,'消息消息消息消息')
+}
+// 渲染
+onMounted(() => {
+  getSendMessageList()
+})
 //复选框
 const selectedIds = ref([]); // 存储已选中的消息ID
 const allSelected = computed(() => {
@@ -115,42 +123,7 @@ function toggleSelection(id: number) {
 function isSelected(id) {
   return selectedIds.value.includes(id);
 }
-// 获取课程列表
+
-const getSendMessageList = async () => {
-  loading.value = true
-  const res = await getSendMessagesListApi(params.value)
-  sendMessage.value = res.data.list
-  total.value = res.data.total
-  loading.value = false
-}
-// 渲染
-onMounted(() => {
-  getSendMessageList()
-})
-//删除当前记录
-// const deleteSendMessage = async (id: any) => {
-//   await ElMessageBox.confirm('您确定删除这条课程信息吗', '温馨提示', {
-//     confirmButtonText: '确认',
-//     cancelButtonText: '取消',
-//     type: 'warning',
-//   })
-//   await deleteSendMessageApi({
-//     messageIds:id,
-//     userId:userStore.userInfo.id
-//   })
-//       .then(() => {
-//         console.log(id, '删除id')
-//         getSendMessageList() // 删除成功后重新获取列表数据以更新页面
-//         ElMessage.success('删除成功')
-//         // console.log(res)
-//       })
-//       .catch((err: any) => {
-//         console.log(id, 'id')
-//         ElMessage.error(err.response.data.message)
-//       })
-//
-//   await getSendMessageList()
-// }
 
 // 分页
 const handleSizeChange = (size: any) => {
@@ -183,7 +156,6 @@ const handleClick = (item)=> {
   //带查询参数
   router.push({ path: '/sendMessageList', query: item })
 }
-
 </script>
 <style scoped>
 .container{
@@ -199,13 +171,10 @@ const handleClick = (item)=> {
   align-items: center; /* 垂直居中对齐子元素 */
   gap: 10px; /* 设置子元素之间的间距 */
 }
-
 .custom-checkbox {
   transform: scale(1.5); /* 将勾选框放大1.5倍 */
 }
-
 .selected-count {
-
 }
 .message-check{
   margin-right: 20px;
@@ -218,7 +187,6 @@ const handleClick = (item)=> {
   padding: 0 10px;
   box-sizing: border-box;
 }
-
 .message-icon {
   margin-right: 30px; /* 图标右侧间距 */
   font-size: 34px; /* 图标大小 */
@@ -232,32 +200,26 @@ li{
   justify-content: center; /* 标题和详情内容垂直居中 */
   flex: 1; /* 填充剩余空间 */
 }
-
 .message-title {
   line-height: 30px;
   font-size: 20px;
 }
-
 .message-details {
   display: flex;
   align-items: center; /* 细节内容水平居中 */
   margin-top: 10px; /* 与标题的间距 */
 }
-
 .sender {
   margin-right: 88px; /* 发件人和已读状态的间距 */
 }
-
 .read-status {
   color: #888; /* 已读状态的颜色 */
 }
-
 .message-time {
   margin-left: auto; /* 发送时间靠右显示 */
   font-size: 15px; /* 发送时间字体大小 */
   color: #666; /* 发送时间颜色 */
 }
-
 .message-list-item {
   cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */
 }

src/views/message/components/sendMessageList.vue

@@ -13,9 +13,9 @@
           </template>
           <div class="container">
             <div class="header_content">
-              <span class="sender">收件人：{{ sendMessage.receiverName }}</span>
+              <span class="sender">收件人：{{ sendMessage.receiveUsers}}</span>
               <span class="time">发送时间：{{ sendMessage.sendTime }}</span>
-              <span class="read-status">是否阅读：{{sendMessage.isRead}}</span>
+<!--              <span class="read-status">是否阅读：{{sendMessage.isRead}}</span>-->
             </div>
             <div class="recipient">标题：{{ sendMessage.title }}</div>
             <div class="content">
@@ -30,8 +30,11 @@
 </template>
 <script setup lang="ts">
 import {useRouter,useRoute} from "vue-router";
+import {ref} from "vue";
 const router = useRouter()
 const route = useRoute()
+const receiveName = ref([])
+// console.log(route.query.id,'id')
 //获取数据，如果失败返回上一级
 if(!Object.keys(route.query).length){
   router.go(-1)
@@ -40,10 +43,9 @@ if(!Object.keys(route.query).length){
 const back = ()=>{
   router.push('/messageManagement/sendMessage')
 }
-import {ref} from "vue";
 //获取参数
 const sendMessage = ref(route.query)
-
+console.log(route.query.receiveUsers,'内容')
 </script>
 
 <style scoped>

src/views/message/index.vue

@@ -24,17 +24,23 @@
           <!-- 图标 -->
           <div class="message-icon">
             <el-icon><Comment /></el-icon>
+            <!-- 添加红色提示符 -->
+            <span v-if="!item.isRead" class="message-unread-indicator"></span>
           </div>
           <div class="message-content" @click="handleClick(item)">
             <h2 class="message-title">{{item.title}}</h2>
             <div class="message-details">
-              <span class="sender">发件人：{{item.sendPerson}}</span>
+              <span class="sender">发件人：{{item.senderName}}</span>
-              <span class="read-status">已读状态：{{item.isRead}}</span>
+              <span class="read-status" style="margin-right: 40px">是否已读：{{ item.isRead ? '已读' : '未读' }}</span>
+              <span class="read-status">已读人数：{{item.readUserNum}} / {{item.userNum}}</span>
             </div>
             <div class="message-time">发送时间：{{item.sendTime}}</div>
           </div>
           <!-- 删除按钮，默认不显示，hover时显示 -->
-          <el-button v-if="hoveringOver === item.id" class="delete-btn" @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
+          <div v-if="!item.isRead" style="margin-right: 10px">
+            <el-button v-if="hoveringOver === item.id"  @click="readMessage(item.id)" type="warning" round>点击已读</el-button>
+          </div>
+          <el-button v-if="hoveringOver === item.id"  @click="deleteMessage(item.id)" type="danger" round>删除</el-button>
         </div>
         <el-divider/>
       </li>
@@ -58,11 +64,11 @@
 import { ref,computed,onMounted} from 'vue';
 import { useRouter } from 'vue-router';
 import useUserStore from "@/store/modules/user";
-import {getMessagesListApi,deleteSendMessageApi} from "@/api/user/messag";
+import {getMessagesListApi,deleteSendMessageApi,readMessagesBatch} from "@/api/user/messag";
 import { ElMessageBox, ElMessage } from 'element-plus'
 const userStore = useUserStore()
 const params = ref({
-  userId: userStore.userInfo.id,
+  userId: userStore.data.id,
   // userId: 4,
   isAsc:true,
   isDelete:0,
@@ -136,7 +142,7 @@ const deleteMessage = async (id: any) => {
   })
   await deleteSendMessageApi({
     messageIds:id,
-    userId:userStore.userInfo.id
+    userId:userStore.data.id
   })
       .then(() => {
         console.log(id, '删除id')
@@ -151,6 +157,15 @@ const deleteMessage = async (id: any) => {
 
   await getMessageList()
 }
+//一键已读
+const readMessage = async (id:any) =>{
+  console.log(id,userStore.data.id,'dddddd')
+  await readMessagesBatch({
+    messageIds:id,
+    userId:userStore.data.id
+  })
+  await getMessageList()
+}
 // 分页
 const handleSizeChange = (size: any) => {
   // loading.value = true
@@ -223,6 +238,7 @@ const handleClick = (item)=> {
 .message-icon {
   margin-right: 30px; /* 图标右侧间距 */
   font-size: 34px; /* 图标大小 */
+  position: relative;
 }
 li{
   list-style: none;
@@ -232,8 +248,19 @@ li{
   flex-direction: column;
   justify-content: center; /* 标题和详情内容垂直居中 */
   flex: 1; /* 填充剩余空间 */
+  position: relative;
+}
+/*未读消息加小红点*/
+.message-unread-indicator {
+  position: absolute;
+  top: -4px; /* 调整位置 */
+  right: -4px; /* 调整位置 */
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: red;
+  z-index: 1; /* 确保它在其他元素之上 */
 }
-
 .message-title {
   line-height: 30px;
   font-size: 20px;

src/views/news/components/newsContentDetails.vue

@@ -6,17 +6,107 @@
         <el-button type="primary" @click="back" plain round>返回</el-button>
       </div>
     </template>
-    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+    <!--  栏目内添加新闻-->
-    <template #footer>Footer content</template>
+      <el-form v-model="newsForm">
+        <el-form-item label="所属栏目id" label-width="140px">
+          <el-input v-model="newsForm.categoryId" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="文章内容" label-width="140px">
+          <el-input
+            v-model="newsForm.content"
+            style="font-size: 20px"
+            :rows="5"
+            type="textarea"
+          />
+        </el-form-item>
+        <!--      <el-form-item label="文章id" label-width="140px">-->
+        <!--        <el-input v-model="newsForm.id" autocomplete="off" />-->
+        <!--      </el-form-item>-->
+        <!--      <el-form-item label="标题图片" label-width="140px">-->
+        <!--        <el-input v-model="newsForm.pic" autocomplete="off" />-->
+        <!--      </el-form-item>-->
+        <!--      <el-form-item label="发布时间" label-width="140px">-->
+        <!--        <el-input v-model="newsForm.publishTime" autocomplete="off"  type="date"/>-->
+        <!--      </el-form-item>-->
+<!--        <el-form-item label="浏览次数" label-width="140px">-->
+<!--          <el-input v-model="newsForm.readingNumber" autocomplete="off" />-->
+<!--        </el-form-item>-->
+        <el-form-item label="发布状态" label-width="140px">
+          <el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="文章标题" label-width="140px">
+          <el-input v-model="newsForm.title" autocomplete="off" />
+        </el-form-item>
+        <!--      <el-form-item label="更新时间" label-width="140px">-->
+        <!--        <el-input v-model="newsForm.updateTime" autocomplete="off"  type="date"/>-->
+        <!--      </el-form-item>-->
+        <el-form-item label="发布文章的用户id" label-width="140px">
+          <el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+<!--          <el-button>取消</el-button>-->
+          <el-button type="primary" @click="addNewsContentConfirm">
+            提交
+          </el-button>
+        </div>
+      </template>
   </el-card>
 </template>
 
 <script setup lang="ts">
-import {useRouter} from "vue-router";
+import {
+  addEssay,
+} from "@/api/user/news.js"
+import {ref} from 'vue';
+import {ElButton,ElMessage,ElMessageBox } from 'element-plus'
+import type { UploadProps, UploadUserFile } from 'element-plus'
+import useUserStore from "@/store/modules/user";
+const userStore = useUserStore()
+import {useRouter,useRoute} from "vue-router";
 const router = useRouter();
+//通过route携带信息传添加栏目的id
+const route = useRoute();
+// console.log(route.query.id,'id')
 const back = ()=>{
   router.push('/news/newsContent')
 }
+//新闻
+const newsForm = ref({
+  categoryId:route.query.id,
+  content:'',
+  // file:'',
+  // id:'',
+  // pic:'',
+  publishTime:'',
+  readingNumber:'',
+  status:'',
+  title:'',
+  updateTime:'',
+  userId:userStore.data.id,
+})
+//新闻文章添加
+const addNewsContentConfirm = async (id)=>{
+  await addEssay({
+    categoryId:newsForm.value.categoryId,
+    content:newsForm.value.content,
+    // file:newsForm.value.file,
+    // id:newsForm.value.id,
+    // pic:newsForm.value.pic,
+    publishTime:newsForm.value.publishTime,
+    readingNumber:newsForm.value.readingNumber,
+    status:newsForm.value.status,
+    title:newsForm.value.title,
+    updateTime:newsForm.value.updateTime,
+    userId:newsForm.value.userId
+  }).then(()=>{
+    ElMessage({
+      message:'添加成功',
+      type:'success'
+    })
+  })
+}
 </script>
 
 <style scoped>
@@ -33,5 +123,10 @@ const back = ()=>{
 .card-header span {
   flex: 1; /* 使 span 占用可用空间，实现居中效果 */
   text-align: center; /* 文本居中 */
+  font-size: 20px;
+}
+.dialog-footer{
+  display: flex;
+  justify-content: flex-end;
 }
 </style>

src/views/news/index.vue

@@ -2,37 +2,78 @@
   <div class="header_title">
     <span>资讯</span>
   </div>
-  <div>
+  <div class="common-layout">
-    <el-card shadow="always">
+    <el-container>
-      <div class="header-flex-container">
+      <el-aside>
+        <div>
+          <el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
+        </div>
+        <div class="header-flex-container">
+
         <ul class="header-list">
           <li v-for="item in column">
-            <el-dropdown placement="bottom">
+            <el-dropdown placement="right">
-              <span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p -->
+              <div class="header-column" type="primary">
+                <span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p -->
+              </div>
+              <!--当前栏目新闻管理-->
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item>
-                      <ul>
+                    <ul>
-                        <li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px">
+                      <li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px">
+                        <el-tag type="info" size="large" style="height: 30px;font-size: 15px">
                           <p >{{listObject.title}}</p>
-                          <el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round>删除</el-button>
+                        </el-tag>
-                          <el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round>编辑</el-button>
+                        <div class="button-container">
-                        </li>
+                          <el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round plain>删除</el-button>
-                      </ul>
+                          <el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round plain>编辑</el-button>
+                        </div>
+                      </li>
+                    </ul>
                   </el-dropdown-item>
                   <div class="add-news-button">
-                    <el-button @click="addNewsDialogFormVisibleButton(item.id)" type="primary" plain round>添加当前栏目新闻</el-button>
+                    <el-button @click="addNewsDialogFormVisibleButton(item.id)" type="success" style="margin-bottom: 10px" plain round>添加当前栏目新闻</el-button>
                   </div>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
           </li>
         </ul>
-        <div>
+
-          <el-button name="editColumnButton" @click="editHandle" round>栏目管理</el-button>
-        </div>
       </div>
-    </el-card>
+
+      </el-aside>
+      <!--  新闻内容-->
+      <el-main>
+        <div class="mainContainer">
+          <div class="card-header">
+            <el-card shadow="hover">
+              <div style="height:33px">
+                <span class="contentTitle">{{nowTimeNewsData.title}}</span>
+              </div>
+            </el-card>
+            <el-card shadow="hover">
+              <div class="news-flex-container">
+                <p>发布人：{{ nowTimeNewsData.userId }}</p>
+                <p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p>
+                <p>发布日期：{{ nowTimeNewsData.publishTime }}</p>
+                <p>更新时间：{{nowTimeNewsData.updateTime}}</p>
+              </div>
+            </el-card>
+          </div>
+          <div style="text-align: center">
+            <el-scrollbar class="scrollbarContent">
+              <span>{{ nowTimeNewsData.content }}</span>
+<!--              <p>{{ nowTimeNewsData.content }}</p>-->
+            </el-scrollbar>
+          </div>
+          <el-card style="text-align: center">
+            <el-link href="https://element-plus.org" target="_blank"  style="margin-right: 30px;font-size: 19px">关于我们</el-link>
+          </el-card>
+        </div>
+      </el-main>
+    </el-container>
   </div>
 <!--  栏目编辑弹框-->
   <el-drawer v-model="drawer" title="title" :with-header="false">
@@ -60,7 +101,7 @@
         <el-input v-model="form.categoryName" autocomplete="off" />
       </el-form-item>
       <el-form-item label="栏目父id" label-width="140px">
-        <el-input v-model="form.categoryPid" autocomplete="off" />
+        <el-input v-model="form.categoryPid" autocomplete="off" readonly/>
       </el-form-item>
 <!--      <el-form-item label="创建时间" label-width="140px">-->
 <!--        <el-input v-model="form.createTime" autocomplete="off" type="date"/>-->
@@ -90,82 +131,6 @@
       </div>
     </template>
   </el-dialog>
-<!--  新闻内容-->
-  <el-card class="container">
-    <template #header>
-      <div class="card-header">
-        <span class="contentTitle">{{nowTimeNewsData.title}}</span>
-        <el-card shadow="hover">
-          <div class="news-flex-container">
-            <p>发布人：{{ nowTimeNewsData.userId }}</p>
-            <p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p>
-            <p>发布日期：{{ nowTimeNewsData.publishTime }}</p>
-            <p>更新时间：{{nowTimeNewsData.updateTime}}</p>
-          </div>
-        </el-card>
-      </div>
-    </template>
-    <div style="text-align: center">
-      <el-input
-          v-model="nowTimeNewsData.content"
-          style="width: 80%;font-size: 20px"
-          :rows="15"
-          type="textarea"
-          placeholder="Please input"
-      />
-    </div>
-    <template #footer>
-      <div style="text-align: center">
-        <el-link href="https://element-plus.org" target="_blank"  style="margin-right: 30px;font-size: 19px">关于我们</el-link>
-      </div>
-    </template>
-  </el-card>
-<!--  栏目内添加新闻-->
-  <el-dialog v-model="addNewsDialogFormVisible" title="添加新闻" width="500px">
-    <el-form v-model="newsForm">
-      <el-form-item label="所属栏目id" label-width="140px">
-        <el-input v-model="newsForm.categoryId" autocomplete="off" readonly disabled/>
-      </el-form-item>
-      <el-form-item label="文章内容" label-width="140px">
-        <el-input v-model="newsForm.content" autocomplete="off" />
-      </el-form-item>
-<!--      <el-form-item label="文章文件" label-width="140px">-->
-<!--        <el-input v-model="newsForm.file" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="文章id" label-width="140px">-->
-<!--        <el-input v-model="newsForm.id" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="标题图片" label-width="140px">-->
-<!--        <el-input v-model="newsForm.pic" autocomplete="off" />-->
-<!--      </el-form-item>-->
-<!--      <el-form-item label="发布时间" label-width="140px">-->
-<!--        <el-input v-model="newsForm.publishTime" autocomplete="off"  type="date"/>-->
-<!--      </el-form-item>-->
-      <el-form-item label="浏览次数" label-width="140px">
-        <el-input v-model="newsForm.readingNumber" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="发布状态" label-width="140px">
-        <el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" />
-      </el-form-item>
-      <el-form-item label="文章标题" label-width="140px">
-        <el-input v-model="newsForm.title" autocomplete="off" />
-      </el-form-item>
-<!--      <el-form-item label="更新时间" label-width="140px">-->
-<!--        <el-input v-model="newsForm.updateTime" autocomplete="off"  type="date"/>-->
-<!--      </el-form-item>-->
-      <el-form-item label="发布文章的用户id" label-width="140px">
-        <el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="addNewsDialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="addNewsContentConfirm">
-          提交
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
   <!--  修改新闻-->
   <el-dialog v-model="editNewsDialogFormVisible" title="修改新闻" width="500px">
     <el-form v-model="nowTimeNewsData">
@@ -173,7 +138,13 @@
         <el-input v-model="nowTimeNewsData.categoryId" autocomplete="off" readonly disabled/>
       </el-form-item>
       <el-form-item label="文章内容" label-width="140px">
-        <el-input v-model="nowTimeNewsData.content" autocomplete="off" />
+<!--        <el-input v-model="nowTimeNewsData.content" autocomplete="off" />-->
+        <el-input
+            v-model="nowTimeNewsData.content"
+            style="font-size: 13px"
+            :rows="5"
+            type="textarea"
+        />
       </el-form-item>
 <!--      <el-form-item label="文章文件" label-width="140px">-->
 <!--        <el-input v-model="nowTimeNewsData.file" autocomplete="off" />-->
@@ -205,7 +176,7 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="addNewsDialogFormVisible = false">取消</el-button>
+        <el-button @click="editNewsDialogFormVisible = false">取消</el-button>
         <el-button type="primary" @click="editNewsContentConfirm">
           提交
         </el-button>
@@ -224,9 +195,11 @@ import {
   deleteEssay,
   editEssay
 } from "@/api/user/news.js"
-import {ref,reactive,onMounted} from 'vue';
+import {ref,reactive,onMounted,mounted} from 'vue';
 import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus'
 import useUserStore from "@/store/modules/user";
+import {useRouter} from "vue-router";
+const router = useRouter();
 const userStore = useUserStore()
 const drawer = ref(false)
 const addFormVisible = ref(false)
@@ -240,41 +213,27 @@ const addNewsDialogFormVisible = ref(false)
 const editNewsDialogFormVisible = ref(false)
 //添加当前新闻栏目按钮
 const addNewsDialogFormVisibleButton = (id)=>{
-  addNewsDialogFormVisible.value = true
+  // addNewsDialogFormVisible.value = true
-  columnId.value = id
+  router.push(`/news/newsContentDetails?id=${id}`)
+  // columnId.value = id
 }
 const nowTimeNewsData = ref({})
 //新闻详细信息获取
 const newViews = (listObject)=> {
-  nowTimeNewsData.value = listObject
+  nowTimeNewsData.value = { ...listObject }
 }
-
 //栏目
 const form = ref({
       categoryName:'',
-      categoryPid:'',
+      categoryPid:0,
       createTime:'',
-      creatorId:userStore.userInfo.id,
+      creatorId:userStore.data.id,
       id:'',
       sort:'',
       status:'',
       updateTime:''
     })
 
-//新闻
-const newsForm = ref({
-      categoryId:columnId,
-      content:'',
-      file:'',
-      id:'',
-      pic:'',
-      publishTime:'',
-      readingNumber:'',
-      status:'',
-      title:'',
-      updateTime:'',
-      userId:userStore.userInfo.id,
-})
 //获取栏目信息
 const CategoryList = async () => {
   const res = await queryCategory()
@@ -326,28 +285,15 @@ const deleteHandle = async (id)=>{
 }
 //新闻文章查询
 const EssayList = async (id)=>{
-  const ress = await queryEssay(id)
+  const response = await queryEssay(id)
-  // console.log(ress.data,'ress')
+  // console.log(response.data,'response')
-  essay.value = ress.data
+  essay.value = response.data
+  if (essay.value.length > 0) {
+    newViews(essay.value[0]); // 显示第一条新闻
+  }
   // console.log(essay.value,'essay')
 }
-//新闻文章添加
+
-const addNewsContentConfirm = async ()=>{
-  addNewsDialogFormVisible.value = false
-  await addEssay({
-    categoryId:newsForm.value.categoryId,
-    content:newsForm.value.content,
-    // file:newsForm.value.file,
-    // id:newsForm.value.id,
-    // pic:newsForm.value.pic,
-    publishTime:newsForm.value.publishTime,
-    readingNumber:newsForm.value.readingNumber,
-    status:newsForm.value.status,
-    title:newsForm.value.title,
-    updateTime:newsForm.value.updateTime,
-    userId:newsForm.value.userId
-  })
-}
 //新闻删除
 const deleteNewsList = async (id)=>{
 // console.log(id)
@@ -390,17 +336,27 @@ const editNewsContentConfirm = async ()=>{
   margin: auto;
   background-image: linear-gradient(60deg,honeydew,powderblue,honeydew);
 }
+.el-aside {
+  height: 100vh; /* 设置高度为视窗高度 */
+  overflow-y: auto; /* 当内容超出时显示滚动条 */
+}
 .header-flex-container {
   display: flex;
-  align-items: center; /* 垂直居中 */
+  /*align-items: center; !* 垂直居中 *!*/
   padding: 20px;
-  background: #4b81d7;
+  gap: 10px;
-  justify-content: space-between; /* 左边对齐和右边对齐 */
+  background: white;
+  margin-top: 20px;
+  height: 81vh;
+  overflow-y: auto;
+}
+.header-flex-container::-webkit-scrollbar {
+  width: 0px; /* 滚动条宽度 */
 }
 .header-list {
-  display: flex; /* 使li元素水平排列 */
+  /*display: flex; !* 使li元素水平排列 *!*/
   flex-wrap: wrap; /* 如果需要换行 */
-  align-items: center; /* 如果需要，也可以使li元素垂直居中 */
+  /*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/
   margin: 0; /* 移除默认外边距 */
   padding: 0; /* 移除默认内边距 */
 }
@@ -412,8 +368,16 @@ const editNewsContentConfirm = async ()=>{
   list-style: none;
   margin-right: 10px;
 }
-.el-dropdown {
+.header-column{
-  margin-right: 30px;
+  height:30px;
+  margin-top: 20px;
+  margin-right: 80px;
+  padding: 5px;
+  margin-bottom: 20px;
+  cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */
+}
+.header-column span{
+  color: #222222;
 }
 .add-news-button {
   margin-top: auto; /* 将按钮推到底部 */
@@ -421,13 +385,11 @@ const editNewsContentConfirm = async ()=>{
   width: 100%;
 }
 .contentTitle{
-  color: red;
+  color: firebrick;
   font-size: 30px;
   text-align: center;
   display: block;
   width: 100%; /* 或者设置一个具体的宽度 */
-  line-height: 40px;
-  margin-bottom: 20px;
 }
 .flex-container {
   display: flex;
@@ -435,7 +397,17 @@ const editNewsContentConfirm = async ()=>{
   align-items: center;
   flex-direction: row;
 }
-
+/* 添加新的类来控制按钮的位置 */
+.button-container {
+  display: flex;
+  justify-content: flex-end; /* 按钮靠右 */
+  align-items: center; /* 垂直居中 */
+}
+.button-container_column{
+  position:absolute;
+  margin-top: 30px;
+  margin-left: 200px;
+}
 .news-flex-container {
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: space-between; /* 平均分配空间 */
@@ -455,5 +427,14 @@ const editNewsContentConfirm = async ()=>{
 .flex-container p:last-child {
   margin-right: 0;
 }
-
+.scrollbarContent{
+  height:60vh;
+  border: 1px;
+  background: white;
+  border-radius: 1%;
+  font-size: 20px;
+  padding: 10px;
+  overflow-y: auto;
+  line-height: 2.0;
+}
 </style>

src/views/student/index.vue

@@ -11,8 +11,8 @@ import {
 } from '@/api/user/stud'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import useUserStore from '@/store/modules/user'
-import editStu from './components/editStu.vue'
+// import editStu from './components/editStu.vue'
-import { tryOnMounted } from '@vueuse/core'
+// import { tryOnMounted } from '@vueuse/core'
 const userStore = useUserStore()
 // console.log(userStore.data.id, 'icon') //用户信息
 const formLabelWidth = '60px'