# CoreUI 设计系统

## CoreUI 设计系统界面预览

选择备注、批量归档、查看“归档”标签页，并撤销最近一次操作。

## CoreUI 设计系统设计参考

CoreUI Bootstrap 5.9.0 的浅色主题默认值，取自已安装的编译样式表。这些 --cui-* 名称是实际的运行时变量。示例应用使用免费组件，不假设使用 CoreUI PRO 小部件。

### 浅色主题角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --cui-primary | #5856d6 | CoreUI 主紫色。 |
| --cui-primary-contrast | #fff | 与主色配套的文字颜色。 |
| --cui-secondary | #6b7785 | 次要角色。 |
| --cui-success | #1b9e3e | 成功角色。 |
| --cui-info | #39f | 信息角色。 |
| --cui-warning | #f9b115 | 警告角色。 |
| --cui-danger | #e55353 | 危险角色。 |
| --cui-primary-bg-subtle | #cfc7f3 | 柔和主色情境卡片背景。 |
| --cui-primary-text-emphasis | #3634a3 | 柔和主色表面上的文字。 |
| --cui-primary-border-subtle | #9d92e6 | 情境卡片边框。 |
| --cui-danger-bg-subtle | #f9d4d4 | 高优先级徽标表面。 |
| --cui-danger-text-emphasis | #671414 | 高优先级徽标文字。 |
| --cui-warning-bg-subtle | #feecc5 | 中优先级徽标表面。 |
| --cui-warning-text-emphasis | #764705 | 中优先级徽标文字。 |
### 字体排印与表面默认值

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 系统 UI 字体栈。 |
| --cui-body-font-size | 1rem | 默认正文字号为 1rem；密集表格使用自行设置的 14px 覆盖值。 |
| --cui-body-line-height | 1.5 | 默认正文行高。 |
| --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | 浅色主题的主要正文颜色。 |
| --cui-body-bg | #fff | 主要表面。 |
| --cui-tertiary-bg | #f3f4f7 | 本示例中的页面背景。 |
| --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | 辅助文字角色。 |
| --cui-border-color | #dbdfe6 | 默认分隔线颜色。 |
### 圆角与焦点变量

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --cui-border-radius | 0.375rem | 默认值，相当于 16px 根字号下的 6px。 |
| --cui-border-radius-sm | 0.25rem | 小号，相当于 4px。 |
| --cui-border-radius-lg | 0.5rem | 大号，相当于 8px。 |
| --cui-border-radius-xl | 1rem | 超大号，相当于 16px。 |
| --cui-border-radius-pill | 50rem | 胶囊形状。 |
| --cui-focus-ring-width | 0.25rem | 焦点环宽度。 |
| --cui-focus-ring-opacity | 0.25 | 焦点环不透明度。 |
| --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | 基于主色的焦点环颜色。 |
### 自定义队列密度选项

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Page padding | 32px; 24px 14px mobile | 自定义应用内边距。 |
| Table minimum width | 740px | 在本地响应式滚动区域中保持列内容清晰易读。 |
| Table cell padding | 16px | 围绕原生表格结构自定义密度选项。 |
| Table text | 14px; headings 12px | 自定义紧凑层级。 |
| g-3 summary row | 1rem native gutter | 响应式指标卡片使用标准网格间距。 |
| Toast behavior | autohide: false | 撤销操作会一直保留，直至被关闭或被后续批次替换。 |
## CoreUI 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## CoreUI 设计系统：选择你实际使用的 CoreUI 运行时

### 选择你实际使用的 CoreUI 运行时

> 本示例使用 CoreUI，适用于 Bootstrap 5.9.0，即 CSS 和浏览器版 JavaScript 软件包。CoreUI 也提供针对不同框架的软件包，但其组件导入方式不能与本示例的数据属性互换。此设置提供一套匹配的样式表和捆绑脚本，不假设使用 React 或 Vue 提供器。

审核工作台使用免费的卡片、表格、表单、标签页和 Toast，不会悄然换用 PRO 数据网格或高级付费选择器。明确这一范围后，完整示例便可直接使用指定软件包复现，无须购买未注明的模板。

阅读配套规范

## CoreUI 设计系统：使用实际的紫色主色及其配套状态角色

### 使用实际的紫色主色及其配套状态角色

CoreUI 的浅色主题主色为 #5856d6，与白色形成主色对比。审核原则卡片将 primary-bg-subtle、primary-border-subtle 和 primary-text-emphasis 配套使用。这些名称代表协调一致的表面样式，因此不会在着色背景上随意搭配前景文字颜色。

高优先级和中优先级徽标也分别将 danger 或 warning 柔和表面与强调文字配套使用。文字标签能独立于颜色表达分类。这些是设计评审示例中的优先级，并不意味着产品中的所有红色徽标都代表相同的领域状态。

阅读配套规范

## CoreUI 设计系统：将默认正文字体与密集型工作表格区分开

### 将默认正文字体与密集型工作表格区分开

