docs: 添加 UI 配色规范和品牌名称要求

This commit is contained in:
2026-01-24 21:00:45 +08:00
parent a6bd08c569
commit 7f67ca4bfc
+75
View File
@@ -0,0 +1,75 @@
# UI 配色规范
## 基本原则
- **使用纯色背景**,不使用渐变色(`linear-gradient`)
- **科技风配色**,偏好深色系
- **避免灰色系**,不使用沉闷的灰色调
## 主色调
### 科技蓝主题
```css
/* 主色 */
--primary-color: #1a237e;
/* 用于 */
- 登录页背景
- 侧边栏背景
- 按钮背景
- 输入框聚焦态边框
```
## 配色方案
### 登录页面
```css
/* 背景 */
background: #1a237e;
/* 登录按钮 */
background: #1a237e;
/* 输入框聚焦 */
border-color: #1a237e;
box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
```
### 布局页面
```css
/* 侧边栏 */
background: #1a237e;
/* 菜单文字 */
color: rgba(255, 255, 255, 0.7);
/* 菜单激活项 */
color: #fff;
background: rgba(255, 255, 255, 0.15);
/* 菜单悬停 */
background: rgba(255, 255, 255, 0.1);
/* Logo 区域 */
background: rgba(0, 0, 0, 0.2);
```
## 禁止使用的配色
- ❌ 灰色系:`#545c64`、`#304156`、`#263445` 等
- ❌ 渐变色:`linear-gradient(...)`
- ❌ 默认 Element UI 蓝色:`#409EFF`
## 品牌名称
- **正式名称**:Kenaito配置中心
- **使用场景**:登录页标题、侧边栏 Logo、页面标题、欢迎语等
- **不要简写**:不使用"配置中心"
## 参考文件
- 登录页:`web/src/views/Login.vue`
- 布局页:`web/src/views/Layout.vue`