初次提交

2022-04-15 12:26:43 +08:00
commit 09b2956573
30 changed files with 952 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <title>首页</title>
+    {% include 'layout/head.html' %}
+    <style>
+        table {
+            border: 1px solid black;
+        }
+
+        table tr > td {
+            padding: 0;
+            margin: 0;
+            border: 1px solid black;
+        }
+
+        td.success {
+            background: green;
+            color: white;
+        }
+
+        td.warning {
+            background: orangered;
+            color: white;
+        }
+
+        #app[v-cloak] {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+{% raw %}
+<div id="app" v-cloak>
+    <h1>TEST</h1>
+    <hr>
+    <h2>当前状态</h2>
+    <table class="current-status-table">
+        <tbody>
+        <tr>
+            <td>系统</td>
+            <td>{{ collector.basic.system.os }}</td>
+        </tr>
+        <tr>
+            <td>FFMPEG状态</td>
+            <td :class="collector.basic.exec.ffmpeg ? 'success' : 'warning'"></td>
+        </tr>
+        <tr>
+            <td>弹幕工具状态</td>
+            <td :class="collector.basic.exec.danmaku ? 'success' : 'warning'"></td>
+        </tr>
+        </tbody>
+    </table>
+    <h2>配置状态</h2>
+    <table class="current-config">
+        <thead>
+        <tr>
+            <td colspan="2">FFMPEG</td>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>命令</td>
+            <td>{{ config.ffmpeg.exec }}</td>
+        </tr>
+        <tr>
+            <td>GPU使用</td>
+            <td :class="{warning: !config.ffmpeg.gpu, success: config.ffmpeg.gpu}"></td>
+        </tr>
+        <tr>
+            <td>视频比特率</td>
+            <td>{{ config.ffmpeg.bitrate }}</td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+{% endraw %}
+</body>
+<script>
+    Vue.devtools = true
+    Vue.createApp({
+        data() {
+            return {
+                collector: {
+                    basic: {
+                        exec: {
+                            ffmpeg: false,
+                            danmaku: false,
+                        },
+                        system: {
+                            os: "",
+                        }
+                    }
+                },
+                config: {
+                    danmaku: {
+                        exec: "",
+                        speed: 0,
+                        font: "",
+                        resolution: "",
+                    },
+                    video: {
+                        title: "",
+                    },
+                    ffmpeg: {
+                        exec: "",
+                        gpu: false,
+                        bitrate: "",
+                    },
+                    web: {
+                        host: "",
+                        port: 0,
+                    }
+                }
+            }
+        },
+        created() {
+            axios({
+                url: "/api/collector/"
+            }).then((response) => {
+                this.collector.basic = response.data;
+            })
+            axios({
+                url: "/api/config/"
+            }).then((response) => {
+                this.config = response.data;
+            })
+        },
+    }).mount("#app")
+</script>
+</html>
--- a/templates/layout/foot.html
+++ b/templates/layout/foot.html
--- a/templates/layout/head.html
+++ b/templates/layout/head.html
@ -0,0 +1,4 @@
+<meta charset="UTF-8">
+<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/modern-normalize/1.1.0/modern-normalize.css" type="text/css" rel="stylesheet" />
+<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/3.2.31/vue.global.js" type="application/javascript"></script>
+<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/axios/0.26.0/axios.js" type="application/javascript"></script>