编译后的 CoreUI 正文默认字号为 1rem，行高为 1.5。为了让密集的审核队列更易浏览，本示例有意将表格文字设为 14px、列标签设为 12px。页面标题和摘要值则分别使用更大的自定义字号。本指南不会把这些应用层覆盖值误称为整个库的默认值。

这三张上下文卡片使用原生响应式网格和 g-3 间距。在小屏幕上，收件箱和已归档仍并排显示，第三张说明卡片则占满一行。所有数字均根据五条可见示例记录计算；没有无关的仪表盘指标，也没有虚构的增长图表。

阅读配套规范

## CoreUI 设计系统：数据属性控制实际标签页面板

### CoreUI 数据属性控制实际的标签页面板

收件箱和归档是基于按钮的标签页，使用 data-coreui-toggle="tab"，并指向对应的标签页面板。标记中包含 tablist、tab、tabpanel、aria-controls 和 aria-labelledby 关系。CoreUI JavaScript 组件会更新活动状态和可见性，而不是仅由应用处理程序改变下划线。

nav-underline-border 类为此组件提供视觉样式。切换标签页不会归档记录或清除选择。标签页控制本地队列中显示的内容，而应用中已选和已归档的 Set 则保持为独立状态。

阅读配套规范

## CoreUI 设计系统：全选操作具有明确含义的混合状态

### 全选操作具有明确的混合状态

每条备注都使用稳定的 R 系列 ID。勾选一行会将该 ID 添加到已选 Set 中。只有选中当前收件箱中的所有记录时，表头复选框才会呈选中状态；选中部分记录时则呈不确定状态；收件箱为空时，复选框会被禁用。每次重新渲染队列时，都会重新计算这些状态。

未选中任何记录时，批量操作按钮会被禁用，旁边的文字会显示当前选中数量。归档操作完成后会清除选择，避免已归档的记录意外留在下一批操作中。原始备注和负责人信息会保留在记录中，不会被通用的“已解决”标签替代。

1. 选择两条备注，查看表头复选框的不确定状态。

2. 归档所选记录，确认收件箱计数减少两条。

3. 打开“归档”，查看原始请求和负责人。

阅读配套规范

## CoreUI 设计系统：Toast 展示一项明确且可撤销的操作

### Toast 呈现一项明确且可撤销的操作

应用会记录最近一次归档批次的确切 ID，然后调用原生 Toast 实例的 show 方法。由于通知中包含“撤销”操作，autohide 设为 false；示例不会在任意的短暂计时后取消撤销机会。用户仍可主动关闭 Toast。

撤销操作只会将已保存的 ID 从已归档 Set 中移除、清除最近批次的快照，并禁用对应操作。如果撤销较新的批次，之前归档的批次仍会保持归档状态。这是有意设计的单层撤销操作，并未误称为完整的撤销历史。

阅读配套规范

## CoreUI 设计系统：归档后仍保留请求内容，方便阅读

### 归档后仍保持请求内容清晰可读

收件箱表格会显示备注标题、具体请求的更改、所属区域、优先级和负责人。归档视图会呈现紧凑列表，保留标题、ID、负责人和完整请求。记录处理完成后，界面会减少表格装饰，但不会删除理解已更改内容所需的信息。

在移动设备上，表格会在 table-responsive 容器内保持 740px 的最小宽度。命名区域可通过键盘聚焦，并具有可见的焦点样式；水平滚动会限制在表格内，不会导致整个文档变宽。为了避免出现滚动条而删除重要列，会削弱这一审核任务。

阅读配套规范

## CoreUI 设计系统：持久显示操作结果，不虚构后端功能

### 使用持久化结果，但不要虚构后端

Toast 使用 polite 状态角色和原子播报。另一个内联状态会说明本地归档或撤销的结果。两者都不会声称已关闭外部问题，因为此页面明确没有连接问题跟踪系统。预览只会修改内存中的 Set，因此重新加载后会恢复原来的五条备注。

记录标题和描述（包括归档列表中的内容）均使用 textContent 插入。固定的类映射用于表示已知的两种优先级。这能将类似用户输入的文本与HTML结构分开，也便于检查示例中的数据流。

- 说明实际批次大小和本地操作范围。

- 只要快照仍然有效，就保留撤销按钮。

- 不要把本地 DOM 更新称为远程处理成功。

阅读配套规范

## CoreUI 设计系统：在本地模块前加载 CoreUI Bundle

### 在本地模块之前加载 CoreUI 软件包

完整配置会将软件包的 dist 资源复制到本地 public 路径，并在 app.js 之前加载 coreui.bundle.min.js。该 bundle 会公开 coreui.Toast，并为 data-coreui 属性提供标签页行为。在此组合中无需再添加第二个 Bootstrap 运行时，否则可能造成职责重复、令人困惑。

通过 data-coreui-theme="light" 明确指定浅色主题。更大型的应用可以采用 CoreUI 的 color-mode 机制，但应一并检查语义文本与界面表面的配色组合。本地验证涵盖了部分选择、两条记录的批量操作、归档标签页阅读、撤销恢复，以及 390px 视口。

