feat(ui): 为参数配置页面添加loading效果
- 添加页面加载loading状态 - 添加数据为空时的提示 - 优化loading样式和布局 - 确保保存按钮有loading反馈 - 改善用户体验
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user