feat: live event log

package.json

@@ -39,7 +39,9 @@
       "plugin:vue/essential",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "no-console": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }

src/assets/languages/en-US.json

@@ -23,6 +23,10 @@
     "submit": "Submit",
     "input_your_flag": "Please input your flag here..."
   },
+  "log": {
+    "submit_flag": "{to} [ {challenge} ] was attacked by {from}",
+    "check_down": "{team} [ {challenge} ] down"
+  },
   "timer": {
     "not_begin": "The Game is not ready",
     "pause": "The Game is pause",

src/assets/languages/zh-CN.json

@@ -23,6 +23,10 @@
     "submit": "提交",
     "input_your_flag": "请输入你的 Flag"
   },
+  "log": {
+    "submit_flag": "{from} 攻陷了 {to} [ {challenge} ]",
+    "check_down": "{team} [ {challenge} ] 服务宕机"
+  },
   "timer": {
     "not_begin": "比赛未开始",
     "pause": "比赛已暂停",

src/components/Copyrights.vue

@@ -0,0 +1,22 @@
+<template>
+    <v-footer padless>
+        <v-row justify="center" no-gutters>
+            <v-col style="font-size: 14px;" class="py-4 text-center white--text" cols="12">
+                {{ new Date().getFullYear() }} — <strong>Powered by
+                <a class="white--text" href="https://cardinal.ink/" target="_blank">Cardinal</a>
+            </strong>
+            </v-col>
+        </v-row>
+    </v-footer>
+
+</template>
+
+<script>
+    export default {
+        name: "Copyrights"
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/LiveLog.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <v-simple-table :height="200" v-if="logs.length !== 0">
+            <template v-slot:default>
+                <tbody>
+                <tr v-for="(item, index) in logs" v-bind:key="index">
+                    <td>{{ item.message }}</td>
+                    <td width="220px" style="text-align: right;">{{ new Date(item.time * 1000).toLocaleString() }}</td>
+                </tr>
+                </tbody>
+            </template>
+        </v-simple-table>
+        <div style="height: 200px;" v-else>
+            暂无动态
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "LiveLog",
+        data: () => ({
+            logs: [],
+            stream: null,
+        }),
+        mounted() {
+            this.getStream()
+        },
+        methods: {
+            getStream() {
+                this.stream = new EventSource(this.utils.baseURL + '/livelog')
+                this.stream.onmessage = (event) => {
+                    let data = JSON.parse(event.data)
+                    switch (data['Type']) {
+                        case 'submit_flag':
+                            this.push({
+                                time: data['Time'],
+                                message: this.$t('log.submit_flag', {
+                                    'from': data['Message']['From'],
+                                    'to': data['Message']['To'],
+                                    'challenge': data['Message']['Challenge'],
+                                })
+                            })
+                            break;
+                        case 'check_down':
+                            this.push({
+                                time: data['Time'],
+                                message: this.$t('log.check_down', {
+                                    'team': data['Message']['Team'],
+                                    'challenge': data['Message']['Challenge'],
+                                })
+                            })
+                            break;
+                    }
+                };
+                this.stream.onerror = function (err) {
+                    console.log(err)
+                };
+            },
+            push(data) {
+                if (this.logs.length > 30) {
+                    this.logs = this.logs.slice(0, 30)
+                }
+                this.logs.unshift(data)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/components/SubmitFlag.vue

@@ -1,23 +1,26 @@
 <template>
     <v-card class="mx-auto" v-if="info !== null">
-        <v-snackbar v-model="snackBarVisible" color="error" :timeout="3000" :top="true">{{ message }}</v-snackbar>
+        <v-snackbar v-model="snackBarVisible" :color="snackBarColor" :timeout="3000" :top="true">{{ message }}
+        </v-snackbar>
 
         <v-card-title>
             <span style="margin-right: 20px;">{{$t('flag.submit_flag')}}</span>
             <v-text-field
+                    @keyup.enter.native="submitFlag"
                     v-model="inputFlag"
                     :label="$t('flag.input_your_flag')"
                     clearable
             ></v-text-field>
-            <v-btn style="margin-left: 20px;" @click="submitFlag">{{$t('flag.submit')}}</v-btn>
+            <v-btn style="margin-left: 20px;" @click="submitFlag">
+                {{$t('flag.submit')}}
+            </v-btn>
         </v-card-title>
         <v-card-text>
             <h2>POST <code style="background-color: #1c1c1c">/flag</code></h2><br>
-            <p>Content-Type: application/json</p>
-            <p>Header:
-            <pre>Authorization: {{info.Token}}</pre>
-            </p>
-            <p>Body:</p>
+            <span><b>Header</b></span><br>
+            <span>Content-Type: application/json</span><br>
+            <span>Authorization: {{info.Token}}</span><br>
+            <p><b>Body</b></p>
             <code class="pa-3" style="width: 100%; background-color: #1c1c1c; color: rgba(255, 255, 255, 0.7);">{"flag":
                 "your_flag_here"}</code>
             <br><br>
@@ -33,6 +36,8 @@
 </template>
 
 <script>
+    import axios from "axios";
+
     export default {
         name: "SubmitFlag",
 
@@ -43,6 +48,7 @@
 
             message: '',
             snackBarVisible: false,
+            snackBarColor: 'success',
         }),
 
         mounted() {
@@ -56,16 +62,22 @@
                 })
             },
             submitFlag() {
-                this.utils.POST('/flag', {
+                axios.post(this.utils.baseURL + '/flag', {
                     'flag': this.inputFlag
+                }, {
+                    headers: {
+                        'Authorization': this.info.Token
+                    }
                 }).then(res => {
                     this.inputFlag = ''
-                    this.message = res
+                    this.message = res.data.data
+                    this.snackBarColor = 'success'
                     this.snackBarVisible = true
                 }).catch(err => {
                     this.message = err.response.data.msg
+                    this.snackBarColor = 'error'
                     this.snackBarVisible = true
-                })
+                });
             }
         }
     }

src/views/Main.vue

@@ -9,31 +9,32 @@
             <v-col cols="6" md="4">
                 <!-- 靶机信息 -->
                 <Info/>
+                <copyrights/>
             </v-col>
             <v-col cols="12" md="8">
                 <v-card class="mx-auto">
-                    <v-card-title></v-card-title>
+                    <v-card-title>实时动态</v-card-title>
                     <v-card-text>
-
+                        <LiveLog/>
                     </v-card-text>
                 </v-card>
-
                 <br>
                 <SubmitFlag/>
             </v-col>
         </v-row>
-
     </v-container>
 </template>
 
 <script>
     import Timer from "../components/Timer";
     import Info from "../components/Info";
     import SubmitFlag from "../components/SubmitFlag";
+    import LiveLog from "../components/LiveLog";
+    import Copyrights from "../components/Copyrights";
 
     export default {
         name: "Main",
-        components: {SubmitFlag, Info, Timer}
+        components: {Copyrights, LiveLog, SubmitFlag, Info, Timer}
     }
 </script>