看板面板 UI 系统
目的
看板面板 UI 系统提供了一个标准化、高密度且无障碍的布局框架，用于管理工作流状态列、基于卡片的任务项和流程管道。看板是现代 SaaS 应用程序、项目管理工具、候选人追踪系统 (ATS) 和销售 CRM 管线的核心交互画布。
设计一个有效的看板界面需要平衡高视觉密度、独立列滚动、清晰的空间层次、实时的在制品 (WIP) 限制反馈以及跨视口的流畅响应能力。此外，传统的仅限指针的拖放实现经常会造成严重的无障碍障碍。本技能桥接了设计与技术执行，为列容器、任务卡片结构、触控目标以及符合 WCAG AA 标准的键盘/屏幕阅读器重新排序工作流建立了空间规则。
用例
- 项目与任务管理系统： 构建冲刺看板、待办事项列（例如，待办、进行中、代码审查、已完成）和问题追踪看板。
- 申请人追踪系统 (ATS)： 可视化候选人招聘阶段（例如，已申请、筛选、面试、录用、入职）。
- 销售与 CRM 交易管线： 管理销售线索阶段，并附带每列的汇总交易价值和阶段概率。
- 内容编辑日历： 跟踪文章和媒体制作工作流，从构思到草稿、审查和发布。
- 订单履行工作区： 监控物流或厨房显示界面中的多步骤订单处理。
何时不使用
- 数据网格与表格化财务列表： 对于需要排序、筛选和批量单元格编辑的密集、多列行数据，请使用
data-table-ui-system。 - 层级化文档或文件树： 对于深层嵌套的文件结构和文档大纲，请使用
tree-view-navigation-system。 - 视口锁定的 SaaS 外壳布局： 对于总体的应用程序外壳（导航栏、顶部栏、可折叠面板），请使用
dashboard-layout-system。 - 单列活动信息流： 对于按时间顺序的信息流或简单的垂直任务列表，请使用
timeline-activity-system或card-ui-system。
输入
- 工作流阶段与列分类法： 有序的工作流状态列表（例如，待办、进行中、审查、已完成）及其列元数据（WIP 限制、状态强调色、交易总额）。
- 卡片数据密度矩阵： 每张任务卡片上要显示的属性（例如，任务 ID、标题、优先级标签、截止日期、负责人头像、子任务进度、附件数量）。
- 视口与外壳上下文： 由父应用程序外壳（来自
dashboard-layout-system）提供的布局边界。 - 设计令牌： 调色板、高度表面、间距比例和排版令牌（来自
accessible-color-system、elevation-and-depth-system和fluid-spacing-system）。
输出
- 水平列画布规范： 针对视口锁定的水平滚动容器、固定列宽和间距间隙的空间布局定义。
- 列标题与 WIP 限制结构： 列标题、徽章计数器、WIP 限制警告阈值（正常、接近、超出）以及快速添加操作触发器的视觉设计。
- 任务卡片组件规范： 标准、紧凑和展开式任务卡片的结构化布局蓝图，包括拖动手柄目标、元数据网格以及悬停/聚焦/抓取交互状态。
- 无障碍键盘与拖放模型： ARIA 角色映射（
role="region"、role="list"、role="listitem"）、焦点管理路由、键盘重新排序快捷键和aria-live公告模式。 - 响应式移动端切换策略： 将多列水平布局切换为小屏幕上的分段标签视图或堆叠式手风琴面板的布局适配指南。
工作流
1. 建立水平列画布结构
在视口锁定的外壳 (dashboard-layout-system) 内构建主看板工作区：
- 容器尺寸： 将看板包装器设置为
display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden;，以允许跨列水平滚动，同时保持看板标题固定。 - 列尺寸： 定义固定或弹性收缩的列宽（
min-width: 280px; max-width: 340px; width: 300px;）。避免列收缩到280px以下，以防止文本截断和压缩触控目标。 - 间距与内边距： 设置一致的列间距（例如，
gap: var(--space-m, 16px)）和水平内边距（例如，padding: 16px 24px）。 - 列容器外壳： 将每列样式设置为独立的弹性容器（
display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);）。
2. 设计列标题与 WIP 信号
每个列标题作为列堆栈顶部的粘性控制栏：
- 粘性列标题： 将标题定位在列弹性堆栈的顶部（
flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;）。 - 标题元素：
- 状态强调指示器： 一个 10x10px 的彩色药丸或左边界，对应阶段（例如，蓝色=进行中、紫色=审查、绿色=已完成）。
- 列标题： 截断文本（
font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)）。 - 卡片计数器与 WIP 限制徽章： 显示项目数量以及 WIP 限制（例如，“3/5”）。
- 列操作菜单： 一个 32x32px 的图标按钮 (
...)，用于访问列设置、排序或折叠选项。
- WIP 限制视觉状态：
- 正常（低于限制）： 微妙的浅色背景徽章（
background: var(--surface-neutral-muted); color: var(--text-secondary)）。 - 警告（达到限制）： 琥珀色背景徽章（
background: var(--surface-warning-subtle); color: var(--text-warning-bold)）。 - 超出（超过限制）： 实心红色徽章或高亮标题边框（
background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)），并附带可访问的警告图标和解释工作流瓶颈的工具提示。
- 正常（低于限制）： 微妙的浅色背景徽章（
3. 构建独立列滚动区域
防止在检查单个列中的长列表卡片时整个看板或页面垂直滚动：
- 卡片列表容器： 对列表容器 (
role="list") 应用flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px;。 - 惯性和平滑滚动： 启用
-webkit-overflow-scrolling: touch;和自定义滚动条（细微的 6px 滚动条），以便单个列平滑滚动而不会触发全局页面移动。 - 空状态容器： 如果某列包含 0 张卡片，则显示虚线放置区域轮廓（
border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;），并附带微妙的标签（“此阶段无任务”）和“添加卡片”快速按钮。
4. 构建任务卡片组件层级
使用 visual-hierarchy-system 设计具有清晰视觉扫描顺序的任务卡片：
- 卡片基本结构： 将每张卡片渲染为独立的列表项 (
role="listitem"/article)，并设置background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab;。 - 卡片区域细分：
- 顶行（标签和操作）： 优先级徽章（例如，高对比度药丸中的“高”、“紧急”）和任务参考 ID（例如，“PROJ-1042”）。包含一个 24x24px 的拖动手柄按钮 (
aria-label="Reorder card PROJ-1042")。 - 中间区域（标题和描述）： 主要任务标题（
font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;）。可选的 1 行灰色文本摘要。 - 底部元数据行（进度和负责人）： 左侧显示截止日期指示器（如果过期则突出显示为红色）和子任务核对清单进度（例如，“3/5 ✓”）。右侧显示堆叠的负责人头像 (
user-avatar-system)。
- 顶行（标签和操作）： 优先级徽章（例如，高对比度药丸中的“高”、“紧急”）和任务参考 ID（例如，“PROJ-1042”）。包含一个 24x24px 的拖动手柄按钮 (
- 卡片交互状态：
- 悬停： 轻微提升阴影（
box-shadow: var(--shadow-md); border-color: var(--border-hover)）。 - 聚焦： 高度可见的 2px 偏移焦点环（
outline: 2px solid var(--focus-ring); outline-offset: 2px）。 - 拖拽/抓取状态：
opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;。 - 放置目标提示： 当拖动卡片悬停在列放置区域时，显示一个动画插入占位符间隙（
height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);）。
- 悬停： 轻微提升阴影（
5. 实现无障碍键盘和屏幕阅读器拖放
标准的拖放框架（HTML5 Drag and Drop API）对于仅使用键盘和屏幕阅读器的用户通常不可访问。实现一个明确的替代键盘导航模式：
- 键盘重新排序触发器： 允许用户聚焦拖动手柄或卡片，然后按
Space或Enter进入“移动模式”。 - 选择时的焦点和公告： 当移动模式激活时，设置
aria-grabbed="true"（或在移动触发器上设置aria-pressed="true"），在卡片周围显示一个可视的“已抓取”光环，并通过一个不可见的aria-live="polite"区域进行公告：“卡片 PROJ-1042 已抓取。当前位于列 '进行中'，第 2 个位置，共 5 个。使用方向键或 Alt+方向键移动，按 Space 放下，按 Escape 取消。”。 - 跨列和列内移动：
- 上/下方向键： 在当前列列表中重新排序卡片。
- 左/右方向键： 将卡片移动到相邻的左侧或右侧列，并将其追加到该列的列表中。
- 放下和取消确认：
- Space / Enter： 确认放置。更新 DOM 位置，释放抓取状态，将焦点设置到已放下的卡片，并公告：“卡片 PROJ-1042 已放入列 '审查'，第 1 个位置，共 3 个。”。
- Escape： 取消移动。将卡片返回到原始位置并公告：“移动已取消。卡片已返回至 '进行中'，第 2 个位置。”。
6. 移动端视口适配
在小型移动屏幕 (<768px) 上，多列水平滚动会导致严重的水平滑动疲劳和笨拙的卡片放置。实施响应式转换策略：
- 分段列标签（推荐的移动端模式）： 在低于 768px 的屏幕上，隐藏水平滚动画布。在看板顶部渲染一个粘性分段标签控件 (
segmented-control-system)，显示带有项目计数徽章的列标题（例如，[ 待办 (4) ] [ 进行中 (3) ] [ 已完成 (8) ]）。 - 单列活动视图： 仅以全宽（
width: 100%）显示活动列列表。 - 上下文“移至”模态/操作面板： 当在移动设备上点击一张卡片时，在卡片菜单中提供一个明确的“移至...”按钮。点击它会打开一个底部面板 (
accessible-bottom-sheet-implementation)，列出目标列以供一键重新定位，从而完全消除了移动屏幕上的触摸拖拽手势。
决策规则
移动列布局策略
| 视口宽度 | 推荐 UI 模式 | 交互机制 |
|---|---|---|
| 桌面 (>1024px) | 多列水平网格画布 | 同时显示多个列，支持指针拖放 + 键盘移动模式。 |
| 平板 (768px - 1023px) | 紧凑列看板（水平滚动） | 较窄列宽 (260px)，平滑触摸水平滑动吸附。 |
| 移动 (<768px) | 分段列标签 + 单活动列 | 顶部状态标签，单列全宽卡片，“移至”底部面板。 |
列宽策略
- 固定列宽 (
300px)： 最适合具有 3-6 列的标准看板。列保持可预测的宽度，额外的列会清晰地溢出到水平滚动中。 - 弹性列 (
flex: 1; min-width: 280px)： 最适合在宽屏上恰好有 3 列（例如，待办、进行中、已完成）的看板，允许列均匀填充整个视口宽度，而不会在右侧留下未使用的空白。
WIP 限制超出处理
- 软 WIP 限制（仅警告）： 用琥珀色/红色突出显示列标题并附带超出限制徽章，但允许用户将卡片移入该列。推荐用于创意和敏捷团队工作流，其中可能会发生临时瓶颈。
- 硬 WIP 限制（阻止）： 当达到限制时阻止将卡片放入该列，并显示模态框或内联警报：“已到达 WIP 限制 (5/5)。请在添加更多任务前解决现有任务。”。禁用向该列的键盘移动。推荐用于严格监管的操作工作流。
约束
- 无障碍性 (WCAG 2.1 AA)：
- SC 2.1.1 键盘： 每个卡片功能（编辑、重新排序、删除、移动）必须仅使用键盘即可到达和操作。
- SC 2.4.7 焦点可见： 获得焦点的卡片和拖动手柄必须具有未被裁剪的焦点环，并且与背景的对比度至少为 3:1。
- SC 4.1.3 状态消息： 卡片移动操作、WIP 警告和筛选结果必须通过
aria-live="polite"区域进行公告。 - SC 2.5.8 目标尺寸： 拖动手柄、卡片菜单触发器 (
...) 和快速添加按钮必须提供至少 24x24px 的触控目标（触摸设备上首选 44x44px）。
- 布局包含与 CLS： 列列表容器必须指定
overflow-y: auto并带有固定标题，以防止在发生动态卡片更新时出现布局折叠或页面级别的跳转。 - 性能： 高效渲染卡片列表。对于包含超过 200 张总卡片的看板，请为每列实现虚拟列表滚动 (
virtual-list-implementation)，以在拖拽操作期间保持 60fps 的渲染速率。
…
[截断以供翻译]