---
url: /v6.2/global-css.md
---
# 全局 CSS 设置

衡石系统提供了全局 CSS 功能。通过自定义全局 CSS 可以更加精细化控制页面视觉效果，例如可以通过 `display:none` CSS 规则来隐藏不需要展示的功能。

![](/images/sys-mgt/global-css-001.png)

## 遇到需求时先判断是否该用 CSS

全局 CSS 最适合处理“页面看起来怎样”的问题，不适合处理“页面应该做什么”的问题。可以按下面方式快速判断：

|需求|是否推荐用全局 CSS|原因|常见案例|
|-|-|-|-|
|隐藏按钮、tab、卡片、说明文字|推荐|只影响展示层，不需要脚本逻辑。|隐藏“导出”按钮、隐藏“忘记密码”、隐藏首页某些卡片|
|调整颜色、字体、边框、间距、品牌风格|推荐|CSS 天然适合做视觉品牌化。|修改应用集市字体样式、统一主题视觉|
|根据路由或页面状态动态处理内容|不优先|这类需求通常需要监听事件或等待渲染，更适合全局 JS。|只在某个页面隐藏菜单项、登出后跳转|
|替换系统固定文案|不优先|有 i18n key 时应优先用全局 JS 中的 `customI18nPostProcessor`。|修改欢迎语、按钮文案|
|给 Data Agent 扩展能力|不适合|这不是视觉问题，应使用全局 JS 中的 `window.heisenberg.createTool()`。|接企业知识库、接内部 API|

## 使用场景

全局 CSS 可以控制页面外观，常用于以下场景。

### 场景1：控制页面视觉展示效果

使用全局 CSS 控制页面视觉展示效果。如通过全局 CSS 给菜单项增加边框，修改菜单字体和背景等。示例中修改了菜单的背景和文字。修改内容仅对应用创作模块生效，不会影响其他模块。

![](/images/sys-mgt/global-css-002.png)

### 场景2：隐藏页面展示内容

使用全局 CSS 隐藏页面展示内容，如通过 CSS 隐藏展示文字。示例中隐藏了首页上的部分文字。

![](/images/sys-mgt/global-css-003.png)

客服和客户侧最常见的定制都属于这一类，例如：

* 隐藏首页“行业案例”“教学帮助”等运营内容。
* 隐藏登录页“忘记密码”入口。
* 隐藏应用集市中的“导出”“去编辑”等特定菜单项。
* 隐藏弹窗里的用户组、组织架构 tab。

### 场景3：隐藏功能按钮

也可以通过 CSS 设置隐藏功能按钮。示例中隐藏应用创作菜单中的删除按钮，不会对其他模块的删除按钮进行隐藏。

![](/images/sys-mgt/global-css-004.png)

如果需求进一步细化为“只在某个页面隐藏”“只在某个弹窗出现后隐藏”，往往需要配合更精确的选择器；若还要判断页面路由或运行时状态，则应改用 [全局 JS](global-js.md)。

### 场景4：限制可见功能范围

除单个按钮外，全局 CSS 也常用于裁剪整组可见能力，例如：

* 只保留部分图表分类 tab，隐藏第 4 项之后的图表类型。
* 隐藏图表切换弹窗中的某几种图表。
* 隐藏编辑页面中的某些配置入口或 icon。

这种做法适合 OEM、轻量交付或特定角色场景，用于减少客户看到的功能面。

## 从失控的 CSS 代码中恢复

自定义 CSS 代码的能力非常强大，同时也有风险，如果您在自定义 CSS 代码时，由于代码错误或其它 CSS 方面的原因，很可能会导致系统无法正常访问。

为此我们提供了 URL 参数辅助从失控的 CSS 代码中恢复的能力，您可以访问 `https://{host}/setting/global-css?no-global-css=true` 来禁用 CSS 代码并访问配置页面，从而能够恢复系统的访问。