feat(ui): 为参数配置页面添加loading效果

- 添加页面加载loading状态
- 添加数据为空时的提示
- 优化loading样式和布局
- 确保保存按钮有loading反馈
- 改善用户体验
This commit is contained in:
wkc
2026-03-09 09:21:51 +08:00
parent dbecc8667b
commit 8b3e9a2b23
2 changed files with 44 additions and 8 deletions

View File

@@ -1,12 +1,12 @@
<template>
<div class="param-config-container">
<div class="param-config-container" v-loading="loading" element-loading-text="加载中...">
<!-- 页面标题 -->
<div class="page-header">
<h2>全局模型参数管理</h2>
</div>
<!-- 模型参数卡片组垂直堆叠 -->
<div class="model-cards-container">
<div class="model-cards-container" v-if="!loading && modelGroups.length > 0">
<div
v-for="model in modelGroups"
:key="model.modelCode"
@@ -35,8 +35,13 @@
</div>
</div>
<!-- 空状态 -->
<div class="empty-state" v-if="!loading && modelGroups.length === 0">
<el-empty description="暂无参数配置数据"></el-empty>
</div>
<!-- 统一保存按钮 -->
<div class="button-section">
<div class="button-section" v-if="!loading && modelGroups.length > 0">
<el-button type="primary" @click="handleSaveAll" :loading="saving">
保存所有修改
</el-button>
@@ -58,6 +63,8 @@ export default {
modelGroups: [],
// 修改记录使用对象而非Map确保Vue能检测变化
modifiedParams: {},
// 加载状态
loading: false,
// 保存状态
saving: false
};
@@ -78,14 +85,17 @@ export default {
methods: {
/** 加载所有模型参数 */
async loadAllParams() {
this.loading = true;
try {
const res = await listAllParams({ projectId: 0 });
this.modelGroups = res.data.models;
this.modelGroups = res.data.models || [];
// 清空修改记录
this.modifiedParams = {};
} catch (error) {
this.$message.error('加载参数失败:' + error.message);
console.error('加载参数失败', error);
} finally {
this.loading = false;
}
},
@@ -180,6 +190,7 @@ export default {
.model-cards-container {
margin-bottom: 20px;
min-height: 300px;
}
.model-card {
@@ -201,6 +212,13 @@ export default {
}
}
.empty-state {
padding: 40px;
text-align: center;
background: #fff;
border-radius: 4px;
}
.button-section {
padding: 15px;
background: #fff;

View File

@@ -1,7 +1,7 @@
<template>
<div class="param-config-container">
<div class="param-config-container" v-loading="loading" element-loading-text="加载中...">
<!-- 模型参数卡片组垂直堆叠 -->
<div class="model-cards-container">
<div class="model-cards-container" v-if="!loading && modelGroups.length > 0">
<div
v-for="model in modelGroups"
:key="model.modelCode"
@@ -30,8 +30,13 @@
</div>
</div>
<!-- 空状态 -->
<div class="empty-state" v-if="!loading && modelGroups.length === 0">
<el-empty description="暂无参数配置数据"></el-empty>
</div>
<!-- 统一保存按钮 -->
<div class="button-section">
<div class="button-section" v-if="!loading && modelGroups.length > 0">
<el-button type="primary" @click="handleSaveAll" :loading="saving">
保存所有修改
</el-button>
@@ -63,6 +68,8 @@ export default {
modelGroups: [],
// 修改记录使用对象而非Map确保Vue能检测变化
modifiedParams: {},
// 加载状态
loading: false,
// 保存状态
saving: false
}
@@ -92,14 +99,17 @@ export default {
methods: {
/** 加载所有模型参数 */
async loadAllParams() {
this.loading = true;
try {
const res = await listAllParams({ projectId: this.projectId });
this.modelGroups = res.data.models;
this.modelGroups = res.data.models || [];
// 清空修改记录
this.modifiedParams = {};
} catch (error) {
this.$message.error('加载参数失败:' + error.message);
console.error('加载参数失败', error);
} finally {
this.loading = false;
}
},
@@ -180,6 +190,7 @@ export default {
.model-cards-container {
margin-bottom: 20px;
min-height: 300px;
}
.model-card {
@@ -201,6 +212,13 @@ export default {
}
}
.empty-state {
padding: 40px;
text-align: center;
background: #fff;
border-radius: 4px;
}
.button-section {
padding: 15px;
background: #fff;