先看“本项目采用”,再点参考图对照。尺寸中的 px 表示像素;文字参数依次为字号 / 字重 / 行高,400 为常规字重,600 为加粗。

01

字体与正文

查看公共规范 →

数据保持深色正文,标题靠字重区分,说明与操作再降一级。

本项目采用

  • 统一系统中文字体:macOS 优先苹方(PingFang SC),Windows 通常微软雅黑(Microsoft YaHei);工程顺序为 "PingFang SC", "Microsoft YaHei", sans-serif。使用已有字体,不要求安装或下载字体;兼容回退不是另一套可选样式。
  • 正文使用 14px / 400 / 21px,表头使用 14px / 600 / 21px,均为 #303133。
  • 先以100%缩放核对实际字体、字重和字色,不整体缩小业务内容适配标注;跨系统字形及渲染差异分别验收。
  • 辅助说明使用 12px / 400 / 18px、#595959。
  • 规范正文与场景说明使用 14px / 400 / 24px,不压缩为灰色小字。

截图中看到的

列表采用白底深色数据;标题与表头较醒目,说明和禁用文字另作区分。

图 04 展示密集报表,图 10 展示普通列表。位图无法确认对方字体栈和实际字号。

主要动作、次要动作与行内文字操作分别表达层级。

本项目采用

  • 主按钮、次按钮与文字操作沿用公共按钮状态。
  • 危险操作入口使用 12px 红色文字,无框无底。
  • 删除、移除先打开统一确认弹窗,确认按钮文案为“确认”。

截图中看到的

查询、新增使用蓝色实心按钮;重置使用白底描边;编辑、停用等行操作使用文字。

图 10 可对照列表筛选工具与行操作,图 08 可对照表单底部动作。截图不能证明点击后的结果。

高度统一,宽度按用途分级,输入边框与占位文字分别规定。

本项目采用

  • 常规输入高度为 32px,圆角为 0px;既有业务筛选沿用已确认的 34px。
  • 普通筛选整项宽 280px;新增、编辑的内容列最大宽 400px。
  • 同组输入与下拉保持同高,更多宽度边界见输入框规范。

截图中看到的

白底细边框、浅色占位文字;同一行输入与下拉高度一致。

图 09 是筛选输入,图 08 是编辑输入。截图可对照边框、占位文字与排列方式;实际尺寸以本项目输入框规范为准。

历史画面估测

广告标题输入约 21–23px 高;编辑页宽输入约 380px。仅为旧版截图画面估测,不参与本项目验收。

04

禁用与只读

查看公共规范 →

禁用需要真正阻止操作;只读仍应清楚可读,并允许复制。

本项目采用

  • 禁用保留上下文并阻止执行,不能只改颜色而保留提交事件。
  • 只读内容仍允许阅读与复制。
  • 区分禁用、只读、未填写、空结果与错误。

截图中看到的

部分不可执行的行操作和标签选项呈浅灰色。

图 01 可对照标签复选,图 10 可对照行操作及上一页边界;是否真正阻断操作仍需在实现中验证。

输入态与展开态保持关联,选项状态和长列表边界需分别处理。

本项目采用

  • 下拉高度与同组输入保持一致。
  • 选项沿用公共状态,长列表在面板内滚动。
  • 是否提供搜索,由候选数量与识别成本决定。

截图中看到的

输入框尾部有箭头;展开面板与输入左侧对齐,选项纵向排列。

图 09 显示“全部、Web、全站APP/H5、代理APP、全站体育、代理H5”六个选项。

06

多选与复选

查看公共规范 →

选择状态要明确,批量操作必须说明作用范围。

本项目采用

  • 区分全选、半选、选中与禁用。
  • 明确批量操作的作用范围。
  • 禁用选项不计入当前可操作项。

截图中看到的

标签按组排列;内容较多时使用容器内滚动。

图 01 的会员标签编辑浮层提供分组选择参考;截图不证明全选或半选的完整逻辑。

07

日期与时间

查看公共规范 →

日期精度跟随业务,范围输入宽度包含两端值。

