shanxia2.0/docs/superpowers/specs/2026-08-03-list-table-column-width-persist-design.md

列表列宽拖拽 + localStorage 持久化（方案 C）

目标

所有主列表（list-table）支持拖拽调整列宽，并按用户 + 表格标识写入本机 localStorage，刷新后恢复。

方案

薄封装组件 ListTable（内部仍是 el-table）：

• 默认开启 border（Element Plus 列宽拖拽前置条件）
• @header-dragend 写入宽度
• 挂载 / 数据与列变化后，把已存宽度写回表格内部列并 doLayout()
• 页面侧保留现有 el-table-column 模板，一般无需给每列绑 :width

存储

• Key：list_col_widths:{userId}:{tableKey}
• Value：Record<columnKey, number>，columnKey 优先 prop，否则 __selection__ / __index__ 等
• 未登录时 userId 用 anonymous

接入约定

• 主列表：<el-table class="list-table" …> → <ListTable table-key="模块-页面" class="list-table" …>
• table-key 全局唯一；同页多表必须不同 key
• 弹窗内临时明细表可暂不接入；若接入须单独 table-key
• defineExpose 代理底层 el-table 实例方法（如 clearSelection）

样式

沿用现有 list-table 单元格边框；开启 el-table--border 后避免双线 / 顶底外框回潮（与 el-ui.scss 已有 border 覆盖对齐）。

非目标

• 不落库、不跨设备同步
• 本阶段不持久化列顺序（列显隐仍由 usePersistedListColumns 负责）