01Infor 设计系统 界面预览
验证摘要和联系方式，准备本地请求，并在不发送任何内容的情况下清除请求。
基于已核实的 IDS core/light 令牌值和系统字体回退，对 HTML/CSS 进行独立演绎。并非原生 IDS 运行时。·
实现参考 本次修订中读取的 Infor 公开令牌表主题样式表，以及已发布的 ids-enterprise-wc 1.17.1 和官方输入框/按钮示例。最新的令牌表 URL 指向实时快照，不保证对应某个软件包版本。
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-color-action-default | var(--ids-color-blue-60) | 来自公开 core/light 主题的语义别名。 |
--ids-color-action-stronger | var(--ids-color-blue-70) | 来自公开 core/light 主题的语义别名。 |
--ids-color-background-default | var(--ids-color-white-100) | 来自公开 core/light 主题的语义别名。 |
--ids-color-foreground-default-default | var(--ids-color-neutral-100) | 来自公开 core/light 主题的语义别名。 |
--ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | 来自公开 core/light 主题的语义别名。 |
--ids-color-border-default | var(--ids-color-neutral-60) | 来自公开 core/light 主题的语义别名。 |
--ids-color-border-weak | var(--ids-color-neutral-40) | 来自公开 core/light 主题的语义别名。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-color-blue-60 | #0072ed | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-blue-70 | #0066d4 | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-neutral-100 | #161618 | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-neutral-80 | #3b3b3f | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-neutral-60 | #6f6f76 | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-neutral-10 | #f5f5f5 | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
--ids-color-red-60 | #da1217 | 公开主题基础令牌；不要假设深色或高对比度模式也使用相同值。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-space-2xs | var(--ids-space-04) | 在自定义应用间距中使用该别名。 |
--ids-space-xs | var(--ids-space-08) | 在自定义应用间距中使用该别名。 |
--ids-space-sm | var(--ids-space-16) | 在自定义应用间距中使用该别名。 |
--ids-space-md | var(--ids-space-24) | 在自定义应用间距中使用该别名。 |
--ids-space-lg | var(--ids-space-32) | 在自定义应用间距中使用该别名。 |
--ids-space-xl | var(--ids-space-40) | 在自定义应用间距中使用该别名。 |
--ids-space-2xl | var(--ids-space-48) | 在自定义应用间距中使用该别名。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-space-04 | 4px | 来自令牌样式表的具体比例值。 |
--ids-space-08 | 8px | 来自令牌样式表的具体比例值。 |
--ids-space-16 | 16px | 来自令牌样式表的具体比例值。 |
--ids-space-24 | 24px | 来自令牌样式表的具体比例值。 |
--ids-space-32 | 32px | 来自令牌样式表的具体比例值。 |
--ids-space-40 | 40px | 来自令牌样式表的具体比例值。 |
--ids-space-48 | 48px | 来自令牌样式表的具体比例值。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-font-family-sans | source sans pro | 字体排版参考；字体文件需单独加载。 |
--ids-font-family-mono | source code pro | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-default | var(--ids-font-size-sm) | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-sm | var(--ids-font-size-40) | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-30 | 14px | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-40 | 16px | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-50 | 20px | 字体排版参考；字体文件需单独加载。 |
--ids-font-size-60 | 24px | 字体排版参考；字体文件需单独加载。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ids-border-radius-xs | var(--ids-border-radius-04) | 该别名引用一个基础令牌；不要假设每个控件都使用最大圆角。 |
--ids-border-radius-sm | var(--ids-border-radius-08) | 该别名引用一个基础令牌；不要假设每个控件都使用最大圆角。 |
--ids-border-radius-md | var(--ids-border-radius-16) | 该别名引用一个基础令牌；不要假设每个控件都使用最大圆角。 |
--ids-border-radius-lg | var(--ids-border-radius-24) | 该别名引用一个基础令牌；不要假设每个控件都使用最大圆角。 |
--ids-border-radius-circle | var(--ids-border-radius-99) | 该别名引用一个基础令牌；不要假设每个控件都使用最大圆角。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
label | Visible input label | 用于标识字段，不要只依赖占位符。 |
validate | required / email required | 有文档说明的验证规则。 |
readonly | true | 保留易读且不可编辑的资源标识符。 |
disabled | true | 单独呈现不可用的输入状态。 |
clearable | true | 字段级清除操作。 |
dirty-tracker | true | 可选的变更值跟踪。 |
text-align | start | center | end | 用于文本或数字内容呈现的逻辑对齐方式。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
appearance | primary | 准备本地草稿。 |
appearance | secondary | 将清除草稿作为辅助操作。 |
appearance | tertiary | 强调程度较低的替代操作。 |
appearance | primary-destructive / tertiary-destructive | 用于实际的破坏性操作，而非常规取消。 |
disabled | Boolean attribute | 原生组件不可用状态。 |
03Infor 设计系统 完整指南
实用指南，介绍如何为真实界面选择、应用和评审此系统。
DESIGN-infor.md完整指导、实现起点和源代码链接。
下载指南Infor 设计系统 具备稳定记录标识的企业级表单
将设备标识与可编辑请求信息分开
Infor 将 SoHo 称为其设计语言，并将 IDS 定位为服务企业角色与提升工作效率的解决方案。本示例将这一重点应用于维护请求：资产标识保持固定，工作摘要、联系人和紧急程度则是可编辑的任务信息。
ID 02006 特意使用字符串表示。若将其转换为数字，就会丢失开头的零并改变其标识。原生 IDS 示例使用只读输入框，让记录上下文始终可见，同时避免它看起来像是缺失或不可用的字段。
阅读配套规范
Infor 设计系统 主题别名通过基础令牌解析
按用途使用别名
公开主题快照将 action-default 定义为 blue-60，将 default foreground 定义为 neutral-100，将 secondary foreground 定义为 neutral-80。这种两层结构让自定义表单与主题保持一致，无需在应用中重复写入字面颜色值。
公开令牌页面提供 Core、Dark 和 Contrast 模式。本指南中的值来自该页面核心/浅色样式表的快照。预览并未声称蓝色十六进制值在这三种模式下都通用；生产组件应使用语义别名，由所选主题解析对应的值。
阅读配套规范
Infor 设计系统 明确的比例尺，不虚构密度体系
间距、排版和圆角各有独立的别名集合
间距别名包括 xs（对应 8 像素基础令牌）、sm（16 像素）、md（24 像素）和 lg（32 像素）。提供的原生 CSS 使用 md 作为主要内边距，并以 sm 作为字段间距。这样既能在源码中清楚表达设计意图，也能在参考表中保留具体数值。
默认字体系列为 Source Sans Pro，等宽字体为 Source Code Pro。font-size-default 别名对应 16 像素的比例尺条目。加载库并不意味着无需提供软件包 README 中说明的字体资源。离线预览则使用常规备用字体。
圆角名称与间距名称相互独立：radius-sm 对应 8 像素，而 space-sm 对应 16 像素。仅仅因为两个名称都以 sm 结尾，就复用记忆中的数值，会导致结果不正确。
阅读配套规范
Infor 设计系统 脏值跟踪与验证有不同的约定
跟踪编辑，不要将其视为有效数据
官方 IDS 输入组件库示例展示了在带有初始值的输入框上使用 dirty-tracker="true"。脏值跟踪关注字段是否被编辑，与 validate 属性相互独立；email 和 required 规则用于描述可接受的输入。联系人字段即使已修改，仍可能包含无效的电子邮件地址。
已发布的 Input 声明提供 checkValidation(): void。调用它是为了触发组件的验证行为，而不是将它作为授权工单操作的布尔条件。原生示例也会在生成草稿前检查应用所需的值。可清除的摘要和只读的资产信息还展示了另外两种独立的输入能力。
脏值跟踪是有文档说明的扩展功能，但本预览未启用。演示会在编辑后清除已准备的摘要，并将焦点重置到工作摘要字段；它不会声称维护请求已保存。
阅读配套规范
Infor 设计系统 使用两部分工作区，同时确保表单始终清晰可见
表单优先，上下文其次
预览将表单与精简的设备上下文卡片及原创的简易机器示意图并排展示。主要阅读顺序仍为标题、字段、操作和结果。在较窄的视口下，上下文内容会移到表单下方，而不是挤压输入框，形成难以阅读的多列布局。
库中的示例使用 ids-layout-grid，并通过按断点设置的列属性控制布局。本示例有意采用更简单的自适应布局；其最大宽度和断点均为应用层设置。这里演示的是基于令牌的间距和原生控件标签。
阅读配套规范
Infor 设计系统 固定原生软件包版本，并在读取值之前完成初始化
已发布的软件包是可靠的入口
经过核实的软件包信息确认了版本 1.17.1、ES 模块入口 enterprise-wc.js，以及当前由 Infor 托管的源代码仓库。因此，旧的 GitHub 地址并非可靠的安装指南。代码导入已发布的软件包，插入组件组合，并在配置交互行为前等待自定义元素定义完成。
官方在线示例包含特定于构建版本的分块 URL。将随机的分块名称复制到应用中，会使应用依赖某个部署产物；使用软件包入口则可让打包工具解析这些依赖。本指南核实了公开的方法声明，并明确将浏览器示例与原生构建说明区分开来。
- 在 Vite 原生脚手架中安装固定版本的包，并按照应用的资源策略引入文档所述字体。
- 使用提供的入口和 CSS，等待自定义元素就绪，然后绑定主要操作和重置操作。
- 测试空摘要、格式错误的电子邮件、有效的本地草稿以及后续编辑；确保显示的快照不会过时。
阅读配套规范
Infor 设计系统组件示例
完整的独立交互示例
将完整文档保存为 index.html 并在浏览器中打开。独立解读 HTML/CSS，使用经过验证的 IDS core/light 设计令牌值和系统字体回退方案。并非原生 IDS 运行时。
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Maintenance request — IDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;color:#161618;background:#f5f5f5;font:16px/1.45 Arial,sans-serif}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;border-bottom:1px solid #bbbbbf;padding-bottom:16px;gap:16px}header b{font-size:14px}header span{font-size:13px;color:#3b3b3f}h1{font-size:32px;line-height:1.2;font-weight:500;margin:24px 0 8px}h2{font-size:20px;font-weight:500;margin:0 0 16px}.intro{color:#3b3b3f;margin:0 0 24px}.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.form,.context{background:white;border:1px solid #e0e0e1;border-radius:8px;padding:24px}label,.label{display:block;font-size:14px;margin-bottom:8px}input{width:100%;font:inherit;border:1px solid #6f6f76;border-radius:4px;padding:10px 12px;color:#161618}input[readonly]{background:#f5f5f5}input:focus,button:focus-visible{outline:3px solid #8abff7;outline-offset:2px}.field{margin-bottom:16px}.hint{font-size:12px;color:#3b3b3f;margin:4px 0 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}button{font:inherit;border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid #6f6f76;background:white;color:#161618}.primary{background:#0072ed;color:white;border-color:#0072ed}.primary:hover{background:#0066d4}fieldset{padding:0;border:0;margin:24px 0 0}legend{font-size:14px;margin-bottom:8px}.radios{display:flex;gap:16px;flex-wrap:wrap}.radios label{display:flex;gap:8px;align-items:center;margin:0}.radios input{width:auto;accent-color:#0072ed}.equipment{height:190px;background:#e6f1fd;display:grid;place-content:center;margin-bottom:24px;border-radius:4px}.machine{border:3px solid #0054b1;width:165px;height:100px;position:relative;background:white}.machine:before{content:'';position:absolute;left:14px;top:16px;width:55px;height:55px;border:8px double #0054b1;border-radius:50%}.machine:after{content:'02006';position:absolute;right:10px;top:27px;color:#0054b1;font:16px monospace}.context dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;font-size:14px}.context dt{color:#3b3b3f}.context dd{margin:0;text-align:right}.notice{font-size:13px;background:#f5f5f5;padding:16px;margin-top:24px}.error{color:#a30d11;font-size:14px;min-height:20px}.result{background:#e6f1fd;padding:16px;border-left:3px solid #0072ed;margin-top:20px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.result[hidden]{display:none}.foot{font-size:12px;color:#3b3b3f;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.form,.context{padding:20px}header{flex-direction:column;gap:4px}h1{font-size:28px}.equipment{height:140px}}</style><main><header><b>ASSET SERVICE / LOCAL NOTEBOOK</b><span>Independent Infor IDS interpretation</span></header><h1>Prepare the work. Keep the context.</h1><p class="intro">Build a local maintenance draft for a fixed equipment record.</p><div class="grid"><form id="form" class="form" novalidate><div class="field"><label for="asset">Asset identifier</label><input id="asset" value="02006" readonly><p class="hint">Read-only record identity; leading zero preserved.</p></div><div class="field"><label for="summary">Work summary</label><input id="summary" required placeholder="For example, inspect the drive belt" aria-describedby="error"></div><div class="field"><label for="contact">Contact email</label><input id="contact" type="email" required placeholder="[email protected]" aria-describedby="error"></div><fieldset><legend>Planning urgency</legend><div class="radios"><label><input type="radio" name="urgency" value="Routine" checked>Routine</label><label><input type="radio" name="urgency" value="Soon">Soon</label></div></fieldset><div class="actions"><button class="primary" type="submit">Prepare local draft</button><button id="clear" type="button">Clear draft</button></div><p id="error" class="error" role="alert"></p><div id="result" class="result" role="status" hidden></div></form><aside class="context"><div class="equipment" role="img" aria-label="Original schematic of fictional equipment 02006"><div class="machine"></div></div><h2>Equipment context</h2><dl><dt>Record</dt><dd>02006</dd><dt>Area</dt><dd>Sample workshop</dd><dt>Type</dt><dd>Drive assembly</dd><dt>Connection</dt><dd>Offline sample</dd></dl><p class="notice">Preparing a draft changes only this page. It does not create a work order or send a message.</p></aside></div><p class="foot">Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.</p></main><script>const form=document.querySelector('#form'),summary=document.querySelector('#summary'),contact=document.querySelector('#contact'),error=document.querySelector('#error'),result=document.querySelector('#result');function clearResult(){result.hidden=true;result.textContent='';error.textContent='';summary.removeAttribute('aria-invalid');contact.removeAttribute('aria-invalid')}form.addEventListener('input',clearResult);form.onsubmit=e=>{e.preventDefault();clearResult();if(!summary.value.trim()){error.textContent='Enter a work summary.';summary.setAttribute('aria-invalid','true');summary.focus();return}if(!contact.value.trim()||!contact.validity.valid){error.textContent='Enter a valid contact email.';contact.setAttribute('aria-invalid','true');contact.focus();return}result.hidden=false;result.textContent='LOCAL DRAFT / NOT SENT\n\nAsset: 02006\nSummary: '+summary.value.trim()+'\nContact: '+contact.value.trim()+'\nUrgency: '+form.elements.urgency.value};document.querySelector('#clear').onclick=()=>{form.reset();clearResult();summary.focus()};</script></html>
代码参考
- 资源 02006 保持为字符串。原生 IDS 示例（而非此 HTML 表单）会演示自定义元素注册和 checkValidation()；两者都不会创建维护工单。
只读标识符、必填摘要和联系人验证
显式调用 IDS 输入验证；应用检查可防止创建空的本地草稿。用户输入通过 textContent 呈现。
javascript
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
代码参考
- checkValidation() 返回 void，不会将其视为布尔结果。
- 资源 02006 是文本，因此开头的零会保留。
- 准备预览只会更改本地页面状态。
明确设置操作外观
主要和次要组件变体让工作流的主要操作一目了然。
html
<ids-button appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button appearance="secondary"><span>Clear draft</span></ids-button>
代码参考
- 组件不可用时应使用 disabled 状态，而不应只靠淡化样式表示。
实现起点
适用于包含 #app 的 Vite 原生脚手架的完整入口和样式表。包版本和方法已根据已发布的包核实；此处未运行编译。请通过获准的字体来源提供 Source Sans Pro。嵌入式预览是独立的原生 HTML 实现。
JavaScript / CSS
// Vite vanilla project: npm install [email protected]
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`<ids-container><main>
<h1>Maintenance request</h1><p>Local draft only; no work order is sent.</p>
<ids-input id="asset" label="Asset identifier" value="02006" readonly="true"></ids-input>
<ids-input id="summary" label="Work summary" validate="required" clearable="true"></ids-input>
<ids-input id="contact" label="Contact email" validate="email required"></ids-input>
<ids-button id="prepare" appearance="primary"><span>Prepare local draft</span></ids-button>
<ids-button id="reset" appearance="secondary"><span>Clear draft</span></ids-button>
<p id="message" role="status"></p><pre id="draft"></pre>
</main></ids-container>`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
summary.checkValidation();contact.checkValidation();
const title=summary.value.trim(),email=contact.value.trim();
if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});
/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
适用于你项目的提示词
Agent 提示词
使用经过验证的浅色主题别名和文档所述的输入框/按钮结构，创建 Infor IDS 维护草稿。将资源标识符保留为字符串并设为只读。验证可编辑字段，在编辑后清除过期输出，并区分本地草稿与已提交的工单。不要将 checkValidation() 视为会返回布尔值。
独立的 OpenDesign 指南。资源和工作流均为虚构内容；不会提交任何信息。原生代码引用了经核实的 1.17.1 包，设计令牌值则标注为单独获取的实时 core/light 主题快照。
