应使用 模拟 jira 状态标签：在 内嵌 并通过语义化 class（如 status-todo）控制样式，设 inline-block、圆角、内边距与小字号；采用 design tokens 配色并确保 wcag 对比度；用 white-space: nowrap + max-width + ellipsis 防折行；推荐 css 变量管理多主题色，辅以平滑的 background-color/color 过渡。
用 <span></span> 模拟 Jira 状态标签的 CSS 样式结构
Jira 的状态标签（如 “To Do”、“In Progress”、“Done”）本质是带圆角、背景色、内边距和小字号的文字容器，不是原生 HTML 标签。直接用 <td> 套样式会破坏语义且难复用。正确做法是：在 <code><td> 内嵌一个 <code><span></span>，再通过 class 控制视觉表现。
关键点在于分离语义与样式——<td> 表达“这是状态字段”，<code><span></span> 承载“这是带样式的状态标签”。这样既利于可访问性（屏幕阅读器仍能读出文字），也方便后续 JS 动态更新状态文本而不影响布局。
- 避免给
<td> 直接加 <code>background-color或border-radius，否则单元格尺寸易受内容撑开，导致整行高度不一致 - 固定
<span></span>的display: inline-block，并设padding: 2px 8px、border-radius: 4px、font-size: 0.85em - 为不同状态预设 class，比如
status-todo、status-inprogress、status-done，对应不同背景/文字色
状态色值要兼顾可读性与 Jira 视觉一致性
Jira 默认配色并非纯色，而是有轻微明度差的柔和色系（例如 “In Progress” 是 #007fff 而非 #007bff）。照搬截图取色容易导致文字对比度不足，尤其在投影或低亮度屏上。
推荐直接采用 Atlassian 官方公开的 Design Tokens：color.background.accent.blue.subtle 对应状态蓝，color.text.accent.blue 对应文字蓝。实际落地时可简化为：
.status-inprogress {
background-color: #e1f0ff;
color: #007fff;
}
.status-done {
background-color: #e6f7ee;
color: #52c418;
}
.status-todo {
background-color: #fff3cd;
color: #856404;
}
- 所有背景色透明度不宜低于 0.05（即不能用
rgba(0,127,255,0.1)），否则打印时几乎不可见 - 文字色必须满足 WCAG AA 级对比度（至少 4.5:1），可用 Chrome DevTools 的无障碍检查面板验证
- 避免用
!important强行覆盖，状态 class 应该具有足够特异性（如td .status-done）
响应式缩放时标签文字不换行但宽度可控
表格列宽受限时，长状态名（如 “Awaiting External Review”）容易撑破单元格或触发折行，破坏标签紧凑感。Jira 的解法是固定宽度 + 文字省略，但需谨慎处理截断逻辑。
- 给
<span></span>加white-space: nowrap和overflow: hidden，再配合text-overflow: ellipsis - 但必须同时设
max-width（如max-width: 120px），否则在窄屏下仍可能溢出 - 不推荐用
vw单位设max-width，因为表格列宽本身已随视口变化，双重响应易失控 - 若业务允许，后端返回状态码（如
TODO）而非全称，前端用data-status属性存原始值，显示时映射为短标签（“To Do” → “TODO”）
用 CSS 变量统一管理多主题下的状态色
如果页面支持深色模式或客户自定义主题，硬编码色值会让维护成本飙升。CSS 自定义属性是更可持续的选择。
在 :root 中定义基础变量：
:root {
--status-todo-bg: #fff3cd;
--status-todo-text: #856404;
--status-inprogress-bg: #e1f0ff;
--status-inprogress-text: #007fff;
--status-done-bg: #e6f7ee;
--status-done-text: #52c418;
}
.dark-theme {
--status-todo-bg: #5f4b00;
--status-todo-text: #ffd966;
--status-inprogress-bg: #003366;
--status-inprogress-text: #66b2ff;
}
然后在状态 class 中引用：
.status-todo {
background-color: var(--status-todo-bg);
color: var(--status-todo-text);
}
- 变量命名保持语义清晰，避免用
--blue-100这类抽象名，直接绑定业务含义 - 深色模式切换时，仅需切换
dark-themeclass，无需 JS 重写所有 style - 注意 IE 不支持 CSS 变量，如需兼容，得用 PostCSS 插件降级或提供 fallback 值
最常被忽略的是状态变更的过渡效果——加 transition: background-color 0.2s, color 0.2s 能让状态切换更自然，但别对 max-width 或 padding 做过渡，会导致标签尺寸跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
