add some function and fix some problems.
This commit is contained in:
Jiao77
245
docs/REPORT_COLOR_OPTIMIZATION.md
Normal file
245
docs/REPORT_COLOR_OPTIMIZATION.md
Normal file
@@ -0,0 +1,245 @@
|
||||
# 报告页面莫兰蒂蓝配色优化
|
||||
|
||||
## 📅 更新日期
|
||||
2025年10月1日
|
||||
|
||||
## 🎯 优化目标
|
||||
将 `/report/20250722/` 页面的配色从杂乱的蓝绿紫三色方案统一为莫兰蒂蓝色系，提升视觉一致性和专业感。
|
||||
|
||||
## 🎨 莫兰蒂蓝色系定义
|
||||
|
||||
### 核心色板
|
||||
```css
|
||||
--morandi-blue-dark: #2c4a6b; /* 深莫兰蒂蓝 - 主色调 */
|
||||
--morandi-blue-medium: #5b778e; /* 中莫兰蒂蓝 - 辅助色 */
|
||||
--morandi-blue-light: #b2c5d5; /* 浅莫兰蒂蓝 - 点缀色 */
|
||||
--morandi-blue-darker: #1f3a52; /* 更深蓝 - 悬浮态 */
|
||||
```
|
||||
|
||||
### 应用场景
|
||||
- **#2c4a6b** - 标题、重点文字、激活按钮
|
||||
- **#5b778e** - 副标题、次要信息
|
||||
- **#b2c5d5** - 图标、装饰元素
|
||||
- **#1f3a52** - 悬浮态、按下态
|
||||
|
||||
## 🔄 修改内容
|
||||
|
||||
### 1. 组件图标颜色
|
||||
|
||||
#### 之前（三色方案）❌
|
||||
```astro
|
||||
iconColor: "text-blue-500" // 组件一
|
||||
iconColor: "text-green-500" // 组件二
|
||||
iconColor: "text-purple-500" // 组件三
|
||||
```
|
||||
|
||||
#### 现在（莫兰蒂蓝）✅
|
||||
```astro
|
||||
iconColor: "text-[#2c4a6b]" // 组件一 - 深蓝
|
||||
iconColor: "text-[#5b778e]" // 组件二 - 中蓝
|
||||
iconColor: "text-[#b2c5d5]" // 组件三 - 浅蓝
|
||||
```
|
||||
|
||||
### 2. 副标题颜色
|
||||
|
||||
#### 之前 ❌
|
||||
```astro
|
||||
subtitleColor: "text-blue-600"
|
||||
subtitleColor: "text-green-600"
|
||||
subtitleColor: "text-purple-600"
|
||||
```
|
||||
|
||||
#### 现在 ✅
|
||||
```astro
|
||||
subtitleColor: "text-[#5b778e]" // 组件一
|
||||
subtitleColor: "text-[#2c4a6b]" // 组件二
|
||||
subtitleColor: "text-[#5b778e]" // 组件三
|
||||
```
|
||||
|
||||
### 3. 表格样式
|
||||
|
||||
#### 之前 ❌
|
||||
```css
|
||||
/* 表头背景 */
|
||||
background-color: rgba(59, 130, 246, 0.1); /* 亮蓝色 */
|
||||
color: #1e40af; /* 蓝色文字 */
|
||||
|
||||
/* 悬浮行 */
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
```
|
||||
|
||||
#### 现在 ✅
|
||||
```css
|
||||
/* 表头背景 */
|
||||
background-color: rgba(44, 74, 107, 0.12); /* 莫兰蒂蓝 */
|
||||
color: #2c4a6b; /* 莫兰蒂蓝文字 */
|
||||
|
||||
/* 悬浮行 */
|
||||
background-color: rgba(91, 119, 142, 0.08); /* 中莫兰蒂蓝 */
|
||||
```
|
||||
|
||||
### 4. 激活按钮阴影
|
||||
|
||||
#### 之前 ❌
|
||||
```css
|
||||
.tab-btn.active {
|
||||
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3); /* 蓝色阴影 */
|
||||
}
|
||||
```
|
||||
|
||||
#### 现在 ✅
|
||||
```css
|
||||
.tab-btn.active {
|
||||
box-shadow: 0 4px 8px rgba(44, 74, 107, 0.3); /* 莫兰蒂蓝阴影 */
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 全局文字颜色覆盖
|
||||
|
||||
#### 新增全局样式 ✨
|
||||
```css
|
||||
/* 莫兰蒂蓝色系全局覆盖 */
|
||||
: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 按钮样式
|
||||
|
||||
#### 之前 ❌
|
||||
```javascript
|
||||
btn.classList.add('active', 'bg-blue-600', 'text-white', 'shadow-lg');
|
||||
```
|
||||
|
||||
#### 现在 ✅
|
||||
```javascript
|
||||
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处修改
|
||||
- 按钮激活背景色
|
||||
|
||||
## 🚀 构建验证
|
||||
|
||||
```bash
|
||||
✓ 0 errors, 0 warnings
|
||||
✓ 20 pages built successfully
|
||||
✓ 配色优化完成
|
||||
```
|
||||
|
||||
## 💡 设计理念
|
||||
|
||||
### 莫兰蒂蓝的特点
|
||||
1. **沉稳专业** - 深蓝色调适合技术文档
|
||||
2. **柔和舒适** - 降低饱和度，减少视觉疲劳
|
||||
3. **层次分明** - 三级蓝色提供清晰视觉层级
|
||||
4. **统一和谐** - 单一色系避免杂乱
|
||||
|
||||
### 适用场景
|
||||
- ✅ 技术报告
|
||||
- ✅ 学术文档
|
||||
- ✅ 专业展示
|
||||
- ✅ IC/EDA相关内容
|
||||
|
||||
## 📈 后续优化建议
|
||||
|
||||
1. **扩展到其他报告页**
|
||||
- 将莫兰蒂蓝配色应用到所有报告页
|
||||
- 保持视觉一致性
|
||||
|
||||
2. **创建色彩变量**
|
||||
- 在全局CSS中定义莫兰蒂蓝变量
|
||||
- 便于统一管理和修改
|
||||
|
||||
3. **暗色模式支持**
|
||||
- 为莫兰蒂蓝提供暗色版本
|
||||
- 适应不同阅读场景
|
||||
|
||||
## 🎨 完整色板参考
|
||||
|
||||
```css
|
||||
/* 莫兰蒂蓝完整色板 */
|
||||
: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` 部署
|
||||
Reference in New Issue
Block a user