From 4c15c42ebc14bb6b607cac8d4c3a45f59673e9d7 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Fri, 25 Jul 2025 00:58:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81=E7=9A=8460?=
 =?UTF-8?q?s=E5=86=B7=E5=8D=B4=F0=9F=90=B1=F0=9F=90=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axiosConfig.js                      |   4 +-
 src/components/DoubleEliminationBracket.vue | 412 ++++++++++++++++++++
 src/views/index/CompetitionDetail.vue       |   4 +-
 3 files changed, 417 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DoubleEliminationBracket.vue

diff --git a/src/api/axiosConfig.js b/src/api/axiosConfig.js
index c92bf30..3964457 100644
--- a/src/api/axiosConfig.js
+++ b/src/api/axiosConfig.js
@@ -1,8 +1,8 @@
 import axios from 'axios';
 import { logoutUser } from '../utils/jwt'; // logoutUser会处理清除存储和重定向
 
-const API_BASE_URL = 'https://api.zybdatasupport.online';
-//const API_BASE_URL = 'http://hk.zybdatasupport.online:8000/';
+//const API_BASE_URL = 'https://api.zybdatasupport.online';
+const API_BASE_URL = 'http://hk.zybdatasupport.online:8000/';
 
 const axiosInstance = axios.create({
     baseURL: API_BASE_URL,
diff --git a/src/components/DoubleEliminationBracket.vue b/src/components/DoubleEliminationBracket.vue
new file mode 100644
index 0000000..0a21e45
--- /dev/null
+++ b/src/components/DoubleEliminationBracket.vue
@@ -0,0 +1,412 @@
+<template>
+  <div class="tournament-bracket-root">
+    <h1>双败淘汰赛赛程图 (BO3)</h1>
+    <div class="container">
+      <div class="bracket-container">
+        <div ref="bracket" class="bracket"></div>
+      </div>
+    </div>
+    <div ref="finalRanking"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const totalPlayers = 8
+const sampleNames = ["小明", "小红", "小刚", "小美", "阿强", "阿花", "老李", "老王", "张三", "李四", "王五", "赵六"]
+const shuffledPlayers = sampleNames.sort(() => Math.random() - 0.5).slice(0, totalPlayers)
+
+let rounds = {
+  winners: [], // 胜者组轮次数组
+  losers: [],  // 败者组轮次数组
+  finals: []   // 决赛
+}
+
+const bracket = ref(null)
+const finalRanking = ref(null)
+
+function initWinners() {
+  const firstRound = []
+  for(let i=0; i < totalPlayers; i+=2) {
+    firstRound.push({
+      player1: shuffledPlayers[i],
+      player2: shuffledPlayers[i+1],
+      score1: 0,
+      score2: 0,
+      done: false,
+      winner: null,
+      loser: null,
+    })
+  }
+  rounds.winners.push(firstRound)
+}
+
+function getLosersRoundsCount(nPlayers) {
+  return Math.ceil(Math.log2(nPlayers)) + 1
+}
+
+function initLosers() {
+  let roundsCount = getLosersRoundsCount(totalPlayers)
+  for(let i=0; i < roundsCount; i++) {
+    rounds.losers.push([])
+  }
+}
+
+function validScore(s1, s2) {
+  if(s1 === s2) return false
+  if(s1 < 0 || s2 < 0) return false
+  if(s1 > 2 || s2 > 2) return false
+  if(s1 !== 2 && s2 !== 2) return false
+  return true
+}
+
+function generateBracket() {
+  if (!bracket.value) return
+  bracket.value.innerHTML = ''
+
+  function createRound(title, matches, type, roundIndex) {
+    const roundDiv = document.createElement('div')
+    roundDiv.className = 'round'
+
+    const titleDiv = document.createElement('div')
+    titleDiv.className = 'round-title'
+    titleDiv.textContent = title
+    roundDiv.appendChild(titleDiv)
+
+    matches.forEach((match, matchIndex) => {
+      const matchDiv = document.createElement('div')
+      matchDiv.className = 'match'
+
+      const p1 = match.player1 || '待定'
+      const p2 = match.player2 || '待定'
+
+      let p1Class = ''
+      let p2Class = ''
+      if(match.done && match.winner) {
+        if(match.winner === match.player1) p1Class = 'participant winner'
+        if(match.winner === match.player2) p2Class = 'participant winner'
+      }
+
+      const disabled = match.done ? 'disabled' : ''
+
+      matchDiv.innerHTML = `
+        <div class="participant ${p1Class}">${p1}</div>
+        <div class="participant ${p2Class}">${p2}</div>
+        <div>
+          <input type="number" min="0" max="2" class="score-input" id="${type}-${roundIndex}-${matchIndex}-score1" value="${match.score1}" ${disabled}>
+          :
+          <input type="number" min="0" max="2" class="score-input" id="${type}-${roundIndex}-${matchIndex}-score2" value="${match.score2}" ${disabled}>
+        </div>
+        <button class="score-btn" id="${type}-${roundIndex}-${matchIndex}-btn" ${disabled}>提交</button>
+      `
+      roundDiv.appendChild(matchDiv)
+
+      // 事件绑定
+      if (!match.done) {
+        setTimeout(() => {
+          const btn = document.getElementById(`${type}-${roundIndex}-${matchIndex}-btn`)
+          if (btn) {
+            btn.onclick = () => submitMatch(type, roundIndex, matchIndex)
+          }
+        }, 0)
+      }
+    })
+    return roundDiv
+  }
+
+  rounds.winners.forEach((r, i) => {
+    bracket.value.appendChild(createRound(`胜者组第 ${i+1} 轮`, r, 'winners', i))
+  })
+  rounds.losers.forEach((r, i) => {
+    bracket.value.appendChild(createRound(`败者组第 ${i+1} 轮`, r, 'losers', i))
+  })
+  if(rounds.finals.length > 0) {
+    bracket.value.appendChild(createRound('总决赛', rounds.finals, 'finals', 0))
+  }
+}
+
+function submitMatch(type, roundIndex, matchIndex) {
+  let match = rounds[type][roundIndex][matchIndex]
+  if(match.done) return
+
+  const s1 = parseInt(document.getElementById(`${type}-${roundIndex}-${matchIndex}-score1`).value)
+  const s2 = parseInt(document.getElementById(`${type}-${roundIndex}-${matchIndex}-score2`).value)
+
+  if(!validScore(s1, s2)) {
+    alert('比分无效，请输入有效的 BO3 胜场数，且双方比分不能相同。')
+    return
+  }
+
+  match.score1 = s1
+  match.score2 = s2
+  match.done = true
+
+  if(s1 > s2) {
+    match.winner = match.player1
+    match.loser = match.player2
+  } else {
+    match.winner = match.player2
+    match.loser = match.player1
+  }
+
+  if(type === 'winners') {
+    if(!rounds.winners[roundIndex+1]) rounds.winners[roundIndex+1] = []
+    addPlayerToNextRound(rounds.winners[roundIndex+1], match.winner)
+    if(!rounds.losers[roundIndex]) rounds.losers[roundIndex] = []
+    addPlayerToNextRound(rounds.losers[roundIndex], match.loser)
+  }
+  else if(type === 'losers') {
+    if(!rounds.losers[roundIndex+1]) rounds.losers[roundIndex+1] = []
+    addPlayerToNextRound(rounds.losers[roundIndex+1], match.winner)
+  }
+  else if(type === 'finals') {
+    handleFinalsResult(match)
+  }
+
+  generateBracket()
+  checkIfCanStartFinals()
+}
+
+function addPlayerToNextRound(roundMatches, player) {
+  if(!player) return
+  for(let match of roundMatches) {
+    if(!match.player1) {
+      match.player1 = player
+      match.done = false
+      match.score1 = 0
+      match.score2 = 0
+      match.winner = null
+      match.loser = null
+      return
+    }
+    if(!match.player2) {
+      match.player2 = player
+      match.done = false
+      match.score1 = 0
+      match.score2 = 0
+      match.winner = null
+      match.loser = null
+      return
+    }
+  }
+  roundMatches.push({
+    player1: player,
+    player2: null,
+    score1: 0,
+    score2: 0,
+    done: false,
+    winner: null,
+    loser: null,
+  })
+}
+
+function checkIfCanStartFinals() {
+  const winnersLastRound = rounds.winners[rounds.winners.length-1]
+  if(!winnersLastRound) return
+  if(winnersLastRound.length !== 1) return
+  if(!winnersLastRound[0].done) return
+
+  const losersLastRound = rounds.losers[rounds.losers.length-1]
+  if(!losersLastRound) return
+  if(losersLastRound.length !== 1) return
+  if(!losersLastRound[0].done) return
+
+  if(rounds.finals.length === 0) {
+    rounds.finals.push({
+      player1: winnersLastRound[0].winner,
+      player2: losersLastRound[0].winner,
+      score1: 0,
+      score2: 0,
+      done: false,
+      winner: null,
+      loser: null,
+    })
+    generateBracket()
+  }
+}
+
+function handleFinalsResult(match) {
+  if(!match.done) return
+  const champion = match.winner
+  const runnerUp = match.loser
+  if (!finalRanking.value) return
+  finalRanking.value.innerHTML = `
+    <h3>比赛结束 - 最终排名</h3>
+    <ol>
+      <li>冠军：${champion}</li>
+      <li>亚军：${runnerUp}</li>
+      <li>季军：待定（可扩展实现季军赛）</li>
+    </ol>
+  `
+}
+
+onMounted(() => {
+  initWinners()
+  initLosers()
+  generateBracket()
+})
+</script>
+
+<style scoped>
+.tournament-bracket-root {
+  font-family: Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+.tournament-bracket-root * {
+  box-sizing: border-box;
+}
+.tournament-bracket-root ul {
+  padding-left: 20px;
+  margin: 0 0 10px 0;
+}
+.tournament-bracket-root li {
+  margin-bottom: 4px;
+  list-style: disc;
+}
+.tournament-bracket-root button {
+  outline: none;
+}
+.tournament-bracket-root input[type=number]::-webkit-inner-spin-button,
+.tournament-bracket-root input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.tournament-bracket-root input[type=number] {
+  -moz-appearance: textfield;
+}
+.tournament-bracket-root h1 {
+  text-align: center;
+}
+.tournament-bracket-root .container {
+  display: flex;
+  gap: 20px;
+  align-items: flex-start;
+  min-height: 500px;
+}
+.tournament-bracket-root .control-panel {
+  flex: 1;
+  min-width: 280px;
+  background: #f0f0f0;
+  padding: 15px;
+  border-radius: 6px;
+  height: 100%;
+  box-sizing: border-box;
+}
+.tournament-bracket-root .bracket-container {
+  flex: 3;
+  position: relative;
+  overflow-x: auto;
+  background: #fff;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  min-height: 400px;
+  display: flex;
+  align-items: flex-start;
+}
+.tournament-bracket-root .bracket {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 220px;
+  gap: 40px 10px;
+  position: relative;
+  padding-bottom: 50px;
+  min-width: 600px;
+  min-height: 350px;
+}
+.tournament-bracket-root .round {
+  display: grid;
+  grid-auto-rows: 70px;
+  gap: 20px;
+}
+.tournament-bracket-root .round-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+.tournament-bracket-root .match {
+  background: #fafafa;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 8px 12px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
+  position: relative;
+  font-size: 14px;
+}
+.tournament-bracket-root .participant {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  cursor: default;
+  user-select: none;
+}
+.tournament-bracket-root .participant.winner {
+  font-weight: bold;
+  color: #2a7f2a;
+}
+.tournament-bracket-root .score-input {
+  width: 40px;
+  font-size: 14px;
+  padding: 2px 4px;
+  margin-left: 6px;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+.tournament-bracket-root .score-btn {
+  margin-top: 4px;
+  width: 100%;
+  background: #007acc;
+  border: none;
+  color: white;
+  font-weight: bold;
+  padding: 6px 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.tournament-bracket-root .score-btn:disabled {
+  background: #aaa;
+  cursor: not-allowed;
+}
+.tournament-bracket-root #finalRanking {
+  margin-top: 15px;
+  background: #fffbdb;
+  border: 1px solid #f0e68c;
+  padding: 12px;
+  border-radius: 6px;
+}
+.tournament-bracket-root svg.bracket-lines {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  pointer-events: none;
+  overflow: visible;
+  height: 100%;
+  width: 100%;
+}
+.tournament-bracket-root svg.bracket-lines path {
+  stroke: #666;
+  fill: none;
+  stroke-width: 2;
+}
+.tournament-bracket-root .tournament-info {
+  margin-bottom: 15px;
+  padding: 10px;
+  background: #e6f7ff;
+  border-radius: 4px;
+}
+.tournament-bracket-root .loading {
+  color: #666;
+  font-style: italic;
+}
+.tournament-bracket-root select {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/index/CompetitionDetail.vue b/src/views/index/CompetitionDetail.vue
index 6d8f474..13a9892 100644
--- a/src/views/index/CompetitionDetail.vue
+++ b/src/views/index/CompetitionDetail.vue
@@ -75,8 +75,9 @@
           v-if="competition.status === 'finish'"
           :tournament-id="parseInt(route.query.id)"
         />
+        <DoubleEliminationBracket v-if="competition.format === '双败淘汰' && competition.status === 'starting'" />
         <tournament-bracket
-          v-if="competition.status === 'starting'"
+          v-else-if="competition.status === 'starting'"
           :tournament-id="parseInt(route.query.id)"
           @refreshPlayers="fetchRegisteredPlayers"
         />
@@ -217,6 +218,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import TournamentBracket from '@/components/TournamentBracket.vue'
 import RankContestant from '@/components/RankContestant.vue'
+import DoubleEliminationBracket from '@/components/DoubleEliminationBracket.vue'
 import {
   getTournamentList,
   updateTournament,