最近实践：移动端还没准备好，如何只对外展示 PC 端页面？
一、场景背景
在实际项目里，经常会遇到这样一种情况：
- 页面或看板已经完成了 PC 端搭建
- 但移动端布局、交互或展示效果还没有完全准备好
- 客户又希望尽快上线使用
这时候，一个常见诉求就是：
先只让用户看 PC 端，不希望在页面头部看到“桌面端 / 移动端”的切换入口。
本文分享一个适合 Guandata BI 的轻量做法：通过前端插件隐藏页面头部中的桌面端 / 移动端切换入口，从而在移动端未完成时，先交付一个更稳定的 PC 端访问体验。
二、适用场景
这篇实践适合以下情况：
- 仪表板或页面已经可以正常在 PC 端使用
- 移动端只是暂未完成，不是永久不支持
- 希望先隐藏页面头部中的桌面端 / 移动端切换入口
- 不想改源码，希望通过前端插件快速控制
如果你的目标是：
- 永久关闭某类功能入口
- 按不同页面、不同链接做差异化控制
- 给访问者和所有者分发不同入口链接
这篇方案同样可以作为一个可复用的基础做法。
三、先说结论
这个需求可以通过 前端插件 + OpenSDK 的样式注入能力 来实现。
核心思路不是直接隐藏整个页面头部，而是只隐藏页面标题后面的布局切换控件。
实际可落地的方式有两种：
方案 1：全局隐藏
适合：
- 当前环境里所有相关页面都不希望展示切换入口
- 只要命中该页面头部结构，就统一隐藏
方案 2：参数控制隐藏
适合：
- 所有者自己仍然希望保留正常入口
- 访问者通过特殊链接访问时才隐藏
- 希望通过一个
PS 参数区分“普通链接”和“对外链接”
如果是对客户、对访问者开放，更推荐方案 2。
四、插件从哪里新建
在 Guandata BI 中，可以通过下面的入口新建前端插件：
- 进入
管理中心
- 选择
开放平台
- 打开
插件管理
- 点击右上角
新建插件
入口截图如下：
五、为什么不直接用 page_operation_layout_switch
很多同学第一反应会去查“前端元素隐藏”的 key，然后使用： customHiddenKeys: 'page_operation_layout_switch'
但在实际验证中，这种方式在部分版本里可能会出现一个问题：
想隐藏的虽然只是切换入口，但实际效果可能会把整块页面头部一起影响掉。
原因在于：
- 文档里的元素 key 是能力定义
- 真实前端渲染时，这个切换入口可能和标题栏共用更大的容器
- 直接按 key 隐藏时，粒度不一定足够细
所以在这个场景里，更稳妥的方式是：
直接对目标控件注入样式，只隐藏切换控件本身，不动页面标题和头部整体。
六、页面头部中的目标元素
当前验证页面中，桌面端 / 移动端切换入口位于页面头部标题区域，结构可以概括为： #pageHeader_header .gd-color-title > [role="radiogroup"].ant-segmented
这个选择器对应的就是页面标题后面的布局切换控件。
隐藏它后：
- 页面标题仍然保留
- 页面头部仍然保留
- 只是不再显示桌面端 / 移动端切换入口
七、方案 1：全局隐藏插件
如果你希望在当前环境中统一隐藏这类切换入口，可以使用下面这段前端插件代码。
(() => {
const TITLE = 'hide-layout-switch-global';
const CSS = '#pageHeader_header .gd-color-title > [role="radiogroup"].ant-segmented { display: none !important; }';
const apply = () => {
if (!window.GD || typeof window.GD.dispatch !== 'function') return;
window.GD.dispatch('style', { title: TITLE, content: CSS });
console.log(`[${TITLE}] style applied`);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', apply, { once: true });
} else {
apply();
}
window.addEventListener('load', apply);
window.addEventListener('hashchange', apply);
window.addEventListener('popstate', apply);
document.addEventListener('visibilitychange', () => {
if (!document.hidden) apply();
});
setTimeout(apply, 300);
setTimeout(apply, 1000);
setTimeout(apply, 3000);
})();
使用说明
- 启用插件后，页面头部中的桌面端 / 移动端切换入口会被统一隐藏
- 更适合测试环境、演示环境，或者确实希望统一关闭切换入口的场景
注意事项
如果你同时还配置了“参数控制版”插件，那么：
- 全局版一旦启用，会覆盖参数版的差异化效果
- 因此建议二选一使用，或者默认关闭全局版，只在需要时手动启用
八、方案 2：参数控制隐藏插件
如果你希望：
- 所有者自己访问时仍然保留正常页面
- 对客户或访问者发一个“隐藏版链接”
那么推荐使用下面这种做法。
核心逻辑是：
下面是一份可直接使用的插件示例：
(() => {
const TITLE = 'hide-layout-switch-only';
const TARGET_PAGE_IDS = new Set(['tea717cf568d5412783e8584']);
const ACTIVE_PS = '20260731';
const TARGET_SELECTOR = '#pageHeader_header .gd-color-title > [role="radiogroup"].ant-segmented';
const HIDE_CSS = `${TARGET_SELECTOR} { display: none !important; }`;
const SHOW_CSS = `${TARGET_SELECTOR} { display: inline-flex !important; }`;
const getPageId = () => {
const match = window.location.pathname.match(/\/page\/([^/?#]+)/);
return match ? match[1] : '';
};
const getPsValue = () => new URLSearchParams(window.location.search).get('PS') || '';
const apply = () => {
if (!window.GD || typeof window.GD.dispatch !== 'function') return;
const pageId = getPageId();
const ps = getPsValue();
const shouldHide = TARGET_PAGE_IDS.has(pageId) && ps === ACTIVE_PS;
window.GD.dispatch('style', {
title: TITLE,
content: shouldHide ? HIDE_CSS : SHOW_CSS,
});
console.log(`[${TITLE}] page=${pageId} ps=${ps} hidden=${shouldHide}`);
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', apply, { once: true });
} else {
apply();
}
window.addEventListener('load', apply);
window.addEventListener('hashchange', apply);
window.addEventListener('popstate', apply);
document.addEventListener('visibilitychange', () => {
if (!document.hidden) apply();
});
setTimeout(apply, 300);
setTimeout(apply, 1000);
setTimeout(apply, 3000);
})();
使用说明
假设目标页面链接是： https://xxx/page/tea717cf568d5412783e8584?pageRenderType=view
那么你可以这样分发：
- 所有者或内部同事：使用普通链接
- 对外访问者：使用带参数的链接
例如：
普通链接： https://xxx/page/tea717cf568d5412783e8584?pageRenderType=view
隐藏版链接： https://xxx/page/tea717cf568d5412783e8584?pageRenderType=view&PS=20260731
参数控制后的最终效果示意如下：
这种方式的优点
- 不改源码
- 不影响所有者正常访问
- 只需要给访问者发一条特殊链接即可
- 控制粒度更细，适合“先对外展示 PC 端”的项目场景
这种方式的限制
需要注意，这种做法只是：
按链接参数控制隐藏
它并不能自动识别：
所以如果你需要更严格的权限分流，建议仍然结合分享入口、账号权限或业务侧链接分发策略一起使用。
九、推荐落地方式
结合实际项目经验，建议这样使用：
如果只是临时给客户演示
优先用 参数控制版
原因是：
- 内部同事仍然可以正常查看完整页面
- 对外只需要发隐藏版链接
- 后续移动端做完后，也只需要停用插件或停止分发特殊链接即可
如果当前阶段确定全局都不想展示
可以临时启用 全局版
但建议配合明确的环境说明，例如：
- 只在测试环境启用
- 只在当前演示期启用
- 后续移动端完成后及时关闭
十、实践中的注意事项
1. 不建议直接隐藏整块头部
如果你的目标只是隐藏布局切换入口，就尽量只对控件本身做样式控制，不要直接影响整个 pageHeader。
2. 页面结构变更后需要复核选择器
当前方案依赖的是头部结构选择器。如果产品版本升级后页面头部结构调整，建议重新检查选择器是否仍然有效。
3. 全局版与参数版不要长期同时开启
因为全局版会把所有页面都一并隐藏，容易覆盖参数版“普通链接显示、特殊链接隐藏”的差异化效果。 | 
