fanhua1994/api-proxy-mock
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat 修改页面样式

Browse Source
This commit is contained in:
lenmotion 2026-04-24 09:37:27 +08:00
parent f44f0c2cea
commit 47cd3b338e
1 changed files with 53 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
admin.html
View File

@ -14,7 +14,7 @@
background: #f5f7fa; background: #f5f7fa;
} }
.container { .container {
max-width: 1200px; max-width: 1320px;
margin: 20px auto; margin: 20px auto;
padding: 0 16px 24px; padding: 0 16px 24px;
} }
@ -51,6 +51,9 @@
margin-top: 12px; margin-top: 12px;
text-align: right; text-align: right;
} }
.route-table .el-table__cell .cell {
white-space: nowrap;
}
</style> </style>
</head> </head>
<body> <body>
@ -72,18 +75,18 @@
<strong>路由配置（routes）</strong> <strong>路由配置（routes）</strong>
<el-button size="mini" type="primary" @click="openRouteDialogForCreate">新增路由</el-button> <el-button size="mini" type="primary" @click="openRouteDialogForCreate">新增路由</el-button>
</div> </div>
<el-table :data="pagedRoutes" border> <el-table :data="pagedRoutes" border class="route-table" style="width: 100%;">
<el-table-column label="接口名称" min-width="220"> <el-table-column label="接口名称" min-width="180" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.apiName || "-" }}</span> <span>{{ scope.row.apiName || "-" }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="请求路径" min-width="260"> <el-table-column label="请求路径" min-width="220" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.route }}</span> <span>{{ scope.row.route }}</span>
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<span>{{ scope.row.filePath }}</span> <span>{{ scope.row.filePath }}</span>
</template> </template>
@ -98,7 +101,7 @@
<el-switch v-model="scope.row.enabled"></el-switch> <el-switch v-model="scope.row.enabled"></el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="180"> <el-table-column label="操作" width="160">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
@ -269,12 +272,22 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="返回状态码"> <el-form-item label="返回状态码">
<el-input-number <el-select
v-model="routeDialog.form.statusCode" v-model="routeDialog.form.statusCode"
:min="100" filterable
:max="599" allow-create
default-first-option
clearable
placeholder="先选常用状态码，也可直接输入"
style="width: 100%;" 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>
<el-form-item label="是否启用 Mock"> <el-form-item label="是否启用 Mock">
<el-switch v-model="routeDialog.form.enabled"></el-switch> <el-switch v-model="routeDialog.form.enabled"></el-switch>
@ -328,6 +341,22 @@
activeMainTab: "routes", activeMainTab: "routes",
apiList: [], apiList: [],
mockFiles: [], 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: { routePagination: {
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
@ -397,6 +426,13 @@
var start = (currentPage - 1) * pageSize; var start = (currentPage - 1) * pageSize;
return source.slice(start, start + 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) { handleRoutePageChange: function (page) {
this.routePagination.currentPage = page; this.routePagination.currentPage = page;
}, },
@ -418,7 +454,9 @@
rawRoute: rawRoute, rawRoute: rawRoute,
route: route, route: route,
filePath: routesObj[rawRoute], filePath: routesObj[rawRoute],
statusCode: Number(routeStatusesObj && routeStatusesObj[rawRoute]) || 200, statusCode: self.normalizeStatusCode(
routeStatusesObj && routeStatusesObj[rawRoute],
),
apiName: matched ? matched.name : "", apiName: matched ? matched.name : "",
selectedApiRoute: matched ? matched.route : "", selectedApiRoute: matched ? matched.route : "",
enabled: enabled, enabled: enabled,
@ -438,12 +476,13 @@
return obj; return obj;
}, },
toRouteStatusObject: function (routeArray) { toRouteStatusObject: function (routeArray) {
var self = this;
var obj = {}; var obj = {};
(routeArray || []).forEach(function (item) { (routeArray || []).forEach(function (item) {
var route = (item.route || "").trim(); var route = (item.route || "").trim();
if (!route) return; if (!route) return;
var routeKey = item.enabled === false ? "#" + route : route; var routeKey = item.enabled === false ? "#" + route : route;
var statusCode = Number(item.statusCode) || 200; var statusCode = self.normalizeStatusCode(item.statusCode);
obj[routeKey] = statusCode; obj[routeKey] = statusCode;
}); });
return obj; return obj;
@ -501,7 +540,7 @@
originalRawRoute: item.rawRoute || item.route || "", originalRawRoute: item.rawRoute || item.route || "",
route: item.route || "", route: item.route || "",
filePath: item.filePath || "mock/", filePath: item.filePath || "mock/",
statusCode: Number(item.statusCode) || 200, statusCode: this.normalizeStatusCode(item.statusCode),
enabled: item.enabled !== false, enabled: item.enabled !== false,
}; };
this.routeDialog.visible = true; this.routeDialog.visible = true;
@ -660,6 +699,7 @@
} }
var payload = Object.assign({}, this.routeDialog.form, { var payload = Object.assign({}, this.routeDialog.form, {
useExistingFile: true, useExistingFile: true,
statusCode: this.normalizeStatusCode(this.routeDialog.form.statusCode),
}); });
try { try {
var resp = await fetch("/__routes", { var resp = await fetch("/__routes", {