TEMP: infoCard

ATTENTION: state system needs redesign, NoticeItem.vue needs replace to src/Components

src/router/index.js

@@ -7,7 +7,7 @@ import { ElMessage } from "element-plus";
 const routes = [
   {
     path: "/",
-    redirect: "/auth",
+    redirect: "/portal",
   },
   {
     path: "/portal",
@@ -64,7 +64,7 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if (to.name !== "Auth" && !store.state.user.token) {
+  if ((to.name !== "Auth" || to.name !== "Portal") && !store.state.user.token) {
     ElMessage({
       showClose: true,
       message: "请先登录",

src/store/modules/user.js

@@ -28,6 +28,17 @@ const user = {
       state.signature = undefined;
       state.createdTime = undefined;
       state.valid = undefined;
+      localStorage.removeItem("token");
+      localStorage.removeItem("name");
+      localStorage.removeItem("id");
+      localStorage.removeItem("phone");
+      localStorage.removeItem("username");
+      localStorage.removeItem("email");
+      localStorage.removeItem("photo");
+      localStorage.removeItem("role");
+      localStorage.removeItem("signature");
+      localStorage.removeItem("createdTime");
+      localStorage.removeItem("valid");
     },
     set_user: function (state, data) {
       state.token = data.token;

src/views/PortalPage/PortalPage.vue

@@ -67,7 +67,7 @@ export default {
 #portal-body {
   display: grid;
   grid-template-columns: 2fr 1fr;
-  grid-gap: 20px 40px;
+  grid-gap: 10px 20px;
   background: #409eff;
 }
 </style>

src/views/PortalPage/components/InfoCard.vue

@@ -1,15 +1,133 @@
 <template>
-  <div style="height: 200px;">
-    <img alt="err" src="@/assets/infoCard.png" style="width: 100%; height: 100%">
+  <div id="info-card-body">
+    <div>SEECODER</div>
+    <div v-if="isLogin" id="info-card-circle">
+      <span>{{ name.substring(0, 1) }}</span>
+    </div>
+    <div v-else>
+      <svg height="50" viewBox="0 0 1025 1024" width="50" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M511.999723 331.913794m-117.748854 0a117.748854 117.748854 0 1 0 235.497708 0 117.748854 117.748854 0 1 0-235.497708 0Z"
+          fill="#82BAD8"></path>
+        <path
+          d="M511.999723 0.000554A511.999723 511.999723 0 1 0 1025.10767 512.000277 512.276779 512.276779 0 0 0 511.999723 0.000554zM792.380524 779.636496a24.935051 24.935051 0 0 1-24.935052-24.935052 255.445749 255.445749 0 0 0-510.614442 0 24.935051 24.935051 0 0 1-49.870103 0 304.76174 304.76174 0 0 1 205.29859-288.138372 167.896013 167.896013 0 1 1 199.480412 0 304.76174 304.76174 0 0 1 205.575646 288.138372 24.935051 24.935051 0 0 1-24.935051 24.935052z"
+          fill="#82BAD8"></path>
+      </svg>
+    </div>
+    <div id="info-card-name-id" v-if="isLogin">
+      <div>{{ name }}</div>
+      <div>{{ email }}</div>
+    </div>
+    <div id="info-card-button-in" v-if="isLogin" @click="logout">
+      <span>登出</span>
+    </div>
+    <div v-else id="info-card-button-not" @click="toAuth">
+      <span>登录/注册</span>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "InfoCard"
+  name: "InfoCard",
+  data() {
+    return {
+      name: "",
+      email: "",
+    };
+  },
+
+  computed: {
+    isLogin: function () {
+      return this.$store.state.user.token !== undefined;
+    }
+  },
+
+  methods: {
+    toAuth() {
+      this.$router.push("/auth");
+    },
+    logout() {
+      this.$store.commit("reset_user");
+      this.$store.commit("save_user");
+      this.$router.replace("/");
+    },
+  },
+
+  beforeMount() {
+    if (this.isLogin) {
+      this.name = this.$store.state.user.name;
+      this.email = this.$store.state.user.email;
+    }
+  }
 };
 </script>
 
 <style scoped>
+#info-card-body {
+  height: 100%;
+  width: 200px;
+  margin: 10px auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 8px;
+  background: white;
+}
+
+#info-card-circle {
+  height: 50px;
+  width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background: #E6A23C;
+}
+
+#info-card-circle span {
+  color: white;
+  font-weight: bold;
+}
+
+#info-card-name-id {
+  text-align: center;
+}
+
+#info-card-button-in {
+  width: 80%;
+  height: 30px;
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #FFF1DE;
+}
+
+#info-card-button-in:hover {
+  cursor: pointer;
+}
+
+#info-card-button-in span {
+  color: #E6A23C;
+}
+
+#info-card-button-not {
+  width: 80%;
+  height: 30px;
+  border-radius: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #E6F1FC;
+}
+
+#info-card-button-not:hover {
+  cursor: pointer;
+}
 
+#info-card-button-not span {
+  color: #1989FA;
+}
 </style>