用户信息和登出功能

src/api/UserApi.ts

@@ -10,7 +10,7 @@ interface RegisterInfo {
   password: string;
 }
 
-interface User {
+export interface User {
   id: string;
   name: string;
   mobile: string;
@@ -75,3 +75,12 @@ export async function pageQuery(
 export function distributeRole(query: { userId: number; roleIds: number[] }) {
   return api.post('/api/role/distribute', query);
 }
+
+/**
+ * 获取当前用户信息
+ * @returns
+ */
+export async function getCurrentUserInfo(): Promise<User> {
+  const response = await api.get(`${UserUriBase}/current`);
+  return response.data;
+}

src/layouts/MainLayout.vue

@@ -25,6 +25,21 @@
             v-if="$q.screen.gt.sm"
           >
           </q-btn>
+          <q-btn-dropdown icon="person">
+            <q-list>
+              <q-item clickable v-close-popup @click="showUserInfo">
+                <q-item-section>
+                  <q-item-label>用户信息</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup @click="logOut">
+                <q-item-section>
+                  <q-item-label>登出</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
         </div>
       </q-toolbar>
     </q-header>
@@ -40,12 +55,74 @@
         <router-view :sizeHeight="scrollHeight" :sizeWidth="scrollWidth" />
       </q-scroll-area>
     </q-page-container>
+    <q-dialog v-model="showInfo">
+      <q-card style="width: 400px; max-width: 80vw">
+        <q-card-section>
+          <div class="text-h6">用户信息</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-list>
+            <q-item>
+              <q-item-section>
+                <q-item-label>ID：</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{ userInfo?.id }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label>用户名：</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{ userInfo?.name }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label>电话：</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{ userInfo?.mobile }}</q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label>注册时间：</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-item-label caption>{{
+                  userInfo?.registerTime
+                }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            label="确定"
+            color="primary"
+            v-close-popup
+            @click="closeShowInfo"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </q-layout>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import SysMenu from 'src/components/SysMenu.vue';
+import { useRouter } from 'vue-router';
+import { clearJwtToken } from 'src/configs/TokenManage';
+import { getCurrentUserInfo, type User } from 'src/api/UserApi';
+import { Dialog } from 'quasar';
+
+const router = useRouter();
 
 const leftDrawerOpen = ref(false);
 
@@ -71,4 +148,36 @@ function onLeftResize(size: { width: number; height: number }) {
   leftDrawerSize.width = size.width;
   leftDrawerSize.height = size.height;
 }
+
+const showInfo = ref(false);
+const userInfo = ref<User | null>();
+function showUserInfo() {
+  getUserInfo();
+  showInfo.value = true;
+}
+function closeShowInfo() {
+  showInfo.value = false;
+}
+function getUserInfo() {
+  userInfo.value = null;
+  getCurrentUserInfo()
+    .then((res) => {
+      userInfo.value = res;
+    })
+    .catch((err) => {
+      console.log(err, 'err');
+    });
+}
+
+function logOut() {
+  Dialog.create({
+    title: '登出确认',
+    message: '确认是否登出？',
+    cancel: true,
+    persistent: true,
+  }).onOk(() => {
+    clearJwtToken();
+    router.push({ name: 'login' });
+  });
+}
 </script>