1

background/design.md

@@ -0,0 +1,64 @@
+# 企业设置管理系统设计规范
+
+## 设计理念
+采用现代简约的企业级设计风格，强调专业性和易用性，通过精致的视觉细节和流畅的交互动画提升用户体验。
+
+## 色彩系统
+- **主色调**: 深蓝灰 (#2D3748) - 专业稳重
+- **辅助色**: 柔和蓝 (#4A90E2) - 交互元素
+- **强调色**: 温暖橙 (#F56500) - 重要操作
+- **背景色**: 浅灰白 (#F7FAFC) - 主背景
+- **文本色**: 深灰 (#2D3748) 和中灰 (#4A5568)
+
+## 字体系统
+- **标题字体**: Noto Sans SC (粗体) - 现代感强
+- **正文字体**: Noto Sans SC (常规) - 清晰易读
+- **字体层级**: 
+  - H1: 2.5rem (40px)
+  - H2: 2rem (32px)
+  - H3: 1.5rem (24px)
+  - 正文: 1rem (16px)
+  - 小字: 0.875rem (14px)
+
+## 视觉效果
+### 背景效果
+- 使用液态金属位移效果作为页面背景
+- 微妙的粒子动画增强视觉层次
+
+### 交互动画
+- 按钮悬停: 3D倾斜效果 + 阴影扩展
+- 表单元素: 聚焦时边框发光效果
+- 开关切换: 平滑的滑动动画
+- 卡片悬停: 轻微上浮 + 阴影加深
+
+### 图标系统
+- 使用线性图标风格
+- 统一的描边粗细 (2px)
+- 悬停时填充动画
+
+## 布局系统
+- **网格系统**: 12列响应式网格
+- **间距系统**: 4px基础单位的倍数
+- **圆角**: 统一使用8px圆角
+- **阴影**: 多层次阴影系统营造深度感
+
+## 组件设计
+### 登录表单
+- 居中布局，最大宽度400px
+- 半透明背景卡片
+- 渐变边框装饰
+
+### 设置面板
+- 左侧导航栏 (固定宽度280px)
+- 右侧内容区域 (自适应)
+- 分组的设置卡片
+
+### 开关控件
+- iOS风格的滑动开关
+- 颜色状态反馈
+- 微动画过渡
+
+### 输入控件
+- 浮动标签设计
+- 聚焦时动画效果
+- 错误状态视觉反馈