feat: add user interface to the frontend for customizing setup parame…

…ters
deximy · May 26, 2023 · e617b75 · e617b75
1 parent eee2cda
commit e617b75
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 4 deletions.
diff --git a/L4d2PanelFrontend/src/Store.ts b/L4d2PanelFrontend/src/Store.ts
@@ -10,13 +10,15 @@ export const UseStore = DefineStore(
         const selected_file_name = ref("");
         const selected_file_type = ref("");
         const current_path = ref("./");
+        const additional_params = ref("");
         return {
             endpoint,
             component,
             is_server_running,
             selected_file_name,
             selected_file_type,
-            current_path
+            current_path,
+            additional_params,
         }
     }
 );

diff --git a/L4d2PanelFrontend/src/api.ts b/L4d2PanelFrontend/src/api.ts
@@ -3,14 +3,20 @@ import * as tus from "tus-js-client";
 
 import {UseStore} from "./Store";
 
-const RunServer = async () => {
+const RunServer = async (additional_params: string) => {
     const store = UseStore();
     // let uri = "http://" + store.endpoint + "/processes";
     let uri = "/processes";
     await fetch(
         uri,
         {
             method: "POST",
+            headers: new Headers(
+                {
+                    "Content-Type": "application/json"
+                }
+            ),
+            body: `"${additional_params}"`,
         }
     );
 };

diff --git a/L4d2PanelFrontend/src/components/SideMenu.vue b/L4d2PanelFrontend/src/components/SideMenu.vue
@@ -12,6 +12,12 @@ import {UseStore} from "../Store";
 
 const router = UseRouter();
 const route = UseRoute();
+const store = UseStore();
+
+const HandleRunServer = () => {
+    loading.value = true;
+    RunServer("+map c2m1 -ip 0.0.0.0 -port 27015 " + store.additional_params);
+};
 
 const current_option = ref(route.name?.toString());
 watch(
@@ -120,12 +126,51 @@ const options = [
             );
         }
     },
+    {
+        key: "setup",
+        label: "设置启动参数",
+        icon: () => {
+            return h(
+                NIcon,
+                null,
+                {
+                    default: () => {
+                        return [
+                            h(
+                                "svg",
+                                {
+                                    "xmlns": "http://www.w3.org/2000/svg",
+                                    "xmlns:xlink": "http://www.w3.org/1999/xlink",
+                                    "viewBox": "0 0 24 24",
+                                },
+                                h(
+                                    "g",
+                                    {
+                                        "fill": "none",
+                                    },
+                                    [
+                                        h(
+                                            "path",
+                                            {
+                                                "fill": "currentColor",
+                                                "d": "M12.013 2.25c.734.008 1.465.093 2.181.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.928 1.116l1.4-.615a.75.75 0 0 1 .85.174a9.793 9.793 0 0 1 2.204 3.792a.75.75 0 0 1-.271.825l-1.242.916a1.38 1.38 0 0 0 .001 2.226l1.243.915a.75.75 0 0 1 .271.826a9.798 9.798 0 0 1-2.203 3.792a.75.75 0 0 1-.849.175l-1.406-.617a1.38 1.38 0 0 0-1.927 1.114l-.169 1.526a.75.75 0 0 1-.572.647a9.518 9.518 0 0 1-4.405 0a.75.75 0 0 1-.572-.647l-.17-1.524a1.382 1.382 0 0 0-1.924-1.11l-1.407.616a.75.75 0 0 1-.849-.175a9.798 9.798 0 0 1-2.203-3.796a.75.75 0 0 1 .271-.826l1.244-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.272-.826a9.793 9.793 0 0 1 2.205-3.792a.75.75 0 0 1 .849-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.718-.159 1.45-.243 2.202-.252zm0 1.5a9.135 9.135 0 0 0-1.355.117l-.109.977A2.886 2.886 0 0 1 6.525 7.17l-.898-.394a8.293 8.293 0 0 0-1.348 2.317l.798.587a2.881 2.881 0 0 1 0 4.643l-.798.588c.32.842.775 1.626 1.347 2.322l.906-.397a2.882 2.882 0 0 1 4.017 2.318l.108.984c.89.15 1.799.15 2.689 0l.108-.984a2.88 2.88 0 0 1 4.02-2.322l.904.396a8.299 8.299 0 0 0 1.347-2.318l-.798-.588a2.88 2.88 0 0 1 0-4.643l.796-.587a8.293 8.293 0 0 0-1.348-2.317l-.896.393a2.884 2.884 0 0 1-4.023-2.324l-.11-.976a8.99 8.99 0 0 0-1.333-.117zM12 8.25a3.75 3.75 0 1 1 0 7.5a3.75 3.75 0 0 1 0-7.5zm0 1.5a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 0 0 0-4.5z"
+                                            }
+                                        ),
+                                    ]
+                                )
+                            )
+                        ]
+                    }
+                }
+            );
+        }
+    },
 ]
 
 const is_server_running = ref(false);
 const loading = ref(false);
 watch(
-    () => UseStore().is_server_running,
+    () => store.is_server_running,
     value => {
         is_server_running.value = value;
         loading.value = false;
@@ -142,7 +187,7 @@ watch(
             type="primary"
             v-show="!is_server_running"
             :loading="loading"
-            @click="RunServer(); loading = true;"
+            @click="HandleRunServer"
         >
             启动
         </n-button>

diff --git a/L4d2PanelFrontend/src/main.ts b/L4d2PanelFrontend/src/main.ts
@@ -7,6 +7,7 @@ import App from "./App.vue";
 import Dashboard from "./views/Dashboard.vue";
 import Terminal from "./components/Terminal.vue";
 import FileManager from "./components/FileManager.vue";
+import SetupParameters from "./views/SetupParameters.vue";
 
 import {UseStore} from "./Store";
 
@@ -39,6 +40,14 @@ const routes = [
                     store.component = "file";
                 },
             },
+            {
+                path: "setup",
+                name: "setup",
+                component: SetupParameters,
+                beforeEnter: () => {
+                    store.component = "setup";
+                },
+            },
             {
                 path: ":path(.*)*",
                 redirect: {

diff --git a/L4d2PanelFrontend/src/views/SetupParameters.vue b/L4d2PanelFrontend/src/views/SetupParameters.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {NInputGroup} from "naive-ui";
+import {NInputGroupLabel} from "naive-ui";
+import {NInput} from "naive-ui";
+
+import {UseStore} from "../Store";
+const store = UseStore();
+</script>
+
+<template>
+    <div class="setup-params">
+        <n-input-group style="align-items: center;">
+            <span style="white-space: nowrap;">请输入额外参数：</span>
+            <n-input-group-label style="white-space: nowrap;">
+                +map c2m1 -ip 0.0.0.0 -port 27015
+            </n-input-group-label>
+            <n-input v-model:value="store.additional_params"/>
+        </n-input-group>
+    </div>
+</template>
+
+<style scoped>
+.setup-params {
+    width: 90%;
+    margin-left: 5%;
+    margin-right: 5%;
+    margin-top: 5%;
+}
+</style>