对接统一身份认证，优化网页界面

hexuustc · Oct 24, 2023 · 4ec8124 · 4ec8124
1 parent 7cd151e
commit 4ec8124
Show file tree

Hide file tree

Showing 20 changed files with 9,597 additions and 6,201 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "vue-router": "4.0.1",
     "vue-toastification": "1.7.11",
     "vue-tree-list": "^1.5.0",
+    "vuex": "^4.0.0",
     "xterm": "^4.19.0",
     "xterm-addon-fit": "^0.5.0"
   },

diff --git a/public/img/brand/fpgaol_brand.png b/public/img/brand/fpgaol_brand.png
diff --git a/public/img/brand/fpgaol_brand_rmbg.png b/public/img/brand/fpgaol_brand_rmbg.png
diff --git a/public/img/icons/common/fpgaol.svg b/public/img/icons/common/fpgaol.svg
diff --git a/public/img/theme/pikachu.png b/public/img/theme/pikachu.png
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link
       rel="icon"
-      href="<%= BASE_URL %>img/brand/favicon.png"
+      href="<%= BASE_URL %>img/brand/fpgaol_brand_rmbg.png"
       type="image/png"
     />
     <title>FPGAOL | USTC</title>

diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue
@@ -14,7 +14,7 @@
 
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
-          <base-dropdown class="nav-item" position="right">
+          <!-- <base-dropdown class="nav-item" position="right">
             <template v-slot:title>
               <a
                 class="nav-link nav-link-icon"
@@ -32,15 +32,15 @@
             <a class="dropdown-item" href="#">Another action</a>
             <div class="dropdown-divider"></div>
             <a class="dropdown-item" href="#">Something else here</a>
-          </base-dropdown>
+          </base-dropdown> -->
           <base-dropdown class="nav-item" position="right">
             <template v-slot:title>
               <a class="nav-link" href="#" role="button">
                 <div class="media align-items-center">
                   <span class="avatar avatar-sm rounded-circle">
                     <img
                       alt="Image placeholder"
-                      src="img/theme/team-1-800x800.jpg"
+                      src="img/theme/pikachu.png"
                     />
                   </span>
                 </div>
@@ -54,7 +54,7 @@
               <i class="ni ni-single-02"></i>
               <span>My profile</span>
             </router-link>
-            <router-link to="/profile" class="dropdown-item">
+            <!-- <router-link to="/profile" class="dropdown-item">
               <i class="ni ni-settings-gear-65"></i>
               <span>Settings</span>
             </router-link>
@@ -65,9 +65,9 @@
             <router-link to="/profile" class="dropdown-item">
               <i class="ni ni-support-16"></i>
               <span>Support</span>
-            </router-link>
+            </router-link> -->
             <div class="dropdown-divider"></div>
-            <a href="#!" class="dropdown-item">
+            <a class="dropdown-item" @click="logout">
               <i class="ni ni-user-run"></i>
               <span>Logout</span>
             </a>
@@ -104,12 +104,19 @@
 </template>
 <script>
 import NavbarToggleButton from "@/components/NavbarToggleButton";
+import axios from 'axios';
 
 export default {
   name: "sidebar",
   components: {
     NavbarToggleButton,
   },
+  data() {
+    return {
+      res:{},
+      username:"None"
+    };
+  },
   props: {
     logo: {
       type: String,
@@ -135,6 +142,18 @@ export default {
     showSidebar() {
       this.$sidebar.displaySidebar(true);
     },
+    logout(){
+      localStorage.removeItem('Authorization');
+      localStorage.removeItem('userdata');
+      this.username = this.$store.state.username;
+      this.$router.push('/login');
+      axios
+     .get('http://202.38.79.96:9003/sso/logout?username='+this.username)
+     .then(response => (
+         console.log("logout: ",response.data)
+         //this.$router.push('/login')
+     ))
+    },
   },
   beforeUnmount() {
     if (this.$sidebar.showSidebar) {

diff --git a/src/components/websocket/websocket.js b/src/components/websocket/websocket.js
@@ -2,6 +2,7 @@ import emitter from "./event_bus.js";
 
 let DEBUG_MODE = true;
 let DEBUG_WS_SERVER = "202.38.79.96:12148";
+//let DEBUG_WS_SERVER = "202.38.79.134:12169";
 
 let notifySocket;
 let PI_SERVER_ADDRESS = window.location.host;
@@ -14,7 +15,9 @@ export default function initWebsocket() {
   }
   notifySocket.onmessage = function (e) {
     const data = JSON.parse(e.data);
-    //console.log("receive message:", data);
+    console.log("receive message:", data);
+    //print("hhh");
+    console.log("bbb");
     const type = data["type"];
     const idx = data["idx"];
     let payload = data["payload"];
@@ -35,11 +38,12 @@ export default function initWebsocket() {
 }
 
 function sendJson(json) {
-  console.log(json);
+  console.log("websocket sendjson: ",json);
   notifySocket.send(json);
 }
 
 function sendStartNotify(json) {
+  console.log("sendStartNotify in ");
   var data = JSON.parse(json);
   var id = data["id"];
   if (id == -2) {

diff --git a/src/layout/AuthLayout.vue b/src/layout/AuthLayout.vue
@@ -6,17 +6,13 @@
       containerClasses="px-4 container"
       expand
     >
-      <!-- <router-link slot="brand" class="navbar-brand" to="/">
-                <img src="img/brand/white.png"/>
-            </router-link> -->
-
       <template v-slot="{ closeMenu }">
         <!-- Collapse header -->
         <div class="navbar-collapse-header d-md-none">
           <div class="row">
             <div class="col-6 collapse-brand">
               <router-link to="/">
-                <img src="img/brand/green.png" />
+                <img src="img/brand/fpgaol.png" />
               </router-link>
             </div>
             <div class="col-6 collapse-close">
@@ -34,30 +30,30 @@
         </div>
         <!-- Navbar items -->
         <ul class="navbar-nav ml-auto">
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <router-link class="nav-link nav-link-icon" to="/">
               <i class="ni ni-planet"></i>
               <span class="nav-link-inner--text">Dashboard</span>
             </router-link>
-          </li>
-          <li class="nav-item">
+          </li> -->
+          <!-- <li class="nav-item">
             <router-link class="nav-link nav-link-icon" to="/register">
               <i class="ni ni-circle-08"></i>
               <span class="nav-link-inner--text">Register</span>
             </router-link>
-          </li>
+          </li> -->
           <li class="nav-item">
             <router-link class="nav-link nav-link-icon" to="/login">
               <i class="ni ni-key-25"></i>
               <span class="nav-link-inner--text">Login</span>
             </router-link>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <router-link class="nav-link nav-link-icon" to="/profile">
               <i class="ni ni-single-02"></i>
               <span class="nav-link-inner--text">Profile</span>
             </router-link>
-          </li>
+          </li> -->
         </ul>
       </template>
     </base-nav>
@@ -67,11 +63,11 @@
         <div class="header-body text-center mb-7">
           <div class="row justify-content-center">
             <div class="col-lg-5 col-md-6">
-              <h1 class="text-white">Welcome!</h1>
-              <p class="text-lead text-white">
+              <h1 class="text-white">Welcome to FPGAOL!</h1>
+              <!-- <p class="text-lead text-white">
                 Use these awesome forms to login or create new account in your
                 project for free.
-              </p>
+              </p> -->
             </div>
           </div>
         </div>
@@ -93,10 +89,10 @@
       </div>
     </div>
     <!-- Page content -->
-    <div class="container mt--8 pb-5">
+    <div class="container mt--8 pb-9">
       <router-view></router-view>
     </div>
-    <footer class="py-5">
+    <!-- <footer class="py-5">
       <div class="container">
         <div class="row align-items-center justify-content-xl-between">
           <div class="col-xl-6">
@@ -150,7 +146,7 @@
           </div>
         </div>
       </div>
-    </footer>
+    </footer> -->
   </div>
 </template>
 <script>
@@ -164,4 +160,8 @@ export default {
   },
 };
 </script>
-<style></style>
+<style>
+  .main-content {
+    min-height: 100vh;
+  }
+</style>
diff --git a/src/layout/DashboardLayout.vue b/src/layout/DashboardLayout.vue
@@ -43,23 +43,54 @@
             path: '/about',
           }"
         />
-        <!-- <sidebar-item
+        <sidebar-item
           :link="{
             name: '下载',
             icon: 'ni ni-key-25 text-info',
             path: '/home',
           }"
-        /> -->
+        />
         <sidebar-item
           :link="{
             name: 'Register',
             icon: 'ni ni-circle-08 text-pink',
             path: '/register',
           }"
         />
+        <sidebar-item
+          :link="{
+            name: 'dashboard',
+            icon: 'fa fa-solid fa-arrow-right text-red',
+            path: '/dashboard',
+          }"
+        /><sidebar-item
+          :link="{
+            name: 'icons',
+            icon: 'ni ni-bullet-list-67 text-red',
+            path: '/icons',
+          }"
+        /><sidebar-item
+          :link="{
+            name: 'maps',
+            icon: 'ni ni-bullet-list-67 text-red',
+            path: '/maps',
+          }"
+        /><sidebar-item
+          :link="{
+            name: 'tables',
+            icon: 'ni ni-bullet-list-67 text-red',
+            path: '/tables',
+          }"
+        />
+        <button class="toggle-btn text-info" @click="toggleSidebar">
+          <i class="ni ni-bold-left"></i> <!-- 使用 Font Awesome 的箭头图标 -->
+        </button>
       </template>
     </side-bar>
