From 8b3e9a2b2340fe8e986d9a35979b7882d36e808a Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Mon, 9 Mar 2026 09:21:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=B8=BA=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0loading?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加页面加载loading状态
- 添加数据为空时的提示
- 优化loading样式和布局
- 确保保存按钮有loading反馈
- 改善用户体验
---
 ruoyi-ui/src/views/ccdi/modelParam/index.vue  | 26 ++++++++++++++++---
 .../components/detail/ParamConfig.vue         | 26 ++++++++++++++++---
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/ruoyi-ui/src/views/ccdi/modelParam/index.vue b/ruoyi-ui/src/views/ccdi/modelParam/index.vue
index a8cdd7a..5869d3f 100644
--- a/ruoyi-ui/src/views/ccdi/modelParam/index.vue
+++ b/ruoyi-ui/src/views/ccdi/modelParam/index.vue
@@ -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;
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
index eddb87a..2ff97a4 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
@@ -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;