应通过JavaScript动态渲染“影响以下服务”列表，依据后端返回的生效服务标识、前端服务映射表、用户权限及作用域依赖关系实时生成带data-scope属性的项，避免硬编码与静态HTML。
HTML里怎么让“影响以下服务”列表动态显示生效范围
浏览器不认隐私设置生效范围这种业务概念，HTML本身没有隐私作用域声明机制。所谓“影响以下服务”列表，本质是前端根据用户当前配置、后端返回的策略数据、以及各服务的接入状态，拼出来的静态或条件渲染内容。
为什么直接写死<ul></ul>列表会出问题
常见错误是把服务名硬编码进HTML，比如写死<li>搜索</li>
<li>地图</li>。一旦某服务下线、灰度中、或用户未开通，页面就展示错误信息，甚至触发权限校验失败。
- 后端返回的
affected_services数组为空时，前端没做兜底，列表仍显示全部服务 - 服务名用中文硬编码，但接口返回的是英文标识（如
"maps"），比对失效 - 没考虑多语言场景，
innerHTML直插文本导致翻译丢失 - 用
display: none隐藏条目而非移除DOM，辅助工具仍可读取，不符合隐私文案严谨性
推荐做法：用JavaScript驱动列表渲染 + 明确作用域标记
核心逻辑是：拿到后端返回的生效服务标识列表（如["search", "ads", "analytics"]），查表映射成带描述的项，并绑定作用域上下文。
- 服务映射表定义在JS里，和文案、图标、跳转路径一起管理，例如：
serviceMap = { search: { label: "网页搜索", scope: "query" } } - 渲染前过滤掉用户无权查看的服务（依据
user.permissions或featureFlags） - 每项
<li>加上data-scope属性，如<li data-scope="search">网页搜索</li>，方便后续做细粒度控制或埋点 - 避免用
innerHTML +=拼接，改用document.createElement或template.innerHTML，防止XSS
const scopeList = document.querySelector('.privacy-scope-list');
const affected = response.affected_services || [];
affected.forEach(id => {
const svc = serviceMap[id];
if (!svc || !userCanSee(svc)) return;
const li = document.createElement('li');
li.dataset.scope = id;
li.textContent = svc.label;
scopeList.appendChild(li);
});
容易被忽略的边界：作用域嵌套和继承关系
“生效范围”不是扁平列表，比如开启“个性化推荐”可能同时影响search、news、video三个服务，但用户只看到一级开关。这时候列表不能只展平显示，得体现层级。
立即学习“前端免费学习笔记（深入）”；
- 后端需返回作用域树结构（如
{ "recommendation": { affects: ["search", "news"] } }），前端据此生成分组标题 - 不要把
data-scope设为"recommendation"就完事——它实际影响的是子服务，真正生效的是叶子节点 - 如果用户关闭了
search但保留recommendation，列表里search必须消失，否则造成认知冲突
复杂点在于，作用域不是静态配置，而是运行时计算结果。每次用户修改主开关，都要重新跑一遍依赖图遍历，再刷新列表。漏掉这步，UI和真实策略就脱节了。
