f

components/i/Aside.vue

@@ -24,12 +24,7 @@
     </div>
     <UDivider />
     <div class="p-4 bg-gray-100 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col items-center justify-center">
-        <UButton
-            :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-            color="white"
-            aria-label="Theme"
-            @click="isDark = !isDark"
-        />
+        <IUserInfo />
     </div>
     <UModal v-model="isOpenCreate">
         <ICreate @search="handleCloseCreate" />
@@ -37,15 +32,6 @@
 </template>
 <script setup lang="ts">
 const { metaSymbol } = useShortcuts()
-const colorMode = useColorMode()
-const isDark = computed({
-    get () {
-        return colorMode.value === 'dark'
-    },
-    set () {
-        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-    }
-})
 const isOpenCreate = ref(false)
 const handleShowCreate = () => {
     isOpenCreate.value = true

components/i/UserInfo.vue

+<template>
+    <div class="flex w-full justify-between items-center">
+        <div class="flex flex-grow">
+            <UDropdown class="flex" :items="items">
+                <UButton class="flex items-center gap-2" color="gray" variant="ghost">
+                    <UAvatar src="https://csdn-665-inscode.s3.cn-north-1.jdcloud-oss.com/inscode/202303/622eda98dfef6c4fdb84ccca/1680089871598-75919715-hvlk99ddLLhyNTXtl4TaQAgeFBFz4ZGD/avatar" />
+                    <div>Aresn</div>
+                    <UIcon name="i-heroicons-chevron-down-20-solid" />
+                </UButton>
+            </UDropdown>
+        </div>
+        <UButton
+            :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+            color="white"
+            aria-label="Theme"
+            @click="isDark = !isDark"
+        />
+    </div>
+</template>
+<script setup>
+const colorMode = useColorMode()
+const isDark = computed({
+    get () {
+        return colorMode.value === 'dark'
+    },
+    set () {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+
+const items = [
+    [
+        {
+            label: '账号信息',
+            icon: 'i-heroicons-user'
+        },
+        {
+            label: '用户反馈',
+            icon: 'i-heroicons-chat-bubble-oval-left-ellipsis'
+        }
+    ],
+    [
+        {
+            label: '退出登录',
+            icon: 'i-heroicons-power'
+        }
+    ]
+]
+</script>