优化

web/src/views/games.vue

@@ -6,7 +6,7 @@ import { message } from 'ant-design-vue';
 import { ReloadOutlined, PlusOutlined, LinkOutlined, DisconnectOutlined } from '@ant-design/icons-vue';
 
 const search = ref('');
-const games = ref(null);
+// const games = ref(null);
 const gamesRelations = ref([]);
 const selectedGames = reactive({
   polymarket: null,
@@ -17,49 +17,49 @@ const onSearch = (value) => {
   search.value = value;
 };
 
-const updateGames = async () => {
-  return axios.get('/api/games/get_games').then(res => {
-    if (res.data.statusCode === 200) {
-      games.value = res.data.data;
-    }
-    else {
-      throw new Error(res.data.message);
-    }
-  })
-  .catch(err => {
-    message.error(err.response?.data?.message ?? err.message);
-    console.error(err);
-  });
-};
+// const updateGames = async () => {
+//   return axios.get('/api/games/get_games').then(res => {
+//     if (res.data.statusCode === 200) {
+//       games.value = res.data.data;
+//     }
+//     else {
+//       throw new Error(res.data.message);
+//     }
+//   })
+//   .catch(err => {
+//     message.error(err.response?.data?.message ?? err.message);
+//     console.error(err);
+//   });
+// };
 
-const selectGame = (type, game) => {
-  const { id, leagueId, leagueName, teamHomeName, teamAwayName, timestamp } = game;
-  const currentGames = { id, leagueId, leagueName, teamHomeName, teamAwayName, timestamp };
-  if (type === 'polymarket') {
-    if (selectedGames.polymarket?.id === id) {
-      selectedGames.polymarket = null;
-    }
-    else {
-      selectedGames.polymarket = currentGames;
-    }
-  }
-  else if (type === 'pinnacle') {
-    if (selectedGames.pinnacle?.id === id) {
-      selectedGames.pinnacle = null;
-    }
-    else {
-      selectedGames.pinnacle = currentGames;
-    }
-  }
-  else {
-    throw new Error('invalid type');
-  }
-}
+// const selectGame = (type, game) => {
+//   const { id, leagueId, leagueName, teamHomeName, teamAwayName, timestamp } = game;
+//   const currentGames = { id, leagueId, leagueName, teamHomeName, teamAwayName, timestamp };
+//   if (type === 'polymarket') {
+//     if (selectedGames.polymarket?.id === id) {
+//       selectedGames.polymarket = null;
+//     }
+//     else {
+//       selectedGames.polymarket = currentGames;
+//     }
+//   }
+//   else if (type === 'pinnacle') {
+//     if (selectedGames.pinnacle?.id === id) {
+//       selectedGames.pinnacle = null;
+//     }
+//     else {
+//       selectedGames.pinnacle = currentGames;
+//     }
+//   }
+//   else {
+//     throw new Error('invalid type');
+//   }
+// }
 
-const resetSelectedGames = () => {
-  selectedGames.polymarket = null;
-  selectedGames.pinnacle = null;
-}
+// const resetSelectedGames = () => {
+//   selectedGames.polymarket = null;
+//   selectedGames.pinnacle = null;
+// }
 
 const setGamesRelation = () => {
   if (!selectedGames.polymarket || !selectedGames.pinnacle) {
@@ -79,7 +79,7 @@ const setGamesRelation = () => {
     else {
       throw new Error(res.data.message);
     }
-    resetSelectedGames();
+    // resetSelectedGames();
     return refresh();
   })
   .then(() => {
@@ -127,42 +127,43 @@ const updateGamesRelations = async () => {
 };
 
 const refresh = async () => {
-  return Promise.all([updateGames(), updateGamesRelations()]);
+  return updateGamesRelations();
+  // return Promise.all([updateGames(), updateGamesRelations()]);
 }
 
-const getGames = (platform) => {
-  const searchValue = search.value.trim().toLowerCase();
-  return games.value?.[platform].map(item => {
-    const { id, timestamp } = item;
-    let selected = false;
-    let disabeld = false;
-    if (selectedGames[platform]?.id === id) {
-      selected = true;
-    }
-    if (gamesRelations.value.some(relation => relation.platforms[platform]?.id === id)) {
-      disabeld = true;
-    }
-    const dateTime = dayjs(timestamp).format('MM-DD HH:mm');
-    return { ...item, selected, disabeld, dateTime };
-  }).filter(item => {
-    const { disabeld, leagueName, teamHomeName, teamAwayName, localesLeagueName, localesTeamHomeName, localesTeamAwayName } = item;
-    return !disabeld && (!searchValue
-      || leagueName?.toLowerCase().includes(searchValue)
-      || localesLeagueName?.toLowerCase().includes(searchValue)
-      || teamHomeName?.toLowerCase().includes(searchValue)
-      || localesTeamHomeName?.toLowerCase().includes(searchValue)
-      || teamAwayName?.toLowerCase().includes(searchValue)
-      || localesTeamAwayName?.toLowerCase().includes(searchValue));
-  }) ?? [];
-}
+// const getGames = (platform) => {
+//   const searchValue = search.value.trim().toLowerCase();
+//   return games.value?.[platform].map(item => {
+//     const { id, timestamp } = item;
+//     let selected = false;
+//     let disabeld = false;
+//     if (selectedGames[platform]?.id === id) {
+//       selected = true;
+//     }
+//     if (gamesRelations.value.some(relation => relation.platforms[platform]?.id === id)) {
+//       disabeld = true;
+//     }
+//     const dateTime = dayjs(timestamp).format('MM-DD HH:mm');
+//     return { ...item, selected, disabeld, dateTime };
+//   }).filter(item => {
+//     const { disabeld, leagueName, teamHomeName, teamAwayName, localesLeagueName, localesTeamHomeName, localesTeamAwayName } = item;
+//     return !disabeld && (!searchValue
+//       || leagueName?.toLowerCase().includes(searchValue)
+//       || localesLeagueName?.toLowerCase().includes(searchValue)
+//       || teamHomeName?.toLowerCase().includes(searchValue)
+//       || localesTeamHomeName?.toLowerCase().includes(searchValue)
+//       || teamAwayName?.toLowerCase().includes(searchValue)
+//       || localesTeamAwayName?.toLowerCase().includes(searchValue));
+//   }) ?? [];
+// }
 
-const polymarketGames = computed(() => {
-  return getGames('polymarket');
-});
+// const polymarketGames = computed(() => {
+//   return getGames('polymarket');
+// });
 
-const pinnacleGames = computed(() => {
-  return getGames('pinnacle');
-});
+// const pinnacleGames = computed(() => {
+//   return getGames('pinnacle');
+// });
 
 const gamesRelationsFiltered = computed(() => {
   const searchValue = search.value.trim().toLowerCase();
@@ -217,7 +218,7 @@ onUnmounted(() => {
   </a-page-header>
 
   <div class="games-container">
-    <div class="games-column polymarket">
+    <!-- <div class="games-column polymarket">
       <h3>Polymarket 比赛 ({{ polymarketGames.length }})</h3>
       <a-list item-layout="horizontal" :data-source="polymarketGames" size="small">
         <template #renderItem="{ item }">
@@ -246,29 +247,29 @@ onUnmounted(() => {
           </a-list-item>
         </template>
       </a-list>
-    </div>
+    </div> -->
     <div class="games-column relations">
       <h3>已添加的比赛 ({{ gamesRelationsFiltered.length }})</h3>
-      <a-list item-layout="horizontal" :data-source="gamesRelationsFiltered" size="small">
+      <a-list class="relations-list" item-layout="horizontal" :data-source="gamesRelationsFiltered" size="small">
         <template #renderItem="{ item }">
           <a-list-item>
             <div class="game-info">
-              <div class="game-league-name">{{ item.platforms.polymarket.leagueName }}</div>
+              <div class="game-league-name"><em>PM</em>{{ item.platforms.polymarket.leagueName }}</div>
               <div class="game-team-name home-team-name">{{ item.platforms.polymarket.teamHomeName }}</div>
               <div class="game-team-name away-team-name">{{ item.platforms.polymarket.teamAwayName }}</div>
             </div>
             <div class="game-info">
-              <div class="game-league-name">{{ item.platforms.pinnacle?.leagueName }}</div>
+              <div class="game-league-name"><em>PC</em>{{ item.platforms.pinnacle?.leagueName }}</div>
               <div class="game-team-name home-team-name">{{ item.platforms.pinnacle?.teamHomeName }}</div>
               <div class="game-team-name away-team-name">{{ item.platforms.pinnacle?.teamAwayName }}</div>
             </div>
             <div class="game-info">
-              <div class="game-league-name">{{ item.platforms.huangguan?.leagueName }}</div>
+              <div class="game-league-name"><em>HG</em>{{ item.platforms.huangguan?.leagueName }}</div>
               <div class="game-team-name home-team-name">{{ item.platforms.huangguan?.teamHomeName }}</div>
               <div class="game-team-name away-team-name">{{ item.platforms.huangguan?.teamAwayName }}</div>
             </div>
             <div class="game-info">
-              <div class="game-league-name">{{ item.platforms.obsports?.leagueName }}</div>
+              <div class="game-league-name"><em>OB</em>{{ item.platforms.obsports?.leagueName }}</div>
               <div class="game-team-name home-team-name">{{ item.platforms.obsports?.teamHomeName }}</div>
               <div class="game-team-name away-team-name">{{ item.platforms.obsports?.teamAwayName }}</div>
             </div>
@@ -318,39 +319,39 @@ onUnmounted(() => {
   flex: 2.5;
   border-right: 0 none;
 }
-.ant-list {
+.relations-list {
   max-height: calc(100vh - 196px);
   overflow: auto;
   border: 1px solid rgba(5, 5, 5, 0.06);
   border-radius: 0 0 8px 8px;
-}
-.ant-list-item {
-  &:hover {
-    background-color: #fafafa;
-    .remove-button {
-      visibility: visible;
+  .ant-list-item {
+    &:hover {
+      background-color: #fafafa;
+      .remove-button {
+        visibility: visible;
+      }
     }
-  }
-  &.selected {
-    background-color: #e6f7ff;
-  }
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  .remove-button {
-    visibility: hidden;
-    .anticon-disconnect {
-      display: none;
+    &.selected {
+      background-color: #e6f7ff;
     }
-    &:hover {
-      color: #f5222d;
-      .anticon-link {
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .remove-button {
+      visibility: hidden;
+      .anticon-disconnect {
         display: none;
       }
-      .anticon-disconnect {
-        margin-inline-start: 0;
-        display: inline-block;
+      &:hover {
+        color: #f5222d;
+        .anticon-link {
+          display: none;
+        }
+        .anticon-disconnect {
+          margin-inline-start: 0;
+          display: inline-block;
+        }
       }
     }
   }
@@ -363,7 +364,19 @@ onUnmounted(() => {
   }
 }
 .game-league-name {
+  display: flex;
+  align-items: center;
   font-size: 16px;
+  em {
+    display: inline-block;
+    height: 14px;
+    margin-right: 4px;
+    padding: 0 4px;
+    line-height: 14px;
+    font-size: 12px;
+    border-radius: 3px;
+    background: #d7e9ff;
+  }
 }
 .game-team-name {
   color: #666;