Cassell Internal Network

把学院设定,做成可以实际操作的内部系统。

卡塞尔学院内部网络提供登录、检索、权限差异与浏览器状态记忆。内容叙事和系统规则在同一个界面里发生。

身份系统
3 种预设身份与访客模式
内容规模
20 板块 · 26 主题 · 104 楼层
核心实现
Hash Router · ES Modules · localStorage
交付形式
响应式静态应用
卡塞尔学院内部网络身份验证页面

System Design

重点不是页面数量,而是规则一致。

不同身份进入后看到不同首页、组织信息、通知与临时授权策略;限制档案在列表、搜索结果和详情中都必须维持同一套脱敏逻辑。

01

身份与权限

学生、执行者、管理者和访客拥有不同的可见内容与操作范围。

02

论坛系统

支持排序、筛选、回复、点赞、收藏,并保留刷新后的本地状态。

03

档案脱敏

限制内容不只隐藏入口,也在搜索摘要和详情层同步处理。

04

界面叙事

通知、组织结构与隐藏事件线共同推动世界观,而非依赖说明文字。

05

响应式交付

桌面和 360px 移动端均完成页面检查,保持导航与内容可用。

Implementation

系统组成

主要文件

  • cassell.html:页面入口与模块挂载
  • cassell.css:身份界面、内容区与响应式规则
  • cassell.js:路由、权限、交互和状态管理
  • cassell-data.js:角色、板块、主题与档案数据

关键机制

  • #/search?q=... Hash 路由检索
  • 受限内容在搜索和详情中保持一致脱敏
  • 移动端无横向溢出,导航与弹窗可用
  • 身份状态、收藏与回复保存在当前浏览器