diff --git a/resources/js/views/Tunnels/Index.vue b/resources/js/views/Tunnels/Index.vue
index 1d6af54..546471d 100644
--- a/resources/js/views/Tunnels/Index.vue
+++ b/resources/js/views/Tunnels/Index.vue
@@ -40,7 +40,7 @@
             <td>0.000 Bytes</td>
             <td>0.000 Bytes</td>
 
-            <td>Test</td>
+            <td>{{ tunnel.server.name }}</td>
 
             <td>
                 <span class="text-danger">离线</span>
@@ -55,7 +55,17 @@ import {ref} from "vue";
 import http from "../../plugins/http";
 
 
-const tunnels = ref([])
+const tunnels = ref([
+    {
+        id: '0',
+        protocol: '',
+        server: {
+            server_address: '',
+            server_port: '',
+            name: '',
+        }
+    }
+])
 
 http.get('tunnels').then((res) => {
     tunnels.value = res.data
diff --git a/resources/js/views/Tunnels/Show.vue b/resources/js/views/Tunnels/Show.vue
index e62de24..2dfe5cd 100644
--- a/resources/js/views/Tunnels/Show.vue
+++ b/resources/js/views/Tunnels/Show.vue
@@ -1,4 +1,39 @@
 <template>
-
+    <div>
+        <h2>隧道: {{ tunnel.name }}</h2>
+    </div>
 </template>
 
+<script setup>
+
+import {onMounted, ref} from "vue";
+import http from "../../plugins/http";
+import router from "../../plugins/router";
+
+let tunnel_id = router.currentRoute.value.params.id
+
+const tunnel = ref({
+    name: '',
+    protocol: '',
+    local_address: '',
+    remote_port: '',
+})
+
+
+function getTunnel() {
+    http.get(`/tunnels/${tunnel_id}`).then(res => {
+        tunnel.value = res.data
+    })
+}
+
+function updateTunnel() {
+    http.put(`/tunnels/${tunnel_id}`, tunnel.value).then(res => {
+        tunnel.value = res.data
+    })
+}
+
+onMounted(getTunnel)
+
+
+
+</script>