wip

layouts/default.vue

@@ -30,8 +30,22 @@ const links = [
   }
 ]
 
+const items = [
+  [{
+    label: 'support@fenshenzhike.com',
+    slot: 'account',
+    disabled: true
+  }], [{
+    label: '账号资料',
+    icon: 'i-tabler-user-circle'
+  }], [{
+    label: '注销登录',
+    icon: 'i-tabler-logout'
+  }]
+]
+
 const open_login_modal = () => {
-  modal.open(ModalAuthentication, {})
+  modal.open(ModalAuthentication)
 }
 </script>
 
@@ -56,7 +70,27 @@ const open_login_modal = () => {
           />
           <UButton label="登录或注册" size="xs" class="font-bold" color="indigo" @click="open_login_modal"/>
         </ClientOnly>
-        <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
+        <UDropdown :items="items" :popper="{ placement: 'bottom-start' }"
+                   :ui="{ item: { disabled: 'cursor-text select-text' } }">
+          <UAvatar :src="void 0" icon="i-tabler-user" size="md"/>
+
+          <template #account="{ item }">
+            <div class="text-left">
+              <p class="flex items-center gap-1">
+                已登录为
+                <UBadge 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 }}
+              </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"/>
+          </template>
+        </UDropdown>
       </div>
     </header>
 
@@ -79,9 +113,10 @@ body {
 
 <style scoped>
 header {
-  @apply fixed inset-x-0 h-16 bg-white border-b;
+  @apply fixed inset-x-0 h-16 bg-white border-b z-30;
   @apply dark:bg-neutral-900 dark:border-neutral-800;
   @apply flex flex-row items-center justify-between px-4;
+  @apply bg-opacity-50 dark:bg-opacity-50 backdrop-blur-3xl backdrop-saturate-150;
 }
 
 main {