feat(ui): 在项目详情页面添加配置类型标签显示

- 在项目名称旁添加配置类型标签
- 默认配置显示蓝色"默认配置"标签
- 自定义配置显示橙色"自定义配置"标签
- 添加 getConfigTypeLabel 和 getConfigTypeStyle 方法
- 为标签添加左边距以改善视觉效果
- 纯前端实现,无需后端修改

Ref: docs/plans/2026-03-09-param-config-type-display-design.md
This commit is contained in:
wkc
2026-03-09 12:22:40 +08:00
parent ed565ea1d1
commit 8855507bb4

View File

@@ -17,6 +17,14 @@
> >
{{ getStatusLabel(projectInfo.projectStatus) }} {{ getStatusLabel(projectInfo.projectStatus) }}
</el-tag> </el-tag>
<!-- 配置类型标签 -->
<el-tag
:type="getConfigTypeStyle(projectInfo.configType)"
size="small"
style="margin-left: 8px"
>
{{ getConfigTypeLabel(projectInfo.configType) }}
</el-tag>
</div> </div>
<p class="update-time"> <p class="update-time">
@@ -219,6 +227,22 @@ export default {
}; };
return statusMap[status] || "未知"; return statusMap[status] || "未知";
}, },
/** 获取配置类型标签文字 */
getConfigTypeLabel(configType) {
const configTypeMap = {
"default": "默认配置",
"custom": "自定义配置"
}
return configTypeMap[configType] || "默认配置"
},
/** 获取配置类型标签样式 */
getConfigTypeStyle(configType) {
const styleMap = {
"default": "info", // 蓝色
"custom": "warning" // 橙色
}
return styleMap[configType] || "info"
},
/** 标签页切换 */ /** 标签页切换 */
handleTabChange(tab) { handleTabChange(tab) {
console.log("切换到标签页:", tab.name); console.log("切换到标签页:", tab.name);