feat：添加登录页面，完善文章目录

Yi.BBS.Vue3/src/components/TreeArticleInfo.vue

@@ -6,6 +6,8 @@
                   :expand-on-click-node="false"
                   node-key="id"
                   :default-expand-all='true'
+                  :highlight-current="true"
+                  :current-node-key="currentNodeKey"
                 >
 
                 <template #default="{ node, data }">
@@ -28,9 +30,13 @@
                 </el-tree>
 </template>
 <script setup>
+import { ref } from 'vue';
 
-const props = defineProps(['data'])
+
+const props = defineProps(['data',"currentNodeKey"])
 const emits= defineEmits(["handleNodeClick"])
+
+const currentNodeKey=props.currentNodeKey;
 //数据定义
 //子文章数据
 // const articleData =ref([]);

Yi.BBS.Vue3/src/layout/AppHeader.vue

@@ -3,7 +3,7 @@
     :default-active="activeIndex"
     class="el-menu-demo"
     mode="horizontal"
-    ellipsis="false"
+    :ellipsis="false"
     @select="handleSelect"
     
   >
@@ -31,7 +31,10 @@
 
     <div class="flex-grow" />
 
-    <RouterLink to="/discuss"> <el-menu-item index="5">搜索</el-menu-item></RouterLink>
+   <el-menu-item index="5">
+      <el-input  placeholder="请输入关键字" clearable />
+      
+      搜索</el-menu-item>
     <el-menu-item index="6">
         <AvatarInfo :size='30' :isSelf="true"   />
     </el-menu-item>
@@ -42,7 +45,6 @@
       <el-menu-item index="6-3" @click="logout">登出</el-menu-item>
     </el-sub-menu>
 
-    <el-menu-item index="7">分享</el-menu-item>
   </el-menu>
 
 </template>

Yi.BBS.Vue3/src/layout/LoginLayout.vue

@@ -1,21 +1,17 @@
 <template>
 <div class="body-div" id="body">
 
-
-
-
   <div  class="left">
-    <video class="videoBG" controls autoplay playsinline loop disablepictureinpicture  poster="/loginBg.png">
-    <source src="/loginBg.mp4" type="video/mp4">
-    您的浏览器不支持 video 标签。
-</video>
-</div>
-
-
-<div class="right">
-  <RouterView />
-</div>
+    <video class="videoBG"  autoplay playsinline loop disablepictureinpicture  poster="/loginBg.png">
+    <!-- <source src="/loginBg.mp4" type="video/mp4"> -->
+    </video>
+  </div>
 
+  <div class="right">
+    <div class="right-div">
+    <RouterView />
+  </div>
+  </div>
 
 </div>
 
@@ -25,78 +21,33 @@
   <script setup>
 import { onMounted } from 'vue';
 
-const screenSize=()=>{
-
-  var screenHeight=document.documentElementclientHeight;
-		var screenWidth=document.documentElement.clientWidth;
-		var body=document.getElementById('body');
-		body.style.width=screenWidth+"px";
-		body.style.height=screenHeight+"px";
-}
-onMounted(()=>{
-  screenSize();
-  window.onresize = () => (() => {
-    screenSize();
-    })();
-})
-
 </script>
 <style scoped>
 .left
 {
-  width: 100%;
-  background-color:#00020E
+
+ background-color: #010413;
 }
 .right
 {
-  max-width: 520px;
-  width:40% ;
-  background-color: blue;
+
+}
+.right-div
+{
+margin-top: 60%;
+padding: 2rem;
 }
 .body-div
 {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
 
+display: flex;
+justify-content: space-between;
+height: 930px;
 }
 .videoBG
 {
+
 width:100% ;
 }
 
-    video::-webkit-media-controls-fullscreen-button {
-        display: none;
-    }
-
-    video::-webkit-media-controls-play-button {
-        display: none;
-    }
-
-    video::-webkit-media-controls-timeline {
-        display: none;
-    }
-
-    video::-webkit-media-controls-current-time-display{
-        display: none;            
-    }
-
-    video::-webkit-media-controls-time-remaining-display {
-        display: none;            
-    }
-
-    video::-webkit-media-controls-mute-button {
-        display: none;            
-    }
-    video::-webkit-media-controls-toggle-closed-captions-button {
-        display: none;            
-    }
-
-    video::-webkit-media-controls-volume-slider {
-        display: none;            
-    }
-
-    video::-webkit-media-controls-enclosure{ 
-        display: none;
-    }
 </style>

