feat: log out

src/components/alert/Alert.vue

@@ -78,6 +78,7 @@ const handleConfirm = () => {
   height: 30px;
   color: var(--kungalgame-font-color-3);
   cursor: pointer;
+  border-radius: 2px;
   &:nth-child(1) {
     background-color: var(--kungalgame-trans-blue-1);
     border: 1px solid var(--kungalgame-blue-4);

src/components/top-bar/KUNGalgameUserInfo.vue

@@ -1,7 +1,19 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-const container = ref<HTMLElement>()
+import { useRouter } from 'vue-router'
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+// 全局消息组件（底部）
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+// 重置 store
+import { kungalgameStoreReset } from '@/store'
 
+const { uid, name, moemoepoint } = storeToRefs(useKUNGalgameUserStore())
+
+const container = ref<HTMLElement>()
+const router = useRouter()
 const emit = defineEmits({
   close,
 })
@@ -15,8 +27,19 @@ const handlePanelBlur = async () => {
   emit('close')
 }
 
-// 退出登录
-const logOut = () => {}
+// 退出登录，简单起见这里不和后端通信使 token 从 redis 移除了
+const logOut = async () => {
+  // 获取用户点击的结果
+  const res = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.edit.logout',
+    true
+  )
+  if (res) {
+    kungalgameStoreReset()
+    router.push('/login')
+    message('Logout successfully!', '登出成功', 'success')
+  }
+}
 
 onMounted(() => {
   // 自动获取焦点
@@ -30,12 +53,18 @@ onMounted(() => {
     <span class="triangle2"></span>
     <div class="kungalgamer">
       <div class="info">
-        <p>KUN</p>
-        <p>MP: <span>1007</span></p>
+        <p>{{ name }}</p>
+        <p>
+          MP: <span>{{ moemoepoint }}</span>
+        </p>
       </div>
       <div class="func">
-        <span><RouterLink to="/kungalgamer">个人主页</RouterLink></span>
-        <span>退出登录</span>
+        <span>
+          <RouterLink to="/kungalgamer">
+            {{ $tm('header.user.profile') }}
+          </RouterLink>
+        </span>
+        <span @click="logOut">{{ $tm('header.user.logout') }}</span>
       </div>
     </div>
   </div>
@@ -50,6 +79,7 @@ onMounted(() => {
 }
 .triangle1 {
   position: absolute;
+  top: 1px;
   width: 0;
   height: 0;
   border-left: 10px solid transparent;
@@ -63,7 +93,7 @@ onMounted(() => {
   height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
-  border-bottom: 17px solid var(--kungalgame-blue-4);
+  border-bottom: 17px solid var(--kungalgame-blue-1);
 }
 .kungalgamer {
   padding: 10px;
@@ -71,6 +101,7 @@ onMounted(() => {
   transform: translateX(-43%);
   width: 130px;
   background-color: var(--kungalgame-white);
+  border: 1px solid var(--kungalgame-blue-1);
   border-radius: 5px;
   position: absolute;
   display: flex;
@@ -108,7 +139,7 @@ onMounted(() => {
       color: var(--kungalgame-blue-5);
     }
     &:hover {
-      background-color: var(--kungalgame-blue-1);
+      background-color: var(--kungalgame-trans-blue-1);
     }
   }
 }

src/language/en.ts

@@ -23,6 +23,10 @@ export default {
       restore: 'Restore blank background',
       recover: 'Recover all settings to default',
     },
+    user: {
+      profile: 'Profile Page',
+      logout: 'Log out',
+    },
   },
   back: {
     back: 'Back',
@@ -224,6 +228,7 @@ export default {
       closePanel: 'Confirm closing the panel? Your changes will not be saved.',
       draft: 'The draft has been saved successfully!',
       leave: 'Confirm leaving the page? Your changes will not be saved.',
+      logout: 'Are you sure you want to log out?',
     },
     login: {
       invalidUsername:

src/language/zh.ts

@@ -23,6 +23,10 @@ export default {
       restore: '恢复空白背景',
       recover: '恢复所有设置为默认',
     },
+    user: {
+      profile: '个人主页',
+      logout: '退出登录',
+    },
   },
   back: {
     back: '返回',
@@ -221,6 +225,7 @@ export default {
       closePanel: '确认关闭面板吗？您的更改将不会被保存',
       draft: '草稿已经保存成功！',
       leave: '确认离开界面吗？您的更改将不会保存',
+      logout: '您确定退出登录吗？',
     },
     login: {
       invalidUsername:

src/store/index.ts

@@ -33,7 +33,7 @@ export function setupPinia(app: App<Element>) {
 }
 
 // 重置所有 store，用于登出
-export function storeReset() {
+export function kungalgameStoreReset() {
   const editStore = useKUNGalgameEditStore()
   const homeStore = useKUNGalgameHomeStore()
   const userStore = useKUNGalgameUserStore()

src/store/modules/kungalgamer.ts

@@ -25,6 +25,7 @@ export const useKUNGalgameUserStore = defineStore({
     uid: 0,
     name: '',
     avatar: '',
+    moemoepoint: 0,
     moemoeAccessToken: '',
   }),
   getters: {},

src/store/types/kungalgamer.d.ts

@@ -3,5 +3,6 @@ export interface KUNGalgamerStore {
   uid: number
   name: string
   avatar: string
+  moemoepoint: number
   moemoeAccessToken: string
 }