Restruct heading

app/src/views/LeaderboardPage.vue

@@ -2,7 +2,8 @@
 import { ref, onMounted } from 'vue'
 import { useToast } from 'vue-toastification'
 import DynamicBackground from '../components/DynamicBackground.vue'
-import GameHeaderPart from '../components/GameHeaderPart.vue'
+import HeaderPart from '../components/HeaderPart.vue'
+import GameHeaderComponents from '../components/GameHeaderComponents.vue'
 import api from '../utils/api'
 
 const leaderboard = ref<
@@ -36,7 +37,7 @@ onMounted(async () => {
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
       <div class="h-[6vh] w-full">
-        <GameHeaderPart title="排行榜" />
+        <HeaderPart :title="排行榜" :headerComponent="GameHeaderComponents" />
       </div>
       <div class="w-fit h-[94vh] m-3">
         <div