UI Pattern 组件库

山峡化工小程序通用页面模式。所有样式集中在 shanxia-mp-base.css,落地 uni-app 时按 class 映射复用。

页面模式(4 个核心 Pattern)

LIST

P-LIST · 标准列表

Header / 筛选 Tab / 可点击卡片列表 / 空态 / 骨架屏 / 触底提示

列表办理入口
VIEW

P-VIEW · 查看详情

Hero 摘要 + 分块 KV + 时间线 + 附件 + 底栏操作 + 抽屉快捷预览

只读详情
FORM

P-FORM · 新增/编辑表单

分组面板 + 堆叠输入 + 行式选择器 + 附件上传 + 底栏提交

数据录入
UI

P-FEEDBACK · 弹窗与反馈

确认弹窗 / 底部抽屉 / Action Sheet / Toast / 空态 / 骨架屏

交互反馈

推荐页面流转

工作台菜单 → 列表页 → 点击卡片 → 查看详情
列表 Header「新增」→ 表单页 → 提交 → 返回列表
详情「更多」→ Action Sheet → 删除 → 确认弹窗 → Toast

核心 Class 速查

布局:.mp-navbar .mp-header .mp-footer-bar
列表:.mp-tabs .mp-card--clickable .mp-list-end .mp-empty(方案 B · 组件 mp-empty)
详情:.mp-detail-hero .mp-block .mp-kv-list .mp-timeline
表单:.mp-form-group .mp-field .mp-field-row .mp-attach-upload
弹窗:.mp-overlay .mp-sheet .mp-dialog .mp-action-sheet .mp-toast
状态:.mp-tag--success|warning|danger|info|muted

← 返回小程序 Demo 总索引