# 四份后台截图资料：组件设计学习记录

## 阅读范围与结论

本次实际打开了用户提供的四份 Axure 资料，并点击会员列表及子页、广告编辑子页，滚动活动管理长页面查看尾部。四份目录分别显示玩球运营后台 A（111 页）、B（84 页）、C（86 页）、D（270 页），合计 551 页；本次为代表场景抽样，不是逐页审核 551 页。

四份可读取目录中未发现名称包含“组件、规范、设计系统、字体、字重、颜色”的独立规范入口。会员列表 A 的 Documentation 面板显示 “No notes for this page”。所抽样的业务画面由图片构成，不能读取其中真实控件的 CSS，也不能验证截图里的按钮行为。因此：**目前没有找到对方公开的独立组件规范；可以根据跨页面一致性整理“观察到的设计模式”，不可冒称内部规范或准确设计 token。**

## 已查看的步骤与证据

| 步骤 | 页面与来源 | 可观察内容 | 判断与边界 |
| --- | --- | --- | --- |
| 01 | [会员列表 C](https://resycb.axshare.com/#id=u80zov&p=会员列表c&g=1) | 标签编辑浮层、多列复选、说明提示 | 结构清楚；选项密集，键盘与焦点不可从截图验证 |
| 02 | [活动管理](https://wt37gq.axshare.com/#g=1&id=8n50o5&p=活动管理) | 数据列表、页内标签、日期区间、多种状态截图 | 视觉统一；长页面由多张截图串联，不代表真实页面需要如此长 |
| 03 | [广告管理](https://ztqpvr.axshare.com/#id=b0lf31&p=广告管理&g=1) | 空列表、表头、类型标签、查询动作 | 空态说明存在，但字色较浅，不直接照搬 |
| 04 | [基本页面-日报 4](https://mcmcmc.axshare.com/#id=kby5k4&p=基本页面-日报_4&g=1) | 高密度数字、多维过滤、日期快捷项、横向滚动 | 便于密集比较；不据截图认定数字居中比右对齐更优 |
| 05 | 会员列表 | 分组字段、批量操作、无数据 | 展示字段分组及空态的相同框架 |
| 06 | 活动管理·奖池配置 | 奖池配置的空列表 | 来自该Axure页的第五张独立业务图 |
| 07 | 会员列表 A | 姓名历史记录弹窗 | 小弹窗适合局部记录，主任务上下文保持 |
| 08 | 轮播图广告 A | 错误边框、就近错误文案、上传、有效期单选、底部确认 | 能观察到完整组件状态组合；实际业务表单规则不作为本库通用规则 |

![01 会员标签编辑浮层](originals/01-member-overview.png)
![02 活动数据列表](originals/02-activity-overview.png)
![03 广告空列表](originals/03-advert-overview.png)
![04 密集日报](originals/04-report-overview.png)
![05 会员空列表](originals/05-member-list.png)
![06 奖池配置空态](originals/06-activity-bottom.png)
![07 历史记录弹窗](originals/07-member-data.png)
![08 广告编辑错误态](originals/08-advert-editor.png)

## 可转化为我们规范的设计模式

1. **文字优先**：白色内容面承载深色正文，主值不因为行内并列而变浅；辅助、占位、禁用保持独立角色。采用我们已定义的 #303133 正文与标题、#595959 辅助，不将截图像素冒称竞品源码值。
2. **状态需要放在任务里看**：复选框在标签集合中体现半选与批量范围；错误提示在输入位置出现；空态在真实列表容器里呈现。
3. **层级由动作职责决定**：主要动作使用实心按钮；次级动作和行操作使用轻量样式；蓝色链接与深色普通文字区分，危险动作独立表达。
4. **完整字段的可读性**：日期范围可分行展示；长编号有完整内容承接；不通过缩字解决容器问题。
5. **高密度有秩序**：表头较强，行线很轻，行高稳定；数据在列内使用一致对齐和格式，数量较多也能扫描。
6. **容器与上下文**：页内标签、抽屉和弹窗承接不同规模内容；弹层标题、内容、底部动作边界清楚。
7. **图文组件需要真实场景**：广告素材需要尺寸、设备、周期与预览；不能只展示一个孤立上传框。
8. **状态链比单张正常态更有说服力**：查询→无结果→重置、编辑→错误→修正→保存、审核→确认→列表更新，应能在我们的样例里连续体验。

## 不直接照搬的部分

- 截图中的业务数据、账户、联系方式、网址、水印和红框不进入我们的演示数据。
- 极浅空态字色、密集多列复选与全表居中需要改进，不因是竞品就认定为标准。
- 侧边导航、页眉不是原组件规范的新增强制项。新的业务场景展示集使用独立演示导航，用于汇报时切换场景。
- 不能从截图确认 Element UI 版本、精确字体栈、字号、颜色值、接口、权限、安全性或无障碍完整性。

## 两层交付

- [组件规范库](../source-html/index.html)：给设计与开发查看单个组件规则、状态及 Markdown 文档。
- [业务场景展示集](../showcase/index.html)：给汇报与评审查看这些组件组合后的实际页面；均衡覆盖会员、资金、运营与报表，使用合成演示数据。

## 2026-09-16 图片复核更正

此前浏览器截屏混入Axure目录与工具栏。本轮替换为四站8个代表业务页的10张PNG原图，保留完整画面与原比例。第06张实际是奖池配置空态，第07张是姓名历史空记录弹窗；以[图片来源清单](original-image-manifest.json)与[当前拆解记录](竞品组件反推规范.md)为准，不将旧文件名当作画面状态。

## 2026-09-16 拆解阅读版整理

[竞品组件拆解](竞品组件反推规范.html)按组件目录和单列正文阅读，每项先给出本项目采用规则，再提供观察依据和对应原图。18项摘要、规则及参考图片与[下载文档](竞品组件反推规范.md)、网页复制内容同源。

旧画面像素估测收进历史依据，不作为当前规范尺寸；静态截图中的浅蓝行只描述可见效果，不认定其触发方式。抽屉、审核、树状报表和多语言明确标为自有参考。图片查看支持原尺寸和适应宽度，10张原图字节未改变。

本轮完成内容、文件与交互逻辑检查；本地页面的浏览器访问仍受现有工具策略限制，未将这些检查记录为实屏视觉验收。