diff --git a/docs/optimization-records/2026-03-09-loading-optimization.md b/docs/optimization-records/2026-03-09-loading-optimization.md
new file mode 100644
index 0000000..22a659c
--- /dev/null
+++ b/docs/optimization-records/2026-03-09-loading-optimization.md
@@ -0,0 +1,289 @@
+# 参数配置页面 Loading 优化
+
+**优化时间:** 2026-03-09
+**优化分支:** dev
+**涉及页面:** 全局配置、项目配置
+
+---
+
+## 🎯 优化目标
+
+为参数配置页面添加完善的 loading 效果，提升用户体验
+
+---
+
+## ✨ 优化内容
+
+### 1. **页面加载 Loading**
+
+#### 实现方式
+使用 Element UI 的 `v-loading` 指令
+
+```vue
+
+
+
+```
+
+#### Loading 状态控制
+```javascript
+ data() {
+ return {
+ loading: false, // 页面加载状态
+ saving: false // 保存状态
+ }
+ }
+```
+
+#### 加载方法
+```javascript
+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. **空状态提示**
+
+当数据为空时显示友好提示：
+
+```vue
+
+
+
+
+```
+
+---
+
+### 3. **保存按钮 Loading**
+
+保存时按钮显示 loading 状态：
+
+```vue
+
+ 保存所有修改
+
+```
+
+保存方法中控制状态：
+```javascript
+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` 控制内容区域显示：
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+ 保存所有修改
+
+```
+
+---
+
+### 5. **样式优化**
+
+添加最小高度，防止内容抖动：
+
+```scss
+.model-cards-container {
+ margin-bottom: 20px;
+ min-height: 300px; // 防止 loading 时布局抖动
+}
+```
+
+---
+
+## 📊 优化对比
+
+### 优化前
+- ❌ 页面加载时无反馈，用户不知道是否在工作
+- ❌ 数据为空时显示空白页面
+- ❌ 保存时按钮无状态反馈
+- ❌ 可能出现布局抖动
+
+### 优化后
+- ✅ 页面加载显示 loading 遮罩，清晰反馈
+- ✅ 数据为空显示友好提示
+- ✅ 保存按钮显示 loading 动画
+- ✅ 条件渲染防止布局抖动
+- ✅ 最小高度保持布局稳定
+
+---
+
+## 🎨 用户体验提升
+
+### 加载状态
+```
+┌─────────────────────────┐
+│ │
+│ 加载中... │
+│ (旋转动画) │
+│ │
+└─────────────────────────┘
+```
+
+### 空状态
+```
+┌─────────────────────────┐
+│ │
+│ (空状态图标) │
+│ 暂无参数配置数据 │
+│ │
+└─────────────────────────┘
+```
+
+### 正常状态
+```
+┌─────────────────────────┐
+│ 模型1 │
+│ ┌───────────────────┐ │
+│ │ 参数表格 │ │
+│ └───────────────────┘ │
+├─────────────────────────┤
+│ 模型2 │
+│ ┌───────────────────┐ │
+│ │ 参数表格 │ │
+│ └───────────────────┘ │
+├─────────────────────────┤
+│ [保存按钮] 已修改X个 │
+└─────────────────────────┘
+```
+
+---
+
+## 🔧 技术实现
+
+### Loading 指令
+- **Element UI 指令**: `v-loading`
+- **加载文本**: `element-loading-text`
+- **背景色**: 默认白色遮罩
+
+### 状态管理
+```javascript
+{
+ 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 提交
+
+```bash
+commit 8b3e9a2
+feat(ui): 为参数配置页面添加loading效果
+
+- 添加页面加载loading状态
+- 添加数据为空时的提示
+- 优化loading样式和布局
+- 确保保存按钮有loading反馈
+- 改善用户体验
+```
+
+---
+
+## 🚀 后续优化建议
+
+1. **骨架屏**: 可考虑使用骨架屏替代 loading 遮罩，体验更好
+2. **渐进式加载**: 先加载部分数据，逐步展示
+3. **缓存优化**: 添加数据缓存，减少重复加载
+4. **错误重试**: 添加加载失败的重试机制
+
+---
+
+**优化完成时间:** 2026-03-09
+**状态:** ✅ 已完成并提交