Spug 前端组件开发规范UI 一致性保证实践终极指南【免费下载链接】spugopenspug/spug: Spug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。项目地址: https://gitcode.com/gh_mirrors/sp/spugSpug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。在前端开发中保持 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.jsexport 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 authdashboard.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.jsclass 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 authdashboard.dashboard.view StatisticsCard/ AlarmTrend/ RequestTop/ /AuthDiv ) } } 代码质量保证统一的版权声明所有源文件都包含统一的版权声明确保代码规范性/** * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug * Copyright (c) spug.devgmail.com * Released under the AGPL-3.0 License. */组件文档规范虽然没有专门的文档文件但通过清晰的组件命名和结构设计实现了自解释的代码。 最佳实践总结1. 组件复用最大化通过提取公共组件到components目录最大化代码复用率减少重复开发。2. 权限控制统一化使用统一的权限控制组件确保权限逻辑的一致性。3. 样式管理模块化采用 CSS Modules 管理样式避免样式冲突提高样式可维护性。4. 工具函数集中化所有工具函数集中管理确保工具函数的一致性和可维护性。5. 项目结构标准化标准化的目录结构便于团队协作和新人上手。 快速上手建议对于想要基于 Spug 前端规范进行开发的团队建议从现有组件开始先使用现有的components目录下的组件遵循导入规范统一使用import { Component } from components语法保持样式一致性参考现有组件的样式实现权限控制先行在开发初期就考虑权限控制需求工具函数复用优先使用现有的工具函数避免重复造轮子通过遵循这些规范Spug 前端团队确保了 UI 的一致性、代码的可维护性和开发的高效性为运维自动化平台提供了稳定、美观、易用的前端界面。【免费下载链接】spugopenspug/spug: Spug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。项目地址: https://gitcode.com/gh_mirrors/sp/spug创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Spug 前端组件开发规范：UI 一致性保证实践终极指南
Spug 前端组件开发规范UI 一致性保证实践终极指南【免费下载链接】spugopenspug/spug: Spug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。项目地址: https://gitcode.com/gh_mirrors/sp/spugSpug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。在前端开发中保持 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.jsexport 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 authdashboard.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.jsclass 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 authdashboard.dashboard.view StatisticsCard/ AlarmTrend/ RequestTop/ /AuthDiv ) } } 代码质量保证统一的版权声明所有源文件都包含统一的版权声明确保代码规范性/** * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug * Copyright (c) spug.devgmail.com * Released under the AGPL-3.0 License. */组件文档规范虽然没有专门的文档文件但通过清晰的组件命名和结构设计实现了自解释的代码。 最佳实践总结1. 组件复用最大化通过提取公共组件到components目录最大化代码复用率减少重复开发。2. 权限控制统一化使用统一的权限控制组件确保权限逻辑的一致性。3. 样式管理模块化采用 CSS Modules 管理样式避免样式冲突提高样式可维护性。4. 工具函数集中化所有工具函数集中管理确保工具函数的一致性和可维护性。5. 项目结构标准化标准化的目录结构便于团队协作和新人上手。 快速上手建议对于想要基于 Spug 前端规范进行开发的团队建议从现有组件开始先使用现有的components目录下的组件遵循导入规范统一使用import { Component } from components语法保持样式一致性参考现有组件的样式实现权限控制先行在开发初期就考虑权限控制需求工具函数复用优先使用现有的工具函数避免重复造轮子通过遵循这些规范Spug 前端团队确保了 UI 的一致性、代码的可维护性和开发的高效性为运维自动化平台提供了稳定、美观、易用的前端界面。【免费下载链接】spugopenspug/spug: Spug 是一个开源的企业级运维自动化平台支持资产管理、作业调度、配置管理、脚本执行等多种运维场景帮助企业提升运维效率。项目地址: https://gitcode.com/gh_mirrors/sp/spug创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
