task-99(店铺中心): 实现店铺中心响应式表格
新增 shop-table-layout.ts:店铺/密钥列表列定义与按视口宽度筛选可见列, 店铺名/操作等关键列任意宽度保留。 TDD: task-99.test.ts 8 用例先 RED 后 GREEN。
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
/** 店铺中心响应式表格(任务 99):按视口宽度决定可见列,关键列(店铺名/操作)始终显示;纯逻辑。 */
|
||||
|
||||
export interface ShopTableColumn {
|
||||
key: string
|
||||
label: string
|
||||
/** 可见所需最小视口宽度(px)。 */
|
||||
minWidth: number
|
||||
/** 关键列:任意宽度都显示。 */
|
||||
always?: boolean
|
||||
}
|
||||
|
||||
/** 店铺列表列定义(列序稳定,供响应式筛选与表头渲染)。 */
|
||||
export const SHOP_MANAGE_COLUMNS: ShopTableColumn[] = [
|
||||
{ key: 'index', label: '序号', minWidth: 180 },
|
||||
{ key: 'groupName', label: '分组', minWidth: 320 },
|
||||
{ key: 'shopName', label: '店铺', minWidth: 0, always: true },
|
||||
{ key: 'mallName', label: '商城', minWidth: 520 },
|
||||
{ key: 'znUsername', label: '自动化账号', minWidth: 760 },
|
||||
{ key: 'account', label: '账号', minWidth: 640 },
|
||||
{ key: 'password', label: '密码', minWidth: 680 },
|
||||
{ key: 'createdAt', label: '创建时间', minWidth: 880 },
|
||||
{ key: 'updatedAt', label: '修改时间', minWidth: 1000 },
|
||||
{ key: 'actions', label: '操作', minWidth: 0, always: true },
|
||||
]
|
||||
|
||||
/** 店铺密钥列表列定义。 */
|
||||
export const SHOP_KEYS_COLUMNS: ShopTableColumn[] = [
|
||||
{ key: 'index', label: '序号', minWidth: 180 },
|
||||
{ key: 'remarkName', label: '备注名', minWidth: 0, always: true },
|
||||
{ key: 'ziniaoAccountName', label: '紫鸟账号名称', minWidth: 360 },
|
||||
{ key: 'ziniaoToken', label: '紫鸟令牌', minWidth: 420 },
|
||||
{ key: 'whitelist', label: '白名单状态', minWidth: 560 },
|
||||
{ key: 'createdAt', label: '创建时间', minWidth: 760 },
|
||||
{ key: 'updatedAt', label: '修改时间', minWidth: 820 },
|
||||
{ key: 'actions', label: '操作', minWidth: 0, always: true },
|
||||
]
|
||||
|
||||
/** 按视口宽度返回应可见的列(保持原顺序);非正宽度只保留 always 列。 */
|
||||
export function shopColumnsForWidth(columns: ShopTableColumn[] | undefined, width: number): ShopTableColumn[] {
|
||||
if (!Array.isArray(columns)) return []
|
||||
const safeWidth = typeof width === 'number' && Number.isFinite(width) ? Math.max(Math.floor(width), 0) : 0
|
||||
return columns.filter((column) => column.always || safeWidth >= column.minWidth)
|
||||
}
|
||||
Reference in New Issue
Block a user