# Infor 设计系统 ## Infor 设计系统 界面预览 验证摘要和联系方式，准备本地请求，并在不发送任何内容的情况下清除请求。 ## Infor 设计系统 设计参考 本次修订中读取的 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 | 原生组件不可用状态。 | ## Infor 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## 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 设计系统 含义各异的输入状态 ### 只读、禁用和已修改不可互换 官方示例展示了 readonly、disabled、dirty-tracker、clearable、uppercase、lowercase 和逻辑文本对齐。本请求示例只需用 readonly 固定资产标识，并用 clearable 清除工作摘要。它不会在电子邮件地址上启用自动大小写，也不会擅自转换自由文本描述。 原生输入示例为联系人字段声明了 validate="email required"。已发布的类型声明提供 value、focus() 和 checkValidation()。由于 checkValidation 返回 void，代码不会将其误当作布尔型表单有效性结果；而是单独检查允许准备本地记录的条件。 - 只读状态可让固定资产信息保持可见且易于读取。 - 禁用表示该字段当前无法使用。 - 脏值跟踪描述字段值与初始值的差异；它不是成功或验证状态。 阅读配套规范 ## 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。将随机的分块名称复制到应用中，会使应用依赖某个部署产物；使用软件包入口则可让打包工具解析这些依赖。本指南核实了公开的方法声明，并明确将浏览器示例与原生构建说明区分开来。 1. 在 Vite 原生脚手架中安装固定版本的包，并按照应用的资源策略引入文档所述字体。 2. 使用提供的入口和 CSS，等待自定义元素就绪，然后绑定主要操作和重置操作。 3. 测试空摘要、格式错误的电子邮件、有效的本地草稿以及后续编辑；确保显示的快照不会过时。 阅读配套规范 ## Infor 设计系统组件示例 ### 完整的独立交互示例 将完整文档保存为 index.html 并在浏览器中打开。独立解读 HTML/CSS，使用经过验证的 IDS core/light 设计令牌值和系统字体回退方案。并非原生 IDS 运行时。 ``` Maintenance request — IDS interpretation
ASSET SERVICE / LOCAL NOTEBOOKIndependent Infor IDS interpretation

Prepare the work. Keep the context.

Build a local maintenance draft for a fixed equipment record.

Read-only record identity; leading zero preserved.

Planning urgency

Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.

``` 代码参考 - 资源 02006 保持为字符串。原生 IDS 示例（而非此 HTML 表单）会演示自定义元素注册和 checkValidation()；两者都不会创建维护工单。 ### 只读标识符、必填摘要和联系人验证 显式调用 IDS 输入验证；应用检查可防止创建空的本地草稿。用户输入通过 textContent 呈现。 ``` // Vite vanilla project: npm install ids-enterprise-wc@1.17.1 // src/main.js. Add Source Sans Pro through your approved font-hosting setup. import 'ids-enterprise-wc'; import './style.css'; document.querySelector('#app').innerHTML=`

Maintenance request

Local draft only; no work order is sent.

Prepare local draft Clear draft 



`;
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 是文本，因此开头的零会保留。

- 准备预览只会更改本地页面状态。

### 明确设置操作外观

主要和次要组件变体让工作流的主要操作一目了然。

```
Prepare local draft
Clear draft
```

代码参考

- 组件不可用时应使用 disabled 状态，而不应只靠淡化样式表示。

## Infor 设计系统 Agent 设置

### 实现起点

适用于包含 #app 的 Vite 原生脚手架的完整入口和样式表。包版本和方法已根据已发布的包核实；此处未运行编译。请通过获准的字体来源提供 Source Sans Pro。嵌入式预览是独立的原生 HTML 实现。

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`


Maintenance request
Local draft only; no work order is sent.




Prepare local draft
Clear draft



`;
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)}
```

### 适用于你项目的提示词

```
使用经过验证的浅色主题别名和文档所述的输入框/按钮结构，创建 Infor IDS 维护草稿。将资源标识符保留为字符串并设为只读。验证可编辑字段，在编辑后清除过期输出，并区分本地草稿与已提交的工单。不要将 checkValidation() 视为会返回布尔值。
```

## Infor 设计系统 来源与范围

独立的 OpenDesign 指南。资源和工作流均为虚构内容；不会提交任何信息。原生代码引用了经核实的 1.17.1 包，设计令牌值则标注为单独获取的实时 core/light 主题快照。

- Infor Design SoHo 风格和企业级适用范围。

- 实时设计令牌样式表 实际的 core/light 设计令牌值和别名。

- 输入框示例 公开的组件标记和状态。

- 按钮示例 操作变体。

- 已发布的 1.17.1 包 版本和模块入口。

- 包自述文件 安装和字体要求。

- 输入类型声明 value、focus 和 checkValidation 签名。

## Infor 设计系统 相关资源

### Kajabi Sage

构建一个面向创作者的分享面板，清晰呈现课程信息，提供明确的复制操作，并如实反馈剪贴板状态。探索 Sage 的 Rails 组件结构、已发布的字体排印规范，以及较新的外部加载 Pine 令牌层。

### Kiwi Orbit

面向旅行场景的 Orbit 指南，采用真实的产品颜色和间距，提供原生行李选项、一致的价格明细，以及完整的本地审核流程。

### Maersk 设计系统

通过真实的浅色主题角色、标题与正文的字号层级、嵌套圆角和标识符处理方式，了解 Maersk 的运营界面语言。示例货运查询展示精确匹配参考编号及无障碍事件历史，但不声称能够访问实时物流数据。


- [实现参考](https://latest.wc.design.infor.com/ids-input/example.html)
- [来源](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [来源](https://latest.wc.design.infor.com/ids-input/example.html)
- [来源](https://latest.wc.design.infor.com/ids-button/example.html)
- [阅读配套规范](https://design.infor.com/)
- [阅读配套规范](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [阅读配套规范](https://latest.wc.design.infor.com/ids-input/example.html)
- [阅读配套规范](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [阅读配套规范](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [代码参考](https://latest.wc.design.infor.com/ids-input/example.html)
- [代码参考](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [代码参考](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design SoHo 风格和企业级适用范围。](https://design.infor.com/)
- [实时设计令牌样式表 实际的 core/light 设计令牌值和别名。](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [输入框示例 公开的组件标记和状态。](https://latest.wc.design.infor.com/ids-input/example.html)
- [按钮示例 操作变体。](https://latest.wc.design.infor.com/ids-button/example.html)
- [已发布的 1.17.1 包 版本和模块入口。](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [包自述文件 安装和字体要求。](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [输入类型声明 value、focus 和 checkValidation 签名。](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)