From b706598b9fd070b8dca211483542cd10898f7a62 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Mon, 19 May 2025 11:14:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TournamentBracket.vue | 204 +++++++++++++++++++++++++++
 src/utils/http.js                    |   0
 src/views/backend/Dashboard.vue      |  35 +++++
 3 files changed, 239 insertions(+)
 create mode 100644 src/components/TournamentBracket.vue
 create mode 100644 src/utils/http.js
 create mode 100644 src/views/backend/Dashboard.vue

diff --git a/src/components/TournamentBracket.vue b/src/components/TournamentBracket.vue
new file mode 100644
index 0000000..dcd3b2a
--- /dev/null
+++ b/src/components/TournamentBracket.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="tournament-container">
+    <bracket :rounds="rounds">
+      <template #player="{ player }">
+        <div class="custom-node" :class="{ 'winner': player.winner }">
+          <div class="node-content">
+            <span class="team-name">{{ player.name }}</span>
+            <span class="team-score">{{ player.score || 0 }}</span>
+          </div>
+        </div>
+      </template>
+    </bracket>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Bracket from 'vue-tournament-bracket'
+
+// 示例数据
+const rounds = ref([
+  // 半决赛
+  {
+    games: [
+      {
+        player1: { id: "1", name: "战队 A", score: 2, winner: true },
+        player2: { id: "2", name: "战队 B", score: 1, winner: false }
+      },
+      {
+        player1: { id: "3", name: "战队 C", score: 0, winner: false },
+        player2: { id: "4", name: "战队 D", score: 2, winner: true }
+      }
+    ]
+  },
+  // 决赛
+  {
+    games: [
+      {
+        player1: { id: "1", name: "战队 A", score: 3, winner: true },
+        player2: { id: "4", name: "战队 D", score: 1, winner: false }
+      }
+    ]
+  }
+])
+</script>
+
+<style scoped>
+.tournament-container {
+  min-height: 400px;
+  overflow-x: auto;
+  background: transparent;
+}
+
+:deep(.vtb-wrapper),
+:deep(.vtb-item),
+:deep(.vtb-item-parent),
+:deep(.vtb-item-players),
+:deep(.vtb-item-children),
+:deep(.vtb-item-child),
+:deep(.custom-node),
+:deep(.custom-node.winner) {
+  background: transparent !important;
+}
+
+:deep(.vtb-wrapper) {
+  display: flex;
+  padding: 20px 40px;
+}
+
+:deep(.vtb-item) {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+:deep(.vtb-item-parent) {
+  position: relative;
+  margin-left: 50px;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.vtb-item-players) {
+  flex-direction: column;
+  margin: 0;
+}
+
+:deep(.vtb-player) {
+  padding: 10px 16px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(143, 143, 143, 0.3);
+  color: #333;
+  border-radius: 24px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+:deep(.vtb-player:hover) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-color: rgba(143, 143, 143, 0.5);
+}
+
+:deep(.vtb-player.winner) {
+  border: 1px solid rgba(129, 199, 132, 0.5);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 2px 8px rgba(129, 199, 132, 0.15);
+}
+
+:deep(.vtb-player.winner:hover) {
+  border-color: rgba(129, 199, 132, 0.8);
+  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.2);
+}
+
+:deep(.vtb-item-children) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+:deep(.vtb-item-child) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  margin: 12px 0;
+  position: relative;
+}
+
+.node-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(143, 143, 143, 0.3);
+  color: #333;
+  padding: 10px 16px;
+  border-radius: 24px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(8px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+.node-content:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-color: rgba(143, 143, 143, 0.5);
+}
+
+.custom-node.winner .node-content {
+  border: 1px solid rgba(129, 199, 132, 0.5);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 2px 8px rgba(129, 199, 132, 0.15);
+}
+
+.custom-node.winner .node-content:hover {
+  border-color: rgba(129, 199, 132, 0.8);
+  box-shadow: 0 4px 12px rgba(129, 199, 132, 0.2);
+}
+
+.team-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  letter-spacing: 0.3px;
+}
+
+.team-score {
+  font-weight: 600;
+  min-width: 24px;
+  text-align: center;
+  margin-left: 16px;
+  color: #333;
+  padding: 2px 8px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+}
+
+:deep(.vtb-player.winner) .team-score,
+.custom-node.winner .team-score {
+  background: rgba(129, 199, 132, 0.1);
+  color: #2e7d32;
+}
+
+@media (max-width: 768px) {
+  :deep(.vtb-wrapper) {
+    padding: 10px;
+  }
+  
+  :deep(.vtb-player),
+  .node-content {
+    padding: 8px 12px;
+  }
+  
+  .team-name {
+    font-size: 13px;
+  }
+  
+  .team-score {
+    min-width: 20px;
+    margin-left: 12px;
+    padding: 1px 6px;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/backend/Dashboard.vue b/src/views/backend/Dashboard.vue
new file mode 100644
index 0000000..dc4961c
--- /dev/null
+++ b/src/views/backend/Dashboard.vue
@@ -0,0 +1,35 @@
+<template>
+
+      <button @click="handleLogout">
+        退出登录
+      </button>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const hasToken = ref(false)
+
+onMounted(() => {
+  // 检查是否有token
+  const token = localStorage.getItem('access_token')
+  hasToken.value = !!token
+  console.log('检测到token')
+  if (!token) {
+    console.log('未检测到token')
+  }
+})
+
+const handleLogout = () => {
+  // 清除本地存储的 token
+  localStorage.removeItem('access_token')
+  // 跳转到登录页面
+  router.push('/backend/login')
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file