未登录跳转拦截 登录首页更换增加用户信息登录页面优化

src/components/LayoutHeader.vue

@@ -9,17 +9,41 @@
         <el-menu-item :index="item.path" v-for="item in routeList" :key="item.name">{{ item.title }}</el-menu-item>
       </el-menu>
     </div>
+    <div style="align-self: center;">
+      <el-dropdown style="margin-top:10px">
+            <div style="font-size:medium;font-weight: bold; color:#000">{{ user.full_name }}</div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>用户资料</el-dropdown-item>
+                <el-dropdown-item>修改密码</el-dropdown-item>
+                <el-dropdown-item @click="handleLogout">登出</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { computed } from "vue";
 import { useMenuStore } from "@/stores/menu.js"
 import { useRoute, useRouter } from "vue-router";
+import {  getSessionVar } from '@/utils/session'
 const route = useRoute()
 const router = useRouter()
 // console.log('route', route)
 const { routeList } = useMenuStore()
+const user = ref({
+  id: "0",
+  full_name: 'John Doe',
+  username: 'johndoe',
+})
+    user.value = {
+      id: getSessionVar('user_id') || "0",
+      full_name: getSessionVar('full_name') || 'John Doe',
+      username: getSessionVar('username') || 'johndoe',
+    }
 const currentPath = computed(() => {
   let temp = ""
   for (let i = 0; i < routeList.length; i++) {
@@ -33,6 +57,10 @@ const currentPath = computed(() => {
   }
   return temp
 })
+const handleLogout = () => {
+  // 跳转到登录页面
+  router.push({ path: '/home',query: { logout: true } });
+}
 
 // console.log(menu.menu)
 </script>
@@ -46,9 +74,11 @@ const currentPath = computed(() => {
   .logo {
     width: 200px;
     // height: 60px;
-    border: 1px solid skyblue;
+    // border: 1px solid skyblue;
     flex: 0 0 auto;
     margin-right: 50px;
+    background: url('../assets/images/logo.jpg') no-repeat center;
+    background-size: 100% 100%;
   }
 
   .menu {

src/components/SideMenu.vue

@@ -1,6 +1,62 @@
 <template>
   <div class="left-nav">
-    <div class="nav-section">
+    <el-menu
+      default-active="1-1"
+      :unique-opened="true"
+      class="el-menu-vertical-demo">
+      <el-sub-menu index="1">
+        <template #title>
+          <i class="el-icon-location"></i>
+          <span>工作台</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item @click="router.push({ name: 'home' })" index="1-1">工作台概览</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
+            <el-sub-menu index="2">
+        <template #title>
+          <i class="el-icon-location"></i>
+          <span>工作队列（{{ queues.length }}）</span>
+        </template>
+        <el-menu-item-group>
+          <template v-for="(queue,index) in queues" :key="queue.id">
+          <el-menu-item :index="'2' + '-' + index" @click="queueClicked(queue)" >
+            <!-- <template #title> -->
+              <span>{{ queue.name }}</span>
+              <el-tag v-if="queue.type == 'input'" effect="light" round>START</el-tag>
+            <!-- </template> -->
+          </el-menu-item>
+        </template>
+        </el-menu-item-group>
+      </el-sub-menu>
+       <el-sub-menu index="3">
+        <template #title>
+          <i class="el-icon-location"></i>
+          <span>知识图谱</span>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="3-1"  @click="handleMenuClick('graph')">全部图谱</el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
+       <el-sub-menu index="4">
+        <template #title>
+          <i class="el-icon-location"></i>
+          <span>工作人员（{{ workers.length }}）</span>
+        </template>
+        <el-menu-item-group>
+        <el-menu-item v-for="worker in workers" :key="worker.id" @click="selectWorker(worker)" :index="'4-' + worker.id">
+          <el-icon>
+            <User />
+          </el-icon>
+          <span>{{ worker.name }}</span>
+          <el-tag :type="worker.status === '空闲' ? 'success' : 'warning'" size="small">
+            {{ worker.status }}
+          </el-tag>
+        </el-menu-item>
+        </el-menu-item-group>
+      </el-sub-menu>
+    </el-menu>
+    <!-- <div class="nav-section">
       <h3>工作台</h3>
       <el-menu :default-active="$route.path" router>
         <el-menu-item index="/home" :route="{ path: '/home' }">
@@ -46,7 +102,7 @@
           </el-tag>
         </el-menu-item>
       </el-menu>
-    </div>
+    </div> -->
     <!-- <div class="nav-section">
       <h3>知识库管理平台</h3>
       <el-menu>
@@ -144,15 +200,16 @@ const selectWorker = (worker: Worker) => {
 
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .left-nav {
-  width: 280px;
-  height: 100vh;
-  border-right: 0px solid #e4e7ed;
-  padding: 20px;
-  overflow-y: auto;
-  background-color: #e4e7ed;
-
+  // width: 280px;
+  // height: 100vh;
+  // border-right: 0px solid #e4e7ed;
+  // padding: 20px;
+  // overflow: auto;
+  // overflow-y: auto;
+  // background-color: #e4e7ed;
+  // background-color: #d5e9fe;
   .nav-section {
     margin-bottom: 30px;
 

src/router/index.ts

@@ -10,6 +10,7 @@ import TerminologyManagement from '@/views/KMPlatform/KGBuilder/TM/TerminologyMa
 import EntityTypeManagement from '@/views/KMPlatform/KGBuilder/KTM/EntityTypeManagement.vue'
 import KnowledgeBaseManagement from '@/views/KMPlatform/KnowledgeBase/KBM/KnowledgeBaseManagement.vue'
 import KnowledgeManagement from '@/views/KMPlatform/KnowledgeBase/KM/KnowledgeManagement.vue'
+import { getSessionVar,deleteSessionVar } from "@/utils/session"
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -145,4 +146,16 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, from, next) => {
+  if(getSessionVar('session_id') == null && getSessionVar('username') == null ) {
+    if (to.name !== 'home') {
+      next({ name: 'home' }); // 重定向到登录页面
+    }else {
+      next(); // 确认转移
+    }
+  } else {
+     next(); // 确认转移
+  }
+});
+
 export default router

src/views/AppCopy.vue

@@ -1,15 +1,18 @@
 <template>
-  <el-container v-if="isLoggedIn == false" class="login-container">
-    <div style=" height: 100px;">
-      <h1>知识图谱自动化构建平台</h1><br>
+  <el-container v-if="isLoggedIn == false" class="login-box">
+    <div style="width: 50%;"></div>
+    <div class="login-container">
+  <div class="login-header">
+      <!-- <h1>知识图谱自动化构建平台</h1><br> -->
+      <h1>欢迎{{isSignedIn? '注册' : '登录'}}知识图谱自动化构建平台</h1>
     </div>
 
     <div v-if="isSignedIn == false">
       <el-form v-model="loginForm">
-        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth">
+        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth" size="large">
           <el-input v-model="loginForm.username" name="username" placeholder="请输入用户名"></el-input>
         </el-form-item>
-        <el-form-item label="密码" :label-width="loginForm.formLabelWidth">
+        <el-form-item label="密码" :label-width="loginForm.formLabelWidth" size="large">
           <el-input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码"></el-input>
         </el-form-item>
         <el-form-item label="" :label-width="loginForm.formLabelWidth">
@@ -19,24 +22,24 @@
       </el-form>
     </div>
     <div v-if="isSignedIn == true">
-      <div>
+      <!-- <div>
         <h1>注册</h1>
-      </div>
+      </div> -->
 
       <el-form :model="loginForm" :rules="signinRules" ref="signinForm">
-        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth" prop="username">
+        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth" prop="username" size="large">
           <el-input v-model="loginForm.username" name="username" placeholder="请输入用户名"></el-input>
         </el-form-item>
-        <el-form-item label="显示姓名" :label-width="loginForm.formLabelWidth" prop="full_name">
+        <el-form-item label="显示姓名" :label-width="loginForm.formLabelWidth" prop="full_name" size="large">
           <el-input v-model="loginForm.full_name" name="full_name" placeholder="请输入姓名"></el-input>
         </el-form-item>
-        <el-form-item label="密码" :label-width="loginForm.formLabelWidth" prop="password">
+        <el-form-item label="密码" :label-width="loginForm.formLabelWidth" prop="password" size="large">
           <el-input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码"></el-input>
         </el-form-item>
-        <el-form-item lable="密码确认" :label-width="loginForm.formLabelWidth" prop="password2">
+        <el-form-item lable="密码确认" :label-width="loginForm.formLabelWidth" prop="password2" size="large">
           <el-input v-model="loginForm.password2" name="password2" type="password" placeholder="请再次输入密码"></el-input>
         </el-form-item>
-        <el-form-item label="邮箱" :label-width="loginForm.formLabelWidth" prop="email">
+        <el-form-item label="邮箱" :label-width="loginForm.formLabelWidth" prop="email" size="large">
           <el-input v-model="loginForm.email" name="email" placeholder="请输入邮箱"></el-input>
         </el-form-item>
         <el-form-item label="" :label-width="loginForm.formLabelWidth">
@@ -45,6 +48,8 @@
         </el-form-item>
       </el-form>
     </div>
+    </div>
+  
   </el-container>
   <el-container class="main-container" v-if="isLoggedIn">
     <el-header class="site_header">
@@ -85,7 +90,7 @@
   </el-container>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref,watch, watchEffect } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { RouterView } from 'vue-router'
 import SideMenu from '@/components/SideMenu.vue'
@@ -102,7 +107,7 @@ const loginForm = ref({
   full_name: '',
   password2: '',
   email: '',
-  formLabelWidth: 150
+  formLabelWidth: 100
 })
 const signinForm = ref()
 
@@ -173,6 +178,8 @@ const onSelectMenu = (menuData: any) => {
   }
 }
 const handleSignIn = () => {
+  loginForm.value.username = ''
+  loginForm.value.password = ''
   isSignedIn.value = !isSignedIn.value
 }
 
@@ -229,6 +236,7 @@ const handleLoginSubmit = () => {
     }
 
     isLoggedIn.value = true;
+    goToKMPlatform()
   })
 }
 
@@ -257,6 +265,12 @@ onMounted(() => {
     router.push({ path: '/' })
   })
 })
