ccdi/docs/optimization-records/2026-03-09-loading-optimization.md

参数配置页面 Loading 优化

优化时间: 2026-03-09 优化分支: dev 涉及页面: 全局配置、项目配置

---

🎯 优化目标

为参数配置页面添加完善的 loading 效果，提升用户体验

---

✨ 优化内容

1. 页面加载 Loading

实现方式

使用 Element UI 的 v-loading 指令

<div class="param-config-container" v-loading="loading" element-loading-text="加载中...">
  <!-- 内容区域 -->
</div>

Loading 状态控制

 data() {
   return {
     loading: false,  // 页面加载状态
     saving: false   // 保存状态
   }
 }

加载方法

async loadAllParams() {
  this.loading = true;  // 开始加载
  try {
    const res = await listAllParams({ projectId: 0 });
    this.modelGroups = res.data.models || [];
    this.modifiedParams = {};
  } catch (error) {
    this.$message.error('加载参数失败：' + error.message);
  } finally {
    this.loading = false;  // 结束加载
  }
}

---

2. 空状态提示

当数据为空时显示友好提示：

<!-- 空状态 -->
<div class="empty-state" v-if="!loading && modelGroups.length === 0">
  <el-empty description="暂无参数配置数据"></el-empty>
</div>

---

3. 保存按钮 Loading

保存时按钮显示 loading 状态：

<el-button
  type="primary"
  @click="handleSaveAll"
  :loading="saving"
>
  保存所有修改
</el-button>

保存方法中控制状态：

async handleSaveAll() {
  this.saving = true;  // 开始保存
  try {
    await saveAllParams(saveDTO);
    this.$message.success('保存成功');
    this.modifiedParams = {};
    await this.loadAllParams();
  } catch (error) {
    this.$message.error('保存失败：' + error.message);
  } finally {
    this.saving = false;  // 结束保存
  }
}

---

4. 条件渲染优化

使用 v-if 控制内容区域显示：

<!-- 只在非加载状态且有数据时显示 -->
<div class="model-cards-container" v-if="!loading && modelGroups.length > 0">
  <!-- 模型卡片 -->
</div>

<!-- 只在非加载状态且无数据时显示 -->
<div class="empty-state" v-if="!loading && modelGroups.length === 0">
  <el-empty description="暂无参数配置数据"></el-empty>
</div>

<!-- 只在非加载状态且有数据时显示按钮 -->
<div class="button-section" v-if="!loading && modelGroups.length > 0">
  <el-button>保存所有修改</el-button>
</div>

---

5. 样式优化

添加最小高度，防止内容抖动：

.model-cards-container {
  margin-bottom: 20px;
  min-height: 300px;  // 防止 loading 时布局抖动
}

---

📊 优化对比

优化前

• ❌ 页面加载时无反馈，用户不知道是否在工作
• ❌ 数据为空时显示空白页面
• ❌ 保存时按钮无状态反馈
• ❌ 可能出现布局抖动

优化后

• ✅ 页面加载显示 loading 遮罩，清晰反馈
• ✅ 数据为空显示友好提示
• ✅ 保存按钮显示 loading 动画
• ✅ 条件渲染防止布局抖动
• ✅ 最小高度保持布局稳定

---

🎨 用户体验提升

加载状态

┌─────────────────────────┐
│                         │
│      加载中...          │
│      (旋转动画)          │
│                         │
└─────────────────────────┘

空状态

┌─────────────────────────┐
│                         │
│      (空状态图标)        │
│   暂无参数配置数据       │
│                         │
└─────────────────────────┘

正常状态

┌─────────────────────────┐
│  模型1                  │
│  ┌───────────────────┐  │
│  │  参数表格          │  │
│  └───────────────────┘  │
├─────────────────────────┤
│  模型2                  │
│  ┌───────────────────┐  │
│  │  参数表格          │  │
│  └───────────────────┘  │
├─────────────────────────┤
│  [保存按钮]  已修改X个  │
└─────────────────────────┘

---

🔧 技术实现

Loading 指令

• Element UI 指令: v-loading
• 加载文本: element-loading-text
• 背景色: 默认白色遮罩

状态管理

{
  loading: false,  // 数据加载状态
  saving: false    // 保存操作状态
}

条件渲染逻辑

loading = true  → 显示 loading 遮罩
loading = false && data.length > 0 → 显示数据
loading = false && data.length = 0 → 显示空状态

---

📝 修改文件

全局配置页面

• 文件: ruoyi-ui/src/views/ccdi/modelParam/index.vue
• 修改:
  • 添加 loading 状态
  • 添加 v-loading 指令
  • 添加空状态提示
  • 优化条件渲染
  • 优化样式

项目配置页面

• 文件: ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
• 修改:
  • 添加 loading 状态
  • 添加 v-loading 指令
  • 添加空状态提示
  • 优化条件渲染
  • 优化样式

---

🎯 测试要点

功能测试

• 页面首次加载显示 loading
• Loading 状态下内容不显示
• 数据加载完成后 loading 消失
• 数据为空时显示空状态提示
• 保存时按钮显示 loading
• 保存完成后按钮恢复

性能测试

• Loading 动画流畅
• 无布局抖动
• 快速响应

兼容性测试

• Chrome 正常
• Firefox 正常
• Edge 正常

---

📌 Git 提交

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

- 添加页面加载loading状态
- 添加数据为空时的提示
- 优化loading样式和布局
- 确保保存按钮有loading反馈
- 改善用户体验

---

🚀 后续优化建议

1. 骨架屏: 可考虑使用骨架屏替代 loading 遮罩，体验更好
2. 渐进式加载: 先加载部分数据，逐步展示
3. 缓存优化: 添加数据缓存，减少重复加载
4. 错误重试: 添加加载失败的重试机制

---

优化完成时间: 2026-03-09 状态: ✅ 已完成并提交