diff --git a/index.html b/index.html
index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..ffbf6292188d51f98ef178205c5a385af575f401 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,61 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<template>
+  <div class="input-form">
+    <h1>command</h1>
+    <form @submit.prevent="submitForm">
+      <textarea style="width: 100%;" v-model="inputText" cols="30" rows="10"></textarea>
+      <br>
+      <button type="submit">提交</button>
+    </form>
+    <textarea style="width: 100%;" name="output" id="" cols="30" rows="10">{{ this.msg.outputText }}</textarea>
+    <textarea v-if="this.msg.error" style="width: 100%;" id="errorMessage" rows="10">{{ this.msg.error }}</textarea>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  name: "About",
+  data() {
+    return {
+      msg: "",
+      inputText: "",
+    };
+  },
+  created() {
+    axios
+      .get("http://localhost:8080/about")
+      .then((res) => {
+        this.msg = res.data;
+      })
+      .catch((err) => {
+      });
+  },
+  methods: {
+    submitForm() { // 处理提交逻辑 
+      axios
+        .post("http://localhost:8080/about", {
+          inputText: this.inputText
+        })
+        .then((res) => {
+          this.msg = res.data;
+        })
+        .catch((err) => {
+        });
+    },
+  },
+
+};
+document.onkeydown = function (event) {
+  if (event.key === 'F5') {
+    event.preventDefault();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1,
+h2 {
+  font-weight: normal;
+}
+</style>
