temp code for admin ui

public/admin/src/components/Configuration.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2>Configuration</h2>
+    <form @submit.prevent="saveConfig">
+      <div>
+        <label for="serverName">Server Name:</label>
+        <input type="text" id="serverName" v-model="config.serverName" required>
+      </div>
+      <div>
+        <label for="port">Port:</label>
+        <input type="number" id="port" v-model="config.port" required>
+      </div>
+      <div>
+        <label for="host">Host:</label>
+        <input type="text" id="host" v-model="config.host" required>
+      </div>
+      <button type="submit">Save</button>
+    </form>
+    <p v-if="message">{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        serverName: '',
+        port: 8080,
+        host: 'localhost'
+      },
+      message: ''
+    }
+  },
+  methods: {
+    async saveConfig() {
+      try {
+        const response = await fetch('/api/config', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(this.config)
+        })
+        if (response.ok) {
+          this.message = 'Configuration saved successfully'
+        } else {
+          this.message = 'Failed to save configuration'
+        }
+      } catch (err) {
+        this.message = 'Failed to save configuration'
+      }
+    }
+  }
+}
+</script>

public/admin/src/components/Login.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h2>Login</h2>
+    <form @submit.prevent="login">
+      <div>
+        <label for="username">Username:</label>
+        <input type="text" id="username" v-model="username" required>
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" v-model="password" required>
+      </div>
+      <button type="submit">Login</button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      error: ''
+    }
+  },
+  methods: {
+    async login() {
+      try {
+        const response = await fetch('/api/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            username: this.username,
+            password: this.password
+          })
+        })
+        if (response.ok) {
+          this.$router.push('/status')
+        } else {
+          this.error = 'Invalid username or password'
+        }
+      } catch (err) {
+        this.error = 'Login failed'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.error {
+  color: red;
+}
+</style>

public/admin/src/components/ServerStatus.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h2>Server Status</h2>
+    <p>Server is running</p>
+    <button @click="refreshStatus">Refresh Status</button>
+    <p v-if="status">{{ status }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      status: ''
+    }
+  },
+  methods: {
+    async refreshStatus() {
+      try {
+        const response = await fetch('/api/status')
+        if (response.ok) {
+          const data = await response.json()
+          this.status = data.status
+        } else {
+          this.status = 'Failed to fetch status'
+        }
+      } catch (err) {
+        this.status = 'Failed to fetch status'
+      }
+    }
+  }
+}
+</script>

public/admin/src/router/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Login from '@/components/Login.vue'
+import ServerStatus from '@/components/ServerStatus.vue'
+import Configuration from '@/components/Configuration.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login
+    },
+    {
+      path: '/status',
+      name: 'ServerStatus',
+      component: ServerStatus
+    },
+    {
+      path: '/config',
+      name: 'Configuration',
+      component: Configuration
+    },
+    {
+      path: '/',
+      redirect: '/login'
+    }
+  ]
+})

public/index.html

@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WenSocket</title>
-    <style>
-        div{
-            width: 200px;
-            height: 200px;
-            border:1px solid;
-            margin-top: 5px;
-        }
-    </style>
-</head>
-<body>
-    <input type="text" placeholder="请输入内容">
-    <button>提交</button>
-    <div></div>
-    
-    <script>
-        const input = document.querySelector('input')
-        const button = document.querySelector('button')
-        const div = document.querySelector('div')
-        
-        //创建WebSocket实例
-        const socket = new WebSocket("ws://localhost:8080/ws")
-        
-        //监听服务是否链接
-        socket.addEventListener('open',()=>{
-            div.innerHTML = "服务链接成功"
-        })
-        //button触发点击事件，将input框中的内容发送至websocket
-        //查看websocket是否接收到数据：chrome F12打开控制台》Network》WS》echo.websocket.org》messages
-        button.addEventListener('click',()=>{
-            const value = input.value
-            socket.send(value)
-        })
-        // 将接收到的数据插入到div中
-        socket.addEventListener('message',(e)=>{
-            console.log(e)
-            div.innerHTML = e.data
-        })
-    </script>
-</body>
-</html>