温州白雕科技有限公司 + SQM订单编号 PNTWZBDKJ · 2026-07-15
RMB 31,800PNT DESIGN SYSTEM
帕恩检测项目管理系统
当前系统 UI 组件与交互规范
01
BRAND
品牌与色彩
品牌深蓝#164A92
交互蓝#2F67B1
金额橙#C9541D
危险红#BD5947
页面背景#F3F6FB
正文深色#17233A
02
NAVIGATION
导航与入口
详情页操作下拉
订单详情用当前分享图标统一承载“保存 PDF、导出 Excel、分享链接”；项目详情不显示“保存 PDF”。菜单点击页面空白处关闭。
03
CONTROLS
按钮与表单
操作按钮
输入控件
单选框与复选框
统一复用 form-checkbox 与 form-radio：16px 控件、无悬停外框；复选框为蓝底白色对号，单选框为蓝色实心圆点。
04
STATUS
状态与岗位标签
项目状态
未开案已开案进行中已完成未通过
状态下拉箭头与文字同色；深色底使用白色箭头，浅色底使用深色箭头。
订单与项目列表状态底色
订单：未开案订单：开案申请中项目：未开始项目：进行中项目：已结束项目：已暂停项目：已作废
列表使用整条记录卡片的近白色低饱和底色区分状态；详情页与操作按钮不复用该背景规则。
人员岗位
管理员部门经理销售检测工程师
合同版本
草本正本失效正本
合同签署页仅在合同正文抬头右上角显示当前版本的一个只读标签；编辑页不显示。
05
NOTICE & FEEDBACK
通知、加载与反馈
顶部通知胶囊
合同签署页
用于当前聚焦页面的短提示。顶部居中、白底蓝边、圆角胶囊、仅展示信息，不放操作或关闭按钮。合同编辑页显示“合同编辑页”，签署页显示“合同签署页”。
统一轻量加载提示
正在生成 PDF…正在整理文档并生成预览，请稍候
用于确实耗时的读取或生成；超过约 1.5 秒才显示。保存成功复用同一视觉语言并在约 1.2 秒后自动消失。
06
LAYOUT
列表与卡片
07
SPREADSHEET GRID
Excel 风格表格编辑器
统一组件 spreadsheet-grid.js，支持区域选择、Delete / Backspace 清空选区、Excel 多行多列复制粘贴、Tab/Enter 导航和向下填充。业务页面只需提供数据矩阵保存回调即可复用。
| 订单号 | 回款金额 | 付款方 | 回执单号 |
|---|---|---|---|
| PNT-DEMO-001 | 10000 | 示例客户 | RC-001 |
| PNT-DEMO-002 | 20000 | 示例客户 | RC-002 |