From 914ea5dd158c668d2ace87f85cb38e0156f3b7b7 Mon Sep 17 00:00:00 2001
From: Hanxven <hanxven@gmail.com>
Date: Sun, 11 Aug 2024 18:33:31 +0800
Subject: [PATCH] =?UTF-8?q?OPGG=20=E5=8F=AF=E7=82=B9=E5=87=BB=E8=8B=B1?=
 =?UTF-8?q?=E9=9B=84=E5=A4=B4=E5=83=8F=E5=BF=AB=E9=80=9F=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AuxiliaryWindowTitleBar.vue    |  9 +++++-
 .../components/OpggIntegrated.vue             |  7 -----
 .../src-auxiliary-window/views/opgg/Opgg.vue  |  1 +
 .../views/opgg/OpggChampion.vue               | 29 +++++++++++++++++--
 4 files changed, 35 insertions(+), 11 deletions(-)
 delete mode 100644 src/renderer/src-auxiliary-window/components/OpggIntegrated.vue

diff --git a/src/renderer/src-auxiliary-window/components/AuxiliaryWindowTitleBar.vue b/src/renderer/src-auxiliary-window/components/AuxiliaryWindowTitleBar.vue
index 50a9e2a7..1150a6d1 100644
--- a/src/renderer/src-auxiliary-window/components/AuxiliaryWindowTitleBar.vue
+++ b/src/renderer/src-auxiliary-window/components/AuxiliaryWindowTitleBar.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="title-bar" :class="{ blurred: aw.focusState === 'blurred' }">
     <div class="text-area">
-      <div class="shortcut" v-if="!isInIndicatorView" @click="handleBackToIndicatorView">
+      <div
+        title="League Akari 的小窗口"
+        class="shortcut"
+        v-if="!isInIndicatorView"
+        @click="handleBackToIndicatorView"
+      >
         <NIcon class="shortcut-icon"><ArrowBackIosFilledIcon /></NIcon>
         <span class="shortcut-text">小窗</span>
       </div>
@@ -10,6 +15,7 @@
           class="shortcut"
           v-for="shortcut of shortcuts"
           :key="shortcut.routeName"
+          :title="shortcut.description"
           @click="() => router.replace({ name: shortcut.routeName })"
         >
           <span class="shortcut-text">{{ shortcut.label }}</span>
@@ -70,6 +76,7 @@ watchEffect(() => {
 const shortcuts = [
   {
     label: 'OP.GG',
+    description: '集成的 OP.GG',
     routeName: 'opgg'
   }
 ]
diff --git a/src/renderer/src-auxiliary-window/components/OpggIntegrated.vue b/src/renderer/src-auxiliary-window/components/OpggIntegrated.vue
deleted file mode 100644
index b75cd5d8..00000000
--- a/src/renderer/src-auxiliary-window/components/OpggIntegrated.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div>占位</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="less" scoped></style>
diff --git a/src/renderer/src-auxiliary-window/views/opgg/Opgg.vue b/src/renderer/src-auxiliary-window/views/opgg/Opgg.vue
index 11778fea..905f5585 100644
--- a/src/renderer/src-auxiliary-window/views/opgg/Opgg.vue
+++ b/src/renderer/src-auxiliary-window/views/opgg/Opgg.vue
@@ -89,6 +89,7 @@
       />
       <OpggChampion
         v-show="currentTab === 'champion'"
+        @show-champion="(id) => handleToChampion(id)"
         :data="champion"
         :champion="championItem"
         :loading="isLoading"
diff --git a/src/renderer/src-auxiliary-window/views/opgg/OpggChampion.vue b/src/renderer/src-auxiliary-window/views/opgg/OpggChampion.vue
index 94022a61..8bae7fc7 100644
--- a/src/renderer/src-auxiliary-window/views/opgg/OpggChampion.vue
+++ b/src/renderer/src-auxiliary-window/views/opgg/OpggChampion.vue
@@ -75,7 +75,12 @@
         </div>
         <div class="card-content" v-if="!isCountersExpanded">
           <div class="counters" v-if="info && info.position">
-            <div class="counter" v-for="c of info.position.counters">
+            <div
+              class="counter"
+              v-for="c of info.position.counters"
+              :key="c.champion_id"
+              @click="() => emits('showChampion', c.champion_id)"
+            >
               <LcuImage class="image" :src="championIconUrl(c.champion_id)" />
               <div class="win-rate" title="胜率">
                 {{ ((c.win / (c.play || 1)) * 100).toFixed(2) }}%
@@ -89,9 +94,11 @@
           <div class="counters" v-if="data && data.data.counters && data.data.counters.length">
             <div
               class="counter"
+              @click="() => emits('showChampion', c.champion_id)"
               v-for="c of data.data.counters.toSorted(
                 (a: any, b: any) => b.win / (b.play || 1) - a.win / (a.play || 1)
               )"
+              :key="c.champion_id"
             >
               <LcuImage class="image" :src="championIconUrl(c.champion_id)" />
               <div class="win-rate" title="胜率" :class="{ win: c.win / (c.play || 1) > 0.5 }">
@@ -111,7 +118,7 @@
           召唤师技能
           <div>
             <NRadioGroup v-model:value="flashPosition" size="small" style="margin-right: 12px">
-              <NFlex style="gap: 4px;">
+              <NFlex style="gap: 4px">
                 <NRadio value="d" title="闪现位置默认在 D">D 闪</NRadio>
                 <NRadio value="f" title="闪现位置默认在 F">F 闪</NRadio>
                 <NRadio value="auto" title="根据当前闪现的位置决定">自动</NRadio>
@@ -229,7 +236,7 @@
             v-for="(s, i) of data.data.synergies.slice(0, isSynergiesExpanded ? Infinity : 4)"
           >
             <div class="index" style="margin-right: 4px">#{{ i + 1 }}</div>
-            <div class="image-name">
+            <div class="image-name" @click="() => emits('showChampion', s.champion_id)">
               <LcuImage class="image" :src="championIconUrl(s.champion_id)" />
               <span>{{ gameData.champions[s.champion_id]?.name || s.champion_id }}</span>
             </div>
@@ -649,6 +656,10 @@ const props = defineProps<{
   data?: any
 }>()
 
+const emits = defineEmits<{
+  (e: 'showChampion', championId: number): void
+}>()
+
 const gameflow = useGameflowStore()
 const lc = useLcuConnectionStore()
 const chat = useChatStore()
@@ -1159,6 +1170,12 @@ const handleSetRunes = async (r: {
     flex-direction: column;
     align-items: center;
     width: 46px;
+    cursor: pointer;
+    transition: filter 0.2s;
+
+    &:hover {
+      filter: brightness(1.2);
+    }
 
     .image {
       width: 32px;
@@ -1348,6 +1365,12 @@ const handleSetRunes = async (r: {
     align-items: center;
     font-size: 12px;
     gap: 4px;
+    cursor: pointer;
+    transition: filter 0.2s;
+
+    &:hover {
+      filter: brightness(1.2);
+    }
 
     .image {
       width: 24px;