feat: Mock 文件名按别名自动生成,路由展示与选择改为别名

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dongzp 2026-09-08 11:20:56 +08:00
parent 574757f903
commit 07a6af6fd9

View File

@ -92,9 +92,9 @@
<span>{{ scope.row.route }}</span>
</template>
</el-table-column>
<el-table-column label="Mock 文件路径" min-width="240" show-overflow-tooltip>
<el-table-column label="Mock 文件" min-width="240" show-overflow-tooltip>
<template slot-scope="scope">
<a href="javascript:void(0)" style="color:#409EFF;cursor:pointer;" @click="openMockFileFromRoute(scope.row)">{{ scope.row.filePath }}</a>
<a href="javascript:void(0)" style="color:#409EFF;cursor:pointer;" @click="openMockFileFromRoute(scope.row)">{{ getMockFileAlias(scope.row.filePath) }}</a>
</template>
</el-table-column>
<el-table-column label="返回状态码" width="120" align="center">
@ -193,7 +193,7 @@
<el-tab-pane label="接口管理" name="api">
<el-card class="section-card">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
<strong>接口列表</strong>
<strong>接口管理(api)</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>
@ -451,7 +451,7 @@
<el-option
v-for="item in routeDialogMockFiles"
:key="item.filePath"
:label="item.alias ? item.alias + ' (' + item.filePath + ')' : item.filePath"
:label="item.alias || item.filePath"
:value="item.filePath"
></el-option>
</el-select>
@ -510,8 +510,8 @@
<el-form-item label="Mock 文件路径">
<el-input
v-model="mockFileDialog.form.fileName"
placeholder="请输入文件名,如 test123.json"
:disabled="mockFileDialog.mode === 'edit'"
:placeholder="mockFileDialog.mode === 'edit' ? '' : '根据别名自动生成:别名_随机串.json'"
disabled
>
<template slot="prepend">mock/</template>
</el-input>
@ -877,6 +877,13 @@
routeSearch: function () { this.routePagination.currentPage = 1; },
mockFileSearch: function () { this.mockFilePagination.currentPage = 1; },
mockGroupFilter: function () { this.mockFilePagination.currentPage = 1; },
"mockFileDialog.form.alias": function () {
if (this.mockFileDialog.mode === "create" || this.mockFileDialog.mode === "copy") {
this.mockFileDialog.form.fileName = this.generateMockFileName(
this.mockFileDialog.form.alias,
);
}
},
apiSearch: function () { this.apiPagination.currentPage = 1; },
ipRuleSearch: function () { this.ipRulePagination.currentPage = 1; },
},
@ -1283,9 +1290,20 @@
};
this.routeDialog.visible = true;
},
sanitizeMockFileAlias: function (alias) {
var text = String(alias || "").trim();
text = text.replace(/[\\/:*?"<>|]/g, "_").replace(/\s+/g, "_");
text = text.replace(/_+/g, "_").replace(/^_+|_+$/g, "");
return text || "mock";
},
generateMockFileName: function (alias) {
var prefix = this.sanitizeMockFileAlias(alias);
var random = Math.random().toString(36).slice(2, 10);
return prefix + "_" + random + ".json";
},
getDefaultMockFileForm: function () {
return {
fileName: "",
fileName: this.generateMockFileName(""),
alias: "",
content: "",
groupId: null,
@ -1319,12 +1337,21 @@
}
this.openMockFileDialogForEdit(mockFile);
},
getMockFileAlias: function (filePath) {
var path = filePath || "";
var mockFile = this.mockFiles.find(function (f) { return f.filePath === path; });
if (mockFile && mockFile.alias) {
return mockFile.alias;
}
return path || "-";
},
openMockFileDialogForCopy: function (item) {
var alias = String(item.alias || "") + "-副本";
this.mockFileDialog.mode = "copy";
this.mockFileDialog.fullscreen = false;
this.mockFileDialog.form = {
fileName: "",
alias: String(item.alias || "") + "-副本",
fileName: this.generateMockFileName(alias),
alias: alias,
content: String(item.content || ""),
groupId: item.groupId || null,
};
@ -1346,6 +1373,10 @@
},
submitMockFileDialog: async function () {
var fileName = (this.mockFileDialog.form.fileName || "").trim();
if (this.mockFileDialog.mode === "create" || this.mockFileDialog.mode === "copy") {
fileName = this.generateMockFileName(this.mockFileDialog.form.alias);
this.mockFileDialog.form.fileName = fileName;
}
if (!fileName) {
this.$message.error("文件名不能为空");
return;