feat: 独立登录页面

layouts/default.vue

@@ -37,28 +37,40 @@ const links = [
     label: 'AI 工具导航',
     icon: 'tabler:planet',
     to: '/aigc/navigation',
-  }
+  },
 ]
 
 const items = [
-  [{
-    label: 'support@fenshenzhike.com',
-    slot: 'account',
-    disabled: true,
-  }], [{
-    label: '账号管理',
-    icon: 'i-tabler-user-circle',
-    to: '/profile'
-  }], [{
-    label: '注销登录',
-    icon: 'i-tabler-logout',
-    click: () => loginState.logout().then(() => toast.add({
-      title: '退出登录',
-      description: `您已成功退出登录账号`,
-      color: 'indigo',
-      icon: 'i-tabler-logout-2',
-    })),
-  }],
+  [
+    {
+      label: 'support@fenshenzhike.com',
+      slot: 'account',
+      disabled: true,
+    },
+  ],
+  [
+    {
+      label: '账号管理',
+      icon: 'i-tabler-user-circle',
+      to: '/profile',
+    },
+  ],
+  [
+    {
+      label: '注销登录',
+      icon: 'i-tabler-logout',
+      click: () =>
+        loginState.logout().then(() => {
+          toast.add({
+            title: '退出登录',
+            description: `您已成功退出登录账号`,
+            color: 'indigo',
+            icon: 'i-tabler-logout-2',
+          })
+          router.push({ path: '/user/authenticate' })
+        }),
+    },
+  ],
 ]
 
 const open_login_modal = () => {
@@ -70,23 +82,38 @@ const open_login_modal = () => {
   <div class="relative grid w-full min-h-screen">
     <header>
       <h1 class="inline-flex flex-col">
-        <span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">AIGC 微课视频研创平台</span>
+        <span class="text-lg text-neutral-600 dark:text-neutral-300 font-bold">
+          AIGC 微课视频研创平台
+        </span>
         <!-- <span class="text-xs text-neutral-600 dark:text-neutral-300">眩生花科技</span> -->
       </h1>
       <div class="hidden md:block">
-        <UHorizontalNavigation :links="links" class="select-none"/>
+        <UHorizontalNavigation
+          :links="links"
+          class="select-none"
+        />
       </div>
       <div class="flex flex-row items-center gap-4">
         <ClientOnly>
           <UButton
-            :icon="isDark ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition' : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'"
+            :icon="
+              isDark
+                ? 'i-line-md-sunny-outline-to-moon-alt-loop-transition'
+                : 'i-line-md-moon-alt-to-sunny-outline-loop-transition'
+            "
             color="gray"
             variant="ghost"
             aria-label="Theme"
             @click="isDark = !isDark"
           />
-          <UButton v-if="!loginState.is_logged_in" 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"
+          />
           <UDropdown
             v-if="loginState.is_logged_in"
             :items="items"
@@ -105,18 +132,28 @@ const open_login_modal = () => {
               <div class="text-left">
                 <p class="flex items-center gap-1">
                   已登录为
-                  <UBadge v-if="loginState.user.auth_code === 2" color="amber" size="xs" variant="subtle">
+                  <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">
+                <p
+                  class="truncate whitespace-nowrap max-w-40 font-medium text-gray-900 dark:text-white"
+                >
                   {{ loginState.user?.username }}
                 </p>
               </div>
             </template>
             <template #item="{ item }">
               <span class="truncate">{{ item.label }}</span>
-              <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"/>
+              <UIcon
+                :name="item.icon"
+                class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto"
+              />
             </template>
           </UDropdown>
         </ClientOnly>
@@ -124,11 +161,13 @@ const open_login_modal = () => {
     </header>
 
     <main>
-      <slot/>
+      <slot />
     </main>
 
     <footer>
-      <p class="text-sm text-neutral-500">© {{ dayjs().year() }} 重庆眩生花科技有限公司</p>
+      <p class="text-sm text-neutral-500">
+        © {{ dayjs().year() }} 重庆眩生花科技有限公司
+      </p>
     </footer>
   </div>
 </template>
@@ -136,25 +175,25 @@ const open_login_modal = () => {
 <style>
 body {
   @apply bg-neutral-50 dark:bg-neutral-950 bg-fixed;
-  @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')];
+  /* @apply bg-[url('~/assets/background-pattern.svg')] dark:bg-[url('~/assets/background-pattern-dark.svg')]; */
 }
 
 ::-webkit-scrollbar {
   --bar-width: 5px;
   width: var(--bar-width);
-  height: var(--bar-width)
+  height: var(--bar-width);
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent
+  background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  --bar-color: rgba(0, 0, 0, .1);
+  --bar-color: rgba(0, 0, 0, 0.1);
   background-color: var(--bar-color);
   border-radius: 20px;
   background-clip: content-box;
-  border: 1px solid transparent
+  border: 1px solid transparent;
 }
 
 /*
@@ -191,4 +230,4 @@ footer {
   @apply dark:bg-neutral-900 dark:border-neutral-800;
   @apply flex flex-row items-center justify-between px-4;
 }
-</style>
+</style>