feat(ui): 新增登录

gpt-vue/projects/vue-admin/src/components/CustomLayout.vue

@@ -1,15 +1,21 @@
 <script lang="ts" setup>
 import { IconDown, IconExport } from "@arco-design/web-vue/es/icon";
+import { useAuthStore } from "@/stores/auth";
+import Logo from "/images/logo.png";
 
 import SystemMenu from "./SystemMenu.vue";
 import PageWrapper from "./PageWrapper.vue";
 
 const logoWidth = "200px";
+const authStore = useAuthStore();
 </script>
 <template>
   <ALayout class="custom-layout">
     <ALayoutHeader class="custom-layout-header">
-      <div class="logo"></div>
+      <div class="logo">
+        <img :src="Logo" alt="logo" />
+        <span>ChatPlus 控制台</span>
+      </div>
       <div class="action">
         <ADropdown>
           <ASpace align="center" :size="4">
@@ -20,7 +26,11 @@ const logoWidth = "200px";
             <ADoption value="changeOwnPwd">更改密码</ADoption>
           </template>
           <template #footer>
-            <APopconfirm content="确认退出？" position="br">
+            <APopconfirm
+              content="确认退出？"
+              position="br"
+              @ok="authStore.logout"
+            >
               <ASpace align="center" class="logout-area">
                 <IconExport size="16" />
                 <span>退出</span>
@@ -52,10 +62,15 @@ const logoWidth = "200px";
     align-items: center;
     border-bottom: 1px solid var(--color-neutral-2);
     .logo {
-      display: block;
+      display: flex;
       width: v-bind("logoWidth");
-      text-align: center;
-      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      img {
+        width: 30px;
+        height: 30px;
+      }
     }
     .action {
       display: flex;