登录页定制

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

在系统设置中设置登录页

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

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

支持的设备类型

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

登录页标题和样式设置

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

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

启用外部用户后，登录页可以区分内部用户和外部用户，并显示对应描述。

通过自定义 CSS 设置登录页样式

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

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

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

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

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

安装登录页扩展

可以通过安装登录页扩展增加登录页风格。扩展安装后，会出现在登录页模板列表中。扩展安装方式见扩展安装，登录页扩展开发见登录页面扩展开发。

登录类型设置

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

用户登录模式设置

在安全登录设置中可以设置内部用户和外部用户的登录方式。常见方式包括账号密码登录、手机短信验证码登录和二维码登录。

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

移动端微信授权登录入口

在单点登录设置中配置微信单点登录后，移动端登录页可以显示微信授权登录入口。

直接在约定位置开发登录页

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

常见文件如下：

/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。

注意

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