Yi.BBS.Vue3/src/views/Article.vue

@@ -12,7 +12,7 @@
                   style="width: 100%; margin-bottom: 0.8rem; margin-left: 0">添加子文章</el-button>
                 <!--目录在这里 -->
                 <TreeArticleInfo :data="articleData" @remove="delArticle" @update="updateArticle" @create="addNextArticle"
-                  @handleNodeClick="handleNodeClick" />
+                  @handleNodeClick="handleNodeClick" :currentNodeKey="currentNodeKey"/>
               </template>
             </InfoCard>
           </el-col>
@@ -83,7 +83,8 @@
             <InfoCard class="art-info-right" header="目录" hideDivider="true">
               <template #content>
                 <div>
-                  <ul class="art-info-ul">
+                  <el-empty :image-size="100" style="padding: 20px 0;" v-if="catalogueData.length==0" description="无目录" />
+                  <ul v-else class="art-info-ul">
                     <li v-for="(item, i) in catalogueData" :key="i">
                       <el-button style="width: 100%; justify-content: left" type="primary" text>{{ `${i + 1} ： ${item}`
                       }}</el-button>
@@ -134,23 +135,26 @@ const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 const articleData = ref([]);
 //主题内容
 const discuss = ref({});
-
+//当前默认选择的子文章
+const currentNodeKey=route.params.articleId;
 //目录数据
 const catalogueData = ref([]);
 
 //子文章初始化
 const loadArticleData = async () => {
+
   articleData.value = await articleall(route.params.discussId);
 }
 
 //主题初始化
 const loadDiscuss = async (isRewrite) => {
+
   if (isRewrite) {
     //跳转路由
     router.push(`/article/${route.params.discussId}`);
   }
   discuss.value = await discussGet(route.params.discussId);
-  if (route.params.articleId != undefined) {
+  if (route.params.articleId != "") {
     const respose = await articleGet(route.params.articleId);
     discuss.value.content = respose.content;
   }

Yi.BBS.Vue3/src/views/EditArticle.vue

@@ -125,11 +125,15 @@ const submit = async (formEl) => {
 
         //主题创建
         if (route.query.operType == "create") {
-          await discussAdd(discuss);
+       const response=   await discussAdd(discuss);
+       var routerPer = { path: `/article/${response.id}` };
+      router.push(routerPer);
         }
         //主题更新
         else if (route.query.operType == "update") {
           await discussUpdate(route.query.discussId, discuss);
+          var routerPer = { path: `/article/${route.query.discussId}` };
+      router.push(routerPer);
         }
       }
 
@@ -142,16 +146,21 @@ const submit = async (formEl) => {
         article.parentId=route.query.parentArticleId
         //文章创建
         if (route.query.operType == "create") {
-          await articleAdd(article);
+         const response= await articleAdd(article);
+          var routerPer = { path: `/article/${route.query.discussId}/${response.id}` };
+      router.push(routerPer);
         }
         //文章更新
         else if (route.query.operType == "update") {
           await articleUpdate(route.query.articleId, article);
+
+          var routerPer = { path: `/article/${route.query.discussId}/${route.query.articleId}` };
+      router.push(routerPer);
         }
       }
       //添加成功后跳转到该页面
-      var routerPer = { path: `/discuss/${discuss.plateId}` };
-      router.push(routerPer);
+      // var routerPer = { path: `/discuss/${discuss.plateId}` };
+      // router.push(routerPer);
       // ruleFormRef.value.resetFields();
       // discuss.plateId = route.query.plateId;
     }

Yi.BBS.Vue3/src/views/Login.vue

@@ -1,8 +1,8 @@
 <template>
-    这个是登录页面
+  <h2>  登录-欢迎</h2>
     <el-input v-model="loginForm.userName" placeholder="用户名" />
     <el-input v-model="loginForm.password" placeholder="密码" />
-    <el-button type="primary" @click="login">登录</el-button>
+    <el-button class="login-btn" type="primary" @click="login">登录</el-button>
 </template>
 <script setup>
 import { reactive } from 'vue';
@@ -25,4 +25,18 @@ if( response.code==undefined)
 }
 }
 
-</script>
+</script>
+<style scoped>
+h2{
+    text-align: center;
+}
+.el-input
+{
+margin:0rem 0 0.5rem 0;
+
+}
+.login-btn
+{
+    width: 100%;
+}
+</style>