阅读配套规范

## CoreUI 设计系统组件示例

### 队列、归档标签页和撤销 Toast

CoreUI 数据属性、表格控件、语义化优先级徽标和持久显示的 Toast。

```
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>
```

代码参考

- 使用 data-coreui-* 属性配合此 bundle，不要照搬其他库中的 data-bs-*。

- 表格位于具有明确名称的本地水平滚动区域中。

- 优先级颜色搭配明确的“高”和“中”标签。

### 批量选择和最近批次撤销

稳定的记录 ID 用于管理已选和已归档集合，原生 Toast 则负责显示通知。

```
const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false});
function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='<td><input class="form-check-input" type="checkbox"></td><td><strong></strong><p class="small text-body-secondary mb-0 mt-1"></p></td><td></td><td><span class="badge"></span></td><td></td>';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();}
function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size<total;}
q('#select-all').onchange=e=>{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render();
```

代码参考

- 全选控件提供选中、未选中和不确定状态。

- 撤销操作会准确恢复最近批次中的 ID。

- 所有记录文本均使用 textContent 插入。

### 原始队列密度

围绕原生 CoreUI 卡片和表格样式构建页面布局。

```
html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}}
```

代码参考

- 740px 的表格宽度是为了便于阅读而采用的应用设置，并非 CoreUI 默认值。

## CoreUI 设计系统 Agent 配置

### 实现起点

已针对 Bootstrap 5.9.0 验证 CoreUI。提供的 app.js 需要完整的队列标记，且不执行任何网络操作。HTML 封装代码包含完整的 body 标记；请将提供的交互示例和 CSS 示例保存为此处引用的文件名。

```
<!-- npm install @coreui/coreui@5.9.0 -->
<!-- Copy node_modules/@coreui/coreui/dist to public/vendor/coreui. -->
<html lang="en" data-coreui-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/coreui/css/coreui.min.css">
<link rel="stylesheet" href="style.css">
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>

<script src="/vendor/coreui/js/coreui.bundle.min.js"></script>
<script src="app.js"></script>
</html>
```

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

```
从 CoreUI 5.9.0 设计评审操作台开始。保留原生标签页和撤销提示，并使用 data-coreui 属性；保留五条评审记录和选中 ID 集合，并根据集合派生混合批量选择状态。归档所选批次，在已归档标签页中显示，并允许通过“撤销”恢复最近一次批次。将表格的水平滚动限制在表格内部，并区分选中状态与归档状态。使用匹配的 CoreUI 套件；不要替换为 Bootstrap 属性名，也不要声称归档操作发生在服务器端。
```

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

适用于 Bootstrap 5.9.0 免费组件的 CoreUI。区分主题默认值与原始密度设置。归档和撤销操作只影响本地示例记录。

- 简介 匹配的 CSS 与捆绑的 JavaScript。

- CSS 变量 运行时主题自定义。

- 颜色 语义主题角色。

- 排版 原生排版基础。

- 标签页 数据属性与面板语义。

- 提示 持久通知与组件方法。

- 复选框 原生复选框状态。

- 表格 响应式表格布局。

## CoreUI 设计系统相关资源

### daisyUI

一个原生支持 CSS 的邀请函制作工作室，展示 daisyUI 的 5 种语义主题、成对的内容颜色、单选按钮组合、范围控件、浏览器验证以及实际的对话框审核步骤。

### Element Plus

使用 Element Plus 的真实 Transfer 模型、筛选器和禁用选项，构建模块选择工作台，并以经过验证的颜色、字号和控件尺寸为依据。

### Flowbite

原生 Flowbite 4 手风琴与抽屉组合，语义主题别名已验证；包含持久化打包清单和便于无障碍访问的本地材料备注流程。


- [实现参考](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [来源](https://coreui.io/bootstrap/docs/customize/color/)
- [来源](https://coreui.io/bootstrap/docs/content/typography/)
- [来源](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [来源](https://coreui.io/bootstrap/docs/layout/gutters/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/customize/color/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/content/typography/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/components/toasts/)
- [阅读配套规范](https://coreui.io/bootstrap/docs/content/tables/)
- [代码参考](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [代码参考](https://coreui.io/bootstrap/docs/components/toasts/)
- [代码参考](https://coreui.io/bootstrap/docs/content/tables/)
- [简介 匹配的 CSS 与捆绑的 JavaScript。](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [CSS 变量 运行时主题自定义。](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [颜色 语义主题角色。](https://coreui.io/bootstrap/docs/customize/color/)
- [排版 原生排版基础。](https://coreui.io/bootstrap/docs/content/typography/)
- [标签页 数据属性与面板语义。](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [提示 持久通知与组件方法。](https://coreui.io/bootstrap/docs/components/toasts/)
- [复选框 原生复选框状态。](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [表格 响应式表格布局。](https://coreui.io/bootstrap/docs/content/tables/)