refactor icons

src/shared/components/Header.vue

@@ -9,8 +9,7 @@ import {
   screenSwitchLabel,
   switchScreenMode,
 } from "~/shared/composables/switchScreen"
-import Sunny from "../icons/Sunny.vue"
-import Moon from "../icons/Moon.vue"
+import { Icon } from "@iconify/vue"
 
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
@@ -29,6 +28,31 @@ async function handleLogout() {
   router.replace("/")
 }
 
+function renderIcon(icon: string) {
+  return () => h(Icon, { icon })
+}
+
+const avatars = [
+  "openmoji:glowing-star",
+  "openmoji:heart-with-ribbon",
+  "openmoji:flag-china",
+  "openmoji:fish-cake-with-swirl",
+  "openmoji:astronaut",
+  "openmoji:alien-monster",
+  "openmoji:zany-face",
+  "openmoji:eyes",
+  "openmoji:desktop-computer",
+  "openmoji:watermelon",
+  "openmoji:cheese-wedge",
+  "openmoji:wrapped-gift",
+]
+
+const avatar = ref(avatars[Math.floor(Math.random() * avatars.length)])
+
+function getRandomAvatar() {
+  avatar.value = avatars[Math.floor(Math.random() * avatars.length)]
+}
+
 onMounted(() => {
   userStore.getMyProfile()
   configStore.getConfig()
@@ -38,29 +62,35 @@ const menus = computed<MenuOption[]>(() => [
   {
     label: () => h(RouterLink, { to: "/" }, { default: () => "题库" }),
     key: "problem",
+    icon: renderIcon("openmoji:jack-o-lantern"),
   },
   {
     label: () =>
       h(RouterLink, { to: "/submission" }, { default: () => "提交" }),
     key: "submission",
+    icon: renderIcon("openmoji:clown-face"),
   },
   {
     label: () => h(RouterLink, { to: "/contest" }, { default: () => "比赛" }),
     key: "contest",
+    icon: renderIcon("openmoji:face-with-tears-of-joy"),
   },
   {
     label: () => h(RouterLink, { to: "/rank" }, { default: () => "排名" }),
     key: "rank",
+    icon: renderIcon("openmoji:sports-medal"),
   },
   {
     label: () =>
       h(RouterLink, { to: "/announcement" }, { default: () => "公告" }),
     key: "announcement",
+    icon: renderIcon("openmoji:hamburger"),
   },
   {
     label: () => h(RouterLink, { to: "/admin" }, { default: () => "后台" }),
     show: userStore.isAdminRole,
     key: "admin",
+    icon: renderIcon("openmoji:hacker-cat"),
   },
 ])
 
@@ -130,7 +160,12 @@ function goHome() {
       </n-button>
       <div v-if="userStore.isFinished">
         <n-dropdown v-if="userStore.isAuthed" :options="options">
-          <n-button>{{ userStore.user!.username }}</n-button>
+          <n-button @click="getRandomAvatar">
+            <template #icon>
+              <Icon :icon="avatar"></Icon>
+            </template>
+            {{ userStore.user!.username }}
+          </n-button>
         </n-dropdown>
         <n-space align="center" v-else>
           <n-button @click="toggleLogin(true)">登录</n-button>
@@ -144,8 +179,8 @@ function goHome() {
       </div>
       <n-button circle @click="toggleDark()">
         <template #icon>
-          <n-icon v-if="isDark"><Sunny /></n-icon>
-          <n-icon v-else> <Moon /></n-icon>
+          <Icon v-if="isDark" icon="ph:sun"></Icon>
+          <Icon v-else icon="ph:moon"></Icon>
         </template>
       </n-button>
     </n-space>