From 1977b791e564cae2211547f68137e70abe30c907 Mon Sep 17 00:00:00 2001
From: Kunagisa <1549184870@qq.com>
Date: Tue, 29 Jul 2025 16:15:54 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E8=B5=9B=E4=BA=8B=E7=9A=84?=
 =?UTF-8?q?=E6=A0=91=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |  421 +++++
 package.json                                |    1 +
 src/components/DoubleEliminationBracket.vue | 1578 ++++++++++++++-----
 src/components/TournamentBracket.vue        |  639 +++++---
 src/router/index.js                         |   52 +-
 src/views/competition/Competition.vue       |  264 +++-
 src/views/index/CompetitionDetail.vue       |    5 +-
 src/views/index/Home.vue                    |   56 +-
 8 files changed, 2358 insertions(+), 658 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 86346f2..b7f5f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.9.0",
+        "d3": "^7.9.0",
         "jszip": "^3.10.1",
         "process": "^0.11.10",
         "vue": "^3.5.13",
@@ -1579,6 +1580,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1635,6 +1644,376 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmmirror.com/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmmirror.com/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmmirror.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmmirror.com/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.0.tgz",
@@ -1692,6 +2071,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2103,6 +2490,17 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz",
@@ -2113,6 +2511,14 @@
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/is-docker/-/is-docker-3.0.0.tgz",
@@ -2556,6 +2962,11 @@
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "node_modules/rollup": {
       "version": "4.40.1",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.1.tgz",
@@ -2607,11 +3018,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmmirror.com/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 6b50ddd..3141d50 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.9.0",
+    "d3": "^7.9.0",
     "jszip": "^3.10.1",
     "process": "^0.11.10",
     "vue": "^3.5.13",
diff --git a/src/components/DoubleEliminationBracket.vue b/src/components/DoubleEliminationBracket.vue
index f597baa..af630d3 100644
--- a/src/components/DoubleEliminationBracket.vue
+++ b/src/components/DoubleEliminationBracket.vue
@@ -4,23 +4,15 @@
     <div class="container">
       <!-- 控制面板 -->
       <div class="control-panel">
-        <h2>选择比赛</h2>
         <div class="tournament-info">
-          <select v-model="selectedTournamentId" @change="handleTournamentChange">
-            <option value="">-- 请选择比赛 --</option>
-            <option v-for="tournament in tournaments" :key="tournament.id" :value="tournament.id">
-              {{ tournament.name }}
-            </option>
-          </select>
-          <div v-if="selectedTournamentId">
-            <strong>已选择:</strong> {{ selectedTournamentName }}
+          <div>
+            <strong>当前比赛:</strong> {{ tournament.name || '加载中...' }}
           </div>
         </div>
 
         <h2>参赛者列表</h2>
         <div id="player-list">
-          <div v-if="!selectedTournamentId" class="loading">请先选择比赛</div>
-          <div v-else-if="loading" class="loading">加载中...</div>
+          <div v-if="loading" class="loading">加载中...</div>
           <div v-else>
             <p v-if="participants.length === 0">暂无参赛者</p>
             <template v-else>
@@ -38,165 +30,354 @@
         <button @click="generateDoubleEliminationBracket" :disabled="!canGenerateBracket">
           生成双败淘汰赛程
         </button>
-      </div>
 
-      <!-- 胜者组 -->
-      <div class="bracket-section">
-        <h2>胜者组</h2>
-        <ul>
-          <li v-for="(round, rIndex) in winnersBracket" :key="'w-' + rIndex">
-            <h3>胜者组 - 第 {{ rIndex + 1 }} 轮</h3>
-            <ul>
-              <li v-for="(match, mIndex) in round" :key="'w-' + rIndex + '-' + mIndex">
-                <div class="match">
-                  <div class="participant" :class="{ winner: match.winner && match.participant1 && match.winner.id === match.participant1.id }">
-                    {{ match.participant1 ? match.participant1.name : '轮空' }}
-                    <input type="number" v-model.number="match.score1" :disabled="match.decided || !match.participant1 || !match.participant2" placeholder="0">
-                  </div>
-                  <div class="participant" :class="{ winner: match.winner && match.participant2 && match.winner.id === match.participant2.id }">
-                    {{ match.participant2 ? match.participant2.name : '轮空' }}
-                    <input type="number" v-model.number="match.score2" :disabled="match.decided || !match.participant1 || !match.participant2" placeholder="0">
-                  </div>
-                  <button @click="confirmScore(match, 'winners', rIndex, mIndex)" :disabled="match.decided || !match.participant1 || !match.participant2">
-                    确认比分
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-
-      <!-- 败者组 -->
-      <div class="bracket-section">
-        <h2>败者组</h2>
-        <ul>
-          <li v-for="(round, rIndex) in losersBracket" :key="'l-' + rIndex">
-            <h3>败者组 - 第 {{ rIndex + 1 }} 轮</h3>
-            <ul>
-              <li v-for="(match, mIndex) in round" :key="'l-' + rIndex + '-' + mIndex">
-                <div class="match">
-                  <div class="participant" :class="{ winner: match.winner && match.participant1 && match.winner.id === match.participant1.id }">
-                    {{ match.participant1 ? match.participant1.name : '轮空' }}
-                    <input type="number" v-model.number="match.score1" :disabled="match.decided || !match.participant1 || !match.participant2" placeholder="0">
-                  </div>
-                  <div class="participant" :class="{ winner: match.winner && match.participant2 && match.winner.id === match.participant2.id }">
-                    {{ match.participant2 ? match.participant2.name : '轮空' }}
-                    <input type="number" v-model.number="match.score2" :disabled="match.decided || !match.participant1 || !match.participant2" placeholder="0">
-                  </div>
-                  <button @click="confirmScore(match, 'losers', rIndex, mIndex)" :disabled="match.decided || !match.participant1 || !match.participant2">
-                    确认比分
-                  </button>
-                </div>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-
-      <!-- 决赛 -->
-      <div class="bracket-section" v-if="finalMatch">
-        <h2>决赛 (BO5)</h2>
-        <div class="match">
-          <div class="participant" :class="{ winner: finalMatch.decided && finalMatch.score1 > finalMatch.score2 }">
-            {{ finalMatch.participant1 ? finalMatch.participant1.name : '待定' }}
-            <input type="number" v-model.number="finalMatch.score1" :disabled="finalMatch.decided" placeholder="0">
-          </div>
-          <div class="participant" :class="{ winner: finalMatch.decided && finalMatch.score2 > finalMatch.score1 }">
-            {{ finalMatch.participant2 ? finalMatch.participant2.name : '待定' }}
-            <input type="number" v-model.number="finalMatch.score2" :disabled="finalMatch.decided" placeholder="0">
-          </div>
-          <button @click="confirmFinal" :disabled="finalMatch.decided">确认决赛比分</button>
-        </div>
-        
-        <div v-if="finalMatch.decided" class="final-ranking">
+        <div v-if="champion" class="final-ranking">
           <h3>最终排名</h3>
           <p v-if="champion">🏆 冠军: {{ champion }}</p>
           <p v-if="runnerUp">🥈 亚军: {{ runnerUp }}</p>
           <p v-if="thirdPlace">🥉 季军: {{ thirdPlace }}</p>
         </div>
       </div>
+
+      <!-- 比赛对战表 -->
+      <div class="bracket-main">
+        <!-- 胜者组 -->
+        <div class="bracket-section">
+          <h2>胜者组</h2>
+          <div class="bracket-container" id="winnersBracketContainer">
+            <div class="zoom-controls">
+              <button class="zoom-btn" @click="zoomInWinners" title="放大 (+)">+</button>
+              <button class="zoom-btn" @click="zoomOutWinners" title="缩小 (-)">-</button>
+              <button class="zoom-btn" @click="resetZoomWinners" title="重置视图 (0)">⌂</button>
+            </div>
+            <div class="interaction-hint" v-if="winnersBracket.length > 0">
+              <span>💡 拖拽移动 | 滚轮缩放 | 快捷键: +放大 -缩小 0重置</span>
+            </div>
+            <svg id="d3-winners-bracket" class="d3-bracket"></svg>
+          </div>
+        </div>
+
+        <!-- 败者组 -->
+        <div class="bracket-section">
+          <h2>败者组</h2>
+          <div class="bracket-container" id="losersBracketContainer">
+            <div class="zoom-controls">
+              <button class="zoom-btn" @click="zoomInLosers" title="放大 (+)">+</button>
+              <button class="zoom-btn" @click="zoomOutLosers" title="缩小 (-)">-</button>
+              <button class="zoom-btn" @click="resetZoomLosers" title="重置视图 (0)">⌂</button>
+            </div>
+            <div class="interaction-hint" v-if="losersBracket.length > 0">
+              <span>💡 拖拽移动 | 滚轮缩放 | 快捷键: +放大 -缩小 0重置</span>
+            </div>
+            <svg id="d3-losers-bracket" class="d3-bracket"></svg>
+          </div>
+        </div>
+
+        <!-- 决赛 -->
+        <div class="bracket-section" v-if="finalMatch">
+          <h2>决赛 (BO5)</h2>
+          <div class="final-match-container">
+            <div class="final-match">
+              <div class="participant" :class="{ winner: finalMatch.decided && finalMatch.score1 > finalMatch.score2 }">
+                <span>{{ finalMatch.participant1 ? finalMatch.participant1.name : '待定' }}</span>
+                <input type="number" v-model.number="finalMatch.score1" :disabled="finalMatch.decided" placeholder="0">
+              </div>
+              <div class="participant" :class="{ winner: finalMatch.decided && finalMatch.score2 > finalMatch.score1 }">
+                <span>{{ finalMatch.participant2 ? finalMatch.participant2.name : '待定' }}</span>
+                <input type="number" v-model.number="finalMatch.score2" :disabled="finalMatch.decided" placeholder="0">
+              </div>
+              <button @click="confirmFinal" :disabled="finalMatch.decided">确认决赛比分</button>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import { getSignUpResultList, updateSignUpResult, getTournamentList } from '@/api/tournament';
+import * as d3 from 'd3';
 
-export default {
-  data() {
-    return {
-      selectedTournamentId: '',
-      selectedTournamentName: '',
-      tournaments: [],
-      participants: [],
-      winnersBracket: [],
-      losersBracket: [],
-      finalMatch: null,
-      champion: null,
-      runnerUp: null,
-      thirdPlace: null,
-      loading: false,
-      pointsMultiplier: {
-        winners: 1,
-        losers: 0.5
-      }
-    };
-  },
-  computed: {
-    canGenerateBracket() {
-      return this.participants.length >= 4;
+const props = defineProps({
+  tournamentId: {
+    type: Number,
+    required: true
+  }
+});
+
+const tournament = ref({
+  id: props.tournamentId,
+  name: ''
+});
+
+const participants = ref([]);
+const winnersBracket = ref([]);
+const losersBracket = ref([]);
+const finalMatch = ref(null);
+const champion = ref(null);
+const runnerUp = ref(null);
+const thirdPlace = ref(null);
+const loading = ref(false);
+
+// Store zoom behaviors for both brackets
+let winnersZoomBehavior = null;
+let winnerssvgSelection = null;
+let losersZoomBehavior = null;
+let loserssvgSelection = null;
+
+const canGenerateBracket = computed(() => {
+  return participants.value.length >= 4;
+});
+
+onMounted(() => {
+  loadTournamentData();
+  
+  // Add keyboard shortcuts for zoom control
+  const handleKeydown = (event) => {
+    if (event.target.tagName === 'INPUT') return;
+    
+    switch(event.key) {
+      case '+':
+      case '=':
+        event.preventDefault();
+        if (event.ctrlKey) {
+          zoomInLosers();
+        } else {
+          zoomInWinners();
+        }
+        break;
+      case '-':
+        event.preventDefault();
+        if (event.ctrlKey) {
+          zoomOutLosers();
+        } else {
+          zoomOutWinners();
+        }
+        break;
+      case '0':
+        event.preventDefault();
+        if (event.ctrlKey) {
+          resetZoomLosers();
+        } else {
+          resetZoomWinners();
+        }
+        break;
     }
-  },
-  mounted() {
-    this.fetchTournamentList();
-  },
-  methods: {
-    async fetchTournamentList() {
-      try {
-        const data = await getTournamentList();
-        this.tournaments = data;
-      } catch (err) {
-        console.error('获取比赛列表失败:', err);
-      }
-    },
-    async handleTournamentChange() {
-      if (!this.selectedTournamentId) {
-        this.selectedTournamentName = '';
-        this.participants = [];
-        return;
-      }
+  };
+  
+  document.addEventListener('keydown', handleKeydown);
+  
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeydown);
+    const winnersSvg = d3.select('#d3-winners-bracket');
+    const losersSvg = d3.select('#d3-losers-bracket');
+    if (winnersSvg.node()) winnersSvg.selectAll('*').remove();
+    if (losersSvg.node()) losersSvg.selectAll('*').remove();
+  });
+});
 
-      const selected = this.tournaments.find(t => t.id === this.selectedTournamentId);
-      this.selectedTournamentName = selected ? selected.name : '';
-      this.loadParticipants();
-    },
-    async loadParticipants() {
-      this.loading = true;
-      try {
-        const data = await getSignUpResultList();
-        const filtered = data.filter(item => item.tournament_id == this.selectedTournamentId);
-        this.participants = filtered.map(item => ({
-          id: item.id,
-          name: item.sign_name,
-          team_name: item.team_name || '',
-          win: item.win || '0',
-          lose: item.lose || '0',
-          qq_code: item.qq_code || '',
-          status: item.status || ''
-        }));
-      } catch (err) {
-        console.error('获取参赛者失败:', err);
-      } finally {
-        this.loading = false;
+const loadTournamentData = async () => {
+  if (!props.tournamentId) return;
+  
+  loading.value = true;
+  tournament.value.id = props.tournamentId;
+  
+  try {
+    const tournaments = await getTournamentList();
+    const selectedTournament = tournaments.find(t => t.id === props.tournamentId);
+    if (selectedTournament) {
+      tournament.value.name = selectedTournament.name;
+    }
+    
+    const data = await getSignUpResultList();
+    const filtered = data.filter(item => item.tournament_id == props.tournamentId);
+    participants.value = filtered.map(item => ({
+      id: item.id,
+      name: item.sign_name,
+      team_name: item.team_name || '',
+      win: item.win || '0',
+      lose: item.lose || '0',
+      qq_code: item.qq_code || '',
+      status: item.status || ''
+    }));
+  } catch (err) {
+    console.error('获取比赛数据失败:', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const generateDoubleEliminationBracket = () => {
+  // 重置所有状态
+  winnersBracket.value = [];
+  losersBracket.value = [];
+  finalMatch.value = null;
+  champion.value = runnerUp.value = thirdPlace.value = null;
+  
+  const totalPlayers = participants.value.length;
+  if (totalPlayers < 4) {
+    alert('双败淘汰赛至少需要4名参赛者');
+    return;
+  }
+  
+  // 计算需要的总槽位数（最近的2的幂）
+  const totalSlots = Math.pow(2, Math.ceil(Math.log2(totalPlayers)));
+  const shuffledParticipants = [...participants.value].sort(() => Math.random() - 0.5);
+  
+  // 填充到总槽位数，剩余位置为null（轮空）
+  while (shuffledParticipants.length < totalSlots) {
+    shuffledParticipants.push(null);
+  }
+  
+  console.log(`总参赛者: ${totalPlayers}, 总槽位: ${totalSlots}`);
+  
+  // 生成胜者组第一轮
+  const winnersRound1 = [];
+  for (let i = 0; i < totalSlots; i += 2) {
+    const p1 = shuffledParticipants[i];
+    const p2 = shuffledParticipants[i + 1];
+    
+    // 处理轮空情况
+    let winner = null;
+    let decided = false;
+    let score1 = 0;
+    let score2 = 0;
+    
+    if (p1 && !p2) {
+      // p1轮空直接晋级
+      winner = p1;
+      decided = true;
+      score1 = 1;
+      score2 = 0;
+      console.log(`${p1.name} 轮空直接晋级`);
+    } else if (!p1 && p2) {
+      // p2轮空直接晋级
+      winner = p2;
+      decided = true;
+      score1 = 0;
+      score2 = 1;
+      console.log(`${p2.name} 轮空直接晋级`);
+    } else if (!p1 && !p2) {
+      // 双轮空，无人晋级
+      winner = null;
+      decided = true;
+      score1 = 0;
+      score2 = 0;
+      console.log('双轮空，无人晋级');
+    }
+    
+    winnersRound1.push({
+      participant1: p1,
+      participant2: p2,
+      score1: score1,
+      score2: score2,
+      decided: decided,
+      winner: winner,
+      loser: null // 轮空情况下没有败者
+    });
+  }
+  winnersBracket.value = [winnersRound1];
+  
+  // 预生成胜者组的所有轮次结构
+  let currentRoundSize = Math.ceil(totalSlots / 2);
+  while (currentRoundSize > 1) {
+    currentRoundSize = Math.ceil(currentRoundSize / 2);
+    const nextRound = [];
+    for (let i = 0; i < currentRoundSize; i++) {
+      nextRound.push({
+        participant1: null,
+        participant2: null,
+        score1: 0,
+        score2: 0,
+        decided: false,
+        winner: null,
+        loser: null
+      });
+    }
+    if (currentRoundSize > 0) {
+      winnersBracket.value.push(nextRound);
+    }
+  }
+  
+  console.log(`胜者组轮次数: ${winnersBracket.value.length}`);
+  
+  // 预生成败者组结构
+  generateLosersBracketStructure(totalPlayers);
+  
+  // 处理第一轮的轮空晋级
+  winnersRound1.forEach((match, index) => {
+    if (match.decided && match.winner) {
+      // 轮空获胜者直接晋级到胜者组下一轮
+      handleWinnersBracketAdvancement(match, 0, index);
+    }
+  });
+  
+  nextTick(() => {
+    drawD3WinnersBracket();
+    drawD3LosersBracket();
+  });
+};
+
+// 生成败者组结构 - 根据标准双败逻辑
+const generateLosersBracketStructure = (totalPlayers) => {
+  const winnersRounds = winnersBracket.value.length;
+  losersBracket.value = [];
+  
+  // 标准双败淘汰赛败者组结构：
+  // 计算实际的参赛者数量和轮空数量
+  const totalSlots = Math.pow(2, Math.ceil(Math.log2(totalPlayers)));
+  const byeCount = totalSlots - totalPlayers;
+  
+  console.log(`总人数: ${totalPlayers}, 总槽位: ${totalSlots}, 轮空数: ${byeCount}`);
+  
+  // 败者组轮次数计算：考虑轮空影响
+  let losersRounds;
+  if (winnersRounds === 1) {
+    losersRounds = 0; // 2人比赛无败者组
+  } else if (totalPlayers <= 4) {
+    losersRounds = 2; // 4人或5人比赛，败者组2轮
+  } else {
+    losersRounds = (winnersRounds - 1) * 2;
+  }
+  
+  console.log(`胜者组轮次: ${winnersRounds}, 败者组轮次: ${losersRounds}`);
+  
+  if (losersRounds === 0) {
+    console.log('只有2人比赛，不需要败者组');
+    return;
+  }
+  
+  for (let round = 0; round < losersRounds; round++) {
+    const roundMatches = [];
+    let matchCount = 1;
+    
+    // 败者组比赛数量规律：
+    // LR1: 1场 (胜者组第1轮败者们对战，但要考虑轮空)
+    // LR2: 1场 (LR1胜者 vs 胜者组第2轮败者)
+    
+    if (round === 0) {
+      // 第一轮败者组：计算实际的败者数量
+      const firstRoundLosers = Math.floor(totalPlayers / 2); // 第一轮实际对战产生的败者数
+      if (firstRoundLosers >= 2) {
+        matchCount = 1; // 至少需要1场比赛
+      } else if (firstRoundLosers === 1) {
+        // 如果只有1个败者，这个败者直接晋级到下一轮
+        matchCount = 0; // 这轮不需要比赛
       }
-    },
-    generateDoubleEliminationBracket() {
-      const round1 = [];
-      for (let i = 0; i < this.participants.length; i += 2) {
-        round1.push({
-          participant1: this.participants[i],
-          participant2: this.participants[i + 1] || null,
+    } else {
+      matchCount = 1; // 其他轮次通常是1场
+    }
+    
+    // 确保至少有0场比赛（可能某轮不需要比赛）
+    matchCount = Math.max(0, matchCount);
+    
+    if (matchCount > 0) {
+      for (let i = 0; i < matchCount; i++) {
+        roundMatches.push({
+          participant1: null,
+          participant2: null,
           score1: 0,
           score2: 0,
           decided: false,
@@ -204,237 +385,717 @@ export default {
           loser: null
         });
       }
-      this.winnersBracket = [round1];
-      this.losersBracket = [];
-      this.finalMatch = null;
-      this.champion = this.runnerUp = this.thirdPlace = null;
-    },
-    async confirmScore(match, bracketType, rIndex, mIndex) {
-      if (match.score1 === match.score2) return alert('不能平局');
-      match.decided = true;
-      match.winner = match.score1 > match.score2 ? match.participant1 : match.participant2;
-      match.loser = match.score1 > match.score2 ? match.participant2 : match.participant1;
-      
-      // 更新选手胜负场数据，传递当前比赛所在的组别
-      await this.updatePlayerStats(match.participant1, match.participant2, match.score1, match.score2, bracketType);
+      losersBracket.value.push(roundMatches);
+      console.log(`败者组第${round + 1}轮: ${matchCount}场比赛`);
+    } else {
+      console.log(`败者组第${round + 1}轮: 跳过（无需比赛）`);
+    }
+  }
+};
 
-      // 胜者组和败者组推进下一轮
-      const bracket = bracketType === 'winners' ? this.winnersBracket : this.losersBracket;
-      if (!bracket[rIndex + 1]) {
-        bracket[rIndex + 1] = [];
-      }
-      const nextRound = bracket[rIndex + 1];
-      const insertIndex = Math.floor(mIndex / 2);
-      const isEven = mIndex % 2 === 0;
-      if (!nextRound[insertIndex]) {
-        nextRound[insertIndex] = { participant1: null, participant2: null, score1: 0, score2: 0, decided: false, winner: null, loser: null };
-      }
-      if (isEven) {
-        nextRound[insertIndex].participant1 = match.winner;
-      } else {
-        nextRound[insertIndex].participant2 = match.winner;
-      }
+// D3.js drawing functions for winners bracket
+const drawD3WinnersBracket = () => {
+  const svg = d3.select('#d3-winners-bracket');
+  svg.selectAll('*').remove();
+  
+  if (!winnersBracket.value.length) return;
+  
+  drawD3Bracket(svg, winnersBracket.value, 'winnersBracketContainer', 'winners');
+};
 
-      if (bracketType === 'winners') {
-        this.winnersBracket[rIndex + 1] = nextRound;
+// D3.js drawing functions for losers bracket  
+const drawD3LosersBracket = () => {
+  const svg = d3.select('#d3-losers-bracket');
+  svg.selectAll('*').remove();
+  
+  if (!losersBracket.value.length) return;
+  
+  drawD3Bracket(svg, losersBracket.value, 'losersBracketContainer', 'losers');
+};
 
-        // 输者进败者组当前轮
-        if (!this.losersBracket[rIndex]) {
-          this.losersBracket[rIndex] = [];
-        }
-        const losersR = this.losersBracket[rIndex];
-        if (!losersR[insertIndex]) {
-          losersR[insertIndex] = { participant1: null, participant2: null, score1: 0, score2: 0, decided: false, winner: null, loser: null };
-        }
-        if (isEven) {
-          losersR[insertIndex].participant1 = match.loser;
-        } else {
-          losersR[insertIndex].participant2 = match.loser;
-        }
-        this.losersBracket[rIndex] = losersR;
-      } else {
-        // 败者组推进
-        this.losersBracket[rIndex + 1] = nextRound;
+// Generic D3.js bracket drawing function
+const drawD3Bracket = (svg, bracket, containerId, bracketType) => {
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 };
+  const matchWidth = 180;
+  const matchHeight = 120;
+  const roundGap = 50;
+  const matchGap = 20;
 
-        // 判断是否该生成决赛，决赛由胜者组最后一轮胜者和败者组最后一轮胜者对决
-        const lastWinnersRound = this.winnersBracket[this.winnersBracket.length - 1];
-        const lastLosersRound = this.losersBracket[this.losersBracket.length - 1];
-        if (lastWinnersRound && lastWinnersRound.length === 1 && lastLosersRound && lastLosersRound.length === 1) {
-          const winnerFromWinners = lastWinnersRound[0].winner;
-          const winnerFromLosers = lastLosersRound[0].winner;
-          if (winnerFromWinners && winnerFromLosers) {
-            this.finalMatch = {
-              participant1: winnerFromWinners,
-              participant2: winnerFromLosers,
-              score1: 0,
-              score2: 0,
-              decided: false
-            };
-          }
-        }
-      }
-    },
-    async confirmFinal() {
-      const match = this.finalMatch;
-      if (!match || match.score1 === match.score2) return alert('决赛不能平局');
-      
-      match.decided = true;
-      
-      // 确保胜者组选手是participant1，败者组选手是participant2
-      // 这样在排名时可以确保胜者组的选手排名更高
-      const winnerFromWinners = this.winnersBracket[this.winnersBracket.length - 1][0].winner;
-      const winnerFromLosers = this.losersBracket[this.losersBracket.length - 1][0].winner;
-      
-      // 根据比分确定冠亚军
-      const winner = match.score1 > match.score2 ? match.participant1 : match.participant2;
-      const loser = match.score1 > match.score2 ? match.participant2 : match.participant1;
+  const rounds = bracket.length;
+  const maxMatchesInRound = Math.max(...bracket.map(round => round.length));
 
-      // 更新决赛选手胜负场数据 - 决赛使用胜者组积分标准
-      await this.updatePlayerStats(match.participant1, match.participant2, match.score1, match.score2, 'winners');
+  const totalWidth = rounds * (matchWidth + roundGap) + margin.left + margin.right;
+  const totalHeight = maxMatchesInRound * (matchHeight + matchGap) + margin.top + margin.bottom;
 
-      // 设置冠军和亚军
-      this.champion = winner.name || winner;
-      this.runnerUp = loser.name || loser;
-      
-      // 确保败者的排名低于胜者
-      // 如果败者是来自胜者组的选手，那么他的排名应该高于季军
-      // 如果败者是来自败者组的选手，那么他的排名应该低于季军
-      
-      // 在双败赛制中，季军是败者组决赛的败者
-      if (this.losersBracket.length > 0) {
-        const lastLoserRound = this.losersBracket[this.losersBracket.length - 1];
-        if (lastLoserRound && lastLoserRound.length > 0) {
-          const lastLoserMatch = lastLoserRound[lastLoserRound.length - 1];
-          if (lastLoserMatch && lastLoserMatch.loser) {
-            this.thirdPlace = lastLoserMatch.loser.name || lastLoserMatch.loser;
-          }
-        }
-      }
+  const container = document.getElementById(containerId);
+  const containerWidth = container.clientWidth - 30;
+  const containerHeight = container.clientHeight - 30;
 
-      // 如果还没有确定季军，尝试从败者组倒数第二轮找
-      if (!this.thirdPlace && this.losersBracket.length > 1) {
-        const semiLoserRound = this.losersBracket[this.losersBracket.length - 2];
-        if (semiLoserRound && semiLoserRound.length > 0) {
-          const semiLoserMatch = semiLoserRound[semiLoserRound.length - 1];
-          if (semiLoserMatch && semiLoserMatch.loser) {
-            this.thirdPlace = semiLoserMatch.loser.name || semiLoserMatch.loser;
-          }
-        }
-      }
+  svg
+    .attr('width', containerWidth)
+    .attr('height', containerHeight)
+    .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet');
+
+  // Create zoom behavior
+  const zoom = d3.zoom()
+    .scaleExtent([0.1, 3])
+    .on('zoom', (event) => {
+      g.attr('transform', `translate(${margin.left},${margin.top}) ${event.transform}`);
+    });
+
+  // Store references for external control
+  if (bracketType === 'winners') {
+    winnersZoomBehavior = zoom;
+    winnerssvgSelection = svg;
+  } else {
+    losersZoomBehavior = zoom;
+    loserssvgSelection = svg;
+  }
+
+  svg.call(zoom);
+
+  svg.style('cursor', 'grab')
+    .on('mousedown', () => svg.style('cursor', 'grabbing'))
+    .on('mouseup', () => svg.style('cursor', 'grab'));
+
+  const g = svg.append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  // Draw matches for each round
+  bracket.forEach((round, roundIndex) => {
+    const roundX = roundIndex * (matchWidth + roundGap);
+    const roundStartY = (maxMatchesInRound * (matchHeight + matchGap) - round.length * (matchHeight + matchGap)) / 2;
+
+    // Round title
+    g.append('text')
+      .attr('x', roundX + matchWidth / 2)
+      .attr('y', -10)
+      .attr('text-anchor', 'middle')
+      .attr('class', 'round-title')
+      .style('font-weight', 'bold')
+      .style('font-size', '14px')
+      .text(`第 ${roundIndex + 1} 轮`);
+
+    round.forEach((match, matchIndex) => {
+      const matchY = roundStartY + matchIndex * (matchHeight + matchGap);
       
-      if (!this.thirdPlace) {
-        this.thirdPlace = '待定';
-      }
-      
-      // 更新最终排名状态
-      // 确保胜者的status为win，败者的status为lose
-      try {
-        const latestData = await getSignUpResultList();
-        
-        // 更新冠军状态
-        const championData = latestData.find(item => item.sign_name === this.champion);
-        if (championData) {
-          await updateSignUpResult(championData.id, {
-            ...championData,
-            status: 'win',
-            rank: '1'
+      // Match container
+      const matchGroup = g.append('g')
+        .attr('class', 'match-group')
+        .attr('data-match-id', `${bracketType}-${roundIndex}-${matchIndex}`);
+
+      // Match background
+      matchGroup.append('rect')
+        .attr('x', roundX)
+        .attr('y', matchY)
+        .attr('width', matchWidth)
+        .attr('height', matchHeight)
+        .attr('class', 'match-bg')
+        .style('fill', '#fafafa')
+        .style('stroke', '#ddd')
+        .style('stroke-width', 1)
+        .style('rx', 6);
+
+      // Store match position for connection drawing
+      match._x = roundX + matchWidth;
+      match._y = matchY + matchHeight / 2;
+      match._roundIndex = roundIndex;
+      match._matchIndex = matchIndex;
+
+      // Participant 1
+      const p1Group = matchGroup.append('g')
+        .attr('class', 'participant-group')
+        .attr('transform', `translate(${roundX + 10}, ${matchY + 20})`);
+
+      p1Group.append('rect')
+        .attr('width', matchWidth - 20)
+        .attr('height', 30)
+        .style('fill', match.winner && match.participant1 && match.winner.id === match.participant1.id ? '#e8f5e8' : '#fff')
+        .style('stroke', '#ccc')
+        .style('rx', 3);
+
+      p1Group.append('text')
+        .attr('x', 8)
+        .attr('y', 20)
+        .style('font-size', '12px')
+        .style('font-weight', match.winner && match.participant1 && match.winner.id === match.participant1.id ? 'bold' : 'normal')
+        .style('fill', match.winner && match.participant1 && match.winner.id === match.participant1.id ? '#2a7f2a' : '#333')
+        .text(match.participant1 ? match.participant1.name : '轮空');
+
+      // Score input for participant 1
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const scoreInput1 = p1Group.append('foreignObject')
+          .attr('x', matchWidth - 60)
+          .attr('y', 5)
+          .attr('width', 40)
+          .attr('height', 20);
+
+        scoreInput1.append('xhtml:input')
+          .attr('type', 'number')
+          .attr('min', '0')
+          .style('width', '35px')
+          .style('height', '18px')
+          .style('font-size', '11px')
+          .style('text-align', 'center')
+          .style('border', '1px solid #aaa')
+          .style('border-radius', '3px')
+          .property('value', match.score1 || '')
+          .on('input', function() {
+            match.score1 = +this.value;
           });
-        }
-        
-        // 更新亚军状态
-        const runnerUpData = latestData.find(item => item.sign_name === this.runnerUp);
-        if (runnerUpData) {
-          await updateSignUpResult(runnerUpData.id, {
-            ...runnerUpData,
-            status: 'lose',
-            rank: '2'
-          });
-        }
-        
-        // 更新季军状态
-        if (this.thirdPlace && this.thirdPlace !== '待定') {
-          const thirdPlaceData = latestData.find(item => item.sign_name === this.thirdPlace);
-          if (thirdPlaceData) {
-            await updateSignUpResult(thirdPlaceData.id, {
-              ...thirdPlaceData,
-              status: 'lose',
-              rank: '3'
-            });
-          }
-        }
-      } catch (err) {
-        console.error('更新最终排名失败:', err);
+      } else if (match.decided) {
+        p1Group.append('text')
+          .attr('x', matchWidth - 35)
+          .attr('y', 20)
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .text(match.score1 || 0);
       }
-    },
-    // 格式化比赛显示（如果需要）
-    formatMatch(match, isFinal = false) {
-      if (!match) return '';
-      const p1Name = match.participant1 ? match.participant1.name : '待定';
-      const p2Name = match.participant2 ? match.participant2.name : '待定';
-      return `${p1Name} vs ${p2Name}`;
-    },
+
+      // Participant 2
+      const p2Group = matchGroup.append('g')
+        .attr('class', 'participant-group')
+        .attr('transform', `translate(${roundX + 10}, ${matchY + 55})`);
+
+      p2Group.append('rect')
+        .attr('width', matchWidth - 20)
+        .attr('height', 30)
+        .style('fill', match.winner && match.participant2 && match.winner.id === match.participant2.id ? '#e8f5e8' : '#fff')
+        .style('stroke', '#ccc')
+        .style('rx', 3);
+
+      p2Group.append('text')
+        .attr('x', 8)
+        .attr('y', 20)
+        .style('font-size', '12px')
+        .style('font-weight', match.winner && match.participant2 && match.winner.id === match.participant2.id ? 'bold' : 'normal')
+        .style('fill', match.winner && match.participant2 && match.winner.id === match.participant2.id ? '#2a7f2a' : '#333')
+        .text(match.participant2 ? match.participant2.name : '轮空');
+
+      // Score input for participant 2
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const scoreInput2 = p2Group.append('foreignObject')
+          .attr('x', matchWidth - 60)
+          .attr('y', 5)
+          .attr('width', 40)
+          .attr('height', 20);
+
+        scoreInput2.append('xhtml:input')
+          .attr('type', 'number')
+          .attr('min', '0')
+          .style('width', '35px')
+          .style('height', '18px')
+          .style('font-size', '11px')
+          .style('text-align', 'center')
+          .style('border', '1px solid #aaa')
+          .style('border-radius', '3px')
+          .property('value', match.score2 || '')
+          .on('input', function() {
+            match.score2 = +this.value;
+          });
+      } else if (match.decided) {
+        p2Group.append('text')
+          .attr('x', matchWidth - 35)
+          .attr('y', 20)
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .text(match.score2 || 0);
+      }
+
+      // Confirm score button
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const buttonGroup = matchGroup.append('g')
+          .attr('transform', `translate(${roundX + 10}, ${matchY + 90})`);
+
+        const button = buttonGroup.append('rect')
+          .attr('width', matchWidth - 20)
+          .attr('height', 25)
+          .style('fill', '#007acc')
+          .style('stroke', 'none')
+          .style('rx', 4)
+          .style('cursor', 'pointer')
+          .on('click', () => confirmScore(match, bracketType, roundIndex, matchIndex));
+
+        buttonGroup.append('text')
+          .attr('x', (matchWidth - 20) / 2)
+          .attr('y', 17)
+          .style('fill', 'white')
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .style('pointer-events', 'none')
+          .text('确认比分');
+      }
+    });
+  });
+
+  // Draw connections between matches
+  drawD3Connections(g, bracket, bracketType, matchWidth, matchHeight, roundGap, matchGap);
+};
+
+// Draw connections between matches in brackets
+const drawD3Connections = (g, bracket, bracketType, matchWidth, matchHeight, roundGap, matchGap) => {
+  // Draw connections for adjacent rounds
+  for (let roundIndex = 0; roundIndex < bracket.length - 1; roundIndex++) {
+    const currentRound = bracket[roundIndex];
+    const nextRound = bracket[roundIndex + 1];
     
-    // 更新选手胜负场数据到API
-    async updatePlayerStats(p1, p2, s1, s2, bracketType = 'winners') {
-      if (!p1 || !p2) return;
+    if (!nextRound) continue;
+    
+    // Connect matches from current round to next round
+    for (let matchIndex = 0; matchIndex < currentRound.length; matchIndex += 2) {
+      const match1 = currentRound[matchIndex];
+      const match2 = currentRound[matchIndex + 1];
+      const nextMatchIndex = Math.floor(matchIndex / 2);
+      const nextMatch = nextRound[nextMatchIndex];
       
-      try {
-        // 先获取最新的报名数据
-        const latestData = await getSignUpResultList();
-        const p1Latest = latestData.find(item => item.id === p1.id);
-        const p2Latest = latestData.find(item => item.id === p2.id);
+      if (!nextMatch || nextMatch._x === undefined) continue;
+      
+      // Draw connection from match1 to next match
+      if (match1 && match1.decided && match1._x !== undefined) {
+        const startX = match1._x;
+        const startY = match1._y;
+        const endX = nextMatch._x - matchWidth;
+        const endY = nextMatch._y;
+        const midX = startX + roundGap / 2;
         
-        if (!p1Latest || !p2Latest) return;
+        g.append('path')
+          .attr('d', `M${startX},${startY} L${midX},${startY} L${midX},${endY} L${endX},${endY}`)
+          .style('stroke', '#4CAF50')
+          .style('stroke-width', 2)
+          .style('fill', 'none')
+          .style('opacity', 0.8);
+      }
+      
+      // Draw connection from match2 to next match (if match2 exists)
+      if (match2 && match2.decided && match2._x !== undefined) {
+        const startX = match2._x;
+        const startY = match2._y;
+        const endX = nextMatch._x - matchWidth;
+        const endY = nextMatch._y;
+        const midX = startX + roundGap / 2;
         
-        // 计算积分 - 胜者组获得全额积分，败者组获得一半积分
-        const pointMultiplier = bracketType === 'winners' ? 1 : 0.5;
-        const winPoints = s1 > s2 ? 1 * pointMultiplier : 0;
-        const losePoints = s2 > s1 ? 1 * pointMultiplier : 0;
-        
-        // 更新选手1的数据
-        const p1Data = {
-          tournament_id: this.selectedTournamentId,
-          tournament_name: this.selectedTournamentName,
-          team_name: p1.team_name || '',
-          sign_name: p1.name,
-          win: String(Number(p1Latest.win || 0) + s1),
-          lose: String(Number(p1Latest.lose || 0) + s2),
-          status: s1 > s2 ? 'win' : 'lose',
-          qq_code: p1.qq_code || '',
-          points: String(Number(p1Latest.points || 0) + (s1 > s2 ? winPoints : 0)),
-          bracket_type: bracketType // 记录选手所在的组别，用于最终排名
-        };
-        
-        // 更新选手2的数据
-        const p2Data = {
-          tournament_id: this.selectedTournamentId,
-          tournament_name: this.selectedTournamentName,
-          team_name: p2.team_name || '',
-          sign_name: p2.name,
-          win: String(Number(p2Latest.win || 0) + s2),
-          lose: String(Number(p2Latest.lose || 0) + s1),
-          status: s2 > s1 ? 'win' : 'lose',
-          qq_code: p2.qq_code || '',
-          points: String(Number(p2Latest.points || 0) + (s2 > s1 ? winPoints : 0)),
-          bracket_type: bracketType // 记录选手所在的组别，用于最终排名
-        };
-        
-        // 调用API更新数据
-        await updateSignUpResult(p1.id, p1Data);
-        await updateSignUpResult(p2.id, p2Data);
-        
-        // 刷新参赛者列表
-        await this.loadParticipants();
-      } catch (err) {
-        console.error('更新选手数据失败:', err);
-        alert('更新选手数据失败');
+        g.append('path')
+          .attr('d', `M${startX},${startY} L${midX},${startY} L${midX},${endY} L${endX},${endY}`)
+          .style('stroke', '#4CAF50')
+          .style('stroke-width', 2)
+          .style('fill', 'none')
+          .style('opacity', 0.8);
       }
     }
   }
 };
+
+const confirmScore = async (match, bracketType, rIndex, mIndex) => {
+  if (match.score1 === match.score2) return alert('不能平局');
+  match.decided = true;
+  match.winner = match.score1 > match.score2 ? match.participant1 : match.participant2;
+  match.loser = match.score1 > match.score2 ? match.participant2 : match.participant1;
+  
+  // 更新选手胜负场数据
+  await updatePlayerStats(match.participant1, match.participant2, match.score1, match.score2, bracketType);
+
+  if (bracketType === 'winners') {
+    // 胜者组逻辑
+    handleWinnersBracketAdvancement(match, rIndex, mIndex);
+  } else {
+    // 败者组逻辑
+    handleLosersBracketAdvancement(match, rIndex, mIndex);
+  }
+
+  // 检查是否需要生成决赛
+  checkForFinalMatch();
+
+  // Redraw brackets
+  nextTick(() => {
+    drawD3WinnersBracket();
+    drawD3LosersBracket();
+  });
+};
+
+// 处理胜者组晋级逻辑
+const handleWinnersBracketAdvancement = (match, rIndex, mIndex) => {
+  // 胜者晋级到胜者组下一轮
+  if (rIndex + 1 < winnersBracket.value.length) {
+    const nextRound = winnersBracket.value[rIndex + 1];
+    const nextMatchIndex = Math.floor(mIndex / 2);
+    const isUpperSlot = mIndex % 2 === 0;
+    
+    if (nextRound[nextMatchIndex]) {
+      if (isUpperSlot) {
+        nextRound[nextMatchIndex].participant1 = match.winner;
+      } else {
+        nextRound[nextMatchIndex].participant2 = match.winner;
+      }
+      
+      console.log(`胜者组第${rIndex + 1}轮胜者${match.winner ? match.winner.name : 'null'}晋级到第${rIndex + 2}轮`);
+    }
+  }
+  
+  // 败者进入败者组（只有在有败者的情况下）
+  if (match.loser) {
+    sendLoserToLosersBracket(match.loser, rIndex);
+  } else if (match.participant1 && match.participant2) {
+    // 只有在两个参赛者都存在的情况下才有败者
+    const loser = match.winner === match.participant1 ? match.participant2 : match.participant1;
+    sendLoserToLosersBracket(loser, rIndex);
+  }
+  // 轮空情况下不产生败者，不需要送入败者组
+};
+
+// 处理败者组晋级逻辑
+const handleLosersBracketAdvancement = (match, rIndex, mIndex) => {
+  // 败者组胜者晋级到败者组下一轮
+  if (rIndex + 1 < losersBracket.value.length) {
+    const nextRound = losersBracket.value[rIndex + 1];
+    
+    // 败者组的晋级逻辑:
+    // LR1 胜者 → LR2 的 participant1
+    // LR2 需要等待胜者组第2轮败者作为 participant2
+    
+    if (nextRound.length > 0) {
+      const nextMatch = nextRound[0]; // 败者组通常每轮只有1场比赛
+      
+      if (rIndex % 2 === 0) {
+        // 偶数轮 (LR1, LR3...): 胜者进入下一轮作为participant1
+        if (!nextMatch.participant1) {
+          nextMatch.participant1 = match.winner;
+          console.log(`败者组第${rIndex + 1}轮胜者${match.winner.name}晋级到第${rIndex + 2}轮作为participant1`);
+        }
+      } else {
+        // 奇数轮 (LR2, LR4...): 胜者进入下一轮作为participant2
+        if (!nextMatch.participant2) {
+          nextMatch.participant2 = match.winner;
+          console.log(`败者组第${rIndex + 1}轮胜者${match.winner.name}晋级到第${rIndex + 2}轮作为participant2`);
+        }
+      }
+    }
+  }
+  // 败者组的败者直接淘汰，不做处理
+};
+
+// 将败者送入败者组的正确位置
+const sendLoserToLosersBracket = (loser, winnersRoundIndex) => {
+  if (!loser || losersBracket.value.length === 0) return;
+  
+  console.log(`处理败者: ${loser.name}, 来自胜者组第${winnersRoundIndex + 1}轮`);
+  
+  // 标准双败淘汰赛逻辑：
+  // 胜者组第1轮败者 → 败者组第1轮 (与其他第1轮败者对战)
+  // 胜者组第2轮败者 → 败者组第2轮 (与败者组第1轮胜者对战)
+  
+  let targetRound;
+  if (winnersRoundIndex === 0) {
+    // 胜者组第1轮败者进入败者组第1轮
+    targetRound = 0;
+    
+    // 特殊情况：如果败者组第1轮没有比赛（只有1个败者），直接晋级到第2轮
+    if (losersBracket.value.length > 0 && losersBracket.value[0].length === 0) {
+      targetRound = 1;
+      console.log(`败者组第1轮无比赛，${loser.name}直接进入第2轮`);
+    }
+  } else {
+    // 胜者组第N轮败者进入败者组第(2N-1)轮
+    targetRound = winnersRoundIndex * 2 - 1;
+    
+    // 确保不超过败者组轮次数
+    if (targetRound >= losersBracket.value.length) {
+      targetRound = losersBracket.value.length - 1;
+    }
+  }
+  
+  console.log(`将${loser.name}放入败者组第${targetRound + 1}轮`);
+  
+  if (targetRound < losersBracket.value.length && targetRound >= 0 && losersBracket.value[targetRound]) {
+    const losersRound = losersBracket.value[targetRound];
+    
+    if (losersRound.length === 0) {
+      // 如果这一轮没有比赛，说明败者直接晋级到下一轮
+      console.log(`败者组第${targetRound + 1}轮无比赛，${loser.name}继续晋级`);
+      if (targetRound + 1 < losersBracket.value.length) {
+        sendLoserToLosersBracket(loser, winnersRoundIndex + 1);
+      }
+      return;
+    }
+    
+    // 找到第一个空位置放入败者
+    for (let i = 0; i < losersRound.length; i++) {
+      const match = losersRound[i];
+      if (!match.participant1) {
+        match.participant1 = loser;
+        console.log(`${loser.name}被放入败者组第${targetRound + 1}轮第${i + 1}场的participant1位置`);
+        break;
+      } else if (!match.participant2) {
+        match.participant2 = loser;
+        console.log(`${loser.name}被放入败者组第${targetRound + 1}轮第${i + 1}场的participant2位置`);
+        break;
+      }
+    }
+  }
+};
+
+// 检查是否需要生成决赛
+const checkForFinalMatch = () => {
+  const lastWinnersRound = winnersBracket.value[winnersBracket.value.length - 1];
+  const lastLosersRound = losersBracket.value[losersBracket.value.length - 1];
+  
+  if (lastWinnersRound && lastWinnersRound.length === 1 && lastWinnersRound[0].decided &&
+      lastLosersRound && lastLosersRound.length === 1 && lastLosersRound[0].decided) {
+    
+    const winnersChampion = lastWinnersRound[0].winner;
+    const losersChampion = lastLosersRound[0].winner;
+    
+    if (winnersChampion && losersChampion && !finalMatch.value) {
+      finalMatch.value = {
+        participant1: winnersChampion,
+        participant2: losersChampion,
+        score1: 0,
+        score2: 0,
+        decided: false,
+        winner: null,
+        loser: null
+      };
+    }
+  }
+};
+
+// Zoom control functions for winners bracket
+const zoomInWinners = () => {
+  if (winnerssvgSelection && winnersZoomBehavior) {
+    winnerssvgSelection.transition().duration(300).call(
+      winnersZoomBehavior.scaleBy, 1.5
+    );
+  }
+};
+
+const zoomOutWinners = () => {
+  if (winnerssvgSelection && winnersZoomBehavior) {
+    winnerssvgSelection.transition().duration(300).call(
+      winnersZoomBehavior.scaleBy, 1 / 1.5
+    );
+  }
+};
+
+const resetZoomWinners = () => {
+  if (winnerssvgSelection && winnersZoomBehavior) {
+    winnerssvgSelection.transition().duration(500).call(
+      winnersZoomBehavior.transform,
+      d3.zoomIdentity
+    );
+  }
+};
+
+// Zoom control functions for losers bracket
+const zoomInLosers = () => {
+  if (loserssvgSelection && losersZoomBehavior) {
+    loserssvgSelection.transition().duration(300).call(
+      losersZoomBehavior.scaleBy, 1.5
+    );
+  }
+};
+
+const zoomOutLosers = () => {
+  if (loserssvgSelection && losersZoomBehavior) {
+    loserssvgSelection.transition().duration(300).call(
+      losersZoomBehavior.scaleBy, 1 / 1.5
+    );
+  }
+};
+
+const resetZoomLosers = () => {
+  if (loserssvgSelection && losersZoomBehavior) {
+    loserssvgSelection.transition().duration(500).call(
+      losersZoomBehavior.transform,
+      d3.zoomIdentity
+    );
+  }
+};
+
+const confirmFinal = async () => {
+  const match = finalMatch.value;
+  if (!match || match.score1 === match.score2) return alert('决赛不能平局');
+  
+  match.decided = true;
+  match.winner = match.score1 > match.score2 ? match.participant1 : match.participant2;
+  match.loser = match.score1 > match.score2 ? match.participant2 : match.participant1;
+
+  // 更新决赛选手胜负场数据
+  await updatePlayerStats(match.participant1, match.participant2, match.score1, match.score2, 'final');
+
+  // 双败淘汰赛的特殊规则：bracket reset
+  // 如果败者组冠军（participant2）在决赛中获胜，则需要重置比赛
+  if (match.winner === match.participant2) {
+    // Bracket Reset: 败者组冠军获胜，需要再打一场
+    alert('败者组冠军获胜！比赛重置，将进行最终决赛！');
+    finalMatch.value = {
+      participant1: match.participant2, // 原败者组冠军
+      participant2: match.participant1, // 原胜者组冠军
+      score1: 0,
+      score2: 0,
+      decided: false,
+      winner: null,
+      loser: null,
+      isResetMatch: true // 标记这是重置后的比赛
+    };
+    return;
+  }
+
+  // 如果胜者组冠军获胜，或者这是重置后的比赛，则确定最终名次
+  champion.value = match.winner.name || match.winner;
+  runnerUp.value = match.loser.name || match.loser;
+  
+  // 在双败赛制中，季军是败者组决赛的败者
+  if (losersBracket.value.length > 0) {
+    const lastLoserRound = losersBracket.value[losersBracket.value.length - 1];
+    if (lastLoserRound && lastLoserRound.length > 0) {
+      const lastLoserMatch = lastLoserRound[lastLoserRound.length - 1];
+      if (lastLoserMatch && lastLoserMatch.loser) {
+        // 如果是重置比赛，季军应该是原来的胜者组冠军（如果败者组冠军最终获胜）
+        if (match.isResetMatch && match.winner === match.participant1) {
+          thirdPlace.value = match.participant2.name || match.participant2;
+        } else {
+          thirdPlace.value = lastLoserMatch.loser.name || lastLoserMatch.loser;
+        }
+      }
+    }
+  }
+
+  // 备选季军逻辑
+  if (!thirdPlace.value && losersBracket.value.length > 1) {
+    const semiLoserRound = losersBracket.value[losersBracket.value.length - 2];
+    if (semiLoserRound && semiLoserRound.length > 0) {
+      const semiLoserMatch = semiLoserRound[semiLoserRound.length - 1];
+      if (semiLoserMatch && semiLoserMatch.loser) {
+        thirdPlace.value = semiLoserMatch.loser.name || semiLoserMatch.loser;
+      }
+    }
+  }
+
+  // 更新最终排名状态
+  try {
+    const latestData = await getSignUpResultList();
+    
+    // 更新冠军状态
+    const championData = latestData.find(item => item.sign_name === champion.value);
+    if (championData) {
+      await updateSignUpResult(championData.id, {
+        ...championData,
+        status: 'win',
+        rank: '1'
+      });
+    }
+    
+    // 更新亚军状态
+    const runnerUpData = latestData.find(item => item.sign_name === runnerUp.value);
+    if (runnerUpData) {
+      await updateSignUpResult(runnerUpData.id, {
+        ...runnerUpData,
+        status: 'lose',
+        rank: '2'
+      });
+    }
+    
+    // 更新季军状态
+    if (thirdPlace.value && thirdPlace.value !== '待定') {
+      const thirdPlaceData = latestData.find(item => item.sign_name === thirdPlace.value);
+      if (thirdPlaceData) {
+        await updateSignUpResult(thirdPlaceData.id, {
+          ...thirdPlaceData,
+          status: 'lose',
+          rank: '3'
+        });
+      }
+    }
+  } catch (err) {
+    console.error('更新最终排名失败:', err);
+  }
+};
+
+// 更新选手胜负场数据到API
+const updatePlayerStats = async (p1, p2, s1, s2, bracketType = 'winners') => {
+  if (!p1 || !p2) return;
+  
+  try {
+    // 先获取最新的报名数据
+    const latestData = await getSignUpResultList();
+    const p1Latest = latestData.find(item => item.id === p1.id);
+    const p2Latest = latestData.find(item => item.id === p2.id);
+    
+    if (!p1Latest || !p2Latest) return;
+    
+    // 计算积分 - 胜者组获得全额积分，败者组获得一半积分
+    const pointMultiplier = bracketType === 'winners' ? 1 : 0.5;
+    const winPoints = s1 > s2 ? 1 * pointMultiplier : 0;
+    const losePoints = s2 > s1 ? 1 * pointMultiplier : 0;
+    
+    // 更新选手1的数据
+    const p1Data = {
+      tournament_id: props.tournamentId,
+      tournament_name: tournament.value.name,
+      team_name: p1.team_name || '',
+      sign_name: p1.name,
+      win: String(Number(p1Latest.win || 0) + s1),
+      lose: String(Number(p1Latest.lose || 0) + s2),
+      status: s1 > s2 ? 'win' : 'lose',
+      qq_code: p1.qq_code || '',
+      points: String(Number(p1Latest.points || 0) + (s1 > s2 ? winPoints : 0)),
+      bracket_type: bracketType
+    };
+    
+    // 更新选手2的数据
+    const p2Data = {
+      tournament_id: props.tournamentId,
+      tournament_name: tournament.value.name,
+      team_name: p2.team_name || '',
+      sign_name: p2.name,
+      win: String(Number(p2Latest.win || 0) + s2),
+      lose: String(Number(p2Latest.lose || 0) + s1),
+      status: s2 > s1 ? 'win' : 'lose',
+      qq_code: p2.qq_code || '',
+      points: String(Number(p2Latest.points || 0) + (s2 > s1 ? winPoints : 0)),
+      bracket_type: bracketType
+    };
+    
+    // 调用API更新数据
+    await updateSignUpResult(p1.id, p1Data);
+    await updateSignUpResult(p2.id, p2Data);
+    
+    // 刷新参赛者列表
+    await loadTournamentData();
+  } catch (err) {
+    console.error('更新选手数据失败:', err);
+    alert('更新选手数据失败');
+  }
+};
+
+// Watch for prop changes
+watch(() => props.tournamentId, (newId) => {
+  if (newId) {
+    loadTournamentData();
+  }
+}, { immediate: false });
+
+// Watch for bracket changes to redraw
+watch([winnersBracket, losersBracket], () => {
+  nextTick(() => {
+    drawD3WinnersBracket();
+    drawD3LosersBracket();
+  });
+}, { deep: true });
 </script>
 
 <style scoped>
+h1 {
+  text-align: center;
+  color: #1a237e;
+  margin-bottom: 20px;
+  font-size: 1.8rem;
+  font-weight: normal;
+}
+
 .tournament-bracket-root {
   font-family: Arial, sans-serif;
   max-width: 1200px;
@@ -444,63 +1105,202 @@ export default {
 
 .container {
   display: flex;
-  flex-wrap: wrap;
   gap: 20px;
+  align-items: flex-start;
+  min-height: 500px;
 }
 
 .control-panel {
   flex: 1;
-  min-width: 250px;
-  background: #f5f5f5;
+  min-width: 280px;
+  background: #f0f0f0;
   padding: 15px;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.tournament-info {
+  margin-bottom: 15px;
+  padding: 10px;
+  background: #e6f7ff;
+  border-radius: 4px;
+}
+
+.control-panel h2 {
+  color: #1a237e;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 20px 0 10px 0;
+}
+
+.loading {
+  color: #666;
+  font-style: italic;
+}
+
+.bracket-main {
+  flex: 3;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .bracket-section {
-  flex: 2;
-  min-width: 300px;
   background: #fff;
   padding: 15px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
 }
 
-.match {
-  background: #f9f9f9;
-  border: 1px solid #ddd;
+.bracket-section h2 {
+  color: #1a237e;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin: 0 0 15px 0;
+}
+
+.bracket-container {
+  position: relative;
+  overflow: auto;
+  background: #fff;
+  padding: 15px;
   border-radius: 6px;
-  padding: 10px;
-  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  min-height: 400px;
+  display: flex;
+  align-items: flex-start;
+}
+
+.zoom-controls {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.zoom-btn {
+  width: 32px;
+  height: 32px;
+  background: #007acc;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.zoom-btn:hover {
+  background: #005a9e;
+  transform: scale(1.05);
+}
+
+.zoom-btn:active {
+  transform: scale(0.95);
+}
+
+.interaction-hint {
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 5;
+  user-select: none;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+.interaction-hint:hover {
+  opacity: 1;
+}
+
+.d3-bracket {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+
+.d3-bracket:active {
+  cursor: grabbing;
+}
+
+.final-match-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.final-match {
+  background: #f9f9f9;
+  border: 2px solid #007acc;
+  border-radius: 8px;
+  padding: 20px;
+  min-width: 300px;
 }
 
 .participant {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 5px 0;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.participant:last-of-type {
+  border-bottom: none;
 }
 
 .participant.winner {
   font-weight: bold;
   color: #2a7f2a;
+  background-color: #e8f5e8;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.participant span {
+  flex: 1;
+  margin-right: 10px;
 }
 
 input[type="number"] {
-  width: 40px;
+  width: 60px;
   text-align: center;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
 button {
-  background: #4CAF50;
+  background: #409EFF;
   color: white;
   border: none;
-  padding: 5px 10px;
+  padding: 10px 15px;
   border-radius: 4px;
   cursor: pointer;
-  margin-top: 5px;
+  margin-top: 10px;
   width: 100%;
+  font-size: 14px;
+  font-weight: bold;
+  transition: all 0.3s;
 }
 
 button:disabled {
@@ -508,6 +1308,10 @@ button:disabled {
   cursor: not-allowed;
 }
 
+button:hover:not(:disabled) {
+  background: #66b1ff;
+}
+
 .final-ranking {
   background: #fffbdb;
   border: 1px solid #f0e68c;
@@ -525,4 +1329,14 @@ button:disabled {
   margin: 5px 0;
   font-size: 16px;
 }
+
+ul {
+  padding-left: 20px;
+  margin: 0 0 10px 0;
+}
+
+li {
+  margin-bottom: 4px;
+  list-style: disc;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/TournamentBracket.vue b/src/components/TournamentBracket.vue
index 6b6916f..7dbd35c 100644
--- a/src/components/TournamentBracket.vue
+++ b/src/components/TournamentBracket.vue
@@ -3,26 +3,18 @@
     <h1>单败淘汰赛赛程树状图</h1>
     <div class="container">
       <div class="control-panel">
-        <h2>选择比赛</h2>
         <div class="tournament-info">
-          <select v-model="selectedTournamentId" @change="handleTournamentChange">
-            <option value="">-- 请选择比赛 --</option>
-            <option v-for="tournament in tournaments" :key="tournament.id" :value="tournament.id">
-              {{ tournament.name }}
-            </option>
-          </select>
-          <div v-if="selectedTournamentId">
-            <strong>已选择:</strong> {{ selectedTournamentName }}
+          <div>
+            <strong>当前比赛:</strong> {{ tournament.name || '加载中...' }}
           </div>
         </div>
 
         <h2>参赛者列表</h2>
         <div id="player-list">
-          <div v-if="!selectedTournamentId" class="loading">请先选择比赛</div>
-          <div v-else-if="loading" class="loading">加载中...</div>
+          <div v-if="loading" class="loading">加载中...</div>
           <div v-else>
             <p v-if="participants.length === 0">暂无参赛者</p>
-<template v-else>
+            <template v-else>
               <p>共 {{ participants.length }} 位参赛者</p>
               <ul>
                 <li v-for="participant in participants" :key="participant.id">
@@ -45,42 +37,15 @@
       </div>
 
       <div class="bracket-container" id="bracketContainer">
-        <div class="bracket" id="bracket">
-          <template v-for="(roundMatches, rIdx) in roundsMatches" :key="rIdx">
-            <div class="round">
-              <div class="round-title">第 {{ rIdx + 1 }} 轮</div>
-              <template v-for="match in roundMatches" :key="match.id">
-                <div class="match" :id="'match-' + match.id">
-                  <!-- 参赛者1 -->
-                  <div class="participant" :class="{ winner: match.winner && match.participant1 && match.winner.id === match.participant1.id }">
-                    {{ match.participant1 ? match.participant1.name : '轮空' }}
-                    <input type="number" min="0" class="score-input"
-                      v-model.number="match.score1"
-                      :disabled="match.decided || !match.participant1 || !match.participant2"
-                      :placeholder="match.participant1 ? (match.participant1.win || '0') : '0'"
-                    >
-                  </div>
-                  <!-- 参赛者2 -->
-                  <div class="participant" :class="{ winner: match.winner && match.participant2 && match.winner.id === match.participant2.id }">
-                    {{ match.participant2 ? match.participant2.name : '轮空' }}
-                    <input type="number" min="0" class="score-input"
-                      v-model.number="match.score2"
-                      :disabled="match.decided || !match.participant1 || !match.participant2"
-                      :placeholder="match.participant2 ? (match.participant2.win || '0') : '0'"
-                    >
-                  </div>
-                  <!-- 确认比分按钮 -->
-                  <button class="score-btn"
-                    :disabled="match.decided || !match.participant1 || !match.participant2"
-                    @click="confirmScore(match)">
-                    确认比分
-                  </button>
-                </div>
-              </template>
-            </div>
-          </template>
+        <div class="zoom-controls">
+          <button class="zoom-btn" @click="zoomIn" title="放大 (+)">+</button>
+          <button class="zoom-btn" @click="zoomOut" title="缩小 (-)">-</button>
+          <button class="zoom-btn" @click="resetZoom" title="重置视图 (0)">⌂</button>
         </div>
-        <svg class="bracket-lines" id="bracketLines"></svg>
+        <div class="interaction-hint" v-if="tournament.matches.length > 0">
+          <span>💡 拖拽移动 | 滚轮缩放 | 快捷键: +放大 -缩小 0重置</span>
+        </div>
+        <svg id="d3-bracket" class="d3-bracket"></svg>
       </div>
     </div>
   </div>
@@ -89,6 +54,7 @@
 <script setup>
 import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue';
 import { getSignUpResultList, updateSignUpResult, getTournamentList } from '@/api/tournament';
+import * as d3 from 'd3';
 
 const props = defineProps({
   tournamentId: {
@@ -97,13 +63,14 @@ const props = defineProps({
   }
 });
 
-const tournaments = ref([]);
-const selectedTournamentId = ref('');
-const selectedTournamentName = ref('');
 const participants = ref([]);
 const loading = ref(false);
 const finalRanking = ref(null);
 
+// Store zoom behavior for external control
+let zoomBehavior = null;
+let svgSelection = null;
+
 const tournament = ref({
   id: props.tournamentId,
   name: '',
@@ -113,7 +80,7 @@ const tournament = ref({
 });
 
 const canGenerateBracket = computed(() => {
-  return selectedTournamentId.value && participants.value.length >= 2;
+  return participants.value.length >= 2;
 });
 
 const roundsMatches = computed(() => {
@@ -125,45 +92,62 @@ const roundsMatches = computed(() => {
 });
 
 onMounted(() => {
-  fetchTournamentList();
+  loadTournamentData();
+  
+  // Add keyboard shortcuts for zoom control
+  const handleKeydown = (event) => {
+    if (event.target.tagName === 'INPUT') return; // Don't trigger when typing in inputs
+    
+    switch(event.key) {
+      case '+':
+      case '=':
+        event.preventDefault();
+        zoomIn();
+        break;
+      case '-':
+        event.preventDefault();
+        zoomOut();
+        break;
+      case '0':
+        event.preventDefault();
+        resetZoom();
+        break;
+    }
+  };
+  
+  document.addEventListener('keydown', handleKeydown);
+  
+  // Store cleanup function
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handleKeydown);
+    const svg = d3.select('#d3-bracket');
+    if (svg.node()) svg.selectAll('*').remove();
+  });
 });
 
-const fetchTournamentList = async () => {
+const loadTournamentData = async () => {
+  if (!props.tournamentId) return;
+  
+  loading.value = true;
+  tournament.value.id = props.tournamentId;
+  
   try {
-    const data = await getTournamentList();
-    tournaments.value = data;
-  } catch (err) {
-    console.error('获取比赛列表失败:', err);
-  }
-};
-
-const handleTournamentChange = async () => {
-  if (!selectedTournamentId.value) {
-    selectedTournamentName.value = '';
-    participants.value = [];
-    tournament.value.id = null;
-    tournament.value.name = '';
-    tournament.value.participants = [];
-    return;
-  }
-
-  const selectedTournament = tournaments.value.find(t => t.id === selectedTournamentId.value);
-  if (selectedTournament) {
-    selectedTournamentName.value = selectedTournament.name;
-    tournament.value.id = selectedTournamentId.value;
-    tournament.value.name = selectedTournament.name;
-    loading.value = true;
-
-    try {
-      const data = await getSignUpResultList();
-      const filtered = data.filter(item => item.tournament_id == selectedTournamentId.value);
-      participants.value = filtered.map(item => ({ id: item.id, name: item.sign_name }));
-      tournament.value.participants = participants.value;
-    } catch (err) {
-      console.error('获取参赛者失败:', err);
-    } finally {
-      loading.value = false;
+    // Get tournament list to find the tournament name
+    const tournaments = await getTournamentList();
+    const selectedTournament = tournaments.find(t => t.id === props.tournamentId);
+    if (selectedTournament) {
+      tournament.value.name = selectedTournament.name;
     }
+    
+    // Get participants for this tournament
+    const data = await getSignUpResultList();
+    const filtered = data.filter(item => item.tournament_id == props.tournamentId);
+    participants.value = filtered.map(item => ({ id: item.id, name: item.sign_name }));
+    tournament.value.participants = participants.value;
+  } catch (err) {
+    console.error('获取比赛数据失败:', err);
+  } finally {
+    loading.value = false;
   }
 };
 
@@ -171,7 +155,7 @@ const generateBracket = () => {
   if (!canGenerateBracket.value) return;
   finalRanking.value = null;
   generateSingleEliminationBracket();
-  nextTick(() => drawConnections());
+  nextTick(() => drawD3Bracket());
 };
 
 const generateSingleEliminationBracket = async () => {
@@ -253,52 +237,262 @@ const generateSingleEliminationBracket = async () => {
   }
 };
 
-const drawConnections = () => {
-  try {
-    const bracketLinesSVG = document.getElementById('bracketLines');
-    const bracketDiv = document.getElementById('bracket');
-    if (!bracketDiv || !bracketLinesSVG) return;
-    bracketLinesSVG.innerHTML = '';
-    const bracketRect = bracketDiv.getBoundingClientRect();
-    const matchElements = {};
-    document.querySelectorAll('.match').forEach(el => {
-      const id = el.id.replace('match-', '');
-      matchElements[id] = el;
+const drawD3Bracket = () => {
+  const svg = d3.select('#d3-bracket');
+  svg.selectAll('*').remove(); // Clear previous content
+
+  if (!tournament.value.matches.length) return;
+
+  const margin = { top: 40, right: 40, bottom: 40, left: 40 };
+  const matchWidth = 180;
+  const matchHeight = 120;
+  const roundGap = 50;
+  const matchGap = 20;
+
+  const rounds = tournament.value.rounds;
+  const maxMatchesInRound = Math.pow(2, rounds - 1);
+
+  const totalWidth = rounds * (matchWidth + roundGap) + margin.left + margin.right;
+  const totalHeight = maxMatchesInRound * (matchHeight + matchGap) + margin.top + margin.bottom;
+
+  // Get container dimensions for proper sizing
+  const container = document.getElementById('bracketContainer');
+  const containerWidth = container.clientWidth - 30; // Account for padding
+  const containerHeight = container.clientHeight - 30;
+
+  svg
+    .attr('width', containerWidth)
+    .attr('height', containerHeight)
+    .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
+    .attr('preserveAspectRatio', 'xMidYMid meet');
+
+  // Create zoom behavior
+  const zoom = d3.zoom()
+    .scaleExtent([0.1, 3]) // Allow zoom from 10% to 300%
+    .on('zoom', (event) => {
+      g.attr('transform', `translate(${margin.left},${margin.top}) ${event.transform}`);
     });
-    tournament.value.matches.forEach(match => {
-      if (match.round === tournament.value.rounds) return;
-      if (!match.decided) return;
-      const nextRound = match.round + 1;
-      const nextMatchNumber = Math.floor((match.matchNumber - 1) / 2) + 1;
-      const nextMatchId = `${nextRound}-${nextMatchNumber}`;
-      const nextMatchEl = matchElements[nextMatchId];
-      const currentMatchEl = matchElements[match.id];
-      if (!nextMatchEl || !currentMatchEl) return;
-      const winnerIndex = (match.winner.id === (match.participant1 && match.participant1.id)) ? 1 : 2;
-      const curRect = currentMatchEl.getBoundingClientRect();
-      const nextRect = nextMatchEl.getBoundingClientRect();
-      const startX = curRect.right - bracketRect.left;
-      const startY = curRect.top - bracketRect.top + (winnerIndex === 1 ? 20 : 50);
-      const endX = nextRect.left - bracketRect.left;
-      const endY = nextRect.top - bracketRect.top + (match.matchNumber % 2 === 1 ? 20 : 50);
-      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-      path.setAttribute('stroke', '#666');
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke-width', '2');
-      const midX = (startX + endX) / 2;
-      const d = `M${startX},${startY} L${midX},${startY} L${midX},${endY} L${endX},${endY}`;
-      path.setAttribute('d', d);
-      bracketLinesSVG.appendChild(path);
+
+  // Store references for external control
+  zoomBehavior = zoom;
+  svgSelection = svg;
+
+  // Apply zoom to SVG
+  svg.call(zoom);
+
+  // Add cursor styles for pan/zoom
+  svg.style('cursor', 'grab')
+    .on('mousedown', () => svg.style('cursor', 'grabbing'))
+    .on('mouseup', () => svg.style('cursor', 'grab'));
+
+  // Create main group for content
+  const g = svg.append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  // Draw matches for each round
+  for (let round = 1; round <= rounds; round++) {
+    const roundMatches = tournament.value.matches.filter(m => m.round === round);
+    const matchesInRound = roundMatches.length;
+    const roundX = (round - 1) * (matchWidth + roundGap);
+    const roundStartY = (maxMatchesInRound * (matchHeight + matchGap) - matchesInRound * (matchHeight + matchGap)) / 2;
+
+    // Round title
+    g.append('text')
+      .attr('x', roundX + matchWidth / 2)
+      .attr('y', -10)
+      .attr('text-anchor', 'middle')
+      .attr('class', 'round-title')
+      .style('font-weight', 'bold')
+      .style('font-size', '14px')
+      .text(`第 ${round} 轮`);
+
+    roundMatches.forEach((match, idx) => {
+      const matchY = roundStartY + idx * (matchHeight + matchGap);
+      
+      // Match container
+      const matchGroup = g.append('g')
+        .attr('class', 'match-group')
+        .attr('data-match-id', match.id);
+
+      // Match background
+      matchGroup.append('rect')
+        .attr('x', roundX)
+        .attr('y', matchY)
+        .attr('width', matchWidth)
+        .attr('height', matchHeight)
+        .attr('class', 'match-bg')
+        .style('fill', '#fafafa')
+        .style('stroke', '#ddd')
+        .style('stroke-width', 1)
+        .style('rx', 6);
+
+      // Participant 1
+      const p1Group = matchGroup.append('g')
+        .attr('class', 'participant-group')
+        .attr('transform', `translate(${roundX + 10}, ${matchY + 20})`);
+
+      p1Group.append('rect')
+        .attr('width', matchWidth - 20)
+        .attr('height', 30)
+        .style('fill', match.winner && match.participant1 && match.winner.id === match.participant1.id ? '#e8f5e8' : '#fff')
+        .style('stroke', '#ccc')
+        .style('rx', 3);
+
+      p1Group.append('text')
+        .attr('x', 8)
+        .attr('y', 20)
+        .style('font-size', '12px')
+        .style('font-weight', match.winner && match.participant1 && match.winner.id === match.participant1.id ? 'bold' : 'normal')
+        .style('fill', match.winner && match.participant1 && match.winner.id === match.participant1.id ? '#2a7f2a' : '#333')
+        .text(match.participant1 ? match.participant1.name : '轮空');
+
+      // Score input for participant 1
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const scoreInput1 = p1Group.append('foreignObject')
+          .attr('x', matchWidth - 60)
+          .attr('y', 5)
+          .attr('width', 40)
+          .attr('height', 20);
+
+        scoreInput1.append('xhtml:input')
+          .attr('type', 'number')
+          .attr('min', '0')
+          .style('width', '35px')
+          .style('height', '18px')
+          .style('font-size', '11px')
+          .style('text-align', 'center')
+          .style('border', '1px solid #aaa')
+          .style('border-radius', '3px')
+          .property('value', match.score1 || '')
+          .on('input', function() {
+            match.score1 = +this.value;
+          });
+      } else if (match.decided) {
+        p1Group.append('text')
+          .attr('x', matchWidth - 35)
+          .attr('y', 20)
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .text(match.score1 || 0);
+      }
+
+      // Participant 2
+      const p2Group = matchGroup.append('g')
+        .attr('class', 'participant-group')
+        .attr('transform', `translate(${roundX + 10}, ${matchY + 55})`);
+
+      p2Group.append('rect')
+        .attr('width', matchWidth - 20)
+        .attr('height', 30)
+        .style('fill', match.winner && match.participant2 && match.winner.id === match.participant2.id ? '#e8f5e8' : '#fff')
+        .style('stroke', '#ccc')
+        .style('rx', 3);
+
+      p2Group.append('text')
+        .attr('x', 8)
+        .attr('y', 20)
+        .style('font-size', '12px')
+        .style('font-weight', match.winner && match.participant2 && match.winner.id === match.participant2.id ? 'bold' : 'normal')
+        .style('fill', match.winner && match.participant2 && match.winner.id === match.participant2.id ? '#2a7f2a' : '#333')
+        .text(match.participant2 ? match.participant2.name : '轮空');
+
+      // Score input for participant 2
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const scoreInput2 = p2Group.append('foreignObject')
+          .attr('x', matchWidth - 60)
+          .attr('y', 5)
+          .attr('width', 40)
+          .attr('height', 20);
+
+        scoreInput2.append('xhtml:input')
+          .attr('type', 'number')
+          .attr('min', '0')
+          .style('width', '35px')
+          .style('height', '18px')
+          .style('font-size', '11px')
+          .style('text-align', 'center')
+          .style('border', '1px solid #aaa')
+          .style('border-radius', '3px')
+          .property('value', match.score2 || '')
+          .on('input', function() {
+            match.score2 = +this.value;
+          });
+      } else if (match.decided) {
+        p2Group.append('text')
+          .attr('x', matchWidth - 35)
+          .attr('y', 20)
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .text(match.score2 || 0);
+      }
+
+      // Confirm score button
+      if (match.participant1 && match.participant2 && !match.decided) {
+        const buttonGroup = matchGroup.append('g')
+          .attr('transform', `translate(${roundX + 10}, ${matchY + 90})`);
+
+        const button = buttonGroup.append('rect')
+          .attr('width', matchWidth - 20)
+          .attr('height', 25)
+          .style('fill', '#007acc')
+          .style('stroke', 'none')
+          .style('rx', 4)
+          .style('cursor', 'pointer')
+          .on('click', () => confirmScore(match));
+
+        buttonGroup.append('text')
+          .attr('x', (matchWidth - 20) / 2)
+          .attr('y', 17)
+          .style('fill', 'white')
+          .style('font-size', '12px')
+          .style('font-weight', 'bold')
+          .style('text-anchor', 'middle')
+          .style('pointer-events', 'none')
+          .text('确认比分');
+      }
+
+      // Store match position for connection drawing
+      match._x = roundX + matchWidth;
+      match._y = matchY + matchHeight / 2;
     });
-  } catch (e) {
-    console.warn('drawConnections error:', e);
   }
+
+  // Draw connections between matches
+  drawD3Connections(g, matchWidth, matchHeight, roundGap, matchGap);
 };
 
-onUnmounted(() => {
-  const bracketLinesSVG = document.getElementById('bracketLines');
-  if (bracketLinesSVG) bracketLinesSVG.innerHTML = '';
-});
+const drawD3Connections = (g, matchWidth, matchHeight, roundGap, matchGap) => {
+  const rounds = tournament.value.rounds;
+  
+  for (let round = 1; round < rounds; round++) {
+    const currentRoundMatches = tournament.value.matches.filter(m => m.round === round && m.decided);
+    
+    currentRoundMatches.forEach(match => {
+      const nextRound = round + 1;
+      const nextMatchNumber = Math.floor((match.matchNumber - 1) / 2) + 1;
+      const nextMatch = tournament.value.matches.find(m => m.round === nextRound && m.matchNumber === nextMatchNumber);
+      
+      if (nextMatch && match.winner) {
+        const startX = match._x;
+        const startY = match._y;
+        const endX = nextMatch._x - matchWidth;
+        const endY = nextMatch._y;
+        
+        const midX = startX + roundGap / 2;
+        
+        // Draw connection line
+        g.append('path')
+          .attr('d', `M${startX},${startY} L${midX},${startY} L${midX},${endY} L${endX},${endY}`)
+          .style('stroke', '#4CAF50')
+          .style('stroke-width', 2)
+          .style('fill', 'none')
+          .style('opacity', 0.8);
+      }
+    });
+  }
+};
 
 const emit = defineEmits(['refreshPlayers']);
 
@@ -318,8 +512,8 @@ async function confirmScore(match) {
   match.winner = s1 > s2 ? match.participant1 : match.participant2;
   match.decided = true;
   updateNextRound(match);
-  // 重新绘制连线
-  nextTick(() => drawConnections());
+  // 重新绘制D3树状图
+  nextTick(() => drawD3Bracket());
   if (match.round === tournament.value.rounds) {
     calculateFinalRanking();
   }
@@ -357,8 +551,8 @@ async function confirmScore(match) {
       };
       await updateSignUpResult(p1.id, p1Data);
       await updateSignUpResult(p2.id, p2Data);
-      // 刷新报名数据和赛程
-      await handleTournamentChange();
+      // 刷新比赛数据
+      await loadTournamentData();
       // 强制同步 participants 和 tournament.value.participants
       participants.value = [...participants.value];
       tournament.value.participants = [...participants.value];
@@ -464,10 +658,43 @@ const calculateFinalRanking = () => {
   };
 };
 
-// 监听赛程变化自动重绘连线
+// Zoom control functions
+const zoomIn = () => {
+  if (svgSelection && zoomBehavior) {
+    svgSelection.transition().duration(300).call(
+      zoomBehavior.scaleBy, 1.5
+    );
+  }
+};
+
+const zoomOut = () => {
+  if (svgSelection && zoomBehavior) {
+    svgSelection.transition().duration(300).call(
+      zoomBehavior.scaleBy, 1 / 1.5
+    );
+  }
+};
+
+const resetZoom = () => {
+  if (svgSelection && zoomBehavior) {
+    svgSelection.transition().duration(500).call(
+      zoomBehavior.transform,
+      d3.zoomIdentity
+    );
+  }
+};
+
+// 监听赛程变化自动重绘D3树状图
 watch(roundsMatches, () => {
-  nextTick(() => drawConnections());
+  nextTick(() => drawD3Bracket());
 });
+
+// 监听tournamentId变化自动加载新的比赛数据
+watch(() => props.tournamentId, (newId) => {
+  if (newId) {
+    loadTournamentData();
+  }
+}, { immediate: false });
 </script>
 
 <style>
@@ -530,7 +757,7 @@ watch(roundsMatches, () => {
 .tournament-bracket-root .bracket-container {
   flex: 3;
   position: relative;
-  overflow-x: auto;
+  overflow: auto;
   background: #fff;
   padding: 15px;
   border-radius: 6px;
@@ -541,76 +768,73 @@ watch(roundsMatches, () => {
   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 {
+.tournament-bracket-root .zoom-controls {
+  position: absolute;
+  top: 20px;
+  right: 20px;
   display: flex;
-  justify-content: space-between;
-  margin-bottom: 6px;
-  cursor: default;
-  user-select: none;
+  flex-direction: column;
+  gap: 5px;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+  padding: 5px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
 
-.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%;
+.tournament-bracket-root .zoom-btn {
+  width: 32px;
+  height: 32px;
   background: #007acc;
   border: none;
-  color: white;
-  font-weight: bold;
-  padding: 6px 0;
   border-radius: 4px;
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
 }
 
-.tournament-bracket-root .score-btn:disabled {
-  background: #aaa;
-  cursor: not-allowed;
+.tournament-bracket-root .zoom-btn:hover {
+  background: #005a9e;
+  transform: scale(1.05);
+}
+
+.tournament-bracket-root .zoom-btn:active {
+  transform: scale(0.95);
+}
+
+.tournament-bracket-root .interaction-hint {
+  position: absolute;
+  bottom: 15px;
+  left: 15px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 5;
+  user-select: none;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+.tournament-bracket-root .interaction-hint:hover {
+  opacity: 1;
+}
+
+.tournament-bracket-root .d3-bracket {
+  width: 100%;
+  height: 100%;
+  display: block;
+  cursor: grab;
+}
+
+.tournament-bracket-root .d3-bracket:active {
+  cursor: grabbing;
 }
 
 .tournament-bracket-root #finalRanking {
@@ -621,21 +845,6 @@ watch(roundsMatches, () => {
   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;
@@ -647,12 +856,4 @@ watch(roundsMatches, () => {
   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/router/index.js b/src/router/index.js
index 4077afe..9c61737 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -57,37 +57,37 @@ const routes = [
         component: () => import('@/views/index/ConfigEditor.vue'),
         meta: { requiresAuth: true, requiredPrivilege: ['lv-admin','lv-mod'] }
       },
-      // {
-      //   path: 'competition',
-      //   name: 'Competition',
-      //   component: () => import('@/views/index/Competition.vue'),
-      //   // meta: { requiresAuth: true, requiredPrivilege: ['lv-admin','lv-competitor'] }
-      //   meta: { requiresAuth: true}
-      // },
-      // {
-      //   path: 'competition/add',
-      //   name: 'AddCompetition',
-      //   component: () => import('@/views/index/AddContestant.vue'),
-      //   meta: { requiresAuth: true }
-      // },
-      // {
-      //   path: 'competition/detail',
-      //   name: 'CompetitionDetail',
-      //   component: () => import('@/views/index/CompetitionDetail.vue'),
-      //   meta: { requiresAuth: true }
-      // },
-      // {
-      //   path: 'competition/signup',
-      //   name: 'CompetitionSignUp',
-      //   component: () => import('@/views/index/CompetitionSignUp.vue'),
-      //   meta: { requiresAuth: true }
-      // },
       {
         path: 'competition',
         name: 'Competition',
-        component: () => import('@/views/competition/Competition.vue'),
+        component: () => import('@/views/index/Competition.vue'),
+        // meta: { requiresAuth: true, requiredPrivilege: ['lv-admin','lv-competitor'] }
         meta: { requiresAuth: true}
       },
+      {
+        path: 'competition/add',
+        name: 'AddCompetition',
+        component: () => import('@/views/index/AddContestant.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'competition/detail',
+        name: 'CompetitionDetail',
+        component: () => import('@/views/index/CompetitionDetail.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'competition/signup',
+        name: 'CompetitionSignUp',
+        component: () => import('@/views/index/CompetitionSignUp.vue'),
+        meta: { requiresAuth: true }
+      },
+      // {
+      //   path: 'competition',
+      //   name: 'Competition',
+      //   component: () => import('@/views/competition/Competition.vue'),
+      //   meta: { requiresAuth: true}
+      // },
       {
         path: 'editors-maps',
         name: 'EditorsMaps',
diff --git a/src/views/competition/Competition.vue b/src/views/competition/Competition.vue
index 96c0baf..270499f 100644
--- a/src/views/competition/Competition.vue
+++ b/src/views/competition/Competition.vue
@@ -1,11 +1,271 @@
-<script setup lang="ts">
+<script setup>
+import { ref, onMounted } from 'vue';
+import TournamentBracket from '@/components/TournamentBracket.vue';
 
+// 比赛状态
+const activeTab = ref('upcoming'); // upcoming, ongoing, completed
+const tournaments = ref([]);
+const loading = ref(false);
+
+// 当前选中的比赛ID
+const selectedTournamentId = ref(null);
+
+// 页面加载时获取比赛列表
+onMounted(() => {
+  fetchTournaments();
+});
+
+// 获取比赛列表
+const fetchTournaments = async () => {
+  loading.value = true;
+  try {
+    // 这里应该调用API获取比赛列表
+    // 模拟数据
+    tournaments.value = [
+      { id: 1, name: '2023年夏季赛', status: 'completed', startDate: '2023-06-01', endDate: '2023-08-30' },
+      { id: 2, name: '2023年秋季赛', status: 'ongoing', startDate: '2023-09-01', endDate: '2023-11-30' },
+      { id: 3, name: '2024年春季赛', status: 'upcoming', startDate: '2024-03-01', endDate: '2024-05-30' }
+    ];
+  } catch (error) {
+    console.error('获取比赛列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 选择比赛
+const selectTournament = (tournamentId) => {
+  selectedTournamentId.value = tournamentId;
+};
+
+// 刷新参赛者列表
+const refreshParticipants = () => {
+  // 这里可以添加刷新逻辑
+  console.log('刷新参赛者列表');
+};
+
+// 过滤比赛列表
+const filteredTournaments = () => {
+  return tournaments.value.filter(tournament => {
+    if (activeTab.value === 'upcoming') return tournament.status === 'upcoming';
+    if (activeTab.value === 'ongoing') return tournament.status === 'ongoing';
+    if (activeTab.value === 'completed') return tournament.status === 'completed';
+    return true;
+  });
+};
 </script>
 
 <template>
-
+  <div class="competition-container">
+    <h1 class="page-title">比赛中心</h1>
+    
+    <!-- 比赛类型选项卡 -->
+    <div class="tabs">
+      <div 
+        class="tab" 
+        :class="{ active: activeTab === 'upcoming' }" 
+        @click="activeTab = 'upcoming'"
+      >
+        即将开始
+      </div>
+      <div 
+        class="tab" 
+        :class="{ active: activeTab === 'ongoing' }" 
+        @click="activeTab = 'ongoing'"
+      >
+        正在进行
+      </div>
+      <div 
+        class="tab" 
+        :class="{ active: activeTab === 'completed' }" 
+        @click="activeTab = 'completed'"
+      >
+        已结束
+      </div>
+    </div>
+    
+    <!-- 比赛列表 -->
+    <div class="tournament-list">
+      <div v-if="loading" class="loading">加载中...</div>
+      <div v-else-if="filteredTournaments().length === 0" class="no-data">
+        暂无{{ activeTab === 'upcoming' ? '即将开始' : activeTab === 'ongoing' ? '正在进行' : '已结束' }}的比赛
+      </div>
+      <div 
+        v-else
+        v-for="tournament in filteredTournaments()" 
+        :key="tournament.id"
+        class="tournament-card"
+        :class="{ active: selectedTournamentId === tournament.id }"
+        @click="selectTournament(tournament.id)"
+      >
+        <div class="tournament-header">
+          <h3>{{ tournament.name }}</h3>
+          <span class="status-badge" :class="tournament.status">
+            {{ tournament.status === 'upcoming' ? '即将开始' : 
+               tournament.status === 'ongoing' ? '正在进行' : '已结束' }}
+          </span>
+        </div>
+        <div class="tournament-dates">
+          <span>开始日期: {{ tournament.startDate }}</span>
+          <span>结束日期: {{ tournament.endDate }}</span>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 比赛详情 -->
+    <div v-if="selectedTournamentId" class="tournament-detail">
+      <TournamentBracket 
+        :tournamentId="selectedTournamentId"
+        @refreshPlayers="refreshParticipants"
+      />
+    </div>
+    <div v-else class="select-prompt">
+      请从左侧选择一个比赛查看详情
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.competition-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
 
+.page-title {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.tabs {
+  display: flex;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #ddd;
+}
+
+.tab {
+  padding: 10px 20px;
+  cursor: pointer;
+  font-weight: 500;
+  color: #666;
+  border-bottom: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.tab:hover {
+  color: #007acc;
+}
+
+.tab.active {
+  color: #007acc;
+  border-bottom: 2px solid #007acc;
+}
+
+.tournament-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  margin-bottom: 30px;
+}
+
+.tournament-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+.tournament-card:hover {
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
+}
+
+.tournament-card.active {
+  border-color: #007acc;
+  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
+}
+
+.tournament-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.tournament-header h3 {
+  margin: 0;
+  font-size: 18px;
+}
+
+.status-badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-badge.upcoming {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.status-badge.ongoing {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.status-badge.completed {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.tournament-dates {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #666;
+}
+
+.loading, .no-data, .select-prompt {
+  padding: 20px;
+  text-align: center;
+  color: #666;
+  background: #f9f9f9;
+  border-radius: 8px;
+  font-style: italic;
+}
+
+.tournament-detail {
+  margin-top: 20px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+@media (min-width: 768px) {
+  .competition-container {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  .page-title, .tabs {
+    width: 100%;
+  }
+  
+  .tournament-list {
+    width: 30%;
+    margin-right: 2%;
+  }
+  
+  .tournament-detail, .select-prompt {
+    width: 68%;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/index/CompetitionDetail.vue b/src/views/index/CompetitionDetail.vue
index 13a9892..6d718da 100644
--- a/src/views/index/CompetitionDetail.vue
+++ b/src/views/index/CompetitionDetail.vue
@@ -75,7 +75,10 @@
           v-if="competition.status === 'finish'"
           :tournament-id="parseInt(route.query.id)"
         />
-        <DoubleEliminationBracket v-if="competition.format === '双败淘汰' && competition.status === 'starting'" />
+        <DoubleEliminationBracket 
+          v-if="competition.format === '双败淘汰' && competition.status === 'starting'" 
+          :tournament-id="parseInt(route.query.id)" 
+        />
         <tournament-bracket
           v-else-if="competition.status === 'starting'"
           :tournament-id="parseInt(route.query.id)"
diff --git a/src/views/index/Home.vue b/src/views/index/Home.vue
index 06ccaa8..a93c508 100644
--- a/src/views/index/Home.vue
+++ b/src/views/index/Home.vue
@@ -150,34 +150,34 @@
 
         <!-- 右侧边栏 -->
         <div class="sidebar">
-<!--          &lt;!&ndash; 赛事信息 &ndash;&gt;-->
-<!--          <div class="section-card">-->
-<!--            <div class="section-header">-->
-<!--              <h3>-->
-<!--                <i class="fas fa-trophy"></i>-->
-<!--                最新赛事-->
-<!--              </h3>-->
-<!--              <router-link to="/competition" class="more-link">查看全部</router-link>-->
-<!--            </div>-->
-<!--            <div class="competitions-list">-->
-<!--              <div-->
-<!--                v-for="competition in latestCompetitions"-->
-<!--                :key="competition.id"-->
-<!--                class="competition-item"-->
-<!--                @click="viewCompetition(competition.id)"-->
-<!--              >-->
-<!--                <div class="competition-status" :class="competition.status">-->
-<!--                  {{ getStatusText(competition.status) }}-->
-<!--                </div>-->
-<!--                <h4>{{ competition.name }}</h4>-->
-<!--                <div class="competition-time">-->
-<!--                  <i class="fas fa-calendar"></i>-->
-<!--                  {{ formatDate(competition.start_time) }}-->
-<!--                </div>-->
-<!--                <p>主办方：{{ competition.organizer }}</p>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
+          <!-- 赛事信息 -->
+          <div class="section-card">
+            <div class="section-header">
+              <h3>
+                <i class="fas fa-trophy"></i>
+                最新赛事
+              </h3>
+              <router-link to="/competition" class="more-link">查看全部</router-link>
+            </div>
+            <div class="competitions-list">
+              <div
+                v-for="competition in latestCompetitions"
+                :key="competition.id"
+                class="competition-item"
+                @click="viewCompetition(competition.id)"
+              >
+                <div class="competition-status" :class="competition.status">
+                  {{ getStatusText(competition.status) }}
+                </div>
+                <h4>{{ competition.name }}</h4>
+                <div class="competition-time">
+                  <i class="fas fa-calendar"></i>
+                  {{ formatDate(competition.start_time) }}
+                </div>
+                <p>主办方：{{ competition.organizer }}</p>
+              </div>
+            </div>
+          </div>
 
           <!-- 办事大厅 -->
           <div class="section-card">