PNT DESIGN SYSTEM

帕恩检测项目管理系统

当前系统 UI 组件与交互规范

图标规范返回系统
01

BRAND

品牌与色彩

品牌深蓝#164A92
交互蓝#2F67B1
金额橙#C9541D
危险红#BD5947
页面背景#F3F6FB
正文深色#17233A
02

NAVIGATION

导航与入口

详情页操作下拉

订单详情用当前分享图标统一承载“下载 PDF、导出 Excel、分享链接”；项目详情不显示“下载 PDF”。菜单点击页面空白处关闭。

03

CONTROLS

按钮与表单

操作按钮

输入控件

单选框与复选框

统一复用 form-checkbox 与 form-radio：16px 控件、无悬停外框；复选框为蓝底白色对号，单选框为蓝色实心圆点。

04

ICONOGRAPHY

图标与使用规范

本页示例与业务页面共同使用 action-icons.js 图标库。后续新增同类操作直接复用现有图标，不另绘或局部调整大小、线宽。

统一尺寸与线条

实际显示尺寸
16 × 16 px
SVG 绘制画布
24 × 24
线条粗细
2 SVG 单位
图标与文字间距
6 px

统一空心描边、圆形端点与转角；图标使用 currentColor 跟随按钮文字颜色，主按钮为白色，普通操作为品牌蓝，禁用时跟随禁用样式。只改变颜色表达状态，不缩放或加粗图标。按钮点击区域仍按按钮规范设置，不缩小为 16px。

保存

软盘图标。保存当前数据，例如报价、项目、客户、方案库及模板。

save

下载

矩形顶部开口，箭头向下。将文件下载到设备，例如 PDF 或 Excel 模板。

download

上传

矩形顶部开口，箭头向上。首次上传图片、报告、附件。已有报告或证书替换附件时使用更新图标。

upload

更新

循环双箭头。替换已有报告、证书等附件，与首次上传的向上箭头区分。

update

导出

矩形右上角开口，箭头沿 45° 指向右上。将当前数据生成可导出的文件。

export

导入

矩形右上角开口，箭头沿 45° 指向左下。导入文件数据，包括重新导入。

import

操作语义与按钮示例

  • “保存”仅表示把当前数据写回系统，使用软盘图标；文件操作使用“下载”“上传”“导出”“导入”。例如使用“下载 PDF”，不使用“保存 PDF”。
  • 下载、上传采用顶部开口；导出、导入采用右上角开口，保持各自约定的箭头方向。
  • 文件类型图标仅表示 PDF、Excel 等文件类型，操作按钮应使用对应的动作图标。
  • 优先使用图标加文字；仅图标按钮必须设置准确的 aria-label，并提供同义的 title。

已有通用操作图标

编辑edit 复制copy 删除trash 分享share 查看eye 固定pin 切换视图view PDF 文件pdf Excel 文件excel

以上图标同样使用 16×16px 尺寸及 2 单位线宽。只有图标的按钮也沿用同一尺寸，不单独放大。

静态按钮直接复用

<button class="ghost-btn" type="button" data-action-icon="download">
  <span>下载 PDF</span>
</button>

页面在正文后引入 action-icons.js，组件会自动为声明的按钮补齐图标，文字与事件保持原样。

动态按钮直接复用

// 动态按钮：复用现有标签和图标接口
setButtonIconLabel(button, "save", "保存项目");

// 自定义模板：生成图标后，原有按钮仍负责交互
const icon = PntActionIcons.svg("upload");

// 新插入的 data-action-icon 控件
PntActionIcons.mount(container);

业务页沿用 setButtonIconLabel；独立页面可使用 PntActionIcons.svg 或 mount。尺寸和线宽统一由 styles.css 的图标变量维护。

05

STATUS

状态与岗位标签

项目状态

未开案已开案进行中已完成未通过

状态下拉箭头与文字同色；深色底使用白色箭头，浅色底使用深色箭头。

订单与项目列表状态底色

订单：未开案订单：开案申请中项目：未开始项目：进行中项目：已结束项目：已暂停项目：已作废

列表使用整条记录卡片的近白色低饱和底色区分状态；详情页与操作按钮不复用该背景规则。

人员岗位

管理员部门经理销售检测工程师

合同版本

草本正本失效正本

合同签署页仅在合同正文抬头右上角显示当前版本的一个只读标签；编辑页不显示。

06

NOTICE & FEEDBACK

通知、加载与反馈

顶部通知胶囊

合同签署页

用于当前聚焦页面的短提示。顶部居中、白底蓝边、圆角胶囊、仅展示信息，不放操作或关闭按钮。合同编辑页显示“合同编辑页”，签署页显示“合同签署页”。

统一轻量加载提示

正在生成 PDF…正在整理文档并生成预览，请稍候

用于确实耗时的读取或生成；超过约 1.5 秒才显示。保存成功复用同一视觉语言并在约 1.2 秒后自动消失。

07

LAYOUT

列表与卡片

温州白雕科技有限公司 + SQM订单编号 PNTWZBDKJ · 2026-07-15
RMB 31,800
08

SPREADSHEET GRID

Excel 风格表格编辑器

统一组件 spreadsheet-grid.js，支持区域选择、Delete / Backspace 清空选区、Excel 多行多列复制粘贴、Tab/Enter 导航和向下填充。业务页面只需提供数据矩阵保存回调即可复用。

单击选中，Shift 连选；快速双击编辑。可直接从 Excel 粘贴多行多列，拖拽右下角填充柄向下复制。
订单号回款金额付款方回执单号
PNT-DEMO-00110000示例客户RC-001
PNT-DEMO-00220000示例客户RC-002