From c2052512b3ecbba1fb74916d815fd4ab2a2a4f4f Mon Sep 17 00:00:00 2001
From: RockChinQ <1010553892@qq.com>
Date: Sat, 6 Jul 2024 17:13:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=B0=81=E7=A6=81?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/index.vue | 54 ++++++++++++++++++++++++++++++++++++
 frontend/src/pages/post.vue  |  4 ++-
 frontend/src/store/index.js  | 11 ++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 4ede0a5..b73774d 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,4 +1,19 @@
 <template>
+  <div id="banning-toast" v-if="$store.state.account.access.is_banned">
+      <div id="banning-card">
+        <div style="display: flex;flex-direction: row;margin-block: 8px;">
+          <div style="font-size: 80px;">🚫</div>
+          <div id="banning-details">
+              <h3>账号已被封禁</h3>
+              <p><strong>UIN：</strong>{{ $store.state.account.uin }}</p>
+              <p style="word-wrap: break-word;"><strong>封禁原因：</strong>{{ $store.state.account.access.comment }}</p>
+              <p><strong>结束时间：</strong>{{ $store.state.account.access.end_time }}</p>
+          </div>
+        </div>
+        <div>
+          <v-btn color="primary" text @click="logout" style="margin-top: 0px;width: 100%;">退出登录</v-btn></div>
+      </div>
+  </div>
 
   <!-- 左侧导航栏 -->
   <div id="container-wrap" style="height: calc(100vh - 64px)">
@@ -63,6 +78,7 @@
 
 <script>
 import BottomNavBar from '@/components/BottomNavBar.vue'
+import Cookies from "js-cookie";
 
 export default {
   components: {
@@ -88,6 +104,12 @@ export default {
   },
 
   methods: {
+
+    logout() {
+            Cookies.remove("access-token");
+            // reload
+            window.location.reload()
+        },
   }
 }
 </script>
@@ -104,6 +126,38 @@ button {
   padding: 0;
 }
 
+#banning-toast {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(238, 238, 238);
+    z-index: 10001;
+}
+
+#banning-card {
+    background-color: #fff;
+    padding: 16px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(71, 71, 71, 0.174);
+    text-align: center;
+    max-width: 25rem;
+    min-width: 20rem;
+    display: flex;
+    flex-direction: column;
+}
+
+#banning-details {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
 
 /* 适配pc端 */
 @media (min-width: 600px) {
diff --git a/frontend/src/pages/post.vue b/frontend/src/pages/post.vue
index 99994dd..4113144 100644
--- a/frontend/src/pages/post.vue
+++ b/frontend/src/pages/post.vue
@@ -15,7 +15,8 @@
     <div style="display: flex; padding: 16px">
         <v-dialog max-width="500">
             <template v-slot:activator="{ props: activatorProps }">
-                <img v-bind="activatorProps" :src="$store.state.account.avatarUrl" width="50" height="50" style="border-radius: 50%;">
+                <img v-bind="activatorProps" :src="$store.state.account.avatarUrl" width="50" height="50"
+                    style="border-radius: 50%;">
             </template>
 
             <template v-slot:default="{ isActive }">
@@ -371,6 +372,7 @@ button {
     color: #ffffff;
 }
 
+
 /* 适配pc端 */
 @media (min-width: 600px) {
 
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index b66359a..fb3e7f1 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -28,6 +28,9 @@ export default createStore({
             "uin": 0,
             "avatarUrl": '',
             "userGroup": 'user',
+            "access": {
+                "is_banned": false
+            }
         }
     },
     mutations: {
@@ -66,6 +69,14 @@ export default createStore({
                         this.state.account.uin = res.data.data.uin
                         this.state.account.avatarUrl = "http://q1.qlogo.cn/g?b=qq&nk=" + res.data.data.uin + "&s=100"
                         this.state.account.userGroup = res.data.data.user_group
+                        this.state.account.access = res.data.data.access
+
+                        console.log(this.state.account.access)
+                        // 如果 access.end_time 存在
+                        if (this.state.account.access.end_time) {
+                            let date = new Date(this.state.account.access.end_time)
+                            this.state.account.access.end_time = date.toLocaleString()
+                        }
                     }
                 })
                 .catch(err => {