修改搜索功能

vuetify-project/src/components/audit.vue

 <template>
   <v-app>
-    <v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10">
+    <!-- {{ filteredMatches }} -->
+    <v-container>
+      <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value" :items-per-page="10">
         <template v-slot:top>
           <v-toolbar flat>
             <v-toolbar-title>比赛</v-toolbar-title>
@@ -20,35 +22,45 @@
           <v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
         </template>
       </v-data-table>
+    </v-container>
+
   </v-app>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      search: '',
-      headers: [
+<script setup>
+import { ref } from 'vue';
+import { reactive } from 'vue';
+import { computed } from 'vue';
+
+const search = ref('');
+const headers = reactive([
   { title: '比赛', key: 'team' },
   { title: '比分', key: 'score' },
   { title: '审核', key: 'actions', sortable: false }
-      ],
-      matches: [
-        { id: 1, homeTeam: 'Team A', awayTeam: 'Team B', homeScore: 2, awayScore: 1, status: 'pending' },
-        { id: 2, homeTeam: 'Team C', awayTeam: 'Team D', homeScore: 0, awayScore: 3, status: 'pending' },
-        { id: 3, homeTeam: 'Team E', awayTeam: 'Team F', homeScore: 2, awayScore: 2, status: 'pending' },
-      ]
-    };
-  },
-  methods: {
-    approveMatch(match) {
+]);
+const matches = ref([
+  { id: 1, homeTeam: '张三', awayTeam: '零', homeScore: 2, awayScore: 1, status: 'pending' },
+  { id: 2, homeTeam: '李四', awayTeam: '一', homeScore: 0, awayScore: 3, status: 'pending' },
+  { id: 3, homeTeam: '王五', awayTeam: '二', homeScore: 2, awayScore: 2, status: 'pending' },
+]);
+
+const filteredMatches = computed(() => {
+  // return matches.value
+  return matches.value.filter(match =>
+    match.homeTeam.includes(search.value) ||
+    match.awayTeam.includes(search.value) ||
+    match.homeScore === parseInt(search.value) ||
+    match.awayScore === parseInt(search.value)
+  );
+})
+
+function approveMatch(match) {
   // Perform approval logic
   match.status = 'approved';
-    },
-    rejectMatch(match) {
+}
+function rejectMatch(match) {
   // Perform rejection logic
   match.status = 'rejected';
-    }
-  }
-};
+}
+
 </script>
\ No newline at end of file

vuetify-project/src/components/game_detail.vue

 <template>
     <v-app>
-        <v-data-table :headers="headers" :items="matches" item-key="id" :search="search" :items-per-page="10">
+        <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value"
+            :items-per-page="10">
             <template v-slot:top>
                 <v-toolbar flat>
                     <v-toolbar-title>比赛</v-toolbar-title>
@@ -17,9 +18,12 @@
                 {{ item.userScore }} - {{ item.opponentScore }}
             </template>
             <template v-slot:item.verified="{ item }">
-                <v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ?
+                <v-icon v-if="item.verified === 1" color="blue">mdi-help-circle</v-icon>
+                <v-icon v-else-if="item.verified === 2" color="red">mdi-check-circle</v-icon>
+                <v-icon v-else-if="item.verified === 3" color="green">mdi-close-circle</v-icon>
+                <!-- <v-icon :color="item.verified != 1 ? (item.verified == 2 ? 'green' : 'red') : 'red'">{{ item.verified ?
             'mdi-check-circle' :
-                    'mdi-close-circle' }}</v-icon>
+                    'mdi-close-circle' }}</v-icon> -->
             </template>
         </v-data-table>
     </v-app>
@@ -28,16 +32,29 @@
 <script setup>
 import { ref } from 'vue';
 import { reactive } from 'vue';
+import { computed } from 'vue';
+
 const search = ref('');
+
 const headers = reactive([
-    { title: '比赛', key: 'name' },
-    { title: '比分', key: 'score' },
+    { title: '比赛', key: 'name', sortable: true },
+    { title: '比分', key: 'score', sortable: true },
     { title: '审核状态', key: 'verified' },
 ]);
