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

View File

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