# 竞品组件拆解

## 阅读方式

先看“本项目采用”，再对照“参考依据”。尺寸单位 px 表示像素；“14px / 400 / 21px”依次表示字号、字重、行高，400 为常规字重，600 为加粗。

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

截图支持结构与可见状态的观察，不能证明真实交互、对方 CSS 或完整提交过程。正式采用的规则以链接的公共规范为准。

## 组件目录

01. [字体与正文](#01-字体与正文)
02. [按钮](#02-按钮)
03. [输入框](#03-输入框)
04. [禁用与只读](#04-禁用与只读)
05. [单选下拉](#05-单选下拉)
06. [多选与复选](#06-多选与复选)
07. [日期与时间](#07-日期与时间)
08. [表单](#08-表单)
09. [上传](#09-上传)
10. [表格](#10-表格)
11. [分页](#11-分页)
12. [业务状态](#12-业务状态)
13. [页内标签](#13-页内标签)
14. [弹窗](#14-弹窗)
15. [详情抽屉](#15-详情抽屉)
16. [审核确认](#16-审核确认)
17. [树状报表](#17-树状报表)
18. [多语言配置](#18-多语言配置)

## 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，不压缩为灰色小字。

[查看公共规范](../source-html/index.html#spec-type)

### 参考依据

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

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

- [图 04 · 代理日报](originals/04-report-overview.png) · [来源页面](https://mcmcmc.axshare.com/基本页面-日报_4.html)
- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)

## 02 按钮

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-buttons)

### 参考依据

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

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

- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)
- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)

## 03 输入框

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-input)

### 参考依据

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

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

- [图 09 · 设备下拉展开](originals/09-select-expanded.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)
- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)

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

## 04 禁用与只读

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-states)

### 参考依据

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

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

- [图 01 · 会员标签编辑](originals/01-member-overview.png) · [来源页面](https://resycb.axshare.com/会员列表c.html)
- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)

## 05 单选下拉

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-select)

### 参考依据

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

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

- [图 09 · 设备下拉展开](originals/09-select-expanded.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)

## 06 多选与复选

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-checks)

### 参考依据

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

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

- [图 01 · 会员标签编辑](originals/01-member-overview.png) · [来源页面](https://resycb.axshare.com/会员列表c.html)

## 07 日期与时间

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-date)

### 参考依据

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

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

- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)
- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)

## 08 表单

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-form)

### 参考依据

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

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

- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)

## 09 上传

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-upload)

### 参考依据

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

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

- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)

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

## 10 表格

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-table)

### 参考依据

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

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

- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)
- [图 04 · 代理日报](originals/04-report-overview.png) · [来源页面](https://mcmcmc.axshare.com/基本页面-日报_4.html)

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

## 11 分页

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-pagination)

### 参考依据

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

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

- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)
- [图 02 · 活动列表](originals/02-activity-overview.png) · [来源页面](https://wt37gq.axshare.com/活动管理.html)

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

## 12 业务状态

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-tags)

### 参考依据

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

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

- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告.html)

## 13 页内标签

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-tabs)

### 参考依据

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

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

- [图 03 · 广告空列表](originals/03-advert-overview.png) · [来源页面](https://ztqpvr.axshare.com/广告管理.html)
- [图 02 · 活动列表](originals/02-activity-overview.png) · [来源页面](https://wt37gq.axshare.com/活动管理.html)

## 14 弹窗

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-dialog)

### 参考依据

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

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

- [图 07 · 姓名历史记录](originals/07-member-data.png) · [来源页面](https://resycb.axshare.com/会员列表a.html)
- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) · [来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)

## 15 详情抽屉

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-drawer)

### 参考依据

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

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


## 16 审核确认

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-confirm)

### 参考依据

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

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


## 17 树状报表

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-tree)

### 参考依据

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

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


## 18 多语言配置

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

### 本项目采用

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