+watchEffect(() => {
+  // 监听路由变化
+  console.log('route changed', route)
+  if (route.query.logout) {
+    handleLogout()
+  }})
 </script>
 <style scoped>
 #app {
@@ -270,15 +284,32 @@ onMounted(() => {
   height: 100vh;
   overflow: hidden;
 }
+.login-box {
+  width: 100vw;
+  height: 100vh;
+  background-image: url('@/assets/images/loginBanar.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 
 .login-container {
+
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: #f5f7fa;
+  margin: auto;
+  width: 500px;
+  /* width: 100vw; */
+  /* height: 100vh; */
+  padding: 50px;
+  background-color: #eef6ff;
+  border-radius: 12px 12px 12px 12px;
+}
+.login-header{
+  font-size: 26px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
 
 .content-area {
@@ -294,10 +325,11 @@ onMounted(() => {
 }
 
 .site_header {
-  background-color: #c5c5c5;
+  /* background-color: #c5c5c5; */
+  background-color: #eef6ff;
   padding: 0 20px;
   height: 50px;
-  border-bottom: 1px solid #e4e7ed;
+  /* border-bottom: 1px solid #e4e7ed; */
 }
 
 .knowledge-base-icon {

src/views/KMPlatform/Home/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div class="container">
-      <h1>磐识医学知识图谱构建流程：</h1>
+      <h1>磐医学知识图谱构建流程：</h1>
       <div class="process">
         <div class="box-item">
           <div class="box-rect" v-for="(item, idx) in process">
@@ -55,7 +55,7 @@ let modules = ref<any>([
   },
   {
     name: '自动化构建知识图谱',
-    path: ""
+    path: "/kmplatform/kgbuilder/tm"
   },
   {
     name: "知识更新管理",
@@ -244,7 +244,9 @@ h1 {
   margin-top: 80px;
 
   &>div {
-    background-color: #F2F2F2;
+    //background-color: #F2F2F2;
+    // background: rgba(215, 223, 250, 0.5);
+    background: linear-gradient( #d7dffa 0%, #F6F6F9 100%);
     width: 350px;
     height: 200px;
     line-height: 200px;