本项目采用

  • 日期与日期时间范围的边框宽为 400px,不包含字段标签。
  • 窄容器内允许缩小或换行。
  • 单日、周、月、年与范围按业务精度选用。

截图中看到的

查询区使用起止范围;列表中时间可以分行;配置区区分“永久有效”和指定时间。

图 08 可查看有效期配置,图 10 可查看列表时间。日历展开面板未在本轮截图中捕获。

标签、输入与错误说明形成稳定的一组,长表单保留清晰操作区。

本项目采用

  • 新增与编辑表单统一标签和输入起点。
  • 错误说明定位到对应字段,与错误边框配合。
  • 长表单可在弹窗内滚动,不因内容长就自动改用抽屉。

截图中看到的

标签右对齐,输入起点一致;必填标记、错误边框和下方说明配合出现。

图 08 展示标题、排序、图片缺失时的编辑表单错误态,以及底部取消、确定入口。

入口形式按素材用途选择,校验、上传过程与保存结果要分清。

本项目采用

  • 文件列表、图片卡片与拖拽区按用途选用。
  • 校验文件类型和大小,并区分待上传与已保存素材。
  • 本地读取或预览成功不等于上传成功。

截图中看到的

方形上传区包含添加图标,并有格式、大小说明与必填错误。

图 08 提供图片上传区和缺失错误参考;没有提供上传成功或失败过程截图。

历史画面估测

上传方框约 70px。仅为旧版截图画面估测,不作为本项目 CSS 尺寸。

先保证比较与阅读,再规定长内容和固定列的行为。

本项目采用

  • 数据使用 14px / 400,表头使用 14px / 600;对齐与列宽遵守公共表格规范。
  • 长内容按字段规则折行或省略,阅读全文保留浮层或真实详情承接;不缩小字号或任意撑宽列。
  • 启用行选择后,选中背景同步覆盖主体、固定列与操作列,多行高度也保持一致。

截图中看到的

表头浅灰、数据深色,行间有细分隔;不同内容行高不同,图 10 中第五行呈浅蓝色。

图 10 是普通广告列表,图 04 是密集数字报表。浅蓝色行的触发方式不能由静态截图确定。

历史画面估测

旧截图中单行约 40px、多行约 60px;仅为画面估测,不替代本项目表头约 46px、普通行最小 48px 的规范。

分页同时表达总量、当前位置和可前往的范围。

本项目采用

  • 业务列表沿用 34px 方形页码、100px 条数下拉。
  • 当前页使用蓝色边框,数字始终居中。
  • 空数据、首页和末页由数据产生,不作为三套可选样式。

截图中看到的

左侧显示条数和页次,右侧提供上一页、数字页、下一页和条数选择。

图 10 显示第 1/4 页、上一页禁用、10 条/页;图 02 提供完整活动列表页尾。

历史画面估测

页码按钮约 22px 方形。仅为旧版截图画面估测,不替代本项目 34px 规范。

用文字说明业务状态,不把状态标签、禁用操作和未读角标混用。

本项目采用

  • 业务状态使用明确文字,不额外添加装饰圆点。
  • 颜色辅助表达含义,不能独自承担状态说明。
  • 通知未读小红点和数字角标统一使用角标规范。

截图中看到的

行内“展示中”与普通数据有颜色区别,部分操作呈灰色。

图 10 可对照展示状态和行操作;“展示中”是业务状态,灰色操作是否可用需另行判断。

同一业务内切换内容类型,外观形式跟随空间和关系。

本项目采用

  • 默认采用页内标签。
  • 卡片式或侧置形式按空间与内容关系选用。
  • 切换时同步当前项、内容与焦点。

截图中看到的

广告类型、活动类型和日报类型通过内容区上方标签栏区分。

图 03 展示广告类型,图 02 展示活动类型。截图提供结构参考,不证明切换、保留条件等行为。

局部任务用弹窗承接,内容滚动与关闭行为保持明确。

本项目采用

  • 局部任务采用弹窗,长内容仅在内容区滚动。
  • 取消与关闭不提交。
  • 未保存内容处理与焦点返回按实际编辑状态定义。

截图中看到的

