用Bootstrap 4/5栅格、表单、卡片可快速搭建工单指派页，但需语义化结构与完整交互逻辑：左侧col-lg-8列展示带data属性的工单卡片，右侧col-lg-4列放置动态加载维修员的指派面板，点击卡片自动填充信息，提交前校验并防重复点击，错误提示精准落位invalid-feedback。
直接用 Bootstrap 4 或 5 的栅格、表单和卡片组件就能搭出可用的工单指派页，不需要额外框架或重写 CSS；但若跳过语义化结构和交互逻辑，页面会变成“能看不能用”的静态壳子。
用 col + card 布局设备列表与指派面板
维修工单页本质是“左侧设备/工单列表 + 右侧指派操作区”，Bootstrap 的响应式栅格天然适配。别用 float 或绝对定位强行对齐——那会让小屏崩坏。
- 左侧设为
col-lg-8放工单卡片列表，每张card包含设备型号、报修时间、故障描述、当前状态（如status-pending类） - 右侧设为
col-lg-4放指派面板：下拉选维修员、日期选择器（input type="date"）、优先级单选按钮（form-check）、提交按钮 - 加
mt-3或mb-2控制卡片间距，避免堆叠粘连；小屏下自动变为上下排列，无需额外媒体查询
用 form-select 绑定维修员数据时注意异步加载时机
维修员列表通常来自后端 API，不能直接写死在 HTML 里。硬编码 option 会导致人员变动后页面失效，且无法支持搜索筛选。
- 初始化页面时先渲染空的
<select class="form-select" id="assignee-select"></select> - 用
fetch()或axios.get('/api/staff')拿到数据后，循环生成option并append进去；记得给默认项加disabled selected - 如果维修员超 20 人，别用原生下拉——用户会滚动到眼花。此时应换
choices.js或tom-select，它们兼容 Bootstrap 5 的form-control样式
点击工单卡片触发指派面板自动填充
用户点某条工单，右侧面板要立刻显示该工单 ID、设备编号、故障摘要，并预设可编辑字段。靠手动改 DOM 容易漏字段或错绑定。
- 给每张工单卡片加
data-ticket-id="T2024-0876"、data-device-id="DEV-SH-012"等自定义属性 - 用事件委托监听卡片点击：
document.querySelector('.ticket-list').addEventListener('click', e => { if (e.target.closest('.card')) { /* 提取 data-* 属性 */ } }) - 填充时用
querySelector('#assignee-select').value = ''清空选择，再设querySelector('#priority-high').checked = true等，避免旧值残留
提交前校验必填项并防重复点击
用户狂点“指派”按钮导致后端收到多条重复指令，是后台页最常被忽略的交互缺陷。Bootstrap 自带的 disabled 和 is-invalid 能解决一半问题。
- 提交前检查：
if (!assigneeSelect.value || !dueDateInput.value) { dueDateInput.classList.add('is-invalid'); return; } - 点击后立即禁用按钮：
submitBtn.disabled = true; submitBtn.textContent = '指派中...';，成功后再恢复 - 后端返回 400 错误时，别只弹 alert——要把错误信息写进对应
.invalid-feedback元素里，例如document.querySelector('#assignee-select + .invalid-feedback').textContent = '该人员已排满今日工单'
真正难的不是画出这个页面，而是让每张工单卡片的 data- 属性和后端返回字段严格对齐，以及在多人同时操作时，指派状态能实时同步（这需要 WebSocket 或轮询，Bootstrap 本身不提供）。这些细节没处理好，页面越“好看”越误导用户。
