加刷新按钮，切换tab自动刷新
This commit is contained in:
parent
a23a9846b3
commit
46bdff3734
81
admin.html
81
admin.html
@ -76,6 +76,7 @@
|
||||
<strong>路由配置（routes）</strong>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<el-input size="small" v-model="routeSearch" placeholder="搜索接口名称或路径" clearable style="width:220px;" prefix-icon="el-icon-search"></el-input>
|
||||
<el-button size="mini" icon="el-icon-refresh" :loading="routesRefreshing" @click="refreshRoutes">刷新</el-button>
|
||||
<el-button size="mini" type="primary" @click="openRouteDialogForCreate">新增路由</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,6 +143,7 @@
|
||||
<el-option v-for="g in mockGroups" :key="g.id" :label="g.name" :value="g.id"></el-option>
|
||||
</el-select>
|
||||
<el-input size="small" v-model="mockFileSearch" placeholder="搜索别名或路径" clearable style="width:220px;" prefix-icon="el-icon-search"></el-input>
|
||||
<el-button size="mini" icon="el-icon-refresh" :loading="mocksRefreshing" @click="refreshMocks">刷新</el-button>
|
||||
<el-button size="mini" type="primary" @click="openMockFileDialogForCreate">新增 Mock 文件</el-button>
|
||||
<el-button size="mini" @click="openMockGroupDialog">分组管理</el-button>
|
||||
</div>
|
||||
@ -193,6 +195,7 @@
|
||||
<strong>接口列表</strong>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<el-input size="small" v-model="apiSearch" placeholder="搜索接口名称或路径" clearable style="width:220px;" prefix-icon="el-icon-search"></el-input>
|
||||
<el-button size="mini" icon="el-icon-refresh" :loading="apiRefreshing" @click="refreshApiList">刷新</el-button>
|
||||
<el-button size="mini" type="primary" @click="openApiDialogForCreate">新增接口</el-button>
|
||||
<el-button size="mini" type="success" @click="openBatchImportDialog">批量导入</el-button>
|
||||
</div>
|
||||
@ -229,6 +232,9 @@
|
||||
|
||||
<el-tab-pane label="基础配置" name="basic">
|
||||
<el-card class="section-card">
|
||||
<div style="display:flex;justify-content:flex-end;align-items:center;margin-bottom:12px;">
|
||||
<el-button size="mini" icon="el-icon-refresh" :loading="configRefreshing" @click="refreshConfig">刷新</el-button>
|
||||
</div>
|
||||
<el-form :model="form.config" label-width="180px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
@ -559,6 +565,10 @@
|
||||
data: function () {
|
||||
return {
|
||||
activeMainTab: "routes",
|
||||
routesRefreshing: false,
|
||||
mocksRefreshing: false,
|
||||
apiRefreshing: false,
|
||||
configRefreshing: false,
|
||||
apiList: [],
|
||||
apiPagination: { currentPage: 1, pageSize: 10 },
|
||||
apiDialog: {
|
||||
@ -660,6 +670,12 @@
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
activeMainTab: function (tab) {
|
||||
if (tab === "routes") { this.loadRoutes(); }
|
||||
else if (tab === "mocks") { this.loadMockFiles(); this.loadMockGroups(); }
|
||||
else if (tab === "api") { this.loadApiList(); }
|
||||
else if (tab === "basic") { this.loadConfig(); }
|
||||
},
|
||||
routeSearch: function () { this.routePagination.currentPage = 1; },
|
||||
mockFileSearch: function () { this.mockFilePagination.currentPage = 1; },
|
||||
mockGroupFilter: function () { this.mockFilePagination.currentPage = 1; },
|
||||
@ -670,8 +686,64 @@
|
||||
await this.loadMockFiles();
|
||||
await this.loadMockGroups();
|
||||
await this.loadConfig();
|
||||
await this.loadRoutes();
|
||||
},
|
||||
methods: {
|
||||
loadRoutes: async function () {
|
||||
try {
|
||||
var resp = await fetch("/__routes");
|
||||
var data = await resp.json();
|
||||
if (!resp.ok || data.success === false) {
|
||||
throw new Error(data.error || "加载路由失败");
|
||||
}
|
||||
this.form.routes = this.toRouteArray(
|
||||
data.routes || {},
|
||||
data.routeStatuses || {},
|
||||
data.routeEnabledMap || {},
|
||||
data.routeApiNameMap || {},
|
||||
);
|
||||
this.routePagination.currentPage = 1;
|
||||
} catch (err) {
|
||||
this.$message.error("加载路由失败: " + err.message);
|
||||
}
|
||||
},
|
||||
refreshRoutes: async function () {
|
||||
this.routesRefreshing = true;
|
||||
try {
|
||||
await this.loadRoutes();
|
||||
this.$message.success("路由配置已刷新");
|
||||
} finally {
|
||||
this.routesRefreshing = false;
|
||||
}
|
||||
},
|
||||
refreshMocks: async function () {
|
||||
this.mocksRefreshing = true;
|
||||
try {
|
||||
await this.loadMockFiles();
|
||||
await this.loadMockGroups();
|
||||
this.$message.success("Mock 数据已刷新");
|
||||
} finally {
|
||||
this.mocksRefreshing = false;
|
||||
}
|
||||
},
|
||||
refreshApiList: async function () {
|
||||
this.apiRefreshing = true;
|
||||
try {
|
||||
await this.loadApiList();
|
||||
this.$message.success("接口列表已刷新");
|
||||
} finally {
|
||||
this.apiRefreshing = false;
|
||||
}
|
||||
},
|
||||
refreshConfig: async function () {
|
||||
this.configRefreshing = true;
|
||||
try {
|
||||
await this.loadConfig();
|
||||
this.$message.success("基础配置已刷新");
|
||||
} finally {
|
||||
this.configRefreshing = false;
|
||||
}
|
||||
},
|
||||
getPreviewText: function (content) {
|
||||
var text = String(content || "").replace(/\s+/g, " ").trim();
|
||||
if (!text) return "(空文件)";
|
||||
@ -974,13 +1046,6 @@
|
||||
var resp = await fetch("/__config");
|
||||
var data = await resp.json();
|
||||
this.form.config = Object.assign({}, this.form.config, data.config || {});
|
||||
this.form.routes = this.toRouteArray(
|
||||
data.routes || {},
|
||||
data.routeStatuses || {},
|
||||
data.routeEnabledMap || {},
|
||||
data.routeApiNameMap || {},
|
||||
);
|
||||
this.routePagination.currentPage = 1;
|
||||
} catch (err) {
|
||||
this.$message.error("加载配置失败: " + err.message);
|
||||
}
|
||||
@ -1051,7 +1116,7 @@
|
||||
);
|
||||
this.routeDialog.visible = false;
|
||||
await this.loadMockFiles();
|
||||
await this.loadConfig();
|
||||
await this.loadRoutes();
|
||||
} catch (err) {
|
||||
this.$message.error("创建失败: " + err.message);
|
||||
}
|
||||
|
||||
@ -135,13 +135,8 @@ async function handleConfig(
|
||||
clientRes.end(
|
||||
JSON.stringify(
|
||||
{
|
||||
routes: state.rawRoutes,
|
||||
routeStatuses: state.rawRouteStatuses,
|
||||
routeEnabledMap: state.routeEnabledMap,
|
||||
routeApiNameMap: state.routeApiNameMap,
|
||||
config: state.config,
|
||||
timestamp: new Date().toISOString(),
|
||||
totalRoutes: Object.keys(state.rawRoutes).length,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
@ -162,16 +157,31 @@ async function handleRoutes(
|
||||
clientReq: http.IncomingMessage,
|
||||
clientRes: http.ServerResponse,
|
||||
): Promise<void> {
|
||||
if (clientReq.method !== "POST") {
|
||||
if (clientReq.method !== "GET" && clientReq.method !== "POST") {
|
||||
clientRes.writeHead(405, {
|
||||
"Content-Type": "application/json",
|
||||
Allow: "POST",
|
||||
Allow: "GET, POST",
|
||||
});
|
||||
clientRes.end(
|
||||
JSON.stringify({
|
||||
success: false,
|
||||
error: "Method Not Allowed",
|
||||
allow: ["POST"],
|
||||
allow: ["GET, POST"],
|
||||
}),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (clientReq.method === "GET") {
|
||||
clientRes.writeHead(200, { "Content-Type": "application/json" });
|
||||
clientRes.end(
|
||||
JSON.stringify({
|
||||
success: true,
|
||||
routes: state.rawRoutes,
|
||||
routeStatuses: state.rawRouteStatuses,
|
||||
routeEnabledMap: state.routeEnabledMap,
|
||||
routeApiNameMap: state.routeApiNameMap,
|
||||
totalRoutes: Object.keys(state.rawRoutes).length,
|
||||
}),
|
||||
);
|
||||
return;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user