01 Dell 设计系统 界面预览 提交本地查询、查看一条结果，并通过“清除”恢复库存列表。
依据 DDS v3 间距、字体和文档所述的浅色输入框颜色进行的独立 HTML/CSS 实现；使用系统备用字体。·
实现参考 DDS v3 基础规范及经过验证的 Vanilla 3.2.0 Storybook。颜色值取自 Text Input 令牌表中的浅色模式预览，并非通用主题。预览使用独立的 HTML/CSS 规则；代码示例则加载真实的、带版本号的 DDS CDN。
名称 / 规则 值 / 配置 用途 --dds-spacing-xs4px / 0.25rem图标与标签的邻近关系。 --dds-spacing-sm8px / 0.5rem相邻的搜索操作。 --dds-spacing-md12px / 0.75rem紧凑的对象行。 --dds-spacing-lg16px / 1rem结果内容内边距。 --dds-spacing-xl24px / 1.5rem搜索区域与结果之间的间距。 --dds-spacing-2xl32px / 2rem主页面内边距。 --dds-spacing-3xl40px / 2.5rem区块间距。 --dds-spacing-4xl48px / 3rem主要区块分界。 --dds-spacing-5xl64px / 4rem较大的布局间距。 --dds-spacing-6xl80px / 5rem宽松的版面布局。 --dds-spacing-7xl96px / 6rem列表中最大的间距步进值。
名称 / 规则 值 / 配置 用途 --dds-color-text-primary#1D2C3B 主要结果标签。 --dds-color-background-surface-secondary#EBF1F6 次要内容表面。 --dds-color-border-brand-base#00468B 品牌色输入框边框。 --dds-color-background-surface-inactive#E1E1E1 未激活字段表面。 --dds-color-border-inactive-base#7E7E7E 未激活边界。 --dds-color-text-inactive#B6B6B6 未激活标签；不可用于正文。
名称 / 规则 值 / 配置 用途 Display 1 ≥1024px72px / 88px; weight 300大号编辑式标题，不适用于密集的结果列表。 Heading 1 ≥1024px48px / 56px; weight 300宽版页面标题。 Heading 1 <1024px40px / 48px; weight 300紧凑页面标题。 Heading 4 ≥1024px24px / 32px; weight 400区块标题。 Heading 4 <1024px20px / 28px; weight 400紧凑区块标题。 Body 216px / 24px; weight 400默认段落角色。 Body 314px / 20px; weight 400密集元数据。 Caption12px / 20px; weight 400字段辅助内容。 Button 116px / 24px; weight 500默认操作标签。
名称 / 规则 值 / 配置 用途 InputGroup(element)Initializer exported by @dds/components分组容器创建后，再初始化它。 dds__input-groupInput and addon wrapper让输入框前后的插槽紧邻输入框。 dds__text-inputNative input class查询和结果由应用负责管理。 dds__input-addonAccessory wrapper装饰性前置图标或清除操作。 dds__button--ghostLow-emphasis button modifier搜索/清除示例使用此变体。 dds__button--icon-onlyIcon-only button modifier仍需为按钮提供 aria-label。
名称 / 规则 值 / 配置 用途 dds-styles.cssAll-in-one starter包含组件样式、令牌、字体和辅助包。 dds-tokens.cssGlobal and semantic tokens不包含组件令牌。 dds-components.cssAll component styles and component tokens采用分离式打包方案时，需与令牌和字体一同加载。 dds-fonts.cssCDN font definitions为 DDS 字体渲染而加载。 dds-grid.cssGrid classes单独的布局包。 dds-icons.cssIcon classes仅靠此项不会加载图标字体；请参阅图标配置。
03 Dell 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。
DESIGN-dell.md 完整指导、实现起点和源代码链接。
下载指南 Dell 设计系统 DDS v3 及其实现边界 这是组合方案，不是搜索服务 DDS 将可复用的视觉基础与产品行为分开。对于这个库存界面，实用的集成点是 InputGroup：带有辅助插槽的原生输入框。没有可调用的 Search 构造器，设计系统也不会获取设备数据。应用将输入草稿、已应用的查询和选中的设备分别保存为独立值。这样一来，键入和提交之间的区别一目了然。
阅读配套规范
选择一个版本 以下公开的开发者示例面向 Vanilla 3.2.0。其 CSS 和 JavaScript 使用相同版本。现有的 v2 集成采用不同的打包方式；采用这些导入项之前，应先遵循迁移文档。当前软件包仅供 Dell 内部使用；文档中提供的 CDN 则为评估此组合方案提供了具体途径，无需虚构一个公开的 npm 注册表。
阅读配套规范
Dell 设计系统 语义化界面表面与边界 使用已发布的角色名称 参考表记录了官方组件文档中的浅色模式输入值。产品代码应在加载 DDS 样式后使用语义 CSS 变量。主文本与次级表面构成清晰易读的结果区域；品牌边框用于标识输入框边界。非激活前景色有意弱化，不应作为默认的元数据颜色。
阅读配套规范
不要重新定义 DDS 令牌 全局颜色基元为语义角色提供基础，语义角色再支持组件级设计决策。应用开发者应引用语义角色，而不是覆盖全局色阶。深色外观需要实际支持的令牌模式；仅更改页面背景会导致字段、标签和焦点颜色不一致。本地示例保持浅色模式。
阅读配套规范
Dell 设计系统 不改变文档结构的响应式排版 一个语义标题，两种视觉字号 页面标题在所有视口中都保持为 h1。宽屏布局采用文档规定的 Heading 1 字号 48/56；视口宽度低于 1024px 时采用 40/48。此示例使用系统回退字体，因为它是独立的本地实现；原生样式表会提供 DDS 字体资源。描述使用 Body 2，紧凑的设备元数据则使用 Body 3。
阅读配套规范
为真实名称留出空间 设备型号、办公地点或支持状态都可能换行。请确保标识符清晰可读，不要截断资产标签的唯一副本。紧凑布局会调整视觉层级和列排列，同时保持标签与对应值之间的关联。
阅读配套规范
Dell 设计系统 分栏视图的四像素节奏 按关联关系分配间距等级 相关操作之间使用 sm，结果行内使用 lg，查询区域与结果区域之间使用 xl。较宽屏幕上的外层容器可使用 2xl。这些是应用对已发布间距级别的具体运用，并非官方规定每个搜索页面都必须采用这些确切的内边距。
阅读配套规范
密度与重排 实现说明 DDS 描述了紧凑、默认和舒适三种网格。此示例的搜索控件采用舒适布局，同时允许每条结果中的元数据保持紧凑。在窄屏上，已选设备面板会排在结果列表之后，以保持阅读顺序。详情面板不会固定定位，因此不会遮挡最后一条结果。
在所有屏幕宽度下，都将搜索标签和辅助说明置于字段上方。 当行内空间不足时，让提交操作移至字段下方。 将已选设备详情移至结果下方，避免出现水平滚动。 阅读配套规范
Dell 设计系统 搜索结构与行为 有意采用手动提交 前置搜索图标仅作装饰；可见标签用于说明库存范围。仅当输入内容不为空时，才显示末尾的清除控件。此处采用手动模式，通过表单提交，因此按 Enter 与点击可见的“搜索设备”按钮效果相同。仅更改输入内容不会影响已应用的结果集。
阅读配套规范
自动搜索是另一种交互约定 DDS 也描述了一种自动模式，会在输入第四个字符后开始搜索。对于文档说明采用该模式的界面，不要添加输入一个字符就立即筛选的行为。如果切换到自动搜索，请移除手动提交按钮，并有意实现触发阈值、取消操作和结果播报。此示例选择手动模式。
阅读配套规范
Dell 设计系统 草稿、已应用的查询与选择 此示例中的状态转换 清除操作会重置输入内容和已应用的筛选条件，恢复完整的示例库存，并将焦点移回字段。选择是独立的按钮操作：它会显示资产详情，但不修改查询。无结果状态会显示已应用的搜索词，并提供明确的重置方式。它不会声称搜索了远程库存。
输入资产名称或标签；提交前当前结果保持不变。 提交表单，并根据筛选后的本地数组更新结果数量。 查看某条结果或清除查询；焦点保留在触发操作的控件上。 阅读配套规范
Dell 设计系统 标签、地标与播报 明确标示实际搜索范围 此表单是名为“设备库存”的搜索地标。输入时，持久可见的标签和辅助说明会一直显示。清除图标应为带有 aria-label 的按钮，而不是绑定点击处理程序的 span。装饰性符号应对辅助技术隐藏。结果数量通过礼貌提示状态消息播报；它会在提交后更新，而不是在每次按键时都播报。
阅读配套规范
选择不等于导航 每条结果都使用真实按钮，具有按下状态和完整的无障碍名称。详情标题会标明当前查看的项目。由于此示例没有管理后端，因此不会使用链接假装可以打开设备管理页面。当前选中项同时通过边框和文本标签显示。
阅读配套规范
Dell 设计系统 加载真实资源并初始化组合控件 从文档所述的资源包开始 对于已获授权的内部应用，请从 Dell Artifactory 安装 @dds/components，并通过项目样式表管线导入其 dds-styles.css。对于独立概念验证，请使用下方列出的固定版本公共 CDN 链接。确保标记加载后再初始化 InputGroup。提交、清除和筛选的事件处理程序仍由应用代码负责。
阅读配套规范
组合控件正常工作后再进行优化 实现说明 完整样式表是最直接的起点。选择性集成需要全局/语义令牌和字体，以及每个实际使用的组件样式表。仅加载令牌会缺少组件令牌；仅加载图标类不会载入字体。移除这些支持资源包可能导致控件看似存在，实际视觉呈现却不完整。
阅读配套规范
Dell 设计系统 验证搜索交互约定 一项实用的本地测试 输入 Latitude 但不提交，并确认旧的结果数量仍然保留。提交后查看匹配的设备。搜索一个不存在的标签，确认出现无结果状态，然后清除并确认所有示例设备都已恢复。再使用键盘输入，并在窄屏上重复测试。这些检查仅用于验证此示例，不能证明下游 Dell 产品或网络集成符合要求。
阅读配套规范
Dell 设计系统组件示例 完整的独立交互示例 将完整文档保存为 index.html，并在浏览器中打开。这是对 DDS v3 间距、字体和已记录浅色模式输入控件颜色的独立 HTML/CSS 解读；字体使用系统回退字体。
html 复制代码
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
代码参考
本文档自带搜索行为。请使用 DDS 原生示例，检查 InputGroup 如何根据固定版本的样式表和脚本进行初始化。 完整的原生实现入口 此处汇总了从设置到完整实现的内容，并附有重点说明 API。请按照设置中的文档说明，满足软件包和构建前置条件。
html 复制代码
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html> 代码参考
保存为 index.html，并在本地启动服务，同时确保网络可访问文档中所述的 DDS 3.2.0 CDN。这会执行真实的 InputGroup 初始化和本地筛选；不连接 Dell 后端。内部 npm 替代方案：npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ 。嵌入式预览是离线的 HTML/CSS 解读，并非该 CDN 的运行效果。 使用 InputGroup 和应用自有搜索功能 此设置组合使用原生输入框和附加组件、初始化 InputGroup，并为真实的表单提交绑定行为。前置符号是本地装饰字符，不代表依赖图标字体。
javascript 复制代码
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example. 代码参考
经过核实的 v3 文档中没有独立的搜索 API。 仅图标按钮应使用 aria-label；筛选功能由应用提供。 实现起点 保存为 index.html，并在本地启动服务，同时确保网络可访问文档中所述的 DDS 3.2.0 CDN。这会执行真实的 InputGroup 初始化和本地筛选；不连接 Dell 后端。内部 npm 替代方案：npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ 。嵌入式预览是离线的 HTML/CSS 解读，并非该 CDN 的运行效果。
html 复制示例
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html> 适用于你项目的提示词 Agent 提示词 复制提示词
使用完整的 DDS 3.2.0 InputGroup 组合，构建范围明确的设备库存搜索。保留手动提交、可见的范围标签、本地结果播报和清除功能。使用 DDS 语义令牌和响应式字体；不要虚构搜索 API，也不要替换为旧版 v2 导入项。 独立的 DDS v3 参考资料。内部包需要访问 Dell 注册表；文档中提供了用于原型开发的公开版本化 CDN。此示例不代表 Dell 身份验证、资产管理连接或官方认证。
