Mazer 适合拿来做内部管理系统的前端：左侧菜单组织业务入口，右侧用统计卡片、图表、表格和表单展示数据。随包 1.0.0 版本采用 Bootstrap 5，包含 58 个源页面模板，以及可直接预览的静态页面。账户、权限和业务数据仍需接入自己的后端。
先选业务需要的页面，58 页不必全部搬进去
Mazer 的页面更像一组后台界面样本。做订单管理时，常见起点是表格、筛选输入、编辑表单和反馈弹窗；做运营看板，则会先用到统计卡片和图表。按实际操作流程选组件，菜单就能围绕业务组织起来，不必沿用整列演示入口。
| 页面组 | 数量 | 包内内容 |
|---|---|---|
| 仪表盘 | 1 | 统计卡片、访问图表、地区数字、评论和消息 |
| 基础与扩展组件 | 19 | 按钮、卡片、轮播、模态框、分页、评分与提示消息等 |
| 布局 | 4 | 默认侧栏、单列、顶部导航和横向菜单 |
| 表单与编辑器 | 11 | 输入、选择、单选、复选、文本域、表单布局及四种编辑器 |
| 表格、图表与数据组件 | 7 | 两类表格、两套图表、文件上传与两个地图页面入口 |
| 小部件与图标 | 6 | 聊天框、价格卡、待办列表和三套图标页面 |
| 应用、认证与错误页 | 10 | 邮件、聊天、图库、结算、登录、注册、找回密码及错误页 |
这些数量表示源文件的分组，不代表 58 项业务功能都已完成。聊天、图库、结算及两个地图页面仍只显示 Coming Soon；邮件页则已有列表和写信界面，但写信表单的目标为 #，没有真实投递服务。选页时这几种状态需要分开看。
dist 中有 59 个 HTML 文件，多出的 sidebar-items.html 是由侧栏数据生成的构建产物。业务页面数量按 src 中的 58 个模板计算，不把这个文件当作额外功能。
表格能搜索、图表能展示，数据从哪里来仍要设计
table-datatable.html 使用 Simple-DataTables，能对页面已有的数据执行搜索、排序和分页。拿它展示一份前端数据很合适；需要查询数据库中的完整订单列表时，还要设计服务端筛选、分页和权限校验，不能把浏览器当前搜到的结果当成全部记录。
仪表盘与图表示例使用 ApexCharts 和 Chart.js，待办组件用 Dragula 拖动排序。SweetAlert、Toastify、轮播、模态框和评分组件提供了不同的反馈与交互样本。图表中的数组和卡片数字属于演示数据；拖动之后是否保存顺序，也需要业务接口承接。
富文本页面分别演示 Quill、CKEditor、Summernote 和 TinyMCE，可以按项目需求选用。主导航和 Bootstrap 组件不依赖 jQuery，但 Summernote 页面单独加载了 jQuery。若采用其他编辑器，可以连同未使用的 Summernote 页面与资源一起整理，不能把整个包概括成“完全无 jQuery”。
dist 用来预览，长期修改回到 src
共用布局和菜单：避免逐页改同一处
直接打开 dist/index.html 可以查看现成页面，适合选布局和确认组件外观。后续要统一改导航、页脚或品牌，源文件更省维护成本：页面通过 Nunjucks 的 extends 复用布局，菜单条目集中在 src/sidebar-items.json，侧栏结构由 src/layouts/sidebar.html 输出。
src/sidebar-items.json：修改菜单名称、分组、链接和图标。src/layouts/master.html：处理通用页面框架、公共资源引用与页脚；认证页另有布局。src/assets/scss/_variables.scss：调整主题色、字体和间距等变量；app.scss汇总组件样式。src/assets/scss/pages与widgets：修改认证、错误页、聊天及待办等局部样式。
如果只改生成后的 HTML 和 CSS，下次重新构建可能覆盖这些改动。把需要长期维护的修改放回 src，让菜单和公共布局从同一份源文件生成，页面多起来之后差别尤其明显。
构建工具负责生成前端文件
webpack.mix.js 用 Laravel Mix 编译 Nunjucks 与 SCSS，依赖包括 Webpack 5 和 Sass。包内提供 npm run dev、npm run watch 与 npm run prod；其中 dev 和 watch 的脚本也把 NODE_ENV 设为 production，不能只凭命令名称判断环境。Laravel Mix 在这里是构建工具，包内并没有随之提供 Laravel 业务后端。
配置还保留了指向 mazer.test 的 BrowserSync 代理。如果自己的本地域名不同，这个代理也要相应处理。这份旧版工程尚未验证在目标 Node 环境中的安装与构建结果，正式修改前需要确认依赖能否顺利运行。
登录和上传最容易把界面误认成完整功能
登录、注册和找回密码表单都指向本地 index.html。进入仪表盘不代表账号验证通过，勾选 Keep me logged in 也不会自动建立会话。真正的管理后台还需要服务端身份验证、角色权限和数据访问校验，隐藏侧栏菜单本身不能限制接口权限。
文件上传页集成 FilePond，提供选取、图片预览、裁切、尺寸及类型校验等示例。其中一项演示会把文件发送到第三方图片服务，脚本中带有公开示例 Key。接入业务前应移除这段第三方上传配置，改成受控接口，并在服务端限制文件类型、大小和访问权限，向用户说明文件去向。图片在前端显示出预览，并不表示已存入自己的服务器。
实际落地时，工作量主要在把这些界面接成完整流程：查询数据后如何呈现空结果，保存失败如何保留输入，权限不足时显示什么，上传后的文件如何关联到记录。Mazer 能提供按钮、布局和反馈组件的起点，这些业务关系仍需要按项目实现。修改和交付源码时，随包的 LICENSE 与版权声明也应保留。
暂无评论内容