瀏覽代碼

添加历史记录和我的收藏菜单及初始界面

Kevin Jiang 3 年之前
父節點
當前提交
bbeec491cd

+ 13 - 1
src/App.vue

@@ -3,10 +3,22 @@ import { RouterView } from "vue-router";
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useAuthStore } from "./stores/auth.store";
+import { routeToLogin } from "./router";
 dayjs.locale('zh-cn');
 
 const locale = ref(zhCN);
+
+const authStore = useAuthStore();
+
+onMounted(() => {
+  authStore.checkLogin().then((isLogin) => {
+    if (!isLogin) {
+      routeToLogin();
+    }
+  });
+});
 </script>
 
 <template>

+ 20 - 1
src/components/NavMenu.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { FilePptOutlined, FileSearchOutlined, NodeIndexOutlined, LogoutOutlined } from '@ant-design/icons-vue';
+import {
+  FilePptOutlined,
+  FileSearchOutlined,
+  NodeIndexOutlined,
+  LogoutOutlined,
+  HistoryOutlined,
+  StarOutlined,
+} from '@ant-design/icons-vue';
 import { onMounted, ref, watch } from 'vue';
 import { useRoute, RouterLink } from "vue-router";
 import _ from "lodash";
@@ -87,6 +94,18 @@ function logout(e: MouseEvent) {
         <RouterLink to="/knowledge-graph/search">建筑工程科技导航</RouterLink>
       </a-menu-item>
     </a-sub-menu>
+    <a-menu-item key="/history">
+      <template #icon>
+        <history-outlined />
+      </template>
+      <RouterLink to="/history">历史记录</RouterLink>
+    </a-menu-item>
+    <a-menu-item key="/favorite">
+      <template #icon>
+        <star-outlined />
+      </template>
+      <RouterLink to="/favorite">我的收藏</RouterLink>
+    </a-menu-item>
     <a-menu-item key="/logout" @click="logout">
       <template #icon>
         <logout-outlined />

+ 24 - 0
src/router/index.ts

@@ -84,6 +84,30 @@ export const router = createRouter({
       component: () => import("../views/LoginView.vue"),
     },
     {
+      path: "/history",
+      name: "History",
+      component: RouteView,
+      children: [
+        {
+          path: "",
+          name: "HistoryIndex",
+          component: () => import("../views/HistoryView.vue"),
+        }
+      ]
+    },
+    {
+      path: "/favorite",
+      name: "Favorite",
+      component: RouteView,
+      children: [
+        {
+          path: "",
+          name: "FavoriteIndex",
+          component: () => import("../views/FavoriteView.vue"),
+        }
+      ]
+    },
+    {
       path: '/:pathMatch(.*)*',
       name: 'NotFound',
       component: () => import("../views/NotFound.vue"),

+ 3 - 1
src/services/httpClient.ts

@@ -1,9 +1,9 @@
 import {message} from "ant-design-vue";
 import axios, {AxiosError, type AxiosRequestConfig} from "axios";
+import { routeToLogin } from "@/router";
 
 const urlPrefix = "/";
 
-
 const httpClient = axios.create({
     baseURL: urlPrefix,
     timeout: 60000,
@@ -31,6 +31,8 @@ httpClient.interceptors.response.use(function (response) {
     // 对响应错误做点什么
     if (error.response?.status == 404) {
         message.error("请求参数错误!");
+    } else if (error.response?.status == 401) {
+        return routeToLogin();
     } else if (error) {
         // @ts-ignore
         message.error(error.response.data.msg);

+ 10 - 1
src/services/user.service.ts

@@ -7,6 +7,15 @@ function login(param: UserLoginRequest): Promise<AxiosResponse<Response<UserLogi
   return httpClient.post("/gw/user/login", param);
 }
 
+async function checkLogin(): Promise<boolean> {
+  const resp = await httpClient.get("/gw/user/user/checkLogin");
+  if (resp) {
+    return true;
+  }
+  return false;
+}
+
 export default {
-  login
+  login,
+  checkLogin,
 }

+ 6 - 0
src/stores/auth.store.ts

@@ -1,5 +1,6 @@
 import { ref } from "vue";
 import { defineStore } from "pinia";
+import userService from "@/services/user.service";
 
 const tokenKey = "token";
 
@@ -15,6 +16,10 @@ export const useAuthStore = defineStore('auth', () => {
     return token.value && token.value.trim() != "";
   }
 
+  function checkLogin() {
+    return userService.checkLogin();
+  }
+
   function logout() {
     setToken("");
   }
@@ -24,5 +29,6 @@ export const useAuthStore = defineStore('auth', () => {
     setToken,
     isLoginIn,
     logout,
+    checkLogin,
   }
 });

+ 3 - 0
src/views/FavoriteView.vue

@@ -0,0 +1,3 @@
+<template>
+  我的收藏
+</template>

+ 6 - 0
src/views/HistoryView.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  历史记录
+</template>

+ 6 - 3
src/views/RouteView.vue

@@ -19,14 +19,14 @@ watch(
 <template>
   <a-layout>
     <a-layout-sider
-      class="sider-nav-bar"
+      class="sider-nav-bar-wrap"
       width="260"
       theme="light"
       v-model:collapsed="sideBarStore.collapsed"
       collapsible
     >
       <div class="logo">{{ brand }}</div>
-      <NavMenu />
+      <NavMenu class="sider-nav" />
     </a-layout-sider>
     <a-layout>
       <a-layout-content class="main-content">
@@ -37,13 +37,16 @@ watch(
 </template>
 
 <style scoped lang="scss">
-.sider-nav-bar {
+.sider-nav-bar-wrap {
   height: 100vh;
   .logo {
     height: 32px;
     // background: rgba(128, 128, 128, 0.5);
     margin: 16px;
   }
+  .sider-nav {
+    padding-bottom: 50px;
+  }
 }
 
 .ant-layout-header {