feat: login

layouts/default.vue

@@ -4,6 +4,8 @@ import ModalAuthentication from "~/components/ModalAuthentication.vue";
 const colorMode = useColorMode()
 const dayjs = useDayjs()
 const modal = useModal()
+const toast = useToast()
+const loginState = useLoginState()
 
 const isDark = computed({
   get() {
@@ -40,7 +42,13 @@ const items = [
     icon: 'i-tabler-user-circle'
   }], [{
     label: '注销登录',
-    icon: 'i-tabler-logout'
+    icon: 'i-tabler-logout',
+    click: () => loginState.logout().then(() => toast.add({
+      title: '退出登录',
+      description: `您已成功退出登录账号`,
+      color: 'indigo',
+      icon: 'i-tabler-logout-2'
+    }))
   }]
 ]
 
@@ -68,9 +76,10 @@ const open_login_modal = () => {
               aria-label="Theme"
               @click="isDark = !isDark"
           />
-          <UButton label="登录或注册" size="xs" class="font-bold" color="indigo" @click="open_login_modal"/>
+          <UButton v-if="!loginState.is_logged_in" label="登录或注册" size="xs" class="font-bold" color="indigo"
+                   @click="open_login_modal"/>
         </ClientOnly>
-        <UDropdown :items="items" :popper="{ placement: 'bottom-start' }"
+        <UDropdown v-if="loginState.is_logged_in" :items="items" :popper="{ placement: 'bottom-start' }"
                    :ui="{ item: { disabled: 'cursor-text select-text' } }">
           <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
 
@@ -78,10 +87,12 @@ const open_login_modal = () => {
             <div class="text-left">
               <p class="flex items-center gap-1">
                 已登录为
-                <UBadge color="amber" size="xs" variant="subtle">OP</UBadge>
+                <UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
+                  OP
+                </UBadge>
               </p>
               <p class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white">
-                {{ item.label }}
+                {{ loginState.user?.username }}
               </p>
             </div>
           </template>