立项原因 / 产品问题：高校扩招背景下，宿舍资源与在校人数的矛盾日益突出。传统宿舍管理长期依赖手工台账、Excel 表格和口头沟通，导致床位分配混乱、入住退宿流程冗长、报修与查寝全靠人肉登记、水电费用结算滞后、家校沟通不畅。管理者无法实时掌握"空床有多少、谁住在哪、哪栋入住率异常"，学生与后勤的诉求得不到及时响应，管理效率低且存在安全隐患。
行业场景 / 业务背景：面向高校与园区的宿舍全流程数字化管理。以"宿舍资源—住宿人员—日常服务"为主线，覆盖楼栋床位资源管理、学生入住/退宿/调宿流转、宿舍报修工单、每日查寝、水电抄表计费、访客通行与系统参数配置。通过一个可视化的 B 端平台，将分散的后勤事务统一为结构化流程，让管理员一眼看清床位与入住全貌，实现宿舍管理的透明化、标准化和效率化。
本系统围绕宿舍管理闭环，共实现 14 个页面、6 大功能模块，核心功能如下：
1、统一门户：登录页 + 工作台（数据看板）
1.1、账号密码登录（含记住账号/忘记密码入口）
1.2、工作台聚合四类核心统计卡（在住学生、总床位、待处理报修、待缴水电）、我的待办、楼栋入住率 TOP、入住/退宿趋势柱状图、系统通知
2、宿舍资源管理
2.1、宿舍楼栋：楼栋卡片化管理，展示楼层/房间/床位数量、入住率、运营状态（启用/维护中），支持新增/编辑/停用
2.2、宿舍床位：楼栋-楼层资源树定位，房间床位占用网格视图，区分已入住/空床位/维修中三种状态，支持批量分配与导出床位表
3、住宿人员管理
3.1、入住登记：两步式表单（学生信息 + 分配床位），接入学号/姓名/学院/专业/辅导员等字段
3.2、住宿信息：多条件筛选在住学生台账，行内支持查看/调宿/退宿
3.3、学生档案：管理学院/年级/联系电话/住宿状态等基本信息
3.4、退宿/调宿：申请状态流转（待审核→待核查→已完成/驳回），宿舍内/跨宿调换路径可视化
4、日常保障服务
4.1、报修管理：报修工单全流程（待分派→维修中→已完成），含紧急程度标记、超时预警统计
4.2、查寝管理：发布查寝任务，应到/实到/未归统计，异常名单跟进
4.3、水电费用：水/电表读数核算、用量与金额计算、账单生成、回收率统计
4.3、访客管理：访客在线登记、审核授权、到访/离校状态跟踪，关联被访学生与宿舍
5、系统管理
5.1、系统设置：机构信息、费用标准、角色权限、数据字典等参数配置
6、交互与体验
6.1、统一的列表筛选/分页/状态 Badge、危险操作二次确认、空态友好提示、页面间基于真实链接的跳转闭环
一、我负责的具体任务（PM + 产品经理）
作为本项目的关键负责人，我端到端主导并独立交付了宿舍管理系统的产品定义 + 项目管理 + 高保真原型构建，核心职责包括：
需求挖掘与产品定义：从"高校宿舍管理低效"这一真实业务痛点出发，完成目标用户（系统管理员/宿管员/辅导员/维修人员/财务）调研、核心业务流程（入住、退宿、调宿、报修、查寝、水电结算）梳理，输出明确的功能范围与优先级。
架构与信息设计：规划设计系统整体结构，拆分为 6 大功能域、14 个页面，定义页面层级、字段模型与跨页数据流转关系，确保"床位—住宿—退宿/调宿—报修—查寝—水电—访客"业务数据可全链路追溯。
高保真原型设计与实现：亲自完成全部 14 页面的视觉设计、交互编排与代码实现，输出可直接用于评审、开发与测试的高保真可交互原型。
项目过程管理：按「资源→住宿→日常→系统」推进迭代，建立统一设计系统保证一致性，并主动执行结构化的质量自审（字段对齐 + 跨页逻辑串联），修复缺陷并升版闭环。
二、技术栈与架构
前端基础：原生 HTML5 + CSS3 + 原生 JavaScript（ES6），零重依赖框架，保证跨浏览器兼容、加载快、易于迭代与审阅。
设计系统：以 CSS 变量统一维护品牌色、状态色、圆角、字阶、间距等设计 Token，沉淀可复用组件（侧边导航、顶部栏、统计卡片、表格、筛选栏、分页、状态徽章、Tab、开关、弹窗），确保 14 页视觉与行为高度一致。
数据可视化：采用原生 CSS/SVG 实现柱状图、入住率进度条、统计聚合卡片，不引入重型图表库。
响应式布局：基于 xs/sm/md/lg/xl 五档断点的响应式适配，覆盖手机到 1440px+ 全尺寸设备；后台侧边栏在中屏自动折叠、小屏唤起汉堡菜单。
交互实现：以原生 DOM 事件驱动演示级交互——登录校验、筛选、Tab 切换、开关动画、危险操作二
评论