From 997cd4cf0a14353256540c7e3f7f318668903957 Mon Sep 17 00:00:00 2001
From: Hanxven <hanxven@gmail.com>
Date: Mon, 16 Sep 2024 22:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=B1=95=E7=A4=BA=E6=AE=B5?=
 =?UTF-8?q?=E4=BD=8D=E8=AF=A6=E6=83=85=E7=9A=84=E8=A1=A8=E6=A0=BC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   6 -
 src/main/modules/core-functionality/state.ts  |  13 +-
 .../components/RankedTable.vue                | 214 +++++++++++++++
 .../views/match-history/MatchHistoryTab.vue   |  44 ++--
 .../match-history/widgets/RankedDisplay.vue   |   8 +-
 .../views/ongoing-game/PlayerInfoCard.vue     | 196 ++++++++------
 .../views/ongoing-game/RankedSpan.vue         | 246 ------------------
 .../views/ongoing-game/ongoing-game-utils.ts  |  14 +-
 .../src-main-window/views/test/Test.vue       |  13 +-
 src/shared/utils/ranked.ts                    |   4 +-
 10 files changed, 372 insertions(+), 386 deletions(-)
 create mode 100644 src/renderer/src-main-window/components/RankedTable.vue
 delete mode 100644 src/renderer/src-main-window/views/ongoing-game/RankedSpan.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5257245..acd88c3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,14 +18,8 @@
 
 - 添加了一个设置项，位于 `应用` -> `其他` -> `禁用硬件加速`，可选择是否禁用硬件加速。适用于界面渲染模糊的情况，但也会显著降低性能。
 
-- [TODO] 观战功能在短屏幕下也要支持。
-
-- [UNTESTED] 遇到过 - UI 补全
-
 - [TODO] hover 排位信息补全
 
-- [TODO] 排查：对局分析多余的加载。
-
 - [TODO] 补全对局分析的刷新按钮和队列筛选按钮。
 
 ## 调整
diff --git a/src/main/modules/core-functionality/state.ts b/src/main/modules/core-functionality/state.ts
index a426934d..63b96ccd 100644
--- a/src/main/modules/core-functionality/state.ts
+++ b/src/main/modules/core-functionality/state.ts
@@ -77,7 +77,6 @@ class CoreFunctionalitySettings {
     this.playerAnalysisFetchConcurrency = limit
   }
 
-
   setUseSgpApi(value: boolean) {
     this.useSgpApi = value
   }