中央白色容器配遮罩、标题和关闭入口;编辑弹窗另有底部动作区。

图 07 为姓名历史记录空弹窗,图 08 为广告编辑弹窗。两图用途不同,不把空历史弹窗写成编辑流程。

沿用已确认的会员详情结构,不把该业务宽度推广到全部抽屉。

本项目采用

  • 会员详情桌面宽度为 37%,最小 720px;窄屏为 92vw。
  • 头部与内容区分开,内容独立滚动。
  • 其他业务抽屉按自身内容定义宽度。

自有参考依据

用户自有会员管理源码采用详情抽屉;本轮竞品截图未出现可确证的抽屉。

自有“会员管理框架√”源码记录 37% 宽、最小 720px、头部 68px 和独立内容滚动。

确认前说明对象与影响,取消和失败都应保留明确退路。

本项目采用

  • 确认内容明确对象、影响范围与动作。
  • 取消不执行,失败保留上下文。
  • 接口、并发与权限需要在真实业务中验收。

自有参考依据

用户自有审核源码包含详情、确认及驳回原因;本轮竞品截图不能证明完整提交链。

自有“功能内容区域√”提供 720px 详情、520px 确认和驳回原因、说明;这些是来源结构,不是所有确认框通用宽度。

树保持层级上下文,数据范围与导出范围分别说明。

本项目采用

  • 保留层级上下文和独立统计口径。
  • 收起树时释放内容空间,再展开恢复层级上下文。
  • 导出范围由业务明确。

自有参考依据

用户自有报表提供代理树、直属与全部范围切换,以及收起恢复。

自有“多级代理报表√”采用 el-tree、直属/全部/团队汇总和统一左对齐;本轮没有对应竞品图。

18

多语言配置

查看公共规范 →

语言共用布局,各自维护名称和素材,校验随当前语言切换。

本项目采用

  • 已确认场景采用侧置标签。
  • 各语言的名称和素材独立维护。
  • 校验与预览跟随当前语言。

自有参考依据

用户提供的参考图左侧为语言列表,右侧维护当前语言的名称与素材。

参考包含简体中文、英语、越南语和韩语四项;不属于本轮登记的 10 张竞品原图。

业务页面原图

展开图片后可放大查看;选择“原尺寸”阅读图内文字。

统一使用原则

  1. 正文保持清晰可读;数据量增加时,不靠缩小字号解决空间问题。
  2. 同组输入、下拉与时间控件保持同高,标签和输入起点一致。
  3. 列表用于比较数据;详情与编辑用适当容器承接,长内容保留独立滚动和稳定操作区。
  4. 分页同时定义总数、位置、边界、每页条数,以及查询变化后的行为。
  5. 禁用、只读、未填写、空结果和错误分别定义,不混用文案与操作能力。
  6. 将组件放进真实任务链检查;一个默认态截图不能证明完整交互。

业务场景分类

  • 列表查询与处理
  • 详情查看与关联信息
  • 新增与初始化
  • 编辑与配置
  • 审核与审批
  • 删除、停用与恢复
  • 报表与层级分析
  • 运营发布与内容管理

下载完整业务场景分类清单

来源与范围

四份 Axure 截图库的 8 个代表业务页、10 张状态原图,加上用户自有参考;551 个目录页未逐页审核。

截图支持结构和可见状态的观察,无法证明真实交互或对方 CSS。抽屉、审核、树状报表及多语言配置另有自有参考,已在各条目中注明。未找到竞品公开的独立组件规范,正式采用规则以本项目公共规范为准。

原业务页面侧栏、页眉、水印和既有标记保留,图片未拉伸、裁切或重绘。图片来源清单 · 完整学习记录

自有参考文件

以下路径相对于 本地来源/,仅用于追溯来源:

  • 会员管理框架√
    2026-08-27/hui/outputs/member-management/dist/index.html
  • 多级代理报表√
    2026-09-09/html/outputs/promotion-report-tree.html
  • 功能内容区域√
    2026-08-24/ji-y/outputs/element-ui-component-workbench/dist/index.html

多语言配置另来自用户提供的参考图。

业务原图

打开原图来源页面