wip(Layout): Layout developing

src/components/UserInfo/index.ts

@@ -0,0 +1,3 @@
+import UserInfo from './src/UserInfo.vue'
+
+export { UserInfo }

src/components/UserInfo/src/UserInfo.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useCache } from '@/hooks/web/useCache'
+import { resetRouter } from '@/router'
+import { useRouter } from 'vue-router'
+
+const { t } = useI18n()
+
+const { wsCache } = useCache()
+
+const { replace } = useRouter()
+
+function loginOut() {
+  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    type: 'warning'
+  })
+    .then(() => {
+      wsCache.clear()
+      resetRouter() // 重置静态路由表
+      replace('/login')
+    })
+    .catch(() => {})
+}
+</script>
+
+<template>
+  <ElDropdown trigger="click">
+    <div class="flex items-center">
+      <img src="@/assets/imgs/avatar.png" alt="" class="w-[calc(var(--tags-view-height)-10px)]" />
+      <span class="<lg:hidden text-14px pl-[5px] text-dark-50">Archer</span>
+    </div>
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem>
+          <div>{{ t('common.document') }}</div>
+        </ElDropdownItem>
+        <ElDropdownItem divided>
+          <div @click="loginOut">{{ t('common.loginOut') }}</div>
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>