admin 管理员组

文章数量: 1184232

Microi设计系统：统一的设计语言与组件规范

【免费下载链接】开源低代码平台-Microi吾码 开源低代码平台-Microi吾码，基于.NET8+Vue3+Element-Plus，始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月开源。 项目地址: https://gitcode/microi-net/microi

引言：为什么需要统一的设计系统？

在当今快速迭代的软件开发环境中，设计系统（Design System）已成为企业级应用开发的核心基础设施。Microi作为一款开源低代码平台，历经10年技术沉淀（始于2014年基于Avalon.js，2018年使用Vue重构，2024年10月开源），其设计系统的构建体现了对一致性、可维护性和开发效率的深度思考。

设计系统价值矩阵：

设计语言核心要素

色彩体系（Color System）

Microi采用科学分层的色彩系统，确保视觉层次清晰且具有品牌辨识度：

// 基础色板 - 定义在 variables.scss
$blue: #324157;        // 主蓝色
$light-blue: #3A71A8;  // 浅蓝色
$red: #C03639;         // 警示红色
$green: #30B08F;       // 成功绿色
$yellow: #FEC171;      // 警告黄色
$panGreen: #30B08F;    // 面板绿色

// 侧边栏配色
$menuText: #fff;              // 菜单文字色
$menuActiveText: #5473E8;     // 激活状态文字色
$menuBg: transparent;         // 菜单背景（透明设计）
$menuHover: #5473E8;          // 悬停状态色

色彩应用规范表：

色彩类别色值使用场景语义含义
主色#324157导航、重要按钮品牌、信任
辅助色#3A71A8次要操作、标签辅助、温和
成功色#30B08F成功状态、完成正向、完成
警告色#FEC171提醒、注意警示、注意
错误色#C03639错误、危险操作危险、错误

字体与排版（Typography）

系统采用多字体降级策略，确保跨平台显示一致性：

font-family: Helvetica Neue, Helvetica, PingFang SC, 
             Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;

字号层级规范：

元素类型字号字重行高使用场景
主标题20px7001.4页面大标题
次标题16px7001.5区域标题
正文14px4001.5主要文本内容
辅助文本12px4001.5说明性文字
小字号10px4001.5标签、徽章

组件体系架构

基础组件层（Base Components）

Microi基于ElementPlus构建基础组件层，同时扩展了大量业务组件：

核心组件详解

1. ContentBox - 内容容器组件
<template>
  <div class="content-box">
    <div class="title">
      <b-icon :class="icon" size="20" :color="iconColor"></b-icon>
      <i class="cb-title">{{ cbTitle }}</i>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ContentBox",
  props: {
    icon: { type: String, default: "icon-ios-podium" },
    cbTitle: { type: String, default: "this is title" },
    iconColor: { type: String, default: "#3387e5" }
  }
};
</script>

组件特性：

  • 统一的标题栏样式
  • 图标+文字的组合标题
  • 灵活的内容插槽
  • 可定制的图标颜色
2. 增强型Upload组件

系统提供了多个Upload变体组件，满足不同业务场景：

组件名称特性适用场景
SingleImage单图片上传头像、封面图
SingleImage2带预览的单图上传需要预览的图片
SingleImage3增强型单图上传复杂业务场景

布局系统（Layout System）

Microi采用灵活的响应式布局系统：

// 侧边栏宽度
$sideBarWidth: 240px;

// 主要内容区域
.app-container {
  padding: 20px;
}

// 组件容器
ponents-container {
  margin: 30px 50px;
  position: relative;
}

布局组件关系图：

交互设计规范

状态管理

系统通过统一的样式类管理组件状态：

// 徽章状态样式
.badgenew {
  &-success { background-color: #f0f9eb; color: #67c23a; }
  &-info { background-color: #f4f4f5; color: #909399; }
  &-warning { background-color: #fdf6ec; color: #e6a23c; }
  &-danger { background-color: #fef0f0; color: #f56c6c; }
}

// 尺寸变体
.badge-medium { height: 28px; line-height: 26px; }
.badge-small { height: 24px; line-height: 22px; }
.badge-mini { height: 20px; line-height: 19px; }

动画与过渡

系统定义了平滑的过渡效果：

// 通用过渡
transition: 600ms ease position;

// 侧边栏动画
.sidebar-enter-active, .sidebar-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

主题定制能力

Microi设计系统支持深度主题定制：

1. 色彩主题配置

通过修改变量文件即可实现主题切换：

// 在 variables.scss 中修改主题色
$menuActiveText: #你的品牌色;
$menuHover: #你的悬停色;

2. 组件主题覆盖

利用CSS变量和SCSS变量系统实现组件级主题定制：

:root {
  --microi-primary: #324157;
  --microi-secondary: #3A71A8;
  --microi-success: #30B08F;
}

// 组件中使用CSS变量
.microi-button {
  background-color: var(--microi-primary);
  &:hover {
    background-color: var(--microi-secondary);
  }
}

开发规范与最佳实践

组件开发原则

  1. 单一职责原则：每个组件只负责一个特定功能
  2. Props接口设计：提供清晰的props接口和默认值
  3. 插槽支持：为自定义内容预留插槽
  4. 事件通信：使用标准的Vue事件机制

样式编写规范

// 使用BEM命名规范
.microi-component {
  &__header { /* 头部样式 */ }
  &__body { /* 主体样式 */ }
  &--disabled { /* 禁用状态 */ }
}

// 响应式处理
@media (max-width: 768px) {
  .microi-component {
    flex-direction: column;
  }
}

设计系统实施路线图

总结与展望

Microi设计系统经过10年的实践积累，形成了一套完整的设计语言和组件规范体系。其核心价值在于：

  1. 提升开发效率：通过组件复用减少重复开发工作量
  2. 保证产品质量：统一的交互模式和视觉风格提升用户体验
  3. 降低维护成本：规范的代码结构和样式体系便于维护
  4. 支持业务扩展：灵活的主题定制能力适应不同业务需求

未来，Microi设计系统将继续演进，在以下方向进行优化：

  • 增强移动端适配能力
  • 完善设计令牌（Design Tokens）系统
  • 提供更丰富的主题定制选项
  • 建设组件生态和插件市场

通过持续的设计系统建设，Microi将为开发者提供更加高效、一致的开发体验，推动低代码平台的标准化和生态化发展。

【免费下载链接】开源低代码平台-Microi吾码 开源低代码平台-Microi吾码，基于.NET8+Vue3+Element-Plus，始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月开源。 项目地址: https://gitcode/microi-net/microi

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

本文标签： 组件 语言 系统 Microi NET

版权声明：本文标题：Microi.net设计系统：统一的设计语言与组件规范 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1766218713a3445052.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。