-<div v-if="!expand_sidebar" class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white">
+<div v-if="!expand_sidebar" class="show-sidebar-btn text-info" @click="toggleSidebar">
+  <i class="ni ni-bold-right"></i>
+</div>
+<div v-if="false" class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white">
     <el-radio-group  v-model="isCollapse" style="margin-bottom: 20px;">
       <el-radio-button :label="false">展开</el-radio-button>
       <el-radio-button :label="true">收起</el-radio-button>
@@ -99,28 +130,28 @@
 </div>
     <div class="main-content" :data="sidebarBackground">
       <dashboard-navbar></dashboard-navbar>
-      <div @click="toggleSidebar">
+      <div>
         <!-- your content here -->
         <router-view></router-view>
-        <content-footer v-if="!$route.meta.hideFooter"></content-footer>
+        <!-- <content-footer v-if="!$route.meta.hideFooter"></content-footer> -->
       </div>
     </div>
   </div>
 </template>
 <script>
 import DashboardNavbar from "./DashboardNavbar.vue";
-import ContentFooter from "./ContentFooter.vue";
+//import ContentFooter from "./ContentFooter.vue";
 //import SideBar from "../components/SidebarPlugin/SideBar.vue";
 
 export default {
   components: {
     DashboardNavbar,
-    ContentFooter,
+    //ContentFooter,
     //SideBar,
   },
   data() {
     return {
-      sidebarBackground: "blue", //vue|blue|orange|green|red|primary
+      sidebarBackground: "red", //vue|blue|orange|green|red|primary
       expand_sidebar: true,
       isCollapse: true
     };
@@ -130,6 +161,7 @@ export default {
       if (this.$sidebar.showSidebar) {
         this.$sidebar.displaySidebar(false);
       }
+      this.expand_sidebar = !this.expand_sidebar;
     },
     handleOpen(key, keyPath) {
         console.log(key, keyPath);
@@ -148,4 +180,32 @@ export default {
     width: 200px;
     min-height: 400px;
   }
+.toggle-btn, .show-sidebar-btn {
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(225, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  z-index: 1000;
+}
+
+.toggle-btn {
+  left: 220px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.show-sidebar-btn {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+
 </style>