当前位置：首页 > news >正文

Spug 前端组件开发规范：UI 一致性保证实践终极指南

news 2026/5/12 20:39:39

Spug 前端组件开发规范：UI 一致性保证实践终极指南

【免费下载链接】spugopenspug/spug: Spug 是一个开源的企业级运维自动化平台，支持资产管理、作业调度、配置管理、脚本执行等多种运维场景，帮助企业提升运维效率。项目地址: https://gitcode.com/gh_mirrors/sp/spug

Spug 是一个开源的企业级运维自动化平台，支持资产管理、作业调度、配置管理、脚本执行等多种运维场景，帮助企业提升运维效率。在前端开发中，保持 UI 一致性是提升用户体验和维护效率的关键，本文将深入解析 Spug 前端组件开发规范，分享如何通过组件化架构确保 UI 一致性。

📋 组件化架构设计原则

Spug 采用基于 React + Ant Design 的组件化架构，所有 UI 组件都遵循统一的开发规范。项目的主要组件位于 spug_web/src/components/ 目录下，包括AuthButton、StatisticsCard、SearchForm等核心组件。

组件导入规范

所有页面组件统一从components目录导入公共组件，确保组件引用的一致性：

import { AuthButton, AuthDiv, TableCard } from 'components';

这种统一的导入方式避免了重复代码，提高了代码的可维护性。

🎯 权限控制组件规范

Spug 通过权限控制组件实现细粒度的权限管理，这是企业级应用的重要特性。

AuthButton 组件实现

AuthButton组件是权限控制的典型实现，位于 spug_web/src/components/AuthButton.js：

export default function AuthButton(props) { let disabled = props.disabled; if (props.auth && !hasPermission(props.auth)) { disabled = true; } return disabled ? null : <Button {...props}>{props.children}</Button> }

该组件通过hasPermission函数检查用户权限，无权限时直接返回null而不是禁用按钮，这种设计避免了无效按钮的显示。

权限包装器组件

除了按钮级别的权限控制，Spug 还提供了页面级别的权限包装器：

<AuthDiv auth="dashboard.dashboard.view"> <StatisticsCard/> <AlarmTrend/> <RequestTop/> </AuthDiv>

这种设计确保了整个功能模块的权限一致性。

🎨 样式管理规范

CSS Modules 使用规范

Spug 使用 CSS Modules 进行样式管理，所有组件样式文件都采用.module.less后缀：

组件样式：spug_web/src/components/index.module.less
页面样式：spug_web/src/pages/dashboard/index.module.css

样式命名规范

样式类名采用小写字母和连字符的组合，保持与 Ant Design 一致的命名风格：

.statisticsCard { position: relative; text-align: center; span { color: rgba(0, 0, 0, .45); display: inline-block; line-height: 22px; margin-bottom: 4px; } p { font-size: 32px; line-height: 32px; margin: 0; } }

全局样式覆盖

对于需要覆盖 Ant Design 默认样式的场景，使用:global选择器：

.searchForm { padding: 24px 24px 0 24px; background-color: #fff; border-radius: 2px; margin-bottom: 16px; :global(.ant-form-item) { display: flex; } }

📊 数据展示组件规范

StatisticsCard 统计卡片组件

StatisticsCard组件是数据展示的标准化实现，位于 spug_web/src/components/StatisticsCard.js：

class StatisticsCard extends React.Component { static Item = (props) => { return ( <div className={styles.statisticsCard}> <span>{props.title}</span> <p>{props.value}</p> {props.bordered !== false && <em/>} </div> ) }; render() { let items = lodash.get(this.props, 'children', []); if (!lodash.isArray(items)) items = [items]; const span = Math.ceil(24 / (items.length || 1)); return ( <Card bordered={false} style={{marginBottom: '24px'}}> <Row> {items.map((item, index) => ( <Col key={index} sm={span} xs={24}> {item} </Col> ))} </Row> </Card> ) } }

该组件采用静态子组件模式，支持灵活的布局配置，自动计算栅格系统的列宽。

TableCard 表格容器组件

表格是运维平台的核心组件，Spug 通过TableCard组件统一表格的容器样式：

.tableCard { border: 1px solid #f0f0f0; background: #fff; border-radius: 2px; padding: 24px; .toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } }

🔧 工具库统一管理

统一的工具函数导出

所有工具函数通过libs目录统一导出，确保工具函数的一致性使用：

// spug_web/src/libs/index.js import _http from './http'; import _history from './history'; export * from './functools'; export * from './router'; export const http = _http; export const history = _history; export const VERSION = 'v3.3.3';

HTTP 请求规范

所有 API 请求都通过统一的http模块进行，确保请求配置、错误处理和拦截器的一致性。

🚀 项目结构规范

目录结构标准化

Spug 采用标准化的目录结构：

spug_web/src/ ├── components/ # 公共组件 ├── layout/ # 布局组件 ├── libs/ # 工具库 └── pages/ # 页面组件 ├── dashboard/ # 仪表盘页面 ├── host/ # 主机管理页面 ├── deploy/ # 发布部署页面 └── system/ # 系统设置页面

页面组件规范

每个页面组件都遵循相同的结构模式：

class HomeIndex extends React.Component { render() { return ( <AuthDiv auth="dashboard.dashboard.view"> <StatisticsCard/> <AlarmTrend/> <RequestTop/> </AuthDiv> ) } }

📝 代码质量保证

统一的版权声明

/** * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug * Copyright (c) <spug.dev@gmail.com> * Released under the AGPL-3.0 License. */