前端组件库样式一致性规范

前端组件库样式一致性规范一、总则规范（一）适用范围。本规范适用于公司所有前端组件库的样式设计、开发与维护工作，确保各组件在视觉呈现、交互行为、代码实现上保持高度统一。（二）基本原则。遵循“统一设计、高效开发、易于维护、兼容主流”的原则，通过标准化实现跨平台、跨项目的一致性体验。二、视觉设计标准（一）色彩体系规范。1.主色系采用0056b3，用于按钮、图标等关键交互元素。2.辅助色系采用f0f2f5，用于背景、分割线等非重点区域。3.强调色采用ff4d4f，用于警告、错误等需要优先关注的场景。4.禁止使用RGB十六进制表示色值，必须使用标准色名或HEX代码。（二）字体排印规范。1.标题层级使用思源黑体，字号分别为32px、28px、24px、20px。2.正文使用思源宋体，字号16px，行间距1.5倍。3.图表说明使用微软雅黑，字号14px。4.禁止在组件内直接设置字体大小，必须通过主题配置统一管理。（三）布局间距规范。1.组件外边距统一为16px，内边距为24px。2.表格单元格间距为2px，边框宽度为1px。3.间距单位必须使用em，禁止使用px或rem。4.布局方式优先采用Flexbox，特殊情况可使用Grid。三、交互行为标准（一）动效设计规范。1.按钮点击动效执行时间控制在150-200ms。2.拖拽操作时需显示视觉反馈，轨迹透明度不低于0.3。3.页面切换使用淡入淡出效果，时长不超过300ms。4.禁止使用弹窗作为主要交互方式，优先考虑底部弹层或悬浮窗。（二）状态管理规范。1.按钮状态分为默认、悬停、按下、禁用四种。2.表单项必填标记使用红色星号，尺寸为16px。3.加载状态使用旋转圆环，转速为1.5转/秒。4.错误状态必须提供明确的文字提示，颜色为ff4d4f。四、代码实现标准（一）组件命名规范。1.基础组件使用小写字母，多个单词间用中划线连接，如button-primary。2.复合组件使用大驼峰命名法，如DatePicker。3.工具类函数使用动词形式，如formatDate。（二）代码结构规范。1.组件文件必须包含props类型声明、slots说明、JSX样式。2.代码必须使用ES6语法，禁止使用var。3.导出组件时必须使用default，命名空间组件使用import。4.禁止在组件内部直接引入外部CSS，必须通过主题配置。（三）开发工具规范。1.使用Webpack5构建，最小化代码体积。2.单元测试覆盖率不低于80%，使用Jest框架。3.代码风格统一使用ESLint，配置文件路径为/.eslintrc.js。4.禁止使用console.log作为线上问题排查手段。五、主题配置标准（一）配置结构规范。1.主题配置文件必须包含color、typography、spacing、radius四个模块。2.配置项命名使用kebab-case，如spacing.md。3.配置值必须使用JSON格式，禁止使用XML或YAML。4.禁止在主题文件中直接引用硬编码数值，必须使用变量。（二）主题扩展规范。1.主题配置必须支持暗黑模式切换，通过prefers-color-scheme媒体查询实现。2.自定义主题必须继承基础主题，禁止直接修改源文件。3.主题切换时必须保持页面状态不变，包括表单数据。4.禁止使用CSS变量作为主题配置的主要方式。六、维护管理规范（一）版本发布规范。1.新版本发布必须经过设计评审、开发测试、跨浏览器验证三个环节。2.版本号采用MAJOR.MINOR.PATCH格式，MAJOR升级时必须兼容旧版本。3.发布说明必须包含所有变更项，使用diff格式展示。4.禁止使用语义化版本作为私有项目版本号。（二）问题处理规范。1.组件问题必须通过GitHubissue跟踪，优先级分为紧急、高、中、低。2.紧急问题响应时间不超过4小时，高优先级问题不超过24小时。3.修复方案必须经过CodeReview，禁止直接合并。4.禁止将未解决的问题标记为已关闭。（三）文档更新规范。1.每次组件变更必须同步更新文档，使用Confluence作为主要载体。2.文档必须包含使用指南、API说明、示例代码三个部分。3.示例代码必须使用在线预览功能，确保可运行。4.禁止使用过时的截图作为说明材料。七、附则说明本规范自发布之日起生效，所有前端项目必须按照本规范进行组件开发与维护。设计团队负责每