前端开发规范与设计原则

"前端规范.md" 本文档详细阐述了前端开发中的规范，旨在提升代码质量、用户体验和交互设计。规范主要包括四个部分：设计原则、用语原则、布局规范以及功能按钮和表单的设计规则。 ## 设计原则 设计原则遵循及时反馈、贴近现实、系统一致性、防止错误发生、遵从习惯、突出重点、错误帮助和人性化帮助的原则。这些原则旨在确保用户在使用应用时能够得到顺畅、一致且无误的体验。 ## 用语原则 用语原则强调词汇的统一性、语法的正确性、文案的精炼和通俗易懂，以及语言的友好性。这有助于提高用户的理解和操作便捷性，降低学习成本。 ## 布局规范 布局规范规定了如何合理组织和呈现页面元素。例如，容器的嵌套应根据业务情景或界面划分，且子容器至少应有一个。内部容器需通过边框或背景色区分功能区域，避免组件直接裸露在外。同时，容器的嵌套层数不应超过三层，以保持界面清晰。若同一级别的容器内直接包裹组件，应保持边距的一致性。此外，如果toolbar独立显示，应使用其内置的内边距。 ## 功能按钮 功能按钮的规范包括：每个页面仅有一个主要动作按钮；次要动作按钮只在存在主要按钮时出现；其他按钮都是次要动作；按钮尺寸默认，图标与文字间有间隙；异步操作的按钮需有loading状态，防止重复请求。在toolbar中，警告或危险按钮位于主功能按钮右侧，并设定适当的间距。 ## 表单 表单设计方面，推荐使用dialog或drawer展示弹窗表单，且点击遮罩层不应自动关闭，以防未保存数据丢失。表单通常使用弹框的拖拽功能，高度根据内容调整，尽量不超过视口高度。如果表单内容过多，应使用页面表单。弹窗组件内的表单建议改为页面表单，避免弹窗嵌套。表单组件（如el-form、table-edit）需包裹在容器中，不能直接在布局层使用。 ## 表单项 表单项的布局要求对齐，每列每行仅有一个表单元素。功能按钮与表单项应分开使用，若需混用，可采用small大小的按钮。所有表单控件应显示其label，以提供明确的标识。 这份前端规范文档详细地定义了前端开发中各个方面的标准，对于保证代码质量、提升用户体验以及团队协作具有重要意义。遵循这些规范，开发者可以创建出更加直观、易于理解和使用的前端应用。