登录页面

TechUI 的工作台模块提供了一个高度封装的登录页面组件 <TuiLogin>。它不仅包含了完整的表单验证、加载状态管理和验证码逻辑，还支持灵活的布局定位和背景风格切换，帮助开发者在几分钟内搭建出美观的认证页面。

组件特性

• 布局灵活：支持表单在屏幕左侧、右侧或居中显示。
• 背景丰富：可以调用TechUI矢量背景，也支持自定义图片背景。
• 交互完整：集成了“忘记密码”、“帮助”等常用入口及加载中状态。
• 高度定制：通过插槽机制，可以在登录框周边嵌入 Logo、主题切换器或装饰性面板（如科幻风格边框）。

基础用法

在 views/login.vue 中引入并使用该组件：

<script setup>
import { reactive, inject } from 'vue';
import { useRouter } from "vue-router";

// 注入全局服务
const { routerTransition, $tMessage } = inject('$global');

// 定义表单数据引用
const loginCfg = reactive({
  form: {
    username: '',
    password: '',
    captcha: '',
  },
  loading: false,
  position: "right", // 表单位置
  backgroundType: "image",
  enableCaptcha: true
});

// 处理登录逻辑
const handleLogin = async (formData) => {
  loginCfg.loading = true;
  
  // 模拟 API 请求
  try {
    // await apiLogin(formData);
    $tMessage({ content: "登录成功", type: 'success' });
    
    // 执行带动画的路由跳转
    routerTransition({ path: '/' });
  } catch (e) {
    loginCfg.loading = false;
  }
}
</script>

<template>
  <TuiLogin
    v-bind="loginCfg"
    @login="handleLogin"
  >
    <template #logo>
      <TuiSystemLogo />
    </template>
  </TuiLogin>
</template>

API 参考

属性 (Props)

属性名	类型	默认值	说明
form	Object	(必填)	表单数据对象，必须包含 username 和 password 字段。
position	String	'center'	登录框在屏幕中的位置。可选值：'center', 'left', 'right'。
backgroundType	String	'vector'	背景渲染模式。可选值：'image' (图片), 'gradient' (渐变), 'vector' (矢量图形)。
backgroundImage	String	-	当 backgroundType 为 'image' 时的图片 URL 地址。
loading	Boolean	false	登录按钮是否处于加载状态。
enableCaptcha	Boolean	true	是否显示验证码输入框。
captchaImg	String	'ERROR'	验证码图片的 Base64 或 URL。
formSize	String	'large'	表单控件的尺寸。可选值：'small', 'default', 'large'。
rules	Object	-	自定义表单验证规则（兼容常见 UI 库的规则格式）。
usernamePlaceholder	String	-	用户名输入框的占位文本。
passwordPlaceholder	String	-	密码输入框的占位文本。
captchaPlaceholder	String	-	验证码输入框的占位文本。
loginButtonText	String	-	登录按钮的文本。
helpText	String	-	“帮助”链接的文本。
forgetText	String	-	“忘记密码”链接的文本。

事件 (Events)

事件名	说明	回调参数
login	当表单验证通过且用户点击登录按钮时触发。	(formData: Object)
help	用户点击“帮助”链接时触发。	-
forget	用户点击“忘记密码”链接时触发。	-
validate	表单验证完成时触发，返回验证结果。	(result: Boolean)
captchaError	当验证码校验逻辑（如有）失败时触发。	-

插槽 (Slots)

<TuiLogin> 提供了丰富的插槽用于扩展 UI：

• #logo：用于放置系统 Logo，通常位于登录框顶部。
• #extra：用于放置额外的控制组件，如主题切换 (TuiThemeToggle) 或控制面板开关。
• #border：用于在登录框周围添加装饰性边框组件（例如 ScifiPanelAlpha），常用于构建科技感风格的登录页。

业务逻辑最佳实践

在 handleLogin 事件回调中，建议按照以下步骤处理业务逻辑：

1. 开启 Loading：设置 loading 属性为 true。
2. API 调用：发送用户名和密码到后端接口。
3. 状态写入：
   • 成功后，将 Token 和 UserID 写入全局状态 $ADMIN.value.userInfo。
   • TuiProvider的全局 watch 会自动将这些信息加密并持久化到本地存储。
4. 菜单处理：
   • 如果是首次登录，可以手动获取菜单数据写入 $ADMIN.value.menu。
   • 或者依赖全局 Provider 的自动恢复机制。
5. 路由跳转：
   • 使用 routerTransition 进行跳转。
   • 检查路由参数 route.query.redirect，如果存在则跳转回该地址，否则跳转至首页。
6. 错误处理：如果 API 失败，关闭 loading 并显示错误提示。