[查看公共规范](../source-html/index.html#spec-tabs)

### 参考依据

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

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


## 业务页面原图

网页每张图可展开并放大，支持适应宽度和原尺寸查看；原图文件保持原比例，不拉伸、不裁切。

- [图 01 · 会员标签编辑](originals/01-member-overview.png) — 标签按组排列，浮层内提供复选与就近说明。 2880 × 1634 像素；[来源页面](https://resycb.axshare.com/会员列表c.html)。
- [图 02 · 活动列表](originals/02-activity-overview.png) — 有数据的活动列表，保留完整页尾分页。 2880 × 1620 像素；[来源页面](https://wt37gq.axshare.com/活动管理.html)。
- [图 03 · 广告空列表](originals/03-advert-overview.png) — 广告类型标签、筛选区与无匹配数据提示。 2880 × 1624 像素；[来源页面](https://ztqpvr.axshare.com/广告管理.html)。
- [图 04 · 代理日报](originals/04-report-overview.png) — 密集数字表、日期筛选与横向滚动。 2880 × 1644 像素；[来源页面](https://mcmcmc.axshare.com/基本页面-日报_4.html)。
- [图 05 · 会员空列表](originals/05-member-list.png) — 会员分组列、批量入口与空数据状态。 2880 × 1638 像素；[来源页面](https://resycb.axshare.com/会员列表.html)。
- [图 06 · 奖池配置](originals/06-activity-bottom.png) — 奖池配置的完整空列表画面。 2880 × 1620 像素；[来源页面](https://wt37gq.axshare.com/活动管理.html)。
- [图 07 · 姓名历史记录](originals/07-member-data.png) — 会员姓名历史记录弹窗，内容为无数据状态。 2880 × 1638 像素；[来源页面](https://resycb.axshare.com/会员列表a.html)。
- [图 08 · 广告编辑与校验](originals/08-advert-editor.png) — 标题、排序、图片缺失时的错误提示，以及有效期设置。 2880 × 1624 像素；[来源页面](https://ztqpvr.axshare.com/轮播图广告a.html)。
- [图 09 · 设备下拉展开](originals/09-select-expanded.png) — 轮播设备的六个选项，面板与筛选输入对齐。 2880 × 1614 像素；[来源页面](https://ztqpvr.axshare.com/轮播图广告.html)。
- [图 10 · 广告列表与分页](originals/10-pagination-disabled.png) — 第 1/4 页、上一页禁用、10 条/页，第五行呈浅蓝色。 2880 × 1626 像素；[来源页面](https://ztqpvr.axshare.com/轮播图广告.html)。

## 统一使用原则

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

## 业务场景分类

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

[下载完整业务场景分类清单](../业务场景分类清单.md)

## 来源与范围

- [会员截图集 A](https://resycb.axshare.com/#id=u80zov&p=会员列表c&g=1)
- [广告截图集 B](https://ztqpvr.axshare.com/#id=b0lf31&p=广告管理&g=1)
- [运营截图集 C](https://wt37gq.axshare.com/#g=1&id=8n50o5&p=活动管理)
- [报表截图集 D](https://mcmcmc.axshare.com/#id=kby5k4&p=基本页面-日报_4&g=1)

自有参考：会员管理框架√、多级代理报表√、功能内容区域√，以及用户提供的多语言配置参考。来源工程保持只读。

没有找到竞品公开命名为“设计系统 / 组件规范”的独立文档。本页为代表业务页面的观察与本项目采用规则，不代表对方官方规范。

A/B/C/D 目录合计 551 页，本次登记四站 8 个代表业务页的 10 张状态原图，并未逐页审核全部目录。

已移除 Axure 目录与工具栏；原业务页面侧栏、页眉、水印和既有标记保留。完整图片尺寸、来源与哈希见[图片来源清单](original-image-manifest.json)。

[完整学习记录](竞品组件学习记录.md) · [组件规范库](../source-html/index.html) · [业务场景展示集](../showcase/index.html)

组件库基于本地 Element UI 2.15.6，后续 2.x 升级应固定版本并回归验证。

### 自有参考文件

以下路径相对于 `本地来源/`，仅用于追溯来源：

- 会员管理框架√：`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`

多语言配置来自用户提供的参考图，不归入上述三份源码证据或本轮 10 张竞品原图。