供应链系统HTML静态原型拆解：从页面结构到交互逻辑的完整指南

简介这份供应链系统页面原型资源面向产品经理、UI设计师、前端开发者及供应链业务人员用于在开发前期直观呈现采购、库存、生产计划、物流配送、销售分销、财务与报表分析等核心模块的界面布局与交互流程帮助团队在需求沟通与方案评审阶段快速对齐认知。压缩包共299个文件约661KB以87个html页面为主体辅以126个gif与43个png界面素材、14张jpg配图以及少量js、css、scc样式脚本和3个xlsx数据表覆盖登录、菜单、表单、图表等典型页面元素。目前已有1175人学习下载。通过逐页浏览原型读者可清晰掌握各模块的功能分区、导航结构与控件协同方式理解供应链流程从采购到财务的完整闭环为后续视觉设计与前端实现提供可复用的参考蓝本降低沟通成本并提升项目落地效率。1. 供应链系统页面原型一套能直接跑起来的 HTML 静态原型拆解手里拿到一份「供应链系统页面原型」第一反应往往是这玩意儿到底能不能直接跑我拆过不少类似的前端原型包说实话大部分所谓的「原型」要么是几张切图要么是 Axure 导出的 HTML 里塞满了绝对定位的 div改一个字段能把你逼疯。但这次这份不太一样——它是一套用纯 HTML CSS 少量原生 JavaScript 搭出来的静态页面原型覆盖了供应链系统里最常见的几个核心模块采购订单列表、库存看板、供应商管理、物流跟踪详情页。没有构建工具没有 npm install双击 index.html 就能在浏览器里看到完整布局。适合谁用如果你是需要快速给客户或内部评审演示供应链系统交互流程的前端或者你是后端想自己搭个管理后台但不想从零写 CSS 的开发者这套原型能帮你省掉至少两天的布局时间。它不依赖任何框架Vue 和 React 项目都能把 HTML 片段直接搬进去改。下面我从文件结构、页面模块拆解、样式定制、数据模拟到常见翻车点一步步拆给你看。2. 文件结构与页面模块拆解先搞清楚每个 HTML 在管什么2.1 目录层级与文件职责拿到压缩包解压后根目录下通常是这样的结构不同版本可能略有差异但核心文件跑不掉supply-chain-prototype/ ├── index.html # 入口页通常是登录或总览仪表盘 ├── pages/ │ ├── purchase-order.html # 采购订单列表 筛选 分页 │ ├── inventory.html # 库存看板含卡片式指标和表格 │ ├── supplier.html # 供应商管理含新增/编辑弹窗 │ └── logistics.html # 物流跟踪详情时间轴 地图占位 ├── css/ │ ├── reset.css # 基础样式重置 │ ├── layout.css # 栅格、侧边栏、顶栏布局 │ └── components.css # 按钮、表格、标签、弹窗等组件样式 ├── js/ │ ├── mock-data.js # 静态模拟数据全是 JSON 对象 │ └── main.js # 页面交互逻辑筛选、弹窗、分页 └── assets/ └── icons/ # SVG 图标少量 PNG 占位图这个结构的好处是职责清晰layout.css管大框架components.css管可复用组件mock-data.js管数据。你改样式不会误伤布局改数据不用碰逻辑。我一般拿到这种包第一件事是打开index.html在浏览器里点一遍确认所有链接跳转正常、控制台没有 404。常见做法是直接用 VS Code 的 Live Server 插件起一个本地服务避免file://协议下某些字体或图标加载失败。2.2 核心页面模块与对应的 HTML 骨架以采购订单列表页purchase-order.html为例它的主体结构大致如下!-- 顶栏面包屑 用户信息 -- header classtopbar nav classbreadcrumb span供应链管理/span / span采购订单/span /nav div classuser-info张三 | 退出/div /header !-- 侧边栏模块导航 -- aside classsidebar ul li classactivea hrefpurchase-order.html采购订单/a/li lia hrefinventory.html库存看板/a/li lia hrefsupplier.html供应商管理/a/li lia hreflogistics.html物流跟踪/a/li /ul /aside !-- 主内容区筛选栏 表格 分页 -- main classcontent div classfilter-bar input typetext idorderNo placeholder订单编号 select idstatus option value全部状态/option option valuepending待审核/option option valueshipped已发货/option option valuecompleted已完成/option /select button idsearchBtn查询/button /div table classdata-table idorderTable thead tr th订单编号/thth供应商/thth金额/th th状态/thth创建时间/thth操作/th /tr /thead tbody!-- JS 动态渲染 --/tbody /table div classpagination idpagination/div /main这段骨架里filter-bar负责筛选条件>:root { --primary-color: #2563eb; /* 主色按钮和链接 */ --primary-hover: #1d4ed8; /* 主色悬停态 */ --sidebar-bg: #1e293b; /* 侧边栏背景 */ --sidebar-text: #cbd5e1; /* 侧边栏文字 */ --content-bg: #f8fafc; /* 内容区背景 */ --border-color: #e2e8f0; /* 表格边框 */ --danger-color: #dc2626; /* 预警红 */ --success-color: #16a34a; /* 完成绿 */ }你只需要改这几个值全站配色就跟着变。比如你们公司品牌色是深绿把--primary-color改成#059669按钮、选中态、链接全部自动更新。注意--sidebar-bg和--sidebar-text要保证对比度我见过有人把侧边栏改成浅灰、文字改成白色结果导航完全看不清——这是典型的翻车现场。改完色后用浏览器 DevTools 的对比度检查工具过一遍确保文字可读。3.2 栅格系统与响应式断点布局用的是经典的「侧边栏固定 内容区自适应」模式。侧边栏宽度通常写死240px内容区margin-left: 240px。如果你需要改成可折叠侧边栏得在main.js里加一个 toggle 逻辑// 侧边栏折叠切换 collapsed 类内容区 margin 同步调整 document.getElementById(toggleSidebar).addEventListener(click, function () { const sidebar document.querySelector(.sidebar); const content document.querySelector(.content); sidebar.classList.toggle(collapsed); // collapsed 状态下侧边栏宽度变为 64px只显示图标 if (sidebar.classList.contains(collapsed)) { content.style.marginLeft 64px; } else { content.style.marginLeft 240px; } });对应的 CSS 里要定义.sidebar.collapsed的宽度和隐藏文字的逻辑。这里有个参数要注意折叠动画的transition时间建议设0.2s太长会显得拖沓太短会有闪烁感。响应式方面原型一般只做了桌面端适配最小宽度大概在1200px左右。如果你要在笔记本上演示把浏览器缩放调到 80% 通常能完整显示。真要上移动端表格得改成卡片式布局那是另一个工作量了原型阶段不建议花这个时间。3.3 表格与表单的细节调整供应链系统的表格列多、字段长默认样式下容易出现文字换行或溢出。常见做法是给th和td加white-space: nowrap然后给表格外层包一个overflow-x: auto的容器。这样列多的时候可以横向滚动不会把布局撑破。表单方面筛选栏的输入框和下拉框高度要统一一般设36px或40px按钮高度跟它们对齐。我一般会在components.css里定义.form-control类统一padding、border-radius和focus态的box-shadow避免每个页面重复写。提示改样式时优先改 CSS 变量和组件类不要直接改行内样式。行内样式一多后面想换主题就得全局搜索替换血泪经验。4. 数据模拟与交互逻辑让原型「活」起来的关键几步4.1 mock-data.js 的数据结构设计mock-data.js是整个原型的灵魂。它通常导出一个全局对象或几个数组结构如下// 模拟采购订单数据字段与真实后端接口保持一致 const mockOrders [ { orderNo: PO-2024-001, supplier: 华东电子元件厂, amount: 128000.00, status: pending, // pending / shipped / completed createTime: 2024-06-01 09:23:00 }, { orderNo: PO-2024-002, supplier: 南方物流包装有限公司, amount: 45600.50, status: shipped, createTime: 2024-06-02 14:10:00 } // ... 更多记录 ];字段命名尽量和后端接口对齐这样将来接真实 API 时前端渲染逻辑不用大改。status用英文枚举值展示时通过一个映射表转成中文const statusMap { pending: 待审核, shipped: 已发货, completed: 已完成 };渲染表格时statusMap[row.status]就能拿到中文标签同时根据状态给span加不同的 class 来控制颜色。这种「数据与展示分离」的做法在原型阶段就能培养好习惯后面接真实数据时少踩坑。4.2 筛选、分页与弹窗的 JS 实现筛选逻辑的核心是「根据条件过滤数组再重新渲染」。以订单页为例// 当前页码和每页条数 let currentPage 1; const pageSize 10; // 根据筛选条件获取过滤后的数据 function getFilteredOrders() { const orderNo document.getElementById(orderNo).value.trim(); const status document.getElementById(status).value; return mockOrders.filter(function (order) { // 订单编号模糊匹配状态精确匹配 const matchNo !orderNo || order.orderNo.indexOf(orderNo) ! -1; const matchStatus !status || order.status status; return matchNo matchStatus; }); } // 渲染表格和分页 function render() { const filtered getFilteredOrders(); const totalPages Math.ceil(filtered.length / pageSize); // 防止页码越界 if (currentPage totalPages) currentPage totalPages || 1; const start (currentPage - 1) * pageSize; const pageData filtered.slice(start, start pageSize); // 拼接 tbody 的 HTML const tbody document.querySelector(#orderTable tbody); tbody.innerHTML pageData.map(function (order) { return tr td order.orderNo /td td order.supplier /td td order.amount.toFixed(2) /td tdspan classtag tag- order.status statusMap[order.status] /span/td td order.createTime /td tda hrefjavascript:; classbtn-detail详情/a/td /tr; }).join(); // 渲染分页按钮 renderPagination(totalPages); }这段代码里pageSize控制每页条数currentPage是当前页。filter里的indexOf做模糊匹配slice做分页切片。注意currentPage越界处理——如果筛选后数据变少当前页可能超出总页数得重置。弹窗逻辑更简单就是切换display或class// 打开新增供应商弹窗 document.getElementById(addSupplierBtn).addEventListener(click, function () { document.getElementById(supplierModal).style.display flex; }); // 关闭弹窗点击遮罩或取消按钮 document.getElementById(supplierModal).addEventListener(click, function (e) { if (e.target this || e.target.classList.contains(btn-cancel)) { this.style.display none; } });参数说明e.target this判断点击的是遮罩层本身而不是弹窗内容区这样点遮罩关闭、点内容不关闭符合用户直觉。4.3 从静态原型到真实接口的过渡原型跑通后下一步通常是接真实后端。这时候mock-data.js不要直接删而是改成一个开关// 数据源开关true 用模拟数据false 走真实接口 const USE_MOCK true; function fetchOrders(params) { if (USE_MOCK) { return Promise.resolve(getFilteredOrders()); } // 真实接口调用 return fetch(/api/orders? new URLSearchParams(params)) .then(function (res) { return res.json(); }); }这样在开发环境用 mock联调时切到真实接口两边逻辑一致。我一般会保留这个开关到项目上线方便排查是前端渲染问题还是后端数据问题。5. 避坑与常见问题排查原型跑不起来先看这几条5.1 双击打开页面样式全乱现象直接双击index.html用file://协议打开CSS 和 JS 都没加载页面是裸 HTML。原因部分浏览器对本地文件加载外部资源有安全限制尤其是字体和 SVG 图标。解决用 VS Code 的 Live Server 插件或者命令行python -m http.server 8080起一个本地服务然后访问http://localhost:8080。这是最常见的新手坑没有之一。5.2 表格数据渲染不出来但控制台不报错现象页面布局正常但表格tbody是空的控制台也没有红色报错。原因大概率是mock-data.js在main.js之后加载导致mockOrders变量未定义但filter返回空数组不报错。解决检查script标签顺序mock-data.js必须在main.js之前。或者把mockOrders挂到window上确保全局可访问。5.3 弹窗打开后页面滚动穿透现象弹窗打开后鼠标滚轮还能滚动背后的页面体验很差。原因弹窗层没有阻止滚动事件冒泡。解决弹窗打开时给body加overflow: hidden关闭时移除。一行 CSS 的事但很多人会忽略。5.4 分页点击后数据不更新现象点击页码按钮按钮高亮变了但表格内容没变。原因分页按钮的点击事件只改了currentPage变量没有调用render()重新渲染。解决在页码点击回调里更新currentPage后立即调用render()。另外注意renderPagination里生成按钮时要用闭包或style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />