## 任务目标
任务:Vue 跨组件样式污染与弹层遮挡定位。基于所提供工程和业务证据完成检查,先读取可访问的工程与证据,可以推进的部分继续完成;仅对查证后仍影响结论的关键缺口提问;不要编造文件、日志、测量结果或已完成的操作。
以核查和评审为主,给出有证据的判断及可复核的修改建议;本次用户另有明确实现要求时,按其授权范围执行。
## 输入信息(选填)
两项均可留空,也可直接用一句话说明目标并附上已有资料。无需自行整理版本、配置或完整需求表;能读取的内容由执行者补齐。
样式异常:
页面或样式资料:
## 信息不完整时
先使用本次对话中已经说明的信息;用户留空、写“暂无/不清楚”或未替换输入标记,都按缺失处理,不当作真实路径、参数或业务值。已能从资料确定的内容不重复询问,不编造文件、日志、接口、业务值或执行结果。在用户已授权的范围内读取相关工程和材料,不为补齐输入擅自扩大操作范围。
### 优先确认
- 确定最短复现路径,比较直接进入、路由切换、返回后的异常元素。
- 从计算样式反查胜出规则、加载顺序、继承、scoped 转换及深度选择器。
- 检查弹层挂载点、overflow 裁切和层叠上下文,区分层级问题与父级裁切。
### 可采用的默认处理
- 默认定位根因并给最小修改片段,不直接批量改 CSS;明确要求修复时才落地对应局部变更。
- 保留既有缩进、颜色语法和适配策略,优先收紧作用域或使用公开主题能力,不先堆叠 !important 和 z-index。
- 没有浏览器计算样式时把静态选择器冲突列为候选原因,不凭截图断定命中规则。
### 必须有依据的事项
- 多个样式行为都可能符合现有实现,但业务要求的弹层优先级或交互可达区域彼此冲突,不能自行选定新的交互规则。
只有缺口会改变业务结果、权限边界或关键实现,且无法从现有资料确认时,才集中提出最多 3 个关键问题;说明影响,并继续完成不依赖答案的部分。一般命名、排版和可逆实现细节按现有约定决定,不逐项等待确认。
### 资料仍不足时的交付
- 仅有源码时交付可疑选择器、层叠上下文和裁切点清单,附逐项浏览器取证步骤。
- 仅有截图时描述可见缺陷、可能的布局约束和同元素回归条件,不伪造样式来源。
## 执行要求
检查 Vue 页面及组件样式,保留项目既有的缩进、现代颜色语法和浏览器适配策略。文末 FEX 资料为未定稿草案,核验提交来自 2018 年;使用其中建议时须核对当前 Vue、组件库和浏览器的实际行为。
重点检查选择器复杂度、缩写属性覆盖、!important 和视觉层级管理。以当前项目的样式生效结果确定修改方式,不机械沿用旧示例。
1. 先复现一条最短路径,记录初次进入、切换路由、再次返回的差异,标出发生异常的元素和业务影响;截图只能说明外观,不能据此猜定是哪条选择器生效。
2. 从浏览器计算样式反查命中的规则、来源文件、加载顺序、继承关系及被覆盖值,区分组件库默认样式、全局样式、scoped转换和行内样式,保留可定位的证据。
3. 检查过宽选择器、相同类名、深度选择器及第三方内部类覆盖,找出影响范围超出业务组件的声明;缩写属性要核对是否顺带重置了原本只想保留的方向或字体设置。
4. 对弹窗、下拉和提示层单独分析实际挂载位置与层叠上下文,区分被父容器裁切和层级较低;不要在未确认原因前反复增大z-index或叠加!important。
5. 提出一处根因对应一项最小修改,例如收紧作用范围、取消重复覆盖、使用组件公开主题能力或调整挂载位置;涉及组件库内部结构时注明升级维护成本。
6. 复核直接访问和路由来回切换,覆盖多个同类组件、弹层叠加、长中文、滚动及目标窄屏;记录修改前后同一元素的生效规则,验证相邻页面没有被连带改变。
## 交付与验收
输出:给出复现路径、样式来源表、根因与证据、最小修改片段及受影响页面回归表。样式来源表包含元素、属性、最终值、胜出规则、来源位置与覆盖原因;不得将视觉截图通过等同于业务交互通过。
### 本条完成检查
- 输出元素、属性、最终值、胜出规则、来源和覆盖原因,根因与建议一一对应。
- 复核同元素的前后规则、直接访问及路由往返,覆盖相邻页面和多弹层叠加。
- 分别记录视觉与点击、焦点、滚动验收,不能以截图正常替代交互通过。
按本条要求组织结果,使用简洁中文和一致的编号、术语、缩进及空行;已有项目格式优先。只说明实际完成的内容,将采用的假设、未完成项和缺少的条件写在相关位置,不额外生成无关文档。未执行、无法复现或缺少证据的检查如实标注,不宣称已通过或已有性能收益。
## 参考资料与适用边界
来源核验日期:2026-09-08。
- 百度 FEX《CSS 编码规范(公开草案)》:https://github.com/fex-team/styleguide/blob/b1bc701d1c92220d0eb90e88ed4ccdc3d5c979dc/css.md
验证说明:已核对上述公开来源及具体规则或能力;本模板尚未通过模型对比实验或线上业务实测,不能以来源品牌、仓库热度或扫描分数代替验收。
来源许可说明:CC-BY-4.0(仓库 LICENSE.txt)。本条为中文原创整理,来源内容与本模板补充要求已在正文区分。