feat:init notification list and init vue directive "v-permission"

src/assets/link.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1644132250628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3373" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M819.2 887.466667H136.533333V204.8h341.333334V68.266667H136.533333a136.533333 136.533333 0 0 0-136.533333 136.533333v682.666667a136.533333 136.533333 0 0 0 136.533333 136.533333h682.666667a136.533333 136.533333 0 0 0 136.533333-136.533333V546.133333h-136.533333v341.333334z" fill="#409eff" p-id="3374"></path><path d="M955.733333 0h-273.066666a68.266667 68.266667 0 0 0 0 136.533333h108.202666L421.2736 506.129067a68.266667 68.266667 0 1 0 96.597333 96.597333L887.466667 233.130667V341.333333a68.266667 68.266667 0 0 0 136.533333 0V68.266667a68.266667 68.266667 0 0 0-68.266667-68.266667z" fill="#409eff" p-id="3375"></path></svg>

src/global/register-element.js

@@ -15,7 +15,10 @@ import {
   ElDialog,
   ElDatePicker,
   ElUpload,
-  ElDivider, ElMessage,
+  ElDivider,
+  ElMessage,
+  ElRadioButton,
+  ElRadioGroup,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -37,7 +40,9 @@ const components = [
   ElDatePicker,
   ElUpload,
   ElDivider,
-  ElMessage
+  ElMessage,
+  ElRadioButton,
+  ElRadioGroup,
 ];
 
 export default function (app) {

src/main.js

@@ -11,9 +11,16 @@ app.config.productionTip = false;
 app.directive("title", {
   inserted: function (el) {
     document.title = el.dataset.title;
-  }
+  },
+});
+
+app.directive("permission", {
+  mounted(el, binding) {
+    console.log(el); //当前使用指令的dom
+    console.log(binding);
+  },
 });
 
 app.config.globalProperties.$apis = api;
 app.config.globalProperties.$message = ElMessage;
-app.mount("#app");
+app.mount("#app");

src/views/CoursePage/CourseDetail.vue

@@ -10,7 +10,10 @@
           <div>课程名：软件工程与计算</div>
           <div>教师：Kenny67</div>
           <div>开课时间：2021.9.3</div>
-          <el-button type="primary">查看详情</el-button>
+          <div class="mooc-link">
+            <a href="https://www.icourse163.org/" target="_blank">Mooc课程链接</a>
+            <img alt="link" src="../../assets/link.svg">
+          </div>
         </div>
       </div>
       <el-divider></el-divider>
@@ -23,17 +26,57 @@
         </div>
       </div>
       <el-divider></el-divider>
-
+      <div class="course-tabs">
+        <el-radio-group v-model="tabName" size="large">
+          <el-radio-button label="notice">通知栏</el-radio-button>
+          <el-radio-button label="tasks">任务列表</el-radio-button>
+          <el-radio-button label="courseware">课件列表</el-radio-button>
+        </el-radio-group>
+        <el-button v-permission="{action:'add'}" plain type="warning">添加发布</el-button>
+      </div>
+      <div class="course-tab-content">
+        <div v-if="tabName==='notice'" class="tab-notice">
+          <NoticeItem v-for="(item,index) in noticeInfoList" :key="index" :notice-info="item"></NoticeItem>
+        </div>
+        <div v-else-if="tabName==='tasks'" class="tab-tasks">
+        </div>
+        <div v-else-if="tabName==='courseware'" class="tab-courseware">
+        </div>
+      </div>
     </div>
-
-
   </div>
 </template>
 
 <script setup>
 import GlobalHeader from "../../../src/components/GlobalHeader";
+import NoticeItem from "./components/NoticeItem";
+import {ref} from "vue";
+
+const tabName = ref("notice");
+const noticeInfoList = [
+  {
+    mode: "考试",
+    text: "【重要】1月13日代码作业已发布",
+    time: "01-19 18:24",
+    name: "刘"
+  },
+  {
+    mode: "作业",
+    text: "【重要】1月13日代码作业已发布",
+    time: "01-19 18:24",
+    name: "刘"
+  },
+  {
+    mode: "公告",
+    text: "【重要】1月13日代码作业已发布",
+    time: "01-19 18:24",
+    name: "刘"
+  }
+];
+
 </script>
 
 <style scoped>
 @import "style/CourseDetail.css";
+
 </style>

src/views/CoursePage/components/NoticeItem.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="notice-item">
+    <div class="mode-text">
+      <div class="mode">
+        {{ noticeInfo.mode }}
+      </div>
+      <div class="text">
+        {{ noticeInfo.text }}
+      </div>
+    </div>
+    <div class="time-avatar">
+      <div class="time">
+        {{ noticeInfo.time }}
+      </div>
+      <div class="avatar">
+        {{ noticeInfo.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  noticeInfo: {
+    type: Object,
+    default: () => {
+      return {
+        mode: "",
+        type: "",
+        time: "",
+        name: ""
+      };
+    }
+  }
+});
+const color = computed(() => {
+  if (props.noticeInfo.mode === "公告") {
+    return "#E38800";
+  } else if (props.noticeInfo.mode === "作业") {
+    return "#1989FA";
+  } else if (props.noticeInfo.mode === "考试") {
+    return "#F56C6C";
+  }
+  return "";
+});
+</script>
+
+<style scoped>
+.notice-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  cursor: pointer;
+}
+
+.mode-text, .time-avatar {
+  display: flex;
+  align-items: center;
+  color: #666666;
+  font-size: 18px;
+}
+
+.mode {
+  border-radius: 24px;
+  border: v-bind(color) 3px solid;
+  box-sizing: border-box;
+  padding: 4px 12px;
+  color: v-bind(color);
+  margin-right: 16px;
+  font-size: 16px;
+}
+
+
+.avatar {
+  border-radius: 50%;
+  background-color: v-bind(color);
+  height: 32px;
+  width: 32px;
+  line-height: 32px;
+  text-align: center;
+  color: #FFFFFF;
+  margin-left: 16px;
+}
+
+
+</style>

src/views/CoursePage/style/CourseDetail.css

@@ -57,10 +57,27 @@
     margin-bottom: 24px;
 }
 
-.course-info .el-button {
-    width: 220px;
-    border-radius: 32px;
-    font-size: 18px;
+.course-info > div:last-child {
+    margin-bottom: 0;
+}
+
+
+.mooc-link {
+    display: flex;
+    align-items: center;
+}
+
+.course-info .mooc-link > a {
+    color: #409eff;
+    text-decoration: none;
+    font-weight: 500;
+    font-style: italic;
+}
+
+.course-info .mooc-link > img {
+    height: 20px;
+    width: 20px;
+    margin-left: 6px;
 }
 
 .introduce-content {
@@ -75,3 +92,15 @@
     font-weight: 500;
     font-size: 24px;
 }
+
+
+.course-tabs {
+    display: flex;
+    justify-content: space-between;
+}
+
+.course-tab-content {
+    margin-top: 32px;
+}
+
+

src/views/ManagePage/ManagePage.vue

@@ -112,7 +112,6 @@
 <script setup>
 import GlobalHeader from "@/components/GlobalHeader";
 import CourseItem from "@/components/CourseItem";
-import {Plus} from "@element-plus/icons";
 import {reactive, ref} from "vue";