• 界面设计规约


    01.色彩规范

    主色

    主色

    中性色

    中性色

    功能色

    功能色

    02.文字规范

    文字规范

    文字规范

    文字规范

    03.页面规范

    1.查询条件

    basic-form

    simple-form

    advance-form

    2.表格列布局

    2.1列宽

    2.2列布局

    表格列的布局要按照规则设置

    左对齐

    居左

    居左

    居中对齐

    居中对齐

    右对齐

    右对齐

    3.表单布局

    滑窗

    滑窗

    滑窗

    4.按钮布局

    规范平台中所有按钮样式以及布局方式.

    4.1 顶部按钮

    页面顶部按钮用于放置全局操作的按钮。

    页面顶部按钮

    4.2 表格按钮

    用于操作表格数据按钮。

    4.2.1 行内按钮

    行内按钮

    行内按钮示例:

    {
        title: intl.get('hzero.common.button.action').d('操作'),
        align: 'center',
        width: 200,
        render: (_, record) => (
          <span className="action-link">
            <a
              onClick={() => {
                history.push(`/hpfm/event/detail/${record.eventId}`);
              }}
            >
              {intl.get('hpfm.event.model.event.processMaintain').d('事件维护')}
            </a>
            <a
              onClick={() => {
                history.push(`/hpfm/event/message/${record.eventId}`);
              }}
            >
              {intl.get('hpfm.event.model.event.messageMaintain').d('消息维护')}
            </a>
          </span>
        ),
      },
    

    4.2.2 表格工具栏按钮

    表格工具栏

    4.3 表单按钮

    用于操作整体表单的数据。

    表单按钮

    4.4 常用按钮图标

    统一常见按钮图标样式。

    按钮含义 图标编码 图标样式
    新建 plus
    删除 delete
    保存 save
    下载 download
    上传 upload
    刷新 sync
    导出 export
    导入 to-top
    展开 down
    收起 up
    引用 fork
    提交 check
    发布 rocket
    已读 mail
    校验 check-circle-o
    通过 check
    退回 close
    取消 rollback

    04.布局规范

    布局规范

    05.提示信息规范

    操作成功提示统一在右下角显示

    操作成功提示

    06.只读表单规范

    只读表单统一采取下划虚线方式显示

    只读表单

    07.表格规范

    1. 当表格需要滚动(默认是所有列宽度合计大于1100px 或 存在不确定宽度列)时,表格要有横向滚动(scroll.x)
    2. 操作列 统一放右边, 当列多时, 操作列需要 fixed: right; fixed 使用注意
    3. 当使用 fixed列时, 必须至少要有一个不确定宽度列
    4. 当所有列宽都确定时, scroll.x = 宽度合计(宽度列)
    5. 当存在列没有width时, scroll.x = 宽度合计(宽度列) + 宽度合计(不确定宽度列合适的宽度(至少能让标题合适)) + 1
    6. 注意: 当存在多个不确定宽度列(没有width)时, 未确定宽度列 的宽度 为 减去固定宽度列 的平均值

    07.1 列宽计算

    // 需要滚动的表格1
    columns1 = [
      { title: '编码', width: 200, fixed: 'left' },
      { title: '名称', width: 200 },
      { title: '描述', width: 200 },
      { title: '说明', width: 200 },
      { title: '类型', width: 200 },
      { title: '启用', width: 80, align: 'center' },
      { title: '操作', width: 100, fixed: 'right' },
    ];
    scroll1 = { x: 1180};
    
    // 需要滚动的表格2
    // 当在最小宽度下时
    // 描述和说明的宽度 均为 160;
    columns2 = [
      { title: '编码', width: 200, fixed: 'left'},
      { title: '名称', width: 200 },
      { title: '描述' }, // 认为描述列适合的宽度至少为 120
      { title: '说明' }, // 认为说明列适合的宽度至少为 200
      { title: '类型', width: 200 },
      { title: '启用', width: 80, align: 'center' },
      { title: '操作', width: 100, fixed: 'right' },
    ];
    scroll2 = { x: 1101 };
    

    大分辨率: 滚动列在大分辨率下

    小分辨率: 滚动列在小分辨率下

    多个不确定宽度列: 多个不确定宽度列