样式配置

通过样式配置，您可以自定义应用所有认证页面（登录页、注册页、忘记密码页、重置密码成功页）的视觉风格和文案。配置分为两部分：

• 整体样式：统一设置背景、主题色、语言切换器等全局样式，影响所有认证页面。

• 页面级配置：分别为登录页、注册页、忘记密码页、重置密码成功页设置标题、描述等文案，并可管理第三方登录和协议的快捷入口。

路径：控制台 → 进入具体应用 → 顶部导航「配置」→ 「品牌化」→ 「全局登录」→ 选择「样式配置」

 

1. 整体样式

整体样式配置将统一应用于所有认证页面（登录页、注册页、忘记密码页、重置密码成功页），确保品牌形象的一致性。

1.1 页面布局

• 左侧预览区：实时展示当前配置下的页面效果（默认显示登录页）。

• 右侧配置区：包含三个模块——自定义背景、自定义颜色、切换语言。

1.2 自定义背景

您可以选择纯色背景或上传图片背景，两种方式互斥（选择图片时纯色设置无效）。

纯色背景

• 控件：颜色选择器

• 默认值：#F7F7F7（浅灰色）

• 操作：点击颜色选择器选取颜色，或直接输入十六进制色值（如 #FFFFFF）。修改后预览区背景立即变化。

图片背景

• 上传区域：支持点击添加或拖拽文件。

• 文件要求：

  • 格式：JPG、JPEG、PNG、WebP

  • 大小：最大 2MB

  • 建议尺寸：16:9（以保证最佳显示效果）

• 交互规则：

  • 上传成功后，预览区背景立即显示该图片，并覆盖纯色背景设置。

  • 图片默认采用 “居中铺满，保持比例裁剪” 的展示方式，确保页面适配。

  • 上传成功后，图片下方会显示 “删除” 和 “重传” 按钮：

    • 删除：点击后二次确认，移除图片背景，自动切换回纯色背景（纯色值保持上一次保存的值）。

    • 重传：重新选择新图片替换当前图片。

1.3 自定义颜色

您可以自定义三个关键颜色元素，修改后预览区对应元素实时变化。

• 每个颜色项均提供颜色选择器，支持点击选取或输入十六进制色值。

• 主按钮背景色与整体页面标签颜色的联动由系统自动处理，无需额外配置。

1.4 切换语言

控制认证页面底部是否显示语言切换器（如“简体中文 / English”）。

• 默认语言定义：应用的默认语言由您在 RootAuth 个人中心设置的语言决定。

• 关闭切换语言开关后，无论用户浏览器语言如何，所有认证页面均使用此默认语言。

1.5 保存与生效

• 所有整体样式修改后，需点击页面底部的 “保存” 按钮才会正式生效。

• 保存成功后，配置会同步更新到应用的线上环境，同时体验页面也会同步刷新。

 

2. 注册登录页配置

在样式配置中，通过上方的 “注册登录” 选项卡，可分别设置 登录页 和 注册页 的配置。切换子页面时，右侧配置区会对应变化。

2.1 认证提供方（全局配置）

该区域展示当前应用已启用的第三方登录方式（如 Google），并提供快捷管理入口。

• 已启用：显示已启用的提供方名称（如“Google”）。若未启用任何提供方，则显示“暂无启用的第三方登录”。

• 管理/去配置按钮：点击后跳转至 “认证配置 → 提供方” 页面，您可以在那里启用、关闭或配置第三方登录（如 Google OAuth）。配置完成后返回本页面，状态会自动刷新。

此区域不受子页面（登录页/注册页）和语言切换影响，始终显示全局状态。

 

2.2 注册登录协议（页面级配置）

• 状态展示：

  • 若已在 “功能配置” 中创建了任意一个页面类型和语言的协议，则显示 “已启用” 及 “管理” 按钮。

  • 若完全未配置，则显示 “暂无配置协议” 及 “去配置” 按钮。

• 点击按钮：跳转至 “功能配置” 页面，并自动定位到对应页面类型和语言的协议列表，方便您新建或编辑协议。返回后状态自动刷新。

 

2.3 主页链接

为登录页和注册页设置返回官网的快捷入口，包括左上角“返回主页”文字链接和页面顶部 Logo 点击跳转。

• 输入框：填写完整的 URL（需以 http:// 或 https:// 开头）。留空则不显示任何返回入口。

• 语言独立：切换语言时，输入框的值会切换为对应语言已保存的 URL，支持为不同语言设置不同官网地址。

• 实时预览：

  • 输入有效 URL 后，左侧预览区左上角立即显示“返回主页”文字，Logo 变为可点击（鼠标悬停显示手型）。

  • 输入为空时，预览区隐藏文字链接，Logo 恢复为静态。

主页链接仅作用于登录页和注册页，不影响忘记密码页和重置密码成功页。

 

2.4 页面文案自定义

您可以为登录页和注册页分别自定义标题和描述文案。

登录页默认文案

注册页默认文案

• 输入框内支持直接修改，修改后左侧预览区会实时显示新文案。

• 标题最多 100 字符，描述最多 200 字符。

 

3. 忘记密码页配置

在样式配置中点击 “忘记密码” 选项卡，即可为该页面设置标题和描述。

同样支持语言切换和字符长度限制（标题 100 字符，描述 200 字符）。

4. 重置密码成功页配置

在样式配置中点击 “重置密码成功” 选项卡，即可为该页面设置标题和描述。

同样支持语言切换和字符长度限制（标题 100 字符，描述 200 字符）。

5. 保存与预览

• 所有配置修改后（包括整体样式和页面级文案），需点击页面底部的 “保存” 按钮才会正式生效。

• 您可随时点击右上角 “体验注册/登录” 按钮，在新标签页中查看所有认证页面的最终效果，验证配置是否符合预期。

整体样式与页面级文案独立保存，互不覆盖。整体样式影响所有页面，页面级文案仅影响对应页面。