From 47cd3b338ecf5eb5975f943801de9988f49960bb Mon Sep 17 00:00:00 2001
From: lenmotion <lenmotion@sina.com>
Date: Fri, 24 Apr 2026 09:37:27 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin.html | 66 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 13 deletions(-)
diff --git a/admin.html b/admin.html
index b06eb73..0f11d9d 100644
--- a/admin.html
+++ b/admin.html
@@ -14,7 +14,7 @@
         background: #f5f7fa;
       }
       .container {
-        max-width: 1200px;
+        max-width: 1320px;
         margin: 20px auto;
         padding: 0 16px 24px;
       }
@@ -51,6 +51,9 @@
         margin-top: 12px;
         text-align: right;
       }
+      .route-table .el-table__cell .cell {
+        white-space: nowrap;
+      }
     </style>
   </head>
   <body>
@@ -72,18 +75,18 @@
           <strong>路由配置（routes）</strong>
           <el-button size="mini" type="primary" @click="openRouteDialogForCreate">新增路由</el-button>
         </div>
-        <el-table :data="pagedRoutes" border>
-          <el-table-column label="接口名称" min-width="220">
+        <el-table :data="pagedRoutes" border class="route-table" style="width: 100%;">
+          <el-table-column label="接口名称" min-width="180" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.apiName || "-" }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="请求路径" min-width="260">
+          <el-table-column label="请求路径" min-width="220" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.route }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="Mock 文件路径" min-width="300">
+          <el-table-column label="Mock 文件路径" min-width="240" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.filePath }}</span>
             </template>
@@ -98,7 +101,7 @@
               <el-switch v-model="scope.row.enabled"></el-switch>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="180">
+          <el-table-column label="操作" width="160">
             <template slot-scope="scope">
               <el-button
                 size="mini"
@@ -269,12 +272,22 @@
             </el-select>
           </el-form-item>
           <el-form-item label="返回状态码">
-            <el-input-number
+            <el-select
               v-model="routeDialog.form.statusCode"
-              :min="100"
-              :max="599"
+              filterable
+              allow-create
+              default-first-option
+              clearable
+              placeholder="先选常用状态码，也可直接输入"
               style="width: 100%;"
-            ></el-input-number>
+            >
+              <el-option
+                v-for="item in commonStatusCodes"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
           </el-form-item>
           <el-form-item label="是否启用 Mock">
             <el-switch v-model="routeDialog.form.enabled"></el-switch>
@@ -328,6 +341,22 @@
             activeMainTab: "routes",
             apiList: [],
             mockFiles: [],
+            commonStatusCodes: [
+              { value: 200, label: "200 OK" },
+              { value: 201, label: "201 Created" },
+              { value: 204, label: "204 No Content" },
+              { value: 400, label: "400 Bad Request" },
+              { value: 401, label: "401 Unauthorized" },
+              { value: 403, label: "403 Forbidden" },
+              { value: 404, label: "404 Not Found" },
+              { value: 409, label: "409 Conflict" },
+              { value: 422, label: "422 Unprocessable Entity" },
+              { value: 429, label: "429 Too Many Requests" },
+              { value: 500, label: "500 Internal Server Error" },
+              { value: 501, label: "501 Not Implemented" },
+              { value: 502, label: "502 Bad Gateway" },
+              { value: 503, label: "503 Service Unavailable" },
+            ],
             routePagination: {
               currentPage: 1,
               pageSize: 10,
@@ -397,6 +426,13 @@
             var start = (currentPage - 1) * pageSize;
             return source.slice(start, start + pageSize);
           },
+          normalizeStatusCode: function (value) {
+            var numeric = Number(value);
+            if (Number.isInteger(numeric) && numeric >= 100 && numeric <= 599) {
+              return numeric;
+            }
+            return 200;
+          },
           handleRoutePageChange: function (page) {
             this.routePagination.currentPage = page;
           },
@@ -418,7 +454,9 @@
                 rawRoute: rawRoute,
                 route: route,
                 filePath: routesObj[rawRoute],
-                statusCode: Number(routeStatusesObj && routeStatusesObj[rawRoute]) || 200,
+                statusCode: self.normalizeStatusCode(
+                  routeStatusesObj && routeStatusesObj[rawRoute],
+                ),
                 apiName: matched ? matched.name : "",
                 selectedApiRoute: matched ? matched.route : "",
                 enabled: enabled,
@@ -438,12 +476,13 @@
             return obj;
           },
           toRouteStatusObject: function (routeArray) {
+            var self = this;
             var obj = {};
             (routeArray || []).forEach(function (item) {
               var route = (item.route || "").trim();
               if (!route) return;
               var routeKey = item.enabled === false ? "#" + route : route;
-              var statusCode = Number(item.statusCode) || 200;
+              var statusCode = self.normalizeStatusCode(item.statusCode);
               obj[routeKey] = statusCode;
             });
             return obj;
@@ -501,7 +540,7 @@
               originalRawRoute: item.rawRoute || item.route || "",
               route: item.route || "",
               filePath: item.filePath || "mock/",
-              statusCode: Number(item.statusCode) || 200,
+              statusCode: this.normalizeStatusCode(item.statusCode),
               enabled: item.enabled !== false,
             };
             this.routeDialog.visible = true;
@@ -660,6 +699,7 @@
             }
             var payload = Object.assign({}, this.routeDialog.form, {
               useExistingFile: true,
+              statusCode: this.normalizeStatusCode(this.routeDialog.form.statusCode),
             });
             try {
               var resp = await fetch("/__routes", {
