elementUI风格
elementUI风格特点
ElementUI是一套基于Vue.js的桌面端组件库，其设计风格以简洁、直观和高效为核心。整体采用扁平化设计，色彩以蓝色为主色调，搭配中性灰和白色背景，形成清晰的信息层级。组件交互遵循Material Design的部分原则，同时融入更适合企业级应用的中性化设计语言。
视觉设计规范
- 色彩系统：主色为#409EFF，搭配#909399（辅助灰）、#F56C6C（警告红）、#67C23A（成功绿）等状态色。提供完整的色板支持主题定制。
- 字体排版：默认中文字体为"PingFang SC"、"Microsoft YaHei"，英文字体为"Helvetica Neue"，基础字号14px，标题阶梯式递增。
- 圆角规范：基础圆角4px，按钮等交互组件采用4-20px可调节圆角体系。
- 阴影系统：采用0-3级阴影层级，默认使用box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1)作为基础投影。
组件设计特征
- 表单控件：输入框采用极简边框样式，聚焦状态伴随蓝色高亮动画。下拉选择器使用直角弹出面板与圆角触发按钮的组合设计。
- 导航类组件：菜单栏支持垂直/水平两种模式，激活项通过色彩对比度强化识别。面包屑导航采用箭头分隔符。
- 数据展示：表格组件默认带有斑马纹交替背景，表头固定灰色背景。标签页使用下划线式指示器。
- 反馈组件：消息提示出现在视窗右上角，4秒自动消失。对话框默认宽度50%，支持全屏模式。
交互设计原则
- 鼠标悬停：可交互元素默认有色彩明度变化（如按钮hover状态变为#66b1ff）。
- 加载状态：使用旋转圆环动画，搭配透明度渐变效果。
- 表单验证：错误状态即时显示红色边框，配合图标和悬浮提示说明。
- 响应式适应：栅格系统支持24列响应式布局，组件尺寸提供medium/small/mini三级调节。
主题定制方案
通过SCSS变量覆盖实现风格定制，关键变量包括：
$--color-primary: #FF0000; // 修改主色
$--font-path: '~element-ui/lib/theme-chalk/fonts'; // 字体路径
$--border-radius-base: 8px; // 全局圆角支持在线主题生成工具，可通过可视化界面调整参数后下载定制样式包。企业级项目推荐使用按需引入配合babel-plugin-component优化打包体积。
