feat: update cache Sys.

feat: CarouselCard beta
refactor: PortalPage layout

src/App.vue

@@ -1,3 +1,16 @@
 <template>
   <router-view/>
 </template>
+
+<script>
+export default {
+  mounted() {
+    const that = this;
+    that.$store.commit("recover_user");
+    window.onbeforeunload = function () {
+      that.$store.commit("save_user");
+      return null;
+    };
+  },
+};
+</script>

src/global/register-element.js

@@ -19,7 +19,7 @@ import {
   ElMessage,
   ElRadioButton,
   ElRadioGroup,
-  ElPopover,
+  ElPopover, ElCarousel, ElCarouselItem,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -45,6 +45,8 @@ const components = [
   ElRadioButton,
   ElRadioGroup,
   ElPopover,
+  ElCarousel,
+  ElCarouselItem,
 ];
 
 export default function (app) {

src/store/modules/user.js

@@ -41,6 +41,32 @@ const user = {
       state.signature = data.user.signature;
       state.createdTime = data.user.createdTime;
       state.valid = data.user.valid;
+    },
+    save_user: function (state) {
+      sessionStorage._token = state.token;
+      localStorage._name = state.name;
+      localStorage._id = state.id;
+      localStorage._phone = state.phone;
+      localStorage._username = state.username;
+      localStorage._email = state.email;
+      localStorage._photo = state.photo;
+      localStorage._role = state.role;
+      localStorage._signature = state.signature;
+      localStorage._createdTime = state.createdTime;
+      localStorage._valid = state.valid;
+    },
+    recover_user: function (state) {
+      state.token = sessionStorage._token;
+      state.name = localStorage._name;
+      state.id = localStorage._id;
+      state.phone = localStorage._phone;
+      state.username = localStorage._username;
+      state.email = localStorage._email;
+      state.photo = localStorage._photo;
+      state.role = localStorage._role;
+      state.signature = localStorage._signature;
+      state.createdTime = localStorage._createdTime;
+      state.valid = localStorage._valid;
     }
   },
 

src/views/AuthPage/components/AuthCard.vue

@@ -87,7 +87,7 @@
       </div>
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
-        <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
+        <el-checkbox v-model="rememberPassword">记住我</el-checkbox>
         <span id="auth-card-login-password-option-reset" @click="toResetType">重置密码</span>
       </div>
 
@@ -311,8 +311,8 @@ export default {
               this.$apis.loginAPI(params)
                 .then((res) => {
                   if (res.data.code === 0) {
-                    localStorage.phone = this.cardForm.phone;
                     if (this.rememberPassword) {
+                      localStorage.phone = this.cardForm.phone;
                       localStorage.password = this.cardForm.password;
                       localStorage.rememberPassword = this.rememberPassword;
                     } else {
@@ -320,6 +320,7 @@ export default {
                       localStorage.removeItem("rememberPassword");
                     }
                     this.$store.commit("set_user", res.data.data);
+                    this.$store.commit("save_user");
                     this.$message({
                       showClose: true,
                       message: "登录成功",

src/views/PortalPage/PortalPage.vue

@@ -1,40 +1,23 @@
 <template>
   <GlobalHeader/>
   <div id="portal-body">
-    <div id="portal-main-left">
-      <CarouselCard/>
-      <div>blank</div>
-      <div id="a" :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}" style="cursor: pointer;" @click="toCourse">精选课程
-        <img alt="err" src="@/assets/allCourse.png" style="width: 100%; height: 80%">
-      </div>
-      <div>blank</div>
-      <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}" style="cursor: pointer" @click="toTest">智能测试
-        <img alt="err" src="@/assets/allTest.png" style="width: 100%; height: 80%">
-      </div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
+    <CarouselCard/>
+    <InfoCard/>
+    <div id="a" :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}" style="cursor: pointer;" @click="toCourse">精选课程
+      <img alt="err" src="@/assets/allCourse.png" style="width: 100%; height: 80%">
     </div>
-
-    <div id="portal-main-right">
-      <InfoCard/>
-      <div>blank</div>
-      <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}">我的课程
-        <img alt="err" src="@/assets/myCourse.png" style="width: 100%; height: 80%">
-      </div>
-      <div>blank</div>
-      <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}">我的测试
-        <img alt="err" src="@/assets/myTest.png" style="width: 100%; height: 80%">
-      </div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
-      <div>滚动查看更多</div>
+    <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}">我的课程
+      <img alt="err" src="@/assets/myCourse.png" style="width: 100%; height: 80%">
+    </div>
+    <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}" style="cursor: pointer" @click="toTest">智能测试
+      <img alt="err" src="@/assets/allTest.png" style="width: 100%; height: 80%">
+    </div>
+    <div :style="{height:(this.extending?'650px':'200px'), transition: 'height 0.5s'}">我的测试
+      <img alt="err" src="@/assets/myTest.png" style="width: 100%; height: 80%">
     </div>
+
   </div>
+
 </template>
 
 <script>
@@ -82,14 +65,9 @@ export default {
 
 <style scoped>
 #portal-body {
-  display: flex;
-}
-
-#portal-main-left {
-  flex: 1;
-}
-
-#portal-main-right {
-  width: 400px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-gap: 20px 40px;
+  background: #409eff;
 }
 </style>

src/views/PortalPage/components/CarouselCard.vue

@@ -1,15 +1,35 @@
 <template>
-  <div style="height: 200px;">轮播
-    <img alt="err" src="@/assets/carousel.png" style="width: 100%; height: 100%">
-  </div>
+  <el-carousel id="carousel-card-body" :interval="4000" height="200px" type="card">
+    <el-carousel-item v-for="item in contents" :key="item">
+      <img :src=item alt="err">
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
 <script>
 export default {
-  name: "CarouselCard"
+  name: "CarouselCard",
+  data() {
+    return {
+      contents: [
+        require("@/assets/carousel.png"),
+        require("@/assets/taskPage.png"),
+        require("@/assets/myTest.png"),
+        require("@/assets/testPage.png"),
+      ],
+    };
+  }
 };
 </script>
 
 <style scoped>
+#carousel-card-body {
+  margin: 10px 0 0 20px;
+}
 
-</style>
+#carousel-card-body img {
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+}
+</style>

src/views/PortalPage/components/InfoCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 200px;">登录状态卡
+  <div style="height: 200px;">
     <img alt="err" src="@/assets/infoCard.png" style="width: 100%; height: 100%">
   </div>
 </template>