-const matches = reactive([
-    { id: 1, username: 'Team A', opponentname: 'Team B', userScore: 3, opponentScore: 2, verified: true },
-    { id: 2, username: 'Team A', opponentname: 'Team C', userScore: 1, opponentScore: 1, verified: false },
-    { id: 3, username: 'Team A', opponentname: 'Team D', userScore: 2, opponentScore: 4, verified: true },
+const matches = ref([
+    { id: 1, username: '张三', opponentname: '零', userScore: 3, opponentScore: 2, verified: 1 },
+    { id: 2, username: '李四', opponentname: '一', userScore: 1, opponentScore: 1, verified: 2 },
+    { id: 3, username: '王五', opponentname: '二', userScore: 2, opponentScore: 4, verified: 3 },
 ]);
 
+const filteredMatches = computed(() => {
+    // return matches.value
+    return matches.value.filter(match =>
+        match.username.includes(search.value) ||
+        match.opponentname.includes(search.value) ||
+        match.userScore === parseInt(search.value) ||
+        match.opponentScore === parseInt(search.value)
+    );
+})
+
 </script>
\ No newline at end of file

vuetify-project/src/components/gamemanage.vue

 <template>
+  <div class="text-h4 headline">
+    比赛管理
+  </div>
+  <v-card class="game-info-card">
     <v-container>
+      <!-- <v-card-title color="indigo">
+      提交比赛
+    </v-card-title> -->
       <v-row no-gutters>
         <v-col align-self="center">
-        <v-autocomplete v-model="player1" hide-details="auto" label="姓名"
+          <v-autocomplete variant="underlined" v-model="player1" label="姓名"
             :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
         </v-col>
         <v-col cols="2" align-self="center">
           <div class="text-h6" style="text-align: center;">VS</div>
         </v-col>
         <v-col align-self="center">
-        <v-autocomplete v-model="player2" hide-details="auto" label="姓名"
+          <v-autocomplete variant="underlined" v-model="player2" label="姓名"
             :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
         </v-col>
       </v-row>
-  </v-container>
-  <v-container>
       <v-row no-gutters>
         <v-col align-self="center">
-        <v-autocomplete v-model="score1" hide-details="auto" label="得分"
+          <v-autocomplete variant="underlined" v-model="score1" label="得分"
             :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
         </v-col>
         <v-col cols="2" align-self="center">
           <div class="text-h6" style="text-align: center;">:</div>
         </v-col>
         <v-col align-self="center">
-        <v-autocomplete v-model="score2" hide-details="auto" label="得分"
+          <v-autocomplete variant="underlined" v-model="score2" label="得分"
             :items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
         </v-col>
       </v-row>
-  </v-container>
-  <v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-darken-3" size="x-large"
+      <v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-lighten-2" size="large"
         variant="flat" block @click="loading = !loading">
         提交
       </v-btn>
+    </v-container>
+
+    <!-- <v-container>
+
+    </v-container> -->
+    <!-- <v-container>
+
+    </v-container> -->
+
+  </v-card>
+
 
   <div>
-    <v-card
-    class="mx-auto my-8"
-    href="../../game_detail.html"
-    max-width="344"
-    rel="noopener"
-    target="_blank"
-    title="审核详情"
-    append-icon="mdi-chevron-right"
-  ></v-card>
-  <v-card
-    class="mx-auto my-8"
-    href="../../audit.html"
-    max-width="344"
-    rel="noopener"
-    target="_blank"
-    title="审核"
-    append-icon="mdi-chevron-right"
-  ></v-card>
+    <v-card class="mx-auto my-2" href="../../game_detail.html" width="95%" rel="noopener" target="_blank" title="已提交比赛"
+      append-icon="mdi-chevron-right"></v-card>
+    <v-card class="mx-auto my-2" href="../../audit.html" width="95%" rel="noopener" target="_blank" title="待审核比赛"
+      append-icon="mdi-chevron-right"></v-card>
   </div>
 
 </template>
@@ -71,3 +72,20 @@ const loading = ref(false);
 
 
 </script>
+
+<style>
+.game-info-card {
+  width: 95%;
+  margin: auto;
+  margin-top: 20px;
+  /* padding: 5px; */
+}
+
+.headline {
+  margin-left: 5%;
+  margin-top: 5%;
+  margin-bottom: 2%;
+
+
+}
+</style>
\ No newline at end of file

vuetify-project/src/main.vue

@@ -9,32 +9,36 @@ const tab = ref(null)
 <template>
   <div class="h-screen w-auto">
     <v-window v-model="tab" class="h-screen w-auto">
-      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-auto">
+      <v-window-item :key="1" :value="'tab-1'" class="h-screen w-100">
         <Home></Home>
       </v-window-item>
-      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-auto">
+      <v-window-item :key="2" :value="'tab-2'" class="h-screen w-100">
         <Gamemanage></Gamemanage>
       </v-window-item>
-      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-auto">
+      <v-window-item :key="3" :value="'tab-3'" class="h-screen w-100">
         <Space></Space>
       </v-window-item>
     </v-window>
-    <v-tabs v-model="tab" bg-color="deep-purple-accent-4" align-tabs="center" stacked grow class="tabs">
-      <v-tab value="tab-1">
-        <v-icon>mdi-phone</v-icon>
+    <v-layout class="overflow-visible" style="height: 56px;">
+
+      <v-bottom-navigation v-model="tab" color="indigo" align-tabs="center" stacked grow class="tabs">
+        <v-btn value="tab-1">
+          <v-icon>mdi-home</v-icon>
           首页
-      </v-tab>
+        </v-btn>
 
-      <v-tab value="tab-2">
-        <v-icon>mdi-heart</v-icon>
+        <v-btn value="tab-2">
+          <v-icon>mdi-table-tennis</v-icon>
           比赛
-      </v-tab>
+        </v-btn>
 
-      <v-tab value="tab-3">
-        <v-icon>mdi-account-box</v-icon>
+        <v-btn value="tab-3">
+          <v-icon>mdi-account</v-icon>
           我的
-      </v-tab>
-    </v-tabs>
+        </v-btn>
+      </v-bottom-navigation>
+    </v-layout>
+
   </div>
 </template>