N Nexus UI Component Library
v3.0
陈
由页面以纯 HTML 打开并书写内容。 ========================================================================= -->
辅助工具 / 05

无限滚动 · 本地存储

长列表不必一次渲染完:滚动到底部自动追加下一批数据,同时把浏览位置、筛选条件这类轻量状态写进浏览器本地存储,刷新后原样恢复。另附图片下发前的尺寸压缩与按角色渲染的权限控制。

无限滚动

[data-infinite]

向下滚动本页,列表在接近屏幕底部时会自动追加下一批内容,并弹出「加载更多」提示。本演示用首屏的 10 条数据作为模板循环追加,真实项目请把这一段换成请求下一页接口。

团队动态
已加载 10 条 · 滚动继续加载
实时
陈
陈思远 提交了「秋季新品主视觉」第 3 版设计稿
涉及 12 个页面,等待设计评审 · 3 分钟前
待评审
周
周航 合并了分支 feature/order-export 到 main
提交 8 个文件,新增 642 行,删除 118 行 · 26 分钟前
已合并
赵
赵敏 更新了 Q4 目标:新增客户 3,000 家
关联项目:增长实验二期 · 1 小时前
目标变更
李
李彦 上传了 9 月对账明细 8,642 条
文件 EXP-1003-013.xlsx · 2 小时前
附件
系
系统检测到西南仓库存健康度低于 50%
已通知仓储负责人并生成补货建议 · 3 小时前
告警
吴
吴桐 关闭了缺陷「导出 CSV 时中文乱码」
修复版本 v2.4.1 · 5 小时前
已修复
郑
郑楠 发表了文章《组件库如何做多端一致性》
阅读 1,842 · 收藏 216 · 昨天 18:20
内容
孙
孙悦 发起了采购申请:48 台 27 寸显示器
金额 ¥ 86,400 · 等待财务复核 · 昨天 15:04
待审批
林
林然 完成了新员工入职培训并提交考核
成绩 92 分 · 昨天 11:32
已完成
客
客服组收到 36 条关于物流时效的咨询
平均首次响应 42 秒 · 前天 20:15
客服
正在加载更多动态…

没有更多了 · 已展示全部 10 条种子数据(演示模式下会循环追加)

触发与节流
触发距离距底 300 px
加载延迟800 ms
并发保护加载中忽略新的触发
监听方式passive scroll
每批条数10
加载状态
加载中(首屏 / 追加)
没有更多数据
加载失败,展示重试按钮
骨架屏占位
不要无限追加到底

列表长度超过数百条后,请改为虚拟滚动或分页,否则内存与滚动性能会明显下降。

本地存储

localStorage · sessionStorage
草稿自动保存
键值大小
nexus:draft:order客户信息 + 3 个商品行1.8 KB
nexus:filters:order状态=待发货,区域=华东146 B
nexus:themedark12 B
nexus:table:cols["orderId","amount","status"]64 B

合计占用 2.1 KB / 5 MB 配额,写入失败(隐私模式或配额耗尽)时静默降级,不打断表单提交。

读写封装
const store = {
  get(k, def = null) {
    try {
      const v = localStorage.getItem(k);
      return v === null ? def : JSON.parse(v);
    } catch (e) { return def; }
  },
  set(k, v) {
    try { localStorage.setItem(k, JSON.stringify(v)); }
    catch (e) { /* 配额或隐私模式 */ }
  }
};

// 用法
store.set('nexus:theme', 'dark');
const theme = store.get('nexus:theme', 'light');

JSON.parse 必须包在 try 里:历史版本写入过的裸字符串会让解析抛错。

容量与生命周期
localStorage2.1 KB / 5 MB
sessionStorage0.3 KB / 5 MB
Cookie(会话)42 B / 4 KB
持久性localStorage 长期保留
作用域同源共享,不含 httpOnly
清理时机用户清缓存或浏览器回收
禁止存放敏感信息

令牌、身份证号、支付信息不能写入本地存储:同源脚本均可读取,且明文落盘。

图片尺寸压缩

降采样 · 质量 0.82
压缩前后对比
原图
DSC_4218.JPG
4032 × 3024 · 4.8 MB · JPEG q100
压缩后 1280 × 960
DSC_4218.min.JPG
1280 × 960 · 218 KB · JPEG q82
体积对比
原图 4.8 MB
100%
仅压缩
2.2 MB
仅降采样
1.1 MB
降采样 + 压缩
218 KB

先降采样再压缩,收益远大于只调质量系数;对列表缩略图,长边压到 1280px 已足够清晰。

压缩参数
1280
82
批量结果
处理张数12 / 12
原始总体积42.6 MB
压缩后3.4 MB
节省92.0%
平均耗时186 ms / 张

按角色渲染权限

role based rendering
当前角色权限矩阵
切换角色查看各模块的可见性与可操作性
功能模块查看新增编辑删除导出前端表现
订单列表 允许 允许 允许 允许 允许 全部按钮可见
财务对账 允许 禁止 允许 禁止 允许 新增/删除按钮置灰
系统设置 允许 禁止 允许 禁止 禁止 导出菜单整项隐藏
成员管理 允许 允许 允许 审批后 允许 删除需二次确认
内部成本 禁止 禁止 禁止 禁止 禁止 整列不渲染
操作日志 允许 禁止 禁止 禁止 允许 只读表格
无权限时的三种表现
1. 按钮置灰并给出原因提示
2. 整块区域直接不渲染
3. 可见但只读,容器加只读标识
校验位置
路由级:无权限直接跳转 403
组件级:按权限数组过滤按钮
接口级:服务端二次校验(必须)
缓存策略
权限变更后清空本地缓存
权限快照有效期 10 分钟
401 时重新拉取权限并回放
前端隐藏不等于安全

按角色渲染只解决「不误操作」,不构成访问控制。所有写操作必须在服务端再次校验角色与数据归属,否则用户可直接构造请求绕过。