feat(Header): 顶部添加跳转管理界面和登录按钮

baiwumm · Jun 14, 2024 · 2ea51ca · 2ea51ca
1 parent 1295c6a
commit 2ea51ca
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 11 deletions.
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
@@ -2,19 +2,26 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-04-10 16:25:21
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2024-06-07 10:38:05
+ * @LastEditTime: 2024-06-11 13:45:17
  * @Description: 顶部布局
 -->
 <template>
   <el-header
     class="flex gap-4 justify-between items-center sticky top-0 h-14 shadow-md dark:shadow-white-500/50 backdrop-blur transition-all w-full dark:shadow-[0_4px_6px_-1px_rgb(255,255,255,0.1)]"
   >
     <!-- logo -->
-    <a href="/" class="flex gap-4 items-center">
-      <!-- logo -->
-      <NuxtImg src="/logo.svg" alt="logo" class="w-8 h-8" />
-      <ColorModeSvg light-fill="#000" dark-fill="#fff" name="dream-site" class-name="h-6" />
-    </a>
+    <NuxtLink to="/">
+      <div class="flex gap-4 items-center">
+        <!-- logo -->
+        <NuxtImg src="/logo.svg" alt="logo" class="w-8 h-8" />
+        <ColorModeSvg
+          light-fill="#000"
+          dark-fill="#fff"
+          name="dream-site"
+          class-name="h-6 max-sm:hidden"
+        />
+      </div>
+    </NuxtLink>
     <!-- 右侧 社交图标 -->
     <div class="flex">
       <!-- 夜间模式 -->
@@ -27,6 +34,8 @@
       />
       <!-- 登录用户头像 -->
       <user-avatar />
+      <!-- 跳转管理界面 -->
+      <JumpAdmin />
       <!-- 注销用户按钮 -->
       <Logout />
     </div>

diff --git a/src/components/JumpAdmin/index.vue b/src/components/JumpAdmin/index.vue
@@ -0,0 +1,23 @@
+<!--
+ * @Author: 白雾茫茫丶<baiwumm.com>
+ * @Date: 2024-06-11 09:28:20
+ * @LastEditors: 白雾茫茫丶<baiwumm.com>
+ * @LastEditTime: 2024-06-11 15:35:47
+ * @Description: 跳转登录界面
+-->
+<template>
+  <client-only>
+    <template v-if="user">
+      <el-tooltip content="进入管理后台" placement="bottom">
+        <NuxtLink to="/admin">
+          <el-button circle text>
+            <Icon name="ri:apps-fill" class="h-5 w-5" />
+          </el-button>
+        </NuxtLink>
+      </el-tooltip>
+    </template>
+  </client-only>
+</template>
+<script setup lang="ts">
+const user = useSupabaseUser()
+</script>
diff --git a/src/components/UserAvatar/index.vue b/src/components/UserAvatar/index.vue
@@ -2,14 +2,25 @@
  * @Author: 白雾茫茫丶<baiwumm.com>
  * @Date: 2024-06-06 17:53:32
  * @LastEditors: 白雾茫茫丶<baiwumm.com>
- * @LastEditTime: 2024-06-07 09:10:05
+ * @LastEditTime: 2024-06-11 09:22:58
  * @Description: 当前登录用户头像
 -->
 <template>
   <client-only>
-    <el-button v-if="user" circle text>
-      <el-avatar :src="user.user_metadata.avatar_url" :size="20" />
-    </el-button>
+    <template v-if="user">
+      <el-button circle text>
+        <el-avatar :src="user.user_metadata.avatar_url" :size="20" />
+      </el-button>
+    </template>
+    <template v-else>
+      <el-tooltip content="登录">
+        <NuxtLink to="/login">
+          <el-button circle text>
+            <Icon name="ri:user-3-line" class="h-5 w-5" />
+          </el-button>
+        </NuxtLink>
+      </el-tooltip>
+    </template>
   </client-only>
 </template>
 <script setup lang="ts">

diff --git a/src/pages/confirm/index.vue b/src/pages/confirm/index.vue
@@ -14,6 +14,6 @@ watch(
 
 <template>
   <div>
-    <p class="u-text-black">Redirecting...</p>
+    <p class="u-text-black">正在登录...</p>
   </div>
 </template>