refactor icons

src/shared/components/ContestTitle.vue

@@ -1,24 +1,19 @@
 <script setup lang="ts">
 import { Contest } from "utils/types"
 import { ContestType } from "utils/constants"
-import Lock from "~/shared/icons/Lock.vue"
+import { Icon } from "@iconify/vue"
 
 defineProps<{ contest: Contest }>()
 </script>
 <template>
-  <n-space>
-    <span>{{ contest.title }}</span>
-    <n-icon
-      size="large"
-      class="lockIcon"
+  <n-flex>
+    <Icon
       v-if="contest.contest_type === ContestType.private"
-    >
-      <Lock />
-    </n-icon>
-  </n-space>
+      :height="20"
+      :width="20"
+      icon="openmoji:locked"
+    ></Icon>
+    <span>{{ contest.title }}</span>
+  </n-flex>
 </template>
-<style scoped>
-.lockIcon {
-  transform: translateY(2px);
-}
-</style>
+<style scoped></style>

src/shared/components/Copy.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import copy from "copy-text-to-clipboard"
-import Select from "~/shared/icons/Select.vue"
-import Copy from "~/shared/icons/Copy.vue"
+import { Icon } from "@iconify/vue"
 
 defineProps<{ value: string }>()
 const [copied, toggle] = useToggle()
 const { start } = useTimeoutFn(() => toggle(false), 1000, { immediate: false })
 
+const COPY = h(Icon, { icon: "emojione:clipboard" })
+const OK = h(Icon, { icon: "openmoji:check-mark" })
+
 function handleClick(value: string) {
   copy(value)
   toggle(true)
@@ -17,7 +19,7 @@ function handleClick(value: string) {
   <n-tooltip trigger="hover">
     <template #trigger>
       <n-icon class="icon" @click="handleClick(value)">
-        <component :is="copied ? Select : Copy"></component>
+        <component :is="copied ? OK : COPY"></component>
       </n-icon>
     </template>
     {{ copied ? "已复制" : "复制" }}
@@ -26,6 +28,6 @@ function handleClick(value: string) {
 <style scoped>
 .icon {
   cursor: pointer;
-  transform: translateY(2px);
+  font-size: 20px;
 }
 </style>

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>