简约蓝主题
简约蓝是组件库的默认主题，采用清新的蓝色调，专为 B 端数据仪表盘场景设计。
主题特点
色彩系统
简约蓝主题使用蓝色作为主色调，传达专业、可信赖的品牌形象。
- 主色 -
#2196f3- 用于主要操作、链接等 - 成功色 -
#52c41a- 用于成功状态、正向趋势 - 警告色 -
#faad14- 用于警告提示 - 错误色 -
#f5222d- 用于错误状态、负向趋势 - 信息色 -
#1890ff- 用于信息提示
字体系统
使用系统默认字体栈，确保在不同平台上都有良好的显示效果。
css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;字号规范：
- xs - 12px - 辅助信息
- sm - 14px - 正文、标签
- base - 16px - 标题、重要信息
- lg - 18px - 页面标题
- xl - 20px - 大标题
间距系统
统一的间距系统，确保页面布局的一致性。
- xs - 4px - 最小间距
- sm - 8px - 小间距
- md - 16px - 标准间距
- lg - 24px - 大间距
- xl - 32px - 超大间距
使用主题
基础用法
typescript
import { createApp } from 'vue';
import App from './App.vue';
import SimpleBlueUI, { ThemeManager, simpleBlueTheme } from '@simple-blue/components';
const app = createApp(App);
app.use(SimpleBlueUI);
const themeManager = ThemeManager.getInstance();
themeManager.setTheme(simpleBlueTheme);
app.mount('#app');主题配置
typescript
export const simpleBlueTheme: ThemeConfig = {
name: 'simple-blue',
colors: {
primary: '#2196f3',
success: '#52c41a',
warning: '#faad14',
error: '#f5222d',
info: '#1890ff',
},
typography: {
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
fontSize: {
xs: '12px',
sm: '14px',
base: '16px',
lg: '18px',
xl: '20px',
},
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px',
},
};CSS 变量
主题通过 CSS 变量实现，可以在运行时动态修改：
css
:root {
--color-primary: #2196f3;
--color-success: #52c41a;
--color-warning: #faad14;
--color-error: #f5222d;
--color-info: #1890ff;
}设计原则
专业性
使用蓝色作为主色调，传达专业、可信赖的品牌形象，适合企业级应用。
清晰性
合理的色彩对比和间距设计，确保信息层次清晰，易于阅读。
一致性
统一的设计语言和组件规范，确保整个应用的视觉一致性。