feat: 教师交流平台的前端实现

public/index.html

@@ -17,7 +17,7 @@
         }
         body {
             margin: 0;
-            min-width: 1100px;
+            min-width: 1200px;
             background: #f8f9fb;
         }
     </style>

src/App.vue

@@ -36,6 +36,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "main.css";
 /*Zhurui修改，消除底部对主体元素的覆盖*/
 .main-body {
   //margin-bottom: 250px;

src/components/GlobalHeader/GlobalHeader.vue

@@ -21,6 +21,9 @@
       <el-menu-item v-if="isTeacher" index="7">
         管理
       </el-menu-item>
+        <el-menu-item v-if="isTeacher" index="10">
+            交流
+        </el-menu-item>
       <el-menu-item index="6">
         个人中心
       </el-menu-item>
@@ -85,7 +88,7 @@ export default {
         ["7", "Manage"],
         ["8", "Problem"],
         ["9", "CourseDetail"],
-
+        ["10", "Communication"]
       ]
     };
   },

src/global/register-element.js

@@ -37,10 +37,10 @@ import {
   ElMenuItem,
   ElSubmenu, ElCollapse, ElCollapseItem,
   ElSwitch,
-  ElContainer,ElHeader,ElMain,
+  ElContainer, ElHeader, ElMain,
   ElBadge, ElOptionGroup, ElTooltip,
   ElAlert,
-  ElProgress
+  ElProgress, ElCheckboxGroup
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -92,7 +92,8 @@ const components = [
   ElHeader,
   ElMain,
   ElAlert,
-  ElProgress
+  ElProgress,
+  ElCheckboxGroup
 ];
 
 export default function (app) {

src/main.css

@@ -0,0 +1,9 @@
+:root{
+
+}
+
+.current{
+    color: var(--el-color-primary);
+    border-color: var(--el-color-primary-light-7);
+    background-color: var(--el-color-primary-light-9);
+}

src/router/index.js

@@ -140,6 +140,24 @@ const routes = [
     path: "/root",
     name: "Root",
     component: ()=>import("../views/RootPage/index.vue")
+  },
+  {
+    path: "/communication",
+    name: "Communication",
+    component: ()=>import("../views/CommunicationPage/index.vue"),
+    redirect: "/communication/explore",
+    children:[
+      {
+        path:"explore",
+        name: "CommunicationExplore",
+        component: ()=>import("../views/CommunicationPage/ExplorePage/index.vue")
+      },
+      {
+        path:"publish",
+        name: "CommunicationPublish",
+        component: ()=>import("../views/CommunicationPage/PublishPage/index.vue")
+      }
+    ],
   }
 ];
 

src/views/CommunicationPage/ExplorePage/ExploreItem.vue

@@ -0,0 +1,53 @@
+<template>
+    <el-card class="explore-item" shadow="never">
+        <div class="explore-item-description">
+            <h1 style="margin:0">标题</h1>
+            <div>
+                <span>发帖人：</span>
+                <span>单位院系：</span>
+                <span>联系方式：</span>
+            </div>
+            <p class="description-detail">详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述</p>
+        </div>
+        <img class="explore-item-img" src="https://lain.bgm.tv/r/400/pic/cover/l/71/37/1728_HLsCr.jpg">
+    </el-card>
+</template>
+
+<script>
+export default {
+  name: "ExploreItem"
+};
+</script>
+
+<style scoped>
+el-card {
+    width: 100%;
+}
+
+.explore-item {
+    height: 130px;
+    border-radius: 10px;
+    position: relative;
+    cursor: pointer;
+}
+
+.explore-item-img {
+    height: 120px;
+    aspect-ratio: 2/3;
+}
+
+:deep(.el-card__body) {
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.description-detail{
+    margin-top: 10px;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>

src/views/CommunicationPage/ExplorePage/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="communication-explore">
+        <div class="explore-header">
+            <div class="explore-selector">
+                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
+                </el-checkbox>
+                <el-checkbox-group v-model="checkedTypes" @change="handleCheckedTypesChange">
+                    <el-checkbox v-for="type in types" :label="type" :key="type">{{ type }}</el-checkbox>
+                </el-checkbox-group>
+            </div>
+            <div class="explore-search">
+                <el-input placeholder="请输入搜索内容" v-model="content"></el-input>
+                <el-button type="primary" style="margin-left: 10px">确认</el-button>
+            </div>
+        </div>
+        <div class="explore-main">
+            <ExploreItem class="explore-item"/>
+            <ExploreItem class="explore-item"/>
+            <ExploreItem class="explore-item"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import ExploreItem from "@/views/CommunicationPage/ExplorePage/ExploreItem.vue";
+
+export default {
+  name: "Explore",
+  components: {ExploreItem},
+  data() {
+    return {
+      // explore-selector
+      checkAll: true,
+      checkedTypes: ["难题", "活动", "其他"],
+      types: ["难题", "活动", "其他"],
+      isIndeterminate: false,
+      // explore-search
+      content: "",
+    };
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      this.checkedTypes = val ? this.types : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedTypesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.types.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.types.length;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.communication-explore {
+    flex: 1;
+    padding: 10px;
+}
+
+.explore-header{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+}
+
+.explore-search{
+    display: flex;
+    align-items: center;
+}
+
+.explore-main{
+    padding: 0 30px;
+}
+
+.explore-item{
+    margin-bottom: 10px;
+}
+</style>

src/views/CommunicationPage/PublishPage/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="communication-publish">
+        <el-form label-position="right" label-width="80px" :model="form">
+            <el-form-item label="标题">
+                <el-input v-model="form.title"></el-input>
+            </el-form-item>
+            <el-form-item label="类别">
+                <el-select v-model="form.type" placeholder="请选择">
+                    <el-option
+                            v-for="item in typeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="详细描述">
+                <el-input type="textarea" :rows="2"
+                        placeholder="请输入内容"
+                        v-model="form.textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="单位院校">
+                <el-input v-model="form.organization"></el-input>
+            </el-form-item>
+            <el-form-item label="联系方式">
+                <el-input v-model="form.contact"></el-input>
+            </el-form-item>
+            <el-form-item label="图片">
+                <el-upload>
+                    <el-button size="small" type="primary">点击上传</el-button>
+                </el-upload>
+            </el-form-item>
+            <el-form-item label="附件">
+                <el-upload>
+                    <el-button size="small" type="primary">点击上传</el-button>
+                </el-upload>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Publish",
+  data() {
+    return {
+      form: {
+        title: "",
+        organization: "",
+        contact: "",
+        type: null,
+        textarea: "",
+      },
+      typeOptions: [{
+        value: 0,
+        label: "其他"
+      }, {
+        value: 1,
+        label: "难题"
+      }, {
+        value: 2,
+        label: "活动"
+      }],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.communication-publish {
+    flex: 1;
+    margin: 10px 10px 0;
+    overflow: scroll;
+}
+</style>

src/views/CommunicationPage/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="communication-page">
+        <div class="communication-page-menu">
+            <el-button class="menu-button" round @click="toPage('CommunicationExplore')"
+                       :class="$route.name==='CommunicationExplore'?'current':''">发现
+            </el-button>
+            <el-button class="menu-button" round @click="toPage('CommunicationPublish')"
+                       :class="$route.name==='CommunicationPublish'?'current':''">发布
+            </el-button>
+        </div>
+        <router-view/>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "Communication",
+  methods: {
+    toPage(name) {
+      this.$router.push({name});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.communication-page {
+    display: flex;
+    height: calc(100vh - 60px - 220px);
+}
+
+.communication-page-menu {
+    flex-basis: 300px;
+}
+
+.menu-button {
+    display: block;
+    width: 200px;
+    margin: 15px auto auto;
+}
+</style>

src/views/RootPage/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <div>root</div>
+  <div id="root-page">
+    <div id="root-menu">
+    </div>
+    <div id="root-main">
+      root-main
+    </div>
+  </div>
 </template>
 
 <script>
@@ -9,5 +15,18 @@ export default {
 </script>
 
 <style scoped>
+#root-page {
+  display: flex;
+  height: 100%;
+}
 
+#root-menu {
+  height: calc(100vh - 280px);
+  flex-basis: 10vw;
+  background: aliceblue;
+}
+
+#root-main {
+  flex: 1;
+}
 </style>