# HPE Grommet 设计系统 ## HPE Grommet 设计系统界面预览 调整拟定的资源分配，并生成经过验证的本地方案。 ## HPE Grommet 设计系统设计参考 使用 baseSpacing=24 和 scale=6 生成的 Grommet v2 基础主题；这些并非 grommet-theme-hpe 的值。原生起始项目明确将 Arial 以及所示的品牌色和焦点色设为应用主题选项。 ### 默认边缘尺寸比例 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | global.edgeSize.hair | 1px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.xxsmall | 3px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.xsmall | 6px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.small | 12px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.medium | 24px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.large | 48px | 小屏响应式覆盖之外的默认尺寸。 | | global.edgeSize.xlarge | 96px | 小屏响应式覆盖之外的默认尺寸。 | ### 小屏响应式覆盖 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | global.breakpoints.small.value | 768 | 基础主题中的小屏断点边界。 | | small.edgeSize.xxsmall | 2px | 小屏精细间距。 | | small.edgeSize.xsmall | 3px | 小屏超小间距。 | | small.edgeSize.small | 6px | 响应式小号内边距。 | | small.edgeSize.medium | 12px | 响应式中号内边距。 | | small.edgeSize.large | 24px | 响应式大号内边距。 | | global.breakpoints.medium.value | 1536 | 下一个基础断点边界。 | ### 基础颜色与控件 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | global.colors.brand | #7D4CDB | Grommet 默认品牌色，不是 HPE 绿色。 | | global.colors.focus | #6FFFB0 | 默认焦点强调色。 | | global.colors.text.light | #444444 | 浅色主题正文文本。 | | global.colors.text.dark | #f8f8f8 | 深色主题正文文本。 | | global.colors.background-front.light | #FFFFFF | 前景浅色表面。 | | global.colors.background-front.dark | #444444 | 前景深色表面。 | | global.control.border.radius | 4px | 基础控件圆角。 | | global.control.border.width | 1px | 基础控件边框。 | ### 表单与字段约定 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Form.value | Object keyed by field name | 使用单个受控的预订对象。 | | Form.onChange | (value) => {} | 接收更新后的对象，而不是 DOM 事件。 | | Form.onSubmit | ({ value, touched }) => {} | 读取已接受的当前表单值。 | | Form.validate | blur \| submit \| change | 选择验证的触发时机。 | | Form.errors | Object keyed like value | 将远程或应用层错误关联到字段。 | ### Select 与范围控件的集成 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Select.options | String array or object array | 示例使用字符串，让值的结构更简单。 | | Select.onChange | ({ value, option }) => {} | 不要通过 Select 的 event.target.value 读取值。 | | Select.valueKey | { key, reduce } for object options | reduce 返回键对应的值，而不是完整对象。 | | Select.labelKey | Property name or function | 对象选项的可见标签。 | | Select.onSearch | Function; enables search input | 需要时，由应用提供筛选逻辑。 | ### Meter 的组成 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | value | number | 表示的数值；如果提供了 values，则忽略此项。 | | max | number or numeric string | 可用总容量；不要将其误认为百分比。 | | type | bar \| circle \| pie \| semicircle | 使用 circle 展示使用率概览。 | | color | Color identifier | 单个值时有效。 | | a11yTitle | string | 说明度量值及其分母。 | | size | Named size or CSS dimension | 让环形图保持在可用宽度之内。 | ## HPE Grommet 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## HPE Grommet 设计系统：以 Grommet 和 HPE 主题为基础 ### 不要将紫色标记为 HPE 设计令牌 > Grommet 是一个与 HPE 相关的 React 框架，拥有自己的基础主题。独立的 grommet-theme-hpe 包会导出 hpe，供采用 HPE 设计风格的应用使用。本参考介绍基础框架和明确配置的示例。其紫色品牌色和薄荷色焦点色来自基础主题，并非当前 HPE 品牌配色。 阅读配套规范 ### 简洁明确的应用主题 此设置将 Arial 设为应用字体，并沿用文档中说明的基础品牌色和焦点色。其他所有组件规则均继承自 Grommet。实际的 HPE 产品可以改为传入经批准的 hpe 主题；之后请核对最终的间距和字体排版，因为主题覆盖可能会改变此处列出的基础值。 阅读配套规范 ## HPE Grommet 设计系统主题比例值可能会在断点处变化 ### 命名值也是响应式设计决策 基础生成器从 24 像素开始。默认的中等边缘间距为 24px，但在小屏断点处，中等间距会变为 12px。因此，即使 JSX 中仍写着 medium，使用响应式内边距的 Box 也可能缩小。请结合比例值与断点覆盖规则一起查看；不要保证 medium 始终为二十四像素。 阅读配套规范 ### 使用 Box 实现实际布局 此规划器使用纵向 Box 作为页面布局，并使用响应式横向/纵向 Box 排列表单和容量摘要。表单子项可以扩展，而摘要则保留实用的最小宽度。在小屏幕上，图表会排在控件之后，与文档顺序一致。 阅读配套规范 ## HPE Grommet 设计系统：明确指定的易读基础样式 ### 字号和行高是独立的主题值 基础生成器根据间距输入值生成 18 像素字号和 24 像素行高。示例明确使用这组数值和 Arial，避免让人误以为下载了专有品牌字体。标题使用 Grommet Heading，正文使用 Text，由主题解析它们的角色，而不是在 CSS 中重复实现组件内部样式。 阅读配套规范 ## HPE Grommet 设计系统：单个受控的预订对象 ### 字段名称将字段与表单关联起来 Form 负责协调表单约定。在受控模式中，value 和 onChange 由调用方提供。每个 FormField 及其子输入上的 name 都用于标识对应的值键。我们的预订对象包含 name 和 pool。容量滑块单独保存为一个数字，因为它会在提交前驱动实时图表。 阅读配套规范 ### 验证预订名称 将必填的 FormField（name="name"）设为 TextInput（id="reservation-name"）的父项。htmlFor 用于关联可见标签。自定义验证器会在去除首尾空格后的值不足三个字符时返回明确的错误。将 validation 设为 submit，这样用户尚未操作的空表单就不会一开始显示错误。 阅读配套规范 ## HPE Grommet 设计系统：Select 有自己的事件结构 ### 使用字符串让简单场景更可预测 示例中的选项池为 Production 和 Development，因此受控值是字符串。如果改用对象选项，请设置 labelKey，并可选择通过 reduce 设置 valueKey，然后确保存储值与该选择一致。Select 的 onChange 会提供一个包含 value/option 的对象，不同于原生范围输入事件。 阅读配套规范 ### 搜索和选项加载由应用负责 提供 onSearch 时，Select 可以显示搜索框。这个属性并不意味着所有选项都会自动筛选。请单独保留未筛选的源集合，以便关闭或清除搜索后恢复。对于两个选项池，本示例特意省略了搜索功能。 阅读配套规范 ## HPE Grommet 设计系统：Meter 需要单位和分母 ### 表示容量，而不是一个含义不明的百分比 Meter 接收预计使用量，并设置 max=100。在这个示例规划器中，样例选项池已使用 35 个单位，拟预订量的范围为 5 到 60。由于演示中的分母是 100，百分比恰好与数值相同。代码仍会明确传入 max，这样即使总量改变，数据约定也能保持不变。 阅读配套规范 ### 保持图表与文本同步 环形图、预计使用量标签和剩余单位数都根据同一个数字滑块值计算。原生 RangeInput 会发出 DOM 事件，因此在进行算术运算前，请将 event.target.value 转换为 Number。否则，将字符串与三十五相加可能会得到看似合理但实际错误的总量。 阅读配套规范 ## HPE Grommet 设计系统：文档滚动与窄屏布局 ### 本页面选择 full="min" Grommet 的 full=true 适用于自行控制视口和内部滚动的应用。本规划器使用 full="min"，让文档可以随内容延长。这样可避免表单及其验证消息在手机上被困在固定高度的外壳中。 阅读配套规范 ### 在 Grommet 内部读取 ResponsiveContext 子组件会读取当前上下文，并在小屏幕上选择纵向布局，在其他情况下选择横向布局。提供程序必须包裹该子组件，确保上下文对应所选主题。可用宽度较窄时，备用布局仍会自然地采用纵向排列。 - 将字段标签放在输入控件上方。 - 在源码顺序中，将容量摘要放在控件之后。 - 允许操作行换行，同时避免隐藏验证文本。 阅读配套规范 ## HPE Grommet 设计系统：关联标签、错误和用量 ### 为每个数值显示明确含义 范围控件始终显示标签和单位。圆形仪表会收到包含预计用量和总容量的 a11yTitle。附近的文本也会显示相同数值，因此信息不会只通过彩色圆弧传达。错误提示会指出预留问题，并显示在对应字段旁。 阅读配套规范 ### 明确说明本地操作结果 “准备方案”会保存经过验证的表单和当前分配情况的本地快照，不会配置基础设施。只有提交有效表单后，结果才会更新；滑块变更仍只是提议。区分已准备的方案和当前编辑的草稿，便于比较两者。 1. 提交空白名称，确认出现必填字段错误。 2. 输入名称、选择资源池并调整分配量。 3. 准备方案，并确认本地快照包含所选资源池和数值单位。 阅读配套规范 ## HPE Grommet 设计系统：挂载完整的 Grommet 组合 ### 安装框架及其样式对等依赖 在客户端项目中安装 grommet、styled-components 和 React 运行时。此设置会挂载 Grommet，以及使用 ResponsiveContext 的子组件、受控 Form、FormField/TextInput/Select、RangeInput 和 Meter。使用 Button 的 label 属性而非 children，明确采用默认的标签样式按钮行为。 阅读配套规范 ## HPE Grommet 设计系统组件示例 ### 完整的独立交互示例 将完整文档保存为 index.html 并在浏览器中打开。这是对基础 Grommet 尺寸和颜色的独立 HTML/CSS 解读，并明确选用 Arial 字体；不是单独的 HPE 主题。 ``` Capacity reservation — Grommet study
Capacity planner

Plan a reservation

Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.

5 units60 units

No infrastructure will be provisioned.

``` 代码参考 - 容量计算使用示例中显示的资源池数据。独立布局 HTML；原生示例选用基础 Grommet，而非单独的 HPE 主题。 ### 完整的原生实现入口 此处汇总了从设置到完整实现的内容，并附有重点说明 API。请按照设置中的文档说明，满足软件包和构建前置条件。 ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned.
setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}> setPoolId(value)} /> ``` 代码参考 - 在调用组件中使用 useState 声明 poolId/setPoolId。 - 启用 reduce 后，存储的值是 ID，而不是对象。 ## HPE Grommet 设计系统 Agent 设置 ### 实现起点 适用于包含根元素的项目的客户端 main.jsx。使用基础 Grommet，并明确声明应用字体和品牌覆盖样式。不默认启用 HPE 主题。API 已根据官方文档核对；此处尚未验证原生编译。 ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned. setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}>