astro-jiao77.cn/docs/REPORT_COLOR_OPTIMIZATION.md

报告页面莫兰蒂蓝配色优化

📅 更新日期

2025年10月1日

🎯 优化目标

将 /report/20250722/ 页面的配色从杂乱的蓝绿紫三色方案统一为莫兰蒂蓝色系，提升视觉一致性和专业感。

🎨 莫兰蒂蓝色系定义

核心色板

--morandi-blue-dark:   #2c4a6b;  /* 深莫兰蒂蓝 - 主色调 */
--morandi-blue-medium: #5b778e;  /* 中莫兰蒂蓝 - 辅助色 */
--morandi-blue-light:  #b2c5d5;  /* 浅莫兰蒂蓝 - 点缀色 */
--morandi-blue-darker: #1f3a52;  /* 更深蓝 - 悬浮态 */

应用场景

• #2c4a6b - 标题、重点文字、激活按钮
• #5b778e - 副标题、次要信息
• #b2c5d5 - 图标、装饰元素
• #1f3a52 - 悬浮态、按下态

🔄 修改内容

1. 组件图标颜色

之前（三色方案）❌

iconColor: "text-blue-500"   // 组件一
iconColor: "text-green-500"  // 组件二  
iconColor: "text-purple-500" // 组件三

现在（莫兰蒂蓝）✅

iconColor: "text-[#2c4a6b]"  // 组件一 - 深蓝
iconColor: "text-[#5b778e]"  // 组件二 - 中蓝
iconColor: "text-[#b2c5d5]"  // 组件三 - 浅蓝

2. 副标题颜色

之前 ❌

subtitleColor: "text-blue-600"
subtitleColor: "text-green-600"
subtitleColor: "text-purple-600"

现在 ✅

subtitleColor: "text-[#5b778e]"  // 组件一
subtitleColor: "text-[#2c4a6b]"  // 组件二
subtitleColor: "text-[#5b778e]"  // 组件三

3. 表格样式

之前 ❌

/* 表头背景 */
background-color: rgba(59, 130, 246, 0.1);  /* 亮蓝色 */
color: #1e40af;  /* 蓝色文字 */

/* 悬浮行 */
background-color: rgba(59, 130, 246, 0.05);

现在 ✅

/* 表头背景 */
background-color: rgba(44, 74, 107, 0.12);  /* 莫兰蒂蓝 */
color: #2c4a6b;  /* 莫兰蒂蓝文字 */

/* 悬浮行 */
background-color: rgba(91, 119, 142, 0.08);  /* 中莫兰蒂蓝 */

4. 激活按钮阴影

之前 ❌

.tab-btn.active {
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);  /* 蓝色阴影 */
}

现在 ✅

.tab-btn.active {
  box-shadow: 0 4px 8px rgba(44, 74, 107, 0.3);  /* 莫兰蒂蓝阴影 */
}

5. 全局文字颜色覆盖

新增全局样式 ✨

/* 莫兰蒂蓝色系全局覆盖 */
:global(.text-blue-600),
:global(.text-blue-800) {
  color: #2c4a6b !important;
}

:global(.text-green-500) {
  color: #5b778e !important;
}

:global(.bg-blue-600) {
  background-color: #2c4a6b !important;
}

:global(.hover\:bg-blue-700:hover) {
  background-color: #1f3a52 !important;
}

6. JavaScript 按钮样式

之前 ❌

btn.classList.add('active', 'bg-blue-600', 'text-white', 'shadow-lg');

现在 ✅

btn.classList.add('active', 'bg-[#2c4a6b]', 'text-white', 'shadow-lg');

📊 颜色对比表

元素类型	之前颜色	现在颜色	变化说明
主标题	text-blue-600 (#2563eb)	text-[#2c4a6b]	更沉稳的深蓝
副标题	text-green-600 (#16a34a)	text-[#5b778e]	统一蓝色调
图标	text-purple-500 (#a855f7)	text-[#b2c5d5]	柔和浅蓝
表头背景	rgba(59, 130, 246, 0.1)	rgba(44, 74, 107, 0.12)	莫兰蒂蓝底
按钮激活	bg-blue-600	bg-[#2c4a6b]	深莫兰蒂蓝
悬浮态	bg-blue-700	bg-[#1f3a52]	更深蓝

🎯 视觉效果提升

1. 色彩一致性

• ✅ 统一使用莫兰蒂蓝色系
• ✅ 避免蓝绿紫混杂
• ✅ 色调和谐统一

2. 专业感增强

• ✅ 深蓝色更显稳重
• ✅ 适合技术文档
• ✅ 符合IC行业调性

3. 视觉层次

• 深色 (#2c4a6b) - 主要信息
• 中色 (#5b778e) - 次要信息
• 浅色 (#b2c5d5) - 装饰点缀

📝 修改文件清单

1. 组件图标颜色 - 3处修改

   • 组件一: text-blue-500 → text-[#2c4a6b]
   • 组件二: text-green-500 → text-[#5b778e]
   • 组件三: text-purple-500 → text-[#b2c5d5]

2. 副标题颜色 - 3处修改

   • 统一为莫兰蒂蓝色系

3. 表格样式 - 2处修改

   • 表头背景和文字色
   • 悬浮行背景色

4. 按钮阴影 - 1处修改

   • 激活态阴影颜色

5. 全局样式覆盖 - 新增

   • CSS变量覆盖所有蓝绿色

6. JavaScript样式 - 1处修改

   • 按钮激活背景色

🚀 构建验证

✓ 0 errors, 0 warnings
✓ 20 pages built successfully
✓ 配色优化完成

💡 设计理念

莫兰蒂蓝的特点

1. 沉稳专业 - 深蓝色调适合技术文档
2. 柔和舒适 - 降低饱和度，减少视觉疲劳
3. 层次分明 - 三级蓝色提供清晰视觉层级
4. 统一和谐 - 单一色系避免杂乱

适用场景

• ✅ 技术报告
• ✅ 学术文档
• ✅ 专业展示
• ✅ IC/EDA相关内容

📈 后续优化建议

1. 扩展到其他报告页

   • 将莫兰蒂蓝配色应用到所有报告页
   • 保持视觉一致性

2. 创建色彩变量

   • 在全局CSS中定义莫兰蒂蓝变量
   • 便于统一管理和修改

3. 暗色模式支持

   • 为莫兰蒂蓝提供暗色版本
   • 适应不同阅读场景

🎨 完整色板参考

/* 莫兰蒂蓝完整色板 */
:root {
  /* 主色 */
  --morandi-blue-900: #011a2d;  /* 最深 */
  --morandi-blue-800: #1f3a52;  /* 深 */
  --morandi-blue-700: #2c4a6b;  /* 主色 */
  --morandi-blue-600: #3d5a7c;
  --morandi-blue-500: #5b778e;  /* 中色 */
  --morandi-blue-400: #7a92a7;
  --morandi-blue-300: #99acc0;
  --morandi-blue-200: #b2c5d5;  /* 浅色 */
  --morandi-blue-100: #d1dde8;
  --morandi-blue-50:  #e8eff5;  /* 最浅 */
}

---

优化完成！ 🎉
现在 /report/20250722/ 页面拥有统一、专业的莫兰蒂蓝配色方案。

建议下一步：

• 运行 npm run dev 查看效果
• 或直接 npm run build && ./deploy-full.sh 部署