使用Bootstrap 5 + DataTables实现字典列表，需引入datatables.net-bs5（≥1.13.0），禁用data-api，手动初始化；Modal中select清空用data-initial-value而非reset()；状态开关用bootstrap-switch-button并监听change事件；删除操作需按钮禁用+SweetAlert2二次确认+后端幂等。
用 Bootstrap 5 + DataTables 实现可搜索、分页的字典列表
纯 Bootstrap 自带的表格组件不支持动态分页、搜索和排序，直接写 <table> 会卡在 100 条数据就明显变慢。必须搭配前端表格库，<code>DataTables 是最轻量且兼容性最好的选择（比 Bootstrap Table 更少依赖 jQuery 全局污染）。
关键点：不要用 Bootstrap 的 data-toggle="table" 这类 data-api，它绑定的是过时的 Bootstrap Table 插件，和 Bootstrap 5 冲突严重，初始化失败时控制台报 Uncaught TypeError: $(...).bootstrapTable is not a function 就是这个原因。
实操建议：
- 引入
datatables.net-bs5CSS 和 JS（注意是bs5后缀，不是bs4），确保版本 ≥ 1.13.0 - HTML 表格只保留基础结构：
<table class="table table-striped">，不要加 <code>data-*属性 - JS 初始化写在
$(document).ready()或DOMContentLoaded里，避免 DOM 未就绪 - 开启服务端分页？那就把
serverSide: true和ajax配置好，否则默认是前端全量加载，大数据量下内存暴涨 - 给每个
<select></select>加data-initial-value=""，在打开弹窗前用 JS 显式设回空或默认值：$select.val($select.data('initial-value')) - 如果用了
select2，必须手动调用$select.val(null).trigger('change')，reset()对它完全无效 - Modal 的
hidden.bs.modal事件里清空校验提示（如is-invalid类、<div class="invalid-feedback"> 文本），否则下次打开还残留红色边框 <h3>字典状态开关用 Bootstrap Switch，别手写 checkbox+label</h3> <p>启用/禁用状态常用开关控件，但直接用原生 <code><input type="checkbox">加 Bootstrap 的form-check样式，视觉上只是个方框，不符合后台管理系统的操作直觉。硬套第三方 CSS 容易和 Bootstrap 5 的 CSS 变量冲突（比如--bs-primary被覆盖导致开关颜色错乱）。实操建议：
- 用
bootstrap-switch-button（轻量，仅 2KB，无 jQuery 依赖），初始化只需：$('#status-switch').switchButton({theme: 'bootstrap-5'}) - 开关值变化后，别直接读
checked属性，要监听change.bs.switchbutton事件，因为插件内部可能异步更新 DOM - 接口返回
status: 1时，调用.switchButton('setState', true)；返回0时传false，不能传字符串
删除操作必须二次确认，且禁用按钮防重复提交
字典数据被其他模块引用很常见，后端通常只做软删除（
is_deleted=1），但用户点一次“删除”按钮，网络抖动可能导致请求发两次，造成状态错乱。单纯用disabled属性不够——如果用户快速连点，第一次请求还没返回，按钮仍是可用状态。实操建议：
- 点击删除按钮后立即
$(this).prop('disabled', true).text('删除中...')，成功/失败后再恢复 - 确认弹窗用
Swal.fire()（SweetAlert2）比 Bootstrap 自带的confirm()更可控，支持 HTML 内容和 Promise 返回值 - 后端接口必须幂等：同一
dict_id多次调用删除接口，应始终返回成功，而不是第一次成功、第二次报“记录不存在”
字典维护页面真正的难点不在样式，而在状态同步：前端缓存的列表数据、Modal 表单的脏检查、开关控件的实时值、删除后的局部刷新——这些地方漏掉一个，用户就会觉得“刚改的没生效”或者“删完又冒出来”。
- 用
新增/编辑弹窗用 Modal，但别用 form.reset() 清空 select
字典项常含 status、type 这类下拉字段，Modal 里用 <select></select> 很自然。但很多人在关闭弹窗后调用 form.reset()，结果发现 select 恢复的是页面首次加载时的值，不是初始空状态——因为 reset() 依据的是 HTML 中 selected 属性，不是 JS 设置的值。
实操建议：
