diff --git a/app/Http/Controllers/Api/TunnelController.php b/app/Http/Controllers/Api/TunnelController.php
index 7cfeeb6..fcc0e27 100644
--- a/app/Http/Controllers/Api/TunnelController.php
+++ b/app/Http/Controllers/Api/TunnelController.php
@@ -3,7 +3,10 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Models\Server;
+use App\Models\Tunnel;
 use Illuminate\Http\Request;
+use Illuminate\Support\Str;
 
 class TunnelController extends Controller
 {
@@ -13,7 +16,7 @@ class TunnelController extends Controller
     public function index(Request $request)
     {
         return $this->success(
-            $request->user()->tunnels()
+            $request->user()->tunnels()->get()
         );
     }
 
@@ -22,7 +25,122 @@ public function index(Request $request)
      */
     public function store(Request $request)
     {
-        //
+        $request->validate([
+            'name' => 'required',
+            'protocol' => 'required',
+            'local_address' => 'required',
+            'server_id' => 'required',
+        ]);
+
+        $data = $request->only([
+            'name', 'protocol', 'local_address', 'server_id', 'remote_port', 'custom_domain',
+        ]);
+
+        if (!strpos($request->input('local_address'), ':')) {
+            return $this->error('本地地址必须包含端口号。');
+        }
+
+        $local_ip_port = explode(':', $request->input('local_address'));
+
+        // port must be a number
+        if (!is_numeric($local_ip_port[1])) {
+            return $this->error('端口号必须是数字。');
+        }
+
+        // port must be a number between 1 and 65535
+        if ($local_ip_port[1] < 1 || $local_ip_port[1] > 65535) {
+            return $this->error('本地地址端口号必须在 1 和 65535 之间。');
+        }
+
+        $server = Server::find($request->input('server_id'));
+
+        if (is_null($server)) {
+            return $this->error('找不到服务器。');
+        }
+
+        if (Tunnel::where('server_id', $server->id)->count() > $server->max_tunnels) {
+            return $this->error('服务器无法开设更多隧道了。');
+        }
+
+        if ($request->input('protocol') == 'http' || $request->input('protocol') == 'https') {
+            // if (!auth()->user()->verified_at) {
+            //     return failed('必须要先实名认证才能创建 HTTP(S) 隧道。');
+            // }
+
+            if ($request->filled('remote_port')) {
+                return $this->error('此协议不支持指定远程端口号。');
+            }
+
+            $data['remote_port'] = null;
+
+            // 检测 域名格式 是否正确
+            if (!preg_match('/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/', $request->input('custom_domain'))) {
+                return $this->error('域名格式不正确。');
+            }
+
+            if ($request->has('custom_domain')) {
+                $custom_domain_search = Tunnel::where('server_id', $request->input('server_id'))->where('custom_domain', $request->input('custom_domain'))->where('protocol', $request->input('protocol'))->exists();
+                if ($custom_domain_search) {
+                    return $this->error('这个域名已经被使用了');
+                }
+            } else {
+                return $this->error('必须提供域名。');
+            }
+
+            $data['custom_domain'] = Str::lower($request->input('custom_domain'));
+
+            if (str_contains($request->input('custom_domain'), ',')) {
+                return $this->error('一次请求只能添加一个域名。');
+            }
+        } elseif ($request->input('protocol') == 'tcp' || $request->input('protocol') == 'udp') {
+            if ($request->filled('custom_domain')) {
+                return $this->error('此协议不支持指定域名。');
+            }
+
+            $data['custom_domain'] = null;
+            $request->validate([
+                'remote_port' => "required|integer|max:$server->max_port|min:$server->min_port|bail",
+            ]);
+
+            if ($request->input('remote_port') == $server->server_port || $request->input('remote_port') == $server->dashboard_port) {
+                return $this->error('无法使用这个远程端口。');
+            }
+
+            // 检查端口范围
+            if ($request->input('remote_port') < $server->min_port || $request->input('remote_port') > $server->max_port) {
+                return $this->error('远程端口号必须在 ' . $server->min_port . ' 和 ' . $server->max_port . ' 之间。');
+            }
+
+            $remote_port_search = Tunnel::where('server_id', $server->id)->where('remote_port', $request->input('remote_port'))->where('protocol', strtolower($request->protocol))->exists();
+            if ($remote_port_search) {
+                return $this->error('这个远程端口已经被使用了。');
+            }
+        } elseif ($request->input('protocol') === 'stcp' || $request->input('protocol') === 'xtcp') {
+            $data['custom_domain'] = null;
+            $data['remote_port'] = null;
+
+            $request->validate(['sk' => 'required|alpha_dash|min:3|max:15']);
+
+            $data['sk'] = $request->input('sk');
+        } else {
+            return $this->error('不支持的协议。');
+        }
+
+        $data['protocol'] = Str::lower($data['protocol']);
+
+        $test_protocol = 'allow_' . $data['protocol'];
+
+        if (!$server->$test_protocol) {
+            return $this->error('服务器不允许这个协议。');
+        }
+
+        $tunnel = auth('sanctum')->user()->tunnels()->create($data);
+
+
+        // 增加服务器的 tunnel 数量
+        $server->increment('tunnels');
+
+        return $this->created($tunnel);
     }
 
     /**
diff --git a/app/Models/User.php b/app/Models/User.php
index 4e22adc..60ab3f0 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -4,6 +4,7 @@
 
 // use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
@@ -49,7 +50,7 @@ public function isAdmin()
     }
 
     // tunnels
-    public function tunnels()
+    public function tunnels(): HasMany
     {
         return $this->hasMany(Tunnel::class);
     }
diff --git a/resources/js/plugins/router.js b/resources/js/plugins/router.js
index 1a4d933..9b6f6aa 100644
--- a/resources/js/plugins/router.js
+++ b/resources/js/plugins/router.js
@@ -26,6 +26,14 @@ const routes = [
             title: "创建隧道",
         },
     },
+    {
+        path: "/tunnels/:id",
+        name: "tunnels.show",
+        component: () => import("../views/Tunnels/Show.vue"),
+        meta: {
+            title: "隧道",
+        },
+    },
     {
         path: "/servers",
         name: "servers",
@@ -52,6 +60,8 @@ const routes = [
             title: "创建服务器",
         },
     },
+
+
 ];
 
 
diff --git a/resources/js/views/Servers/Index.vue b/resources/js/views/Servers/Index.vue
index af301f0..b8c968f 100644
--- a/resources/js/views/Servers/Index.vue
+++ b/resources/js/views/Servers/Index.vue
@@ -6,9 +6,12 @@
 
             <template v-for="server in servers">
                 <router-link :to="{
-                    name: 'servers.edit',
+                    name: isAdmin() ? 'servers.edit' : 'tunnels.create',
                     params: {
                     id: server.id
+                },
+                query: {
+                    server_id: server.id
                 }
             }" class="list-group-item list-group-item-action" aria-current="true">
                     <div class="d-flex w-100 justify-content-between">
@@ -70,4 +73,10 @@ http.get('servers').then((res) => {
     servers.value = res.data
 })
 
+
+
+const isAdmin = () => {
+    return window['Base']['User']['is_admin']
+}
+
 </script>
diff --git a/resources/js/views/Tunnels/Create.vue b/resources/js/views/Tunnels/Create.vue
index 816ebe8..188a47c 100644
--- a/resources/js/views/Tunnels/Create.vue
+++ b/resources/js/views/Tunnels/Create.vue
@@ -1,3 +1,176 @@
 <template>
     <h3>创建隧道</h3>
+
+
+    <h5>好的名称是好的开始。</h5>
+    <div class="form-floating mb-3">
+        <input v-model="data.name" type="text" class="form-control" id="tunnelName" placeholder="起一个易于辨别的名字">
+        <label for="tunnelName">隧道名称</label>
+    </div>
+
+    <div class="form-floating mb-3">
+        <select v-model="data.server_id" class="form-select" id="serverSelect">
+            <option v-for="server in servers" :value="server.id">{{ server.name }}</option>
+        </select>
+        <label for="serverSelect">服务器</label>
+    </div>
+
+    <div v-if="server">
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolHTTP" value="http" :disabled="!server.allow_http"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolHTTP">HTTP</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolHTTPS" value="https" :disabled="!server.allow_https"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolHTTPS">HTTPS</label>
+        </div>
+
+
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolTCP" value="tcp" :disabled="!server.allow_tcp"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolTCP">TCP</label>
+        </div>
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolUDP" value="udp" :disabled="!server.allow_udp"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolUDP">UDP</label>
+        </div>
+
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolSTCP" value="stcp" :disabled="!server.allow_stcp"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolSTCP">STCP</label>
+        </div>
+
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolSUDP" value="sudp" :disabled="!server.allow_sudp"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolSUDP">SUDP</label>
+        </div>
+
+        <div class="form-check form-check-inline">
+            <input class="form-check-input" type="radio" id="protocolXTCP" value="xtcp" :disabled="!server.allow_xtcp"
+                   v-model="data.protocol">
+            <label class="form-check-label" for="protocolXTCP">XTCP</label>
+        </div>
+
+    </div>
+
+    <h5 class="mt-3">本地服务的地址</h5>
+    <div class="form-floating mb-3">
+        <input v-model="data.local_address" type="text" class="form-control" id="localAddress"
+               placeholder="比如 127.0.0.1:80">
+        <label for="localAddress">本地地址</label>
+    </div>
+
+
+    <div v-if="data.protocol === 'http'|| data.protocol === 'https'">
+        <h5>自定义域名</h5>
+        <div class="form-floating mb-3">
+            <input v-model="data.custom_domain" type="text" class="form-control" id="customDomain"
+                   placeholder="比如 example.com">
+            <label for="customDomain">自定义域名</label>
+        </div>
+    </div>
+
+    <div v-if="data.protocol === 'tcp' || data.protocol === 'udp'">
+        <h5>外部端口</h5>
+        <div class="form-floating mb-3">
+            <input v-model="data.remote_port" type="text" class="form-control" id="remotePort"
+                   placeholder="比如 25565">
+            <label for="remotePort">外部端口</label>
+        </div>
+    </div>
+
+    <div v-if="data.protocol === 'stcp' || data.protocol === 'sudp' || data.protocol === 'xtcp' ">
+        <h5>访问密钥</h5>
+        <div class="form-floating mb-3">
+            <input v-model="data.sk" type="text" class="form-control" id="sk"
+                   placeholder="比如 25565">
+            <label for="sk">访问密钥</label>
+        </div>
+
+
+    </div>
+
+    <button class="btn btn-primary" v-on:click="create">创建</button>
+
 </template>
+
+<script setup>
+
+import {onMounted, ref, watch} from 'vue'
+import http from '../../plugins/http'
+
+const server = ref({
+    id: "",
+    name: "",
+    allow_http: true,
+    allow_https: true,
+    allow_tcp: true,
+    allow_udp: true,
+    allow_stcp: true,
+    allow_sudp: true,
+    allow_xtcp: true,
+})
+
+
+const servers = ref([])
+const data = ref({
+    name: "",
+    protocol: "http",
+    server_id: "",
+    local_address: "",
+    custom_domain: "",
+    remote_port: "",
+    sk: "",
+})
+
+
+http.get('/servers').then(res => {
+    servers.value = res.data
+
+    if (data.value.server_id) {
+        return
+    }
+
+    if (servers.value.length > 0) {
+        data.value.server_id = servers.value[0].id
+    }
+})
+
+
+function handleServerUpdate() {
+    // update selected server
+    server.value = servers.value.find(s => s['id'] === data.value.server_id)
+    // update server_id in query
+    const urlParams = new URLSearchParams(window.location.search)
+    urlParams.set('server_id', data.value.server_id)
+    window.history.replaceState({}, '', `${window.location.pathname}?${urlParams.toString()}`)
+}
+
+
+watch(() => data.value.server_id, handleServerUpdate)
+
+const getServer = async () => {
+    const urlParams = new URLSearchParams(window.location.search)
+    data.value.server_id = urlParams.get('server_id')
+}
+
+onMounted(() => {
+    getServer()
+})
+
+const create = () => {
+    http.post('/tunnels', data.value).then(res => {
+        if (res.status === 200 || res.status === 201) {
+            alert("创建成功")
+        }
+    })
+}
+
+
+</script>
diff --git a/resources/js/views/Tunnels/Index.vue b/resources/js/views/Tunnels/Index.vue
index 1eb9efa..145dab1 100644
--- a/resources/js/views/Tunnels/Index.vue
+++ b/resources/js/views/Tunnels/Index.vue
@@ -3,44 +3,50 @@
 
     <table class="table table-hover">
         <thead>
-            <tr>
-                <th scope="col">ID</th>
-                <th scope="col">名称</th>
-                <th scope="col">协议</th>
-                <th scope="col">本地地址</th>
-                <th scope="col">远程端口/域名</th>
-                <th scope="col">连接数</th>
-                <th scope="col">下载流量</th>
-                <th scope="col">上载流量</th>
-                <th scope="col">服务器</th>
-                <th scope="col">状态</th>
-            </tr>
+        <tr>
+            <th scope="col">ID</th>
+            <th scope="col">名称</th>
+            <th scope="col">协议</th>
+            <th scope="col">本地地址</th>
+            <th scope="col">远程端口/域名</th>
+            <th scope="col">连接数</th>
+            <th scope="col">下载流量</th>
+            <th scope="col">上载流量</th>
+            <th scope="col">服务器</th>
+            <th scope="col">状态</th>
+        </tr>
         </thead>
         <tbody>
-            <tr>
-                <th>1</th>
-                <td><a href="http://portio.test/tunnels/1/edit">stcp</a></td>
-                <td>STCP</td>
-                <td>127.0.0.1:80</td>
+        <tr v-for="tunnel in tunnels">
+            <th>1</th>
+            <td>
+                <router-link :to="{name: 'tunnels.show', params: {id: tunnel.id}}">
+                    {{ tunnel.name }}
+                </router-link>
 
-                <td>127.0.01:</td>
+            </td>
+            <td>STCP</td>
+            <td>127.0.0.1:80</td>
 
-                <td>0</td>
-                <td>0.000 Bytes</td>
-                <td>0.000 Bytes</td>
+            <td>127.0.01:</td>
 
-                <td><a href="http://portio.test/servers/1">Test</a></td>
+            <td>0</td>
+            <td>0.000 Bytes</td>
+            <td>0.000 Bytes</td>
 
-                <td>
-                    <span class="text-danger">离线</span>
-                </td>
-            </tr>
+            <td><a href=" http:
+                //portio.test/servers/1">Test</a></td>
+
+            <td>
+                <span class="text-danger">离线</span>
+            </td>
+        </tr>
         </tbody>
     </table>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import {ref} from "vue";
 import http from "../../plugins/http";
 
 
diff --git a/resources/js/views/Tunnels/Show.vue b/resources/js/views/Tunnels/Show.vue
new file mode 100644
index 0000000..e69de29