@@ -408,12 +407,12 @@ export class CoreFunctionalityState {
 
     if (
       lcu.gameflow.session &&
-      (lcu.gameflow.phase === 'GameStart' ||
-        lcu.gameflow.phase === 'InProgress' ||
-        lcu.gameflow.phase === 'WaitingForStats' ||
-        lcu.gameflow.phase === 'PreEndOfGame' ||
-        lcu.gameflow.phase === 'EndOfGame' ||
-        lcu.gameflow.phase === 'Reconnect')
+      (lcu.gameflow.session.phase === 'GameStart' ||
+        lcu.gameflow.session.phase === 'InProgress' ||
+        lcu.gameflow.session.phase === 'WaitingForStats' ||
+        lcu.gameflow.session.phase === 'PreEndOfGame' ||
+        lcu.gameflow.session.phase === 'EndOfGame' ||
+        lcu.gameflow.session.phase === 'Reconnect')
     ) {
       return {
         phase: 'in-game',
diff --git a/src/renderer/src-main-window/components/RankedTable.vue b/src/renderer/src-main-window/components/RankedTable.vue
new file mode 100644
index 00000000..a428d011
--- /dev/null
+++ b/src/renderer/src-main-window/components/RankedTable.vue
@@ -0,0 +1,214 @@
+<template>
+  <table class="ranked-stats-table">
+    <colgroup></colgroup>
+    <thead>
+      <tr>
+        <th>队列</th>
+        <th>当前段位</th>
+        <th>胜点</th>
+        <th>胜局</th>
+        <th>负局</th>
+        <th>上赛季末段位</th>
+        <th>上赛季最高段位</th>
+        <th>历史最高段位</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="r of sortedQueues" :key="r.queueType">
+        <td>{{ formatQueueName(r.queueType) }}</td>
+        <td>
+          <div class="tier">
+            <img
+              v-if="RANKED_MEDAL_MAP[r.tier]"
+              :src="RANKED_MEDAL_MAP[r.tier]"
+              alt="tier"
+              class="tier-img"
+            />
+            {{ formatTierDivision(r, 'current') }}
+          </div>
+        </td>
+        <td>{{ formatPoints(r) }}</td>
+        <td>{{ formatWins(r) }}</td>
+        <td>{{ formatLosses(r.losses) }}</td>
+        <td>
+          <div class="tier">
+            <img
+              v-if="RANKED_MEDAL_MAP[r.previousSeasonEndTier]"
+              :src="RANKED_MEDAL_MAP[r.previousSeasonEndTier]"
+              alt="tier"
+              class="tier-img"
+            />
+            {{ formatTierDivision(r, 'previousSeasonEnd') }}
+          </div>
+        </td>
+        <td>
+          <div class="tier">
+            <img
+              v-if="RANKED_MEDAL_MAP[r.previousSeasonHighestTier]"
+              :src="RANKED_MEDAL_MAP[r.previousSeasonHighestTier]"
+              alt="tier"
+              class="tier-img"
+            />
+            {{ formatTierDivision(r, 'previousSeasonHighest') }}
+          </div>
+        </td>
+        <td>
+          <div class="tier">
+            <img
+              v-if="RANKED_MEDAL_MAP[r.highestTier]"
+              :src="RANKED_MEDAL_MAP[r.highestTier]"
+              alt="tier"
+              class="tier-img"
+            />
+            {{ formatTierDivision(r, 'highest') }}
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { RankedEntry, RankedStats } from '@shared/types/lcu/ranked'
+import { QUEUE_TYPE_TEXT, TIER_TEXT } from '@shared/utils/ranked'
+
+import BronzeMedal from '@main-window/assets/ranked-icons/bronze.png'
+import ChallengerMedal from '@main-window/assets/ranked-icons/challenger.png'
+import DiamondMedal from '@main-window/assets/ranked-icons/diamond.png'
+import EmeraldMedal from '@main-window/assets/ranked-icons/emerald.png'
+import GoldMedal from '@main-window/assets/ranked-icons/gold.png'
+import GrandmasterMedal from '@main-window/assets/ranked-icons/grandmaster.png'
+import IronMedal from '@main-window/assets/ranked-icons/iron.png'
+import MasterMedal from '@main-window/assets/ranked-icons/master.png'
+import PlatinumMedal from '@main-window/assets/ranked-icons/platinum.png'
+import SilverMedal from '@main-window/assets/ranked-icons/silver.png'
+
+const { rankedStats } = defineProps<{
+  rankedStats: RankedStats
+}>()
+
+const RANKED_MEDAL_MAP: Record<string, string> = {
+  IRON: IronMedal,
+  BRONZE: BronzeMedal,
+  SILVER: SilverMedal,
+  GOLD: GoldMedal,
+  PLATINUM: PlatinumMedal,
+  EMERALD: EmeraldMedal,
+  DIAMOND: DiamondMedal,
+  MASTER: MasterMedal,
+  GRANDMASTER: GrandmasterMedal,
+  CHALLENGER: ChallengerMedal
+}
+
+const QUEUE_TYPE_ORDER: Record<string, number> = {
+  RANKED_SOLO_5x5: 1,
+  RANKED_FLEX_SR: 2,
+  CHERRY: 3,
+  RANKED_TFT: 4,
+  RANKED_TFT_TURBO: 5,
+  RANKED_TFT_DOUBLE_UP: 6
+}
+
+const formatQueueName = (queueType: string) => {
+  return QUEUE_TYPE_TEXT[queueType] || queueType
+}
+
+const formatWins = (entry: RankedEntry) => {
+  if (entry.queueType === 'CHERRY') {
+    return entry.ratedTier === 'NONE' ? '—' : entry.wins
+  }
+
+  if (!entry.tier || entry.tier === 'NA') {
+    return '—'
+  }
+
+  return entry.wins
+}
+
+const formatPoints = (entry: RankedEntry) => {
+  if (entry.queueType === 'CHERRY') {
+    return entry.ratedTier === 'NONE' ? '—' : entry.ratedRating
+  }
+
+  if (!entry.tier || entry.tier === 'NA') {
+    return '—'
+  }
+
+  return entry.leaguePoints
+}
+
+const sortedQueues = rankedStats.queues.sort((a, b) => {
+  return QUEUE_TYPE_ORDER[a.queueType] - QUEUE_TYPE_ORDER[b.queueType]
+})
+
+const formatTierDivision = (entry: RankedEntry, type: string) => {
+  let tier: string
+  let division: string
+  switch (type) {
+    case 'current':
+      tier = entry.tier
+      division = entry.division
+      break
+    case 'previousSeasonEnd':
+      tier = entry.previousSeasonEndTier
+      division = entry.previousSeasonEndDivision
+      break
+    case 'previousSeasonHighest':
+      tier = entry.previousSeasonHighestTier
+      division = entry.previousSeasonHighestDivision
+      break
+    case 'highest':
+      tier = entry.highestTier
+      division = entry.highestDivision
+      break
+    default:
+      tier = ''
+      division = ''
+  }
+
+  if (!tier || tier === 'NA') {
+    return '—'
+  }
+
+  if (!division || division === 'NA') {
+    return TIER_TEXT[tier] || tier
+  }
+
+  return `${TIER_TEXT[tier] || tier} ${division}`
+}
+
+const formatLosses = (losses: number) => {
+  return losses || '—'
+}
+</script>
+
+<style lang="less" scoped>
+// 轻度边框
+.ranked-stats-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px solid #ffffff40;
+  font-size: 12px;
+  color: #d4d4d4;
+
+  th,
+  td {
+    border: 1px solid #ffffff40;
+    padding: 0 4px;
+    text-align: center;
+  }
+
+  .tier {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+
+    .tier-img {
+      width: 16px;
+      height: 16px;
+      vertical-align: middle;
+    }
+  }
+}
+</style>
diff --git a/src/renderer/src-main-window/views/match-history/MatchHistoryTab.vue b/src/renderer/src-main-window/views/match-history/MatchHistoryTab.vue
index 28fd6f2a..4227e70b 100644
--- a/src/renderer/src-main-window/views/match-history/MatchHistoryTab.vue
+++ b/src/renderer/src-main-window/views/match-history/MatchHistoryTab.vue
@@ -7,12 +7,15 @@
     />
     <NModal v-model:show="isShowingRankedModal">
       <div class="ranked-modal">
-        <RankedDisplay
-          v-for="r of tab.rankedStats?.queueMap"
-          :key="r.queueType"
-          class="ranked"
-          :ranked-entry="r"
-        />
+        <div class="blocks">
+          <RankedDisplay
+            v-for="r of tab.rankedStats?.queueMap"
+            :key="r.queueType"
+            class="ranked"
+            :ranked-entry="r"
+          />
+        </div>
+        <RankedTable v-if="tab.rankedStats" :ranked-stats="tab.rankedStats" />
       </div>
     </NModal>
     <Transition name="fade">
@@ -477,7 +480,7 @@ import {
   NavigateBeforeOutlined as NavigateBeforeOutlinedIcon,
   NavigateNextOutlined as NavigateNextOutlinedIcon
 } from '@vicons/material'
-import { useIntervalFn, useMediaQuery } from '@vueuse/core'
+import { useIntervalFn, useMediaQuery, useScroll } from '@vueuse/core'
 import {
   NButton,
   NIcon,
@@ -492,6 +495,7 @@ import {
 import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
 
 import PlayerTagEditModal from '@main-window/components/PlayerTagEditModal.vue'
+import RankedTable from '@main-window/components/RankedTable.vue'
 import { matchHistoryTabsRendererModule as mhm } from '@main-window/modules/match-history-tabs'
 import { TabState, useMatchHistoryTabsStore } from '@main-window/modules/match-history-tabs/store'
 
@@ -543,7 +547,7 @@ const analysis = computed(() => {
 
 const eds = useExternalDataSourceStore()
 
-const scrollRef = useTemplateRef('scroll')
+const scrollEl = useTemplateRef('scroll')
 const rightEl = useTemplateRef('right')
 
 const mh = useMatchHistoryTabsStore()
@@ -568,7 +572,7 @@ const isSomethingLoading = computed(() => {
 const scrollToRightElTop = () => {
   const top = rightEl.value?.offsetTop
   if (top && top < mainContentScrollTop.value) {
-    scrollRef.value?.scrollTo({ top: top })
+    scrollEl.value?.scrollTo({ top: top })
   }
 }
 
@@ -851,15 +855,18 @@ watch(
 watch(
   () => mh.currentTab?.id,
   () => {
-    if (mh.currentTab?.id === tab.puuid) {
+    if (mh.currentTab?.id === tab.id) {
       nextTick(() => {
-        scrollRef.value?.scrollTo({ top: mainContentScrollTop.value })
+        scrollEl.value?.scrollTo({ top: mainContentScrollTop.value })
       })
     }
-  }
+  },
+  { immediate: true }
 )
 
 defineExpose({
+  id: tab.id,
+  sgpServerId: tab.sgpServerId,
   puuid: tab.puuid,
   refresh: handleRefresh
 })
@@ -874,13 +881,20 @@ defineExpose({
 }
 
 .ranked-modal {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   border-radius: 4px;
   background-color: #202020;
   padding: 16px;
 
+  .blocks {
+    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+
   .ranked {
     background-color: #f4f4f40e;
   }
diff --git a/src/renderer/src-main-window/views/match-history/widgets/RankedDisplay.vue b/src/renderer/src-main-window/views/match-history/widgets/RankedDisplay.vue
index b54f3a96..59e9bf78 100644
--- a/src/renderer/src-main-window/views/match-history/widgets/RankedDisplay.vue
+++ b/src/renderer/src-main-window/views/match-history/widgets/RankedDisplay.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="rankedEntry" class="ranked-wrapper" :class="{ small: small }">
     <div class="ranked-type">
-      {{ queueTypeTextMap[rankedEntry.queueType] || rankedEntry.queueType }}
+      {{ QUEUE_TYPE_TEXT[rankedEntry.queueType] || rankedEntry.queueType }}
     </div>
     <div class="ranked-display">
       <img
@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import { RankedEntry } from '@shared/types/lcu/ranked'
-import { queueTypeTextMap, tierTextMap } from '@shared/utils/ranked'
+import { QUEUE_TYPE_TEXT, TIER_TEXT } from '@shared/utils/ranked'
 import { computed } from 'vue'
 
 import RankedBronze from '@main-window/assets/ranked-icons-large/bronze.png'
@@ -108,7 +108,7 @@ const formatTier = computed(() => {
     return ''
   }
 
-  const tier = tierTextMap[props.rankedEntry.tier] || props.rankedEntry.tier
+  const tier = TIER_TEXT[props.rankedEntry.tier] || props.rankedEntry.tier
 
   if (tier === '' || tier === 'NA') {
     return '未定级'
@@ -129,7 +129,7 @@ const formatPreviousTier = computed(() => {
   }
 
   const tier =
-    tierTextMap[props.rankedEntry.previousSeasonHighestTier] ||
+    TIER_TEXT[props.rankedEntry.previousSeasonHighestTier] ||
     props.rankedEntry.previousSeasonHighestTier
 
   if (tier === '' || tier === 'NA') {
diff --git a/src/renderer/src-main-window/views/ongoing-game/PlayerInfoCard.vue b/src/renderer/src-main-window/views/ongoing-game/PlayerInfoCard.vue
index bcfd955e..061226f4 100644
--- a/src/renderer/src-main-window/views/ongoing-game/PlayerInfoCard.vue
+++ b/src/renderer/src-main-window/views/ongoing-game/PlayerInfoCard.vue
@@ -3,7 +3,9 @@
     class="player-card"
     :class="{
       dimming:
-        currentHighlightingPreMadeTeamId && currentHighlightingPreMadeTeamId !== preMadeTeamId
+        currentHighlightingPreMadeTeamId && currentHighlightingPreMadeTeamId !== preMadeTeamId,
+      highlighting:
+        currentHighlightingPreMadeTeamId && currentHighlightingPreMadeTeamId === preMadeTeamId
     }"
     :style="{
       width: `${FIXED_CARD_WIDTH}px`
@@ -32,56 +34,66 @@
           >
           <span class="tag-line">#{{ summoner?.tagLine || '—' }}</span>
         </div>
-        <div class="ranked">
-          <template v-if="queueType !== 'CHERRY'">
-            <div
-              class="ranked-item"
-              title="单排 / 双排"
-              v-if="rankedSoloFlex.solo && rankedSoloFlex.solo.tier && rankedSoloFlex.solo !== 'NA'"
-            >
-              <img class="image" :src="RANKED_MEDAL_MAP[rankedSoloFlex.solo.tier]" alt="rank" />
-              <span class="text">{{
-                rankedSoloFlex.solo.division && rankedSoloFlex.solo.division !== 'NA'
-                  ? `${TIER_TEXT[rankedSoloFlex.solo.tier]} ${rankedSoloFlex.solo.division}`
-                  : `${TIER_TEXT[rankedSoloFlex.solo.tier]}`
-              }}</span>
-            </div>
-            <div class="ranked-item unranked" title="单排 / 双排" v-else>
-              <span class="text">未定级</span>
-            </div>
-            <div
-              class="ranked-item"
-              title="灵活组排"
-              v-if="rankedSoloFlex.flex && rankedSoloFlex.flex.tier && rankedSoloFlex.flex !== 'NA'"
-            >
-              <img class="image" :src="RANKED_MEDAL_MAP[rankedSoloFlex.flex.tier]" alt="rank" />
-              <span class="text">{{
-                rankedSoloFlex.flex.division && rankedSoloFlex.flex.division !== 'NA'
-                  ? `${TIER_TEXT[rankedSoloFlex.flex.tier]} ${rankedSoloFlex.flex.division}`
-                  : `${TIER_TEXT[rankedSoloFlex.flex.tier]}`
-              }}</span>
-            </div>
-            <div class="ranked-item unranked" title="灵活组排" v-else>
-              <span class="text">未定级</span>
-            </div>
-          </template>
-          <template v-else>
-            <div
-              class="ranked-item cherry"
-              title="灵活组排"
-              v-if="rankedSoloFlex.cherry && rankedSoloFlex.cherry.ratedRating"
-            >
-              <span class="text"
-                >斗魂竞技场
-                <span style="font-weight: bold">{{ rankedSoloFlex.cherry.ratedRating }}</span>
-                分</span
-              >
-            </div>
-            <div class="ranked-item unranked cherry" title="灵活组排" v-else>
-              <span class="text">未定级</span>
+        <NPopover :disabled="!rankedStats" :delay="50">
+          <template #trigger>
+            <div class="ranked">
+              <template v-if="queueType !== 'CHERRY'">
+                <div
+                  class="ranked-item"
+                  title="单排 / 双排"
+                  v-if="
+                    rankedSoloFlex.solo && rankedSoloFlex.solo.tier && rankedSoloFlex.solo !== 'NA'
+                  "
+                >
+                  <img class="image" :src="RANKED_MEDAL_MAP[rankedSoloFlex.solo.tier]" alt="rank" />
+                  <span class="text">{{
+                    rankedSoloFlex.solo.division && rankedSoloFlex.solo.division !== 'NA'
+                      ? `${TIER_TEXT[rankedSoloFlex.solo.tier]} ${rankedSoloFlex.solo.division}`
+                      : `${TIER_TEXT[rankedSoloFlex.solo.tier]}`
+                  }}</span>
+                </div>
+                <div class="ranked-item unranked" title="单排 / 双排" v-else>
+                  <span class="text">未定级</span>
+                </div>
+                <div
+                  class="ranked-item"
+                  title="灵活组排"
+                  v-if="
+                    rankedSoloFlex.flex && rankedSoloFlex.flex.tier && rankedSoloFlex.flex !== 'NA'
+                  "
+                >
+                  <img class="image" :src="RANKED_MEDAL_MAP[rankedSoloFlex.flex.tier]" alt="rank" />
+                  <span class="text">{{
+                    rankedSoloFlex.flex.division && rankedSoloFlex.flex.division !== 'NA'
+                      ? `${TIER_TEXT[rankedSoloFlex.flex.tier]} ${rankedSoloFlex.flex.division}`
+                      : `${TIER_TEXT[rankedSoloFlex.flex.tier]}`
+                  }}</span>
+                </div>
+                <div class="ranked-item unranked" title="灵活组排" v-else>
+                  <span class="text">未定级</span>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  class="ranked-item cherry"
+                  title="灵活组排"
+                  v-if="rankedSoloFlex.cherry && rankedSoloFlex.cherry.ratedRating"
+                >
+                  <span class="text"
+                    >斗魂竞技场
+                    <span style="font-weight: bold">{{ rankedSoloFlex.cherry.ratedRating }}</span>
+                    分</span
+                  >
+                </div>
+                <div class="ranked-item unranked cherry" title="灵活组排" v-else>
+                  <span class="text">未定级</span>
+                </div>
+              </template>
             </div>
           </template>
-        </div>
+          <RankedTable v-if="rankedStats" :rankedStats="rankedStats" />
+          <div v-else>FOR PLACEHOLDER</div>
+        </NPopover>
       </div>
     </div>
     <div class="stats">
@@ -188,6 +200,7 @@
       </div>
     </div>
     <div class="tags">
+      <div class="tag self" v-if="isSelf">自己</div>
       <NPopover v-if="savedInfo && !isSelf && savedInfo.tag" :delay="50" style="max-height: 240px">
         <template #trigger>
           <div class="tag tagged">已标记</div>
@@ -234,22 +247,34 @@
           <div class="tag have-met">遇到过</div>
         </template>
         <div class="popover-text have-met-popover">
-          <div>
+          <div style="margin-bottom: 4px">
             {{
               `曾在 ${dayjs(savedInfo.lastMetAt).locale('zh-cn').fromNow()} 遇见过，共遇见过 ${savedInfo.encounteredGames.length} 次`
             }}
           </div>
-          <div class="encountered-games">
-            <div
-              class="encountered-game"
-              v-for="game of savedInfo.encounteredGames"
-              :key="game.gameId"
-              @click="() => emits('showGameById', game.gameId, puuid)"
-            >
-              <span class="date">{{ dayjs(game.updateAt).format('MM-DD HH:mm') }}</span>
-              <span class="game-id">{{ game.gameId }}</span>
-            </div>
-          </div>
+          <table class="encountered-game-table">
+            <colgroup>
+              <col class="game-id-col" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th>对局 ID</th>
+                <th>记载日期</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in savedInfo.encounteredGames" :key="item.gameId">
+                <td class="game-id-td" @click="() => emits('showGameById', item.gameId, puuid)">
+                  {{ item.gameId }}
+                </td>
+                <td>
+                  {{ dayjs(item.updateAt).format('MM-DD HH:mm:ss') }} ({{
+                    dayjs(item.updateAt).locale('zh-cn').fromNow()
+                  }})
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </NPopover>
       <NPopover
@@ -328,7 +353,6 @@
           </div>
         </div>
       </NPopover>
-      <div class="tag self" v-if="isSelf">自己</div>
     </div>
     <div class="frequent-used-champions" v-if="frequentlyUsedChampions.length">
       <NPopover :keep-alive-on-hover="false" v-for="c of frequentlyUsedChampions" :delay="50">
@@ -398,11 +422,13 @@ import {
   withSelfParticipantMatchHistory
 } from '@shared/utils/analysis'
 import { ParsedRole } from '@shared/utils/ranked'
+import { TIER_TEXT } from '@shared/utils/ranked'
 import { useElementHover } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { NPopover, NVirtualList } from 'naive-ui'
 import { computed, useTemplateRef, watch, watchEffect } from 'vue'
 
+import RankedTable from '@main-window/components/RankedTable.vue'
 import PositionIcon from '@main-window/components/icons/position-icons/PositionIcon.vue'
 
 import {
@@ -410,8 +436,7 @@ import {
   FIXED_CARD_WIDTH,
   POSITION_ASSIGNMENT_REASON,
   PRE_MADE_TEAM_COLORS,
-  RANKED_MEDAL_MAP,
-  TIER_TEXT
+  RANKED_MEDAL_MAP
 } from './ongoing-game-utils'
 
 const { puuid, analysis, matchHistory, position, preMadeTeamId, rankedStats } = defineProps<{
@@ -575,6 +600,10 @@ const matches = computed(() => {
   &.dimming {
     filter: brightness(0.3);
   }
+
+  &.highlighting {
+    filter: brightness(1.2);
+  }
 }
 
 .player-info {
@@ -924,26 +953,31 @@ const matches = computed(() => {
   width: fit-content;
 }
 
-.encountered-games {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  margin-top: 4px;
+.encountered-game-table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: 1px solid #ffffff40;
+  font-size: 12px;
+  color: #d4d4d4;
 
-  .encountered-game {
-    display: flex;
-    gap: 4px;
-    font-size: 12px;
-    cursor: pointer;
+  th,
+  td {
+    border: 1px solid #ffffff40;
+    padding: 0 8px;
+    text-align: center;
+  }
 
-    .date {
-      margin-right: 4px;
-    }
+  .game-id-col {
+    width: 120px;
+  }
 
-    .game-id {
-      color: #999;
-      font-weight: bold;
-    }
+  .game-id-td:hover {
+    color: #ffffff;
+  }
+
+  .game-id-td {
+    transition: color 0.2s;
+    cursor: pointer;
   }
 }
 
diff --git a/src/renderer/src-main-window/views/ongoing-game/RankedSpan.vue b/src/renderer/src-main-window/views/ongoing-game/RankedSpan.vue
deleted file mode 100644
index 2992ddce..00000000
--- a/src/renderer/src-main-window/views/ongoing-game/RankedSpan.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <template v-if="showingRank">
-    <NPopover placement="bottom" :disabled="!simple && sortedRankedQueues.length <= 1" :delay="50">
-      <template #trigger>
-        <div v-bind="$attrs" class="summoner-rank">
-          <img
-            v-if="showingRank.tier && rankedMedalMap[showingRank.tier]"
-            :src="rankedMedalMap[showingRank.tier]"
-            class="ranked-medal"
-          />
-          <span>
-            {{ formatRankText(showingRank, simple) }}
-          </span>
-        </div>
-      </template>
-      <div class="summoner-rank-popover" v-for="q of sortedRankedQueues" :key="q.queueType">
-        {{ formatRankText(q) }}
-      </div>
-    </NPopover>
-  </template>
-  <div class="summoner-rank" v-else>无段位</div>
-</template>
-
-<script setup lang="ts">
-import { RankedEntry, RankedStats } from '@shared/types/lcu/ranked'
-import { NPopover } from 'naive-ui'
-import { computed } from 'vue'
-
-import BronzeMedal from '@main-window/assets/ranked-icons/bronze.png'
-import ChallengerMedal from '@main-window/assets/ranked-icons/challenger.png'
-import DiamondMedal from '@main-window/assets/ranked-icons/diamond.png'
-import EmeraldMedal from '@main-window/assets/ranked-icons/emerald.png'
-import GoldMedal from '@main-window/assets/ranked-icons/gold.png'
-import GrandmasterMedal from '@main-window/assets/ranked-icons/grandmaster.png'
-import IronMedal from '@main-window/assets/ranked-icons/iron.png'
-import MasterMedal from '@main-window/assets/ranked-icons/master.png'
-import PlatinumMedal from '@main-window/assets/ranked-icons/platinum.png'
-import SilverMedal from '@main-window/assets/ranked-icons/silver.png'
-
-const props = defineProps<{
-  ranked: RankedStats
-  simple?: boolean
-  queueType?: string
-}>()
-
-const queueTypeText: Record<string, string> = {
-  RANKED_FLEX_SR: '灵活排位',
-  RANKED_SOLO_5x5: '单双排位',
-  RANKED_FLEX_TT: '灵活排位 扭曲丛林',
-  RANKED_TFT: '云顶之弈',
-  RANKED_TFT_TURBO: '云顶之弈 Turbo',
-  RANKED_TFT_DOUBLE_UP: '云顶之弈 Double',
-  CHERRY: '斗魂竞技场'
-}
-
-// 越大的值代表更高的优先级
-const queueOrderMap = {
-  RANKED_SOLO_5x5: 1100,
-  RANKED_FLEX_SR: 1050,
-  RANKED_FLEX_TT: 1010,
-  RANKED_TFT: 550,
-  RANKED_TFT_TURBO: 540,
-  RANKED_TFT_DOUBLE_UP: 530,
-  CHERRY: 150
-}
-
-const tierOrderMap = {
-  NA: 0,
-  IRON: 1,
-  BRONZE: 2,
-  SILVER: 3,
-  GOLD: 4,
-  PLATINUM: 5,
-  EMERALD: 6,
-  DIAMOND: 7,
-  MASTER: 8,
-  GRANDMASTER: 9,
-  CHALLENGER: 100
-}
-
-const tierDivisionOrderMap = {
-  NA: 0,
-  V: 1,
-  IV: 2,
-  III: 3,
-  II: 4,
-  I: 5
-}
-
-// 无段位时，为空字符串
-const tierTextMap: Record<string, string> = {
-  IRON: '坚韧黑铁',
-  BRONZE: '英勇黄铜',
-  SILVER: '不屈白银',
-  GOLD: '荣耀黄金',
-  PLATINUM: '华贵铂金',
-  EMERALD: '流光翡翠',
-  DIAMOND: '璀璨钻石',
-  MASTER: '超凡大师',
-  GRANDMASTER: '傲世宗师',
-  CHALLENGER: '最强王者'
-}
-
-const rankedMedalMap: Record<string, string> = {
-  IRON: IronMedal,
-  BRONZE: BronzeMedal,
-  SILVER: SilverMedal,
-  GOLD: GoldMedal,
-  PLATINUM: PlatinumMedal,
-  EMERALD: EmeraldMedal,
-  DIAMOND: DiamondMedal,
-  MASTER: MasterMedal,
-  GRANDMASTER: GrandmasterMedal,
-  CHALLENGER: ChallengerMedal
-}
-
-const sortedRankedQueues = computed(() => {
-  return props.ranked.queues
-    .toSorted((a, b) => {
-      let aQueue = queueOrderMap[a.queueType] || 0
-      let bQueue = queueOrderMap[b.queueType] || 0
-
-      if (a.queueType === props.queueType) {
-        aQueue = 1e7
-      }
-
-      if (b.queueType === props.queueType) {
-        bQueue = 1e7
-      }
-
-      const aTier = tierOrderMap[a.tier] || 0
-      const apTier = tierOrderMap[a.previousSeasonHighestTier] || 0
-      const bTier = tierOrderMap[b.tier] || 0
-      const bpTier = tierOrderMap[b.previousSeasonHighestTier] || 0
-      const aDivision = tierDivisionOrderMap[a.division] || 0
-      const bDivision = tierDivisionOrderMap[b.division] || 0
-      const apDivision = tierDivisionOrderMap[a.previousSeasonHighestDivision] || 0
-      const bpDivision = tierDivisionOrderMap[b.previousSeasonHighestDivision] || 0
-
-      if (aQueue !== bQueue) {
-        return bQueue - aQueue
-      }
-
-      if (a.tier && b.tier) {
-        if (aTier !== bTier) {
-          return bTier - aTier
-        }
-
-        return bDivision - aDivision
-      } else {
-        if (apTier !== bpTier) {
-          return bpTier - apTier
-        }
-
-        return bpDivision - apDivision
-      }
-    })
-    .filter((q) => q.tier || q.highestTier || q.previousSeasonHighestTier)
-})
-
-const showingRank = computed(() => {
-  return sortedRankedQueues.value.find(
-    (q) => q.tier || q.highestTier || q.previousSeasonHighestTier
-  )
-})
-
-const formatRankText = (rank: RankedEntry, simple = false) => {
-  const tier = tierTextMap[rank.tier]
-  const queueType = queueTypeText[rank.queueType]
-  const highestTier = tierTextMap[rank.highestTier]
-  const previousHighestTier = tierTextMap[rank.previousSeasonHighestTier]
-
-  const textArr: string[] = []
-
-  textArr.push(queueType)
-
-  if (tier) {
-    if (rank.division === 'NA') {
-      textArr.push(`${tier}`)
-    } else {
-      textArr.push(`${tier} ${rank.division}`)
-    }
-  }
-
-  if (rank.ratedRating) {
-    textArr.push(`${rank.ratedRating} 分`)
-  }
-
-  if (rank.leaguePoints) {
-    textArr.push(`${rank.leaguePoints} LP`)
-  }
-
-  if (rank.wins && !simple) {
-    textArr.push(`胜场 ${rank.wins}`)
-  }
-
-  if (highestTier && (!simple || textArr.length <= 1)) {
-    if (rank.highestDivision === 'NA') {
-      textArr.push(`赛季最高 ${highestTier}`)
-    } else {
-      textArr.push(`赛季最高 ${highestTier} ${rank.highestDivision}`)
-    }
-  }
-
-  if (previousHighestTier && (!simple || textArr.length <= 1)) {
-    if (rank.previousSeasonHighestDivision === 'NA') {
-      textArr.push(`历史最高 ${previousHighestTier}`)
-    } else {
-      textArr.push(`历史最高 ${previousHighestTier} ${rank.previousSeasonHighestDivision}`)
-    }
-  }
-
-  return textArr.join(' · ')
-}
-</script>
-
-<style lang="less" scoped>
-.summoner-rank {
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  color: rgb(159, 159, 159);
-  width: fit-content;
-  gap: 4px;
-
-  .ranked-medal {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.summoner-rank-popover {
-  font-size: 12px;
-  color: rgb(255, 255, 255);
-}
-
-.tip {
-  font-size: 12px;
-  color: #adadad;
-}
-
-.icon {
-  margin-left: 8px;
-  font-size: 16px;
-}
-</style>
diff --git a/src/renderer/src-main-window/views/ongoing-game/ongoing-game-utils.ts b/src/renderer/src-main-window/views/ongoing-game/ongoing-game-utils.ts
index e79c964e..ffa4684f 100644
--- a/src/renderer/src-main-window/views/ongoing-game/ongoing-game-utils.ts
+++ b/src/renderer/src-main-window/views/ongoing-game/ongoing-game-utils.ts
@@ -28,6 +28,7 @@ export const RANKED_MEDAL_MAP: Record<string, string> = {
   CHALLENGER: ChallengerMedal
 }
 
+
 export const POSITION_ASSIGNMENT_REASON = {
   FILL_SECONDARY: {
     name: '副选补位',
@@ -229,16 +230,3 @@ export const PRE_MADE_TEAM_COLORS = {
 export const FIXED_CARD_WIDTH = '240px'
 
 export const ONGOING_GAME_COMP_K = Symbol('AKARI_OGC_IJK') as InjectionKey<any>
-
-export const TIER_TEXT: Record<string, string> = {
-  IRON: '坚韧黑铁',
-  BRONZE: '英勇黄铜',
-  SILVER: '不屈白银',
-  GOLD: '荣耀黄金',
-  PLATINUM: '华贵铂金',
-  EMERALD: '流光翡翠',
-  DIAMOND: '璀璨钻石',
-  MASTER: '超凡大师',
-  GRANDMASTER: '傲世宗师',
-  CHALLENGER: '最强王者'
-}
diff --git a/src/renderer/src-main-window/views/test/Test.vue b/src/renderer/src-main-window/views/test/Test.vue
index 566f48a5..e6d8d429 100644
--- a/src/renderer/src-main-window/views/test/Test.vue
+++ b/src/renderer/src-main-window/views/test/Test.vue
@@ -1,14 +1,3 @@
 <template>
-  <OngoingGame />
-  <!-- <ChampionIcon :champion-id="4" /> -->
+  <div>占位</div>
 </template>
-
-<script lang="ts" setup>
-import ChampionIcon from '@renderer-shared/components/widgets/ChampionIcon.vue'
-import { ref } from 'vue'
-
-import SpectateStatus from '../match-history/widgets/SpectateStatus.vue'
-import OngoingGame from '../ongoing-game/OngoingGame.vue'
-</script>
-
-<style lang="less" scoped></style>
diff --git a/src/shared/utils/ranked.ts b/src/shared/utils/ranked.ts
index 105064ee..08fd79b0 100644
--- a/src/shared/utils/ranked.ts
+++ b/src/shared/utils/ranked.ts
@@ -1,4 +1,4 @@
-export const tierTextMap: Record<string, string> = {
+export const TIER_TEXT: Record<string, string> = {
   IRON: '坚韧黑铁',
   BRONZE: '英勇黄铜',
   SILVER: '不屈白银',
@@ -11,7 +11,7 @@ export const tierTextMap: Record<string, string> = {
   CHALLENGER: '最强王者'
 }
 
-export const queueTypeTextMap: Record<string, string> = {
+export const QUEUE_TYPE_TEXT: Record<string, string> = {
   RANKED_SOLO_5x5: '单排 / 双排',
   RANKED_FLEX_SR: '灵活组排',
   CHERRY: '斗魂竞技场',