---
navTitle: 登录页定制
---
# 登录页定制

<!--
维护说明：登录页运行路径来自 bi/com.succez.bi/src/main/java/com/succez/security/ActionLogin.java
和 bi/com.succez.bi/src/main/java/com/succez/metadata/utils/MetaConst.java。
如登录页生成产物或兼容文件名调整，需要同步核对本页的 /sysdata/public/login/ 文件清单。
-->

SuccApp 支持通过系统设置选择登录页模板，也支持在约定元数据目录中维护登录页模板、样式和脚本，以满足不同项目的登录页品牌和登录方式要求。

## 在系统设置中设置登录页{#syssettings}

在**系统设置** > **基本** > **登录页**中可以自定义系统登录页，内置了多种登录模板：

![登录页](./images/loginPage.gif)

1. 点击模板查看预览效果。
2. 选择模板后保存，系统登录页会即时更新。
3. 每个模板都可以重新定义标题和样式，见[登录页标题和样式设置](#props-settings)。
4. 系统支持 PC、手机和平板登录页样式，见[支持的设备类型](#device-types)。
5. 需要做局部细节调整时，可以使用[自定义 CSS](#custom-css)。

## 支持的设备类型{#device-types}

登录页支持 PC、手机和平板。登录模板会按设备类型适配布局；如果移动端没有单独设置属性，会继承 PC 端设置。

## 登录页标题和样式设置{#props-settings}

选中模板后，可以在右侧设置模板属性。不同模板可设置的属性可能不同，常见属性包括：

| 分组 | 常见属性 | 说明 |
| --- | --- | --- |
| 风格 | 主题色、按钮样式、按钮颜色、按钮阴影 | 调整按钮、勾选框、输入框聚焦等视觉样式。 |
| Logo | Logo、Logo 字体 | 设置登录页 Logo 的文字、图标和字体样式。 |
| 背景 | 背景 | 设置登录页背景图片。 |
| 文字 | 按钮名称、登录框标题、浏览器标题、版权描述、内部用户描述、外部用户描述 | 调整登录页上的展示文案。 |

启用[外部用户](../../../permission/users.md#external-users)后，登录页可以区分内部用户和外部用户，并显示对应描述。

## 通过自定义 CSS 设置登录页样式{#custom-css}

当模板配置无法覆盖某些细节时，可以在登录页设置中编写自定义 CSS。自定义内容支持 Less 语法。

```css
/* 登录框标题字体 */
.login-title {
    font-size: 24px;
}

/* 登录按钮高度 */
.login-btn {
    height: 50px;
}

/* 手机端样式 */
@media screen and (min-width: 0px) and (max-width: 480px) {
    .login-btn {
        height: 60px;
    }
}
```

调试样式时，可以在浏览器开发者工具中查看元素类名，再回到登录页设置中调整样式。

## 安装登录页扩展{#install-extension}

可以通过安装登录页扩展增加登录页风格。扩展安装后，会出现在登录页模板列表中。扩展安装方式见[扩展安装](../../../devops/extension-manage/README.md)，登录页扩展开发见[登录页面扩展开发](../../extension/extension-points/loginPage.md#index-html)。

## 登录类型设置{#logintypes-settings}

登录页展示哪些登录方式，主要由系统安全设置和单点登录设置决定。

## 用户登录模式设置{#login-modes}

在[安全登录设置](../../../sys-settings/security/README.md)中可以设置内部用户和外部用户的登录方式。常见方式包括账号密码登录、手机短信验证码登录和二维码登录。

启用外部用户后，登录页会显示内部用户和外部用户入口，并可以通过[登录页标题和样式设置](#props-settings)调整入口描述。

## 移动端微信授权登录入口{#mobile-login-modes}

在[单点登录设置](../../../sys-settings/security/sso.md)中配置微信单点登录后，移动端登录页可以显示微信授权登录入口。

## 直接在约定位置开发登录页{#development-extension}

登录页保存后，系统会在 `/sysdata/public/login/` 下生成登录页相关文件。运行时访问 `/login` 时，系统会优先读取这里的自定义登录页；不存在时回退到系统默认登录页。

常见文件如下：

```text
/sysdata/public/login/
├── customImages/      # 用户上传的图片
├── images/            # 模板自带图片
├── custom.less        # 用户在设置界面编写的自定义样式
├── custom.ts          # 用户在设置界面编写的自定义脚本
├── login.css          # 模板样式运行态产物
├── login.ftl          # 当前登录页模板
└── login.json         # 登录页设置数据
```

运行时还兼容历史文件名，例如 `login-pad.ftl`、`login-phone.ftl` 和 `login.html`。新定制优先维护 `login.ftl`。

::: warning 注意
直接修改 `/sysdata/public/login/` 下的模板文件后，不要再随意在登录页设置界面保存模板配置，否则设置界面可能重新生成文件并覆盖手工修改。
:::