KE04-example-permission--view-login.md

登录页 login

本文档是 KE04-example-permission--auth-and-rbac.md 的拆分文件

- **示例代码来源**：下文示例代码均从官方示例中抽取。 - **复用原则**：生成登录/权限相关页面时若有疑问，应优先直接复用本示例中的写法（变量命名、API 调用顺序、组件配置等），避免自行发挥。

---

登录页 login

前端视图：auth: false 无需登录，完整的登录页面样式和交互

关键配置

配置项	说明	示例场景
auth: false	页面无需登录即可访问	登录页、注册页
ElFormInput 样式	必须设置 width:100% 撑满容器	表单输入框布局
ElForm.validated()	表单验证，返回 {valid: Boolean}	提交前校验
app.logics.LcapLoginNormal()	登录逻辑调用	用户登录

- **ElFormInput 宽度问题**：AI 生成时容易遗漏 `width:100%`，导致输入框无法撑满容器。必须在 `style` 属性中显式设置 `width:100%` - **表单验证**：使用 `$refs.loginFormRef.validated().valid` 检查表单是否通过验证 - **登录跳转**：登录成功后使用 `nasl.ui.gotoLink('/', undefined)` 跳转到首页

代码示例

$View({ title: '登录页', description: '普通用户登录页面，输入用户名和密码进行身份验证', auth: false, isIndex: false, }) export function login() { let loginForm: { userName: String; password: String };

onCreated(function created() {
    loginForm = { userName: '', password: '' };
    return;
});

return (
    <ElFlex
        ref="el_flex_container"
        direction="vertical"
        alignment="center"
        justify="center"
        style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px;"
    >
        <ElCard
            ref="el_card_login"
            style="width: 400px; padding: 40px 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border-radius: 12px;"
        >
            <ElFlex ref="el_flex_form" direction="vertical" alignment="center" gutter={32}>
                <ElForm ref="loginFormRef" labelPosition="top" style="width: 100%;">
                    <ElFormInput
                        ref="el_form_input_username"
                        modelValue={$sync(loginForm.userName)}
                        placeholder="请输入用户名"
                        prefixIcon="User"
                        size="large"
                        rules={[nasl.validation.required('请输入用户名')]}
                        style="width:100%;"
                        slotLabel={(current) => <ElText ref="el_text_label_user" text="用户名" />}
                    />
                    <ElFormInput
                        ref="el_form_input_password"
                        type="password"
                        modelValue={$sync(loginForm.password)}
                        placeholder="请输入密码"
                        prefixIcon="Lock"
                        size="large"
                        rules={[nasl.validation.required('请输入密码')]}
                        style="margin-bottom:22px;width:100%;"
                        slotLabel={(current) => <ElText ref="el_text_label_pwd" text="密码" />}
                    />
                    <ElButton
                        ref="el_button_login"
                        type="primary"
                        text="登 录"
                        size="large"
                        onClick={function click(event) {
                            let formResult: { valid: Boolean };
                            let loginResult: { code: Integer, msg: String };
                            // [前端 API] 表单验证
                            formResult = $refs.loginFormRef.validated();
                            if (formResult.valid) {
                                // [服务端逻辑] 调用登录接口
                                loginResult = app.logics.LcapLoginNormal(loginForm.userName, loginForm.password);
                                if (loginResult.code == 200) {
                                    // [前端 API] 登录成功后跳转首页
                                    nasl.ui.gotoLink('/', undefined);
                                } else {
                                    // [前端 API] 显示错误消息
                                    nasl.ui.showMessage(loginResult.msg);
                                }
                            }
                            return;
                        }}
                        style="width: 100%; height: 48px; font-size: 16px; font-weight: bold;"
                    />
                </ElForm>
            </ElFlex>
        </ElCard>
    </ElFlex>
);

}