feat: 首页架构

src/components/Doc/index.ts

@@ -0,0 +1,3 @@
+import Doc from './index.vue';
+
+export { Doc };

src/components/Doc/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <n-button quaternary @click="handleClick" title="说明文档">
+    <n-icon size="20" :depth="1">
+      <DocumentTextIcon />
+    </n-icon>
+  </n-button>
+</template>
+
+<script lang="ts" setup>
+import { openDoc } from '@/utils/page'
+import { DocumentText as DocumentTextIcon } from '@vicons/ionicons5'
+
+const handleClick = () => {
+  openDoc()
+}
+</script>

src/components/ThemeSelect/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-button quaternary @click="changeTheme">
+  <n-button quaternary @click="changeTheme" title="主题">
     <n-icon size="20" :depth="1">
       <MoonIcon v-if="designStore.darkTheme" />
       <SunnyIcon v-else />

src/components/UserInfo/index.ts

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

src/components/UserInfo/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <n-dropdown
+    trigger="hover"
+    @select="handleSelect"
+    :show-arrow="true"
+    :options="options"
+  >
+    <n-button quaternary circle>
+      <n-icon size="20" :depth="1">
+        <PersonOutlineIcon v-show="fallback" />
+      </n-icon>
+      <n-avatar
+        v-show="!fallback"
+        round
+        size="small"
+        :src="imageUrl"
+        @error="errorHandle"
+      />
+    </n-button>
+  </n-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue'
+import { NAvatar, NText } from 'naive-ui'
+import { renderIcon } from '@/utils/index'
+import { openDoc, logout } from '@/utils/page'
+import {
+  Person as PersonOutlineIcon,
+  LogOutOutline as LogOutOutlineIcon,
+  DocumentText as DocumentTextIcon
+} from '@vicons/ionicons5'
+
+const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
+
+// 是否失败
+const fallback = ref(false)
+
+// 用户图标渲染
+const renderUserInfo = () => {
+  return h(
+    'div',
+    {
+      style: 'display: flex; align-items: center; padding: 8px 12px;'
+    },
+    [
+      h(NAvatar, {
+        round: true,
+        style: 'margin-right: 12px;',
+        src: imageUrl
+      }),
+      h('div', null, [
+        h('div', null, [
+          h(NText, { depth: 2 }, { default: () => '奔跑的面条' })
+        ])
+      ])
+    ]
+  )
+}
+
+const options = [
+  {
+    label: '我的信息',
+    key: 'info',
+    type: 'render',
+    render: renderUserInfo
+  },
+  {
+    type: 'divider',
+    key: 'd1'
+  },
+  {
+    label: '说明文档',
+    key: 'doc',
+    icon: renderIcon(DocumentTextIcon)
+  },
+  {
+    type: 'divider',
+    key: 'd2'
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: renderIcon(LogOutOutlineIcon)
+  }
+]
+
+// 图片渲染错误
+const errorHandle = (e: Event) => {
+  fallback.value = true
+}
+
+const handleSelect = (key: string) => {
+  switch (key) {
+    case 'doc':
+      openDoc()
+      break
+    case 'logout':
+      logout()
+      break
+  }
+}
+</script>