fix

package-lock.json

@@ -32,6 +32,7 @@
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21",
         "vue-i18n": "^9.1.9",
+        "vue-tournament-bracket": "^3.0.0",
         "ygopro-deck-encode": "^1.0.7"
       },
       "devDependencies": {
@@ -11205,6 +11206,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-tournament-bracket": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-tournament-bracket/-/vue-tournament-bracket-3.0.0.tgz",
+      "integrity": "sha512-ewugJG94WYzJ+LIyAD1oDIxj5V3RFUGF8+UB9GBJfjhmIzjEGOxKQxNMa2kA+7bsJjydbiAgn4cV6lt+KTGNHQ==",
+      "dependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -59,6 +59,7 @@
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9",
+    "vue-tournament-bracket": "^3.0.0",
     "ygopro-deck-encode": "^1.0.7"
   },
   "devDependencies": {

src/pages/matchTree.vue

@@ -3,12 +3,24 @@
         :is-full = 'true'
         title = '对阵图'
     >
+        <bracket :flat-tree = 'matches'>
+            <template #player = ' { player }'>
+                <view
+                    class = 'player'
+                    :style = "{ '--size' : `${size.width > size.height ? 10 : 20}vw`}"
+                >
+                    {{ player.name }}
+                </view>
+            </template>
+        </bracket>
     </uni-card>
 </template>
 <script setup lang = 'ts'>
-    import { defineProps, onMounted, watch } from 'vue';
+    import { defineProps, onBeforeMount, reactive, watch } from 'vue';
     import Match from '../script/match';
+    import Uniapp from '../script/uniapp.ts';
     import Participant from '../script/participant';
+    import Bracket from "vue-tournament-bracket";
 
     const props = defineProps(['matches', 'participants']) as {
         matches : Array<Match>,
@@ -19,6 +31,62 @@
         const p = props.participants.find(i => i.id == id);
         return p?.name ?? '';
     }
+
+    let size = reactive({
+        width : 0,
+        height : 0,
+        get : () => {
+            // @ts-ignore
+            size.width = uni.getSystemInfoSync().windowWidth;
+            size.height = uni.getSystemInfoSync().windowHeight;
+        }
+    });
+
+    interface player {
+        id : string;
+        name : string;
+        winner ?: boolean;
+    }
+
+    let matches : Array<{
+        id : number;
+        player1 : player;
+        player2 : player;
+        next ?: number;
+    }> = reactive([]);
+
+    onBeforeMount(() : void => {
+        Uniapp.chkScreen(size.get);
+    });
+
+    watch(() => { return props.matches; }, () => {
+        props.matches.forEach(i => {
+            matches.push({
+                id : i.id,
+                next : i.childMatchId,
+                player1: {
+                    id: i.player1Id ? i.player1Id.toString() : '',
+                    name: i.player1Id ? getName(i.player1Id) : '',
+                    winner: i.winnerId ? i.player1Id == i.winnerId : undefined
+                },
+                player2: {
+                    id: i.player2Id ? i.player2Id.toString() : '',
+                    name: i.player2Id ? getName(i.player2Id) : '',
+                    winner: i.winnerId ? i.player2Id == i.winnerId : undefined
+                }
+            });
+        });
+    }, { immediate : true, deep : true });
+
 </script>
 <style scoped lang = 'scss'>
+    .uni-card {
+        min-width: 100%;
+        overflow-x: auto;
+        :deep(.player) {
+            width: var(--size);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
 </style>
\ No newline at end of file

src/pages/tournament.vue

@@ -277,15 +277,14 @@
                         </uni-pagination>
                     </uni-card>
                 </transition>
-                <!--
                 <transition name = 'switch'>
                     <MatchTree
-                        v-show = "match.array.length > 0 && tournament.this.rule == 'SingleElimination'"
+                        v-if = "!page.loading && tournament.this.rule == 'SingleElimination'"
+                        v-show = "match.array.length > 0"
                         :matches = 'match.array'
                         :participants = 'participant.array'
                     ></MatchTree>
                 </transition>
-                -->
             </uni-card>
         </transition>
     </view>